npm - @fluentui/react-card - Versions diffs - 0.0.0-nightly-20250904-0406.1 → 0.0.0-nightly-20250909-0406.1 - Mend

@fluentui/react-card 0.0.0-nightly-20250904-0406.1 → 0.0.0-nightly-20250909-0406.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 (6) hide show

package/CHANGELOG.md +35 -15
package/lib/components/Card/useCardSelectable.js.map +1 -1
package/lib/components/CardHeader/useCardHeader.js.map +1 -1
package/lib-commonjs/components/Card/useCardSelectable.js.map +1 -1
package/lib-commonjs/components/CardHeader/useCardHeader.js.map +1 -1
package/package.json +16 -16

package/CHANGELOG.md CHANGED Viewed

@@ -1,28 +1,48 @@
 # Change Log - @fluentui/react-card
-This log was last generated on Thu, 04 Sep 2025 04:21:04 GMT and should not be manually modified.
+This log was last generated on Tue, 09 Sep 2025 04:21:39 GMT and should not be manually modified.
 <!-- Start content -->
-## [0.0.0-nightly-20250904-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20250904-0406.1)
+## [0.0.0-nightly-20250909-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20250909-0406.1)
-Thu, 04 Sep 2025 04:21:04 GMT
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.4.5..@fluentui/react-card_v0.0.0-nightly-20250904-0406.1)
+Tue, 09 Sep 2025 04:21:39 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.5.0..@fluentui/react-card_v0.0.0-nightly-20250909-0406.1)
 ### Changes
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20250904-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b60e3a055982c03e92401325534a8b860a8bc5d2) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250904-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b60e3a055982c03e92401325534a8b860a8bc5d2) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250904-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b60e3a055982c03e92401325534a8b860a8bc5d2) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20250904-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b60e3a055982c03e92401325534a8b860a8bc5d2) by beachball)
-- Bump @fluentui/react-text to v0.0.0-nightly-20250904-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b60e3a055982c03e92401325534a8b860a8bc5d2) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20250904-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b60e3a055982c03e92401325534a8b860a8bc5d2) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20250904-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b60e3a055982c03e92401325534a8b860a8bc5d2) by beachball)
-- Bump @fluentui/react-button to v0.0.0-nightly-20250904-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b60e3a055982c03e92401325534a8b860a8bc5d2) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250904-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b60e3a055982c03e92401325534a8b860a8bc5d2) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20250904-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b60e3a055982c03e92401325534a8b860a8bc5d2) by beachball)
-- Bump @fluentui/react-provider to v0.0.0-nightly-20250904-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b60e3a055982c03e92401325534a8b860a8bc5d2) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20250909-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ef19c788fbd03f0a4fde7dac69aff4982e00d493) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250909-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ef19c788fbd03f0a4fde7dac69aff4982e00d493) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250909-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ef19c788fbd03f0a4fde7dac69aff4982e00d493) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20250909-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ef19c788fbd03f0a4fde7dac69aff4982e00d493) by beachball)
+- Bump @fluentui/react-text to v0.0.0-nightly-20250909-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ef19c788fbd03f0a4fde7dac69aff4982e00d493) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20250909-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ef19c788fbd03f0a4fde7dac69aff4982e00d493) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20250909-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ef19c788fbd03f0a4fde7dac69aff4982e00d493) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20250909-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ef19c788fbd03f0a4fde7dac69aff4982e00d493) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250909-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ef19c788fbd03f0a4fde7dac69aff4982e00d493) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20250909-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ef19c788fbd03f0a4fde7dac69aff4982e00d493) by beachball)
+- Bump @fluentui/react-provider to v0.0.0-nightly-20250909-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/ef19c788fbd03f0a4fde7dac69aff4982e00d493) 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)

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, 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>,\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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"}
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, 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":"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"}

