armtek-uikit-react 1.0.92 → 1.0.93

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 (4) hide show
  1. package/assets/Button.scss +2 -0
  2. package/assets/global.css +131 -129
  3. package/package.json +1 -1
  4. package/ui/Form/TextField/TextField.js +28 -31
package/assets/Button.scss CHANGED
@@ -29,6 +29,8 @@
29
29
  display: flex;
30
30
  align-items: center;
31
31
  justify-content: center;
32
+ left:0;
33
+ top:0;
32
34
  //font-size: 0;
33
35
  //& > span{
34
36
  // font-size: initial;
package/assets/global.css CHANGED
@@ -196,8 +196,10 @@ body{
196
196
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v134/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDBIG-ej.woff2) format('woff2');
197
197
  }
198
198
 
199
+ .border-radius {border-radius: var(--border-radius)}
199
200
 
200
201
  .flex{display: flex}
202
+ .block{display: block}
201
203
  .items-center {align-items: center}
202
204
  .flex-wrap {flex-wrap: wrap}
203
205
  .justify-center {justify-content: center}
@@ -337,135 +339,135 @@ body{
337
339
  .text-green-100{color: var(--color-green-100)}
338
340
  .text-green-50{color: var(--color-green-50)}
339
341
 
340
- .bg-primary{color: var(--color-primary)}
341
- .bg-primary-dark{color: var(--color-primary-dark)}
342
- .bg-primary-light{color: var(--color-primary-light)}
343
- .bg-primary-opacity{color: var(--color-primary-opacity)}
344
- .bg-primary-contrast{color: var(--color-primary-contrast)}
345
- .bg-secondary{color: var(--color-secondary)}
346
- .bg-secondary-light{color: var(--color-secondary-light)}
347
- .bg-secondary-dark{color: var(--color-secondary-dark)}
348
- .bg-secondary-opacity{color: var(--color-secondary-opacity)}
349
- .bg-secondary-contrast{color: var(--color-secondary-contrast)}
350
- .bg-neutral{color: var(--color-neutral)}
351
- .bg-neutral-light{color: var(--color-neutral-light)}
352
- .bg-neutral-dark{color: var(--color-neutral-dark)}
353
- .bg-neutral-opacity{color: var(--color-neutral-opacity)}
354
- .bg-neutral-contrast{color: var(--color-neutral-contrast)}
355
- .bg-error{color: var(--color-error)}
356
- .bg-error-light{color: var(--color-error-light)}
357
- .bg-error-dark{color: var(--color-error-dark)}
358
- .bg-error-opacity{color: var(--color-error-opacity)}
359
- .bg-error-contrast{color: var(--color-error-contrast)}
360
- .bg-color-warning{color: var(--color-warning)}
361
- .bg-warning-light{color: var(--color-warning-light)}
362
- .bg-warning-dark{color: var(--color-warning-dark)}
363
- .bg-warning-opacity{color: var(--color-warning-opacity)}
364
- .bg-warning-contrast{color: var(--color-warning-contrast)}
365
- .bg-info{color: var(--color-info)}
366
- .bg-info-light{color: var(--color-info-light)}
367
- .bg-info-dark{color: var(--color-info-dark)}
368
- .bg-info-opacity{color: var(--color-info-opacity)}
369
- .bg-info-contrast{color: var(--color-info-contrast)}
370
- .bg-success{color: var(--color-success)}
371
- .bg-success-light{color: var(--color-success-light)}
372
- .bg-success-dark{color: var(--color-success-dark)}
373
- .bg-success-opacity{color: var(--color-success-opacity)}
374
- .bg-success-contrast{color: var(--color-success-contrast)}
375
- .bg-orange-a700{color: var(--color-orange-a700)}
376
- .bg-orange-a400{color: var(--color-orange-a400)}
377
- .bg-orange-a200{color: var(--color-orange-a200)}
378
- .bg-orange-a100{color: var(--color-orange-a100)}
379
- .bg-orange-d2{color: var(--color-orange-d2)}
380
- .bg-orange-d1{color: var(--color-orange-d1)}
381
- .bg-orange-900{color: var(--color-orange-900)}
382
- .bg-orange-800{color: var(--color-orange-800)}
383
- .bg-orange-700{color: var(--color-orange-700)}
384
- .bg-orange-600{color: var(--color-orange-600)}
385
- .bg-orange-500{color: var(--color-orange-500)}
386
- .bg-orange-400{color: var(--color-orange-400)}
387
- .bg-orange-300{color: var(--color-orange-300)}
388
- .bg-orange-200{color: var(--color-orange-200)}
389
- .bg-orange-100{color: var(--color-orange-100)}
390
- .bg-orange-50{color: var(--color-orange-50)}
391
- .bg-blue-a700{color: var(--color-blue-a700)}
392
- .bg-blue-a400{color: var(--color-blue-a400)}
393
- .bg-blue-a200{color: var(--color-blue-a200)}
394
- .bg-blue-a100{color: var(--color-blue-a100)}
395
- .bg-blue-d2{color: var(--color-blue-d2)}
396
- .bg-blue-d1{color: var(--color-blue-d1)}
397
- .bg-blue-900{color: var(--color-blue-900)}
398
- .bg-blue-800{color: var(--color-blue-800)}
399
- .bg-blue-700{color: var(--color-blue-700)}
400
- .bg-blue-600{color: var(--color-blue-600)}
401
- .bg-blue-500{color: var(--color-blue-500)}
402
- .bg-blue-400{color: var(--color-blue-400)}
403
- .bg-blue-300{color: var(--color-blue-300)}
404
- .bg-blue-200{color: var(--color-blue-200)}
405
- .bg-blue-100{color: var(--color-blue-100)}
406
- .bg-blue-50{color: var(--color-blue-50)}
407
- .bg-gray-a700{color: var(--color-gray-a700)}
408
- .bg-gray-a400{color: var(--color-gray-a400)}
409
- .bg-gray-a200{color: var(--color-gray-a200)}
410
- .bg-gray-a100{color: var(--color-gray-a100)}
411
- .bg-gray-900{color: var(--color-gray-900)}
412
- .bg-gray-800{color: var(--color-gray-800)}
413
- .bg-gray-700{color: var(--color-gray-700)}
414
- .bg-gray-600{color: var(--color-gray-600)}
415
- .bg-gray-500{color: var(--color-gray-500)}
416
- .bg-gray-400{color: var(--color-gray-400)}
417
- .bg-gray-300{color: var(--color-gray-300)}
418
- .bg-gray-200{color: var(--color-gray-200)}
419
- .bg-gray-100{color: var(--color-gray-100)}
420
- .bg-gray-50{color: var(--color-gray-50)}
421
- .bg-red-a700{color: var(--color-red-a700)}
422
- .bg-red-a400{color: var(--color-red-a400)}
423
- .bg-red-a200{color: var(--color-red-a200)}
424
- .bg-red-a100{color: var(--color-red-a100)}
425
- .bg-red-d2{color: var(--color-red-d2)}
426
- .bg-red-d2{color: var(--color-red-d1)}
427
- .bg-red-900{color: var(--color-red-900)}
428
- .bg-red-800{color: var(--color-red-800)}
429
- .bg-red-700{color: var(--color-red-700)}
430
- .bg-red-600{color: var(--color-red-600)}
431
- .bg-red-500{color: var(--color-red-500)}
432
- .bg-red-400{color: var(--color-red-400)}
433
- .bg-red-300{color: var(--color-red-300)}
434
- .bg-red-200{color: var(--color-red-200)}
435
- .bg-red-100{color: var(--color-red-100)}
436
- .bg-red-50{color: var(--color-red-50)}
437
- .bg-yellow-a700{color: var(--color-yellow-a700)}
438
- .bg-yellow-a400{color: var(--color-yellow-a400)}
439
- .bg-yellow-a200{color: var(--color-yellow-a200)}
440
- .bg-yellow-a100{color: var(--color-yellow-a100)}
441
- .bg-yellow-d2{color: var(--color-yellow-d2)}
442
- .bg-yellow-d1{color: var(--color-yellow-d1)}
443
- .bg-yellow-900{color: var(--color-yellow-900)}
444
- .bg-yellow-800{color: var(--color-yellow-800)}
445
- .bg-yellow-700{color: var(--color-yellow-700)}
446
- .bg-yellow-600{color: var(--color-yellow-600)}
447
- .bg-yellow-500{color: var(--color-yellow-500)}
448
- .bg-yellow-400{color: var(--color-yellow-400)}
449
- .bg-yellow-300{color: var(--color-yellow-300)}
450
- .bg-yellow-200{color: var(--color-yellow-200)}
451
- .bg-yellow-100{color: var(--color-yellow-100)}
452
- .bg-yellow-50{color: var(--color-yellow-50)}
453
- .bg-green-a700{color: var(--color-green-a700)}
454
- .bg-green-a400{color: var(--color-green-a400)}
455
- .bg-green-a200{color: var(--color-green-a200)}
456
- .bg-green-a100{color: var(--color-green-a100)}
457
- .bg-green-d2{color: var(--color-green-d2)}
458
- .bg-green-d1{color: var(--color-green-d1)}
459
- .bg-green-900{color: var(--color-green-900)}
460
- .bg-green-800{color: var(--color-green-800)}
461
- .bg-green-700{color: var(--color-green-700)}
462
- .bg-green-600{color: var(--color-green-600)}
463
- .bg-green-500{color: var(--color-green-500)}
464
- .bg-green-400{color: var(--color-green-400)}
465
- .bg-green-300{color: var(--color-green-300)}
466
- .bg-green-200{color: var(--color-green-200)}
467
- .bg-green-100{color: var(--color-green-100)}
468
- .bg-green-50{color: var(--color-green-50)}
342
+ .bg-primary{background-color: var(--color-primary)}
343
+ .bg-primary-dark{background-color: var(--color-primary-dark)}
344
+ .bg-primary-light{background-color: var(--color-primary-light)}
345
+ .bg-primary-opacity{background-color: var(--color-primary-opacity)}
346
+ .bg-primary-contrast{background-color: var(--color-primary-contrast)}
347
+ .bg-secondary{background-color: var(--color-secondary)}
348
+ .bg-secondary-light{background-color: var(--color-secondary-light)}
349
+ .bg-secondary-dark{background-color: var(--color-secondary-dark)}
350
+ .bg-secondary-opacity{background-color: var(--color-secondary-opacity)}
351
+ .bg-secondary-contrast{background-color: var(--color-secondary-contrast)}
352
+ .bg-neutral{background-color: var(--color-neutral)}
353
+ .bg-neutral-light{background-color: var(--color-neutral-light)}
354
+ .bg-neutral-dark{background-color: var(--color-neutral-dark)}
355
+ .bg-neutral-opacity{background-color: var(--color-neutral-opacity)}
356
+ .bg-neutral-contrast{background-color: var(--color-neutral-contrast)}
357
+ .bg-error{background-color: var(--color-error)}
358
+ .bg-error-light{background-color: var(--color-error-light)}
359
+ .bg-error-dark{background-color: var(--color-error-dark)}
360
+ .bg-error-opacity{background-color: var(--color-error-opacity)}
361
+ .bg-error-contrast{background-color: var(--color-error-contrast)}
362
+ .bg-color-warning{background-color: var(--color-warning)}
363
+ .bg-warning-light{background-color: var(--color-warning-light)}
364
+ .bg-warning-dark{background-color: var(--color-warning-dark)}
365
+ .bg-warning-opacity{background-color: var(--color-warning-opacity)}
366
+ .bg-warning-contrast{background-color: var(--color-warning-contrast)}
367
+ .bg-info{background-color: var(--color-info)}
368
+ .bg-info-light{background-color: var(--color-info-light)}
369
+ .bg-info-dark{background-color: var(--color-info-dark)}
370
+ .bg-info-opacity{background-color: var(--color-info-opacity)}
371
+ .bg-info-contrast{background-color: var(--color-info-contrast)}
372
+ .bg-success{background-color: var(--color-success)}
373
+ .bg-success-light{background-color: var(--color-success-light)}
374
+ .bg-success-dark{background-color: var(--color-success-dark)}
375
+ .bg-success-opacity{background-color: var(--color-success-opacity)}
376
+ .bg-success-contrast{background-color: var(--color-success-contrast)}
377
+ .bg-orange-a700{background-color: var(--color-orange-a700)}
378
+ .bg-orange-a400{background-color: var(--color-orange-a400)}
379
+ .bg-orange-a200{background-color: var(--color-orange-a200)}
380
+ .bg-orange-a100{background-color: var(--color-orange-a100)}
381
+ .bg-orange-d2{background-color: var(--color-orange-d2)}
382
+ .bg-orange-d1{background-color: var(--color-orange-d1)}
383
+ .bg-orange-900{background-color: var(--color-orange-900)}
384
+ .bg-orange-800{background-color: var(--color-orange-800)}
385
+ .bg-orange-700{background-color: var(--color-orange-700)}
386
+ .bg-orange-600{background-color: var(--color-orange-600)}
387
+ .bg-orange-500{background-color: var(--color-orange-500)}
388
+ .bg-orange-400{background-color: var(--color-orange-400)}
389
+ .bg-orange-300{background-color: var(--color-orange-300)}
390
+ .bg-orange-200{background-color: var(--color-orange-200)}
391
+ .bg-orange-100{background-color: var(--color-orange-100)}
392
+ .bg-orange-50{background-color: var(--color-orange-50)}
393
+ .bg-blue-a700{background-color: var(--color-blue-a700)}
394
+ .bg-blue-a400{background-color: var(--color-blue-a400)}
395
+ .bg-blue-a200{background-color: var(--color-blue-a200)}
396
+ .bg-blue-a100{background-color: var(--color-blue-a100)}
397
+ .bg-blue-d2{background-color: var(--color-blue-d2)}
398
+ .bg-blue-d1{background-color: var(--color-blue-d1)}
399
+ .bg-blue-900{background-color: var(--color-blue-900)}
400
+ .bg-blue-800{background-color: var(--color-blue-800)}
401
+ .bg-blue-700{background-color: var(--color-blue-700)}
402
+ .bg-blue-600{background-color: var(--color-blue-600)}
403
+ .bg-blue-500{background-color: var(--color-blue-500)}
404
+ .bg-blue-400{background-color: var(--color-blue-400)}
405
+ .bg-blue-300{background-color: var(--color-blue-300)}
406
+ .bg-blue-200{background-color: var(--color-blue-200)}
407
+ .bg-blue-100{background-color: var(--color-blue-100)}
408
+ .bg-blue-50{background-color: var(--color-blue-50)}
409
+ .bg-gray-a700{background-color: var(--color-gray-a700)}
410
+ .bg-gray-a400{background-color: var(--color-gray-a400)}
411
+ .bg-gray-a200{background-color: var(--color-gray-a200)}
412
+ .bg-gray-a100{background-color: var(--color-gray-a100)}
413
+ .bg-gray-900{background-color: var(--color-gray-900)}
414
+ .bg-gray-800{background-color: var(--color-gray-800)}
415
+ .bg-gray-700{background-color: var(--color-gray-700)}
416
+ .bg-gray-600{background-color: var(--color-gray-600)}
417
+ .bg-gray-500{background-color: var(--color-gray-500)}
418
+ .bg-gray-400{background-color: var(--color-gray-400)}
419
+ .bg-gray-300{background-color: var(--color-gray-300)}
420
+ .bg-gray-200{background-color: var(--color-gray-200)}
421
+ .bg-gray-100{background-color: var(--color-gray-100)}
422
+ .bg-gray-50{background-color: var(--color-gray-50)}
423
+ .bg-red-a700{background-color: var(--color-red-a700)}
424
+ .bg-red-a400{background-color: var(--color-red-a400)}
425
+ .bg-red-a200{background-color: var(--color-red-a200)}
426
+ .bg-red-a100{background-color: var(--color-red-a100)}
427
+ .bg-red-d2{background-color: var(--color-red-d2)}
428
+ .bg-red-d2{background-color: var(--color-red-d1)}
429
+ .bg-red-900{background-color: var(--color-red-900)}
430
+ .bg-red-800{background-color: var(--color-red-800)}
431
+ .bg-red-700{background-color: var(--color-red-700)}
432
+ .bg-red-600{background-color: var(--color-red-600)}
433
+ .bg-red-500{background-color: var(--color-red-500)}
434
+ .bg-red-400{background-color: var(--color-red-400)}
435
+ .bg-red-300{background-color: var(--color-red-300)}
436
+ .bg-red-200{background-color: var(--color-red-200)}
437
+ .bg-red-100{background-color: var(--color-red-100)}
438
+ .bg-red-50{background-color: var(--color-red-50)}
439
+ .bg-yellow-a700{background-color: var(--color-yellow-a700)}
440
+ .bg-yellow-a400{background-color: var(--color-yellow-a400)}
441
+ .bg-yellow-a200{background-color: var(--color-yellow-a200)}
442
+ .bg-yellow-a100{background-color: var(--color-yellow-a100)}
443
+ .bg-yellow-d2{background-color: var(--color-yellow-d2)}
444
+ .bg-yellow-d1{background-color: var(--color-yellow-d1)}
445
+ .bg-yellow-900{background-color: var(--color-yellow-900)}
446
+ .bg-yellow-800{background-color: var(--color-yellow-800)}
447
+ .bg-yellow-700{background-color: var(--color-yellow-700)}
448
+ .bg-yellow-600{background-color: var(--color-yellow-600)}
449
+ .bg-yellow-500{background-color: var(--color-yellow-500)}
450
+ .bg-yellow-400{background-color: var(--color-yellow-400)}
451
+ .bg-yellow-300{background-color: var(--color-yellow-300)}
452
+ .bg-yellow-200{background-color: var(--color-yellow-200)}
453
+ .bg-yellow-100{background-color: var(--color-yellow-100)}
454
+ .bg-yellow-50{background-color: var(--color-yellow-50)}
455
+ .bg-green-a700{background-color: var(--color-green-a700)}
456
+ .bg-green-a400{background-color: var(--color-green-a400)}
457
+ .bg-green-a200{background-color: var(--color-green-a200)}
458
+ .bg-green-a100{background-color: var(--color-green-a100)}
459
+ .bg-green-d2{background-color: var(--color-green-d2)}
460
+ .bg-green-d1{background-color: var(--color-green-d1)}
461
+ .bg-green-900{background-color: var(--color-green-900)}
462
+ .bg-green-800{background-color: var(--color-green-800)}
463
+ .bg-green-700{background-color: var(--color-green-700)}
464
+ .bg-green-600{background-color: var(--color-green-600)}
465
+ .bg-green-500{background-color: var(--color-green-500)}
466
+ .bg-green-400{background-color: var(--color-green-400)}
467
+ .bg-green-300{background-color: var(--color-green-300)}
468
+ .bg-green-200{background-color: var(--color-green-200)}
469
+ .bg-green-100{background-color: var(--color-green-100)}
470
+ .bg-green-50{background-color: var(--color-green-50)}
469
471
 
470
472
 
471
473
 
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"armtek-uikit-react","version":"1.0.92","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
1
+ {"name":"armtek-uikit-react","version":"1.0.93","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
package/ui/Form/TextField/TextField.js CHANGED
@@ -26,7 +26,6 @@ export const TextField = /*#__PURE__*/forwardRef((props, ref) => {
26
26
  editable = true,
27
27
  ...inputProps
28
28
  } = props;
29
- let [value, setValue] = useState('');
30
29
  let [focused, setFocused] = useState(false);
31
30
  const inputRef = useRef(ref);
32
31
  const handleFocus = e => {
@@ -50,38 +49,38 @@ export const TextField = /*#__PURE__*/forwardRef((props, ref) => {
50
49
  let endContentExists = endAdornment || error || success;
51
50
  let Component = multiline ? 'textarea' : 'input';
52
51
  let realFocused = props.focused !== undefined ? props.focused : focused;
53
- return /*#__PURE__*/_jsxs(_Fragment, {
54
- children: [/*#__PURE__*/_jsxs(TextFieldContainer, {
55
- size: size,
56
- variant: variant,
57
- disabled: inputProps.disabled,
58
- focused: realFocused,
59
- onClick: () => {
60
- var _inputRef$current;
61
- return editable ? (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus() : null;
62
- },
52
+ return /*#__PURE__*/_jsx(_Fragment, {
53
+ children: /*#__PURE__*/_jsxs("div", {
63
54
  className: className,
64
- error: error,
65
- children: [/*#__PURE__*/_jsx(TextFieldInput, {
66
- Component: Component,
67
- ref: inputRef,
68
- value: value,
69
- onChange: e => setValue(e.target.value),
55
+ children: [/*#__PURE__*/_jsxs(TextFieldContainer, {
70
56
  size: size,
71
57
  variant: variant,
72
- label: label,
58
+ disabled: inputProps.disabled,
73
59
  focused: realFocused,
60
+ onClick: () => {
61
+ var _inputRef$current;
62
+ return editable ? (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus() : null;
63
+ },
74
64
  error: error,
75
- multiline: multiline,
76
- ...inputProps,
77
- onFocus: handleFocus,
78
- onBlur: handleBlur
79
- }), endContentExists && endContent]
80
- }), helperText && /*#__PURE__*/_jsx(HelperText, {
81
- className: css.textfield__helperText,
82
- error: error,
83
- children: helperText
84
- })]
65
+ children: [/*#__PURE__*/_jsx(TextFieldInput, {
66
+ Component: Component,
67
+ ref: inputRef,
68
+ size: size,
69
+ variant: variant,
70
+ label: label,
71
+ focused: realFocused,
72
+ error: error,
73
+ multiline: multiline,
74
+ ...inputProps,
75
+ onFocus: handleFocus,
76
+ onBlur: handleBlur
77
+ }), endContentExists && endContent]
78
+ }), helperText && /*#__PURE__*/_jsx(HelperText, {
79
+ className: css.textfield__helperText,
80
+ error: error,
81
+ children: helperText
82
+ })]
83
+ })
85
84
  });
86
85
  });
87
86
  export const TextFieldContainer = props => {
@@ -116,7 +115,6 @@ export const TextFieldInput = /*#__PURE__*/forwardRef((props, ref) => {
116
115
  error,
117
116
  focused,
118
117
  label,
119
- value,
120
118
  className,
121
119
  ...inputProps
122
120
  } = props;
@@ -131,7 +129,6 @@ export const TextFieldInput = /*#__PURE__*/forwardRef((props, ref) => {
131
129
  }),
132
130
  children: [/*#__PURE__*/_jsx(Component, {
133
131
  ref: ref,
134
- value: value,
135
132
  ...inputProps,
136
133
  onWheel: handleWheel,
137
134
  className: clsx(css.textfield__input, css['size_' + size], css['textfield__input_' + variant], {
@@ -142,7 +139,7 @@ export const TextFieldInput = /*#__PURE__*/forwardRef((props, ref) => {
142
139
  }, className)
143
140
  }), label && /*#__PURE__*/_jsx("span", {
144
141
  className: clsx(css.textfield__label, {
145
- [css.textfield__label_focused]: focused || !!value || !!props.value,
142
+ [css.textfield__label_focused]: focused || !!props.value,
146
143
  [css.textfield__label_small]: size === 'small',
147
144
  [css.textfield__label_error]: error
148
145
  }),