@aurora-ds/components 1.5.0 → 1.6.0

package/dist/esm/index.js

@@ -359,8 +359,8 @@ const buildActionButtonRootStyle = (theme, variant, color, focusOptions) => {
             backgroundColor: intent.main,
             borderColor: intent.main,
             color: intent.on,
-            ':hover:not(:disabled)': { backgroundColor: intent.hover, borderColor: intent.hover },
-            ':active:not(:disabled)': { backgroundColor: intent.active, borderColor: intent.active },
+            ':hover:not(:disabled)': { backgroundColor: intent.hover },
+            ':active:not(:disabled)': { backgroundColor: intent.active },
         }
         : variant === 'outlined'
             ? {
@@ -368,7 +368,7 @@ const buildActionButtonRootStyle = (theme, variant, color, focusOptions) => {
                 borderColor: intent.border,
                 color: intent.fg,
                 ':hover:not(:disabled)': { backgroundColor: intent.subtleHover, color: intent.fgHover },
-                ':active:not(:disabled)': { backgroundColor: intent.subtleActive, borderColor: intent.active, color: intent.active },
+                ':active:not(:disabled)': { backgroundColor: intent.subtleActive, color: intent.active },
             }
             : {
                 backgroundColor: 'transparent',
@@ -390,7 +390,7 @@ const buildActionButtonRootStyle = (theme, variant, color, focusOptions) => {
         height: DEFAULT_BUTTON_HEIGHT,
         cursor: 'pointer',
         outline: 'none',
-        transition: `background-color ${theme.transition.normal}, border-color ${theme.transition.normal}, color ${theme.transition.normal}`,
+        transition: `background-color ${theme.transition.normal}, color ${theme.transition.normal}`,
         ...colorVariantStyles,
         ':focus-visible': getFocusRingStyles(theme, focusOptions),
         ':disabled': { cursor: 'not-allowed', opacity: theme.opacity.high },
@@ -3278,17 +3278,17 @@ const TEXTFIELD_WRAPPER_VARIANTS = createVariants((theme) => {
     return {
         base: {
             display: 'flex',
-            alignItems: 'center',
-            gap: theme.spacing.sm,
+            // `stretch` lets the inner input fill the full height of the box so
+            // clicking anywhere (including the vertical padding area) hits it.
+            alignItems: 'stretch',
             boxSizing: 'border-box',
             borderWidth: '1px',
             borderStyle: 'solid',
             borderRadius: theme.radius.md,
             backgroundColor: c.surfacePaper,
+            // No focus ring on text inputs: focus is conveyed by the status
+            // border colour change (see the `status` variants below).
             transition: `border-color ${theme.transition.fast}`,
-            // Full, always-visible focus ring when the inner input is focused
-            // (single source of truth) — complements the status border colour.
-            ':focus-within': getFocusRingStyles(theme),
             '&[data-disabled]': {
                 opacity: theme.opacity.high,
                 backgroundColor: c.disabledMain,
@@ -3297,10 +3297,12 @@ const TEXTFIELD_WRAPPER_VARIANTS = createVariants((theme) => {
         },
         variants: {
             size: {
+                // Horizontal padding lives on the input itself (see TEXTFIELD_INPUT_VARIANTS),
+                // not here, so the whole bordered area is part of the clickable input.
                 // Font-size is set on the wrapper so the native input inherits it via `fontSize: 'inherit'`.
-                sm: { height: '2rem', paddingLeft: theme.spacing.sm, paddingRight: theme.spacing.xs, fontSize: theme.fontSize.xs },
-                md: { height: '2.5rem', paddingLeft: theme.spacing.sm, paddingRight: theme.spacing.xs, fontSize: theme.fontSize.sm },
-                lg: { height: '3rem', paddingLeft: theme.spacing.md, paddingRight: theme.spacing.sm, fontSize: theme.fontSize.md },
+                sm: { height: '2rem', fontSize: theme.fontSize.xs },
+                md: { height: '2.5rem', fontSize: theme.fontSize.sm },
+                lg: { height: '3rem', fontSize: theme.fontSize.md },
             },
             status: {
                 default: {
@@ -3325,11 +3327,17 @@ const TEXTFIELD_WRAPPER_VARIANTS = createVariants((theme) => {
         defaultVariants: { size: 'md', status: 'default' },
     };
 }, { id: 'textfield-wrapper' });
-const TEXTFIELD_STYLES = createStyles((theme) => ({
-    /** Visually hidden native input — fills the remaining space inside the wrapper. */
-    input: {
+/**
+ * The native input carries the horizontal padding and fills 100% of the
+ * wrapper height, so the entire bordered box is part of the clickable input
+ * (no dead zone between the text and the border).
+ */
+const TEXTFIELD_INPUT_VARIANTS = createVariants((theme) => ({
+    base: {
         flex: 1,
         minWidth: 0,
+        height: '100%',
+        boxSizing: 'border-box',
         border: 'none',
         outline: 'none',
         background: 'transparent',
@@ -3337,15 +3345,25 @@ const TEXTFIELD_STYLES = createStyles((theme) => ({
         fontFamily: 'inherit',
         fontSize: 'inherit',
         lineHeight: 'normal',
-        padding: '0',
         '&::placeholder': { color: theme.colors.textTertiary },
         '&:disabled': { cursor: 'not-allowed', color: theme.colors.textDisabled },
     },
+    variants: {
+        size: {
+            sm: { paddingLeft: theme.spacing.sm, paddingRight: theme.spacing.sm },
+            md: { paddingLeft: theme.spacing.sm, paddingRight: theme.spacing.sm },
+            lg: { paddingLeft: theme.spacing.md, paddingRight: theme.spacing.md },
+        },
+    },
+    defaultVariants: { size: 'md' },
+}), { id: 'textfield-input' });
+const TEXTFIELD_STYLES = createStyles((theme) => ({
     /** Wrapper for the start icon — aligned with the input baseline. Clickable to focus the input. */
     startIconWrap: {
         display: 'flex',
         alignItems: 'center',
         flexShrink: 0,
+        paddingLeft: theme.spacing.sm,
         cursor: 'pointer',
     },
     /** Wrapper for end actions (custom content + optional password toggle). */
@@ -3353,6 +3371,7 @@ const TEXTFIELD_STYLES = createStyles((theme) => ({
         display: 'flex',
         alignItems: 'center',
         flexShrink: 0,
+        paddingRight: theme.spacing.xs,
         gap: theme.spacing['2xs'],
     },
 }), { id: 'textfield-extra' });
@@ -3413,7 +3432,11 @@ const useTextField = ({ id, ref, type, size, endAction, }) => {
  */
 const TextField = ({ ref, label, helperText, size = 'md', status = 'default', startIcon: StartIcon, endAction, type, id, disabled, required, ...rest }) => {
     const { fieldId, helperId, mergedRef, isPassword, showPassword, togglePassword, resolvedType, iconSize, iconButtonSize, hasEndSection, focusInput, } = useTextField({ id, ref, type, size, endAction });
-    return (jsxs(Stack, { flexDirection: 'column', gap: 'xs', children: [label !== undefined && (jsxs(Text, { variant: 'label', fontSize: 'sm', fontWeight: 'medium', color: 'textSecondary', htmlFor: fieldId, children: [label, required && (jsx(Text, { variant: 'span', color: 'errorMain', "aria-hidden": true, children: ' *' }))] })), jsxs("div", { className: TEXTFIELD_WRAPPER_VARIANTS({ size, status }), "data-disabled": disabled || undefined, children: [StartIcon && (jsx("span", { className: TEXTFIELD_STYLES.startIconWrap, onClick: focusInput, "aria-hidden": true, children: jsx(Icon, { icon: StartIcon, size: iconSize, strokeColor: 'textSecondary' }) })), jsx("input", { ref: mergedRef, id: fieldId, type: resolvedType, disabled: disabled, required: required, "aria-required": required || undefined, "aria-invalid": status === 'error' || undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, "aria-errormessage": status === 'error' && helperText !== undefined ? helperId : undefined, className: TEXTFIELD_STYLES.input, ...rest }), hasEndSection && (jsxs("span", { className: TEXTFIELD_STYLES.endActionWrap, children: [endAction, isPassword && (jsx(IconButton, { icon: showPassword ? EyeSlashIcon : EyeIcon, ariaLabel: showPassword ? 'Hide password' : 'Show password', variant: 'text', color: 'neutral', size: iconButtonSize, type: 'button', onClick: togglePassword }))] }))] }), helperText !== undefined && (jsx(FormHelperText, { id: helperId, status: status, children: helperText }))] }));
+    // Associate the label with the input via `aria-labelledby` (and NOT `htmlFor`)
+    // so the label stays accessible without natively focusing the input on click —
+    // only clicking inside the bordered box should focus the field.
+    const labelId = `${fieldId}-label`;
+    return (jsxs(Stack, { flexDirection: 'column', gap: 'xs', children: [label !== undefined && (jsxs(Text, { variant: 'label', fontSize: 'sm', fontWeight: 'medium', color: 'textSecondary', id: labelId, children: [label, required && (jsx(Text, { variant: 'span', color: 'errorMain', "aria-hidden": true, children: ' *' }))] })), jsxs("div", { className: TEXTFIELD_WRAPPER_VARIANTS({ size, status }), "data-disabled": disabled || undefined, children: [StartIcon && (jsx("span", { className: TEXTFIELD_STYLES.startIconWrap, onClick: focusInput, "aria-hidden": true, children: jsx(Icon, { icon: StartIcon, size: iconSize, strokeColor: 'textSecondary' }) })), jsx("input", { ref: mergedRef, id: fieldId, type: resolvedType, disabled: disabled, required: required, "aria-required": required || undefined, "aria-invalid": status === 'error' || undefined, "aria-labelledby": label !== undefined ? labelId : undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, "aria-errormessage": status === 'error' && helperText !== undefined ? helperId : undefined, className: TEXTFIELD_INPUT_VARIANTS({ size }), ...rest }), hasEndSection && (jsxs("span", { className: TEXTFIELD_STYLES.endActionWrap, children: [endAction, isPassword && (jsx(IconButton, { icon: showPassword ? EyeSlashIcon : EyeIcon, ariaLabel: showPassword ? 'Hide password' : 'Show password', variant: 'text', color: 'neutral', size: iconButtonSize, type: 'button', onClick: togglePassword }))] }))] }), helperText !== undefined && (jsx(FormHelperText, { id: helperId, status: status, children: helperText }))] }));
 };
 TextField.displayName = 'TextField';
 
@@ -4006,8 +4029,8 @@ const SELECT_TRIGGER_VARIANTS = createVariants((theme) => {
             transition: `border-color ${theme.transition.fast}`,
             outline: 'none',
             fontFamily: 'inherit',
-            // Full, always-visible focus ring (single source of truth).
-            ':focus-visible': getFocusRingStyles(theme),
+            // No focus ring on the trigger: focus is conveyed by the border
+            // colour change (see the `status` variants below).
             '&[data-open]': {
                 borderColor: c.primaryMain,
             },
@@ -4044,6 +4067,9 @@ const SELECT_TRIGGER_VARIANTS = createVariants((theme) => {
                     ':hover:not([data-disabled]):not([data-open])': {
                         borderColor: c.borderStrong,
                     },
+                    '&:focus-visible:not([data-open])': {
+                        borderColor: c.primaryMain,
+                    },
                 },
                 error: {
                     borderColor: c.errorMain,
@@ -6746,6 +6772,67 @@ const Dialog = DialogBase;
 Dialog.Header = DialogHeader;
 Dialog.Body = DialogBody;
 
+/**
+ * Manages keyboard navigation for a listbox-style menu.
+ *
+ * Binds ArrowDown, ArrowUp, Home, End, and Enter using `useKeyPress`.
+ * Automatically skips disabled items and optionally wraps around (loop).
+ * Resets focus when `enabled` toggles.
+ */
+const useListKeyNav = ({ itemCount, enabled, onSelect, isDisabled, loop = true, initialIndex = 0, }) => {
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const initialIndexRef = useRef(initialIndex);
+    useEffect(() => {
+        initialIndexRef.current = initialIndex;
+    }, [initialIndex]);
+    useEffect(() => {
+        setFocusedIndex(enabled ? initialIndexRef.current : -1);
+    }, [enabled]);
+    const getNextIndex = useCallback((current, direction) => {
+        if (itemCount === 0) {
+            return -1;
+        }
+        let next = current + direction;
+        for (let i = 0; i < itemCount; i++) {
+            if (next < 0) {
+                next = loop ? itemCount - 1 : 0;
+            }
+            if (next >= itemCount) {
+                next = loop ? 0 : itemCount - 1;
+            }
+            if (!isDisabled?.(next)) {
+                return next;
+            }
+            next += direction;
+        }
+        return current;
+    }, [itemCount, loop, isDisabled]);
+    useKeyPress({
+        ArrowDown: (e) => {
+            e.preventDefault();
+            setFocusedIndex((prev) => getNextIndex(prev, 1));
+        },
+        ArrowUp: (e) => {
+            e.preventDefault();
+            setFocusedIndex((prev) => getNextIndex(prev, -1));
+        },
+        Home: (e) => {
+            e.preventDefault();
+            setFocusedIndex(getNextIndex(-1, 1));
+        },
+        End: (e) => {
+            e.preventDefault();
+            setFocusedIndex(getNextIndex(itemCount, -1));
+        },
+        Enter: () => {
+            if (focusedIndex >= 0) {
+                onSelect(focusedIndex);
+            }
+        },
+    }, { enabled });
+    return { focusedIndex, setFocusedIndex };
+};
+
 const lightPalette = {
     // Surface
     surfaceBackground: '#f8fafc',
@@ -7154,5 +7241,5 @@ const darkTheme = createTheme({
     breakpoints: themeBreakpoints,
 });
 
-export { Accordion, Alert, Article, Aside, Avatar, AvatarGroup, Backdrop, Badge, Box, Breadcrumb, Button, Card, Checkbox, DatePicker, DefaultErrorFallback, Dialog, Drawer, ErrorBoundary, Fab, Footer, Form, Grid, Header, Icon, IconButton, Image, InfoBubble, Link, LoaderScreen, Main, Menu, Nav, Pagination, RadioButton, RadioGroup, Section, Select, Separator, Skeleton, Stack, SvgImage, Switch, Table, Tabs, Text, TextField, ToggleButton, ToggleGroup, ToggleIconButton, Tooltip, darkTheme, lightTheme, useDrawerContext };
+export { Accordion, Alert, Article, Aside, Avatar, AvatarGroup, Backdrop, Badge, Box, Breadcrumb, Button, Card, Checkbox, DatePicker, DefaultErrorFallback, Dialog, Drawer, ErrorBoundary, Fab, Footer, Form, Grid, Header, Icon, IconButton, Image, InfoBubble, Link, LoaderScreen, Main, Menu, Nav, Pagination, RadioButton, RadioGroup, Section, Select, Separator, Skeleton, Stack, SvgImage, Switch, Table, Tabs, Text, TextField, ToggleButton, ToggleGroup, ToggleIconButton, Tooltip, darkTheme, lightTheme, useBodyScrollLock, useControllableState, useDrawerContext, useFocusTrap, useKeyPress, useListKeyNav, useMenuPosition, useMergedRefs, useTooltipPosition, useTransitionRender };
 //# sourceMappingURL=index.js.map