@pnx-mixtape/mxds 0.1.0-rc.2 → 0.1.0-rc.3

package/src/Component/Filters/Filters.tsx

@@ -3,7 +3,7 @@
  */
 import {
   createContext,
-  SubmitEventHandler,
+  SubmitEvent,
   ChangeEventHandler,
   FormEventHandler,
   Fragment,
@@ -12,21 +12,35 @@ import {
   ReactNode,
   use,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState,
 } from "react"
 import classNames from "classnames"
+import { FocusScope } from "react-aria"
+import useIsomorphicLayoutEffect from "../../Utility/Hooks/useIsomorphicLayoutEffect"
 import useMediaQuery from "../../Utility/Hooks/useMediaQuery"
+import { DEBOUNCE_MS } from "../../enums"
 
 type FiltersContextValue = {
   counts: Map<string, number>
+  pending: boolean
+  /** Total number of filter groups with at least one active value — 0 means the form is empty. */
+  totalCount: number
 }
 
-const FiltersContext = createContext<FiltersContextValue>({ counts: new Map() })
+const FiltersContext = createContext<FiltersContextValue>({
+  counts: new Map(),
+  pending: false,
+  totalCount: 0,
+})
 
 export const useFiltersContext = (): FiltersContextValue => use(FiltersContext)
 
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
 type FiltersProps = PropsWithChildren & {
   title: string
   action?: string
@@ -35,13 +49,15 @@ type FiltersProps = PropsWithChildren & {
   actions?: ReactNode[]
   /** "down" = collapsible panel on mobile (uses native <details>). "right" is not yet supported. */
   direction?: "down" | "right"
+  /** Auto-submits the form as filters change — immediately for checkbox/radio/select fields, debounced (~400ms) for text fields — and on reset. `onSubmit` still needs `event.preventDefault()` to avoid a real page navigation, same as manual submission, but now it can fire on every keystroke so it's more important than ever to wire up. */
   instant?: boolean
   /** When true, the entire filter panel collapses into a <details> accordion on mobile. */
   collapsible?: boolean
   sticky?: boolean
   /** Show a counter badge on the title with the total number of active filter groups. */
   counter?: boolean
-  onSubmit?: SubmitEventHandler<HTMLFormElement>
+  /** Called on form submit — do the actual filtering here (fetch, router navigation, etc). Return a promise to drive the built-in pending state (`aria-busy` on the form, which also shows a spinner) while it resolves. */
+  onSubmit?: (event: SubmitEvent<HTMLFormElement>) => void | Promise<void>
   onReset?: FormEventHandler<HTMLFormElement>
   onChange?: ChangeEventHandler<HTMLFormElement>
   className?: string
@@ -53,7 +69,7 @@ const Filters = ({
   action,
   items,
   actions,
-  direction,
+  direction = "down",
   instant = false,
   collapsible = false,
   sticky = false,
@@ -68,6 +84,24 @@ const Filters = ({
   const formRef = useRef<HTMLFormElement>(null)
   const [counts, setCounts] = useState<Map<string, number>>(new Map())
   const isMobile: boolean = useMediaQuery(mediaQuery)
+  const [isOpen, setIsOpen] = useState(!isMobile)
+  // Keyed only on `direction` (static per instance), not `isOpen`/`isMobile` -
+  // those change at runtime, and swapping a child's wrapper *component type*
+  // on every toggle would unmount/remount the form fields inside it, wiping
+  // uncontrolled input values each time the drawer opens or closes. `contain`
+  // is reactive on an always-mounted FocusScope, so it's driven dynamically
+  // below instead; autoFocus/restoreFocus are handled manually further down,
+  // since react-aria's versions only fire correctly on a fresh mount.
+  const Wrapper = direction === "right" ? FocusScope : Fragment
+  const isDrawerOpen = direction === "right" && isOpen && isMobile
+  const restoreFocusRef = useRef<HTMLElement | null>(null)
+
+  // Tracks which `onSubmit` call is the most recent, so an out-of-order
+  // (slower) earlier response can't clear pending after a newer submit has
+  // already started.
+  const submitTokenRef = useRef<number>(0)
+  const [pending, setPending] = useState<boolean>(false)
+  const instantDebounceRef = useRef<ReturnType<typeof setTimeout>>(null)
 
   const totalCount = useMemo(() => [...counts.values()].filter(n => n > 0).length, [counts])
 
@@ -82,20 +116,87 @@ const Filters = ({
         if (value) next.set(key, (next.get(key) ?? 0) + 1)
       })
       setCounts(next)
-      onChange(event)
+      onChange?.(event)
+
+      if (!instant) return
+
+      // `event.target` is typed as the form itself (the generic param of
+      // ChangeEventHandler<HTMLFormElement>), but at runtime this fires via
+      // onChangeCapture on whichever field actually changed.
+      const target = event.target as unknown as HTMLInputElement | HTMLSelectElement
+      const isImmediate =
+        target instanceof HTMLSelectElement ||
+        (target instanceof HTMLInputElement && ["checkbox", "radio"].includes(target.type))
+
+      clearTimeout(instantDebounceRef.current)
+      if (isImmediate) {
+        form.requestSubmit()
+      } else {
+        instantDebounceRef.current = setTimeout(() => form.requestSubmit(), DEBOUNCE_MS)
+      }
+    },
+    [onChange, instant],
+  )
+
+  const handleSubmit = useCallback(
+    (event: SubmitEvent<HTMLFormElement>): void => {
+      const result = onSubmit?.(event)
+      if (result) {
+        const token = ++submitTokenRef.current
+        setPending(true)
+        result.finally(() => {
+          if (submitTokenRef.current === token) setPending(false)
+        })
+      }
     },
-    [onChange],
+    [onSubmit],
   )
 
   const handleReset = useCallback<FormEventHandler<HTMLFormElement>>(
     e => {
       setCounts(new Map())
+      clearTimeout(instantDebounceRef.current)
       onReset?.(e)
+      // The "reset" event fires *before* the browser actually clears field
+      // values (per the HTML reset algorithm), so requestSubmit() here would
+      // submit the stale, pre-reset state. Defer to the next task (reusing
+      // the debounce ref, since any pending debounce was just cleared
+      // above), by which point the native reset has already applied.
+      if (instant) {
+        instantDebounceRef.current = setTimeout(() => formRef.current?.requestSubmit(), 0)
+      }
     },
-    [onReset],
+    [onReset, instant],
   )
 
-  const contextValue = useMemo(() => ({ counts }), [counts])
+  const handleToggle = useCallback(({ newState }) => {
+    setIsOpen(newState === "open")
+  }, [])
+
+  useEffect(() => () => clearTimeout(instantDebounceRef.current), [])
+  useIsomorphicLayoutEffect(() => {
+    // oxlint-disable-next-line react/set-state-in-effect -- synchronizes state with the viewport breakpoint, an external system
+    setIsOpen(!isMobile)
+  }, [isMobile])
+
+  // Replaces FocusScope's own `autoFocus`/`restoreFocus` (which only fire
+  // correctly on a fresh mount - see the Wrapper comment above): move focus
+  // into the drawer each time it opens, and restore it to whatever triggered
+  // the open each time it closes.
+  useIsomorphicLayoutEffect(() => {
+    if (!isDrawerOpen) {
+      restoreFocusRef.current?.focus()
+      restoreFocusRef.current = null
+      return
+    }
+    restoreFocusRef.current = document.activeElement as HTMLElement | null
+    formRef.current?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)?.focus()
+  }, [isDrawerOpen])
+
+  const contextValue = useMemo(
+    () => ({ counts, pending, totalCount }),
+    [counts, pending, totalCount],
+  )
 
   const titleNode = (
     <>
@@ -113,37 +214,52 @@ const Filters = ({
       ref={formRef}
       className="mx-filters__form mx-vertical-flow"
       action={action}
+      aria-busy={pending}
       onChangeCapture={handleChange}
-      onSubmit={onSubmit}
+      onSubmit={handleSubmit}
       onReset={handleReset}
     >
-      {items?.map((item, i) => (
-        // Opaque ReactNode with no stable id; index is the only available key.
-        // oxlint-disable-next-line react/no-array-index-key
-        <Fragment key={i}>{item}</Fragment>
-      ))}
-      {children}
-      {actions && actions.length > 0 && (
-        <div className="mx-form-actions">
-          {actions.map((actionNode, i) => (
-            // Opaque ReactNode with no stable id; index is the only available key.
-            // oxlint-disable-next-line react/no-array-index-key
-            <Fragment key={i}>{actionNode}</Fragment>
-          ))}
-        </div>
-      )}
+      <Wrapper {...(direction === "right" ? { contain: isDrawerOpen } : {})}>
+        {direction === "right" && (
+          <div className="mx-filters__title">
+            {title}
+            <button
+              className="mx-button mx-button--icon-only mx-icon mx-icon--close"
+              type="button"
+              onClick={() => setIsOpen(false)}
+            >
+              Close filters
+            </button>
+          </div>
+        )}
+        {items?.map((item, i) => (
+          // Opaque ReactNode with no stable id; index is the only available key.
+          // oxlint-disable-next-line react/no-array-index-key
+          <Fragment key={i}>{item}</Fragment>
+        ))}
+        {children}
+        {actions && actions.length > 0 && (
+          <div className="mx-form-actions">
+            {actions.map((actionNode, i) => (
+              // Opaque ReactNode with no stable id; index is the only available key.
+              // oxlint-disable-next-line react/no-array-index-key
+              <Fragment key={i}>{actionNode}</Fragment>
+            ))}
+          </div>
+        )}
+      </Wrapper>
     </form>
   )
 
   const body = collapsible ? (
-    <details className="mx-accordion" open={!isMobile}>
+    <details className="mx-accordion" open={isOpen} onToggle={handleToggle}>
       <summary className="mx-accordion__toggle mx-filters__title">
         {titleNode}
         <span
-          className={classNames(
-            "mx-icon",
-            direction === "down" ? "mx-icon--chevron-down" : "mx-icon--chevron-right",
-          )}
+          className={classNames("mx-icon", {
+            "mx-icon--chevron-right": direction === "right",
+            "mx-icon--chevron-down": direction === "down",
+          })}
           aria-hidden="true"
         />
       </summary>

package/src/Component/Filters/README.md

@@ -41,17 +41,17 @@ import "@pnx-mixtape/mxds/src/Component/Filters/filters.entry.js"
 
 **`filters.twig` props** (`Filters` type from `ids-shape`):
 
-| Prop          | Type                         | Required | Default   | Description                                                                                                     |
-| ------------- | ---------------------------- | -------- | --------- | --------------------------------------------------------------------------------------------------------------- |
-| `title`       | `string`                     | yes      | `Filters` | Title shown above the form, and used as the collapsed accordion summary on mobile                               |
-| `action`      | `string`                     | yes      | —         | The form `action` attribute                                                                                     |
-| `items`       | `FilterItem[] \| Collection` | yes      | —         | Rendered FilterItem strings                                                                                     |
-| `actions`     | `Button[] \| Collection`     | —        | —         | Submit/reset buttons rendered inside `.mx-form-actions`                                                         |
-| `collapsible` | `boolean`                    | —        | `false`   | Wraps the whole component in `<mx-accordionmobile>` so it collapses below `720px` and stays open above it       |
-| `counter`     | `boolean`                    | —        | `false`   | Shows a total-count tag next to the title (requires `collapsible`)                                              |
-| `direction`   | `"down" \| "right"`          | —        | `"down"`  | On mobile: `down` collapses vertically, `right` slides in from the right as a full-height drawer                |
-| `instant`     | `boolean`                    | —        | `false`   | Adds `mx-filters--auto` — indicates the form is submitted on change (you must wire that up yourself, e.g. AJAX) |
-| `sticky`      | `boolean`                    | —        | `false`   | Adds `mx-filters--sticky` for sticky positioning on desktop                                                     |
+| Prop          | Type                         | Required | Default   | Description                                                                                                                                  |
+| ------------- | ---------------------------- | -------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`       | `string`                     | yes      | `Filters` | Title shown above the form, and used as the collapsed accordion summary on mobile                                                            |
+| `action`      | `string`                     | yes      | —         | The form `action` attribute                                                                                                                  |
+| `items`       | `FilterItem[] \| Collection` | yes      | —         | Rendered FilterItem strings                                                                                                                  |
+| `actions`     | `Button[] \| Collection`     | —        | —         | Submit/reset buttons rendered inside `.mx-form-actions`                                                                                      |
+| `collapsible` | `boolean`                    | —        | `false`   | Wraps the whole component in `<mx-accordionmobile>` so it collapses below `720px` and stays open above it                                    |
+| `counter`     | `boolean`                    | —        | `false`   | Shows a total-count tag next to the title (requires `collapsible`)                                                                           |
+| `direction`   | `"down" \| "right"`          | —        | `"down"`  | On mobile: `down` collapses vertically, `right` slides in from the right as a full-height drawer                                             |
+| `instant`     | `boolean`                    | —        | `false`   | Adds `mx-filters--auto` and auto-submits the form as filters change — see [Instant mode](#instant-mode-instant-prop--mx-filters--auto) below |
+| `sticky`      | `boolean`                    | —        | `false`   | Adds `mx-filters--sticky` for sticky positioning on desktop                                                                                  |
 
 **`filter-item.twig` props** (`FilterItem` type from `ids-shape` — extends `FormItem`):
 
@@ -125,7 +125,7 @@ The `<mx-filters>` custom element wraps a `<form>` and enhances it with:
 
     <div class="mx-form-actions">
       <button class="mx-button mx-button--dark" type="submit">Apply filters</button>
-      <button class="mx-button mx-button--light" type="reset">Clear all filters</button>
+      <button class="mx-button mx-button--light" type="reset">Clear all</button>
     </div>
   </form>
 </mx-filters>
@@ -160,7 +160,7 @@ The `<mx-filters>` custom element wraps a `<form>` and enhances it with:
 
         <div class="mx-form-actions">
           <button class="mx-button mx-button--dark" type="submit">Apply filters</button>
-          <button class="mx-button mx-button--light" type="reset">Clear all filters</button>
+          <button class="mx-button mx-button--light" type="reset">Clear all</button>
         </div>
       </form>
     </details>
@@ -246,7 +246,7 @@ import { FormLabel, FormCheckbox, FormText, FormDescription } from "@pnx-mixtape
       Apply filters
     </button>,
     <button type="reset" className="mx-button mx-button--light">
-      Clear all filters
+      Clear all
     </button>,
   ]}
 />
@@ -258,28 +258,53 @@ Active-filter counts are tracked via `FormData` on the form's `onChange` event.
 
 `FilterItem` components read their per-item count from `FiltersContext`. The context is provided automatically by `<Filters>`. If you render a `FilterItem` outside of `<Filters>`, counter badges will not appear (the context gracefully returns empty counts).
 
+The same context also exposes `pending` and `totalCount`, so you can build your own `actions` (Apply/Clear buttons) that disable themselves while a submit is pending or while no filter is active — the same two conditions the Web Component already disables on via its `count` attribute:
+
+```tsx
+import { useFiltersContext } from "@pnx-mixtape/mxds"
+
+const FilterActions = () => {
+  const { pending, totalCount } = useFiltersContext()
+  const disabled = pending || totalCount === 0
+  return (
+    <>
+      <button type="submit" disabled={disabled}>
+        Apply filters
+      </button>
+      <button type="reset" disabled={disabled}>
+        Clear all
+      </button>
+    </>
+  )
+}
+// <Filters actions={[<FilterActions />]} ... />
+```
+
 ```ts
 import { useFiltersContext } from "@pnx-mixtape/mxds"
-const { counts } = useFiltersContext() // Map<fieldName, activeCount>
+const { counts, pending, totalCount } = useFiltersContext()
+// counts: Map<fieldName, activeCount>
+// pending: boolean — true while an onSubmit promise is in flight
+// totalCount: number — filter groups with at least one active value, 0 = empty
 ```
 
 **`<Filters>` props:**
 
-| Prop          | Type               | Default | Description                                                                                                |
-| ------------- | ------------------ | ------- | ---------------------------------------------------------------------------------------------------------- |
-| `title`       | `string`           | —       | Title shown above the form / inside the collapsible `<summary>`                                            |
-| `action`      | `string`           | —       | `action` on the `<form>`                                                                                   |
-| `items`       | `ReactNode[]`      | —       | `FilterItem` components to render inside the form                                                          |
-| `actions`     | `ReactNode[]`      | —       | Submit/reset buttons rendered inside `.mx-form-actions`                                                    |
-| `collapsible` | `boolean`          | `false` | Wraps title + form in a `<details>` accordion — collapses on mobile                                        |
-| `counter`     | `boolean`          | `false` | Shows a total active-filter count tag next to the title                                                    |
-| `direction`   | `"down"`           | —       | Layout variant. `"right"` (off-canvas drawer) is not yet supported — requires AccordionMobile React parity |
-| `instant`     | `boolean`          | `false` | Adds `mx-filters--auto` CSS class (wire auto-submit behaviour yourself)                                    |
-| `sticky`      | `boolean`          | `false` | Adds `mx-filters--sticky` for sticky desktop positioning                                                   |
-| `onSubmit`    | `FormEventHandler` | —       | Form submit handler                                                                                        |
-| `onReset`     | `FormEventHandler` | —       | Form reset handler (also clears internal counts)                                                           |
-| `className`   | `string`           | —       | Extra class on the outer `<div>`                                                                           |
-| `children`    | `ReactNode`        | —       | Rendered inside the form alongside `items`                                                                 |
+| Prop          | Type               | Default | Description                                                                                                                                  |
+| ------------- | ------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`       | `string`           | —       | Title shown above the form / inside the collapsible `<summary>`                                                                              |
+| `action`      | `string`           | —       | `action` on the `<form>`                                                                                                                     |
+| `items`       | `ReactNode[]`      | —       | `FilterItem` components to render inside the form                                                                                            |
+| `actions`     | `ReactNode[]`      | —       | Submit/reset buttons rendered inside `.mx-form-actions`                                                                                      |
+| `collapsible` | `boolean`          | `false` | Wraps title + form in a `<details>` accordion — collapses on mobile                                                                          |
+| `counter`     | `boolean`          | `false` | Shows a total active-filter count tag next to the title                                                                                      |
+| `direction`   | `"down"`           | —       | Layout variant for mobile.                                                                                                                   |
+| `instant`     | `boolean`          | `false` | Adds `mx-filters--auto` and auto-submits the form as filters change — see [Instant mode](#instant-mode-instant-prop--mx-filters--auto) below |
+| `sticky`      | `boolean`          | `false` | Adds `mx-filters--sticky` for sticky desktop positioning                                                                                     |
+| `onSubmit`    | `FormEventHandler` | —       | Form submit handler                                                                                                                          |
+| `onReset`     | `FormEventHandler` | —       | Form reset handler (also clears internal counts)                                                                                             |
+| `className`   | `string`           | —       | Extra class on the outer `<div>`                                                                                                             |
+| `children`    | `ReactNode`        | —       | Rendered inside the form alongside `items`                                                                                                   |
 
 **`<FilterItem>` props:**
 
@@ -300,15 +325,55 @@ const { counts } = useFiltersContext() // Map<fieldName, activeCount>
 
 ---
 
+## Instant mode (`instant` prop / `mx-filters--auto`)
+
+When `instant` is `true`, the form submits itself as filters change instead of waiting for a manual Apply click:
+
+- **Immediately** for checkbox/radio/select fields (a discrete choice)
+- **Debounced (~400ms)** for text fields, so a fast typist doesn't trigger a submit per keystroke — checking a box or picking a select option while a debounce is pending cancels it and submits right away with the latest state instead
+- **On reset** — clearing all filters re-submits the (now-empty) form
+
+This works identically in React and the Web Component, and both go through the exact same `form.requestSubmit()` a manual Apply click already triggers.
+
+**You still need to intercept the form's `submit` event and call `event.preventDefault()`**, exactly as required for manual submission — this is not new, but it matters much more here: forgetting it means a real page navigation on every keystroke once the debounce fires, not just on an occasional button click.
+
+```tsx
+// React
+<Filters
+  instant
+  onSubmit={event => {
+    event.preventDefault()
+    fetchResults(new FormData(event.currentTarget))
+  }}
+/>
+```
+
+```js
+// Web Component / Twig — the consumer wires the same interception manually
+document.querySelector("mx-filters form").addEventListener("submit", event => {
+  event.preventDefault()
+  fetchResults(new FormData(event.target))
+})
+```
+
+Two more things worth knowing:
+
+- `requestSubmit()` runs the browser's native constraint validation, exactly like a real submit-button click — a `required`/`pattern` field that's currently invalid will silently block the auto-submit (and show the native validation bubble) instead of firing `submit`. Avoid strict native validation attributes on instant-mode fields, or validate yourself instead.
+- The debounce delay (400ms) is a fixed constant in both implementations today, not exposed as a prop.
+
+Instant mode pairs naturally with the built-in pending state (`onSubmit`'s return value in React; the `pending` property on the Web Component) — auto-submits flow through the same `submit` pipeline, so `aria-busy` and the spinner work unchanged.
+
+---
+
 ## Modifiers
 
-| Class                | Prop value                                 | Visual intent                                                                             |
-| -------------------- | ------------------------------------------ | ----------------------------------------------------------------------------------------- |
-| `mx-filters`         | (base)                                     | Default static layout: title + form, always visible                                       |
-| `mx-filters--down`   | `direction: "down"` + `collapsible: true`  | Mobile-only accordion collapse, chevron rotates vertically                                |
-| `mx-filters--right`  | `direction: "right"` + `collapsible: true` | Mobile-only off-canvas drawer sliding from the right                                      |
-| `mx-filters--auto`   | `instant: true`                            | Flags a form that submits automatically on change (style hook; behaviour is app-supplied) |
-| `mx-filters--sticky` | `sticky: true`                             | Sticky positioning hook on desktop                                                        |
+| Class                | Prop value                                 | Visual intent                                                                                                                     |
+| -------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
+| `mx-filters`         | (base)                                     | Default static layout: title + form, always visible                                                                               |
+| `mx-filters--down`   | `direction: "down"` + `collapsible: true`  | Mobile-only accordion collapse, chevron rotates vertically                                                                        |
+| `mx-filters--right`  | `direction: "right"` + `collapsible: true` | Mobile-only off-canvas drawer sliding from the right                                                                              |
+| `mx-filters--auto`   | `instant: true`                            | Style hook + drives real auto-submit-on-change/reset behaviour — see [Instant mode](#instant-mode-instant-prop--mx-filters--auto) |
+| `mx-filters--sticky` | `sticky: true`                             | Sticky positioning hook on desktop                                                                                                |
 
 FilterItem classes:
 

package/src/Component/Filters/__snapshots__/FilterItem.stories.tsx.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Collapsible 1`] = `"<div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-categories-container" aria-expanded="true">Categories<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-categories-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><div class="mx-form-item mx-accordion__content" id="filter-categories"><fieldset class="mx-form-item mx-fieldset" aria-label="Categories" role="group" id="react-aria-_r_1_"><div class="mx-checkbox"><input id="_r_6_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_6_">News</label></div><div class="mx-checkbox"><input id="_r_9_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_9_">Media Releases</label></div><div class="mx-checkbox"><input id="_r_c_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="publications" name="categories"><label for="_r_c_">Publications</label></div></fieldset></div></section></div>"`;
+exports[`Collapsible 1`] = `"<div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-categories-container" aria-expanded="true">Categories<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-categories-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><div class="mx-form-item mx-accordion__content" id="filter-categories-item"><fieldset class="mx-form-item mx-fieldset" aria-label="Categories" role="group" id="react-aria-_r_1_"><div class="mx-checkbox"><input id="_r_6_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_6_">News</label></div><div class="mx-checkbox"><input id="_r_9_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_9_">Media Releases</label></div><div class="mx-checkbox"><input id="_r_c_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="publications" name="categories"><label for="_r_c_">Publications</label></div></fieldset></div></section></div>"`;
 
-exports[`Filter Item Default 1`] = `"<div class="mx-form-item mx-filter-item" id="filter-keywords"><label class="mx-label" for="filter-keywords">Keywords</label><div id="help-filter-keywords" class="mx-description">Search by keywords</div><input class="mx-input__text" id="filter-keywords" aria-describedby="help-filter-keywords" aria-invalid="false" aria-label="Keywords" type="text" value="" name="keywords"></div>"`;
+exports[`Filter Item Default 1`] = `"<div class="mx-form-item mx-filter-item" id="filter-keywords-item"><label class="mx-label" for="filter-keywords">Keywords</label><div id="help-filter-keywords" class="mx-description">Search by keywords</div><input class="mx-input__text" id="filter-keywords" aria-describedby="help-filter-keywords" aria-invalid="false" aria-label="Keywords" type="text" value="" name="keywords"></div>"`;
 
-exports[`Shown Items 1`] = `"<div class="mx-form-item mx-filter-item" id="filter-categories"><label class="mx-label" for="filter-categories">Categories</label><fieldset class="mx-form-item mx-fieldset" aria-label="Categories" role="group" id="react-aria-_r_f_"><div class="mx-checkbox"><input id="_r_k_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_k_">News</label></div><div class="mx-checkbox"><input id="_r_n_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_n_">Media Releases</label></div><div class="mx-checkbox"><input id="_r_q_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="publications" name="categories"><label for="_r_q_">Publications</label></div></fieldset></div>"`;
+exports[`Shown Items 1`] = `"<div class="mx-form-item mx-filter-item" id="filter-categories-item"><label class="mx-label" for="filter-categories">Categories</label><fieldset class="mx-form-item mx-fieldset" aria-label="Categories" role="group" id="react-aria-_r_f_"><div class="mx-checkbox"><input id="_r_k_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_k_">News</label></div><div class="mx-checkbox"><input id="_r_n_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_n_">Media Releases</label></div><div class="mx-checkbox"><input id="_r_q_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="publications" name="categories"><label for="_r_q_">Publications</label></div></fieldset></div>"`;

package/src/Component/Filters/__snapshots__/Filters.stories.ts.snap

@@ -82,7 +82,7 @@ exports[`Collapsible Counter 1`] = `
   
   <button class="mx-button mx-button--light" type="reset">
     
-    <span>Clear all filters</span>
+    <span>Clear all</span>
     
   </button>
 
@@ -177,7 +177,7 @@ exports[`Collapsible Right 1`] = `
   
   <button class="mx-button mx-button--light" type="reset" disabled="">
     
-    <span>Clear all filters</span>
+    <span>Clear all</span>
     
   </button>
 
@@ -257,7 +257,7 @@ exports[`Filters 1`] = `
   
   <button class="mx-button mx-button--light" type="reset" disabled="">
     
-    <span>Clear all filters</span>
+    <span>Clear all</span>
     
   </button>
 
@@ -329,7 +329,85 @@ exports[`Instant 1`] = `
           
   <button class="mx-button mx-button--light" type="reset" disabled="">
     
-    <span>Clear all filters</span>
+    <span>Clear all</span>
+    
+  </button>
+
+      </div>
+      </form>
+
+  </mx-filters>
+"
+`;
+
+exports[`Pending 1`] = `
+"<mx-filters class="mx-filters" count="0">
+
+      <h2 class="mx-filters__title">
+      Filters
+          </h2>
+  
+  <form class="mx-filters__form mx-vertical-flow" action="#" aria-busy="false">
+        
+
+<div class="mx-form-item mx-filter-item">
+    
+<label class="mx-label" for="filter-keywords">
+  Keywords
+  </label>
+
+  <div class="mx-description" id="unique-0">
+  Search by keywords
+</div>
+
+        
+<input class="mx-input__text" id="filter-keywords" name="unique-0" type="text" value="" aria-describedby="unique-0">
+
+    
+  
+</div>
+
+
+
+<fieldset class="mx-form-item mx-fieldset mx-filter-item">
+    
+<legend class="mx-legend">
+  Categories
+  </legend>
+
+  
+      
+<div class="mx-checkbox">
+  <input id="category-news" type="checkbox" name="categories" value="news">
+  <label for="category-news">News</label>
+</div>
+
+<div class="mx-checkbox">
+  <input id="category-media" type="checkbox" name="categories" value="media">
+  <label for="category-media">Media Releases</label>
+</div>
+
+<div class="mx-checkbox">
+  <input id="category-publications" type="checkbox" name="categories" value="publications">
+  <label for="category-publications">Publications</label>
+</div>
+
+    
+  
+</fieldset>
+
+
+          <div class="mx-form-actions">
+          
+  <button class="mx-button mx-button--dark" type="submit" disabled="">
+    
+    <span>Apply filters</span>
+    
+  </button>
+  
+  <button class="mx-button mx-button--light" type="reset" disabled="">
+    
+    <span>Clear all</span>
     
   </button>