@chassis-ui/react 0.1.0 → 0.1.2

package/src/components/datepicker/DateRangePicker.tsx

@@ -13,6 +13,7 @@ import { DateField } from './DateField'
 import { renderDatePickerShell } from './renderDatePickerShell'
 import './DatePicker.scss'
 import './DateRangePicker.scss'
+import { CalendarLabels, CalendarLabelsProvider } from '../calendar/labels'
 
 export interface DateRangePickerProps extends Omit<
   HTMLAttributes<HTMLDivElement>,
@@ -72,6 +73,14 @@ export interface DateRangePickerProps extends Omit<
    * shown but cannot be selected.
    */
   isDateUnavailable?: (date: DateValue) => boolean
+  /**
+   * Overrides for the strings this component and its calendar render themselves rather than
+   * getting from the active locale — the clear adornment and the calendar's own year-view
+   * arrows/announcements. Date segment order, month and weekday names all follow `I18nProvider`'s
+   * locale via react-aria and need no override. Merged over the English defaults, so passing one
+   * key leaves the rest alone.
+   */
+  labels?: Partial<CalendarLabels>
   /**
    * Whether the calendar popover is open (controlled).
    */
@@ -110,9 +119,9 @@ export interface DateRangePickerProps extends Omit<
    */
   presets?: DateRangePreset[]
   /**
-   * Size the component small or large.
+   * Size the component sm or lg.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   /**
    * ISO 8601 dates (`YYYY-MM-DD`) to mark unselectable, as a convenience alternative to
    * `isDateUnavailable` for data-driven cases (e.g. booked dates fetched from an API). Composed
@@ -162,6 +171,7 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
       isDateUnavailable,
       isOpen,
       label,
+      labels,
       maxValue,
       minValue,
       name,
@@ -248,95 +258,103 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
 
     const { dialogProps: domDialogProps } = useDialog(dialogProps, calendarRef)
 
-    return renderFormField({
-      children: (
-        <>
-          {renderDatePickerShell({
-            calendar: (
-              <RangeCalendar
-                {...domDialogProps}
-                autoFocus
-                disabled={disabled}
-                firstDayOfWeek={firstDayOfWeek}
-                isDateUnavailable={combinedIsDateUnavailable}
-                maxValue={maxValue}
-                minValue={minValue}
-                onChange={calendarProps.onChange}
-                presets={presets}
-                ref={calendarRef}
-                value={calendarProps.value}
-                visibleMonths={visibleMonths}
-              />
-            ),
-            className,
-            // `state.value` is always a `{ start, end }` object, never `null` itself — even with
-            // nothing picked yet — so the endpoints are what actually indicate a selection to
-            // clear (matching the hidden-input `value`s below, which check the same way).
-            clearButton: (state.value?.start || state.value?.end) && !disabled && (
-              <ClearButton
-                onPress={() => {
-                  state.setValue(null)
-                  // See `DatePicker`'s identical `ClearButton` usage for why this is needed —
-                  // this button unmounts itself once cleared, so focus needs somewhere to land.
-                  toggleButtonRef.current?.focus()
-                }}
-              />
-            ),
-            disabled,
-            field: (
-              <>
-                <DateField fieldProps={startFieldProps} />
-                <span aria-hidden="true" className="daterangepicker-separator">
-                  –
-                </span>
-                <DateField fieldProps={endFieldProps} />
-              </>
-            ),
-            fieldClassName: 'd-flex w-100',
-            groupProps: {
-              ...mergeProps(groupProps, rest),
-              'aria-describedby': describedBy,
-              'aria-labelledby': labelledBy
-            },
-            groupRef: forkedGroupRef,
-            invalid,
-            isOpen: state.isOpen,
-            overlayDismissProps,
-            overlayRef,
-            overlayStyle,
-            placementAttr,
-            size,
-            toggleButton: (
-              <CalendarToggleButton buttonProps={buttonProps} ref={toggleButtonRef} state={state} />
-            ),
-            valid
-          })}
-          {name && (
+    return (
+      <CalendarLabelsProvider labels={labels}>
+        {renderFormField({
+          children: (
             <>
-              <input
-                disabled={disabled}
-                name={`${name}Start`}
-                type="hidden"
-                value={state.value?.start ? state.value.start.toString() : ''}
-              />
-              <input
-                disabled={disabled}
-                name={`${name}End`}
-                type="hidden"
-                value={state.value?.end ? state.value.end.toString() : ''}
-              />
+              {renderDatePickerShell({
+                calendar: (
+                  <RangeCalendar
+                    {...domDialogProps}
+                    autoFocus
+                    disabled={disabled}
+                    firstDayOfWeek={firstDayOfWeek}
+                    isDateUnavailable={combinedIsDateUnavailable}
+                    maxValue={maxValue}
+                    minValue={minValue}
+                    onChange={calendarProps.onChange}
+                    presets={presets}
+                    ref={calendarRef}
+                    value={calendarProps.value}
+                    visibleMonths={visibleMonths}
+                  />
+                ),
+                className,
+                // `state.value` is always a `{ start, end }` object, never `null` itself — even with
+                // nothing picked yet — so the endpoints are what actually indicate a selection to
+                // clear (matching the hidden-input `value`s below, which check the same way).
+                clearButton: (state.value?.start || state.value?.end) && !disabled && (
+                  <ClearButton
+                    onPress={() => {
+                      state.setValue(null)
+                      // See `DatePicker`'s identical `ClearButton` usage for why this is needed —
+                      // this button unmounts itself once cleared, so focus needs somewhere to land.
+                      toggleButtonRef.current?.focus()
+                    }}
+                  />
+                ),
+                disabled,
+                field: (
+                  <>
+                    <DateField fieldProps={startFieldProps} />
+                    <span aria-hidden="true" className="daterangepicker-separator">
+                      –
+                    </span>
+                    <DateField fieldProps={endFieldProps} />
+                  </>
+                ),
+                fieldClassName: 'd-flex w-100',
+                groupProps: {
+                  ...mergeProps(groupProps, rest),
+                  'aria-describedby': describedBy,
+                  'aria-labelledby': labelledBy
+                },
+                groupRef: forkedGroupRef,
+                invalid,
+                isOpen: state.isOpen,
+                overlayDismissProps,
+                overlayRef,
+                overlayStyle,
+                placementAttr,
+                size,
+                toggleButton: (
+                  <CalendarToggleButton
+                    buttonProps={buttonProps}
+                    ref={toggleButtonRef}
+                    state={state}
+                  />
+                ),
+                valid
+              })}
+              {name && (
+                <>
+                  <input
+                    disabled={disabled}
+                    name={`${name}Start`}
+                    type="hidden"
+                    value={state.value?.start ? state.value.start.toString() : ''}
+                  />
+                  <input
+                    disabled={disabled}
+                    name={`${name}End`}
+                    type="hidden"
+                    value={state.value?.end ? state.value.end.toString() : ''}
+                  />
+                </>
+              )}
             </>
-          )}
-        </>
-      ),
-      help,
-      ids: { feedback: feedbackId, help: helpId, label: labelId },
-      invalid,
-      invalidFeedback,
-      label,
-      valid,
-      validFeedback
-    })
+          ),
+          help,
+          ids: { feedback: feedbackId, help: helpId, label: labelId },
+          invalid,
+          invalidFeedback,
+          label,
+          valid,
+          validFeedback
+        })}
+      </CalendarLabelsProvider>
+    )
   }
 )
 

package/src/components/datepicker/renderDatePickerShell.tsx

@@ -40,7 +40,7 @@ export interface RenderDatePickerShellOptions {
   overlayRef: Ref<HTMLDivElement>
   overlayStyle?: CSSProperties
   placementAttr?: string
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   toggleButton: ReactNode
   valid?: boolean
 }

package/src/components/drawer/Drawer.tsx

@@ -69,7 +69,7 @@ export interface DrawerProps extends Omit<
   /**
    * Renders as a drawer only below this breakpoint — inline as a flex container above it.
    */
