npm - @fluentui/react-card - Versions diffs - 9.4.5 → 9.5.1 - Mend

@fluentui/react-card 9.4.5 → 9.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,21 +1,55 @@
 # Change Log - @fluentui/react-card
-This log was last generated on Thu, 21 Aug 2025 12:20:43 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 15:07:03 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.5.1)
+Thu, 02 Oct 2025 15:07:03 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.5.0..@fluentui/react-card_v9.5.1)
+### Patches
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-text to v9.6.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.5.0)
+Mon, 08 Sep 2025 12:51:26 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.4.5..@fluentui/react-card_v9.5.0)
+### Minor changes
+- feat: add support for disabled cards ([PR #35028](https://github.com/microsoft/fluentui/pull/35028) by marcosvmmoura@gmail.com)
+- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-tabster to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-text to v9.6.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+### Patches
+- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
+- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
+- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
 ## [9.4.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.4.5)
-Thu, 21 Aug 2025 12:20:43 GMT
+Thu, 21 Aug 2025 12:25:39 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.4.4..@fluentui/react-card_v9.4.5)
 ### Patches
-- Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-tabster to v9.26.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-text to v9.6.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-tabster to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-text to v9.6.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
 ## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.4.4)

package/dist/index.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -241,6 +242,12 @@ export declare type CardProps = ComponentProps<CardSlots> & {
      * Callback to be called when the selected state value changes.
      */
     onSelectionChange?: (event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void;
+    /**
+     * Makes the card and card selection disabled (not propagated to children).
+     *
+     * @default false
+     */
+    disabled?: boolean;
 };
 /**
@@ -295,27 +302,33 @@ export declare type CardState = ComponentState<CardSlots> & CardContextValue & R
      * @default false
      */
     selectFocused: boolean;
+    /**
+     * Defines whether the card is disabled.
+     *
+     * @default false
+     */
+    disabled: boolean;
 }>;
 /**
  * Render the final JSX of Card.
  */
-export declare const renderCard_unstable: (state: CardState, cardContextValue: CardContextValue) => JSX.Element;
+export declare const renderCard_unstable: (state: CardState, cardContextValue: CardContextValue) => JSXElement;
 /**
  * Render the final JSX of CardFooter.
  */
-export declare const renderCardFooter_unstable: (state: CardFooterState) => JSX.Element;
+export declare const renderCardFooter_unstable: (state: CardFooterState) => JSXElement;
 /**
  * Render the final JSX of CardHeader.
  */
-export declare const renderCardHeader_unstable: (state: CardHeaderState) => JSX.Element;
+export declare const renderCardHeader_unstable: (state: CardHeaderState) => JSXElement;
 /**
  * Render the final JSX of CardPreview.
  */
-export declare const renderCardPreview_unstable: (state: CardPreviewState) => JSX.Element;
+export declare const renderCardPreview_unstable: (state: CardPreviewState) => JSXElement;
 /**
  * Create the state required to render Card.

package/lib/components/Card/Card.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCard_unstable } from './useCard';
 import { renderCard_unstable } from './renderCard';

package/lib/components/Card/Card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Card/Card.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles.styles';\nimport type { CardProps } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCardContextValue } from './useCardContextValue';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef<HTMLDivElement>((props, ref) => {\n const state = useCard_unstable(props, ref);\n const cardContextValue = useCardContextValue(state);\n\n useCardStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardStyles_unstable')(state);\n\n return renderCard_unstable(state, cardContextValue);\n});\n\nCard.displayName = 'Card';\n"],"names":["React","useCard_unstable","renderCard_unstable","useCardStyles_unstable","useCardContextValue","useCustomStyleHook_unstable","Card","forwardRef","props","ref","state","cardContextValue","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAGhE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,qBAAuCN,MAAMO,UAAU,CAAiB,CAACC,OAAOC;IAC3F,MAAMC,QAAQT,iBAAiBO,OAAOC;IACtC,MAAME,mBAAmBP,oBAAoBM;IAE7CP,uBAAuBO;IAEvBL,4BAA4B,0BAA0BK;IAEtD,OAAOR,oBAAoBQ,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Card/Card.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles.styles';\nimport type { CardProps } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCardContextValue } from './useCardContextValue';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef<HTMLDivElement>((props, ref) => {\n const state = useCard_unstable(props, ref);\n const cardContextValue = useCardContextValue(state);\n\n useCardStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardStyles_unstable')(state);\n\n return renderCard_unstable(state, cardContextValue);\n});\n\nCard.displayName = 'Card';\n"],"names":["React","useCard_unstable","renderCard_unstable","useCardStyles_unstable","useCardContextValue","useCustomStyleHook_unstable","Card","forwardRef","props","ref","state","cardContextValue","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAGhE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,qBAAuCN,MAAMO,UAAU,CAAiB,CAACC,OAAOC;IAC3F,MAAMC,QAAQT,iBAAiBO,OAAOC;IACtC,MAAME,mBAAmBP,oBAAoBM;IAE7CP,uBAAuBO;IAEvBL,4BAA4B,0BAA0BK;IAEtD,OAAOR,oBAAoBQ,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Card/Card.types.ts"],"sourcesContent":["import * 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/\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"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1	+ {"version":3,"sources":["../src/components/Card/Card.types.ts"],"sourcesContent":["import * 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\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"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Card/CardContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 const cardContext = React.createContext(undefined);
 /**

package/lib/components/Card/CardContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Card/CardContext.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { CardContextValue } from './Card.types';\n\nconst cardContext = React.createContext<CardContextValue \| undefined>(undefined);\n\n/*\n @internal\n /\nexport const cardContextDefaultValue: CardContextValue = {\n selectableA11yProps: {\n referenceId: undefined,\n setReferenceId() {\n / Noop /\n },\n referenceLabel: undefined,\n setReferenceLabel() {\n / Noop /\n },\n },\n};\n\n/\n @internal\n /\nexport const CardProvider = cardContext.Provider;\n\n/\n @internal\n */\nexport const useCardContext_unstable = () => React.useContext(cardContext) ?? cardContextDefaultValue;\n"],"names":["React","cardContext","createContext","undefined","cardContextDefaultValue","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","CardProvider","Provider","useCardContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,cAAcD,MAAME,aAAa,CAA+BC;AAEtE;;CAEC,GACD,OAAO,MAAMC,0BAA4C;IACvDC,qBAAqB;QACnBC,aAAaH;QACbI;QACE,QAAQ,GACV;QACAC,gBAAgBL;QAChBM;QACE,QAAQ,GACV;IACF;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,eAAeT,YAAYU,QAAQ,CAAC;AAEjD;;CAEC,GACD,OAAO,MAAMC,0BAA0B;~~QAAMZ~~;WAAAA,CAAAA,oBAAAA,MAAMa,UAAU,CAACZ,0BAAjBD,+BAAAA,oBAAiCI;EAAwB"}
1	+ {"version":3,"sources":["../src/components/Card/CardContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { CardContextValue } from './Card.types';\n\nconst cardContext = React.createContext<CardContextValue \| undefined>(undefined);\n\n/*\n @internal\n /\nexport const cardContextDefaultValue: CardContextValue = {\n selectableA11yProps: {\n referenceId: undefined,\n setReferenceId() {\n / Noop /\n },\n referenceLabel: undefined,\n setReferenceLabel() {\n / Noop /\n },\n },\n};\n\n/\n @internal\n /\nexport const CardProvider = cardContext.Provider;\n\n/\n @internal\n */\nexport const useCardContext_unstable = (): CardContextValue => React.useContext(cardContext) ?? cardContextDefaultValue;\n"],"names":["React","cardContext","createContext","undefined","cardContextDefaultValue","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","CardProvider","Provider","useCardContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,cAAcD,MAAME,aAAa,CAA+BC;AAEtE;;CAEC,GACD,OAAO,MAAMC,0BAA4C;IACvDC,qBAAqB;QACnBC,aAAaH;QACbI;QACE,QAAQ,GACV;QACAC,gBAAgBL;QAChBM;QACE,QAAQ,GACV;IACF;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,eAAeT,YAAYU,QAAQ,CAAC;AAEjD;;CAEC,GACD,OAAO,MAAMC,0BAA0B;QAAwBZ;WAAAA,CAAAA,oBAAAA,MAAMa,UAAU,CAACZ,0BAAjBD,+BAAAA,oBAAiCI;EAAwB"}

package/lib/components/Card/renderCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Card/renderCard.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CardContextValue, CardSlots, CardState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/\n Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue) => {\n assertSlots<CardSlots>(state);\n\n return (\n <state.root>\n <CardProvider value={cardContextValue}>\n {state.checkbox ? <state.checkbox /> : null}\n {state.floatingAction ? <state.floatingAction /> : null}\n {state.root.children}\n </CardProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","CardProvider","renderCard_unstable","state","cardContextValue","root","value","checkbox","floatingAction","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;~~AAExD~~,SAASC,YAAY,QAAQ,gBAAgB;AAE7C;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpDJ,YAAuBG;IAEvB,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,MAACJ;YAAaK,OAAOF;;gBAClBD,MAAMI,QAAQ,iBAAG,KAACJ,MAAMI,QAAQ,QAAM;gBACtCJ,MAAMK,cAAc,iBAAG,KAACL,MAAMK,cAAc,QAAM;gBAClDL,MAAME,IAAI,CAACI,QAAQ;;;;AAI5B,EAAE"}
1	+ {"version":3,"sources":["../src/components/Card/renderCard.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CardContextValue, CardSlots, CardState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/\n Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue): JSXElement => {\n assertSlots<CardSlots>(state);\n\n return (\n <state.root>\n <CardProvider value={cardContextValue}>\n {state.checkbox ? <state.checkbox /> : null}\n {state.floatingAction ? <state.floatingAction /> : null}\n {state.root.children}\n </CardProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","CardProvider","renderCard_unstable","state","cardContextValue","root","value","checkbox","floatingAction","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,YAAY,QAAQ,gBAAgB;AAE7C;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpDJ,YAAuBG;IAEvB,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,MAACJ;YAAaK,OAAOF;;gBAClBD,MAAMI,QAAQ,iBAAG,KAACJ,MAAMI,QAAQ,QAAM;gBACtCJ,MAAMK,cAAc,iBAAG,KAACL,MAAMK,cAAc,QAAM;gBAClDL,MAAME,IAAI,CAACI,QAAQ;;;;AAI5B,EAAE"}

package/lib/components/Card/useCard.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';
@@ -16,7 +17,7 @@ const focusMap = {
  * and control focus properties based on that.
  *
  * @param props - props from this instance of Card
- */ const useCardInteractive = ({ focusMode: initialFocusMode, ...props })=>{
+ */ const useCardInteractive = ({ focusMode: initialFocusMode, disabled = false, ...props })=>{
     const interactive = [
         'onClick',
         'onDoubleClick',
@@ -34,13 +35,24 @@ const focusMap = {
     const groupperAttrs = useFocusableGroup({
         tabBehavior: focusMap[focusMode]
     });
-    const interactiveFocusAttributes = {
-        ...groupperAttrs,
-        tabIndex: 0
-    };
+    if (disabled) {
+        return {
+            interactive: false,
+            focusAttributes: null
+        };
+    }
+    if (focusMode === 'off') {
+        return {
+            interactive,
+            focusAttributes: null
+        };
+    }
     return {
         interactive,
-        focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
+        focusAttributes: {
+            ...groupperAttrs,
+            tabIndex: 0
+        }
     };
 };
 /**
@@ -52,7 +64,7 @@ const focusMap = {
  * @param props - props from this instance of Card
  * @param ref - reference to the root element of Card
  */ export const useCard_unstable = (props, ref)=>{
-    const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = props;
+    const { appearance = 'filled', orientation = 'vertical', size = 'medium', disabled = false, ...restProps } = props;
     const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
     const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
     const cardBaseRef = useFocusWithin();
@@ -62,6 +74,18 @@ const focusMap = {
     }, cardBaseRef);
     const cardRef = useMergedRefs(cardBaseRef, ref);
     const { interactive, focusAttributes } = useCardInteractive(props);
+    let cardRootProps = {
+        ...!selectable ? focusAttributes : null,
+        ...restProps,
+        ...selectableCardProps
+    };
+    if (disabled) {
+        cardRootProps = {
+            ...restProps,
+            'aria-disabled': true,
+            onClick: undefined
+        };
+    }
     return {
         appearance,
         orientation,
@@ -70,6 +94,7 @@ const focusMap = {
         selectable,
         selectFocused,
         selected,
+        disabled,
         selectableA11yProps: {
             setReferenceId,
             referenceId,
@@ -84,9 +109,7 @@ const focusMap = {
         root: slot.always(getIntrinsicElementProps('div', {
             ref: cardRef,
             role: 'group',
-            ...!selectable ? focusAttributes : null,
-            ...props,
-            ...selectableCardProps
+            ...cardRootProps
         }), {
             elementType: 'div'
         }),

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Card/useCard.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { 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, ...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 ~~const~~ ~~interactiveFocusAttributes~~ = {\n ~~...groupperAttrs~~,\n ~~tabIndex~~: 0,\n };\n\n return {\n interactive,\n focusAttributes: ~~focusMode === 'off' ? null~~ : ~~interactiveFocusAttributes~~,\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' } = 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 return {\n appearance,\n orientation,\n size,\n interactive,\n selectable,\n selectFocused,\n selected,\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 ...~~(!selectable ? focusAttributes : null)~~,\n ~~...props,\n ...selectableCardProps,\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","props","interactive","some","prop","groupperAttrs","tabBehavior","~~interactiveFocusAttributes~~","tabIndex","~~focusAttributes","~~useCard_unstable","ref","appearance","orientation","size","referenceId","setReferenceId","useState","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","cardRef","components","root","floatingAction","checkbox","always","role","elementType"],"mappings":"AAAA,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,EAAE,GAAGC,OAAkB;~~IAC9E~~,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,~~MAAML~~,YAAYC,6BAAAA,8BAAAA,~~mBAAqBE~~,cAAc,WAAW;IAEhE,MAAMG,~~gBAAgBd~~,kBAAkB;~~QACtCe~~,~~aAAaX~~,QAAQ,CAACI,UAAU;IAClC;IAEA,~~MAAMQ~~,~~6BAA6B~~;~~QACjC~~,~~GAAGF~~,aAAa;~~QAChBG~~,~~UAAU~~;~~IACZ~~;IAEA,OAAO;~~QACLN~~;~~QACAO~~,~~iBAAiBV~~,~~cAAc~~,~~QAAQ~~,~~OAAOQ~~;~~IAChD~~;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,~~MAAMG~~,mBAAmB,~~CAACT~~,~~OAAkBU~~;IACjD,MAAM,EAAEC,aAAa,QAAQ,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGb;~~IAE7E~~,MAAM,CAACc,aAAaC,eAAe,~~GAAG7B~~,~~MAAM8B~~,QAAQ,~~CAACvB~~,~~wBAAwBwB~~,mBAAmB,CAACH,WAAW;IAC5G,MAAM,CAACI,gBAAgBC,kBAAkB,~~GAAGjC~~,~~MAAM8B~~,QAAQ,~~CAACvB~~,~~wBAAwBwB~~,mBAAmB,CAACH,WAAW;IAElH,MAAMM,~~cAAc7B~~;IACpB,MAAM,~~EAAE8B~~,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,~~GAClGlC~~,~~kBAAkBQ~~,OAAO;QAAEc;QAAaI;IAAe,GAAGE;IAE5D,MAAMO,~~UAAUvC~~,~~cAAcgC~~,~~aAAaV~~;IAE3C,MAAM,~~EAAET~~,WAAW,~~EAAEO~~,eAAe,EAAE,~~GAAGX~~,~~mBAAmBG~~;IAE5D,OAAO;~~QACLW~~;QACAC;QACAC;~~QACAZ~~;QACAoB;QACAG;QACAF;~~QACAL~~,qBAAqB;YACnBF;YACAD;YACAI;YACAC;QACF;~~QAEAS~~,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QAEAF,~~MAAMxC~~,~~KAAK2C~~,MAAM,~~CACf7C~~,yBAAyB,OAAO;YAC9BuB,~~KAAKiB~~;~~YACLM~~,MAAM;YACN,~~GAAI~~,~~CAACZ,aAAab,kBAAkB,IAAI~~;~~YACxC~~,~~GAAGR,KAAK;YACR,GAAGuB,mBAAmB;QACxB,~~IACA;~~YAAEW~~,aAAa;QAAM;QAGvBJ,~~gBAAgBJ~~;~~QAChBK~~,~~UAAUN~~;IACZ;AACF,EAAE"}
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 { 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', 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 appearance,\n orientation,\n size,\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","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,EAAEb,WAAW,KAAK,EAAE,GAAGc,WAAW,GAAGb;IAE7G,MAAM,CAACc,aAAaC,eAAe,GAAG9B,MAAM+B,QAAQ,CAACxB,wBAAwByB,mBAAmB,CAACH,WAAW;IAC5G,MAAM,CAACI,gBAAgBC,kBAAkB,GAAGlC,MAAM+B,QAAQ,CAACxB,wBAAwByB,mBAAmB,CAACH,WAAW;IAElH,MAAMM,cAAc9B;IACpB,MAAM,EAAE+B,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,GAClGnC,kBAAkBS,OAAO;QAAEc;QAAaI;IAAe,GAAGE;IAE5D,MAAMO,UAAUxC,cAAciC,aAAaX;IAE3C,MAAM,EAAER,WAAW,EAAEK,eAAe,EAAE,GAAGV,mBAAmBI;IAE5D,IAAI4B,gBAAgB;QAClB,GAAI,CAACP,aAAaf,kBAAkB,IAAI;QACxC,GAAGO,SAAS;QACZ,GAAGU,mBAAmB;IACxB;IAEA,IAAIxB,UAAU;QACZ6B,gBAAgB;YACd,GAAGf,SAAS;YACZ,iBAAiB;YACjBgB,SAASlC;QACX;IACF;IAEA,OAAO;QACLe;QACAC;QACAC;QACAX;QACAoB;QACAG;QACAF;QACAvB;QACAkB,qBAAqB;YACnBF;YACAD;YACAI;YACAC;QACF;QAEAW,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QAEAF,MAAM3C,KAAK8C,MAAM,CACfhD,yBAAyB,OAAO;YAC9BuB,KAAKkB;YACLQ,MAAM;YACN,GAAGP,aAAa;QAClB,IACA;YAAEQ,aAAa;QAAM;QAGvBJ,gBAAgBN;QAChBO,UAAUR;IACZ;AACF,EAAE"}

package/lib/components/Card/useCardSelectable.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { mergeCallbacks, slot, useControllableState } from '@fluentui/react-utilities';
 import { Enter } from '@fluentui/keyboard-keys';
@@ -14,7 +15,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
  * @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 } = props;
+    const { checkbox = {}, onSelectionChange, floatingAction, onClick, onKeyDown, disabled } = props;
     const { findAllFocusable } = useFocusFinders();
     const checkboxRef = React.useRef(null);
     const [selected, setSelected] = useControllableState({
@@ -42,7 +43,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
         findAllFocusable
     ]);
     const onChangeHandler = React.useCallback((event)=>{
-        if (shouldRestrictTriggerAction(event)) {
+        if (disabled || shouldRestrictTriggerAction(event)) {
             return;
         }
         const newCheckedValue = !selected;
@@ -53,6 +54,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
             });
         }
     }, [
+        disabled,
         onSelectionChange,
         selected,
         setSelected,
@@ -83,6 +85,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
                 ref: checkboxRef,
                 type: 'checkbox',
                 checked: selected,
+                disabled,
                 onChange: (event)=>onChangeHandler(event),
                 onFocus: ()=>setSelectFocused(true),
                 onBlur: ()=>setSelectFocused(false),
@@ -92,6 +95,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
         });
     }, [
         checkbox,
+        disabled,
         floatingAction,
         selected,
         selectable,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Card/useCardSelectable.ts"],"sourcesContent":["~~import~~ * 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 } from './Card.types';\n\ntype SelectableA11yProps = Pick<CardContextValue['selectableA11yProps'], 'referenceId' \| 'referenceLabel'>;\n\n/*\n @internal\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 @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>,\n) => {\n const { checkbox = {}, onSelectionChange, floatingAction, onClick, onKeyDown } = 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 (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 [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 onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n onFocus: () => setSelectFocused(true),\n onBlur: () => setSelectFocused(false),\n ...selectableCheckboxProps,\n },\n elementType: 'input',\n });\n }, [checkbox, 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","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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAEC,IAAI,EAAEC,oBAAoB,QAAQ,4BAA4B;AACvF,SAASC,KAAK,QAAQ,0BAA0B;AAChD,SAASC,eAAe,QAAQ,0BAA0B;AAM1D;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,oBAAoB,CAC/BC,OACA,EAAEC,cAAc,EAAEC,WAAW,EAAuB,EACpDC;~~IAEA~~,MAAM,EAAEC,WAAW,CAAC,CAAC,EAAEC,iBAAiB,EAAEC,cAAc,EAAEC,OAAO,EAAEC,SAAS,EAAE,~~GAAGR~~;~~IAEjF~~,MAAM,~~EAAES~~,gBAAgB,EAAE,~~GAAGX~~;IAC7B,~~MAAMY~~,~~cAAcjB~~,~~MAAMkB~~,MAAM,CAAmB;IAEnD,MAAM,CAACC,UAAUC,YAAY,~~GAAGjB~~,qBAAqB;~~QACnDkB~~,~~OAAOd~~,~~MAAMY~~,QAAQ;QACrBG,~~cAAcf~~,~~MAAMgB~~,eAAe;QACnCC,cAAc;IAChB;IACA,MAAMC,aAAa;~~QAAClB~~,~~MAAMY~~,QAAQ;~~QAAEZ~~,~~MAAMgB~~,eAAe;~~QAAEX~~;KAAkB,~~CAACc~~,IAAI,CAChFC,CAAAA,OAAQ,OAAOA,SAAS;IAG1B,MAAM,CAACC,eAAeC,iBAAiB,~~GAAG7B~~,~~MAAM8B~~,QAAQ,CAAC;IAEzD,MAAMC,~~8BAA8B/B~~,~~MAAMgC~~,WAAW,CACnD,CAACC;QACC,IAAI,~~CAACvB~~,~~QAAQwB~~,OAAO,EAAE;YACpB,OAAO;QACT;QAEA,MAAMC,oBAAoBnB,~~iBAAiBN~~,~~QAAQwB~~,OAAO;QAC1D,MAAME,SAASH,MAAMG,MAAM;QAC3B,MAAMC,4BAA4BF,kBAAkBT,IAAI,CAACY,CAAAA,UAAWA,QAAQC,QAAQ,CAACH;QACrF,MAAMI,iBAAiBvB,CAAAA,wBAAAA,kCAAAA,YAAaiB,OAAO,MAAKE;QAEhD,OAAOC,6BAA6B,CAACG;IACvC,GACA;~~QAAC9B~~;~~QAASM~~;KAAiB;IAG7B,MAAMyB,~~kBAAkBzC~~,~~MAAMgC~~,WAAW,CACvC,CAACC;QACC,~~IAAIF~~,4BAA4BE,QAAQ;~~YACtC~~;QACF;QAEA,MAAMS,kBAAkB,CAACvB;QAEzBC,YAAYsB;QAEZ,~~IAAI9B~~,mBAAmB;YACrBA,~~kBAAkBqB~~,OAAO;gBAAEd,UAAUuB;YAAgB;QACvD;IACF,GACA;~~QAAC9B~~;~~QAAmBO~~;QAAUC;QAAaW;KAA4B;~~IAGzE~~,MAAMY,~~mBAAmB3C~~,~~MAAMgC~~,WAAW,CACxC,CAACC;QACC,IAAI;~~YAAC7B~~;SAAM,~~CAACwC~~,QAAQ,CAACX,MAAMY,GAAG,GAAG;YAC/BZ,MAAMa,cAAc;YACpBL,gBAAgBR;QAClB;IACF,GACA;QAACQ;KAAgB;IAGnB,MAAMM,~~eAAe/C~~,~~MAAMgD~~,OAAO,CAAC;QACjC,IAAI,CAACvB,~~cAAcZ~~,gBAAgB;YACjC;QACF;QAEA,~~MAAMoC~~,0BAAiD,CAAC;QAExD,~~IAAIxC~~,aAAa;~~YACfwC~~,uBAAuB,CAAC,kBAAkB,~~GAAGxC~~;QAC/C,OAAO,IAAID,gBAAgB;~~YACzByC~~,uBAAuB,CAAC,aAAa,~~GAAGzC~~;QAC1C;QAEA,OAAON,~~KAAKgD~~,QAAQ,~~CAACvC~~,UAAU;~~YAC7BwC~~,cAAc;gBACZC,KAAKnC;gBACLoC,MAAM;gBACNC,SAASnC;~~gBACToC~~,UAAU,CAACtB,QAA+CQ,gBAAgBR;gBAC1EuB,SAAS,IAAM3B,iBAAiB;gBAChC4B,QAAQ,IAAM5B,iBAAiB;gBAC/B,GAAGoB,uBAAuB;YAC5B;YACAS,aAAa;QACf;IACF,GAAG;~~QAAC/C~~;~~QAAUE~~;~~QAAgBM~~;QAAUM;QAAYgB;~~QAAiBhC~~;QAAaD;KAAe;~~IAEjG~~,~~MAAMmD~~,~~qBAAqB3D~~,~~MAAMgD~~,OAAO,CAAC;QACvC,IAAI,~~CAACnC~~,gBAAgB;YACnB;QACF;QAEA,OAAOX,~~KAAKgD~~,QAAQ,~~CAACrC~~,gBAAgB;~~YACnCsC~~,cAAc;gBACZC,KAAKnC;YACP;YACAyC,aAAa;QACf;IACF,GAAG;~~QAAC7C~~;KAAe;IAEnB,~~MAAM+C~~,~~sBAAsB5D~~,~~MAAMgD~~,OAAO,CAAC;QACxC,IAAI,CAACvB,YAAY;YACf,OAAO;QACT;QAEA,OAAO;~~YACLX~~,SAASb,eAAea,~~SAAS2B~~;~~YACjC1B~~,WAAWd,eAAec,~~WAAW4B~~;QACvC;IACF,GAAG;QAAClB;QAAYgB;~~QAAiB3B~~;QAASC;~~QAAW4B~~;KAAiB;IAEtE,OAAO;QACLxB;QACAM;QACAG;QACAgC;QACAb;QACAY;IACF;AACF,EAAE"}
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 @internal\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 @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":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAEC,IAAI,EAAEC,oBAAoB,QAAQ,4BAA4B;AACvF,SAASC,KAAK,QAAQ,0BAA0B;AAChD,SAASC,eAAe,QAAQ,0BAA0B;AAM1D;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,oBAAoB,CAC/BC,OACA,EAAEC,cAAc,EAAEC,WAAW,EAAuB,EACpDC;IAYA,MAAM,EAAEC,WAAW,CAAC,CAAC,EAAEC,iBAAiB,EAAEC,cAAc,EAAEC,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGT;IAE3F,MAAM,EAAEU,gBAAgB,EAAE,GAAGZ;IAC7B,MAAMa,cAAclB,MAAMmB,MAAM,CAAmB;IAEnD,MAAM,CAACC,UAAUC,YAAY,GAAGlB,qBAAqB;QACnDmB,OAAOf,MAAMa,QAAQ;QACrBG,cAAchB,MAAMiB,eAAe;QACnCC,cAAc;IAChB;IACA,MAAMC,aAAa;QAACnB,MAAMa,QAAQ;QAAEb,MAAMiB,eAAe;QAAEZ;KAAkB,CAACe,IAAI,CAChFC,CAAAA,OAAQ,OAAOA,SAAS;IAG1B,MAAM,CAACC,eAAeC,iBAAiB,GAAG9B,MAAM+B,QAAQ,CAAC;IAEzD,MAAMC,8BAA8BhC,MAAMiC,WAAW,CACnD,CAACC;QACC,IAAI,CAACxB,QAAQyB,OAAO,EAAE;YACpB,OAAO;QACT;QAEA,MAAMC,oBAAoBnB,iBAAiBP,QAAQyB,OAAO;QAC1D,MAAME,SAASH,MAAMG,MAAM;QAC3B,MAAMC,4BAA4BF,kBAAkBT,IAAI,CAACY,CAAAA,UAAWA,QAAQC,QAAQ,CAACH;QACrF,MAAMI,iBAAiBvB,CAAAA,wBAAAA,kCAAAA,YAAaiB,OAAO,MAAKE;QAEhD,OAAOC,6BAA6B,CAACG;IACvC,GACA;QAAC/B;QAASO;KAAiB;IAG7B,MAAMyB,kBAAkB1C,MAAMiC,WAAW,CACvC,CAACC;QACC,IAAIlB,YAAYgB,4BAA4BE,QAAQ;YAClD;QACF;QAEA,MAAMS,kBAAkB,CAACvB;QAEzBC,YAAYsB;QAEZ,IAAI/B,mBAAmB;YACrBA,kBAAkBsB,OAAO;gBAAEd,UAAUuB;YAAgB;QACvD;IACF,GACA;QAAC3B;QAAUJ;QAAmBQ;QAAUC;QAAaW;KAA4B;IAGnF,MAAMY,mBAAmB5C,MAAMiC,WAAW,CACxC,CAACC;QACC,IAAI;YAAC9B;SAAM,CAACyC,QAAQ,CAACX,MAAMY,GAAG,GAAG;YAC/BZ,MAAMa,cAAc;YACpBL,gBAAgBR;QAClB;IACF,GACA;QAACQ;KAAgB;IAGnB,MAAMM,eAAehD,MAAMiD,OAAO,CAAC;QACjC,IAAI,CAACvB,cAAcb,gBAAgB;YACjC;QACF;QAEA,MAAMqC,0BAAiD,CAAC;QAExD,IAAIzC,aAAa;YACfyC,uBAAuB,CAAC,kBAAkB,GAAGzC;QAC/C,OAAO,IAAID,gBAAgB;YACzB0C,uBAAuB,CAAC,aAAa,GAAG1C;QAC1C;QAEA,OAAON,KAAKiD,QAAQ,CAACxC,UAAU;YAC7ByC,cAAc;gBACZC,KAAKnC;gBACLoC,MAAM;gBACNC,SAASnC;gBACTJ;gBACAwC,UAAU,CAACtB,QAA+CQ,gBAAgBR;gBAC1EuB,SAAS,IAAM3B,iBAAiB;gBAChC4B,QAAQ,IAAM5B,iBAAiB;gBAC/B,GAAGoB,uBAAuB;YAC5B;YACAS,aAAa;QACf;IACF,GAAG;QAAChD;QAAUK;QAAUH;QAAgBO;QAAUM;QAAYgB;QAAiBjC;QAAaD;KAAe;IAE3G,MAAMoD,qBAAqB5D,MAAMiD,OAAO,CAAC;QACvC,IAAI,CAACpC,gBAAgB;YACnB;QACF;QAEA,OAAOX,KAAKiD,QAAQ,CAACtC,gBAAgB;YACnCuC,cAAc;gBACZC,KAAKnC;YACP;YACAyC,aAAa;QACf;IACF,GAAG;QAAC9C;KAAe;IAEnB,MAAMgD,sBAAsB7D,MAAMiD,OAAO,CAAC;QACxC,IAAI,CAACvB,YAAY;YACf,OAAO;QACT;QAEA,OAAO;YACLZ,SAASb,eAAea,SAAS4B;YACjC3B,WAAWd,eAAec,WAAW6B;QACvC;IACF,GAAG;QAAClB;QAAYgB;QAAiB5B;QAASC;QAAW6B;KAAiB;IAEtE,OAAO;QACLxB;QACAM;QACAG;QACAgC;QACAb;QACAY;IACF;AACF,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
 import * as React from 'react';
 import { shorthands, __styles, mergeClasses, __resetStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
@@ -27,6 +29,23 @@ const focusOutlineStyle = {
   outlineOffset: '-2px'
 };
 const useCardResetStyles = /*#__PURE__*/__resetStyles("rfxo2k2", "rgle7w9", [".rfxo2k2{overflow:hidden;border-radius:var(--fui-Card--border-radius);padding:var(--fui-Card--size);gap:var(--fui-Card--size);display:flex;position:relative;box-sizing:border-box;color:var(--colorNeutralForeground1);}", ".rfxo2k2::after{position:absolute;top:0;left:0;right:0;bottom:0;content:\"\";pointer-events:none;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-radius:var(--fui-Card--border-radius);}", ".rfxo2k2>.fui-CardHeader,.rfxo2k2>.fui-CardFooter{flex-shrink:0;}", ".rgle7w9{overflow:hidden;border-radius:var(--fui-Card--border-radius);padding:var(--fui-Card--size);gap:var(--fui-Card--size);display:flex;position:relative;box-sizing:border-box;color:var(--colorNeutralForeground1);}", ".rgle7w9::after{position:absolute;top:0;right:0;left:0;bottom:0;content:\"\";pointer-events:none;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-radius:var(--fui-Card--border-radius);}", ".rgle7w9>.fui-CardHeader,.rgle7w9>.fui-CardFooter{flex-shrink:0;}"]);
+const disabledStyles = {
+  cursor: 'not-allowed',
+  userSelect: 'none',
+  color: tokens.colorNeutralForegroundDisabled,
+  backgroundColor: tokens.colorNeutralBackgroundDisabled,
+  boxShadow: tokens.shadow2,
+  ... /*#__PURE__*/shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+  '::before': {
+    content: '""',
+    position: 'absolute',
+    inset: 0,
+    zIndex: `calc(${tokens.zIndexContent} + 1)`
+  },
+  '::after': {
+    ... /*#__PURE__*/shorthands.borderColor(tokens.colorNeutralStrokeDisabled)
+  }
+};
 const useCardStyles = /*#__PURE__*/__styles({
   focused: {
     Brovlpu: "ftqa4ok",
@@ -241,6 +260,20 @@ const useCardStyles = /*#__PURE__*/__styles({
     Bi91k9c: "fx9teim",
     Jwef8y: "fg59vm4"
   },
+  outlineDisabled: {
+    De3pzq: "f1c21dwh",
+    E5pizo: "f1couhl3",
+    g2u3we: "f1jj8ep1",
+    h3c5rm: ["f15xbau", "fy0fskl"],
+    B9xav0g: "f4ikngz",
+    zhjwy3: ["fy0fskl", "f15xbau"],
+    ezxybo: "f1ls5moo",
+    wc7uws: "f1qiza15",
+    B0n5ga8: "f13dj02",
+    s924m2: ["f9wngki", "f17v59j0"],
+    B1q35kw: "f1vxzwsp",
+    Gp14am: ["f17v59j0", "f9wngki"]
+  },
   subtle: {
     De3pzq: "fhovq9v",
     E5pizo: "f1couhl3",
@@ -294,7 +327,7 @@ const useCardStyles = /*#__PURE__*/__styles({
     qhf8xq: "f1euv43f",
     Bhzewxz: "fqclxi7",
     j35jbq: ["fiv86kb", "f36uhnt"],
-    Bj3rh1h: "f19g0ac"
+    Bj3rh1h: "fom9my7"
   },
   hiddenCheckbox: {
     B68tc82: 0,
@@ -306,6 +339,50 @@ const useCardStyles = /*#__PURE__*/__styles({
     Bh84pgu: "fmf1zke",
     Bgl5zvf: "f1wch0ki",
     Huce71: "fz5stix"
+  },
+  disabled: {
+    Bceei9c: "fdrzuqr",
+    famaaq: "f1xqy1su",
+    sj55zd: "f1s2aq7o",
+    De3pzq: "f1bg9a2p",
+    E5pizo: "fyed02w",
+    g2u3we: "f1jj8ep1",
+    h3c5rm: ["f15xbau", "fy0fskl"],
+    B9xav0g: "f4ikngz",
+    zhjwy3: ["fy0fskl", "f15xbau"],
+    Ftih45: "f1wl9k8s",
+    Brfgrao: "f1j7ml58",
+    lawp4y: 0,
+    Fbdkly: 0,
+    mdwyqc: 0,
+    Bciustq: 0,
+    gc50h5: "f13vvzas",
+    Ehzi8l: "f198lalb",
+    B0n5ga8: "f13dj02",
+    s924m2: ["f9wngki", "f17v59j0"],
+    B1q35kw: "f1vxzwsp",
+    Gp14am: ["f17v59j0", "f9wngki"],
+    Bikrtoi: "f11og98d",
+    G8qf51: "f1rg3h4v",
+    Brxh4y7: "fbm2y3b",
+    ezxybo: "f4yodeu",
+    wc7uws: "fcwfbwp",
+    gp3uxg: "f1repx37",
+    Fohawp: ["f1ybi8ct", "f1h4eg6q"],
+    Bxulg6k: "f18mejnb",
+    vcjq4m: ["f1h4eg6q", "f1ybi8ct"],
+    Bsqkqe9: "f1nift3m",
+    fskg1g: "f1wu3i8x",
+    iwiei9: 0,
+    Effecx: 0,
+    Bkt1b9m: 0,
+    jfmxvr: 0,
+    orauir: "f6v4vfa",
+    B2yd9ot: "folrdqs",
+    Fn9tzk: "f168z5yf",
+    Bv0wker: ["fpor7gj", "fzextn6"],
+    Bp2dl5b: "f1yaw79v",
+    pzn0iz: ["fzextn6", "fpor7gj"]
   }
 }, {
   f: [".ftqa4ok:focus{outline-style:none;}"],
@@ -318,9 +395,11 @@ const useCardStyles = /*#__PURE__*/__styles({
     p: -2
   }], [".f1nh8hsq[data-fui-focus-within]:focus-within::after{border-radius:var(--fui-Card--border-radius);}", {
     p: -1
-  }], ".f1amxum7[data-fui-focus-within]:focus-within::after{top:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1cec8w7[data-fui-focus-within]:focus-within::after{right:calc(0px - var(--strokeWidthThick) - -2px);}", ".f554mv0[data-fui-focus-within]:focus-within::after{left:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1sj6kbr[data-fui-focus-within]:focus-within::after{bottom:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1063pyq{flex-direction:row;}", ".f122n59{align-items:center;}", ".ftrw7vg>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f18opajm>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f13002it>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".fqo182t>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f18yna97>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1kd6wh7>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f4i4759>.fui-CardHeader:last-of-type,.f4i4759>.fui-CardFooter:last-of-type{flex-grow:1;}", ".f1vx9l62{flex-direction:column;}", ".f14k419y>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1fgo9fz>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".fvqmfsm>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}", ".f3am6yf>.fui-Card__floatingAction+.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1r5wgso>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1h1zgly{--fui-Card--border-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".fuldkky{--fui-Card--border-radius:var(--borderRadiusMedium);}", ".f1qua4xo{--fui-Card--size:16px;}", ".fimkt6v{--fui-Card--border-radius:var(--borderRadiusLarge);}", ".f1epqm3e .fui-Text{color:currentColor;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f16gxe2i::after{border-top-color:var(--colorTransparentStroke);}", ".fpgykix::after{border-right-color:var(--colorTransparentStroke);}", ".fzybk4o::after{border-left-color:var(--colorTransparentStroke);}", ".f1osi826::after{border-bottom-color:var(--colorTransparentStroke);}", ".f1k6fduh{cursor:pointer;}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".f16eln5f::after{border-top-color:var(--colorNeutralStroke1Selected);}", ".fa2okxs::after{border-right-color:var(--colorNeutralStroke1Selected);}", ".fg4zq3l::after{border-left-color:var(--colorNeutralStroke1Selected);}", ".ff6932p::after{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".fjxa0vh{background-color:var(--colorNeutralBackground2Selected);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1couhl3{box-shadow:none;}", ".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}", ".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}", ".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}", ".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1euv43f{position:absolute;}", ".fqclxi7{top:4px;}", ".fiv86kb{right:4px;}", ".f36uhnt{left:4px;}", ".f19g0ac{z-index:1;}", [".f1a3p1vp{overflow:hidden;}", {
+  }], ".f1amxum7[data-fui-focus-within]:focus-within::after{top:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1cec8w7[data-fui-focus-within]:focus-within::after{right:calc(0px - var(--strokeWidthThick) - -2px);}", ".f554mv0[data-fui-focus-within]:focus-within::after{left:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1sj6kbr[data-fui-focus-within]:focus-within::after{bottom:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1063pyq{flex-direction:row;}", ".f122n59{align-items:center;}", ".ftrw7vg>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f18opajm>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f13002it>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".fqo182t>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f18yna97>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1kd6wh7>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f4i4759>.fui-CardHeader:last-of-type,.f4i4759>.fui-CardFooter:last-of-type{flex-grow:1;}", ".f1vx9l62{flex-direction:column;}", ".f14k419y>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1fgo9fz>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".fvqmfsm>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}", ".f3am6yf>.fui-Card__floatingAction+.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1r5wgso>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1h1zgly{--fui-Card--border-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".fuldkky{--fui-Card--border-radius:var(--borderRadiusMedium);}", ".f1qua4xo{--fui-Card--size:16px;}", ".fimkt6v{--fui-Card--border-radius:var(--borderRadiusLarge);}", ".f1epqm3e .fui-Text{color:currentColor;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f16gxe2i::after{border-top-color:var(--colorTransparentStroke);}", ".fpgykix::after{border-right-color:var(--colorTransparentStroke);}", ".fzybk4o::after{border-left-color:var(--colorTransparentStroke);}", ".f1osi826::after{border-bottom-color:var(--colorTransparentStroke);}", ".f1k6fduh{cursor:pointer;}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".f16eln5f::after{border-top-color:var(--colorNeutralStroke1Selected);}", ".fa2okxs::after{border-right-color:var(--colorNeutralStroke1Selected);}", ".fg4zq3l::after{border-left-color:var(--colorNeutralStroke1Selected);}", ".ff6932p::after{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".fjxa0vh{background-color:var(--colorNeutralBackground2Selected);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1couhl3{box-shadow:none;}", ".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}", ".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}", ".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}", ".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f13dj02::after{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f9wngki::after{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f17v59j0::after{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1vxzwsp::after{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1euv43f{position:absolute;}", ".fqclxi7{top:4px;}", ".fiv86kb{right:4px;}", ".f36uhnt{left:4px;}", ".fom9my7{z-index:var(--zIndexContent, 1);}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], ".frkrog8{width:1px;}", ".f1mpe4l3{height:1px;}", ".fmf1zke{clip:rect(0 0 0 0);}", ".f1wch0ki{clip-path:inset(50%);}", ".fz5stix{white-space:nowrap;}", ".fdrzuqr{cursor:not-allowed;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;user-select:none;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".fyed02w{box-shadow:var(--shadow2);}", ".f1wl9k8s::before{content:\"\";}", ".f1j7ml58::before{position:absolute;}", [".f13vvzas::before{inset:0;}", {
     p: -1
-  }], ".frkrog8{width:1px;}", ".f1mpe4l3{height:1px;}", ".fmf1zke{clip:rect(0 0 0 0);}", ".f1wch0ki{clip-path:inset(50%);}", ".fz5stix{white-space:nowrap;}"],
+  }], ".f198lalb::before{z-index:calc(var(--zIndexContent, 1) + 1);}"],
   m: [["@media (forced-colors: active){.f226i61[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f13kzufm[data-fui-focus-visible]::after{border-right-color:Highlight;}.fsx75g8[data-fui-focus-visible]::after{border-left-color:Highlight;}}", {
@@ -356,7 +435,9 @@ const useCardStyles = /*#__PURE__*/__styles({
   }], ["@media (forced-colors: active){.fnn5dk0:hover .fui-CardPreview,.fnn5dk0 :active .fui-CardPreview,.fnn5dk0:hover .fui-CardFooter,.fnn5dk0 :active .fui-CardFooter{forced-color-adjust:auto;}}", {
     m: "(forced-colors: active)"
   }]],
-  h: [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".fx9teim:hover{color:var(--colorNeutralForeground1Selected);}", ".f1kz6goq:hover{background-color:var(--colorNeutralBackground1Selected);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".f1luvkty:hover{color:var(--colorNeutralForeground2Selected);}", ".fehi0vp:hover{background-color:var(--colorNeutralBackground2Selected);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1llr77y:hover::after{border-top-color:var(--colorNeutralStroke1Hover);}", ".fzk0khw:hover::after{border-right-color:var(--colorNeutralStroke1Hover);}", ".fjj8tog:hover::after{border-left-color:var(--colorNeutralStroke1Hover);}", ".fb1u8ub:hover::after{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".fg59vm4:hover{background-color:var(--colorTransparentBackgroundSelected);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
+  h: [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".fx9teim:hover{color:var(--colorNeutralForeground1Selected);}", ".f1kz6goq:hover{background-color:var(--colorNeutralBackground1Selected);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".f1luvkty:hover{color:var(--colorNeutralForeground2Selected);}", ".fehi0vp:hover{background-color:var(--colorNeutralBackground2Selected);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1llr77y:hover::after{border-top-color:var(--colorNeutralStroke1Hover);}", ".fzk0khw:hover::after{border-right-color:var(--colorNeutralStroke1Hover);}", ".fjj8tog:hover::after{border-left-color:var(--colorNeutralStroke1Hover);}", ".fb1u8ub:hover::after{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".fg59vm4:hover{background-color:var(--colorTransparentBackgroundSelected);}", ".f1ls5moo:hover,.f1ls5moo:active{background-color:var(--colorTransparentBackground);}", ".f1qiza15:hover,.f1qiza15:active{box-shadow:none;}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}", ".f11og98d:hover,.f11og98d:active{cursor:not-allowed;}", ".f1rg3h4v:hover,.f1rg3h4v:active{-webkit-user-select:none;-moz-user-select:none;user-select:none;}", ".fbm2y3b:hover,.fbm2y3b:active{color:var(--colorNeutralForegroundDisabled);}", ".f4yodeu:hover,.f4yodeu:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".fcwfbwp:hover,.fcwfbwp:active{box-shadow:var(--shadow2);}", ".f1repx37:hover,.f1repx37:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ybi8ct:hover,.f1ybi8ct:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1h4eg6q:hover,.f1h4eg6q:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f18mejnb:hover,.f18mejnb:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1nift3m:hover::before,.f1nift3m:active::before{content:\"\";}", ".f1wu3i8x:hover::before,.f1wu3i8x:active::before{position:absolute;}", [".f6v4vfa:hover::before,.f6v4vfa:active::before{inset:0;}", {
+    p: -1
+  }], ".folrdqs:hover::before,.folrdqs:active::before{z-index:calc(var(--zIndexContent, 1) + 1);}", ".f168z5yf:hover::after,.f168z5yf:active::after{border-top-color:var(--colorNeutralStrokeDisabled);}", ".fpor7gj:hover::after,.fpor7gj:active::after{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fzextn6:hover::after,.fzextn6:active::after{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1yaw79v:hover::after,.f1yaw79v:active::after{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
   a: [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1uohb70:active::after{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1jm7v1n:active::after{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1bus3rq:active::after{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1fbu7rr:active::after{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
 });
 /**
@@ -394,8 +475,11 @@ export const useCardStyles_unstable = state => {
     outline: styles.outlineInteractive,
     subtle: styles.subtleInteractive
   };
-  const isSelectableOrInteractive = state.interactive || state.selectable;
+  const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);
   const focusedClassName = React.useMemo(() => {
+    if (state.disabled) {
+      return '';
+    }
     if (state.selectable) {
       if (state.selectFocused) {
         return styles.selectableFocused;
@@ -403,8 +487,8 @@ export const useCardStyles_unstable = state => {
       return '';
     }
     return styles.focused;
-  }, [state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);
-  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.root.className);
+  }, [state.disabled, state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);
+  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) {
     state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
   }