@fluentui/react-card 9.6.1 → 9.7.0

package/CHANGELOG.md

@@ -1,20 +1,37 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Thu, 23 Apr 2026 11:59:56 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:34:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.7.0)
+
+Tue, 26 May 2026 09:34:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.6.1..@fluentui/react-card_v9.7.0)
+
+### Minor changes
+
+- Make Card base hooks tabster-free; expose shouldRestrictTriggerAction on CardBaseProps ([PR #36004](https://github.com/microsoft/fluentui/pull/36004) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-text to v9.6.17 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
+### Patches
+
+- fix: avoid pulling griffel in CardHeader and CardPreview base hooks ([PR #36194](https://github.com/microsoft/fluentui/pull/36194) by dmytrokirpa@microsoft.com)
+
 ## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.6.1)
 
-Thu, 23 Apr 2026 11:59:56 GMT 
+Thu, 23 Apr 2026 14:21:18 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.6.0..@fluentui/react-card_v9.6.1)
 
 ### Patches
 
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-text to v9.6.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-text to v9.6.16 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 
 ## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.6.0)
 

package/dist/index.d.ts

@@ -11,7 +11,12 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const Card: ForwardRefComponent<CardProps>;
 
-export declare type CardBaseProps = Omit<CardProps, 'appearance' | 'orientation' | 'size'>;
+export declare type CardBaseProps = Omit<CardProps, 'appearance' | 'orientation' | 'size'> & {
+    /**
+     * Predicate function to determine whether the card's selection action should be restricted.
+     */
+    shouldRestrictTriggerAction?: (event: CardOnSelectionChangeEvent) => boolean;
+};
 
 export declare type CardBaseState = Omit<CardState, 'appearance' | 'orientation' | 'size'>;
 
@@ -377,10 +382,16 @@ export declare const useCard_unstable: (props: CardProps, ref: React_2.Ref<HTMLD
 
 /**
  * Base hook for Card component, which manages state related to interactivity, selection,
- * focus management, ARIA attributes, and slot structure without design props.
+ * ARIA attributes, and slot structure without design props or focus management.
+ *
+ * This hook is intentionally free of `@fluentui/react-tabster` so that it can be
+ * consumed by headless component packages. Focus management (focusable group
+ * attributes, focus-within, focus-restriction predicate) is layered on top in
+ * `useCard_unstable`.
  *
  * @param props - props from this instance of Card
  * @param ref - reference to the root element of Card
+ * @param options - optional behavior overrides such as a focus-aware restriction predicate
  */
 export declare const useCardBase_unstable: (props: CardBaseProps, ref: React_2.Ref<HTMLDivElement>) => CardBaseState;
 

package/lib/components/Card/Card.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Card/Card.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Card selected event type\n *\n * This event is fired when a selectable card changes its selection state.\n */\nexport type CardOnSelectionChangeEvent = React.MouseEvent | React.KeyboardEvent | React.ChangeEvent;\n\n/**\n * Data sent from the selection events on a selectable card.\n */\nexport type CardOnSelectData = {\n  selected: boolean;\n};\n\n/**\n * Data shared between card components\n */\nexport interface CardContextValue {\n  selectableA11yProps: {\n    referenceId?: string;\n    setReferenceId: (referenceId: string) => void;\n    referenceLabel?: string;\n    setReferenceLabel: (referenceLabel: string) => void;\n  };\n}\n\n/**\n * Slots available in the Card component.\n */\nexport type CardSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Floating action that can be rendered on the top-right of a card. Often used together with\n   * `selected`, `defaultSelected`, and `onSelectionChange` props\n   */\n  floatingAction?: Slot<'div'>;\n\n  /**\n   * The internal checkbox element that renders when the card is selectable.\n   */\n  checkbox?: Slot<'input'>;\n};\n\n/**\n * Card component props.\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n  /**\n   * Sets the appearance of the card.\n   *\n   * `filled`\n   * The card will have a shadow, border and background color.\n   *\n   * `filled-alternative`\n   * This appearance is similar to `filled`, but the background color will be a little darker.\n   *\n   * `outline`\n   * This appearance is similar to `filled`, but the background color will be transparent and no shadow applied.\n   *\n   * `subtle`\n   * This appearance is similar to `filled-alternative`, but no border is applied.\n   *\n   * @default 'filled'\n   */\n  appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n  /**\n   * Sets the focus behavior for the card.\n   *\n   * `off`\n   * The card will not focusable.\n   *\n   * `no-tab`\n   * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\n   * pressing the Escape key.\n   *\n   * `tab-exit`\n   * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\n   * the Tab key on the last inner element.\n   *\n   * `tab-only`\n   * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\n   * after the last inner element.\n   *\n   * @default 'off'\n   */\n  focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n\n  /**\n   * Defines the orientation of the card.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n\n  /**\n   * Controls the card's border radius and padding between inner elements.\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Defines the controlled selected state of the card.\n   *\n   * @default false\n   */\n  selected?: boolean;\n\n  /**\n   * Defines whether the card is initially in a selected state when rendered.\n   *\n   * @default false\n   */\n  defaultSelected?: boolean;\n\n  /**\n   * Callback to be called when the selected state value changes.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onSelectionChange?: (event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void;\n\n  /**\n   * Makes the card and card selection disabled (not propagated to children).\n   *\n   * @default false\n   */\n  disabled?: boolean;\n};\n\nexport type CardBaseProps = Omit<CardProps, 'appearance' | 'orientation' | 'size'>;\n\n/**\n * State used in rendering Card.\n */\nexport type CardState = ComponentState<CardSlots> &\n  CardContextValue &\n  Required<\n    Pick<CardProps, 'appearance' | 'orientation' | 'size'> & {\n      /**\n       * Represents a card that contains interactive events (MouseEvents) or is a button/a tag.\n       *\n       * @default false\n       */\n      interactive: boolean;\n\n      /**\n       * Represents a selectable card.\n       *\n       * @default false\n       */\n      selectable: boolean;\n\n      /**\n       * Defines whether the card is currently selected.\n       *\n       * @default false\n       */\n      selected: boolean;\n\n      /**\n       * Defines whether the card internal checkbox is currently focused.\n       *\n       * @default false\n       */\n      selectFocused: boolean;\n\n      /**\n       * Defines whether the card is disabled.\n       *\n       * @default false\n       */\n      disabled: boolean;\n    }\n  >;\n\nexport type CardBaseState = Omit<CardState, 'appearance' | 'orientation' | 'size'>;\n"],"names":[],"mappings":"AAuLA,WAAmF"}
+{"version":3,"sources":["../src/components/Card/Card.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Card selected event type\n *\n * This event is fired when a selectable card changes its selection state.\n */\nexport type CardOnSelectionChangeEvent = React.MouseEvent | React.KeyboardEvent | React.ChangeEvent;\n\n/**\n * Data sent from the selection events on a selectable card.\n */\nexport type CardOnSelectData = {\n  selected: boolean;\n};\n\n/**\n * Data shared between card components\n */\nexport interface CardContextValue {\n  selectableA11yProps: {\n    referenceId?: string;\n    setReferenceId: (referenceId: string) => void;\n    referenceLabel?: string;\n    setReferenceLabel: (referenceLabel: string) => void;\n  };\n}\n\n/**\n * Slots available in the Card component.\n */\nexport type CardSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Floating action that can be rendered on the top-right of a card. Often used together with\n   * `selected`, `defaultSelected`, and `onSelectionChange` props\n   */\n  floatingAction?: Slot<'div'>;\n\n  /**\n   * The internal checkbox element that renders when the card is selectable.\n   */\n  checkbox?: Slot<'input'>;\n};\n\n/**\n * Card component props.\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n  /**\n   * Sets the appearance of the card.\n   *\n   * `filled`\n   * The card will have a shadow, border and background color.\n   *\n   * `filled-alternative`\n   * This appearance is similar to `filled`, but the background color will be a little darker.\n   *\n   * `outline`\n   * This appearance is similar to `filled`, but the background color will be transparent and no shadow applied.\n   *\n   * `subtle`\n   * This appearance is similar to `filled-alternative`, but no border is applied.\n   *\n   * @default 'filled'\n   */\n  appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n  /**\n   * Sets the focus behavior for the card.\n   *\n   * `off`\n   * The card will not focusable.\n   *\n   * `no-tab`\n   * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\n   * pressing the Escape key.\n   *\n   * `tab-exit`\n   * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\n   * the Tab key on the last inner element.\n   *\n   * `tab-only`\n   * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\n   * after the last inner element.\n   *\n   * @default 'off'\n   */\n  focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n\n  /**\n   * Defines the orientation of the card.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n\n  /**\n   * Controls the card's border radius and padding between inner elements.\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Defines the controlled selected state of the card.\n   *\n   * @default false\n   */\n  selected?: boolean;\n\n  /**\n   * Defines whether the card is initially in a selected state when rendered.\n   *\n   * @default false\n   */\n  defaultSelected?: boolean;\n\n  /**\n   * Callback to be called when the selected state value changes.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onSelectionChange?: (event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void;\n\n  /**\n   * Makes the card and card selection disabled (not propagated to children).\n   *\n   * @default false\n   */\n  disabled?: boolean;\n};\n\nexport type CardBaseProps = Omit<CardProps, 'appearance' | 'orientation' | 'size'> & {\n  /**\n   * Predicate function to determine whether the card's selection action should be restricted.\n   */\n  shouldRestrictTriggerAction?: (event: CardOnSelectionChangeEvent) => boolean;\n};\n\n/**\n * State used in rendering Card.\n */\nexport type CardState = ComponentState<CardSlots> &\n  CardContextValue &\n  Required<\n    Pick<CardProps, 'appearance' | 'orientation' | 'size'> & {\n      /**\n       * Represents a card that contains interactive events (MouseEvents) or is a button/a tag.\n       *\n       * @default false\n       */\n      interactive: boolean;\n\n      /**\n       * Represents a selectable card.\n       *\n       * @default false\n       */\n      selectable: boolean;\n\n      /**\n       * Defines whether the card is currently selected.\n       *\n       * @default false\n       */\n      selected: boolean;\n\n      /**\n       * Defines whether the card internal checkbox is currently focused.\n       *\n       * @default false\n       */\n      selectFocused: boolean;\n\n      /**\n       * Defines whether the card is disabled.\n       *\n       * @default false\n       */\n      disabled: boolean;\n    }\n  >;\n\nexport type CardBaseState = Omit<CardState, 'appearance' | 'orientation' | 'size'>;\n"],"names":[],"mappings":"AA4LA,WAAmF"}

package/lib/components/Card/useCard.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
-import { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';
+import { useFocusableGroup, useFocusFinders, useFocusWithin } from '@fluentui/react-tabster';
 import { useCardSelectable } from './useCardSelectable';
 import { cardContextDefaultValue } from './CardContext';
 const focusMap = {
@@ -10,50 +10,27 @@ const focusMap = {
     'tab-exit': 'limited',
     'tab-only': 'unlimited'
 };
+const interactiveEventProps = [
+    'onClick',
+    'onDoubleClick',
+    'onMouseUp',
+    'onMouseDown',
+    'onPointerUp',
+    'onPointerDown',
+    'onTouchStart',
+    'onTouchEnd',
+    'onDragStart',
+    'onDragEnd'
+];
 /**
- * Create the state for interactive cards.
- *
- * This internal hook defines if the card is interactive
- * and control focus properties based on that.
- *
- * @param props - props from this instance of Card
- */ const useCardInteractive = ({ focusMode: initialFocusMode, disabled = false, ...props })=>{
-    const interactive = [
-        'onClick',
-        'onDoubleClick',
-        'onMouseUp',
-        'onMouseDown',
-        'onPointerUp',
-        'onPointerDown',
-        'onTouchStart',
-        'onTouchEnd',
-        'onDragStart',
-        'onDragEnd'
-    ].some((prop)=>props[prop]);
-    // default focusMode to tab-only when interactive, and off when not
-    const focusMode = initialFocusMode !== null && initialFocusMode !== void 0 ? initialFocusMode : interactive ? 'no-tab' : 'off';
-    const groupperAttrs = useFocusableGroup({
-        tabBehavior: focusMap[focusMode]
-    });
-    if (disabled) {
-        return {
-            interactive: false,
-            focusAttributes: null
-        };
-    }
-    if (focusMode === 'off') {
-        return {
-            interactive,
-            focusAttributes: null
-        };
+ * Compute whether a Card is interactive based on the presence of pointer/mouse
+ * event props and the disabled flag. This intentionally does not depend on
+ * focus management utilities so it can be used from headless contexts.
+ */ const computeInteractive = (props)=>{
+    if (props.disabled) {
+        return false;
     }
-    return {
-        interactive,
-        focusAttributes: {
-            ...groupperAttrs,
-            tabIndex: 0
-        }
-    };
+    return interactiveEventProps.some((prop)=>props[prop] !== undefined);
 };
 /**
  * Create the state required to render Card.
@@ -65,7 +42,42 @@ const focusMap = {
  * @param ref - reference to the root element of Card
  */ export const useCard_unstable = (props, ref)=>{
     const { appearance = 'filled', orientation = 'vertical', size = 'medium', ...cardProps } = props;
-    const state = useCardBase_unstable(cardProps, ref);
+    const { disabled = false, focusMode: focusModeProp } = props;
+    // Focus-within ref drives the styled focus outline; merged with the user ref
+    // before being passed down so the base hook does not depend on react-tabster.
+    const focusWithinRef = useFocusWithin();
+    const cardRef = useMergedRefs(focusWithinRef, ref);
+    // Focus-aware predicate that prevents toggling the selection when the user
+    // interacts with an inner focusable element.
+    const { findAllFocusable } = useFocusFinders();
+    const shouldRestrictTriggerAction = React.useCallback((event)=>{
+        if (!focusWithinRef.current) {
+            return false;
+        }
+        const focusableElements = findAllFocusable(focusWithinRef.current);
+        const target = event.target;
+        return focusableElements.some((element)=>element.contains(target));
+    }, [
+        findAllFocusable,
+        focusWithinRef
+    ]);
+    const interactive = computeInteractive(props);
+    const focusMode = focusModeProp !== null && focusModeProp !== void 0 ? focusModeProp : interactive ? 'no-tab' : 'off';
+    const groupperAttrs = useFocusableGroup({
+        tabBehavior: focusMap[focusMode]
+    });
+    const state = useCardBase_unstable({
+        shouldRestrictTriggerAction,
+        ...cardProps
+    }, cardRef);
+    // Apply focusable-group attributes only when the card is not selectable, not
+    // disabled and the focus mode is enabled.
+    const shouldApplyFocusAttributes = !disabled && !state.selectable && focusMode !== 'off';
+    if (shouldApplyFocusAttributes) {
+        Object.assign(state.root, groupperAttrs, {
+            tabIndex: 0
+        });
+    }
     return {
         ...state,
         appearance,
@@ -75,23 +87,26 @@ const focusMap = {
 };
 /**
  * Base hook for Card component, which manages state related to interactivity, selection,
- * focus management, ARIA attributes, and slot structure without design props.
+ * ARIA attributes, and slot structure without design props or focus management.
+ *
+ * This hook is intentionally free of `@fluentui/react-tabster` so that it can be
+ * consumed by headless component packages. Focus management (focusable group
+ * attributes, focus-within, focus-restriction predicate) is layered on top in
+ * `useCard_unstable`.
  *
  * @param props - props from this instance of Card
  * @param ref - reference to the root element of Card
+ * @param options - optional behavior overrides such as a focus-aware restriction predicate
  */ export const useCardBase_unstable = (props, ref)=>{
     const { disabled = false, ...restProps } = props;
     const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
     const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
-    const cardBaseRef = useFocusWithin();
     const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } = useCardSelectable(props, {
         referenceId,
         referenceLabel
-    }, cardBaseRef);
-    const cardRef = useMergedRefs(cardBaseRef, ref);
-    const { interactive, focusAttributes } = useCardInteractive(props);
+    });
+    const interactive = computeInteractive(props);
     let cardRootProps = {
-        ...!selectable ? focusAttributes : null,
         ...restProps,
         ...selectableCardProps
     };
@@ -120,7 +135,7 @@ const focusMap = {
             checkbox: 'input'
         },
         root: slot.always(getIntrinsicElementProps('div', {
-            ref: cardRef,
+            ref,
             role: 'group',
             ...cardRootProps
         }), {

package/lib/components/Card/useCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Card/useCard.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardBaseProps, CardBaseState, CardProps, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\n\nconst focusMap = {\n  off: undefined,\n  'no-tab': 'limited-trap-focus',\n  'tab-exit': 'limited',\n  'tab-only': 'unlimited',\n} as const;\n\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({ focusMode: initialFocusMode, disabled = false, ...props }: CardProps) => {\n  const interactive = (\n    [\n      'onClick',\n      'onDoubleClick',\n      'onMouseUp',\n      'onMouseDown',\n      'onPointerUp',\n      'onPointerDown',\n      'onTouchStart',\n      'onTouchEnd',\n      'onDragStart',\n      'onDragEnd',\n    ] as (keyof React.HTMLAttributes<HTMLElement>)[]\n  ).some(prop => props[prop]);\n\n  // default focusMode to tab-only when interactive, and off when not\n  const focusMode = initialFocusMode ?? (interactive ? 'no-tab' : 'off');\n\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[focusMode],\n  });\n\n  if (disabled) {\n    return {\n      interactive: false,\n      focusAttributes: null,\n    };\n  }\n\n  if (focusMode === 'off') {\n    return {\n      interactive,\n      focusAttributes: null,\n    };\n  }\n\n  return {\n    interactive,\n    focusAttributes: {\n      ...groupperAttrs,\n      tabIndex: 0,\n    },\n  };\n};\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n  const { appearance = 'filled', orientation = 'vertical', size = 'medium', ...cardProps } = props;\n  const state = useCardBase_unstable(cardProps, ref);\n\n  return {\n    ...state,\n    appearance,\n    orientation,\n    size,\n  };\n};\n\n/**\n * Base hook for Card component, which manages state related to interactivity, selection,\n * focus management, ARIA attributes, and slot structure without design props.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */\nexport const useCardBase_unstable = (props: CardBaseProps, ref: React.Ref<HTMLDivElement>): CardBaseState => {\n  const { disabled = false, ...restProps } = props;\n\n  const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n  const cardBaseRef = useFocusWithin<HTMLDivElement>();\n  const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } =\n    useCardSelectable(props, { referenceId, referenceLabel }, cardBaseRef);\n\n  const cardRef = useMergedRefs(cardBaseRef, ref);\n\n  const { interactive, focusAttributes } = useCardInteractive(props);\n\n  let cardRootProps = {\n    ...(!selectable ? focusAttributes : null),\n    ...restProps,\n    ...selectableCardProps,\n  };\n\n  if (disabled) {\n    cardRootProps = {\n      ...restProps,\n      'aria-disabled': true,\n      onClick: undefined,\n    };\n  }\n\n  return {\n    interactive,\n    selectable,\n    selectFocused,\n    selected,\n    disabled,\n    selectableA11yProps: {\n      setReferenceId,\n      referenceId,\n      referenceLabel,\n      setReferenceLabel,\n    },\n\n    components: {\n      root: 'div',\n      floatingAction: 'div',\n      checkbox: 'input',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: cardRef,\n        role: 'group',\n        ...cardRootProps,\n      }),\n      { elementType: 'div' },\n    ),\n\n    floatingAction: floatingActionSlot,\n    checkbox: checkboxSlot,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusableGroup","useFocusWithin","useCardSelectable","cardContextDefaultValue","focusMap","off","undefined","useCardInteractive","focusMode","initialFocusMode","disabled","props","interactive","some","prop","groupperAttrs","tabBehavior","focusAttributes","tabIndex","useCard_unstable","ref","appearance","orientation","size","cardProps","state","useCardBase_unstable","restProps","referenceId","setReferenceId","useState","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","cardRef","cardRootProps","onClick","components","root","floatingAction","checkbox","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,iBAAiB,EAAEC,cAAc,QAAQ,0BAA0B;AAG5E,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,uBAAuB,QAAQ,gBAAgB;AAExD,MAAMC,WAAW;IACfC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AACd;AAEA;;;;;;;CAOC,GACD,MAAMC,qBAAqB,CAAC,EAAEC,WAAWC,gBAAgB,EAAEC,WAAW,KAAK,EAAE,GAAGC,OAAkB;IAChG,MAAMC,cAAc,AAClB;QACE;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACD,CACDC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAE1B,mEAAmE;IACnE,MAAMN,YAAYC,6BAAAA,8BAAAA,mBAAqBG,cAAc,WAAW;IAEhE,MAAMG,gBAAgBf,kBAAkB;QACtCgB,aAAaZ,QAAQ,CAACI,UAAU;IAClC;IAEA,IAAIE,UAAU;QACZ,OAAO;YACLE,aAAa;YACbK,iBAAiB;QACnB;IACF;IAEA,IAAIT,cAAc,OAAO;QACvB,OAAO;YACLI;YACAK,iBAAiB;QACnB;IACF;IAEA,OAAO;QACLL;QACAK,iBAAiB;YACf,GAAGF,aAAa;YAChBG,UAAU;QACZ;IACF;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,mBAAmB,CAACR,OAAkBS;IACjD,MAAM,EAAEC,aAAa,QAAQ,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGb;IAC3F,MAAMc,QAAQC,qBAAqBF,WAAWJ;IAE9C,OAAO;QACL,GAAGK,KAAK;QACRJ;QACAC;QACAC;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMG,uBAAuB,CAACf,OAAsBS;IACzD,MAAM,EAAEV,WAAW,KAAK,EAAE,GAAGiB,WAAW,GAAGhB;IAE3C,MAAM,CAACiB,aAAaC,eAAe,GAAGjC,MAAMkC,QAAQ,CAAC3B,wBAAwB4B,mBAAmB,CAACH,WAAW;IAC5G,MAAM,CAACI,gBAAgBC,kBAAkB,GAAGrC,MAAMkC,QAAQ,CAAC3B,wBAAwB4B,mBAAmB,CAACH,WAAW;IAElH,MAAMM,cAAcjC;IACpB,MAAM,EAAEkC,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,GAClGtC,kBAAkBS,OAAO;QAAEiB;QAAaI;IAAe,GAAGE;IAE5D,MAAMO,UAAU3C,cAAcoC,aAAad;IAE3C,MAAM,EAAER,WAAW,EAAEK,eAAe,EAAE,GAAGV,mBAAmBI;IAE5D,IAAI+B,gBAAgB;QAClB,GAAI,CAACP,aAAalB,kBAAkB,IAAI;QACxC,GAAGU,SAAS;QACZ,GAAGU,mBAAmB;IACxB;IAEA,IAAI3B,UAAU;QACZgC,gBAAgB;YACd,GAAGf,SAAS;YACZ,iBAAiB;YACjBgB,SAASrC;QACX;IACF;IAEA,OAAO;QACLM;QACAuB;QACAG;QACAF;QACA1B;QACAqB,qBAAqB;YACnBF;YACAD;YACAI;YACAC;QACF;QAEAW,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QAEAF,MAAM9C,KAAKiD,MAAM,CACfnD,yBAAyB,OAAO;YAC9BuB,KAAKqB;YACLQ,MAAM;YACN,GAAGP,aAAa;QAClB,IACA;YAAEQ,aAAa;QAAM;QAGvBJ,gBAAgBN;QAChBO,UAAUR;IACZ;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Card/useCard.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusFinders, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardBaseProps, CardBaseState, CardOnSelectionChangeEvent, CardProps, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\n\nconst focusMap = {\n  off: undefined,\n  'no-tab': 'limited-trap-focus',\n  'tab-exit': 'limited',\n  'tab-only': 'unlimited',\n} as const;\n\nconst interactiveEventProps = [\n  'onClick',\n  'onDoubleClick',\n  'onMouseUp',\n  'onMouseDown',\n  'onPointerUp',\n  'onPointerDown',\n  'onTouchStart',\n  'onTouchEnd',\n  'onDragStart',\n  'onDragEnd',\n] as (keyof React.HTMLAttributes<HTMLElement>)[];\n\n/**\n * Compute whether a Card is interactive based on the presence of pointer/mouse\n * event props and the disabled flag. This intentionally does not depend on\n * focus management utilities so it can be used from headless contexts.\n */\nconst computeInteractive = (props: CardProps): boolean => {\n  if (props.disabled) {\n    return false;\n  }\n\n  return interactiveEventProps.some(prop => props[prop] !== undefined);\n};\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n  const { appearance = 'filled', orientation = 'vertical', size = 'medium', ...cardProps } = props;\n  const { disabled = false, focusMode: focusModeProp } = props;\n\n  // Focus-within ref drives the styled focus outline; merged with the user ref\n  // before being passed down so the base hook does not depend on react-tabster.\n  const focusWithinRef = useFocusWithin<HTMLDivElement>();\n  const cardRef = useMergedRefs(focusWithinRef, ref);\n\n  // Focus-aware predicate that prevents toggling the selection when the user\n  // interacts with an inner focusable element.\n  const { findAllFocusable } = useFocusFinders();\n  const shouldRestrictTriggerAction = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (!focusWithinRef.current) {\n        return false;\n      }\n\n      const focusableElements = findAllFocusable(focusWithinRef.current);\n      const target = event.target as HTMLElement;\n\n      return focusableElements.some(element => element.contains(target));\n    },\n    [findAllFocusable, focusWithinRef],\n  );\n\n  const interactive = computeInteractive(props);\n  const focusMode = focusModeProp ?? (interactive ? 'no-tab' : 'off');\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[focusMode],\n  });\n\n  const state = useCardBase_unstable(\n    {\n      shouldRestrictTriggerAction,\n      ...cardProps,\n    },\n    cardRef,\n  );\n\n  // Apply focusable-group attributes only when the card is not selectable, not\n  // disabled and the focus mode is enabled.\n  const shouldApplyFocusAttributes = !disabled && !state.selectable && focusMode !== 'off';\n  if (shouldApplyFocusAttributes) {\n    Object.assign(state.root, groupperAttrs, { tabIndex: 0 });\n  }\n\n  return {\n    ...state,\n    appearance,\n    orientation,\n    size,\n  };\n};\n\n/**\n * Base hook for Card component, which manages state related to interactivity, selection,\n * ARIA attributes, and slot structure without design props or focus management.\n *\n * This hook is intentionally free of `@fluentui/react-tabster` so that it can be\n * consumed by headless component packages. Focus management (focusable group\n * attributes, focus-within, focus-restriction predicate) is layered on top in\n * `useCard_unstable`.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n * @param options - optional behavior overrides such as a focus-aware restriction predicate\n */\nexport const useCardBase_unstable = (props: CardBaseProps, ref: React.Ref<HTMLDivElement>): CardBaseState => {\n  const { disabled = false, ...restProps } = props;\n\n  const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n  const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } =\n    useCardSelectable(props, { referenceId, referenceLabel });\n\n  const interactive = computeInteractive(props);\n\n  let cardRootProps = {\n    ...restProps,\n    ...selectableCardProps,\n  };\n\n  if (disabled) {\n    cardRootProps = {\n      ...restProps,\n      'aria-disabled': true,\n      onClick: undefined,\n    };\n  }\n\n  return {\n    interactive,\n    selectable,\n    selectFocused,\n    selected,\n    disabled,\n    selectableA11yProps: {\n      setReferenceId,\n      referenceId,\n      referenceLabel,\n      setReferenceLabel,\n    },\n\n    components: {\n      root: 'div',\n      floatingAction: 'div',\n      checkbox: 'input',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'group',\n        ...cardRootProps,\n      }),\n      { elementType: 'div' },\n    ),\n\n    floatingAction: floatingActionSlot,\n    checkbox: checkboxSlot,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusableGroup","useFocusFinders","useFocusWithin","useCardSelectable","cardContextDefaultValue","focusMap","off","undefined","interactiveEventProps","computeInteractive","props","disabled","some","prop","useCard_unstable","ref","appearance","orientation","size","cardProps","focusMode","focusModeProp","focusWithinRef","cardRef","findAllFocusable","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","element","contains","interactive","groupperAttrs","tabBehavior","state","useCardBase_unstable","shouldApplyFocusAttributes","selectable","Object","assign","root","tabIndex","restProps","referenceId","setReferenceId","useState","selectableA11yProps","referenceLabel","setReferenceLabel","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","cardRootProps","onClick","components","floatingAction","checkbox","always","role","elementType"],"mappings":"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"}

package/lib/components/Card/useCardSelectable.js

@@ -2,20 +2,18 @@
 import * as React from 'react';
 import { mergeCallbacks, slot, useControllableState } from '@fluentui/react-utilities';
 import { Enter } from '@fluentui/keyboard-keys';
-import { useFocusFinders } from '@fluentui/react-tabster';
 /**
  * Create the state related to selectable cards.
  *
  * This internal hook controls all the logic for selectable cards and is
- * intended to be used alongside with useCard_unstable.
+ * intended to be used alongside with useCardBase_unstable / useCard_unstable.
  *
  * @internal
  * @param props - props from this instance of Card
  * @param a11yProps - accessibility props shared between elements of the card
- * @param cardRef - reference to the root element of Card
- */ export const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{
-    const { checkbox = {}, onSelectionChange, floatingAction, onClick, onKeyDown, disabled } = props;
-    const { findAllFocusable } = useFocusFinders();
+ * @param options - optional behavior overrides such as a focus-aware restriction predicate
+ */ export const useCardSelectable = (props, { referenceLabel, referenceId })=>{
+    const { checkbox = {}, onSelectionChange, floatingAction, onClick, onKeyDown, disabled, shouldRestrictTriggerAction } = props;
     const checkboxRef = React.useRef(null);
     const [selected, setSelected] = useControllableState({
         state: props.selected,
@@ -28,21 +26,12 @@ import { useFocusFinders } from '@fluentui/react-tabster';
         onSelectionChange
     ].some((prop)=>typeof prop !== 'undefined');
     const [selectFocused, setSelectFocused] = React.useState(false);
-    const shouldRestrictTriggerAction = React.useCallback((event)=>{
-        if (!cardRef.current) {
-            return false;
-        }
-        const focusableElements = findAllFocusable(cardRef.current);
-        const target = event.target;
-        const isElementInFocusableGroup = focusableElements.some((element)=>element.contains(target));
-        const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
-        return isElementInFocusableGroup && !isCheckboxSlot;
-    }, [
-        cardRef,
-        findAllFocusable
-    ]);
     const onChangeHandler = React.useCallback((event)=>{
-        if (disabled || shouldRestrictTriggerAction(event)) {
+        if (disabled) {
+            return;
+        }
+        const isCheckboxOrFloatingActionTarget = checkboxRef.current === event.target;
+        if (!isCheckboxOrFloatingActionTarget && (shouldRestrictTriggerAction === null || shouldRestrictTriggerAction === void 0 ? void 0 : shouldRestrictTriggerAction(event))) {
             return;
         }
         const newCheckedValue = !selected;
@@ -79,6 +68,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
         } else if (referenceLabel) {
             selectableCheckboxProps['aria-label'] = referenceLabel;
         }
+        // eslint-disable-next-line react-hooks/refs
         return slot.optional(checkbox, {
             defaultProps: {
                 ref: checkboxRef,
@@ -106,6 +96,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
         if (!floatingAction) {
             return;
         }
+        // eslint-disable-next-line react-hooks/refs
         return slot.optional(floatingAction, {
             defaultProps: {
                 ref: checkboxRef
@@ -120,7 +111,9 @@ import { useFocusFinders } from '@fluentui/react-tabster';
             return null;
         }
         return {
+            // eslint-disable-next-line react-hooks/refs
             onClick: mergeCallbacks(onClick, onChangeHandler),
+            // eslint-disable-next-line react-hooks/refs
             onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)
         };
     }, [

package/lib/components/Card/useCardSelectable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Card/useCardSelectable.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeCallbacks, slot, useControllableState } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport type { CardContextValue, CardOnSelectionChangeEvent, CardProps, CardSlots, CardState } from './Card.types';\n\ntype SelectableA11yProps = Pick<CardContextValue['selectableA11yProps'], 'referenceId' | 'referenceLabel'>;\n\n/**\n * Create the state related to selectable cards.\n *\n * This internal hook controls all the logic for selectable cards and is\n * intended to be used alongside with useCard_unstable.\n *\n * @internal\n * @param props - props from this instance of Card\n * @param a11yProps - accessibility props shared between elements of the card\n * @param cardRef - reference to the root element of Card\n */\nexport const useCardSelectable = (\n  props: CardProps,\n  { referenceLabel, referenceId }: SelectableA11yProps,\n  cardRef: React.RefObject<HTMLDivElement | null>,\n): {\n  selected: boolean;\n  selectable: boolean;\n  selectFocused: boolean;\n  selectableCardProps: {\n    onClick: React.MouseEventHandler<HTMLDivElement>;\n    onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;\n  } | null;\n  checkboxSlot: CardState['checkbox'];\n  floatingActionSlot: CardState['floatingAction'];\n} => {\n  const { checkbox = {}, onSelectionChange, floatingAction, onClick, onKeyDown, disabled } = props;\n\n  const { findAllFocusable } = useFocusFinders();\n  const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n  const [selected, setSelected] = useControllableState({\n    state: props.selected,\n    defaultState: props.defaultSelected,\n    initialState: false,\n  });\n  const selectable = [props.selected, props.defaultSelected, onSelectionChange].some(\n    prop => typeof prop !== 'undefined',\n  );\n\n  const [selectFocused, setSelectFocused] = React.useState(false);\n\n  const shouldRestrictTriggerAction = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (!cardRef.current) {\n        return false;\n      }\n\n      const focusableElements = findAllFocusable(cardRef.current);\n      const target = event.target as HTMLElement;\n      const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));\n      const isCheckboxSlot = checkboxRef?.current === target;\n\n      return isElementInFocusableGroup && !isCheckboxSlot;\n    },\n    [cardRef, findAllFocusable],\n  );\n\n  const onChangeHandler = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (disabled || shouldRestrictTriggerAction(event)) {\n        return;\n      }\n\n      const newCheckedValue = !selected;\n\n      setSelected(newCheckedValue);\n\n      if (onSelectionChange) {\n        onSelectionChange(event, { selected: newCheckedValue });\n      }\n    },\n    [disabled, onSelectionChange, selected, setSelected, shouldRestrictTriggerAction],\n  );\n\n  const onKeyDownHandler = React.useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if ([Enter].includes(event.key)) {\n        event.preventDefault();\n        onChangeHandler(event);\n      }\n    },\n    [onChangeHandler],\n  );\n\n  const checkboxSlot = React.useMemo(() => {\n    if (!selectable || floatingAction) {\n      return;\n    }\n\n    const selectableCheckboxProps: CardSlots['checkbox'] = {};\n\n    if (referenceId) {\n      selectableCheckboxProps['aria-labelledby'] = referenceId;\n    } else if (referenceLabel) {\n      selectableCheckboxProps['aria-label'] = referenceLabel;\n    }\n\n    return slot.optional(checkbox, {\n      defaultProps: {\n        ref: checkboxRef,\n        type: 'checkbox',\n        checked: selected,\n        disabled,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n        onFocus: () => setSelectFocused(true),\n        onBlur: () => setSelectFocused(false),\n        ...selectableCheckboxProps,\n      },\n      elementType: 'input',\n    });\n  }, [checkbox, disabled, floatingAction, selected, selectable, onChangeHandler, referenceId, referenceLabel]);\n\n  const floatingActionSlot = React.useMemo(() => {\n    if (!floatingAction) {\n      return;\n    }\n\n    return slot.optional(floatingAction, {\n      defaultProps: {\n        ref: checkboxRef,\n      },\n      elementType: 'div',\n    });\n  }, [floatingAction]);\n\n  const selectableCardProps = React.useMemo(() => {\n    if (!selectable) {\n      return null;\n    }\n\n    return {\n      onClick: mergeCallbacks(onClick, onChangeHandler),\n      onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler),\n    };\n  }, [selectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n\n  return {\n    selected,\n    selectable,\n    selectFocused,\n    selectableCardProps,\n    checkboxSlot,\n    floatingActionSlot,\n  };\n};\n"],"names":["React","mergeCallbacks","slot","useControllableState","Enter","useFocusFinders","useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","onSelectionChange","floatingAction","onClick","onKeyDown","disabled","findAllFocusable","checkboxRef","useRef","selected","setSelected","state","defaultState","defaultSelected","initialState","selectable","some","prop","selectFocused","setSelectFocused","useState","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","optional","defaultProps","ref","type","checked","onChange","onFocus","onBlur","elementType","floatingActionSlot","selectableCardProps"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Card/useCardSelectable.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeCallbacks, slot, useControllableState } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\n\nimport type { CardBaseProps, CardContextValue, CardOnSelectionChangeEvent, CardSlots, CardState } from './Card.types';\n\ntype SelectableA11yProps = Pick<CardContextValue['selectableA11yProps'], 'referenceId' | 'referenceLabel'>;\n\n/**\n * Create the state related to selectable cards.\n *\n * This internal hook controls all the logic for selectable cards and is\n * intended to be used alongside with useCardBase_unstable / useCard_unstable.\n *\n * @internal\n * @param props - props from this instance of Card\n * @param a11yProps - accessibility props shared between elements of the card\n * @param options - optional behavior overrides such as a focus-aware restriction predicate\n */\nexport const useCardSelectable = (\n  props: CardBaseProps,\n  { referenceLabel, referenceId }: SelectableA11yProps,\n): {\n  selected: boolean;\n  selectable: boolean;\n  selectFocused: boolean;\n  selectableCardProps: {\n    onClick: React.MouseEventHandler<HTMLDivElement>;\n    onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;\n  } | null;\n  checkboxSlot: CardState['checkbox'];\n  floatingActionSlot: CardState['floatingAction'];\n} => {\n  const {\n    checkbox = {},\n    onSelectionChange,\n    floatingAction,\n    onClick,\n    onKeyDown,\n    disabled,\n    shouldRestrictTriggerAction,\n  } = props;\n\n  const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n  const [selected, setSelected] = useControllableState({\n    state: props.selected,\n    defaultState: props.defaultSelected,\n    initialState: false,\n  });\n  const selectable = [props.selected, props.defaultSelected, onSelectionChange].some(\n    prop => typeof prop !== 'undefined',\n  );\n\n  const [selectFocused, setSelectFocused] = React.useState(false);\n\n  const onChangeHandler = React.useCallback(\n    (event: CardOnSelectionChangeEvent) => {\n      if (disabled) {\n        return;\n      }\n\n      const isCheckboxOrFloatingActionTarget = checkboxRef.current === (event.target as HTMLElement);\n\n      if (!isCheckboxOrFloatingActionTarget && shouldRestrictTriggerAction?.(event)) {\n        return;\n      }\n\n      const newCheckedValue = !selected;\n\n      setSelected(newCheckedValue);\n\n      if (onSelectionChange) {\n        onSelectionChange(event, { selected: newCheckedValue });\n      }\n    },\n    [disabled, onSelectionChange, selected, setSelected, shouldRestrictTriggerAction],\n  );\n\n  const onKeyDownHandler = React.useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if ([Enter].includes(event.key)) {\n        event.preventDefault();\n        onChangeHandler(event);\n      }\n    },\n    [onChangeHandler],\n  );\n\n  const checkboxSlot = React.useMemo(() => {\n    if (!selectable || floatingAction) {\n      return;\n    }\n\n    const selectableCheckboxProps: CardSlots['checkbox'] = {};\n\n    if (referenceId) {\n      selectableCheckboxProps['aria-labelledby'] = referenceId;\n    } else if (referenceLabel) {\n      selectableCheckboxProps['aria-label'] = referenceLabel;\n    }\n\n    // eslint-disable-next-line react-hooks/refs\n    return slot.optional(checkbox, {\n      defaultProps: {\n        ref: checkboxRef,\n        type: 'checkbox',\n        checked: selected,\n        disabled,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n        onFocus: () => setSelectFocused(true),\n        onBlur: () => setSelectFocused(false),\n        ...selectableCheckboxProps,\n      },\n      elementType: 'input',\n    });\n  }, [checkbox, disabled, floatingAction, selected, selectable, onChangeHandler, referenceId, referenceLabel]);\n\n  const floatingActionSlot = React.useMemo(() => {\n    if (!floatingAction) {\n      return;\n    }\n\n    // eslint-disable-next-line react-hooks/refs\n    return slot.optional(floatingAction, {\n      defaultProps: {\n        ref: checkboxRef,\n      },\n      elementType: 'div',\n    });\n  }, [floatingAction]);\n\n  const selectableCardProps = React.useMemo(() => {\n    if (!selectable) {\n      return null;\n    }\n\n    return {\n      // eslint-disable-next-line react-hooks/refs\n      onClick: mergeCallbacks(onClick, onChangeHandler),\n      // eslint-disable-next-line react-hooks/refs\n      onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler),\n    };\n  }, [selectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n\n  return {\n    selected,\n    selectable,\n    selectFocused,\n    selectableCardProps,\n    checkboxSlot,\n    floatingActionSlot,\n  };\n};\n"],"names":["React","mergeCallbacks","slot","useControllableState","Enter","useCardSelectable","props","referenceLabel","referenceId","checkbox","onSelectionChange","floatingAction","onClick","onKeyDown","disabled","shouldRestrictTriggerAction","checkboxRef","useRef","selected","setSelected","state","defaultState","defaultSelected","initialState","selectable","some","prop","selectFocused","setSelectFocused","useState","onChangeHandler","useCallback","event","isCheckboxOrFloatingActionTarget","current","target","newCheckedValue","onKeyDownHandler","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","optional","defaultProps","ref","type","checked","onChange","onFocus","onBlur","elementType","floatingActionSlot","selectableCardProps"],"mappings":"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"}

package/lib/components/Card/useCardStyles.styles.js

@@ -488,11 +488,14 @@ export const useCardStyles_unstable = state => {
     }
     return styles.focused;
   }, [state.disabled, state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.disabled && styles.disabled, state.disabled && state.appearance === 'outline' && styles.outlineDisabled, state.root.className);
   if (state.floatingAction) {
+    // eslint-disable-next-line react-hooks/immutability
     state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
   }
   if (state.checkbox) {
+    // eslint-disable-next-line react-hooks/immutability
     state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
   }
   return state;

package/lib/components/Card/useCardStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","shorthands","__styles","mergeClasses","__resetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","disabledStyles","cursor","userSelect","color","colorNeutralForegroundDisabled","backgroundColor","colorNeutralBackgroundDisabled","boxShadow","shadow2","borderColor","colorNeutralStrokeDisabled","content","position","inset","zIndex","zIndexContent","useCardStyles","focused","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bqhya38","Bwxa6fj","Bdhvstf","B7zbvrb","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","orientationHorizontal","Beiy3e4","Bt984gj","Binpb3b","qrt8p2","k6ws3r","Btcwela","Fer9m8","orientationVertical","B5nvv7i","Baxg94k","tn21ii","B0ud6bj","Bgdo4j","sizeSmall","B7balbw","B1h88n7","sizeMedium","sizeLarge","interactive","rhjd8f","filled","De3pzq","E5pizo","B0n5ga8","s924m2","B1q35kw","Gp14am","filledInteractive","Bceei9c","Bi91k9c","Jwef8y","Bvxd0ez","ecr2s2","filledInteractiveSelected","filledAlternative","filledAlternativeInteractive","filledAlternativeInteractiveSelected","outline","outlineInteractive","Be0v6ae","B5kxglz","B3pwyw6","Bymgtzf","dmfk","B4ofi8","jgq6uv","Baxewws","outlineInteractiveSelected","outlineDisabled","g2u3we","h3c5rm","B9xav0g","zhjwy3","ezxybo","wc7uws","subtle","subtleInteractive","subtleInteractiveSelected","highContrastSelected","B8gzw0y","By8wz76","B7iucu3","Boo9lyk","sga51p","qj1yg9","B8acmzm","Gezqo6","highContrastInteractive","waf3gn","B96h8j5","Bpd3jnq","uhbujs","select","qhf8xq","Bhzewxz","j35jbq","Bj3rh1h","hiddenCheckbox","B68tc82","Bmxbyg5","Bpg54ce","a9b677","Bqenvij","Bh84pgu","Bgl5zvf","Huce71","disabled","famaaq","sj55zd","Ftih45","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","Ehzi8l","Bikrtoi","G8qf51","Brxh4y7","gp3uxg","Fohawp","Bxulg6k","vcjq4m","Bsqkqe9","fskg1g","iwiei9","Effecx","Bkt1b9m","jfmxvr","orauir","B2yd9ot","Fn9tzk","Bv0wker","Bp2dl5b","pzn0iz","f","i","d","p","m","h","a","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"sources":["useCardStyles.styles.js"],"sourcesContent":["'use client';\nimport * as React from 'react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { textClassNames } from '@fluentui/react-text';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardClassNames = {\n    root: 'fui-Card',\n    floatingAction: 'fui-Card__floatingAction',\n    checkbox: 'fui-Card__checkbox'\n};\n/**\n * CSS variable names used internally for uniform styling in Card.\n */ export const cardCSSVars = {\n    cardSizeVar: '--fui-Card--size',\n    cardBorderRadiusVar: '--fui-Card--border-radius'\n};\nconst focusOutlineStyle = {\n    outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineOffset: '-2px'\n};\nconst useCardResetStyles = makeResetStyles({\n    overflow: 'hidden',\n    borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n    padding: `var(${cardCSSVars.cardSizeVar})`,\n    gap: `var(${cardCSSVars.cardSizeVar})`,\n    display: 'flex',\n    position: 'relative',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    // Border setting using after pseudo element to allow CardPreview to render behind it.\n    '::after': {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        content: '\"\"',\n        pointerEvents: 'none',\n        ...shorthands.borderStyle('solid'),\n        ...shorthands.borderWidth(tokens.strokeWidthThin),\n        borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`\n    },\n    // Prevents CardHeader and CardFooter from shrinking.\n    [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n        flexShrink: 0\n    }\n});\nconst disabledStyles = {\n    cursor: 'not-allowed',\n    userSelect: 'none',\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    boxShadow: tokens.shadow2,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '::before': {\n        content: '\"\"',\n        position: 'absolute',\n        inset: 0,\n        zIndex: `calc(${tokens.zIndexContent} + 1)`\n    },\n    '::after': {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n    }\n};\nconst useCardStyles = makeStyles({\n    focused: {\n        ...createFocusOutlineStyle({\n            style: focusOutlineStyle,\n            selector: 'focus'\n        })\n    },\n    selectableFocused: createFocusOutlineStyle({\n        style: focusOutlineStyle,\n        selector: 'focus-within'\n    }),\n    orientationHorizontal: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        // Remove vertical padding to keep CardPreview content flush with Card's borders.\n        [`> .${cardPreviewClassNames.root}`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the last element.\n        // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n        [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n            flexGrow: 1\n        }\n    },\n    orientationVertical: {\n        flexDirection: 'column',\n        // Remove lateral padding to keep CardPreview content flush with Card's borders.\n        [`> .${cardPreviewClassNames.root}`]: {\n            marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        }\n    },\n    sizeSmall: {\n        [cardCSSVars.cardSizeVar]: '8px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall\n    },\n    sizeMedium: {\n        [cardCSSVars.cardSizeVar]: '12px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium\n    },\n    sizeLarge: {\n        [cardCSSVars.cardSizeVar]: '16px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge\n    },\n    interactive: {\n        [`& .${textClassNames.root}`]: {\n            color: 'currentColor'\n        }\n    },\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed\n        }\n    },\n    filledInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorNeutralBackground1Selected\n        }\n    },\n    filledAlternative: {\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledAlternativeInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Hover,\n            backgroundColor: tokens.colorNeutralBackground2Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground2Pressed\n        }\n    },\n    filledAlternativeInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground2Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Selected,\n            backgroundColor: tokens.colorNeutralBackground2Selected\n        }\n    },\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        }\n    },\n    outlineInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n            }\n        }\n    },\n    outlineInteractiveSelected: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorTransparentBackgroundSelected\n        }\n    },\n    outlineDisabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '&:hover, &:active': {\n            backgroundColor: tokens.colorTransparentBackground,\n            boxShadow: 'none'\n        },\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    subtleInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        }\n    },\n    subtleInteractiveSelected: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        }\n    },\n    highContrastSelected: {\n        '@media (forced-colors: active)': {\n            forcedColorAdjust: 'none',\n            backgroundColor: 'Highlight',\n            color: 'HighlightText',\n            [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                forcedColorAdjust: 'auto'\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    highContrastInteractive: {\n        '@media (forced-colors: active)': {\n            ':hover, :active': {\n                forcedColorAdjust: 'none',\n                backgroundColor: 'Highlight',\n                color: 'HighlightText',\n                [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                    forcedColorAdjust: 'auto'\n                }\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    select: {\n        position: 'absolute',\n        top: '4px',\n        right: '4px',\n        zIndex: tokens.zIndexContent\n    },\n    hiddenCheckbox: {\n        overflow: 'hidden',\n        width: '1px',\n        height: '1px',\n        position: 'absolute',\n        clip: 'rect(0 0 0 0)',\n        clipPath: 'inset(50%)',\n        whiteSpace: 'nowrap'\n    },\n    disabled: {\n        ...disabledStyles,\n        '&:hover, &:active': disabledStyles\n    }\n});\n/**\n * Apply styling to the Card slots based on the state.\n */ export const useCardStyles_unstable = (state)=>{\n    'use no memo';\n    const resetStyles = useCardResetStyles();\n    const styles = useCardStyles();\n    const orientationMap = {\n        horizontal: styles.orientationHorizontal,\n        vertical: styles.orientationVertical\n    };\n    const sizeMap = {\n        small: styles.sizeSmall,\n        medium: styles.sizeMedium,\n        large: styles.sizeLarge\n    };\n    const appearanceMap = {\n        filled: styles.filled,\n        'filled-alternative': styles.filledAlternative,\n        outline: styles.outline,\n        subtle: styles.subtle\n    };\n    const selectedMap = {\n        filled: styles.filledInteractiveSelected,\n        'filled-alternative': styles.filledAlternativeInteractiveSelected,\n        outline: styles.outlineInteractiveSelected,\n        subtle: styles.subtleInteractiveSelected\n    };\n    const interactiveMap = {\n        filled: styles.filledInteractive,\n        'filled-alternative': styles.filledAlternativeInteractive,\n        outline: styles.outlineInteractive,\n        subtle: styles.subtleInteractive\n    };\n    const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);\n    const focusedClassName = React.useMemo(()=>{\n        if (state.disabled) {\n            return '';\n        }\n        if (state.selectable) {\n            if (state.selectFocused) {\n                return styles.selectableFocused;\n            }\n            return '';\n        }\n        return styles.focused;\n    }, [\n        state.disabled,\n        state.selectFocused,\n        state.selectable,\n        styles.focused,\n        styles.selectableFocused\n    ]);\n    state.root.className = mergeClasses(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.disabled && styles.disabled, state.disabled && state.appearance === 'outline' && styles.outlineDisabled, state.root.className);\n    if (state.floatingAction) {\n        state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);\n    }\n    if (state.checkbox) {\n        state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","shorthands","__styles","mergeClasses","__resetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","disabledStyles","cursor","userSelect","color","colorNeutralForegroundDisabled","backgroundColor","colorNeutralBackgroundDisabled","boxShadow","shadow2","borderColor","colorNeutralStrokeDisabled","content","position","inset","zIndex","zIndexContent","useCardStyles","focused","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bqhya38","Bwxa6fj","Bdhvstf","B7zbvrb","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","orientationHorizontal","Beiy3e4","Bt984gj","Binpb3b","qrt8p2","k6ws3r","Btcwela","Fer9m8","orientationVertical","B5nvv7i","Baxg94k","tn21ii","B0ud6bj","Bgdo4j","sizeSmall","B7balbw","B1h88n7","sizeMedium","sizeLarge","interactive","rhjd8f","filled","De3pzq","E5pizo","B0n5ga8","s924m2","B1q35kw","Gp14am","filledInteractive","Bceei9c","Bi91k9c","Jwef8y","Bvxd0ez","ecr2s2","filledInteractiveSelected","filledAlternative","filledAlternativeInteractive","filledAlternativeInteractiveSelected","outline","outlineInteractive","Be0v6ae","B5kxglz","B3pwyw6","Bymgtzf","dmfk","B4ofi8","jgq6uv","Baxewws","outlineInteractiveSelected","outlineDisabled","g2u3we","h3c5rm","B9xav0g","zhjwy3","ezxybo","wc7uws","subtle","subtleInteractive","subtleInteractiveSelected","highContrastSelected","B8gzw0y","By8wz76","B7iucu3","Boo9lyk","sga51p","qj1yg9","B8acmzm","Gezqo6","highContrastInteractive","waf3gn","B96h8j5","Bpd3jnq","uhbujs","select","qhf8xq","Bhzewxz","j35jbq","Bj3rh1h","hiddenCheckbox","B68tc82","Bmxbyg5","Bpg54ce","a9b677","Bqenvij","Bh84pgu","Bgl5zvf","Huce71","disabled","famaaq","sj55zd","Ftih45","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","Ehzi8l","Bikrtoi","G8qf51","Brxh4y7","gp3uxg","Fohawp","Bxulg6k","vcjq4m","Bsqkqe9","fskg1g","iwiei9","Effecx","Bkt1b9m","jfmxvr","orauir","B2yd9ot","Fn9tzk","Bv0wker","Bp2dl5b","pzn0iz","f","i","d","p","m","h","a","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"sources":["useCardStyles.styles.js"],"sourcesContent":["'use client';\nimport * as React from 'react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { textClassNames } from '@fluentui/react-text';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardClassNames = {\n    root: 'fui-Card',\n    floatingAction: 'fui-Card__floatingAction',\n    checkbox: 'fui-Card__checkbox'\n};\n/**\n * CSS variable names used internally for uniform styling in Card.\n */ export const cardCSSVars = {\n    cardSizeVar: '--fui-Card--size',\n    cardBorderRadiusVar: '--fui-Card--border-radius'\n};\nconst focusOutlineStyle = {\n    outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineOffset: '-2px'\n};\nconst useCardResetStyles = makeResetStyles({\n    overflow: 'hidden',\n    borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n    padding: `var(${cardCSSVars.cardSizeVar})`,\n    gap: `var(${cardCSSVars.cardSizeVar})`,\n    display: 'flex',\n    position: 'relative',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    // Border setting using after pseudo element to allow CardPreview to render behind it.\n    '::after': {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        content: '\"\"',\n        pointerEvents: 'none',\n        ...shorthands.borderStyle('solid'),\n        ...shorthands.borderWidth(tokens.strokeWidthThin),\n        borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`\n    },\n    // Prevents CardHeader and CardFooter from shrinking.\n    [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n        flexShrink: 0\n    }\n});\nconst disabledStyles = {\n    cursor: 'not-allowed',\n    userSelect: 'none',\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    boxShadow: tokens.shadow2,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '::before': {\n        content: '\"\"',\n        position: 'absolute',\n        inset: 0,\n        zIndex: `calc(${tokens.zIndexContent} + 1)`\n    },\n    '::after': {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n    }\n};\nconst useCardStyles = makeStyles({\n    focused: {\n        ...createFocusOutlineStyle({\n            style: focusOutlineStyle,\n            selector: 'focus'\n        })\n    },\n    selectableFocused: createFocusOutlineStyle({\n        style: focusOutlineStyle,\n        selector: 'focus-within'\n    }),\n    orientationHorizontal: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        // Remove vertical padding to keep CardPreview content flush with Card's borders.\n        [`> .${cardPreviewClassNames.root}`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the last element.\n        // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n        [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n            flexGrow: 1\n        }\n    },\n    orientationVertical: {\n        flexDirection: 'column',\n        // Remove lateral padding to keep CardPreview content flush with Card's borders.\n        [`> .${cardPreviewClassNames.root}`]: {\n            marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        },\n        // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n        // As such, the code below targets a CardPreview, when it's the first element.\n        // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n        [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`\n        }\n    },\n    sizeSmall: {\n        [cardCSSVars.cardSizeVar]: '8px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall\n    },\n    sizeMedium: {\n        [cardCSSVars.cardSizeVar]: '12px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium\n    },\n    sizeLarge: {\n        [cardCSSVars.cardSizeVar]: '16px',\n        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge\n    },\n    interactive: {\n        [`& .${textClassNames.root}`]: {\n            color: 'currentColor'\n        }\n    },\n    filled: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed\n        }\n    },\n    filledInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorNeutralBackground1Selected\n        }\n    },\n    filledAlternative: {\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    filledAlternativeInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorNeutralBackground2,\n        boxShadow: tokens.shadow4,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Hover,\n            backgroundColor: tokens.colorNeutralBackground2Hover,\n            boxShadow: tokens.shadow8\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground2Pressed\n        }\n    },\n    filledAlternativeInteractiveSelected: {\n        backgroundColor: tokens.colorNeutralBackground2Selected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Selected,\n            backgroundColor: tokens.colorNeutralBackground2Selected\n        }\n    },\n    outline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        }\n    },\n    outlineInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n            }\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            '::after': {\n                ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n            }\n        }\n    },\n    outlineInteractiveSelected: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorTransparentBackgroundSelected\n        }\n    },\n    outlineDisabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        boxShadow: 'none',\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '&:hover, &:active': {\n            backgroundColor: tokens.colorTransparentBackground,\n            boxShadow: 'none'\n        },\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n        }\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        }\n    },\n    subtleInteractive: {\n        cursor: 'pointer',\n        backgroundColor: tokens.colorSubtleBackground,\n        boxShadow: 'none',\n        '::after': {\n            ...shorthands.borderColor(tokens.colorTransparentStroke)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        }\n    },\n    subtleInteractiveSelected: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        '::after': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground1Selected,\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        }\n    },\n    highContrastSelected: {\n        '@media (forced-colors: active)': {\n            forcedColorAdjust: 'none',\n            backgroundColor: 'Highlight',\n            color: 'HighlightText',\n            [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                forcedColorAdjust: 'auto'\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    highContrastInteractive: {\n        '@media (forced-colors: active)': {\n            ':hover, :active': {\n                forcedColorAdjust: 'none',\n                backgroundColor: 'Highlight',\n                color: 'HighlightText',\n                [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n                    forcedColorAdjust: 'auto'\n                }\n            },\n            '::after': {\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    select: {\n        position: 'absolute',\n        top: '4px',\n        right: '4px',\n        zIndex: tokens.zIndexContent\n    },\n    hiddenCheckbox: {\n        overflow: 'hidden',\n        width: '1px',\n        height: '1px',\n        position: 'absolute',\n        clip: 'rect(0 0 0 0)',\n        clipPath: 'inset(50%)',\n        whiteSpace: 'nowrap'\n    },\n    disabled: {\n        ...disabledStyles,\n        '&:hover, &:active': disabledStyles\n    }\n});\n/**\n * Apply styling to the Card slots based on the state.\n */ export const useCardStyles_unstable = (state)=>{\n    'use no memo';\n    const resetStyles = useCardResetStyles();\n    const styles = useCardStyles();\n    const orientationMap = {\n        horizontal: styles.orientationHorizontal,\n        vertical: styles.orientationVertical\n    };\n    const sizeMap = {\n        small: styles.sizeSmall,\n        medium: styles.sizeMedium,\n        large: styles.sizeLarge\n    };\n    const appearanceMap = {\n        filled: styles.filled,\n        'filled-alternative': styles.filledAlternative,\n        outline: styles.outline,\n        subtle: styles.subtle\n    };\n    const selectedMap = {\n        filled: styles.filledInteractiveSelected,\n        'filled-alternative': styles.filledAlternativeInteractiveSelected,\n        outline: styles.outlineInteractiveSelected,\n        subtle: styles.subtleInteractiveSelected\n    };\n    const interactiveMap = {\n        filled: styles.filledInteractive,\n        'filled-alternative': styles.filledAlternativeInteractive,\n        outline: styles.outlineInteractive,\n        subtle: styles.subtleInteractive\n    };\n    const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);\n    const focusedClassName = React.useMemo(()=>{\n        if (state.disabled) {\n            return '';\n        }\n        if (state.selectable) {\n            if (state.selectFocused) {\n                return styles.selectableFocused;\n            }\n            return '';\n        }\n        return styles.focused;\n    }, [\n        state.disabled,\n        state.selectFocused,\n        state.selectable,\n        styles.focused,\n        styles.selectableFocused\n    ]);\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.disabled && styles.disabled, state.disabled && state.appearance === 'outline' && styles.outlineDisabled, state.root.className);\n    if (state.floatingAction) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);\n    }\n    if (state.checkbox) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}