-  responsive?: 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'
+  responsive?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
   /**
    * Allow the page behind the drawer to scroll while it's open.
    */
@@ -118,6 +118,7 @@ export const Drawer = forwardRef<HTMLDialogElement, DrawerProps>(
       fullscreen,
       instant,
       keyboard = true,
+      onClick,
       onClose,
       onClosePrevented,
       onHidden,
@@ -144,6 +145,7 @@ export const Drawer = forwardRef<HTMLDialogElement, DrawerProps>(
             if (entry.dialog !== dialog) entry.close()
           }
         },
+        onClick,
         onClose,
         onClosePrevented,
         onHidden,

package/src/components/file-input/FileInput.tsx

@@ -39,9 +39,9 @@ export interface FileInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
    */
   onChange?: ChangeEventHandler<HTMLInputElement>
   /**
-   * Size the component small or large.
+   * Size the component sm or lg.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   /**
    * Set component validation state to valid.
    */

package/src/components/floating-input/FloatingInput.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames'
 
 import { FormLabel } from '../form/FormLabel'
 import { FormFieldIds, renderFormField } from '../form-field/renderFormField'
+import { devWarning } from '../../utils/devWarning'
 
 export interface FloatingInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   /**
@@ -63,14 +64,13 @@ export const FloatingInput = forwardRef<HTMLDivElement, FloatingInputProps>(
     },
     ref
   ) => {
-    if (!ids?.input && !ids?.label) {
-      console.warn(
-        'FloatingInput: `ids.input`/`ids.label` are not set — the rendered label ' +
-          "won't be associated with your control (no `htmlFor`, no `aria-labelledby` target). " +
-          'Pass `ids={{ input: yourControlId }}` (or `ids.label` for a group with no single ' +
-          'input) so the label has something to point at.'
-      )
-    }
+    devWarning(
+      !ids?.input && !ids?.label,
+      'FloatingInput: `ids.input`/`ids.label` are not set — the rendered label ' +
+        "won't be associated with your control (no `htmlFor`, no `aria-labelledby` target). " +
+        'Pass `ids={{ input: yourControlId }}` (or `ids.label` for a group with no single ' +
+        'input) so the label has something to point at.'
+    )
 
     return renderFormField({
       children: (

package/src/components/form/renderFormCheck.tsx

@@ -16,9 +16,9 @@ export type ButtonObject = {
    */
   shape?: Shapes
   /**
-   * Size the component small or large.
+   * Size the component sm or lg.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   /**
    * Set the button variant to an outlined button or a ghost button.
    */
