@uxf/ui 11.12.0 → 11.13.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 (5) hide show
  1. package/checkbox-input/checkbox-input.js +1 -1
  2. package/combobox/combobox.stories.d.ts +1 -1
  3. package/css/dropzone.css +62 -19
  4. package/dropzone/dropzone-input.js +4 -4
  5. package/package.json +1 -1
package/checkbox-input/checkbox-input.js CHANGED
@@ -33,7 +33,7 @@ exports.CheckboxInput = (0, react_2.forwardRef)((props, ref) => {
33
33
  const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
34
34
  const errorId = props.isInvalid ? `${id}--error-message` : undefined;
35
35
  return (react_2.default.createElement(react_1.Switch.Group, null,
36
- react_2.default.createElement("div", { className: `uxf-checkbox-input__wrapper ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, style: props.style },
36
+ react_2.default.createElement("div", { className: `uxf-checkbox-input__wrapper ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, style: props.style, "data-name": props.name },
37
37
  react_2.default.createElement(react_1.Switch, { as: react_2.Fragment, checked: props.value, name: props.name, onChange: props.onChange }, ({ checked }) => (react_2.default.createElement(checkbox_1.Checkbox, { className: "uxf-checkbox-input", id: props.id, indeterminate: props.indeterminate, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, onChange: props.onChange, ref: ref, size: props.size, value: checked, name: props.name }))),
38
38
  react_2.default.createElement(react_1.Switch.Label, { className: `uxf-checkbox-input__label ${props.hiddenLabel ? "uxf-checkbox-input__label--hidden" : ""}` },
39
39
  react_2.default.createElement("span", { className: "uxf-checkbox-input__label--text" }, props.label),
package/combobox/combobox.stories.d.ts CHANGED
@@ -3,7 +3,7 @@ import { ComboboxOption } from "./combobox";
3
3
  declare const _default: {
4
4
  title: string;
5
5
  component: {
6
- <ValueId = import("../_select-base").SelectBaseValueId, Option = ComboboxOption<ValueId>, Value = Option>(props: import("./combobox").ComboboxProps<ValueId, Option, Value>): React.JSX.Element;
6
+ <ValueId = import("./combobox").ComboboxValueId, Option = ComboboxOption<ValueId>, Value = Option>(props: import("./combobox").ComboboxProps<ValueId, Option, Value>): React.JSX.Element;
7
7
  displayName: string;
8
8
  };
9
9
  };
package/css/dropzone.css CHANGED
@@ -1,24 +1,39 @@
1
1
  .uxf-dropzone {
2
- @apply rounded-lg focus:outline-none;
2
+ border-radius: theme("borderRadius.lg");
3
+
4
+ &:focus {
5
+ outline: none;
6
+ }
3
7
 
4
8
  &__input {
5
9
  @apply sr-only;
6
10
  }
7
11
 
8
12
  &__label {
9
- @apply rounded-inherit border-lightBorder text-lightLow flex cursor-pointer flex-col items-center justify-center space-y-2
10
- border-2 border-dashed p-4 text-[14px];
13
+ @apply space-y-2;
14
+
15
+ align-items: center;
16
+ border: 2px dashed theme("borderColor.lightBorder");
17
+ border-radius: inherit;
18
+ color: theme("colors.lightLow");
19
+ cursor: pointer;
20
+ display: flex;
21
+ flex-direction: column;
22
+ font-size: 14px;
23
+ justify-content: center;
24
+ padding: theme("spacing.4");
11
25
 
12
26
  &__icon {
13
- @apply h-6;
27
+ height: theme("height.6");
14
28
  }
15
29
 
16
30
  &.is-invalid {
17
- @apply border-error;
31
+ border: theme("borderColor.error.DEFAULT");
18
32
  }
19
33
 
20
34
  &.is-disabled {
21
- @apply bg-lightBorder/50 cursor-not-allowed;
35
+ background-color: theme("backgroundColor.lightBorder/.5");
36
+ cursor: not-allowed;
22
37
  }
23
38
  }
24
39
  }
@@ -27,40 +42,62 @@
27
42
  @apply space-y-2;
28
43
 
29
44
  &__item-wrapper {
30
- @apply flex flex-col items-start justify-start space-y-1;
45
+ @apply space-y-1;
46
+
47
+ align-items: center;
48
+ display: flex;
49
+ flex-direction: column;
50
+ justify-content: flex-start;
31
51
  }
32
52
 
33
53
  &__item {
34
- @apply flex w-full items-center justify-between space-x-6 overflow-auto border px-4 py-3
35
- shadow-sm sm:rounded-md sm:px-6;
54
+ @apply space-x-6 sm:rounded-md sm:px-6;
55
+
56
+ align-items: center;
57
+ border-width: 1px;
58
+ box-shadow: theme("boxShadow.sm");
59
+ display: flex;
60
+ justify-content: space-between;
61
+ overflow: auto;
62
+ padding: theme("spacing.3") theme("spacing.4");
63
+ width: 100%;
36
64
 
37
65
  :root .light & {
38
- @apply border-lightBorder text-lightMedium;
66
+ border-color: theme("borderColor.lightBorder");
67
+ color: theme("colors.lightMedium");
39
68
  }
40
69
 
41
70
  :root .dark & {
42
- @apply border-gray-700 bg-gray-800 text-gray-200;
71
+ background-color: theme("backgroundColor.gray.800");
72
+ border-color: theme("borderColor.gray.700");
73
+ color: theme("colors.gray.200");
43
74
  }
44
75
 
45
76
  &.is-invalid {
46
77
  :root .light & {
47
- @apply border-error text-error;
78
+ border-color: theme("borderColor.error.DEFAULT");
79
+ color: theme("colors.error.DEFAULT");
48
80
  }
49
81
 
50
82
  :root .dark & {
51
- @apply border-error text-error;
83
+ border-color: theme("borderColor.error.DEFAULT");
84
+ color: theme("colors.error.DEFAULT");
52
85
  }
53
86
  }
54
87
 
55
88
  &__block {
56
- @apply flex min-w-0 items-center space-x-4;
89
+ @apply space-x-4;
90
+
91
+ align-items: center;
92
+ display: flex;
93
+ min-width: 0;
57
94
 
58
95
  &:nth-child(2) {
59
- @apply shrink-0;
96
+ flex-shrink: 0;
60
97
  }
61
98
 
62
99
  &__icon {
63
- @apply h-6;
100
+ height: theme("height.6");
64
101
  }
65
102
 
66
103
  &__file-name {
@@ -68,16 +105,22 @@
68
105
  }
69
106
 
70
107
  &__file-name-link {
71
- @apply truncate hover:underline hover:underline-offset-2;
108
+ @apply truncate;
109
+
110
+ &:hover {
111
+ text-decoration: underline;
112
+ text-underline-offset: 2px;
113
+ }
72
114
  }
73
115
 
74
116
  &__file-size {
75
- @apply shrink-0 whitespace-nowrap;
117
+ flex-shrink: 0;
118
+ white-space: nowrap;
76
119
  }
77
120
 
78
121
  &__remove-button {
79
122
  &__icon {
80
- @apply h-4;
123
+ height: theme("height.4");
81
124
  }
82
125
  }
83
126
  }
package/dropzone/dropzone-input.js CHANGED
@@ -67,7 +67,6 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
67
67
  var _a, _b;
68
68
  const refValue = (0, react_1.useRef)();
69
69
  refValue.current = props.value;
70
- const inputRef = (0, react_1.useRef)(null);
71
70
  const handleFileRejected = async (fileRejections) => {
72
71
  fileRejections.forEach((fileRejection) => {
73
72
  if (props.maxFileSize && fileRejection.file.size > props.maxFileSize) {
@@ -78,7 +77,7 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
78
77
  }
79
78
  });
80
79
  };
81
- const handleFileDrop = async (acceptedFiles) => {
80
+ const handleFileDrop = async (acceptedFiles, inputRef) => {
82
81
  const files = acceptedFiles.map((file) => ({
83
82
  ...fileToFileResponse(file),
84
83
  abortController: new AbortController(),
@@ -109,7 +108,7 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
109
108
  .catch((err) => fileRejectedHandler(err, file, onChange, refValue.current, props.onUploadError));
110
109
  }
111
110
  };
112
- const { getRootProps, getInputProps, rootRef } = (0, react_dropzone_1.useDropzone)({
111
+ const { getRootProps, getInputProps, rootRef, inputRef } = (0, react_dropzone_1.useDropzone)({
113
112
  accept: props.accept,
114
113
  disabled: props.isDisabled,
115
114
  maxFiles: props.maxFilesCount,
@@ -118,7 +117,7 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
118
117
  multiple: props.maxFilesCount !== 1,
119
118
  noClick: props.noClick,
120
119
  noDrag: props.noDrag,
121
- onDrop: handleFileDrop,
120
+ onDrop: (acceptedFiles) => handleFileDrop(acceptedFiles, inputRef),
122
121
  preventDropOnDocument: props.noDrag,
123
122
  onDropRejected: handleFileRejected,
124
123
  });
@@ -134,6 +133,7 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
134
133
  typeof props.label === "string" ? react_1.default.createElement("span", null, props.label) : props.label,
135
134
  react_1.default.createElement("input", { ...getInputProps({
136
135
  className: "uxf-dropzone__input",
136
+ disabled: props.isDisabled,
137
137
  id: props.id,
138
138
  name: props.name,
139
139
  type: "file",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "11.12.0",
3
+ "version": "11.13.0",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"