@hexure/ui 1.13.55 → 1.13.57

package/dist/cjs/types/components/Input/Input.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { CSSProperties } from 'styled-components';
 import { AccessibleProps } from '../../utils/Accessibility';
 export interface styleProps {
@@ -33,6 +33,8 @@ export interface InputProps extends AccessibleProps {
     /** Optional ID for automation purposes */
     dataItemid?: string;
     mask?: string;
+    onPaste?: (e?: any) => void;
+    autoComplete?: React.InputHTMLAttributes<HTMLInputElement>['autoComplete'];
 }
 declare const Input: FC<InputProps>;
 export default Input;

package/dist/esm/index.js

@@ -1880,7 +1880,7 @@ const Loader$1 = styled.div `
 const Input$1 = (_a) => {
     var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown, 
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, showErrorTextColor = false, type = 'text', value = '', innerRef = null, tabIndex, isAutoComplete = false, dataItemid, mask } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "loading", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "showCharCount", "step", "style", "suggestedValues", "showErrorTextColor", "type", "value", "innerRef", "tabIndex", "isAutoComplete", "dataItemid", "mask"]);
+    onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, showErrorTextColor = false, type = 'text', value = '', innerRef = null, tabIndex, isAutoComplete = false, dataItemid, mask, onPaste, autoComplete } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "loading", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "showCharCount", "step", "style", "suggestedValues", "showErrorTextColor", "type", "value", "innerRef", "tabIndex", "isAutoComplete", "dataItemid", "mask", "onPaste", "autoComplete"]);
     const [show_options, setShowOptions] = useState(false);
     const [internalValue, setInternalValue] = useState(value);
     const [internalSuggestedValues, setInternalSuggestedValues] = useState(suggestedValues || []);
@@ -1957,7 +1957,7 @@ const Input$1 = (_a) => {
     }
     const baseId = dataItemid || 'input';
     return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper`, style: style },
-        React.createElement(StyledTextArea, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showErrorTextColor": showErrorTextColor, maxLength: maxLength, onBlur: readOnly
+        React.createElement(StyledTextArea, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showErrorTextColor": showErrorTextColor, autoComplete: autoComplete, maxLength: maxLength, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
                     if (onBlur)
@@ -1971,13 +1971,16 @@ const Input$1 = (_a) => {
                     setShowOptions(true);
                     if (onFocus)
                         onFocus(e);
-                }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, readOnly: readOnly, ref: innerRef, tabIndex: readOnly ? -1 : tabIndex, value: formatted_value }, accessibleProps, { "data-itemid": `${baseId}-textarea` })),
+                }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, onPaste: e => {
+                if (onPaste)
+                    onPaste(e);
+            }, placeholder: placeholder, readOnly: readOnly, ref: innerRef, tabIndex: readOnly ? -1 : tabIndex, value: formatted_value }, accessibleProps, { "data-itemid": `${baseId}-textarea` })),
         loading ? (React.createElement(Loader$1, { "data-itemid": `${baseId}-loader` },
             React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: mdiLoading, size: '20px', spin: true }))) : null,
         showCharCount ? (React.createElement(CharacterCount, { "data-itemid": `${baseId}-char-count` },
             internalValue.length,
             maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper`, style: style },
-        React.createElement(StyledInput, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showErrorTextColor": showErrorTextColor, max: max, maxLength: maxLength, min: min, onBlur: readOnly
+        React.createElement(StyledInput, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showErrorTextColor": showErrorTextColor, autoComplete: autoComplete, max: max, maxLength: maxLength, min: min, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
                     if (onBlur)
@@ -1993,7 +1996,10 @@ const Input$1 = (_a) => {
                     setIsFocused(true);
                     if (onFocus)
                         onFocus(e);
-                }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, readOnly: readOnly, ref: innerRef, step: step, tabIndex: readOnly ? -1 : tabIndex, type: type, value: format === 'currency_decimal' && internalValue ? `$${formatted_value}` : formatted_value }, accessibleProps, { "data-itemid": `${baseId}-input` })),
+                }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, onPaste: e => {
+                if (onPaste)
+                    onPaste(e);
+            }, placeholder: placeholder, readOnly: readOnly, ref: innerRef, step: step, tabIndex: readOnly ? -1 : tabIndex, type: type, value: format === 'currency_decimal' && internalValue ? `$${formatted_value}` : formatted_value }, accessibleProps, { "data-itemid": `${baseId}-input` })),
         loading ? (React.createElement(Loader$1, { "data-itemid": `${baseId}-loader` },
             React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: mdiLoading, size: '20px', spin: true }))) : null,
         showCharCount ? (React.createElement(CharacterCount, { "data-itemid": `${baseId}-char-count` },
@@ -2083,6 +2089,7 @@ const Step = styled.div `
   align-items: center;
   gap: 8px;
 `;
+const StyledIconWWrapper = styled.div ``;
 const StyledIcon$2 = styled(Icon) `
   > path {
     fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
@@ -2158,7 +2165,8 @@ const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
         return (React.createElement(React.Fragment, { key: i },
             i !== 0 && showStepLine && (React.createElement(StepLine, { "$active": step.active, "data-itemid": `${stepId}-line` })),
             React.createElement(Step, { "data-itemid": `${stepId}-step` },
-                step.complete ? (React.createElement(StyledIcon$2, { "data-itemid": `${stepId}-icon`, path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active, "data-itemid": `${stepId}-indicator` }, i + 1)),
+                step.complete ? (React.createElement(StyledIconWWrapper, { "data-itemid": `${stepId}-icon-wrapper` },
+                    React.createElement(StyledIcon$2, { "data-itemid": `${stepId}-icon`, path: mdiCheckboxMarkedCircleOutline, size: '32px' }))) : (React.createElement(StepIndicator, { "$active": step.active, "data-itemid": `${stepId}-indicator` }, i + 1)),
                 React.createElement(StepLabel, { "data-itemid": `${stepId}-label` },
                     step.label,
                     step.percentComplete !== undefined && (React.createElement(ProgressBarFill, { "$percent": step.percentComplete, "data-itemid": `${stepId}-fill` }))))));