@@ -32,7 +32,7 @@ export interface RenderFormCheckOptions {
   input: ReactNode
   invalid?: boolean
   label?: ReactNode
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   valid?: boolean
 }
 

package/src/components/form-field/FormField.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react'
 
 import { FormFieldIds, renderFormField } from './renderFormField'
+import { devWarning } from '../../utils/devWarning'
 
 export interface FormFieldProps {
   /**
@@ -59,14 +60,13 @@ export const FormField = ({
   valid,
   validFeedback
 }: FormFieldProps): ReactNode => {
-  if (label && !ids?.input && !ids?.label) {
-    console.warn(
-      'FormField: `label` is set but `ids.input`/`ids.label` are not — the rendered label ' +
-        "won't be associated with your control (no `htmlFor`, no `aria-labelledby` target). " +
-        'Pass `ids={{ input: yourControlId }}` (or `ids.label` for a group with no single ' +
-        'input) so the label has something to point at.'
-    )
-  }
+  devWarning(
+    !!label && !ids?.input && !ids?.label,
+    'FormField: `label` is set but `ids.input`/`ids.label` are not — the rendered label ' +
+      "won't be associated with your control (no `htmlFor`, no `aria-labelledby` target). " +
+      'Pass `ids={{ input: yourControlId }}` (or `ids.label` for a group with no single ' +
+      'input) so the label has something to point at.'
+  )
 
   return renderFormField({
     children,

package/src/components/form-field/renderFormField.tsx

@@ -43,10 +43,21 @@ export const renderFormField = ({
   valid,
   validFeedback
 }: RenderFormFieldOptions): ReactNode => {
-  const showInvalidFeedback = invalid && invalidFeedback
-  const showValidFeedback = valid && validFeedback
+  // At most one feedback node renders, and `invalid` wins: both carry the same `ids.feedback`,
+  // so rendering the pair (which `invalid` + `valid` set together used to do) put a duplicate id
+  // in the DOM and left every control's `aria-describedby` pointing at an ambiguous target —
+  // axe's `duplicate-id-aria`. `useFormField` only ever budgets one feedback id for the same
+  // reason. Contradictory state, but nothing in the types rules it out and ten components route
+  // through here.
+  const showInvalidFeedback = Boolean(invalid && invalidFeedback)
+  const showValidFeedback = Boolean(valid && validFeedback) && !showInvalidFeedback
 
-  if (!label && !help && !showInvalidFeedback && !showValidFeedback) {
+  // `className` alone is enough to warrant the wrapper: it has nowhere else to land, and
+  // returning `children` bare (the drop-in-compatibility path every field-capable leaf relies on
+  // until a consumer opts into wrapping) silently dropped it. Only `FormField` — the standalone
+  // "wrap this yourself" component — passes one, so this is exactly the case where the caller
+  // asked for a `.form-field` element by hand.
+  if (!label && !help && !showInvalidFeedback && !showValidFeedback && !className) {
     return children
   }
 

package/src/components/grid/Col.tsx

@@ -31,7 +31,7 @@ export interface ColProps extends HTMLAttributes<HTMLDivElement>, ColLayout {
   /**
    * Overrides `span`/`offset`/`order` at a breakpoint and up.
    *
-   * @type { Partial<Record<'small' | 'medium' | 'large' | 'xlarge' | '2xlarge', { span?: 'auto' | number | string | boolean, offset?: number | string, order?: 'first' | 'last' | number | string }>> }
+   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { span?: 'auto' | number | string | boolean, offset?: number | string, order?: 'first' | 'last' | number | string }>> }
    */
   responsive?: Partial<Record<Breakpoint, ColLayout>>
 }

