@pdg/react-form 1.0.159 → 1.0.161

package/dist/FormItemTextFieldBase/FormTag/FormTag.d.ts

@@ -8,5 +8,6 @@ declare const FormTag: React.ForwardRefExoticComponent<Omit<FormTextFieldProps<F
     getLimitTagsText?: (more: number) => ReactNode;
     onAppendTag?: (tag: string) => boolean;
     onRemoveTag?: (tag: string) => boolean;
+    onTagClick?: (tag: string) => void;
 } & React.RefAttributes<FormTagCommands>>;
 export default FormTag;

package/dist/FormItemTextFieldBase/FormTag/FormTag.types.d.ts

@@ -11,4 +11,5 @@ export type FormTagProps = Omit<FormTextFieldProps<FormTagValue, false>, 'type'>
     getLimitTagsText?: (more: number) => ReactNode;
     onAppendTag?: (tag: string) => boolean;
     onRemoveTag?: (tag: string) => boolean;
+    onTagClick?: (tag: string) => void;
 };

package/dist/index.esm.js

@@ -1599,7 +1599,7 @@ var FormTag = React.forwardRef(function (_a, ref) {
      * ******************************************************************************************************************/
     var initVariant = _a.variant, initSize = _a.size, 
     //----------------------------------------------------------------------------------------------------------------
-    className = _a.className, name = _a.name, _b = _a.value, initValue = _b === void 0 ? _emptyValue : _b, exceptValue = _a.exceptValue, _c = _a.clear, clear = _c === void 0 ? true : _c, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, initDisabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, helperText = _a.helperText, _d = _a.formValueSeparator, formValueSeparator = _d === void 0 ? ',' : _d, formValueSort = _a.formValueSort, limitTags = _a.limitTags, getLimitTagsText = _a.getLimitTagsText, slotProps = _a.slotProps, onAppendTag = _a.onAppendTag, onRemoveTag = _a.onRemoveTag, onValidate = _a.onValidate, onChange = _a.onChange, onValue = _a.onValue, props = __rest(_a, ["variant", "size", "className", "name", "value", "exceptValue", "clear", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "limitTags", "getLimitTagsText", "slotProps", "onAppendTag", "onRemoveTag", "onValidate", "onChange", "onValue"]);
+    className = _a.className, name = _a.name, _b = _a.value, initValue = _b === void 0 ? _emptyValue : _b, exceptValue = _a.exceptValue, _c = _a.clear, clear = _c === void 0 ? true : _c, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, initDisabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, helperText = _a.helperText, _d = _a.formValueSeparator, formValueSeparator = _d === void 0 ? ',' : _d, formValueSort = _a.formValueSort, limitTags = _a.limitTags, getLimitTagsText = _a.getLimitTagsText, slotProps = _a.slotProps, onAppendTag = _a.onAppendTag, onRemoveTag = _a.onRemoveTag, onTagClick = _a.onTagClick, onValidate = _a.onValidate, onChange = _a.onChange, onValue = _a.onValue, props = __rest(_a, ["variant", "size", "className", "name", "value", "exceptValue", "clear", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "limitTags", "getLimitTagsText", "slotProps", "onAppendTag", "onRemoveTag", "onTagClick", "onValidate", "onChange", "onValue"]);
     var _e = useFormState(), formVariant = _e.variant, formSize = _e.size, formFullWidth = _e.fullWidth, formDisabled = _e.disabled, onAddValueItem = _e.onAddValueItem, onValueChange = _e.onValueChange, onValueChangeByUser = _e.onValueChangeByUser, onRequestSearchSubmit = _e.onRequestSearchSubmit, otherFormState = __rest(_e, ["variant", "size", "fullWidth", "disabled", "onAddValueItem", "onValueChange", "onValueChangeByUser", "onRequestSearchSubmit"]);
     /********************************************************************************************************************
      * FormState - Variables
@@ -1691,10 +1691,11 @@ var FormTag = React.forwardRef(function (_a, ref) {
      * Function - appendTag, removeTag
      * ******************************************************************************************************************/
     var appendTag = useCallback(function (tag) {
-        if (!valueSet.has(tag)) {
-            if (onAppendTag && !onAppendTag(tag))
+        var finalTag = tag.trim();
+        if (notEmpty(finalTag) && !valueSet.has(finalTag)) {
+            if (onAppendTag && !onAppendTag(finalTag))
                 return;
-            valueSet.add(tag);
+            valueSet.add(finalTag);
             var finalValue_1 = updateValue(valueSet);
             nextTick(function () {
                 onValueChangeByUser(name, finalValue_1);
@@ -1732,8 +1733,8 @@ var FormTag = React.forwardRef(function (_a, ref) {
         }
     }, [ref, getCommands]);
     var handleRenderValue = useCallback(function (tags) {
-        return tags.map(function (tag) { return (React.createElement(Chip, { className: 'MuiAutocomplete-tag', key: tag, label: tag, size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, disabled: readOnly || disabled, onDelete: readOnly || disabled ? undefined : function () { return removeTag(tag); } })); });
-    }, [disabled, readOnly, removeTag, size, variant]);
+        return tags.map(function (tag) { return (React.createElement(Chip, { className: 'MuiAutocomplete-tag', key: tag, label: tag, size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, disabled: readOnly || disabled, onDelete: readOnly || disabled ? undefined : function () { return removeTag(tag); }, onClick: function () { return onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(tag); } })); });
+    }, [disabled, onTagClick, readOnly, removeTag, size, variant]);
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
@@ -9348,7 +9349,7 @@ var FormFile = React.forwardRef(function (_a, ref) {
                         React.createElement(PdgIcon, { style: { verticalAlign: 'middle', marginRight: 4 } }, labelIcon),
                         React.createElement("span", { style: { verticalAlign: 'middle' } }, initLabel))) : (initLabel), size: size, required: required, value: value || '', focused: focused, disabled: disabled, fullWidth: true, tabIndex: tabIndex, error: error, slotProps: {
                         inputLabel: labelShrink ? { shrink: labelShrink } : undefined,
-                        htmlInput: { readOnly: true },
+                        htmlInput: { readOnly: true, tabIndex: tabIndex },
                         input: {
                             endAdornment: (React.createElement(InputAdornment, { position: 'end' },
                                 React.createElement("div", { className: 'input-file-wrap' },
@@ -9507,7 +9508,7 @@ FormFile.displayName = 'FormFile';insertStyle(".FormImageFile .preview-img{max-w
      * Render
      * ******************************************************************************************************************/
     return (React.createElement(React.Fragment, null,
-        React.createElement(FormFile, __assign({ ref: ref, className: classNames(className, 'FormImageFile'), accept: accept, value: value, preview: preview && value ? (React.createElement("a", { href: value, target: '_blank' },
+        React.createElement(FormFile, __assign({ ref: ref, className: classNames(className, 'FormImageFile'), accept: accept, value: value, preview: preview && value ? (React.createElement("a", { href: value, target: '_blank', tabIndex: -1 },
                 React.createElement(Tooltip, { title: React.createElement("div", { style: { paddingTop: 3, paddingBottom: 3 } },
                         React.createElement("img", { src: value, style: { maxWidth: '100%', verticalAlign: 'middle' }, alt: '' })) },
                     React.createElement("img", { className: 'preview-img', src: value, style: { maxHeight: previewMaxHeight || undefined }, alt: '' })))) : undefined, onChange: handleChange, onFile: handleFile, onLink: handleLink }, props)),

package/dist/index.js

@@ -1599,7 +1599,7 @@ var FormTag = React.forwardRef(function (_a, ref) {
      * ******************************************************************************************************************/
     var initVariant = _a.variant, initSize = _a.size, 
     //----------------------------------------------------------------------------------------------------------------
-    className = _a.className, name = _a.name, _b = _a.value, initValue = _b === void 0 ? _emptyValue : _b, exceptValue = _a.exceptValue, _c = _a.clear, clear = _c === void 0 ? true : _c, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, initDisabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, helperText = _a.helperText, _d = _a.formValueSeparator, formValueSeparator = _d === void 0 ? ',' : _d, formValueSort = _a.formValueSort, limitTags = _a.limitTags, getLimitTagsText = _a.getLimitTagsText, slotProps = _a.slotProps, onAppendTag = _a.onAppendTag, onRemoveTag = _a.onRemoveTag, onValidate = _a.onValidate, onChange = _a.onChange, onValue = _a.onValue, props = __rest(_a, ["variant", "size", "className", "name", "value", "exceptValue", "clear", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "limitTags", "getLimitTagsText", "slotProps", "onAppendTag", "onRemoveTag", "onValidate", "onChange", "onValue"]);
+    className = _a.className, name = _a.name, _b = _a.value, initValue = _b === void 0 ? _emptyValue : _b, exceptValue = _a.exceptValue, _c = _a.clear, clear = _c === void 0 ? true : _c, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, initDisabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, helperText = _a.helperText, _d = _a.formValueSeparator, formValueSeparator = _d === void 0 ? ',' : _d, formValueSort = _a.formValueSort, limitTags = _a.limitTags, getLimitTagsText = _a.getLimitTagsText, slotProps = _a.slotProps, onAppendTag = _a.onAppendTag, onRemoveTag = _a.onRemoveTag, onTagClick = _a.onTagClick, onValidate = _a.onValidate, onChange = _a.onChange, onValue = _a.onValue, props = __rest(_a, ["variant", "size", "className", "name", "value", "exceptValue", "clear", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "limitTags", "getLimitTagsText", "slotProps", "onAppendTag", "onRemoveTag", "onTagClick", "onValidate", "onChange", "onValue"]);
     var _e = useFormState(), formVariant = _e.variant, formSize = _e.size, formFullWidth = _e.fullWidth, formDisabled = _e.disabled, onAddValueItem = _e.onAddValueItem, onValueChange = _e.onValueChange, onValueChangeByUser = _e.onValueChangeByUser, onRequestSearchSubmit = _e.onRequestSearchSubmit, otherFormState = __rest(_e, ["variant", "size", "fullWidth", "disabled", "onAddValueItem", "onValueChange", "onValueChangeByUser", "onRequestSearchSubmit"]);
     /********************************************************************************************************************
      * FormState - Variables
@@ -1691,10 +1691,11 @@ var FormTag = React.forwardRef(function (_a, ref) {
      * Function - appendTag, removeTag
      * ******************************************************************************************************************/
     var appendTag = React.useCallback(function (tag) {
-        if (!valueSet.has(tag)) {
-            if (onAppendTag && !onAppendTag(tag))
+        var finalTag = tag.trim();
+        if (notEmpty(finalTag) && !valueSet.has(finalTag)) {
+            if (onAppendTag && !onAppendTag(finalTag))
                 return;
-            valueSet.add(tag);
+            valueSet.add(finalTag);
             var finalValue_1 = updateValue(valueSet);
             nextTick(function () {
                 onValueChangeByUser(name, finalValue_1);
@@ -1732,8 +1733,8 @@ var FormTag = React.forwardRef(function (_a, ref) {
         }
     }, [ref, getCommands]);
     var handleRenderValue = React.useCallback(function (tags) {
-        return tags.map(function (tag) { return (React.createElement(material.Chip, { className: 'MuiAutocomplete-tag', key: tag, label: tag, size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, disabled: readOnly || disabled, onDelete: readOnly || disabled ? undefined : function () { return removeTag(tag); } })); });
-    }, [disabled, readOnly, removeTag, size, variant]);
+        return tags.map(function (tag) { return (React.createElement(material.Chip, { className: 'MuiAutocomplete-tag', key: tag, label: tag, size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, disabled: readOnly || disabled, onDelete: readOnly || disabled ? undefined : function () { return removeTag(tag); }, onClick: function () { return onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(tag); } })); });
+    }, [disabled, onTagClick, readOnly, removeTag, size, variant]);
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
@@ -9348,7 +9349,7 @@ var FormFile = React.forwardRef(function (_a, ref) {
                         React.createElement(reactComponent.PdgIcon, { style: { verticalAlign: 'middle', marginRight: 4 } }, labelIcon),
                         React.createElement("span", { style: { verticalAlign: 'middle' } }, initLabel))) : (initLabel), size: size, required: required, value: value || '', focused: focused, disabled: disabled, fullWidth: true, tabIndex: tabIndex, error: error, slotProps: {
                         inputLabel: labelShrink ? { shrink: labelShrink } : undefined,
-                        htmlInput: { readOnly: true },
+                        htmlInput: { readOnly: true, tabIndex: tabIndex },
                         input: {
                             endAdornment: (React.createElement(material.InputAdornment, { position: 'end' },
                                 React.createElement("div", { className: 'input-file-wrap' },
@@ -9507,7 +9508,7 @@ FormFile.displayName = 'FormFile';insertStyle(".FormImageFile .preview-img{max-w
      * Render
      * ******************************************************************************************************************/
     return (React.createElement(React.Fragment, null,
-        React.createElement(FormFile, __assign({ ref: ref, className: classNames(className, 'FormImageFile'), accept: accept, value: value, preview: preview && value ? (React.createElement("a", { href: value, target: '_blank' },
+        React.createElement(FormFile, __assign({ ref: ref, className: classNames(className, 'FormImageFile'), accept: accept, value: value, preview: preview && value ? (React.createElement("a", { href: value, target: '_blank', tabIndex: -1 },
                 React.createElement(material.Tooltip, { title: React.createElement("div", { style: { paddingTop: 3, paddingBottom: 3 } },
                         React.createElement("img", { src: value, style: { maxWidth: '100%', verticalAlign: 'middle' }, alt: '' })) },
                     React.createElement("img", { className: 'preview-img', src: value, style: { maxHeight: previewMaxHeight || undefined }, alt: '' })))) : undefined, onChange: handleChange, onFile: handleFile, onLink: handleLink }, props)),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pdg/react-form",
   "title": "React Form",
-  "version": "1.0.159",
+  "version": "1.0.161",
   "description": "React Form",
   "type": "module",
   "types": "dist/index.d.ts",