@fluentui/react-card 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.2

package/lib/components/Card/useCard.js

@@ -1,28 +1,101 @@
-import { __assign } from "tslib";
-import { getNativeElementProps } from '@fluentui/react-utilities';
-import { useFocusableGroup, FocusableGroupTabBehavior } from '@fluentui/react-tabster';
+import * as React from 'react';
+import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
+import { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';
+import { useCardSelectable } from './useCardSelectable';
+import { cardContextDefaultValue } from './CardContext';
+const focusMap = {
+  off: undefined,
+  'no-tab': 'limited-trap-focus',
+  'tab-exit': 'limited',
+  'tab-only': 'unlimited'
+};
 /**
- * Create the state required to render Card.
+ * Create the state for interactive cards.
  *
- * The returned state can be modified with hooks such as useCardStyles,
- * before being passed to renderCard.
+ * This internal hook defines if the card is interactive
+ * and control focus properties based on that.
  *
  * @param props - props from this instance of Card
- * @param ref - reference to root HTMLElement of Card
  */
-
-export var useCard = function (props, ref) {
-  var groupperAttrs = useFocusableGroup({
-    tabBehavior: FocusableGroupTabBehavior.LimitedTrapFocus
+const useCardInteractive = ({
+  focusMode = 'off',
+  ...props
+}) => {
+  const interactive = ['onClick', 'onDoubleClick', 'onMouseUp', 'onMouseDown', 'onPointerUp', 'onPointerDown', 'onTouchStart', 'onTouchEnd', 'onDragStart', 'onDragEnd'].some(prop => props[prop]);
+  const groupperAttrs = useFocusableGroup({
+    tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]
   });
+  const interactiveFocusAttributes = {
+    ...groupperAttrs,
+    tabIndex: 0
+  };
   return {
+    interactive,
+    focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
+  };
+};
+/**
+ * Create the state required to render Card.
+ *
+ * The returned state can be modified with hooks such as useCardStyles_unstable,
+ * before being passed to renderCard_unstable.
+ *
+ * @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 [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
+  const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
+  const cardBaseRef = useFocusWithin();
+  const {
+    selectable,
+    selected,
+    selectableCardProps,
+    selectFocused,
+    checkboxSlot,
+    floatingActionSlot
+  } = useCardSelectable(props, {
+    referenceId,
+    referenceLabel
+  }, cardBaseRef);
+  const cardRef = useMergedRefs(cardBaseRef, ref);
+  const {
+    interactive,
+    focusAttributes
+  } = useCardInteractive(props);
+  return {
+    appearance,
+    orientation,
+    size,
+    interactive,
+    selectable,
+    selectFocused,
+    selected,
+    selectableA11yProps: {
+      setReferenceId,
+      referenceId,
+      referenceLabel,
+      setReferenceLabel
+    },
     components: {
-      root: 'div'
+      root: 'div',
+      floatingAction: 'div',
+      checkbox: 'input'
     },
-    root: getNativeElementProps(props.as || 'div', __assign(__assign({
-      ref: ref,
-      role: 'group'
-    }, groupperAttrs), props))
+    root: getNativeElementProps('div', {
+      ref: cardRef,
+      role: 'group',
+      ...focusAttributes,
+      ...props,
+      ...selectableCardProps
+    }),
+    floatingAction: floatingActionSlot,
+    checkbox: checkboxSlot
   };
 };
 //# sourceMappingURL=useCard.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/useCard.ts"],"names":[],"mappings":";AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,EAA4B,yBAA5B,QAA6D,yBAA7D;AAEA;;;;;;;;AAQG;;AACH,OAAO,IAAM,OAAO,GAAG,UAAC,KAAD,EAAmB,GAAnB,EAA8C;AACnE,MAAM,aAAa,GAAG,iBAAiB,CAAC;AACtC,IAAA,WAAW,EAAE,yBAAyB,CAAC;AADD,GAAD,CAAvC;AAIA,SAAO;AACL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KADP;AAGL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAkB,QAAA,CAAA,QAAA,CAAA;AAC3C,MAAA,GAAG,EAAA,GADwC;AAE3C,MAAA,IAAI,EAAE;AAFqC,KAAA,EAGxC,aAHwC,CAAA,EAIxC,KAJwC,CAAlB;AAHtB,GAAP;AAUD,CAfM","sourceRoot":""}
+{"version":3,"names":["React","getNativeElementProps","useMergedRefs","useFocusableGroup","useFocusWithin","useCardSelectable","cardContextDefaultValue","focusMap","off","undefined","useCardInteractive","focusMode","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","role"],"sources":["../src/packages/react-components/react-card/src/components/Card/useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } 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 = 'off', ...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  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[interactive ? 'no-tab' : 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: getNativeElementProps('div', {\n      ref: cardRef,\n      role: 'group',\n      ...focusAttributes,\n      ...props,\n      ...selectableCardProps,\n    }),\n\n    floatingAction: floatingActionSlot,\n    checkbox: checkboxSlot,\n  };\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,2BAA2B;AAChF,SAASC,iBAAiB,EAAEC,cAAc,QAAQ,yBAAyB;AAG3E,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,uBAAuB,QAAQ,eAAe;AAEvD,MAAMC,QAAQ,GAAG;EACfC,GAAG,EAAEC,SAAS;EACd,QAAQ,EAAE,oBAAoB;EAC9B,UAAU,EAAE,SAAS;EACrB,UAAU,EAAE;CACJ;AAEV;;;;;;;;AAQA,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC,SAAS,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAa,KAAI;EACxE,MAAMC,WAAW,GACf,CACE,SAAS,EACT,eAAe,EACf,WAAW,EACX,aAAa,EACb,aAAa,EACb,eAAe,EACf,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,CAEd,CAACC,IAAI,CAACC,IAAI,IAAIH,KAAK,CAACG,IAAI,CAAC,CAAC;EAE3B,MAAMC,aAAa,GAAGb,iBAAiB,CAAC;IACtCc,WAAW,EAAEV,QAAQ,CAACM,WAAW,GAAG,QAAQ,GAAGF,SAAS;GACzD,CAAC;EAEF,MAAMO,0BAA0B,GAAG;IACjC,GAAGF,aAAa;IAChBG,QAAQ,EAAE;GACX;EAED,OAAO;IACLN,WAAW;IACXO,eAAe,EAAET,SAAS,KAAK,KAAK,GAAG,IAAI,GAAGO;GAC/C;AACH,CAAC;AAED;;;;;;;;;AASA,OAAO,MAAMG,gBAAgB,GAAGA,CAACT,KAAgB,EAAEU,GAA8B,KAAe;EAC9F,MAAM;IAAEC,UAAU,GAAG,QAAQ;IAAEC,WAAW,GAAG,UAAU;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGb,KAAK;EAElF,MAAM,CAACc,WAAW,EAAEC,cAAc,CAAC,GAAG3B,KAAK,CAAC4B,QAAQ,CAACtB,uBAAuB,CAACuB,mBAAmB,CAACH,WAAW,CAAC;EAC7G,MAAM,CAACI,cAAc,EAAEC,iBAAiB,CAAC,GAAG/B,KAAK,CAAC4B,QAAQ,CAACtB,uBAAuB,CAACuB,mBAAmB,CAACH,WAAW,CAAC;EAEnH,MAAMM,WAAW,GAAG5B,cAAc,EAAkB;EACpD,MAAM;IAAE6B,UAAU;IAAEC,QAAQ;IAAEC,mBAAmB;IAAEC,aAAa;IAAEC,YAAY;IAAEC;EAAkB,CAAE,GAClGjC,iBAAiB,CAACO,KAAK,EAAE;IAAEc,WAAW;IAAEI;EAAc,CAAE,EAAEE,WAAW,CAAC;EAExE,MAAMO,OAAO,GAAGrC,aAAa,CAAC8B,WAAW,EAAEV,GAAG,CAAC;EAE/C,MAAM;IAAET,WAAW;IAAEO;EAAe,CAAE,GAAGV,kBAAkB,CAACE,KAAK,CAAC;EAElE,OAAO;IACLW,UAAU;IACVC,WAAW;IACXC,IAAI;IACJZ,WAAW;IACXoB,UAAU;IACVG,aAAa;IACbF,QAAQ;IACRL,mBAAmB,EAAE;MACnBF,cAAc;MACdD,WAAW;MACXI,cAAc;MACdC;KACD;IAEDS,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,cAAc,EAAE,KAAK;MACrBC,QAAQ,EAAE;KACX;IAEDF,IAAI,EAAExC,qBAAqB,CAAC,KAAK,EAAE;MACjCqB,GAAG,EAAEiB,OAAO;MACZK,IAAI,EAAE,OAAO;MACb,GAAGxB,eAAe;MAClB,GAAGR,KAAK;MACR,GAAGuB;KACJ,CAAC;IAEFO,cAAc,EAAEJ,kBAAkB;IAClCK,QAAQ,EAAEN;GACX;AACH,CAAC"}

package/lib/components/Card/useCardContextValue.js

@@ -0,0 +1,8 @@
+export function useCardContextValue({
+  selectableA11yProps
+}) {
+  return {
+    selectableA11yProps
+  };
+}
+//# sourceMappingURL=useCardContextValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useCardContextValue","selectableA11yProps"],"sources":["../src/packages/react-components/react-card/src/components/Card/useCardContextValue.ts"],"sourcesContent":["import type { CardContextValue, CardState } from './Card.types';\n\nexport function useCardContextValue({ selectableA11yProps }: CardState): CardContextValue {\n  return { selectableA11yProps };\n}\n"],"mappings":"AAEA,OAAM,SAAUA,mBAAmBA,CAAC;EAAEC;AAAmB,CAAa;EACpE,OAAO;IAAEA;EAAmB,CAAE;AAChC"}

package/lib/components/Card/useCardSelectable.js

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';
+import { Enter } from '@fluentui/keyboard-keys';
+import { useFocusFinders } from '@fluentui/react-tabster';
+/**
+ * @internal
+ *
+ * Create the state related to selectable cards.
+ *
+ * This internal hook controls all the logic for selectable cards and is
+ * intended to be used alongside with useCard_unstable.
+ *
+ * @param props - props from this instance of Card
+ * @param a11yProps - accessibility props shared between elements of the card
+ * @param ref - reference to the root element of Card
+ */
+export const useCardSelectable = (props, {
+  referenceLabel,
+  referenceId
+}, cardRef) => {
+  const {
+    checkbox = {},
+    selected,
+    defaultSelected,
+    onSelectionChange,
+    floatingAction,
+    onClick,
+    onKeyDown
+  } = props;
+  const {
+    findAllFocusable
+  } = useFocusFinders();
+  const checkboxRef = React.useRef(null);
+  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');
+  const [isCardSelected, setIsCardSelected] = React.useState(false);
+  const [isSelectFocused, setIsSelectFocused] = React.useState(false);
+  const shouldRestrictTriggerAction = React.useCallback(event => {
+    if (!cardRef.current) {
+      return false;
+    }
+    const focusableElements = findAllFocusable(cardRef.current);
+    const target = event.target;
+    const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));
+    const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
+    return isElementInFocusableGroup && !isCheckboxSlot;
+  }, [cardRef, findAllFocusable]);
+  const onChangeHandler = React.useCallback(event => {
+    if (shouldRestrictTriggerAction(event)) {
+      return;
+    }
+    const newCheckedValue = !isCardSelected;
+    setIsCardSelected(newCheckedValue);
+    if (onSelectionChange) {
+      onSelectionChange(event, {
+        selected: newCheckedValue
+      });
+    }
+  }, [onSelectionChange, isCardSelected, shouldRestrictTriggerAction]);
+  const onKeyDownHandler = React.useCallback(event => {
+    if ([Enter].includes(event.key)) {
+      event.preventDefault();
+      onChangeHandler(event);
+    }
+  }, [onChangeHandler]);
+  const checkboxSlot = React.useMemo(() => {
+    if (!isSelectable || floatingAction) {
+      return;
+    }
+    const selectableCheckboxProps = {};
+    if (referenceId) {
+      selectableCheckboxProps['aria-labelledby'] = referenceId;
+    } else if (referenceLabel) {
+      selectableCheckboxProps['aria-label'] = referenceLabel;
+    }
+    return resolveShorthand(checkbox, {
+      defaultProps: {
+        ref: checkboxRef,
+        type: 'checkbox',
+        checked: isCardSelected,
+        onChange: event => onChangeHandler(event),
+        onFocus: () => setIsSelectFocused(true),
+        onBlur: () => setIsSelectFocused(false),
+        ...selectableCheckboxProps
+      }
+    });
+  }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);
+  const floatingActionSlot = React.useMemo(() => {
+    if (!floatingAction) {
+      return;
+    }
+    return resolveShorthand(floatingAction, {
+      defaultProps: {
+        ref: checkboxRef
+      }
+    });
+  }, [floatingAction]);
+  const selectableCardProps = React.useMemo(() => {
+    if (!isSelectable) {
+      return null;
+    }
+    return {
+      onClick: mergeCallbacks(onClick, onChangeHandler),
+      onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)
+    };
+  }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);
+  React.useEffect(() => setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [defaultSelected, selected, setIsCardSelected]);
+  return {
+    selected: isCardSelected,
+    selectable: isSelectable,
+    selectFocused: isSelectFocused,
+    selectableCardProps,
+    checkboxSlot,
+    floatingActionSlot
+  };
+};
+//# sourceMappingURL=useCardSelectable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","mergeCallbacks","resolveShorthand","Enter","useFocusFinders","useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","checkboxRef","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","defaultProps","ref","type","checked","onChange","onFocus","onBlur","floatingActionSlot","selectableCardProps","useEffect","Boolean","selectable","selectFocused"],"sources":["../src/packages/react-components/react-card/src/components/Card/useCardSelectable.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, resolveShorthand } 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\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 ref - reference to the root element of Card\n */\nexport const useCardSelectable = (\n  props: CardProps,\n  { referenceLabel, referenceId }: Pick<CardContextValue['selectableA11yProps'], 'referenceId' | 'referenceLabel'>,\n  cardRef: React.RefObject<HTMLDivElement>,\n) => {\n  const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;\n\n  const { findAllFocusable } = useFocusFinders();\n\n  const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n\n  const [isCardSelected, setIsCardSelected] = React.useState(false);\n  const [isSelectFocused, setIsSelectFocused] = 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 = !isCardSelected;\n\n      setIsCardSelected(newCheckedValue);\n\n      if (onSelectionChange) {\n        onSelectionChange(event, { selected: newCheckedValue });\n      }\n    },\n    [onSelectionChange, isCardSelected, 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 (!isSelectable || 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 resolveShorthand(checkbox, {\n      defaultProps: {\n        ref: checkboxRef,\n        type: 'checkbox',\n        checked: isCardSelected,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n        onFocus: () => setIsSelectFocused(true),\n        onBlur: () => setIsSelectFocused(false),\n        ...selectableCheckboxProps,\n      },\n    });\n  }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n\n  const floatingActionSlot = React.useMemo(() => {\n    if (!floatingAction) {\n      return;\n    }\n\n    return resolveShorthand(floatingAction, {\n      defaultProps: {\n        ref: checkboxRef,\n      },\n    });\n  }, [floatingAction]);\n\n  const selectableCardProps = React.useMemo(() => {\n    if (!isSelectable) {\n      return null;\n    }\n\n    return {\n      onClick: mergeCallbacks(onClick, onChangeHandler),\n      onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler),\n    };\n  }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n\n  React.useEffect(\n    () => setIsCardSelected(Boolean(defaultSelected ?? selected)),\n    [defaultSelected, selected, setIsCardSelected],\n  );\n\n  return {\n    selected: isCardSelected,\n    selectable: isSelectable,\n    selectFocused: isSelectFocused,\n    selectableCardProps,\n    checkboxSlot,\n    floatingActionSlot,\n  };\n};\n"],"mappings":"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"}