package/src/components/grid/GridItem.tsx

@@ -39,7 +39,7 @@ type GridItemOwnProps<C extends ElementType> = GridItemLayout & {
   /**
    * Overrides `span`/`start` at a breakpoint and up.
    *
-   * @type { Partial<Record<'small' | 'medium' | 'large' | 'xlarge' | '2xlarge', { span?: number, start?: number }>> }
+   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { span?: number, start?: number }>> }
    */
   responsive?: Partial<Record<Breakpoint, GridItemLayout>>
   /**

package/src/components/grid/Row.tsx

@@ -40,7 +40,7 @@ export interface RowProps extends HTMLAttributes<HTMLDivElement>, RowLayout {
   /**
    * Overrides `cols`/`gutter`/`gutterX`/`gutterY` at a breakpoint and up.
    *
-   * @type { Partial<Record<'small' | 'medium' | 'large' | 'xlarge' | '2xlarge', { cols?: 'auto' | number | string, gutter?: Spacing | 0, gutterX?: Spacing | 0, gutterY?: Spacing | 0 }>> }
+   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { cols?: 'auto' | number | string, gutter?: Spacing | 0, gutterX?: Spacing | 0, gutterY?: Spacing | 0 }>> }
    */
   responsive?: Partial<Record<Breakpoint, RowLayout>>
 }

