@uxf/ui 11.11.3 → 11.12.1

package/_select-base/_select-base.js

@@ -82,7 +82,7 @@ const _SelectBase = (props) => {
     const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", (_c = props.dropdownMatchesInputWidth) !== null && _c !== void 0 ? _c : true, props.dropdownStrategy);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, props.forwardRef, dropdown.refs.setReference), [dropdown.refs.setReference, props.forwardRef]);
     const HUIComponent = props.HUIComponent;
-    return (react_2.default.createElement(HUIComponent, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-select-base", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), "data-testid": id, disabled: props.isDisabled || props.isReadOnly, onChange: props.onChange, style: props.style, value: props.value }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
+    return (react_2.default.createElement(HUIComponent, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-select-base", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), "data-name": props.name, disabled: props.isDisabled || props.isReadOnly, onChange: props.onChange, style: props.style, value: props.value }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
         react_2.default.createElement("div", { className: "uxf-form-component__label" },
             react_2.default.createElement(HUIComponent.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label)),
         react_2.default.createElement("div", { className: "uxf-form-component__input" },

package/combobox/combobox.stories.d.ts

@@ -3,7 +3,7 @@ import { ComboboxOption } from "./combobox";
 declare const _default: {
     title: string;
     component: {
-        <ValueId = import("../_select-base").SelectBaseValueId, Option = ComboboxOption<ValueId>, Value = Option>(props: import("./combobox").ComboboxProps<ValueId, Option, Value>): React.JSX.Element;
+        <ValueId = import("./combobox").ComboboxValueId, Option = ComboboxOption<ValueId>, Value = Option>(props: import("./combobox").ComboboxProps<ValueId, Option, Value>): React.JSX.Element;
         displayName: string;
     };
 };

package/css/dropzone.css

@@ -1,24 +1,39 @@
 .uxf-dropzone {
-    @apply rounded-lg focus:outline-none;
+    border-radius: theme("borderRadius.lg");
+
+    &:focus {
+        outline: none;
+    }
 
     &__input {
         @apply sr-only;
     }
 
     &__label {
-        @apply rounded-inherit border-lightBorder text-lightLow flex cursor-pointer flex-col items-center justify-center space-y-2
-            border-2 border-dashed p-4 text-[14px];
+        @apply space-y-2;
+
+        align-items: center;
+        border: 2px dashed theme("borderColor.lightBorder");
+        border-radius: inherit;
+        color: theme("colors.lightLow");
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        font-size: 14px;
+        justify-content: center;
+        padding: theme("spacing.4");
 
         &__icon {
-            @apply h-6;
+            height: theme("height.6");
         }
 
         &.is-invalid {
-            @apply border-error;
+            border: theme("borderColor.error.DEFAULT");
         }
 
         &.is-disabled {
-            @apply bg-lightBorder/50 cursor-not-allowed;
+            background-color: theme("backgroundColor.lightBorder/.5");
+            cursor: not-allowed;
         }
     }
 }
@@ -27,40 +42,62 @@
     @apply space-y-2;
 
     &__item-wrapper {
-        @apply flex flex-col items-start justify-start space-y-1;
+        @apply space-y-1;
+
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
     }
 
     &__item {
-        @apply flex w-full items-center justify-between space-x-6 overflow-auto border px-4 py-3
-            shadow-sm sm:rounded-md sm:px-6;
+        @apply space-x-6 sm:rounded-md sm:px-6;
+
+        align-items: center;
+        border-width: 1px;
+        box-shadow: theme("boxShadow.sm");
+        display: flex;
+        justify-content: space-between;
+        overflow: auto;
+        padding: theme("spacing.3") theme("spacing.4");
+        width: 100%;
 
         :root .light & {
-            @apply border-lightBorder text-lightMedium;
+            border-color: theme("borderColor.lightBorder");
+            color: theme("colors.lightMedium");
         }
 
         :root .dark & {
-            @apply border-gray-700 bg-gray-800 text-gray-200;
+            background-color: theme("backgroundColor.gray.800");
+            border-color: theme("borderColor.gray.700");
+            color: theme("colors.gray.200");
         }
 
         &.is-invalid {
             :root .light & {
-                @apply border-error text-error;
+                border-color: theme("borderColor.error.DEFAULT");
+                color: theme("colors.error.DEFAULT");
             }
 
             :root .dark & {
-                @apply border-error text-error;
+                border-color: theme("borderColor.error.DEFAULT");
+                color: theme("colors.error.DEFAULT");
             }
         }
 
         &__block {
-            @apply flex min-w-0 items-center space-x-4;
+            @apply space-x-4;
+
+            align-items: center;
+            display: flex;
+            min-width: 0;
 
             &:nth-child(2) {
-                @apply shrink-0;
+                flex-shrink: 0;
             }
 
             &__icon {
-                @apply h-6;
+                height: theme("height.6");
             }
 
             &__file-name {
@@ -68,16 +105,22 @@
             }
 
             &__file-name-link {
-                @apply truncate hover:underline hover:underline-offset-2;
+                @apply truncate;
+
+                &:hover {
+                    text-decoration: underline;
+                    text-underline-offset: 2px;
+                }
             }
 
             &__file-size {
-                @apply shrink-0 whitespace-nowrap;
+                flex-shrink: 0;
+                white-space: nowrap;
             }
 
             &__remove-button {
                 &__icon {
-                    @apply h-4;
+                    height: theme("height.4");
                 }
             }
         }

package/dropzone/dropzone-input.js

@@ -67,7 +67,6 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const refValue = (0, react_1.useRef)();
     refValue.current = props.value;
-    const inputRef = (0, react_1.useRef)(null);
     const handleFileRejected = async (fileRejections) => {
         fileRejections.forEach((fileRejection) => {
             if (props.maxFileSize && fileRejection.file.size > props.maxFileSize) {
@@ -78,7 +77,7 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
             }
         });
     };
-    const handleFileDrop = async (acceptedFiles) => {
+    const handleFileDrop = async (acceptedFiles, inputRef) => {
         const files = acceptedFiles.map((file) => ({
             ...fileToFileResponse(file),
             abortController: new AbortController(),
@@ -109,7 +108,7 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
                 .catch((err) => fileRejectedHandler(err, file, onChange, refValue.current, props.onUploadError));
         }
     };
-    const { getRootProps, getInputProps, rootRef } = (0, react_dropzone_1.useDropzone)({
+    const { getRootProps, getInputProps, rootRef, inputRef } = (0, react_dropzone_1.useDropzone)({
         accept: props.accept,
         disabled: props.isDisabled,
         maxFiles: props.maxFilesCount,
@@ -118,7 +117,7 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
         multiple: props.maxFilesCount !== 1,
         noClick: props.noClick,
         noDrag: props.noDrag,
-        onDrop: handleFileDrop,
+        onDrop: (acceptedFiles) => handleFileDrop(acceptedFiles, inputRef),
         preventDropOnDocument: props.noDrag,
         onDropRejected: handleFileRejected,
     });
@@ -134,6 +133,7 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
             typeof props.label === "string" ? react_1.default.createElement("span", null, props.label) : props.label,
             react_1.default.createElement("input", { ...getInputProps({
                     className: "uxf-dropzone__input",
+                    disabled: props.isDisabled,
                     id: props.id,
                     name: props.name,
                     type: "file",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.11.3",
+  "version": "11.12.1",
   "description": "",
   "publishConfig": {
     "access": "public"