package/lib/components/CardHeader/useCardHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CardHeader/useCardHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardHeaderClassNames } from './useCardHeaderStyles.styles';\n\n/*\n Finds the first child of CardHeader with an id prop.\n \n @param header - the header prop of CardHeader\n /\nfunction getChildWithId(header: React.ReactNode) {\n function isReactElementWithIdProp(element: React.ReactNode): element is React.ReactElement {\n return React.isValidElement(element) && Boolean(element.props.id);\n }\n\n return React.Children.toArray(header).find(isReactElementWithIdProp);\n}\n\n/\n Returns the id to use for the CardHeader root element.\n \n @param headerId - the id prop of the CardHeader component\n * @param childWithId - the first child of the CardHeader component with an id prop\n * @param generatedId - a generated id\n \n @returns the id to use for the CardHeader root element\n /\nfunction getReferenceId(\n headerId: string \| undefined,\n childWithId: React.ReactElement \| undefined,\n generatedId: string,\n): string {\n if (headerId) {\n return headerId;\n }\n\n if (childWithId?.props.id) {\n return childWithId.props.id;\n }\n\n return generatedId;\n}\n\n/\n Create the state required to render CardHeader.\n \n The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n \n @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n const { image, header, description, action } = props;\n\n const {\n selectableA11yProps: { referenceId, setReferenceId },\n } = useCardContext_unstable();\n const headerRef = React.useRef<HTMLDivElement>(null);\n\n const hasChildId = React.useRef(false);\n const generatedId = useId(cardHeaderClassNames.header, referenceId);\n\n const headerSlot = slot.optional(header, {\n renderByDefault: true,\n defaultProps: {\n ref: headerRef,\n id: !hasChildId.current ? referenceId : undefined,\n },\n elementType: 'div',\n });\n React.useEffect(() => {\n const headerId = !hasChildId.current ? headerRef.current?.id : undefined;\n const childWithId = getChildWithId(headerSlot?.children);\n hasChildId.current = Boolean(childWithId);\n setReferenceId(getReferenceId(headerId, childWithId, generatedId));\n }, [generatedId, header, headerSlot, setReferenceId]);\n return {\n components: { root: 'div', image: 'div', header: 'div', description: 'div', action: 'div' },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n image: slot.optional(image, { elementType: 'div' }),\n header: headerSlot,\n description: slot.optional(description, { elementType: 'div' }),\n action: slot.optional(action, { elementType: 'div' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useCardContext_unstable","cardHeaderClassNames","getChildWithId","header","isReactElementWithIdProp","element","isValidElement","Boolean","props","id","Children","toArray","find","getReferenceId","headerId","childWithId","generatedId","useCardHeader_unstable","ref","image","description","action","selectableA11yProps","referenceId","setReferenceId","headerRef","useRef","hasChildId","headerSlot","optional","renderByDefault","defaultProps","current","undefined","elementType","useEffect","children","components","root","always"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,oBAAoB,QAAQ,+BAA+B;AAEpE;;;;CAIC,GACD,SAASC,eAAeC,MAAuB;IAC7C,SAASC,yBAAyBC,OAAwB;QACxD,OAAOT,MAAMU,cAAc,~~CAACD~~,YAAYE,QAAQF,QAAQG,KAAK,CAACC,EAAE;~~IAClE~~;IAEA,OAAOb,MAAMc,QAAQ,CAACC,OAAO,CAACR,QAAQS,IAAI,CAACR;AAC7C;AAEA;;;;;;;;CAQC,GACD,SAASS,eACPC,QAA4B,EAC5BC,~~WAA2C~~,~~EAC3CC~~,WAAmB;IAEnB,IAAIF,UAAU;QACZ,OAAOA;IACT;IAEA,IAAIC,wBAAAA,kCAAAA,YAAaP,KAAK,CAACC,EAAE,EAAE;QACzB,OAAOM,YAAYP,KAAK,CAACC,EAAE;IAC7B;IAEA,OAAOO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACT,OAAwBU;IAC7D,MAAM,EAAEC,KAAK,EAAEhB,MAAM,EAAEiB,WAAW,EAAEC,MAAM,EAAE,GAAGb;IAE/C,MAAM,EACJc,qBAAqB,EAAEC,WAAW,EAAEC,cAAc,EAAE,EACrD,GAAGxB;IACJ,MAAMyB,YAAY7B,MAAM8B,MAAM,CAAiB;IAE/C,MAAMC,aAAa/B,MAAM8B,MAAM,CAAC;IAChC,MAAMV,cAAclB,MAAMG,qBAAqBE,MAAM,EAAEoB;IAEvD,MAAMK,aAAa7B,KAAK8B,QAAQ,CAAC1B,QAAQ;QACvC2B,iBAAiB;QACjBC,cAAc;YACZb,KAAKO;YACLhB,IAAI,CAACkB,WAAWK,OAAO,GAAGT,cAAcU;QAC1C;QACAC,aAAa;IACf;IACAtC,MAAMuC,SAAS,CAAC;YACyBV;QAAvC,MAAMX,WAAW,CAACa,WAAWK,OAAO,IAAGP,qBAAAA,UAAUO,OAAO,cAAjBP,yCAAAA,mBAAmBhB,EAAE,GAAGwB;QAC/D,MAAMlB,cAAcb,eAAe0B,uBAAAA,iCAAAA,WAAYQ,QAAQ;QACvDT,WAAWK,OAAO,GAAGzB,QAAQQ;QAC7BS,eAAeX,eAAeC,UAAUC,aAAaC;IACvD,GAAG;QAACA;QAAab;QAAQyB;QAAYJ;KAAe;IACpD,OAAO;QACLa,YAAY;YAAEC,MAAM;YAAOnB,OAAO;YAAOhB,QAAQ;YAAOiB,aAAa;YAAOC,QAAQ;QAAM;QAE1FiB,MAAMvC,KAAKwC,MAAM,CACf1C,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FqB,KAAKA;YACL,GAAGV,KAAK;QACV,IACA;YAAE0B,aAAa;QAAM;QAEvBf,OAAOpB,KAAK8B,QAAQ,CAACV,OAAO;YAAEe,aAAa;QAAM;QACjD/B,QAAQyB;QACRR,aAAarB,KAAK8B,QAAQ,CAACT,aAAa;YAAEc,aAAa;QAAM;QAC7Db,QAAQtB,KAAK8B,QAAQ,CAACR,QAAQ;YAAEa,aAAa;QAAM;IACrD;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/CardHeader/useCardHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardHeaderClassNames } from './useCardHeaderStyles.styles';\n\n/*\n Finds the first child of CardHeader with an id prop.\n \n @param header - the header prop of CardHeader\n /\nfunction getChildWithId(header: React.ReactNode) {\n function isReactElementWithIdProp(element: React.ReactNode): element is React.ReactElement<{ id: string }> {\n return React.isValidElement<{ id?: string }>(element) && Boolean(element.props.id);\n }\n\n return React.Children.toArray(header).find(isReactElementWithIdProp);\n}\n\n/\n Returns the id to use for the CardHeader root element.\n \n @param headerId - the id prop of the CardHeader component\n * @param childWithId - the first child of the CardHeader component with an id prop\n * @param generatedId - a generated id\n \n @returns the id to use for the CardHeader root element\n /\nfunction getReferenceId(\n headerId: string \| undefined,\n childWithId: React.ReactElement<{ id?: string }> \| undefined,\n generatedId: string,\n): string {\n if (headerId) {\n return headerId;\n }\n\n if (childWithId?.props.id) {\n return childWithId.props.id;\n }\n\n return generatedId;\n}\n\n/\n Create the state required to render CardHeader.\n \n The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n \n @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n const { image, header, description, action } = props;\n\n const {\n selectableA11yProps: { referenceId, setReferenceId },\n } = useCardContext_unstable();\n const headerRef = React.useRef<HTMLDivElement>(null);\n\n const hasChildId = React.useRef(false);\n const generatedId = useId(cardHeaderClassNames.header, referenceId);\n\n const headerSlot = slot.optional(header, {\n renderByDefault: true,\n defaultProps: {\n ref: headerRef,\n id: !hasChildId.current ? referenceId : undefined,\n },\n elementType: 'div',\n });\n React.useEffect(() => {\n const headerId = !hasChildId.current ? headerRef.current?.id : undefined;\n const childWithId = getChildWithId(headerSlot?.children);\n hasChildId.current = Boolean(childWithId);\n setReferenceId(getReferenceId(headerId, childWithId, generatedId));\n }, [generatedId, header, headerSlot, setReferenceId]);\n return {\n components: { root: 'div', image: 'div', header: 'div', description: 'div', action: 'div' },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n image: slot.optional(image, { elementType: 'div' }),\n header: headerSlot,\n description: slot.optional(description, { elementType: 'div' }),\n action: slot.optional(action, { elementType: 'div' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useCardContext_unstable","cardHeaderClassNames","getChildWithId","header","isReactElementWithIdProp","element","isValidElement","Boolean","props","id","Children","toArray","find","getReferenceId","headerId","childWithId","generatedId","useCardHeader_unstable","ref","image","description","action","selectableA11yProps","referenceId","setReferenceId","headerRef","useRef","hasChildId","headerSlot","optional","renderByDefault","defaultProps","current","undefined","elementType","useEffect","children","components","root","always"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,oBAAoB,QAAQ,+BAA+B;AAEpE;;;;CAIC,GACD,SAASC,eAAeC,MAAuB;IAC7C,SAASC,yBAAyBC,OAAwB;QACxD,OAAOT,MAAMU,cAAc,CAAkBD,YAAYE,QAAQF,QAAQG,KAAK,CAACC,EAAE;IACnF;IAEA,OAAOb,MAAMc,QAAQ,CAACC,OAAO,CAACR,QAAQS,IAAI,CAACR;AAC7C;AAEA;;;;;;;;CAQC,GACD,SAASS,eACPC,QAA4B,EAC5BC,WAA4D,EAC5DC,WAAmB;IAEnB,IAAIF,UAAU;QACZ,OAAOA;IACT;IAEA,IAAIC,wBAAAA,kCAAAA,YAAaP,KAAK,CAACC,EAAE,EAAE;QACzB,OAAOM,YAAYP,KAAK,CAACC,EAAE;IAC7B;IAEA,OAAOO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACT,OAAwBU;IAC7D,MAAM,EAAEC,KAAK,EAAEhB,MAAM,EAAEiB,WAAW,EAAEC,MAAM,EAAE,GAAGb;IAE/C,MAAM,EACJc,qBAAqB,EAAEC,WAAW,EAAEC,cAAc,EAAE,EACrD,GAAGxB;IACJ,MAAMyB,YAAY7B,MAAM8B,MAAM,CAAiB;IAE/C,MAAMC,aAAa/B,MAAM8B,MAAM,CAAC;IAChC,MAAMV,cAAclB,MAAMG,qBAAqBE,MAAM,EAAEoB;IAEvD,MAAMK,aAAa7B,KAAK8B,QAAQ,CAAC1B,QAAQ;QACvC2B,iBAAiB;QACjBC,cAAc;YACZb,KAAKO;YACLhB,IAAI,CAACkB,WAAWK,OAAO,GAAGT,cAAcU;QAC1C;QACAC,aAAa;IACf;IACAtC,MAAMuC,SAAS,CAAC;YACyBV;QAAvC,MAAMX,WAAW,CAACa,WAAWK,OAAO,IAAGP,qBAAAA,UAAUO,OAAO,cAAjBP,yCAAAA,mBAAmBhB,EAAE,GAAGwB;QAC/D,MAAMlB,cAAcb,eAAe0B,uBAAAA,iCAAAA,WAAYQ,QAAQ;QACvDT,WAAWK,OAAO,GAAGzB,QAAQQ;QAC7BS,eAAeX,eAAeC,UAAUC,aAAaC;IACvD,GAAG;QAACA;QAAab;QAAQyB;QAAYJ;KAAe;IACpD,OAAO;QACLa,YAAY;YAAEC,MAAM;YAAOnB,OAAO;YAAOhB,QAAQ;YAAOiB,aAAa;YAAOC,QAAQ;QAAM;QAE1FiB,MAAMvC,KAAKwC,MAAM,CACf1C,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FqB,KAAKA;YACL,GAAGV,KAAK;QACV,IACA;YAAE0B,aAAa;QAAM;QAEvBf,OAAOpB,KAAK8B,QAAQ,CAACV,OAAO;YAAEe,aAAa;QAAM;QACjD/B,QAAQyB;QACRR,aAAarB,KAAK8B,QAAQ,CAACT,aAAa;YAAEc,aAAa;QAAM;QAC7Db,QAAQtB,KAAK8B,QAAQ,CAACR,QAAQ;YAAEa,aAAa;QAAM;IACrD;AACF,EAAE"}

package/lib-commonjs/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, 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>,\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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"}
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, 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":"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"}

package/lib-commonjs/components/CardHeader/useCardHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CardHeader/useCardHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardHeaderClassNames } from './useCardHeaderStyles.styles';\n\n/*\n Finds the first child of CardHeader with an id prop.\n \n @param header - the header prop of CardHeader\n /\nfunction getChildWithId(header: React.ReactNode) {\n function isReactElementWithIdProp(element: React.ReactNode): element is React.ReactElement {\n return React.isValidElement(element) && Boolean(element.props.id);\n }\n\n return React.Children.toArray(header).find(isReactElementWithIdProp);\n}\n\n/\n Returns the id to use for the CardHeader root element.\n \n @param headerId - the id prop of the CardHeader component\n * @param childWithId - the first child of the CardHeader component with an id prop\n * @param generatedId - a generated id\n \n @returns the id to use for the CardHeader root element\n /\nfunction getReferenceId(\n headerId: string \| undefined,\n childWithId: React.ReactElement \| undefined,\n generatedId: string,\n): string {\n if (headerId) {\n return headerId;\n }\n\n if (childWithId?.props.id) {\n return childWithId.props.id;\n }\n\n return generatedId;\n}\n\n/\n Create the state required to render CardHeader.\n \n The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n \n @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n const { image, header, description, action } = props;\n\n const {\n selectableA11yProps: { referenceId, setReferenceId },\n } = useCardContext_unstable();\n const headerRef = React.useRef<HTMLDivElement>(null);\n\n const hasChildId = React.useRef(false);\n const generatedId = useId(cardHeaderClassNames.header, referenceId);\n\n const headerSlot = slot.optional(header, {\n renderByDefault: true,\n defaultProps: {\n ref: headerRef,\n id: !hasChildId.current ? referenceId : undefined,\n },\n elementType: 'div',\n });\n React.useEffect(() => {\n const headerId = !hasChildId.current ? headerRef.current?.id : undefined;\n const childWithId = getChildWithId(headerSlot?.children);\n hasChildId.current = Boolean(childWithId);\n setReferenceId(getReferenceId(headerId, childWithId, generatedId));\n }, [generatedId, header, headerSlot, setReferenceId]);\n return {\n components: { root: 'div', image: 'div', header: 'div', description: 'div', action: 'div' },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n image: slot.optional(image, { elementType: 'div' }),\n header: headerSlot,\n description: slot.optional(description, { elementType: 'div' }),\n action: slot.optional(action, { elementType: 'div' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useCardContext_unstable","cardHeaderClassNames","getChildWithId","header","isReactElementWithIdProp","element","isValidElement","Boolean","props","id","Children","toArray","find","getReferenceId","headerId","childWithId","generatedId","useCardHeader_unstable","ref","image","description","action","selectableA11yProps","referenceId","setReferenceId","headerRef","useRef","hasChildId","headerSlot","optional","renderByDefault","defaultProps","current","undefined","elementType","useEffect","children","components","root","always"],"mappings":";;;;+BAqDaqB;;;;;;;iEArDU,QAAQ;gCACuB,4BAA4B;6BAE1C,sBAAsB;2CACzB,+BAA+B;AAEpE;;;;CAIC,GACD,SAASf,eAAeC,MAAuB;IAC7C,SAASC,yBAAyBC,OAAwB;QACxD,qBAAOT,OAAMU,cAAc,~~CAACD~~,YAAYE,QAAQF,QAAQG,KAAK,CAACC,EAAE;~~IAClE~~;IAEA,OAAOb,OAAMc,QAAQ,CAACC,OAAO,CAACR,QAAQS,IAAI,CAACR;AAC7C;AAEA;;;;;;;;CAQC,GACD,SAASS,eACPC,QAA4B,EAC5BC,~~WAA2C~~,~~EAC3CC~~,WAAmB;IAEnB,IAAIF,UAAU;QACZ,OAAOA;IACT;IAEA,IAAIC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaP,KAAK,CAACC,EAAE,EAAE;QACzB,OAAOM,YAAYP,KAAK,CAACC,EAAE;IAC7B;IAEA,OAAOO;AACT;AAWO,+BAA+B,CAACR,OAAwBU;IAC7D,MAAM,EAAEC,KAAK,EAAEhB,MAAM,EAAEiB,WAAW,EAAEC,MAAM,EAAE,GAAGb;IAE/C,MAAM,EACJc,qBAAqB,EAAEC,WAAW,EAAEC,cAAc,EAAE,EACrD,OAAGxB,oCAAAA;IACJ,MAAMyB,YAAY7B,OAAM8B,MAAM,CAAiB;IAE/C,MAAMC,aAAa/B,OAAM8B,MAAM,CAAC;IAChC,MAAMV,kBAAclB,qBAAAA,EAAMG,+CAAAA,CAAqBE,MAAM,EAAEoB;IAEvD,MAAMK,aAAa7B,oBAAAA,CAAK8B,QAAQ,CAAC1B,QAAQ;QACvC2B,iBAAiB;QACjBC,cAAc;YACZb,KAAKO;YACLhB,IAAI,CAACkB,WAAWK,OAAO,GAAGT,cAAcU;QAC1C;QACAC,aAAa;IACf;IACAtC,OAAMuC,SAAS,CAAC;YACyBV;QAAvC,MAAMX,WAAW,CAACa,WAAWK,OAAO,GAAA,CAAGP,qBAAAA,UAAUO,OAAAA,AAAO,MAAA,QAAjBP,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBhB,EAAE,GAAGwB;QAC/D,MAAMlB,cAAcb,eAAe0B,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAYQ,QAAQ;QACvDT,WAAWK,OAAO,GAAGzB,QAAQQ;QAC7BS,eAAeX,eAAeC,UAAUC,aAAaC;IACvD,GAAG;QAACA;QAAab;QAAQyB;QAAYJ;KAAe;IACpD,OAAO;QACLa,YAAY;YAAEC,MAAM;YAAOnB,OAAO;YAAOhB,QAAQ;YAAOiB,aAAa;YAAOC,QAAQ;QAAM;QAE1FiB,MAAMvC,oBAAAA,CAAKwC,MAAM,KACf1C,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FqB,KAAKA;YACL,GAAGV,KAAK;QACV,IACA;YAAE0B,aAAa;QAAM;QAEvBf,OAAOpB,oBAAAA,CAAK8B,QAAQ,CAACV,OAAO;YAAEe,aAAa;QAAM;QACjD/B,QAAQyB;QACRR,aAAarB,oBAAAA,CAAK8B,QAAQ,CAACT,aAAa;YAAEc,aAAa;QAAM;QAC7Db,QAAQtB,oBAAAA,CAAK8B,QAAQ,CAACR,QAAQ;YAAEa,aAAa;QAAM;IACrD;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/CardHeader/useCardHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardHeaderClassNames } from './useCardHeaderStyles.styles';\n\n/*\n Finds the first child of CardHeader with an id prop.\n \n @param header - the header prop of CardHeader\n /\nfunction getChildWithId(header: React.ReactNode) {\n function isReactElementWithIdProp(element: React.ReactNode): element is React.ReactElement<{ id: string }> {\n return React.isValidElement<{ id?: string }>(element) && Boolean(element.props.id);\n }\n\n return React.Children.toArray(header).find(isReactElementWithIdProp);\n}\n\n/\n Returns the id to use for the CardHeader root element.\n \n @param headerId - the id prop of the CardHeader component\n * @param childWithId - the first child of the CardHeader component with an id prop\n * @param generatedId - a generated id\n \n @returns the id to use for the CardHeader root element\n /\nfunction getReferenceId(\n headerId: string \| undefined,\n childWithId: React.ReactElement<{ id?: string }> \| undefined,\n generatedId: string,\n): string {\n if (headerId) {\n return headerId;\n }\n\n if (childWithId?.props.id) {\n return childWithId.props.id;\n }\n\n return generatedId;\n}\n\n/\n Create the state required to render CardHeader.\n \n The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n \n @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n const { image, header, description, action } = props;\n\n const {\n selectableA11yProps: { referenceId, setReferenceId },\n } = useCardContext_unstable();\n const headerRef = React.useRef<HTMLDivElement>(null);\n\n const hasChildId = React.useRef(false);\n const generatedId = useId(cardHeaderClassNames.header, referenceId);\n\n const headerSlot = slot.optional(header, {\n renderByDefault: true,\n defaultProps: {\n ref: headerRef,\n id: !hasChildId.current ? referenceId : undefined,\n },\n elementType: 'div',\n });\n React.useEffect(() => {\n const headerId = !hasChildId.current ? headerRef.current?.id : undefined;\n const childWithId = getChildWithId(headerSlot?.children);\n hasChildId.current = Boolean(childWithId);\n setReferenceId(getReferenceId(headerId, childWithId, generatedId));\n }, [generatedId, header, headerSlot, setReferenceId]);\n return {\n components: { root: 'div', image: 'div', header: 'div', description: 'div', action: 'div' },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n image: slot.optional(image, { elementType: 'div' }),\n header: headerSlot,\n description: slot.optional(description, { elementType: 'div' }),\n action: slot.optional(action, { elementType: 'div' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useCardContext_unstable","cardHeaderClassNames","getChildWithId","header","isReactElementWithIdProp","element","isValidElement","Boolean","props","id","Children","toArray","find","getReferenceId","headerId","childWithId","generatedId","useCardHeader_unstable","ref","image","description","action","selectableA11yProps","referenceId","setReferenceId","headerRef","useRef","hasChildId","headerSlot","optional","renderByDefault","defaultProps","current","undefined","elementType","useEffect","children","components","root","always"],"mappings":";;;;+BAqDaqB;;;;;;;iEArDU,QAAQ;gCACuB,4BAA4B;6BAE1C,sBAAsB;2CACzB,+BAA+B;AAEpE;;;;CAIC,GACD,SAASf,eAAeC,MAAuB;IAC7C,SAASC,yBAAyBC,OAAwB;QACxD,qBAAOT,OAAMU,cAAc,CAAkBD,YAAYE,QAAQF,QAAQG,KAAK,CAACC,EAAE;IACnF;IAEA,OAAOb,OAAMc,QAAQ,CAACC,OAAO,CAACR,QAAQS,IAAI,CAACR;AAC7C;AAEA;;;;;;;;CAQC,GACD,SAASS,eACPC,QAA4B,EAC5BC,WAA4D,EAC5DC,WAAmB;IAEnB,IAAIF,UAAU;QACZ,OAAOA;IACT;IAEA,IAAIC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaP,KAAK,CAACC,EAAE,EAAE;QACzB,OAAOM,YAAYP,KAAK,CAACC,EAAE;IAC7B;IAEA,OAAOO;AACT;AAWO,+BAA+B,CAACR,OAAwBU;IAC7D,MAAM,EAAEC,KAAK,EAAEhB,MAAM,EAAEiB,WAAW,EAAEC,MAAM,EAAE,GAAGb;IAE/C,MAAM,EACJc,qBAAqB,EAAEC,WAAW,EAAEC,cAAc,EAAE,EACrD,OAAGxB,oCAAAA;IACJ,MAAMyB,YAAY7B,OAAM8B,MAAM,CAAiB;IAE/C,MAAMC,aAAa/B,OAAM8B,MAAM,CAAC;IAChC,MAAMV,kBAAclB,qBAAAA,EAAMG,+CAAAA,CAAqBE,MAAM,EAAEoB;IAEvD,MAAMK,aAAa7B,oBAAAA,CAAK8B,QAAQ,CAAC1B,QAAQ;QACvC2B,iBAAiB;QACjBC,cAAc;YACZb,KAAKO;YACLhB,IAAI,CAACkB,WAAWK,OAAO,GAAGT,cAAcU;QAC1C;QACAC,aAAa;IACf;IACAtC,OAAMuC,SAAS,CAAC;YACyBV;QAAvC,MAAMX,WAAW,CAACa,WAAWK,OAAO,GAAA,CAAGP,qBAAAA,UAAUO,OAAAA,AAAO,MAAA,QAAjBP,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBhB,EAAE,GAAGwB;QAC/D,MAAMlB,cAAcb,eAAe0B,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAYQ,QAAQ;QACvDT,WAAWK,OAAO,GAAGzB,QAAQQ;QAC7BS,eAAeX,eAAeC,UAAUC,aAAaC;IACvD,GAAG;QAACA;QAAab;QAAQyB;QAAYJ;KAAe;IACpD,OAAO;QACLa,YAAY;YAAEC,MAAM;YAAOnB,OAAO;YAAOhB,QAAQ;YAAOiB,aAAa;YAAOC,QAAQ;QAAM;QAE1FiB,MAAMvC,oBAAAA,CAAKwC,MAAM,KACf1C,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FqB,KAAKA;YACL,GAAGV,KAAK;QACV,IACA;YAAE0B,aAAa;QAAM;QAEvBf,OAAOpB,oBAAAA,CAAK8B,QAAQ,CAACV,OAAO;YAAEe,aAAa;QAAM;QACjD/B,QAAQyB;QACRR,aAAarB,oBAAAA,CAAK8B,QAAQ,CAACT,aAAa;YAAEc,aAAa;QAAM;QAC7Db,QAAQtB,oBAAAA,CAAK8B,QAAQ,CAACR,QAAQ;YAAEa,aAAa;QAAM;IACrD;AACF,EAAE"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-card",
-  "version": "0.0.0-nightly-20250904-0406.1",
+  "version": "0.0.0-nightly-20250909-0406.1",
   "private": false,
   "description": "Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
@@ -14,29 +14,29 @@
   "license": "MIT",
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-button": "0.0.0-nightly-20250904-0406.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250904-0406.1",
-    "@fluentui/react-conformance": "0.0.0-nightly-20250904-0406.1",
-    "@fluentui/react-provider": "0.0.0-nightly-20250904-0406.1",
+    "@fluentui/react-button": "0.0.0-nightly-20250909-0406.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250909-0406.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20250909-0406.1",
+    "@fluentui/react-provider": "0.0.0-nightly-20250909-0406.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20250904-0406.1",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250904-0406.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20250904-0406.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20250904-0406.1",
-    "@fluentui/react-text": "0.0.0-nightly-20250904-0406.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20250904-0406.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20250904-0406.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20250909-0406.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250909-0406.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20250909-0406.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20250909-0406.1",
+    "@fluentui/react-text": "0.0.0-nightly-20250909-0406.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20250909-0406.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20250909-0406.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.9.0 <19.0.0",
-    "react": ">=16.14.0 <19.0.0",
-    "react-dom": ">=16.14.0 <19.0.0"
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "beachball": {},
   "exports": {