package/src/components/input-group/InputGroup.tsx

@@ -17,9 +17,9 @@ type InputGroupOwnProps<C extends ElementType> = {
    */
   component?: C
   /**
-   * Size the component small or large.
+   * Size the component sm or lg.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
 }
 
 export type InputGroupProps<C extends ElementType = 'div'> = PolymorphicComponentProps<

package/src/components/list/List.tsx

@@ -72,11 +72,11 @@ type ListOwnProps<C extends ElementType> = {
    */
   layout?:
     | 'horizontal'
-    | 'small:horizontal'
-    | 'medium:horizontal'
-    | 'large:horizontal'
-    | 'xlarge:horizontal'
-    | '2xlarge:horizontal'
+    | 'sm:horizontal'
+    | 'md:horizontal'
+    | 'lg:horizontal'
+    | 'xl:horizontal'
+    | '2xl:horizontal'
   /**
    * Number list items sequentially using CSS counters. Pair with `component="ol"` for semantic correctness.
    */

package/src/components/menu/Menu.tsx

@@ -220,8 +220,18 @@ function MenuRender<C extends ElementType = typeof Fragment>(
   // reflecting the new `.show` class by the time this effect runs, since React commits the
   // render before passive effects execute. Falls back to firing synchronously when no
   // `MenuList` is mounted to measure (nothing to transition, so nothing to wait for).
+  //
+  // All four report *transitions*, so none fires for the initial commit — mounting closed is not
+  // a hide. Without this guard, mounting fired `onHide` (and scheduled `onHidden`) for every menu
+  // on the page before `onShow` had ever fired once, which `Menu.spec.tsx` used to have to
+  // `mockClear()` past.
+  const mountedRef = useRef(false)
+
   useEffect(() => {
     const overlay = overlayRef.current
+    const isInitialCommit = !mountedRef.current
+    mountedRef.current = true
+    if (isInitialCommit) return undefined
 
     if (state.isOpen) {
       onShow?.()

package/src/components/menu/MenuSubmenu.tsx

@@ -49,7 +49,7 @@ export interface MenuSubmenuProps extends Omit<HTMLAttributes<HTMLDivElement>, '
    */
   placement?: Placement
   /**
-   * Switches to a view-replacement pattern below the `small` breakpoint. Pair with a
+   * Switches to a view-replacement pattern below the `sm` breakpoint. Pair with a
    * `MenuSubmenuBack` as the first item of the nested menu.
    */
   stacked?: boolean
@@ -268,10 +268,10 @@ export const MenuSubmenu = forwardRef<HTMLDivElement, MenuSubmenuProps>(
             </div>
           )
 
-          // `stacked`'s small-breakpoint CSS (`.menu:has(.submenu-stacked.show) ...`) needs the
+          // `stacked`'s sm-breakpoint CSS (`.menu:has(.submenu-stacked.show) ...`) needs the
           // panel to be a real DOM descendant of `.menu`/`.submenu` to match — portaling would
           // break that ancestor relationship, so it renders inline instead. Trade-off: above the
-          // `small` breakpoint a `stacked` submenu no longer escapes ancestor overflow/stacking-
+          // `sm` breakpoint a `stacked` submenu no longer escapes ancestor overflow/stacking-
           // context clipping the way a portaled one does; accepted since `stacked` targets mobile
           // nav/drawer usage, not floating dropdowns.
           return mounted && !stacked ? createPortal(panel, document.body) : panel

package/src/components/menu/MenuSubmenuBack.tsx

@@ -11,7 +11,7 @@ export interface MenuSubmenuBackProps extends ButtonHTMLAttributes<HTMLButtonEle
 }
 
 // First item of a stacked submenu's nested menu (see `MenuSubmenu`'s `stacked` prop). Closes
-// the submenu and returns focus to its trigger — visible only below the `small` breakpoint.
+// the submenu and returns focus to its trigger — visible only below the `sm` breakpoint.
 export const MenuSubmenuBack = forwardRef<HTMLButtonElement, MenuSubmenuBackProps>(
   ({ children, className, onClick, type = 'button', ...rest }, ref) => {
     const actions = useContext(SubmenuActionsContext)

package/src/components/menu/MenuToggle.tsx

@@ -52,9 +52,9 @@ type MenuToggleOwnProps<C extends ElementType> = {
    */
   shape?: Shapes
   /**
-   * Size the component small or large. Only applies to the default `Button` root.
+   * Size the component sm or lg. Only applies to the default `Button` root.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   /**
    * Sets the context style of the component. Only applies to the default `Button` root.
    */

package/src/components/modal/Modal.tsx

@@ -24,7 +24,7 @@ export interface ModalProps extends Omit<
    * Set modal to cover the entire user viewport. A breakpoint value goes fullscreen only
    * below that breakpoint.
    */
-  fullscreen?: boolean | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'
+  fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
   /**
    * Disable the open/close transition entirely.
    */
@@ -63,9 +63,9 @@ export interface ModalProps extends Omit<
    */
   scrollable?: boolean
   /**
-   * Size the component small, large, or extra large.
+   * Size the component sm, lg, or extra lg.
    */
-  size?: 'small' | 'large' | 'xlarge'
+  size?: 'sm' | 'lg' | 'xl'
   /**
    * Toggle the visibility of modal component.
    */
@@ -97,6 +97,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       instant,
       keyboard = true,
       modal = true,
+      onClick,
       onClose,
       onClosePrevented,
       onHidden,
@@ -115,6 +116,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         instant,
         isModal: modal,
         keyboard,
+        onClick,
         onClose,
         onClosePrevented,
         onHidden,

package/src/components/navbar/Navbar.tsx

@@ -24,7 +24,7 @@ type NavbarOwnProps<C extends ElementType> = {
   /**
    * Defines optional container wrapping children elements.
    */
-  container?: boolean | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | 'fluid'
+  container?: boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'fluid'
   /**
    * Opts this navbar into the framework's dark or light theming, independent of the page's own
    * theme.

package/src/components/navbar/NavbarBrand.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames'
 import {
   createPolymorphicComponent,
   PolymorphicComponentProps,
-  PolymorphicRef
+  PolymorphicRef,
+  PolymorphicRefWithFallback
 } from '../../utils/polymorphic'
 
 type NavbarBrandOwnProps<C extends ElementType> = {
@@ -30,7 +31,9 @@ export type NavbarBrandProps<C extends ElementType = 'span'> = PolymorphicCompon
 >
 
 type NavbarBrandComponent = (<C extends ElementType = 'span'>(
-  props: NavbarBrandProps<C> & { ref?: PolymorphicRef<C> }
+  props: NavbarBrandProps<C> & {
+    ref?: PolymorphicRefWithFallback<C, HTMLSpanElement | HTMLAnchorElement>
+  }
 ) => ReactElement | null) & { displayName?: string }
 
 function NavbarBrandRender<C extends ElementType = 'span'>(

package/src/components/notification/NotificationStack.tsx

@@ -39,7 +39,7 @@ export const NotificationStack = forwardRef<HTMLDivElement, NotificationStackPro
     return (
       <Stack
         direction="vertical"
-        gap="small"
+        gap="sm"
         className={className}
         {...regionProps}
         {...rest}

package/src/components/otp-input/OtpBox.tsx

@@ -12,7 +12,7 @@ interface OtpBoxProps {
   onChangeValue: (value: string) => void
   onKeyDownBox: (event: KeyboardEvent<HTMLInputElement>) => void
   onPasteBox: (event: ClipboardEvent<HTMLInputElement>) => void
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   valid?: boolean
   value: string
 }