@aurora-ds/components 0.24.7 → 0.24.8

package/dist/cjs/components/forms/input/Input.props.d.ts

@@ -1,9 +1,13 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, FocusEvent, ReactNode } from 'react';
 export type InputProps = {
     /** The value of the input */
     value: string;
     /** Callback fired when the value changes */
     onChange: (value: string) => void;
+    /** Callback fired when the input receives focus */
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    /** Callback fired when the input loses focus */
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     /** Label displayed above the input */
     label?: string;
     /** Whether the field is mandatory (displays an asterisk next to the label) */

package/dist/cjs/components/forms/textarea/TextArea.props.d.ts

@@ -1,9 +1,13 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, FocusEvent } from 'react';
 export type TextAreaProps = {
     /** The value of the textarea */
     value: string;
     /** Callback fired when the value changes */
     onChange: (value: string) => void;
+    /** Callback fired when the textarea receives focus */
+    onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    /** Callback fired when the textarea loses focus */
+    onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
     /** Label displayed above the textarea */
     label?: string;
     /** Whether the field is mandatory (displays an asterisk next to the label) */

package/dist/cjs/index.js

@@ -1218,14 +1218,14 @@ const UploadIcon = () => (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/200
 /**
  * Input component
  */
-const Input = React.forwardRef(({ value, onChange, label, mandatory = false, placeholder, disabled = false, type = 'text', ariaLabel, startIcon, endIcon, width, }, ref) => {
+const Input = React.forwardRef(({ value, onChange, onFocus, onBlur, label, mandatory = false, placeholder, disabled = false, type = 'text', ariaLabel, startIcon, endIcon, width, }, ref) => {
     const [showPassword, setShowPassword] = React.useState(false);
     const handleChange = (event) => {
         onChange(event.target.value);
     };
     const inputType = type === 'password' ? (showPassword ? 'text' : 'password') : type;
     const hasPasswordToggle = type === 'password';
-    return (jsxRuntime.jsxs(Stack, { direction: 'column', gap: 'xs', align: 'stretch', width: width ?? '100%', children: [label && (jsxRuntime.jsxs(Stack, { direction: 'row', gap: 'xs', align: 'center', children: [jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', children: label }), mandatory && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', color: 'error', children: "*" }))] })), jsxRuntime.jsxs("div", { className: `${INPUT_STYLES.container({ width })} ${disabled ? 'disabled' : ''}`, children: [jsxRuntime.jsx("input", { ref: ref, type: inputType, value: value, onChange: handleChange, placeholder: placeholder, disabled: disabled, className: INPUT_STYLES.root({ disabled, hasStartIcon: !!startIcon, hasEndIcon: !!endIcon, hasPasswordToggle }), "aria-label": ariaLabel || label }), startIcon && (jsxRuntime.jsx("div", { className: INPUT_STYLES.startIcon, children: jsxRuntime.jsx(Icon, { color: 'textTertiary', children: startIcon }) })), endIcon && (jsxRuntime.jsx("div", { className: hasPasswordToggle ? INPUT_STYLES.endIconShifted : INPUT_STYLES.endIcon, children: jsxRuntime.jsx(Icon, { color: 'textTertiary', children: endIcon }) })), hasPasswordToggle && (jsxRuntime.jsx("div", { className: INPUT_STYLES.passwordToggle, children: jsxRuntime.jsx(IconButton, { icon: showPassword ? jsxRuntime.jsx(EyeOffIcon, {}) : jsxRuntime.jsx(EyeIcon, {}), onClick: () => setShowPassword(!showPassword), disabled: disabled, ariaLabel: ariaLabel || label, variant: 'text', size: 'small', textColor: 'textSecondary' }) }))] })] }));
+    return (jsxRuntime.jsxs(Stack, { direction: 'column', gap: 'xs', align: 'stretch', width: width ?? '100%', children: [label && (jsxRuntime.jsxs(Stack, { direction: 'row', gap: 'xs', align: 'center', children: [jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', children: label }), mandatory && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', color: 'error', children: "*" }))] })), jsxRuntime.jsxs("div", { className: `${INPUT_STYLES.container({ width })} ${disabled ? 'disabled' : ''}`, children: [jsxRuntime.jsx("input", { ref: ref, type: inputType, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, disabled: disabled, className: INPUT_STYLES.root({ disabled, hasStartIcon: !!startIcon, hasEndIcon: !!endIcon, hasPasswordToggle }), "aria-label": ariaLabel || label }), startIcon && (jsxRuntime.jsx("div", { className: INPUT_STYLES.startIcon, children: jsxRuntime.jsx(Icon, { color: 'textTertiary', children: startIcon }) })), endIcon && (jsxRuntime.jsx("div", { className: hasPasswordToggle ? INPUT_STYLES.endIconShifted : INPUT_STYLES.endIcon, children: jsxRuntime.jsx(Icon, { color: 'textTertiary', children: endIcon }) })), hasPasswordToggle && (jsxRuntime.jsx("div", { className: INPUT_STYLES.passwordToggle, children: jsxRuntime.jsx(IconButton, { icon: showPassword ? jsxRuntime.jsx(EyeOffIcon, {}) : jsxRuntime.jsx(EyeIcon, {}), onClick: () => setShowPassword(!showPassword), disabled: disabled, ariaLabel: ariaLabel || label, variant: 'text', size: 'small', textColor: 'textSecondary' }) }))] })] }));
 });
 Input.displayName = 'Input';
 var Input_default = React.memo(Input);
