@fluentui/react-card 9.0.32 → 9.0.34
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.
- package/CHANGELOG.json +85 -1
- package/CHANGELOG.md +29 -2
- package/lib/components/Card/Card.js.map +1 -1
- package/lib/components/Card/CardContext.js.map +1 -1
- package/lib/components/Card/renderCard.js +11 -4
- package/lib/components/Card/renderCard.js.map +1 -1
- package/lib/components/Card/useCard.js +4 -4
- package/lib/components/Card/useCard.js.map +1 -1
- package/lib/components/Card/useCardContextValue.js +1 -1
- package/lib/components/Card/useCardContextValue.js.map +1 -1
- package/lib/components/Card/useCardSelectable.js +5 -4
- package/lib/components/Card/useCardSelectable.js.map +1 -1
- package/lib/components/CardFooter/CardFooter.js.map +1 -1
- package/lib/components/CardFooter/renderCardFooter.js +7 -2
- package/lib/components/CardFooter/renderCardFooter.js.map +1 -1
- package/lib/components/CardFooter/useCardFooter.js +1 -1
- package/lib/components/CardFooter/useCardFooter.js.map +1 -1
- package/lib/components/CardHeader/CardHeader.js.map +1 -1
- package/lib/components/CardHeader/renderCardHeader.js +9 -2
- package/lib/components/CardHeader/renderCardHeader.js.map +1 -1
- package/lib/components/CardHeader/useCardHeader.js +6 -5
- package/lib/components/CardHeader/useCardHeader.js.map +1 -1
- package/lib/components/CardHeader/useCardHeaderStyles.styles.js +5 -4
- package/lib/components/CardHeader/useCardHeaderStyles.styles.js.map +1 -1
- package/lib/components/CardPreview/CardPreview.js.map +1 -1
- package/lib/components/CardPreview/renderCardPreview.js +7 -2
- package/lib/components/CardPreview/renderCardPreview.js.map +1 -1
- package/lib/components/CardPreview/useCardPreview.js +2 -2
- package/lib/components/CardPreview/useCardPreview.js.map +1 -1
- package/lib-commonjs/Card.js +2 -2
- package/lib-commonjs/Card.js.map +1 -1
- package/lib-commonjs/CardFooter.js +2 -2
- package/lib-commonjs/CardFooter.js.map +1 -1
- package/lib-commonjs/CardHeader.js +2 -2
- package/lib-commonjs/CardHeader.js.map +1 -1
- package/lib-commonjs/CardPreview.js +2 -2
- package/lib-commonjs/CardPreview.js.map +1 -1
- package/lib-commonjs/components/Card/Card.js +7 -5
- package/lib-commonjs/components/Card/Card.js.map +1 -1
- package/lib-commonjs/components/Card/Card.types.js +2 -2
- package/lib-commonjs/components/Card/Card.types.js.map +1 -1
- package/lib-commonjs/components/Card/CardContext.js +11 -5
- package/lib-commonjs/components/Card/CardContext.js.map +1 -1
- package/lib-commonjs/components/Card/index.js +7 -7
- package/lib-commonjs/components/Card/index.js.map +1 -1
- package/lib-commonjs/components/Card/renderCard.js +18 -9
- package/lib-commonjs/components/Card/renderCard.js.map +1 -1
- package/lib-commonjs/components/Card/useCard.js +18 -16
- package/lib-commonjs/components/Card/useCard.js.map +1 -1
- package/lib-commonjs/components/Card/useCardContextValue.js +4 -2
- package/lib-commonjs/components/Card/useCardContextValue.js.map +1 -1
- package/lib-commonjs/components/Card/useCardSelectable.js +18 -15
- package/lib-commonjs/components/Card/useCardSelectable.js.map +1 -1
- package/lib-commonjs/components/Card/useCardStyles.styles.js +14 -8
- package/lib-commonjs/components/Card/useCardStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CardFooter/CardFooter.js +7 -5
- package/lib-commonjs/components/CardFooter/CardFooter.js.map +1 -1
- package/lib-commonjs/components/CardFooter/index.js +6 -6
- package/lib-commonjs/components/CardFooter/index.js.map +1 -1
- package/lib-commonjs/components/CardFooter/renderCardFooter.js +13 -6
- package/lib-commonjs/components/CardFooter/renderCardFooter.js.map +1 -1
- package/lib-commonjs/components/CardFooter/useCardFooter.js +9 -7
- package/lib-commonjs/components/CardFooter/useCardFooter.js.map +1 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.js +7 -3
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CardHeader/CardHeader.js +7 -5
- package/lib-commonjs/components/CardHeader/CardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/index.js +6 -6
- package/lib-commonjs/components/CardHeader/index.js.map +1 -1
- package/lib-commonjs/components/CardHeader/renderCardHeader.js +15 -6
- package/lib-commonjs/components/CardHeader/renderCardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeader.js +20 -17
- package/lib-commonjs/components/CardHeader/useCardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.js +15 -8
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CardPreview/CardPreview.js +7 -5
- package/lib-commonjs/components/CardPreview/CardPreview.js.map +1 -1
- package/lib-commonjs/components/CardPreview/index.js +6 -6
- package/lib-commonjs/components/CardPreview/index.js.map +1 -1
- package/lib-commonjs/components/CardPreview/renderCardPreview.js +13 -6
- package/lib-commonjs/components/CardPreview/renderCardPreview.js.map +1 -1
- package/lib-commonjs/components/CardPreview/useCardPreview.js +14 -12
- package/lib-commonjs/components/CardPreview/useCardPreview.js.map +1 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.js +7 -3
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.js.map +1 -1
- package/lib-commonjs/index.js +76 -28
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +11 -11
@@ -1,8 +1,13 @@
|
|
1
|
-
/** @jsxRuntime
|
1
|
+
/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
2
2
|
import { assertSlots } from '@fluentui/react-utilities';
|
3
3
|
/**
|
4
4
|
* Render the final JSX of CardPreview.
|
5
5
|
*/ export const renderCardPreview_unstable = (state)=>{
|
6
6
|
assertSlots(state);
|
7
|
-
return /*#__PURE__*/
|
7
|
+
return /*#__PURE__*/ _jsxs(state.root, {
|
8
|
+
children: [
|
9
|
+
state.root.children,
|
10
|
+
state.logo && /*#__PURE__*/ _jsx(state.logo, {})
|
11
|
+
]
|
12
|
+
});
|
8
13
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["renderCardPreview.tsx"],"sourcesContent":["/** @jsxRuntime
|
1
|
+
{"version":3,"sources":["renderCardPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Render the final JSX of CardPreview.\n */\nexport const renderCardPreview_unstable = (state: CardPreviewState) => {\n assertSlots<CardPreviewSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.logo && <state.logo />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCardPreview_unstable","state","root","children","logo"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;;;AAGhC,EAAE"}
|
@@ -11,8 +11,8 @@ import { cardPreviewClassNames } from './useCardPreviewStyles.styles';
|
|
11
11
|
* @param props - props from this instance of CardPreview
|
12
12
|
* @param ref - reference to root HTMLElement of CardPreview
|
13
13
|
*/ export const useCardPreview_unstable = (props, ref)=>{
|
14
|
-
const { logo
|
15
|
-
const { selectableA11yProps: { referenceLabel
|
14
|
+
const { logo } = props;
|
15
|
+
const { selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId } } = useCardContext_unstable();
|
16
16
|
const previewRef = useMergedRefs(ref, React.useRef(null));
|
17
17
|
React.useEffect(()=>{
|
18
18
|
if (referenceLabel && referenceId) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useCardPreview.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles.styles';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n const { logo } = props;\n\n const {\n selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },\n } = useCardContext_unstable();\n const previewRef = useMergedRefs(ref, React.useRef<HTMLDivElement>(null));\n\n React.useEffect(() => {\n if (referenceLabel && referenceId) {\n return;\n }\n\n if (previewRef.current && previewRef.current.parentNode) {\n const img = previewRef.current.parentNode.querySelector<HTMLImageElement>(`.${cardPreviewClassNames.root} > img`);\n\n if (img) {\n const ariaLabel = img.getAttribute('aria-label');\n const ariaDescribedby = img.getAttribute('aria-describedby');\n\n if (ariaDescribedby) {\n setReferenceId(ariaDescribedby);\n } else if (img.alt) {\n setReferenceLabel(img.alt);\n } else if (ariaLabel) {\n setReferenceLabel(ariaLabel);\n }\n }\n }\n }, [setReferenceLabel, referenceLabel, previewRef, referenceId, setReferenceId]);\n\n return {\n components: {\n root: 'div',\n logo: 'div',\n },\n\n root: slot.always(\n getNativeElementProps('div', {\n ref: previewRef,\n ...props,\n }),\n { elementType: 'div' },\n ),\n logo: slot.optional(logo, { elementType: 'div' }),\n };\n};\n"],"names":["React","getNativeElementProps","useMergedRefs","slot","useCardContext_unstable","cardPreviewClassNames","useCardPreview_unstable","props","ref","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","previewRef","useRef","useEffect","current","parentNode","img","querySelector","root","ariaLabel","getAttribute","ariaDescribedby","alt","components","always","elementType","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAEvF,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,qBAAqB,QAAQ,gCAAgC;AAEtE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC
|
1
|
+
{"version":3,"sources":["useCardPreview.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles.styles';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n const { logo } = props;\n\n const {\n selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },\n } = useCardContext_unstable();\n const previewRef = useMergedRefs(ref, React.useRef<HTMLDivElement>(null));\n\n React.useEffect(() => {\n if (referenceLabel && referenceId) {\n return;\n }\n\n if (previewRef.current && previewRef.current.parentNode) {\n const img = previewRef.current.parentNode.querySelector<HTMLImageElement>(`.${cardPreviewClassNames.root} > img`);\n\n if (img) {\n const ariaLabel = img.getAttribute('aria-label');\n const ariaDescribedby = img.getAttribute('aria-describedby');\n\n if (ariaDescribedby) {\n setReferenceId(ariaDescribedby);\n } else if (img.alt) {\n setReferenceLabel(img.alt);\n } else if (ariaLabel) {\n setReferenceLabel(ariaLabel);\n }\n }\n }\n }, [setReferenceLabel, referenceLabel, previewRef, referenceId, setReferenceId]);\n\n return {\n components: {\n root: 'div',\n logo: 'div',\n },\n\n root: slot.always(\n getNativeElementProps('div', {\n ref: previewRef,\n ...props,\n }),\n { elementType: 'div' },\n ),\n logo: slot.optional(logo, { elementType: 'div' }),\n };\n};\n"],"names":["React","getNativeElementProps","useMergedRefs","slot","useCardContext_unstable","cardPreviewClassNames","useCardPreview_unstable","props","ref","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","previewRef","useRef","useEffect","current","parentNode","img","querySelector","root","ariaLabel","getAttribute","ariaDescribedby","alt","components","always","elementType","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAEvF,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,qBAAqB,QAAQ,gCAAgC;AAEtE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEjB,MAAM,EACJG,qBAAqB,EAAEC,cAAc,EAAEC,WAAW,EAAEC,iBAAiB,EAAEC,cAAc,EAAE,EACxF,GAAGV;IACJ,MAAMW,aAAab,cAAcM,KAAKR,MAAMgB,MAAM,CAAiB;IAEnEhB,MAAMiB,SAAS,CAAC;QACd,IAAIN,kBAAkBC,aAAa;YACjC;QACF;QAEA,IAAIG,WAAWG,OAAO,IAAIH,WAAWG,OAAO,CAACC,UAAU,EAAE;YACvD,MAAMC,MAAML,WAAWG,OAAO,CAACC,UAAU,CAACE,aAAa,CAAmB,CAAC,CAAC,EAAEhB,sBAAsBiB,IAAI,CAAC,MAAM,CAAC;YAEhH,IAAIF,KAAK;gBACP,MAAMG,YAAYH,IAAII,YAAY,CAAC;gBACnC,MAAMC,kBAAkBL,IAAII,YAAY,CAAC;gBAEzC,IAAIC,iBAAiB;oBACnBX,eAAeW;gBACjB,OAAO,IAAIL,IAAIM,GAAG,EAAE;oBAClBb,kBAAkBO,IAAIM,GAAG;gBAC3B,OAAO,IAAIH,WAAW;oBACpBV,kBAAkBU;gBACpB;YACF;QACF;IACF,GAAG;QAACV;QAAmBF;QAAgBI;QAAYH;QAAaE;KAAe;IAE/E,OAAO;QACLa,YAAY;YACVL,MAAM;YACNb,MAAM;QACR;QAEAa,MAAMnB,KAAKyB,MAAM,CACf3B,sBAAsB,OAAO;YAC3BO,KAAKO;YACL,GAAGR,KAAK;QACV,IACA;YAAEsB,aAAa;QAAM;QAEvBpB,MAAMN,KAAK2B,QAAQ,CAACrB,MAAM;YAAEoB,aAAa;QAAM;IACjD;AACF,EAAE"}
|
package/lib-commonjs/Card.js
CHANGED
@@ -2,5 +2,5 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
3
3
|
value: true
|
4
4
|
});
|
5
|
-
const
|
6
|
-
|
5
|
+
const _export_star = require("@swc/helpers/_/_export_star");
|
6
|
+
_export_star._(require("./components/Card/index"), exports);
|
package/lib-commonjs/Card.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Card.js"],"sourcesContent":["export * from './components/Card/index';\n"],"names":[],"mappings":";;;;;
|
1
|
+
{"version":3,"sources":["Card.js"],"sourcesContent":["export * from './components/Card/index';\n"],"names":[],"mappings":";;;;;uBAAc"}
|
@@ -2,5 +2,5 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
3
3
|
value: true
|
4
4
|
});
|
5
|
-
const
|
6
|
-
|
5
|
+
const _export_star = require("@swc/helpers/_/_export_star");
|
6
|
+
_export_star._(require("./components/CardFooter/index"), exports);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["CardFooter.js"],"sourcesContent":["export * from './components/CardFooter/index';\n"],"names":[],"mappings":";;;;;
|
1
|
+
{"version":3,"sources":["CardFooter.js"],"sourcesContent":["export * from './components/CardFooter/index';\n"],"names":[],"mappings":";;;;;uBAAc"}
|
@@ -2,5 +2,5 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
3
3
|
value: true
|
4
4
|
});
|
5
|
-
const
|
6
|
-
|
5
|
+
const _export_star = require("@swc/helpers/_/_export_star");
|
6
|
+
_export_star._(require("./components/CardHeader/index"), exports);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["CardHeader.js"],"sourcesContent":["export * from './components/CardHeader/index';\n"],"names":[],"mappings":";;;;;
|
1
|
+
{"version":3,"sources":["CardHeader.js"],"sourcesContent":["export * from './components/CardHeader/index';\n"],"names":[],"mappings":";;;;;uBAAc"}
|
@@ -2,5 +2,5 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
3
3
|
value: true
|
4
4
|
});
|
5
|
-
const
|
6
|
-
|
5
|
+
const _export_star = require("@swc/helpers/_/_export_star");
|
6
|
+
_export_star._(require("./components/CardPreview/index"), exports);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["CardPreview.js"],"sourcesContent":["export * from './components/CardPreview/index';\n"],"names":[],"mappings":";;;;;
|
1
|
+
{"version":3,"sources":["CardPreview.js"],"sourcesContent":["export * from './components/CardPreview/index';\n"],"names":[],"mappings":";;;;;uBAAc"}
|
@@ -4,18 +4,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "Card", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return Card;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const _react = /*#__PURE__*/
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
11
13
|
const _useCard = require("./useCard");
|
12
14
|
const _renderCard = require("./renderCard");
|
13
|
-
const
|
15
|
+
const _useCardStylesstyles = require("./useCardStyles.styles");
|
14
16
|
const _useCardContextValue = require("./useCardContextValue");
|
15
17
|
const Card = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
16
18
|
const state = (0, _useCard.useCard_unstable)(props, ref);
|
17
19
|
const cardContextValue = (0, _useCardContextValue.useCardContextValue)(state);
|
18
|
-
(0,
|
20
|
+
(0, _useCardStylesstyles.useCardStyles_unstable)(state);
|
19
21
|
return (0, _renderCard.renderCard_unstable)(state, cardContextValue);
|
20
22
|
});
|
21
23
|
Card.displayName = 'Card';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Card.js"],"sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles.styles';\nimport { useCardContextValue } from './useCardContextValue';\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */ export const Card = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const state = useCard_unstable(props, ref);\n const cardContextValue = useCardContextValue(state);\n useCardStyles_unstable(state);\n return renderCard_unstable(state, cardContextValue);\n});\nCard.displayName = 'Card';\n"],"names":["Card","React","forwardRef","props","ref","state","useCard_unstable","cardContextValue","useCardContextValue","useCardStyles_unstable","renderCard_unstable","displayName"],"mappings":";;;;+BAOiBA
|
1
|
+
{"version":3,"sources":["Card.js"],"sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles.styles';\nimport { useCardContextValue } from './useCardContextValue';\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */ export const Card = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const state = useCard_unstable(props, ref);\n const cardContextValue = useCardContextValue(state);\n useCardStyles_unstable(state);\n return renderCard_unstable(state, cardContextValue);\n});\nCard.displayName = 'Card';\n"],"names":["Card","React","forwardRef","props","ref","state","useCard_unstable","cardContextValue","useCardContextValue","useCardStyles_unstable","renderCard_unstable","displayName"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;yBACU;4BACG;qCACG;qCACH;AAGzB,MAAMA,OAAO,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3D,MAAMC,QAAQC,IAAAA,yBAAgB,EAACH,OAAOC;IACtC,MAAMG,mBAAmBC,IAAAA,wCAAmB,EAACH;IAC7CI,IAAAA,2CAAsB,EAACJ;IACvB,OAAOK,IAAAA,+BAAmB,EAACL,OAAOE;AACtC;AACAP,KAAKW,WAAW,GAAG"}
|
@@ -2,5 +2,5 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
3
3
|
value: true
|
4
4
|
});
|
5
|
-
const
|
6
|
-
const _react = /*#__PURE__*/
|
5
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
6
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Card.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;
|
1
|
+
{"version":3,"sources":["Card.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;iEAAuB"}
|
@@ -9,12 +9,18 @@ function _export(target, all) {
|
|
9
9
|
});
|
10
10
|
}
|
11
11
|
_export(exports, {
|
12
|
-
cardContextDefaultValue: ()
|
13
|
-
|
14
|
-
|
12
|
+
cardContextDefaultValue: function() {
|
13
|
+
return cardContextDefaultValue;
|
14
|
+
},
|
15
|
+
CardProvider: function() {
|
16
|
+
return CardProvider;
|
17
|
+
},
|
18
|
+
useCardContext_unstable: function() {
|
19
|
+
return useCardContext_unstable;
|
20
|
+
}
|
15
21
|
});
|
16
|
-
const
|
17
|
-
const _react = /*#__PURE__*/
|
22
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
23
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
18
24
|
const cardContext = /*#__PURE__*/ _react.createContext(undefined);
|
19
25
|
const cardContextDefaultValue = {
|
20
26
|
selectableA11yProps: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["CardContext.js"],"sourcesContent":["import * as React from 'react';\nconst cardContext = React.createContext(undefined);\n/**\n * @internal\n */ export const cardContextDefaultValue = {\n selectableA11yProps: {\n referenceId: undefined,\n setReferenceId () {\n /* Noop */ },\n referenceLabel: undefined,\n setReferenceLabel () {\n /* Noop */ }\n }\n};\n/**\n * @internal\n */ export const CardProvider = cardContext.Provider;\nvar _React_useContext;\n/**\n * @internal\n */ export const useCardContext_unstable = ()=>(_React_useContext = React.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;\n"],"names":["cardContextDefaultValue","CardProvider","useCardContext_unstable","cardContext","React","createContext","undefined","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","Provider","_React_useContext","useContext"],"mappings":";;;;;;;;;;;IAIiBA,uBAAuB
|
1
|
+
{"version":3,"sources":["CardContext.js"],"sourcesContent":["import * as React from 'react';\nconst cardContext = React.createContext(undefined);\n/**\n * @internal\n */ export const cardContextDefaultValue = {\n selectableA11yProps: {\n referenceId: undefined,\n setReferenceId () {\n /* Noop */ },\n referenceLabel: undefined,\n setReferenceLabel () {\n /* Noop */ }\n }\n};\n/**\n * @internal\n */ export const CardProvider = cardContext.Provider;\nvar _React_useContext;\n/**\n * @internal\n */ export const useCardContext_unstable = ()=>(_React_useContext = React.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;\n"],"names":["cardContextDefaultValue","CardProvider","useCardContext_unstable","cardContext","React","createContext","undefined","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","Provider","_React_useContext","useContext"],"mappings":";;;;;;;;;;;IAIiBA,uBAAuB;eAAvBA;;IAYAC,YAAY;eAAZA;;IAIAC,uBAAuB;eAAvBA;;;;iEApBM;AACvB,MAAMC,4BAAcC,OAAMC,aAAa,CAACC;AAG7B,MAAMN,0BAA0B;IACvCO,qBAAqB;QACjBC,aAAaF;QACbG;QACA,QAAQ,GAAG;QACXC,gBAAgBJ;QAChBK;QACA,QAAQ,GAAG;IACf;AACJ;AAGW,MAAMV,eAAeE,YAAYS,QAAQ;AACpD,IAAIC;AAGO,MAAMX,0BAA0B,IAAI,AAACW,CAAAA,oBAAoBT,OAAMU,UAAU,CAACX,YAAW,MAAO,QAAQU,sBAAsB,KAAK,IAAIA,oBAAoBb"}
|
@@ -2,10 +2,10 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
3
3
|
value: true
|
4
4
|
});
|
5
|
-
const
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
5
|
+
const _export_star = require("@swc/helpers/_/_export_star");
|
6
|
+
_export_star._(require("./Card"), exports);
|
7
|
+
_export_star._(require("./Card.types"), exports);
|
8
|
+
_export_star._(require("./CardContext"), exports);
|
9
|
+
_export_star._(require("./renderCard"), exports);
|
10
|
+
_export_star._(require("./useCard"), exports);
|
11
|
+
_export_star._(require("./useCardStyles.styles"), exports);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './CardContext';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles.styles';\n"],"names":[],"mappings":";;;;;
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './CardContext';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA"}
|
@@ -1,17 +1,26 @@
|
|
1
|
-
/** @jsxRuntime
|
1
|
+
/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ "use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
3
3
|
value: true
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "renderCard_unstable", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return renderCard_unstable;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const
|
11
|
-
const
|
11
|
+
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
12
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
13
|
+
const _CardContext = require("./CardContext");
|
12
14
|
const renderCard_unstable = (state, cardContextValue)=>{
|
13
|
-
(0,
|
14
|
-
return /*#__PURE__*/ (0,
|
15
|
-
|
16
|
-
|
15
|
+
(0, _reactutilities.assertSlots)(state);
|
16
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
|
17
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_CardContext.CardProvider, {
|
18
|
+
value: cardContextValue,
|
19
|
+
children: [
|
20
|
+
state.checkbox ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.checkbox, {}) : null,
|
21
|
+
state.floatingAction ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.floatingAction, {}) : null,
|
22
|
+
state.root.children
|
23
|
+
]
|
24
|
+
})
|
25
|
+
});
|
17
26
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["renderCard.js"],"sourcesContent":["/** @jsxRuntime
|
1
|
+
{"version":3,"sources":["renderCard.js"],"sourcesContent":["/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { CardProvider } from './CardContext';\n/**\n * Render the final JSX of Card.\n */ export const renderCard_unstable = (state, cardContextValue)=>{\n assertSlots(state);\n return /*#__PURE__*/ _jsx(state.root, {\n children: /*#__PURE__*/ _jsxs(CardProvider, {\n value: cardContextValue,\n children: [\n state.checkbox ? /*#__PURE__*/ _jsx(state.checkbox, {}) : null,\n state.floatingAction ? /*#__PURE__*/ _jsx(state.floatingAction, {}) : null,\n state.root.children\n ]\n })\n });\n};\n"],"names":["renderCard_unstable","state","cardContextValue","assertSlots","_jsx","root","children","_jsxs","CardProvider","value","checkbox","floatingAction"],"mappings":"AAAA,0BAA0B,GAAG,iDAAiD;;;;+BAK7DA;;;eAAAA;;;4BAL2G;gCAChG;6BACC;AAGlB,MAAMA,sBAAsB,CAACC,OAAOC;IAC3CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACH,MAAMI,IAAI,EAAE;QAClCC,UAAU,WAAW,GAAGC,IAAAA,gBAAK,EAACC,yBAAY,EAAE;YACxCC,OAAOP;YACPI,UAAU;gBACNL,MAAMS,QAAQ,GAAG,WAAW,GAAGN,IAAAA,eAAI,EAACH,MAAMS,QAAQ,EAAE,CAAC,KAAK;gBAC1DT,MAAMU,cAAc,GAAG,WAAW,GAAGP,IAAAA,eAAI,EAACH,MAAMU,cAAc,EAAE,CAAC,KAAK;gBACtEV,MAAMI,IAAI,CAACC,QAAQ;aACtB;QACL;IACJ;AACJ"}
|
@@ -4,14 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "useCard_unstable", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return useCard_unstable;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const _react = /*#__PURE__*/
|
11
|
-
const
|
12
|
-
const
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
13
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
14
|
+
const _reacttabster = require("@fluentui/react-tabster");
|
13
15
|
const _useCardSelectable = require("./useCardSelectable");
|
14
|
-
const
|
16
|
+
const _CardContext = require("./CardContext");
|
15
17
|
const focusMap = {
|
16
18
|
off: undefined,
|
17
19
|
'no-tab': 'limited-trap-focus',
|
@@ -25,7 +27,7 @@ const focusMap = {
|
|
25
27
|
* and control focus properties based on that.
|
26
28
|
*
|
27
29
|
* @param props - props from this instance of Card
|
28
|
-
*/ const useCardInteractive = ({ focusMode ='off'
|
30
|
+
*/ const useCardInteractive = ({ focusMode = 'off', ...props })=>{
|
29
31
|
const interactive = [
|
30
32
|
'onClick',
|
31
33
|
'onDoubleClick',
|
@@ -38,7 +40,7 @@ const focusMap = {
|
|
38
40
|
'onDragStart',
|
39
41
|
'onDragEnd'
|
40
42
|
].some((prop)=>props[prop]);
|
41
|
-
const groupperAttrs = (0,
|
43
|
+
const groupperAttrs = (0, _reacttabster.useFocusableGroup)({
|
42
44
|
tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]
|
43
45
|
});
|
44
46
|
const interactiveFocusAttributes = {
|
@@ -51,16 +53,16 @@ const focusMap = {
|
|
51
53
|
};
|
52
54
|
};
|
53
55
|
const useCard_unstable = (props, ref)=>{
|
54
|
-
const { appearance ='filled'
|
55
|
-
const [referenceId, setReferenceId] = _react.useState(
|
56
|
-
const [referenceLabel, setReferenceLabel] = _react.useState(
|
57
|
-
const cardBaseRef = (0,
|
58
|
-
const { selectable
|
56
|
+
const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = props;
|
57
|
+
const [referenceId, setReferenceId] = _react.useState(_CardContext.cardContextDefaultValue.selectableA11yProps.referenceId);
|
58
|
+
const [referenceLabel, setReferenceLabel] = _react.useState(_CardContext.cardContextDefaultValue.selectableA11yProps.referenceId);
|
59
|
+
const cardBaseRef = (0, _reacttabster.useFocusWithin)();
|
60
|
+
const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } = (0, _useCardSelectable.useCardSelectable)(props, {
|
59
61
|
referenceId,
|
60
62
|
referenceLabel
|
61
63
|
}, cardBaseRef);
|
62
|
-
const cardRef = (0,
|
63
|
-
const { interactive
|
64
|
+
const cardRef = (0, _reactutilities.useMergedRefs)(cardBaseRef, ref);
|
65
|
+
const { interactive, focusAttributes } = useCardInteractive(props);
|
64
66
|
return {
|
65
67
|
appearance,
|
66
68
|
orientation,
|
@@ -80,7 +82,7 @@ const useCard_unstable = (props, ref)=>{
|
|
80
82
|
floatingAction: 'div',
|
81
83
|
checkbox: 'input'
|
82
84
|
},
|
83
|
-
root:
|
85
|
+
root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
|
84
86
|
ref: cardRef,
|
85
87
|
role: 'group',
|
86
88
|
...focusAttributes,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useCard.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\nconst focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited'\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 */ const useCardInteractive = ({ focusMode ='off'
|
1
|
+
{"version":3,"sources":["useCard.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\nconst focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited'\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 */ const useCardInteractive = ({ focusMode = 'off', ...props })=>{\n const interactive = [\n 'onClick',\n 'onDoubleClick',\n 'onMouseUp',\n 'onMouseDown',\n 'onPointerUp',\n 'onPointerDown',\n 'onTouchStart',\n 'onTouchEnd',\n 'onDragStart',\n 'onDragEnd'\n ].some((prop)=>props[prop]);\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]\n });\n const interactiveFocusAttributes = {\n ...groupperAttrs,\n tabIndex: 0\n };\n return {\n interactive,\n focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes\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 */ export const useCard_unstable = (props, ref)=>{\n const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = props;\n const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n const cardBaseRef = useFocusWithin();\n const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } = useCardSelectable(props, {\n referenceId,\n referenceLabel\n }, cardBaseRef);\n const cardRef = useMergedRefs(cardBaseRef, ref);\n const { interactive, focusAttributes } = useCardInteractive(props);\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 components: {\n root: 'div',\n floatingAction: 'div',\n checkbox: 'input'\n },\n root: slot.always(getNativeElementProps('div', {\n ref: cardRef,\n role: 'group',\n ...focusAttributes,\n ...props,\n ...selectableCardProps\n }), {\n elementType: 'div'\n }),\n floatingAction: floatingActionSlot,\n checkbox: checkboxSlot\n };\n};\n"],"names":["useCard_unstable","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","useFocusableGroup","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","ref","appearance","orientation","size","referenceId","setReferenceId","React","useState","cardContextDefaultValue","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","useFocusWithin","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","useCardSelectable","cardRef","useMergedRefs","components","root","floatingAction","checkbox","slot","always","getNativeElementProps","role","elementType"],"mappings":";;;;+BAmDiBA;;;eAAAA;;;;iEAnDM;gCACoC;8BACT;mCAChB;6BACM;AACxC,MAAMC,WAAW;IACbC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AAChB;AACA;;;;;;;CAOC,GAAG,MAAMC,qBAAqB,CAAC,EAAEC,YAAY,KAAK,EAAE,GAAGC,OAAO;IAC3D,MAAMC,cAAc;QAChB;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH,CAACC,IAAI,CAAC,CAACC,OAAOH,KAAK,CAACG,KAAK;IAC1B,MAAMC,gBAAgBC,IAAAA,+BAAiB,EAAC;QACpCC,aAAaX,QAAQ,CAACM,cAAc,WAAWF,UAAU;IAC7D;IACA,MAAMQ,6BAA6B;QAC/B,GAAGH,aAAa;QAChBI,UAAU;IACd;IACA,OAAO;QACHP;QACAQ,iBAAiBV,cAAc,QAAQ,OAAOQ;IAClD;AACJ;AASW,MAAMb,mBAAmB,CAACM,OAAOU;IACxC,MAAM,EAAEC,aAAa,QAAQ,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGb;IAC7E,MAAM,CAACc,aAAaC,eAAe,GAAGC,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAC5G,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGL,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAClH,MAAMQ,cAAcC,IAAAA,4BAAc;IAClC,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,GAAGC,IAAAA,oCAAiB,EAAC9B,OAAO;QAC5Hc;QACAM;IACJ,GAAGE;IACH,MAAMS,UAAUC,IAAAA,6BAAa,EAACV,aAAaZ;IAC3C,MAAM,EAAET,WAAW,EAAEQ,eAAe,EAAE,GAAGX,mBAAmBE;IAC5D,OAAO;QACHW;QACAC;QACAC;QACAZ;QACAuB;QACAG;QACAF;QACAN,qBAAqB;YACjBJ;YACAD;YACAM;YACAC;QACJ;QACAY,YAAY;YACRC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACd;QACAF,MAAMG,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3C7B,KAAKqB;YACLS,MAAM;YACN,GAAG/B,eAAe;YAClB,GAAGT,KAAK;YACR,GAAG0B,mBAAmB;QAC1B,IAAI;YACAe,aAAa;QACjB;QACAN,gBAAgBN;QAChBO,UAAUR;IACd;AACJ"}
|
@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "useCardContextValue", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return useCardContextValue;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
function useCardContextValue({ selectableA11yProps
|
11
|
+
function useCardContextValue({ selectableA11yProps }) {
|
10
12
|
return {
|
11
13
|
selectableA11yProps
|
12
14
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useCardContextValue.js"],"sourcesContent":["export function useCardContextValue({ selectableA11yProps
|
1
|
+
{"version":3,"sources":["useCardContextValue.js"],"sourcesContent":["export function useCardContextValue({ selectableA11yProps }) {\n return {\n selectableA11yProps\n };\n}\n"],"names":["useCardContextValue","selectableA11yProps"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,oBAAoB,EAAEC,mBAAmB,EAAE;IACvD,OAAO;QACHA;IACJ;AACJ"}
|
@@ -4,16 +4,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "useCardSelectable", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return useCardSelectable;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const _react = /*#__PURE__*/
|
11
|
-
const
|
12
|
-
const
|
13
|
-
const
|
14
|
-
const useCardSelectable = (props, { referenceLabel
|
15
|
-
const { checkbox ={}
|
16
|
-
const { findAllFocusable
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
13
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
14
|
+
const _keyboardkeys = require("@fluentui/keyboard-keys");
|
15
|
+
const _reacttabster = require("@fluentui/react-tabster");
|
16
|
+
const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{
|
17
|
+
const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;
|
18
|
+
const { findAllFocusable } = (0, _reacttabster.useFocusFinders)();
|
17
19
|
const checkboxRef = _react.useRef(null);
|
18
20
|
const isSelectable = [
|
19
21
|
selected,
|
@@ -23,13 +25,14 @@ const useCardSelectable = (props, { referenceLabel , referenceId }, cardRef)=>{
|
|
23
25
|
const [isCardSelected, setIsCardSelected] = _react.useState(false);
|
24
26
|
const [isSelectFocused, setIsSelectFocused] = _react.useState(false);
|
25
27
|
const shouldRestrictTriggerAction = _react.useCallback((event)=>{
|
28
|
+
var _checkboxRef;
|
26
29
|
if (!cardRef.current) {
|
27
30
|
return false;
|
28
31
|
}
|
29
32
|
const focusableElements = findAllFocusable(cardRef.current);
|
30
33
|
const target = event.target;
|
31
34
|
const isElementInFocusableGroup = focusableElements.some((element)=>element.contains(target));
|
32
|
-
const isCheckboxSlot = (checkboxRef === null ||
|
35
|
+
const isCheckboxSlot = ((_checkboxRef = checkboxRef) === null || _checkboxRef === void 0 ? void 0 : _checkboxRef.current) === target;
|
33
36
|
return isElementInFocusableGroup && !isCheckboxSlot;
|
34
37
|
}, [
|
35
38
|
cardRef,
|
@@ -53,7 +56,7 @@ const useCardSelectable = (props, { referenceLabel , referenceId }, cardRef)=>{
|
|
53
56
|
]);
|
54
57
|
const onKeyDownHandler = _react.useCallback((event)=>{
|
55
58
|
if ([
|
56
|
-
|
59
|
+
_keyboardkeys.Enter
|
57
60
|
].includes(event.key)) {
|
58
61
|
event.preventDefault();
|
59
62
|
onChangeHandler(event);
|
@@ -71,7 +74,7 @@ const useCardSelectable = (props, { referenceLabel , referenceId }, cardRef)=>{
|
|
71
74
|
} else if (referenceLabel) {
|
72
75
|
selectableCheckboxProps['aria-label'] = referenceLabel;
|
73
76
|
}
|
74
|
-
return
|
77
|
+
return _reactutilities.slot.optional(checkbox, {
|
75
78
|
defaultProps: {
|
76
79
|
ref: checkboxRef,
|
77
80
|
type: 'checkbox',
|
@@ -96,7 +99,7 @@ const useCardSelectable = (props, { referenceLabel , referenceId }, cardRef)=>{
|
|
96
99
|
if (!floatingAction) {
|
97
100
|
return;
|
98
101
|
}
|
99
|
-
return
|
102
|
+
return _reactutilities.slot.optional(floatingAction, {
|
100
103
|
defaultProps: {
|
101
104
|
ref: checkboxRef
|
102
105
|
},
|
@@ -110,8 +113,8 @@ const useCardSelectable = (props, { referenceLabel , referenceId }, cardRef)=>{
|
|
110
113
|
return null;
|
111
114
|
}
|
112
115
|
return {
|
113
|
-
onClick: (0,
|
114
|
-
onKeyDown: (0,
|
116
|
+
onClick: (0, _reactutilities.mergeCallbacks)(onClick, onChangeHandler),
|
117
|
+
onKeyDown: (0, _reactutilities.mergeCallbacks)(onKeyDown, onKeyDownHandler)
|
115
118
|
};
|
116
119
|
}, [
|
117
120
|
isSelectable,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useCardSelectable.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, slot } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useFocusFinders } from '@fluentui/react-tabster';\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 */ export const useCardSelectable = (props, { referenceLabel
|
1
|
+
{"version":3,"sources":["useCardSelectable.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, slot } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useFocusFinders } from '@fluentui/react-tabster';\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 */ export const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{\n const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;\n const { findAllFocusable } = useFocusFinders();\n const checkboxRef = React.useRef(null);\n const isSelectable = [\n selected,\n defaultSelected,\n onSelectionChange\n ].some((prop)=>typeof prop !== 'undefined');\n const [isCardSelected, setIsCardSelected] = React.useState(false);\n const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n const shouldRestrictTriggerAction = React.useCallback((event)=>{\n var _checkboxRef;\n if (!cardRef.current) {\n return false;\n }\n const focusableElements = findAllFocusable(cardRef.current);\n const target = event.target;\n const isElementInFocusableGroup = focusableElements.some((element)=>element.contains(target));\n const isCheckboxSlot = ((_checkboxRef = checkboxRef) === null || _checkboxRef === void 0 ? void 0 : _checkboxRef.current) === target;\n return isElementInFocusableGroup && !isCheckboxSlot;\n }, [\n cardRef,\n findAllFocusable\n ]);\n const onChangeHandler = React.useCallback((event)=>{\n if (shouldRestrictTriggerAction(event)) {\n return;\n }\n const newCheckedValue = !isCardSelected;\n setIsCardSelected(newCheckedValue);\n if (onSelectionChange) {\n onSelectionChange(event, {\n selected: newCheckedValue\n });\n }\n }, [\n onSelectionChange,\n isCardSelected,\n shouldRestrictTriggerAction\n ]);\n const onKeyDownHandler = React.useCallback((event)=>{\n if ([\n Enter\n ].includes(event.key)) {\n event.preventDefault();\n onChangeHandler(event);\n }\n }, [\n onChangeHandler\n ]);\n const checkboxSlot = React.useMemo(()=>{\n if (!isSelectable || floatingAction) {\n return;\n }\n const selectableCheckboxProps = {};\n if (referenceId) {\n selectableCheckboxProps['aria-labelledby'] = referenceId;\n } else if (referenceLabel) {\n selectableCheckboxProps['aria-label'] = referenceLabel;\n }\n return slot.optional(checkbox, {\n defaultProps: {\n ref: checkboxRef,\n type: 'checkbox',\n checked: isCardSelected,\n onChange: (event)=>onChangeHandler(event),\n onFocus: ()=>setIsSelectFocused(true),\n onBlur: ()=>setIsSelectFocused(false),\n ...selectableCheckboxProps\n },\n elementType: 'input'\n });\n }, [\n checkbox,\n floatingAction,\n isCardSelected,\n isSelectable,\n onChangeHandler,\n referenceId,\n referenceLabel\n ]);\n const floatingActionSlot = React.useMemo(()=>{\n if (!floatingAction) {\n return;\n }\n return slot.optional(floatingAction, {\n defaultProps: {\n ref: checkboxRef\n },\n elementType: 'div'\n });\n }, [\n floatingAction\n ]);\n const selectableCardProps = React.useMemo(()=>{\n if (!isSelectable) {\n return null;\n }\n return {\n onClick: mergeCallbacks(onClick, onChangeHandler),\n onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)\n };\n }, [\n isSelectable,\n onChangeHandler,\n onClick,\n onKeyDown,\n onKeyDownHandler\n ]);\n React.useEffect(()=>setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [\n defaultSelected,\n selected,\n setIsCardSelected\n ]);\n return {\n selected: isCardSelected,\n selectable: isSelectable,\n selectFocused: isSelectFocused,\n selectableCardProps,\n checkboxSlot,\n floatingActionSlot\n };\n};\n"],"names":["useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","useFocusFinders","checkboxRef","React","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","_checkboxRef","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","Enter","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","slot","optional","defaultProps","ref","type","checked","onChange","onFocus","onBlur","elementType","floatingActionSlot","selectableCardProps","mergeCallbacks","useEffect","Boolean","selectable","selectFocused"],"mappings":";;;;+BAeiBA;;;eAAAA;;;;iEAfM;gCACc;8BACf;8BACU;AAYrB,MAAMA,oBAAoB,CAACC,OAAO,EAAEC,cAAc,EAAEC,WAAW,EAAE,EAAEC;IAC1E,MAAM,EAAEC,WAAW,CAAC,CAAC,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,iBAAiB,EAAEC,cAAc,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGV;IAC5G,MAAM,EAAEW,gBAAgB,EAAE,GAAGC,IAAAA,6BAAe;IAC5C,MAAMC,cAAcC,OAAMC,MAAM,CAAC;IACjC,MAAMC,eAAe;QACjBX;QACAC;QACAC;KACH,CAACU,IAAI,CAAC,CAACC,OAAO,OAAOA,SAAS;IAC/B,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGN,OAAMO,QAAQ,CAAC;IAC3D,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGT,OAAMO,QAAQ,CAAC;IAC7D,MAAMG,8BAA8BV,OAAMW,WAAW,CAAC,CAACC;QACnD,IAAIC;QACJ,IAAI,CAACxB,QAAQyB,OAAO,EAAE;YAClB,OAAO;QACX;QACA,MAAMC,oBAAoBlB,iBAAiBR,QAAQyB,OAAO;QAC1D,MAAME,SAASJ,MAAMI,MAAM;QAC3B,MAAMC,4BAA4BF,kBAAkBZ,IAAI,CAAC,CAACe,UAAUA,QAAQC,QAAQ,CAACH;QACrF,MAAMI,iBAAiB,AAAC,CAAA,AAACP,CAAAA,eAAed,WAAU,MAAO,QAAQc,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaC,OAAO,AAAD,MAAOE;QAC9H,OAAOC,6BAA6B,CAACG;IACzC,GAAG;QACC/B;QACAQ;KACH;IACD,MAAMwB,kBAAkBrB,OAAMW,WAAW,CAAC,CAACC;QACvC,IAAIF,4BAA4BE,QAAQ;YACpC;QACJ;QACA,MAAMU,kBAAkB,CAACjB;QACzBC,kBAAkBgB;QAClB,IAAI7B,mBAAmB;YACnBA,kBAAkBmB,OAAO;gBACrBrB,UAAU+B;YACd;QACJ;IACJ,GAAG;QACC7B;QACAY;QACAK;KACH;IACD,MAAMa,mBAAmBvB,OAAMW,WAAW,CAAC,CAACC;QACxC,IAAI;YACAY,mBAAK;SACR,CAACC,QAAQ,CAACb,MAAMc,GAAG,GAAG;YACnBd,MAAMe,cAAc;YACpBN,gBAAgBT;QACpB;IACJ,GAAG;QACCS;KACH;IACD,MAAMO,eAAe5B,OAAM6B,OAAO,CAAC;QAC/B,IAAI,CAAC3B,gBAAgBR,gBAAgB;YACjC;QACJ;QACA,MAAMoC,0BAA0B,CAAC;QACjC,IAAI1C,aAAa;YACb0C,uBAAuB,CAAC,kBAAkB,GAAG1C;QACjD,OAAO,IAAID,gBAAgB;YACvB2C,uBAAuB,CAAC,aAAa,GAAG3C;QAC5C;QACA,OAAO4C,oBAAI,CAACC,QAAQ,CAAC1C,UAAU;YAC3B2C,cAAc;gBACVC,KAAKnC;gBACLoC,MAAM;gBACNC,SAAS/B;gBACTgC,UAAU,CAACzB,QAAQS,gBAAgBT;gBACnC0B,SAAS,IAAI7B,mBAAmB;gBAChC8B,QAAQ,IAAI9B,mBAAmB;gBAC/B,GAAGqB,uBAAuB;YAC9B;YACAU,aAAa;QACjB;IACJ,GAAG;QACClD;QACAI;QACAW;QACAH;QACAmB;QACAjC;QACAD;KACH;IACD,MAAMsD,qBAAqBzC,OAAM6B,OAAO,CAAC;QACrC,IAAI,CAACnC,gBAAgB;YACjB;QACJ;QACA,OAAOqC,oBAAI,CAACC,QAAQ,CAACtC,gBAAgB;YACjCuC,cAAc;gBACVC,KAAKnC;YACT;YACAyC,aAAa;QACjB;IACJ,GAAG;QACC9C;KACH;IACD,MAAMgD,sBAAsB1C,OAAM6B,OAAO,CAAC;QACtC,IAAI,CAAC3B,cAAc;YACf,OAAO;QACX;QACA,OAAO;YACHP,SAASgD,IAAAA,8BAAc,EAAChD,SAAS0B;YACjCzB,WAAW+C,IAAAA,8BAAc,EAAC/C,WAAW2B;QACzC;IACJ,GAAG;QACCrB;QACAmB;QACA1B;QACAC;QACA2B;KACH;IACDvB,OAAM4C,SAAS,CAAC,IAAItC,kBAAkBuC,QAAQrD,oBAAoB,QAAQA,oBAAoB,KAAK,IAAIA,kBAAkBD,YAAY;QACjIC;QACAD;QACAe;KACH;IACD,OAAO;QACHf,UAAUc;QACVyC,YAAY5C;QACZ6C,eAAevC;QACfkC;QACAd;QACAa;IACJ;AACJ"}
|
@@ -9,14 +9,20 @@ function _export(target, all) {
|
|
9
9
|
});
|
10
10
|
}
|
11
11
|
_export(exports, {
|
12
|
-
cardClassNames: ()
|
13
|
-
|
14
|
-
|
12
|
+
cardClassNames: function() {
|
13
|
+
return cardClassNames;
|
14
|
+
},
|
15
|
+
cardCSSVars: function() {
|
16
|
+
return cardCSSVars;
|
17
|
+
},
|
18
|
+
useCardStyles_unstable: function() {
|
19
|
+
return useCardStyles_unstable;
|
20
|
+
}
|
15
21
|
});
|
16
|
-
const
|
22
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
17
23
|
const _react = require("@griffel/react");
|
18
|
-
const
|
19
|
-
const _react1 = /*#__PURE__*/
|
24
|
+
const _reacttheme = require("@fluentui/react-theme");
|
25
|
+
const _react1 = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
20
26
|
const cardClassNames = {
|
21
27
|
root: 'fui-Card',
|
22
28
|
floatingAction: 'fui-Card__floatingAction',
|
@@ -28,10 +34,10 @@ const cardCSSVars = {
|
|
28
34
|
};
|
29
35
|
const focusOutlineStyle = {
|
30
36
|
outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
|
31
|
-
outlineWidth:
|
37
|
+
outlineWidth: _reacttheme.tokens.strokeWidthThick,
|
32
38
|
outlineOffset: '-2px'
|
33
39
|
};
|
34
|
-
const useStyles = /*#__PURE__*/ (0, _react
|
40
|
+
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
35
41
|
root: {
|
36
42
|
B68tc82: "f1p9o1ba",
|
37
43
|
Bmxbyg5: "f1sil6mw",
|