@@ -1278,7 +1278,7 @@ const TEXTAREA_STYLES = theme.createStyles((theme) => ({
 /**
  * TextArea component with auto-expanding height based on content
  */
-const TextArea = React.forwardRef(({ value, onChange, label, mandatory = false, placeholder, disabled = false, ariaLabel, width, minRows = 3, maxRows, }, ref) => {
+const TextArea = React.forwardRef(({ value, onChange, onFocus, onBlur, label, mandatory = false, placeholder, disabled = false, ariaLabel, width, minRows = 3, maxRows, }, ref) => {
     const internalRef = React.useRef(null);
     const textareaRef = ref || internalRef;
     const adjustHeight = React.useCallback(() => {
@@ -1303,7 +1303,7 @@ const TextArea = React.forwardRef(({ value, onChange, label, mandatory = false,
     const handleChange = (event) => {
         onChange(event.target.value);
     };
-    return (jsxRuntime.jsxs(Stack, { direction: 'column', gap: 'xs', align: 'stretch', width: width ?? '100%', children: [label && (jsxRuntime.jsxs(Stack, { direction: 'row', gap: 'xs', align: 'center', children: [jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', children: label }), mandatory && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', color: 'error', children: "*" }))] })), jsxRuntime.jsx("div", { className: `${TEXTAREA_STYLES.container({ width })} ${disabled ? 'disabled' : ''}`, children: jsxRuntime.jsx("textarea", { ref: textareaRef, value: value, onChange: handleChange, placeholder: placeholder, disabled: disabled, className: TEXTAREA_STYLES.root({ disabled }), "aria-label": ariaLabel || label, rows: minRows }) })] }));
+    return (jsxRuntime.jsxs(Stack, { direction: 'column', gap: 'xs', align: 'stretch', width: width ?? '100%', children: [label && (jsxRuntime.jsxs(Stack, { direction: 'row', gap: 'xs', align: 'center', children: [jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', children: label }), mandatory && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', color: 'error', children: "*" }))] })), jsxRuntime.jsx("div", { className: `${TEXTAREA_STYLES.container({ width })} ${disabled ? 'disabled' : ''}`, children: jsxRuntime.jsx("textarea", { ref: textareaRef, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, disabled: disabled, className: TEXTAREA_STYLES.root({ disabled }), "aria-label": ariaLabel || label, rows: minRows }) })] }));
 });
 TextArea.displayName = 'TextArea';
 var TextArea_default = React.memo(TextArea);