@fluentui/react-card 9.7.0 → 9.7.2
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.md +31 -2
- package/dist/index.d.cts +485 -0
- package/lib/Card.js +1 -1
- package/lib/Card.js.map +1 -1
- package/lib/CardFooter.js +1 -1
- package/lib/CardFooter.js.map +1 -1
- package/lib/CardHeader.js +1 -1
- package/lib/CardHeader.js.map +1 -1
- package/lib/CardPreview.js +1 -1
- package/lib/CardPreview.js.map +1 -1
- package/lib/components/Card/Card.js +6 -6
- package/lib/components/Card/Card.js.map +1 -1
- package/lib/components/Card/CardContext.js +1 -1
- package/lib/components/Card/index.js +5 -5
- package/lib/components/Card/index.js.map +1 -1
- package/lib/components/Card/renderCard.js +2 -2
- package/lib/components/Card/renderCard.js.map +1 -1
- package/lib/components/Card/useCard.js +5 -5
- package/lib/components/Card/useCard.js.map +1 -1
- package/lib/components/Card/useCardSelectable.js +3 -3
- package/lib/components/Card/useCardStyles.styles.js +8 -10
- package/lib/components/Card/useCardStyles.styles.js.map +1 -1
- package/lib/components/Card/useCardStyles.styles.raw.js +8 -9
- package/lib/components/Card/useCardStyles.styles.raw.js.map +1 -1
- package/lib/components/CardFooter/CardFooter.js +5 -5
- package/lib/components/CardFooter/CardFooter.js.map +1 -1
- package/lib/components/CardFooter/index.js +4 -4
- package/lib/components/CardFooter/index.js.map +1 -1
- package/lib/components/CardFooter/renderCardFooter.js +1 -1
- package/lib/components/CardFooter/useCardFooter.js +1 -1
- package/lib/components/CardFooter/useCardFooterStyles.styles.js +1 -3
- package/lib/components/CardFooter/useCardFooterStyles.styles.js.map +1 -1
- package/lib/components/CardFooter/useCardFooterStyles.styles.raw.js +1 -2
- package/lib/components/CardFooter/useCardFooterStyles.styles.raw.js.map +1 -1
- package/lib/components/CardHeader/CardHeader.js +5 -5
- package/lib/components/CardHeader/CardHeader.js.map +1 -1
- package/lib/components/CardHeader/index.js +4 -4
- package/lib/components/CardHeader/index.js.map +1 -1
- package/lib/components/CardHeader/renderCardHeader.js +1 -1
- package/lib/components/CardHeader/useCardHeader.js +3 -3
- package/lib/components/CardHeader/useCardHeader.js.map +1 -1
- package/lib/components/CardHeader/useCardHeaderStyles.styles.js +1 -3
- package/lib/components/CardHeader/useCardHeaderStyles.styles.js.map +1 -1
- package/lib/components/CardHeader/useCardHeaderStyles.styles.raw.js +1 -2
- package/lib/components/CardHeader/useCardHeaderStyles.styles.raw.js.map +1 -1
- package/lib/components/CardPreview/CardPreview.js +5 -5
- package/lib/components/CardPreview/CardPreview.js.map +1 -1
- package/lib/components/CardPreview/index.js +4 -4
- package/lib/components/CardPreview/index.js.map +1 -1
- package/lib/components/CardPreview/renderCardPreview.js +1 -1
- package/lib/components/CardPreview/useCardPreview.js +3 -3
- package/lib/components/CardPreview/useCardPreview.js.map +1 -1
- package/lib/components/CardPreview/useCardPreviewStyles.styles.js +1 -3
- package/lib/components/CardPreview/useCardPreviewStyles.styles.js.map +1 -1
- package/lib/components/CardPreview/useCardPreviewStyles.styles.raw.js +1 -2
- package/lib/components/CardPreview/useCardPreviewStyles.styles.raw.js.map +1 -1
- package/lib/index.js +5 -5
- package/lib/index.js.map +1 -1
- package/lib-commonjs/{Card.js → Card.cjs} +1 -1
- package/lib-commonjs/{Card.js.map → Card.cjs.map} +1 -1
- package/lib-commonjs/{CardFooter.js → CardFooter.cjs} +1 -1
- package/lib-commonjs/{CardFooter.js.map → CardFooter.cjs.map} +1 -1
- package/lib-commonjs/{CardHeader.js → CardHeader.cjs} +1 -1
- package/lib-commonjs/{CardHeader.js.map → CardHeader.cjs.map} +1 -1
- package/lib-commonjs/{CardPreview.js → CardPreview.cjs} +1 -1
- package/lib-commonjs/{CardPreview.js.map → CardPreview.cjs.map} +1 -1
- package/lib-commonjs/components/Card/{Card.js → Card.cjs} +4 -4
- package/lib-commonjs/components/Card/{Card.js.map → Card.cjs.map} +1 -1
- package/lib-commonjs/components/Card/{index.js → index.cjs} +5 -5
- package/lib-commonjs/components/Card/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/Card/{renderCard.js → renderCard.cjs} +1 -1
- package/lib-commonjs/components/Card/{renderCard.js.map → renderCard.cjs.map} +1 -1
- package/lib-commonjs/components/Card/{useCard.js → useCard.cjs} +2 -2
- package/lib-commonjs/components/Card/{useCard.js.map → useCard.cjs.map} +1 -1
- package/lib-commonjs/components/Card/{useCardStyles.styles.js → useCardStyles.styles.cjs} +0 -1
- package/lib-commonjs/components/Card/useCardStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/Card/{useCardStyles.styles.raw.js → useCardStyles.styles.raw.cjs} +3 -4
- package/lib-commonjs/components/Card/useCardStyles.styles.raw.cjs.map +1 -0
- package/lib-commonjs/components/CardFooter/{CardFooter.js → CardFooter.cjs} +3 -3
- package/lib-commonjs/components/CardFooter/{CardFooter.js.map → CardFooter.cjs.map} +1 -1
- package/lib-commonjs/components/CardFooter/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/CardFooter/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/CardFooter/{useCardFooterStyles.styles.js → useCardFooterStyles.styles.cjs} +0 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/CardFooter/{useCardFooterStyles.styles.raw.js → useCardFooterStyles.styles.raw.cjs} +0 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.raw.cjs.map +1 -0
- package/lib-commonjs/components/CardHeader/{CardHeader.js → CardHeader.cjs} +3 -3
- package/lib-commonjs/components/CardHeader/{CardHeader.js.map → CardHeader.cjs.map} +1 -1
- package/lib-commonjs/components/CardHeader/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/CardHeader/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/CardHeader/{useCardHeader.js → useCardHeader.cjs} +1 -1
- package/lib-commonjs/components/CardHeader/{useCardHeader.js.map → useCardHeader.cjs.map} +1 -1
- package/lib-commonjs/components/CardHeader/{useCardHeaderStyles.styles.js → useCardHeaderStyles.styles.cjs} +0 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/CardHeader/{useCardHeaderStyles.styles.raw.js → useCardHeaderStyles.styles.raw.cjs} +0 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.raw.cjs.map +1 -0
- package/lib-commonjs/components/CardPreview/{CardPreview.js → CardPreview.cjs} +3 -3
- package/lib-commonjs/components/CardPreview/{CardPreview.js.map → CardPreview.cjs.map} +1 -1
- package/lib-commonjs/components/CardPreview/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/CardPreview/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/CardPreview/{useCardPreview.js → useCardPreview.cjs} +1 -1
- package/lib-commonjs/components/CardPreview/{useCardPreview.js.map → useCardPreview.cjs.map} +1 -1
- package/lib-commonjs/components/CardPreview/{useCardPreviewStyles.styles.js → useCardPreviewStyles.styles.cjs} +0 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/CardPreview/{useCardPreviewStyles.styles.raw.js → useCardPreviewStyles.styles.raw.cjs} +0 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.raw.cjs.map +1 -0
- package/lib-commonjs/{index.js → index.cjs} +4 -4
- package/lib-commonjs/{index.js.map → index.cjs.map} +1 -1
- package/package.json +20 -15
- package/lib-commonjs/components/Card/useCardStyles.styles.js.map +0 -1
- package/lib-commonjs/components/Card/useCardStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.js.map +0 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.js.map +0 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.js.map +0 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.raw.js.map +0 -1
- /package/lib-commonjs/components/Card/{Card.types.js → Card.types.cjs} +0 -0
- /package/lib-commonjs/components/Card/{Card.types.js.map → Card.types.cjs.map} +0 -0
- /package/lib-commonjs/components/Card/{CardContext.js → CardContext.cjs} +0 -0
- /package/lib-commonjs/components/Card/{CardContext.js.map → CardContext.cjs.map} +0 -0
- /package/lib-commonjs/components/Card/{useCardContextValue.js → useCardContextValue.cjs} +0 -0
- /package/lib-commonjs/components/Card/{useCardContextValue.js.map → useCardContextValue.cjs.map} +0 -0
- /package/lib-commonjs/components/Card/{useCardSelectable.js → useCardSelectable.cjs} +0 -0
- /package/lib-commonjs/components/Card/{useCardSelectable.js.map → useCardSelectable.cjs.map} +0 -0
- /package/lib-commonjs/components/CardFooter/{CardFooter.types.js → CardFooter.types.cjs} +0 -0
- /package/lib-commonjs/components/CardFooter/{CardFooter.types.js.map → CardFooter.types.cjs.map} +0 -0
- /package/lib-commonjs/components/CardFooter/{renderCardFooter.js → renderCardFooter.cjs} +0 -0
- /package/lib-commonjs/components/CardFooter/{renderCardFooter.js.map → renderCardFooter.cjs.map} +0 -0
- /package/lib-commonjs/components/CardFooter/{useCardFooter.js → useCardFooter.cjs} +0 -0
- /package/lib-commonjs/components/CardFooter/{useCardFooter.js.map → useCardFooter.cjs.map} +0 -0
- /package/lib-commonjs/components/CardHeader/{CardHeader.types.js → CardHeader.types.cjs} +0 -0
- /package/lib-commonjs/components/CardHeader/{CardHeader.types.js.map → CardHeader.types.cjs.map} +0 -0
- /package/lib-commonjs/components/CardHeader/{renderCardHeader.js → renderCardHeader.cjs} +0 -0
- /package/lib-commonjs/components/CardHeader/{renderCardHeader.js.map → renderCardHeader.cjs.map} +0 -0
- /package/lib-commonjs/components/CardPreview/{CardPreview.types.js → CardPreview.types.cjs} +0 -0
- /package/lib-commonjs/components/CardPreview/{CardPreview.types.js.map → CardPreview.types.cjs.map} +0 -0
- /package/lib-commonjs/components/CardPreview/{renderCardPreview.js → renderCardPreview.cjs} +0 -0
- /package/lib-commonjs/components/CardPreview/{renderCardPreview.js.map → renderCardPreview.cjs.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardHeader_unstable } from './useCardHeader';\nimport { renderCardHeader_unstable } from './renderCardHeader';\nimport { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\nimport type { CardHeaderProps } from './CardHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Component to render an image, text and an action in a Card component.\n */\nexport const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef((props, ref) => {\n const state = useCardHeader_unstable(props, ref);\n\n useCardHeaderStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardHeaderStyles_unstable')(state);\n\n return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"names":["React","useCardHeader_unstable","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCustomStyleHook_unstable","CardHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardHeader_unstable } from './useCardHeader';\nimport { renderCardHeader_unstable } from './renderCardHeader';\nimport { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\nimport type { CardHeaderProps } from './CardHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Component to render an image, text and an action in a Card component.\n */\nexport const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef((props, ref) => {\n const state = useCardHeader_unstable(props, ref);\n\n useCardHeaderStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardHeaderStyles_unstable')(state);\n\n return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"names":["React","useCardHeader_unstable","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCustomStyleHook_unstable","CardHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,kCAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { CardHeader } from
|
|
2
|
-
export { renderCardHeader_unstable } from
|
|
3
|
-
export { useCardHeader_unstable, useCardHeaderBase_unstable } from
|
|
4
|
-
export { cardHeaderCSSVars, cardHeaderClassNames, useCardHeaderStyles_unstable } from
|
|
1
|
+
export { CardHeader } from "./CardHeader.js";
|
|
2
|
+
export { renderCardHeader_unstable } from "./renderCardHeader.js";
|
|
3
|
+
export { useCardHeader_unstable, useCardHeaderBase_unstable } from "./useCardHeader.js";
|
|
4
|
+
export { cardHeaderCSSVars, cardHeaderClassNames, useCardHeaderStyles_unstable } from "./useCardHeaderStyles.styles.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CardHeader/index.ts"],"sourcesContent":["export { CardHeader } from './CardHeader';\nexport type {\n CardHeaderBaseProps,\n CardHeaderBaseState,\n CardHeaderProps,\n CardHeaderSlots,\n CardHeaderState,\n} from './CardHeader.types';\nexport { renderCardHeader_unstable } from './renderCardHeader';\nexport { useCardHeader_unstable, useCardHeaderBase_unstable } from './useCardHeader';\nexport { cardHeaderCSSVars, cardHeaderClassNames, useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\n"],"names":["CardHeader","renderCardHeader_unstable","useCardHeader_unstable","useCardHeaderBase_unstable","cardHeaderCSSVars","cardHeaderClassNames","useCardHeaderStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/components/CardHeader/index.ts"],"sourcesContent":["export { CardHeader } from './CardHeader';\nexport type {\n CardHeaderBaseProps,\n CardHeaderBaseState,\n CardHeaderProps,\n CardHeaderSlots,\n CardHeaderState,\n} from './CardHeader.types';\nexport { renderCardHeader_unstable } from './renderCardHeader';\nexport { useCardHeader_unstable, useCardHeaderBase_unstable } from './useCardHeader';\nexport { cardHeaderCSSVars, cardHeaderClassNames, useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\n"],"names":["CardHeader","renderCardHeader_unstable","useCardHeader_unstable","useCardHeaderBase_unstable","cardHeaderCSSVars","cardHeaderClassNames","useCardHeaderStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,kBAAe;AAQ1C,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,sBAAsB,EAAEC,0BAA0B,QAAQ,qBAAkB;AACrF,SAASC,iBAAiB,EAAEC,oBAAoB,EAAEC,4BAA4B,QAAQ,kCAA+B"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
|
-
import { assertSlots } from
|
|
2
|
+
import { assertSlots } from "@fluentui/react-utilities";
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of CardHeader.
|
|
5
5
|
*/ export const renderCardHeader_unstable = (state)=>{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
3
|
-
import { getIntrinsicElementProps, useId, slot } from
|
|
4
|
-
import { useCardContext_unstable } from
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { getIntrinsicElementProps, useId, slot } from "@fluentui/react-utilities";
|
|
4
|
+
import { useCardContext_unstable } from "../Card/CardContext.js";
|
|
5
5
|
/**
|
|
6
6
|
* Finds the first child of CardHeader with an id prop.
|
|
7
7
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CardHeader/useCardHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { CardHeaderBaseProps, CardHeaderBaseState, CardHeaderProps, CardHeaderState } from './CardHeader.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\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 return useCardHeaderBase_unstable(props, ref);\n};\n\n/**\n * Base hook for CardHeader component, which manages state related to slots structure\n * and the card's selectable accessibility properties.\n * Note: CardHeader has no design props, so this is equivalent to useCardHeader_unstable.\n *\n * @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeaderBase_unstable = (\n props: CardHeaderBaseProps,\n ref: React.Ref<HTMLElement>,\n): CardHeaderBaseState => {\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('fui-CardHeader__header', referenceId);\n\n // eslint-disable-next-line react-hooks/refs\n const headerSlot = slot.optional(header, {\n renderByDefault: true,\n defaultProps: {\n ref: headerRef,\n // eslint-disable-next-line react-hooks/refs\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","getChildWithId","header","isReactElementWithIdProp","element","isValidElement","Boolean","props","id","Children","toArray","find","getReferenceId","headerId","childWithId","generatedId","useCardHeader_unstable","ref","useCardHeaderBase_unstable","image","description","action","selectableA11yProps","referenceId","setReferenceId","headerRef","useRef","hasChildId","headerSlot","optional","renderByDefault","defaultProps","current","undefined","elementType","useEffect","children","components","root","always"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,uBAAuB,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/components/CardHeader/useCardHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { CardHeaderBaseProps, CardHeaderBaseState, CardHeaderProps, CardHeaderState } from './CardHeader.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\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 return useCardHeaderBase_unstable(props, ref);\n};\n\n/**\n * Base hook for CardHeader component, which manages state related to slots structure\n * and the card's selectable accessibility properties.\n * Note: CardHeader has no design props, so this is equivalent to useCardHeader_unstable.\n *\n * @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeaderBase_unstable = (\n props: CardHeaderBaseProps,\n ref: React.Ref<HTMLElement>,\n): CardHeaderBaseState => {\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('fui-CardHeader__header', referenceId);\n\n // eslint-disable-next-line react-hooks/refs\n const headerSlot = slot.optional(header, {\n renderByDefault: true,\n defaultProps: {\n ref: headerRef,\n // eslint-disable-next-line react-hooks/refs\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","getChildWithId","header","isReactElementWithIdProp","element","isValidElement","Boolean","props","id","Children","toArray","find","getReferenceId","headerId","childWithId","generatedId","useCardHeader_unstable","ref","useCardHeaderBase_unstable","image","description","action","selectableA11yProps","referenceId","setReferenceId","headerRef","useRef","hasChildId","headerSlot","optional","renderByDefault","defaultProps","current","undefined","elementType","useEffect","children","components","root","always"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,uBAAuB,QAAQ,yBAAsB;AAE9D;;;;CAIC,GACD,SAASC,eAAeC,MAAuB;IAC7C,SAASC,yBAAyBC,OAAwB;QACxD,OAAOR,MAAMS,cAAc,CAAkBD,YAAYE,QAAQF,QAAQG,KAAK,CAACC,EAAE;IACnF;IAEA,OAAOZ,MAAMa,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,OAAOC,2BAA2BX,OAAOU;AAC3C,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMC,6BAA6B,CACxCX,OACAU;IAEA,MAAM,EAAEE,KAAK,EAAEjB,MAAM,EAAEkB,WAAW,EAAEC,MAAM,EAAE,GAAGd;IAE/C,MAAM,EACJe,qBAAqB,EAAEC,WAAW,EAAEC,cAAc,EAAE,EACrD,GAAGxB;IACJ,MAAMyB,YAAY7B,MAAM8B,MAAM,CAAiB;IAE/C,MAAMC,aAAa/B,MAAM8B,MAAM,CAAC;IAChC,MAAMX,cAAcjB,MAAM,0BAA0ByB;IAEpD,4CAA4C;IAC5C,MAAMK,aAAa7B,KAAK8B,QAAQ,CAAC3B,QAAQ;QACvC4B,iBAAiB;QACjBC,cAAc;YACZd,KAAKQ;YACL,4CAA4C;YAC5CjB,IAAI,CAACmB,WAAWK,OAAO,GAAGT,cAAcU;QAC1C;QACAC,aAAa;IACf;IACAtC,MAAMuC,SAAS,CAAC;YACyBV;QAAvC,MAAMZ,WAAW,CAACc,WAAWK,OAAO,IAAGP,qBAAAA,UAAUO,OAAO,cAAjBP,yCAAAA,mBAAmBjB,EAAE,GAAGyB;QAC/D,MAAMnB,cAAcb,eAAe2B,uBAAAA,iCAAAA,WAAYQ,QAAQ;QACvDT,WAAWK,OAAO,GAAG1B,QAAQQ;QAC7BU,eAAeZ,eAAeC,UAAUC,aAAaC;IACvD,GAAG;QAACA;QAAab;QAAQ0B;QAAYJ;KAAe;IACpD,OAAO;QACLa,YAAY;YAAEC,MAAM;YAAOnB,OAAO;YAAOjB,QAAQ;YAAOkB,aAAa;YAAOC,QAAQ;QAAM;QAE1FiB,MAAMvC,KAAKwC,MAAM,CACf1C,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FoB,KAAKA;YACL,GAAGV,KAAK;QACV,IACA;YAAE2B,aAAa;QAAM;QAEvBf,OAAOpB,KAAK8B,QAAQ,CAACV,OAAO;YAAEe,aAAa;QAAM;QACjDhC,QAAQ0B;QACRR,aAAarB,KAAK8B,QAAQ,CAACT,aAAa;YAAEc,aAAa;QAAM;QAC7Db,QAAQtB,KAAK8B,QAAQ,CAACR,QAAQ;YAAEa,aAAa;QAAM;IACrD;AACF,EAAE"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { __styles, mergeClasses, shorthands } from
|
|
3
|
+
import { __styles, mergeClasses, shorthands } from "@griffel/react";
|
|
4
4
|
/**
|
|
5
5
|
* Static CSS class names used internally for the component slots.
|
|
6
6
|
*/
|
|
@@ -96,8 +96,6 @@ const useStylesFlex = /*#__PURE__*/__styles({
|
|
|
96
96
|
* Apply styling to the CardHeader slots based on the state.
|
|
97
97
|
*/
|
|
98
98
|
export const useCardHeaderStyles_unstable = state => {
|
|
99
|
-
'use no memo';
|
|
100
|
-
|
|
101
99
|
const styles = useStyles();
|
|
102
100
|
const stylesGrid = useStylesGrid();
|
|
103
101
|
const stylesFlex = useStylesFlex();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","cardHeaderClassNames","root","image","header","description","action","cardHeaderCSSVars","cardHeaderGapVar","useStyles","Bkc6ea2","Bt984gj","mc9l5x","t21cq0","Frg6f3","rjrqlh","Boue1pl","Bhz1vi0","etxrgc","Bdua9ef","cbfxhg","d","m","useStylesGrid","t4k1zu","Br312pm","Ijaq50","useStylesFlex","Bh6795r","useCardHeaderStyles_unstable","state","styles","stylesGrid","stylesFlex","boxModelStyles","getSlotStyles","slotName","_state_slotName","className"],"sources":["useCardHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","cardHeaderClassNames","root","image","header","description","action","cardHeaderCSSVars","cardHeaderGapVar","useStyles","Bkc6ea2","Bt984gj","mc9l5x","t21cq0","Frg6f3","rjrqlh","Boue1pl","Bhz1vi0","etxrgc","Bdua9ef","cbfxhg","d","m","useStylesGrid","t4k1zu","Br312pm","Ijaq50","useStylesFlex","Bh6795r","useCardHeaderStyles_unstable","state","styles","stylesGrid","stylesFlex","boxModelStyles","getSlotStyles","slotName","_state_slotName","className"],"sources":["useCardHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from \"@griffel/react\";\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardHeaderClassNames = {\n root: 'fui-CardHeader',\n image: 'fui-CardHeader__image',\n header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action'\n};\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */ export const cardHeaderCSSVars = {\n cardHeaderGapVar: '--fui-CardHeader--gap'\n};\nconst useStyles = makeStyles({\n root: {\n [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n alignItems: 'center'\n },\n image: {\n display: 'inline-flex',\n marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`\n },\n header: {\n display: 'flex'\n },\n description: {\n display: 'flex'\n },\n action: {\n marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor'\n }\n }\n }\n});\nconst useStylesGrid = makeStyles({\n root: {\n display: 'grid',\n gridAutoColumns: 'min-content 1fr min-content'\n },\n image: {\n gridColumnStart: '1',\n gridRowStart: 'span 2'\n },\n header: {\n gridColumnStart: '2',\n gridRowStart: '1'\n },\n description: {\n gridColumnStart: '2',\n gridRowStart: '2'\n },\n action: {\n gridColumnStart: '3',\n gridRowStart: 'span 2'\n }\n});\nconst useStylesFlex = makeStyles({\n root: {\n display: 'flex'\n },\n header: {\n flexGrow: 1\n },\n image: {},\n description: {},\n action: {}\n});\n/**\n * Apply styling to the CardHeader slots based on the state.\n */ export const useCardHeaderStyles_unstable = (state)=>{\n const styles = useStyles();\n const stylesGrid = useStylesGrid();\n const stylesFlex = useStylesFlex();\n const boxModelStyles = state.description ? stylesGrid : stylesFlex;\n const getSlotStyles = (slotName)=>{\n var _state_slotName;\n return mergeClasses(cardHeaderClassNames[slotName], styles[slotName], boxModelStyles[slotName], (_state_slotName = state[slotName]) === null || _state_slotName === void 0 ? void 0 : _state_slotName.className);\n };\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = getSlotStyles('root');\n if (state.image) {\n // eslint-disable-next-line react-hooks/immutability\n state.image.className = getSlotStyles('image');\n }\n if (state.header) {\n // eslint-disable-next-line react-hooks/immutability\n state.header.className = getSlotStyles('header');\n }\n if (state.description) {\n // eslint-disable-next-line react-hooks/immutability\n state.description.className = getSlotStyles('description');\n }\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = getSlotStyles('action');\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE;AACA;AACA;AAAI,OAAO,MAAMC,oBAAoB,GAAG;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,uBAAuB;EAC9BC,MAAM,EAAE,wBAAwB;EAChCC,WAAW,EAAE,6BAA6B;EAC1CC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,iBAAiB,GAAG;EACjCC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,SAAS,gBAAGX,QAAA;EAAAI,IAAA;IAAAQ,OAAA;IAAAC,OAAA;EAAA;EAAAR,KAAA;IAAAS,MAAA;IAAAC,MAAA;EAAA;EAAAT,MAAA;IAAAQ,MAAA;EAAA;EAAAP,WAAA;IAAAO,MAAA;EAAA;EAAAN,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2BjB,CAAC;AACF,MAAMC,aAAa,gBAAGzB,QAAA;EAAAI,IAAA;IAAAU,MAAA;IAAAY,MAAA;EAAA;EAAArB,KAAA;IAAAsB,OAAA;IAAAC,MAAA;EAAA;EAAAtB,MAAA;IAAAqB,OAAA;IAAAC,MAAA;EAAA;EAAArB,WAAA;IAAAoB,OAAA;IAAAC,MAAA;EAAA;EAAApB,MAAA;IAAAmB,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAqBrB,CAAC;AACF,MAAMM,aAAa,gBAAG7B,QAAA;EAAAI,IAAA;IAAAU,MAAA;EAAA;EAAAR,MAAA;IAAAwB,OAAA;EAAA;EAAAzB,KAAA;EAAAE,WAAA;EAAAC,MAAA;AAAA;EAAAe,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMQ,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGtB,SAAS,CAAC,CAAC;EAC1B,MAAMuB,UAAU,GAAGT,aAAa,CAAC,CAAC;EAClC,MAAMU,UAAU,GAAGN,aAAa,CAAC,CAAC;EAClC,MAAMO,cAAc,GAAGJ,KAAK,CAACzB,WAAW,GAAG2B,UAAU,GAAGC,UAAU;EAClE,MAAME,aAAa,GAAIC,QAAQ,IAAG;IAC9B,IAAIC,eAAe;IACnB,OAAOtC,YAAY,CAACE,oBAAoB,CAACmC,QAAQ,CAAC,EAAEL,MAAM,CAACK,QAAQ,CAAC,EAAEF,cAAc,CAACE,QAAQ,CAAC,EAAE,CAACC,eAAe,GAAGP,KAAK,CAACM,QAAQ,CAAC,MAAM,IAAI,IAAIC,eAAe,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,eAAe,CAACC,SAAS,CAAC;EACpN,CAAC;EACD;EACAR,KAAK,CAAC5B,IAAI,CAACoC,SAAS,GAAGH,aAAa,CAAC,MAAM,CAAC;EAC5C,IAAIL,KAAK,CAAC3B,KAAK,EAAE;IACb;IACA2B,KAAK,CAAC3B,KAAK,CAACmC,SAAS,GAAGH,aAAa,CAAC,OAAO,CAAC;EAClD;EACA,IAAIL,KAAK,CAAC1B,MAAM,EAAE;IACd;IACA0B,KAAK,CAAC1B,MAAM,CAACkC,SAAS,GAAGH,aAAa,CAAC,QAAQ,CAAC;EACpD;EACA,IAAIL,KAAK,CAACzB,WAAW,EAAE;IACnB;IACAyB,KAAK,CAACzB,WAAW,CAACiC,SAAS,GAAGH,aAAa,CAAC,aAAa,CAAC;EAC9D;EACA,IAAIL,KAAK,CAACxB,MAAM,EAAE;IACd;IACAwB,KAAK,CAACxB,MAAM,CAACgC,SAAS,GAAGH,aAAa,CAAC,QAAQ,CAAC;EACpD;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { makeStyles, mergeClasses, shorthands } from
|
|
2
|
+
import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
|
|
3
3
|
/**
|
|
4
4
|
* Static CSS class names used internally for the component slots.
|
|
5
5
|
*/ export const cardHeaderClassNames = {
|
|
@@ -78,7 +78,6 @@ const useStylesFlex = makeStyles({
|
|
|
78
78
|
/**
|
|
79
79
|
* Apply styling to the CardHeader slots based on the state.
|
|
80
80
|
*/ export const useCardHeaderStyles_unstable = (state)=>{
|
|
81
|
-
'use no memo';
|
|
82
81
|
const styles = useStyles();
|
|
83
82
|
const stylesGrid = useStylesGrid();
|
|
84
83
|
const stylesFlex = useStylesFlex();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CardHeader/useCardHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {\n root: 'fui-CardHeader',\n image: 'fui-CardHeader__image',\n header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action',\n};\n\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */\nexport const cardHeaderCSSVars = {\n cardHeaderGapVar: '--fui-CardHeader--gap',\n};\n\nconst useStyles = makeStyles<keyof CardHeaderSlots>({\n root: {\n [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n alignItems: 'center',\n },\n image: {\n display: 'inline-flex',\n marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n },\n header: {\n display: 'flex',\n },\n description: {\n display: 'flex',\n },\n action: {\n marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor',\n },\n },\n },\n});\n\nconst useStylesGrid = makeStyles<keyof CardHeaderSlots>({\n root: {\n display: 'grid',\n gridAutoColumns: 'min-content 1fr min-content',\n },\n\n image: {\n gridColumnStart: '1',\n gridRowStart: 'span 2',\n },\n\n header: {\n gridColumnStart: '2',\n gridRowStart: '1',\n },\n\n description: {\n gridColumnStart: '2',\n gridRowStart: '2',\n },\n\n action: {\n gridColumnStart: '3',\n gridRowStart: 'span 2',\n },\n});\n\nconst useStylesFlex = makeStyles<keyof CardHeaderSlots>({\n root: {\n display: 'flex',\n },\n\n header: {\n flexGrow: 1,\n },\n\n image: {},\n description: {},\n action: {},\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state.\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/CardHeader/useCardHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {\n root: 'fui-CardHeader',\n image: 'fui-CardHeader__image',\n header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action',\n};\n\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */\nexport const cardHeaderCSSVars = {\n cardHeaderGapVar: '--fui-CardHeader--gap',\n};\n\nconst useStyles = makeStyles<keyof CardHeaderSlots>({\n root: {\n [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n alignItems: 'center',\n },\n image: {\n display: 'inline-flex',\n marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n },\n header: {\n display: 'flex',\n },\n description: {\n display: 'flex',\n },\n action: {\n marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor',\n },\n },\n },\n});\n\nconst useStylesGrid = makeStyles<keyof CardHeaderSlots>({\n root: {\n display: 'grid',\n gridAutoColumns: 'min-content 1fr min-content',\n },\n\n image: {\n gridColumnStart: '1',\n gridRowStart: 'span 2',\n },\n\n header: {\n gridColumnStart: '2',\n gridRowStart: '1',\n },\n\n description: {\n gridColumnStart: '2',\n gridRowStart: '2',\n },\n\n action: {\n gridColumnStart: '3',\n gridRowStart: 'span 2',\n },\n});\n\nconst useStylesFlex = makeStyles<keyof CardHeaderSlots>({\n root: {\n display: 'flex',\n },\n\n header: {\n flexGrow: 1,\n },\n\n image: {},\n description: {},\n action: {},\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state.\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n const styles = useStyles();\n const stylesGrid = useStylesGrid();\n const stylesFlex = useStylesFlex();\n\n const boxModelStyles = state.description ? stylesGrid : stylesFlex;\n\n const getSlotStyles = (slotName: keyof CardHeaderSlots): string => {\n return mergeClasses(\n cardHeaderClassNames[slotName],\n styles[slotName],\n boxModelStyles[slotName],\n state[slotName]?.className,\n );\n };\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = getSlotStyles('root');\n\n if (state.image) {\n // eslint-disable-next-line react-hooks/immutability\n state.image.className = getSlotStyles('image');\n }\n\n if (state.header) {\n // eslint-disable-next-line react-hooks/immutability\n state.header.className = getSlotStyles('header');\n }\n\n if (state.description) {\n // eslint-disable-next-line react-hooks/immutability\n state.description.className = getSlotStyles('description');\n }\n\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = getSlotStyles('action');\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","cardHeaderClassNames","root","image","header","description","action","cardHeaderCSSVars","cardHeaderGapVar","useStyles","alignItems","display","marginRight","marginLeft","borderColor","color","outlineColor","useStylesGrid","gridAutoColumns","gridColumnStart","gridRowStart","useStylesFlex","flexGrow","useCardHeaderStyles_unstable","state","styles","stylesGrid","stylesFlex","boxModelStyles","getSlotStyles","slotName","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE;;CAEC,GACD,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,aAAa;IACbC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,oBAAoB;IAC/BC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,YAAYX,WAAkC;IAClDI,MAAM;QACJ,CAACK,kBAAkBC,gBAAgB,CAAC,EAAE;QACtCE,YAAY;IACd;IACAP,OAAO;QACLQ,SAAS;QACTC,aAAa,CAAC,IAAI,EAAEL,kBAAkBC,gBAAgB,CAAC,CAAC,CAAC;IAC3D;IACAJ,QAAQ;QACNO,SAAS;IACX;IACAN,aAAa;QACXM,SAAS;IACX;IACAL,QAAQ;QACNO,YAAY,CAAC,IAAI,EAAEN,kBAAkBC,gBAAgB,CAAC,CAAC,CAAC;QAExD,gGAAgG;QAChG,qGAAqG;QACrG,kCAAkC;YAChC,8BAA8B;gBAC5B,GAAGR,WAAWc,WAAW,CAAC,eAAe;gBACzCC,OAAO;gBACPC,cAAc;YAChB;QACF;IACF;AACF;AAEA,MAAMC,gBAAgBnB,WAAkC;IACtDI,MAAM;QACJS,SAAS;QACTO,iBAAiB;IACnB;IAEAf,OAAO;QACLgB,iBAAiB;QACjBC,cAAc;IAChB;IAEAhB,QAAQ;QACNe,iBAAiB;QACjBC,cAAc;IAChB;IAEAf,aAAa;QACXc,iBAAiB;QACjBC,cAAc;IAChB;IAEAd,QAAQ;QACNa,iBAAiB;QACjBC,cAAc;IAChB;AACF;AAEA,MAAMC,gBAAgBvB,WAAkC;IACtDI,MAAM;QACJS,SAAS;IACX;IAEAP,QAAQ;QACNkB,UAAU;IACZ;IAEAnB,OAAO,CAAC;IACRE,aAAa,CAAC;IACdC,QAAQ,CAAC;AACX;AAEA;;CAEC,GACD,OAAO,MAAMiB,+BAA+B,CAACC;IAC3C,MAAMC,SAAShB;IACf,MAAMiB,aAAaT;IACnB,MAAMU,aAAaN;IAEnB,MAAMO,iBAAiBJ,MAAMnB,WAAW,GAAGqB,aAAaC;IAExD,MAAME,gBAAgB,CAACC;YAKnBN;QAJF,OAAOzB,aACLE,oBAAoB,CAAC6B,SAAS,EAC9BL,MAAM,CAACK,SAAS,EAChBF,cAAc,CAACE,SAAS,GACxBN,kBAAAA,KAAK,CAACM,SAAS,cAAfN,sCAAAA,gBAAiBO,SAAS;IAE9B;IAEA,oDAAoD;IACpDP,MAAMtB,IAAI,CAAC6B,SAAS,GAAGF,cAAc;IAErC,IAAIL,MAAMrB,KAAK,EAAE;QACf,oDAAoD;QACpDqB,MAAMrB,KAAK,CAAC4B,SAAS,GAAGF,cAAc;IACxC;IAEA,IAAIL,MAAMpB,MAAM,EAAE;QAChB,oDAAoD;QACpDoB,MAAMpB,MAAM,CAAC2B,SAAS,GAAGF,cAAc;IACzC;IAEA,IAAIL,MAAMnB,WAAW,EAAE;QACrB,oDAAoD;QACpDmB,MAAMnB,WAAW,CAAC0B,SAAS,GAAGF,cAAc;IAC9C;IAEA,IAAIL,MAAMlB,MAAM,EAAE;QAChB,oDAAoD;QACpDkB,MAAMlB,MAAM,CAACyB,SAAS,GAAGF,cAAc;IACzC;IAEA,OAAOL;AACT,EAAE"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
3
|
-
import { useCardPreview_unstable } from
|
|
4
|
-
import { renderCardPreview_unstable } from
|
|
5
|
-
import { useCardPreviewStyles_unstable } from
|
|
6
|
-
import { useCustomStyleHook_unstable } from
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { useCardPreview_unstable } from "./useCardPreview.js";
|
|
4
|
+
import { renderCardPreview_unstable } from "./renderCardPreview.js";
|
|
5
|
+
import { useCardPreviewStyles_unstable } from "./useCardPreviewStyles.styles.js";
|
|
6
|
+
import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
|
|
7
7
|
/**
|
|
8
8
|
* Component to render image previews of documents or articles in a Card component.
|
|
9
9
|
*/ export const CardPreview = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CardPreview/CardPreview.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardPreview_unstable } from './useCardPreview';\nimport { renderCardPreview_unstable } from './renderCardPreview';\nimport { useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';\nimport type { CardPreviewProps } from './CardPreview.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Component to render image previews of documents or articles in a Card component.\n */\nexport const CardPreview: ForwardRefComponent<CardPreviewProps> = React.forwardRef((props, ref) => {\n const state = useCardPreview_unstable(props, ref);\n\n useCardPreviewStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardPreviewStyles_unstable')(state);\n\n return renderCardPreview_unstable(state);\n});\n\nCardPreview.displayName = 'CardPreview';\n"],"names":["React","useCardPreview_unstable","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCustomStyleHook_unstable","CardPreview","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/components/CardPreview/CardPreview.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardPreview_unstable } from './useCardPreview';\nimport { renderCardPreview_unstable } from './renderCardPreview';\nimport { useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';\nimport type { CardPreviewProps } from './CardPreview.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Component to render image previews of documents or articles in a Card component.\n */\nexport const CardPreview: ForwardRefComponent<CardPreviewProps> = React.forwardRef((props, ref) => {\n const state = useCardPreview_unstable(props, ref);\n\n useCardPreviewStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardPreviewStyles_unstable')(state);\n\n return renderCardPreview_unstable(state);\n});\n\nCardPreview.displayName = 'CardPreview';\n"],"names":["React","useCardPreview_unstable","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCustomStyleHook_unstable","CardPreview","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,6BAA6B,QAAQ,mCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { CardPreview } from
|
|
2
|
-
export { renderCardPreview_unstable } from
|
|
3
|
-
export { useCardPreview_unstable, useCardPreviewBase_unstable } from
|
|
4
|
-
export { cardPreviewClassNames, useCardPreviewStyles_unstable } from
|
|
1
|
+
export { CardPreview } from "./CardPreview.js";
|
|
2
|
+
export { renderCardPreview_unstable } from "./renderCardPreview.js";
|
|
3
|
+
export { useCardPreview_unstable, useCardPreviewBase_unstable } from "./useCardPreview.js";
|
|
4
|
+
export { cardPreviewClassNames, useCardPreviewStyles_unstable } from "./useCardPreviewStyles.styles.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CardPreview/index.ts"],"sourcesContent":["export { CardPreview } from './CardPreview';\nexport type {\n CardPreviewBaseProps,\n CardPreviewBaseState,\n CardPreviewProps,\n CardPreviewSlots,\n CardPreviewState,\n} from './CardPreview.types';\nexport { renderCardPreview_unstable } from './renderCardPreview';\nexport { useCardPreview_unstable, useCardPreviewBase_unstable } from './useCardPreview';\nexport { cardPreviewClassNames, useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';\n"],"names":["CardPreview","renderCardPreview_unstable","useCardPreview_unstable","useCardPreviewBase_unstable","cardPreviewClassNames","useCardPreviewStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/components/CardPreview/index.ts"],"sourcesContent":["export { CardPreview } from './CardPreview';\nexport type {\n CardPreviewBaseProps,\n CardPreviewBaseState,\n CardPreviewProps,\n CardPreviewSlots,\n CardPreviewState,\n} from './CardPreview.types';\nexport { renderCardPreview_unstable } from './renderCardPreview';\nexport { useCardPreview_unstable, useCardPreviewBase_unstable } from './useCardPreview';\nexport { cardPreviewClassNames, useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';\n"],"names":["CardPreview","renderCardPreview_unstable","useCardPreview_unstable","useCardPreviewBase_unstable","cardPreviewClassNames","useCardPreviewStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,mBAAgB;AAQ5C,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,sBAAmB;AACxF,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,mCAAgC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
|
-
import { assertSlots } from
|
|
2
|
+
import { assertSlots } from "@fluentui/react-utilities";
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of CardPreview.
|
|
5
5
|
*/ export const renderCardPreview_unstable = (state)=>{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
3
|
-
import { getIntrinsicElementProps, useMergedRefs, slot } from
|
|
4
|
-
import { useCardContext_unstable } from
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { getIntrinsicElementProps, useMergedRefs, slot } from "@fluentui/react-utilities";
|
|
4
|
+
import { useCardContext_unstable } from "../Card/CardContext.js";
|
|
5
5
|
/**
|
|
6
6
|
* Create the state required to render CardPreview.
|
|
7
7
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CardPreview/useCardPreview.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type {\n CardPreviewBaseProps,\n CardPreviewBaseState,\n CardPreviewProps,\n CardPreviewState,\n} from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\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 return useCardPreviewBase_unstable(props, ref);\n};\n\n/**\n * Base hook for CardPreview component, which manages state related to slots structure\n * and the card's selectable accessibility label.\n * Note: CardPreview has no design props, so this is equivalent to useCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreviewBase_unstable = (\n props: CardPreviewBaseProps,\n ref: React.Ref<HTMLElement>,\n): CardPreviewBaseState => {\n const { logo } = props;\n\n const {\n selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },\n } = useCardContext_unstable();\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 const previewRef = useMergedRefs(ref as React.Ref<HTMLDivElement>, 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>(`.fui-CardPreview > 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 // eslint-disable-next-line react-hooks/refs\n getIntrinsicElementProps('div', {\n ref: previewRef,\n ...props,\n }),\n { elementType: 'div' },\n ),\n logo: slot.optional(logo, { elementType: 'div' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useCardContext_unstable","useCardPreview_unstable","props","ref","useCardPreviewBase_unstable","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","previewRef","useRef","useEffect","current","parentNode","img","querySelector","ariaLabel","getAttribute","ariaDescribedby","alt","components","root","always","elementType","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAO1F,SAASC,uBAAuB,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/components/CardPreview/useCardPreview.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type {\n CardPreviewBaseProps,\n CardPreviewBaseState,\n CardPreviewProps,\n CardPreviewState,\n} from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\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 return useCardPreviewBase_unstable(props, ref);\n};\n\n/**\n * Base hook for CardPreview component, which manages state related to slots structure\n * and the card's selectable accessibility label.\n * Note: CardPreview has no design props, so this is equivalent to useCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreviewBase_unstable = (\n props: CardPreviewBaseProps,\n ref: React.Ref<HTMLElement>,\n): CardPreviewBaseState => {\n const { logo } = props;\n\n const {\n selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },\n } = useCardContext_unstable();\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 const previewRef = useMergedRefs(ref as React.Ref<HTMLDivElement>, 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>(`.fui-CardPreview > 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 // eslint-disable-next-line react-hooks/refs\n getIntrinsicElementProps('div', {\n ref: previewRef,\n ...props,\n }),\n { elementType: 'div' },\n ),\n logo: slot.optional(logo, { elementType: 'div' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useCardContext_unstable","useCardPreview_unstable","props","ref","useCardPreviewBase_unstable","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","previewRef","useRef","useEffect","current","parentNode","img","querySelector","ariaLabel","getAttribute","ariaDescribedby","alt","components","root","always","elementType","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAO1F,SAASC,uBAAuB,QAAQ,yBAAsB;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,OAAOC,4BAA4BF,OAAOC;AAC5C,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMC,8BAA8B,CACzCF,OACAC;IAEA,MAAM,EAAEE,IAAI,EAAE,GAAGH;IAEjB,MAAM,EACJI,qBAAqB,EAAEC,cAAc,EAAEC,WAAW,EAAEC,iBAAiB,EAAEC,cAAc,EAAE,EACxF,GAAGV;IACJ,SAAS;IACT,4EAA4E;IAC5E,4FAA4F;IAC5F,MAAMW,aAAab,cAAcK,KAAkCP,MAAMgB,MAAM,CAAiB;IAEhGhB,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,sBAAsB,CAAC;YAElG,IAAID,KAAK;gBACP,MAAME,YAAYF,IAAIG,YAAY,CAAC;gBACnC,MAAMC,kBAAkBJ,IAAIG,YAAY,CAAC;gBAEzC,IAAIC,iBAAiB;oBACnBV,eAAeU;gBACjB,OAAO,IAAIJ,IAAIK,GAAG,EAAE;oBAClBZ,kBAAkBO,IAAIK,GAAG;gBAC3B,OAAO,IAAIH,WAAW;oBACpBT,kBAAkBS;gBACpB;YACF;QACF;IACF,GAAG;QAACT;QAAmBF;QAAgBI;QAAYH;QAAaE;KAAe;IAE/E,OAAO;QACLY,YAAY;YACVC,MAAM;YACNlB,MAAM;QACR;QAEAkB,MAAMxB,KAAKyB,MAAM,CACf,4CAA4C;QAC5C3B,yBAAyB,OAAO;YAC9BM,KAAKQ;YACL,GAAGT,KAAK;QACV,IACA;YAAEuB,aAAa;QAAM;QAEvBpB,MAAMN,KAAK2B,QAAQ,CAACrB,MAAM;YAAEoB,aAAa;QAAM;IACjD;AACF,EAAE"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { __styles, mergeClasses } from
|
|
3
|
+
import { __styles, mergeClasses } from "@griffel/react";
|
|
4
4
|
/**
|
|
5
5
|
* Static CSS class names used internally for the component slots.
|
|
6
6
|
*/
|
|
@@ -29,8 +29,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
29
29
|
* Apply styling to the CardPreview slots based on the state.
|
|
30
30
|
*/
|
|
31
31
|
export const useCardPreviewStyles_unstable = state => {
|
|
32
|
-
'use no memo';
|
|
33
|
-
|
|
34
32
|
const styles = useStyles();
|
|
35
33
|
// eslint-disable-next-line react-hooks/immutability
|
|
36
34
|
state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","qhf8xq","Byfpedg","Btj6oj6","B1m4t4s","B5kzvoi","oyh7mz","a9b677","Bqenvij","d","useCardPreviewStyles_unstable","state","styles","className"],"sources":["useCardPreviewStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","qhf8xq","Byfpedg","Btj6oj6","B1m4t4s","B5kzvoi","oyh7mz","a9b677","Bqenvij","d","useCardPreviewStyles_unstable","state","styles","className"],"sources":["useCardPreviewStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardPreviewClassNames = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo'\n};\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n [`> :not(.${cardPreviewClassNames.logo})`]: {\n display: 'block',\n height: '100%',\n width: '100%'\n }\n },\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px'\n }\n});\n/**\n * Apply styling to the CardPreview slots based on the state.\n */ export const useCardPreviewStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n if (state.logo) {\n // eslint-disable-next-line react-hooks/immutability\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD;AACA;AACA;AAAI,OAAO,MAAMC,qBAAqB,GAAG;EACrCC,IAAI,EAAE,iBAAiB;EACvBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAG,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAL,IAAA;IAAAE,MAAA;IAAAI,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAgBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1B;EACAW,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGjB,YAAY,CAACC,qBAAqB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EAClG,IAAIF,KAAK,CAACZ,IAAI,EAAE;IACZ;IACAY,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGjB,YAAY,CAACC,qBAAqB,CAACE,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACtG;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { makeStyles, mergeClasses } from
|
|
2
|
+
import { makeStyles, mergeClasses } from "@griffel/react";
|
|
3
3
|
/**
|
|
4
4
|
* Static CSS class names used internally for the component slots.
|
|
5
5
|
*/ export const cardPreviewClassNames = {
|
|
@@ -26,7 +26,6 @@ const useStyles = makeStyles({
|
|
|
26
26
|
/**
|
|
27
27
|
* Apply styling to the CardPreview slots based on the state.
|
|
28
28
|
*/ export const useCardPreviewStyles_unstable = (state)=>{
|
|
29
|
-
'use no memo';
|
|
30
29
|
const styles = useStyles();
|
|
31
30
|
// eslint-disable-next-line react-hooks/immutability
|
|
32
31
|
state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CardPreview/useCardPreviewStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo',\n};\n\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n\n [`> :not(.${cardPreviewClassNames.logo})`]: {\n display: 'block',\n height: '100%',\n width: '100%',\n },\n },\n\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px',\n },\n});\n\n/**\n * Apply styling to the CardPreview slots based on the state.\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/CardPreview/useCardPreviewStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo',\n};\n\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n\n [`> :not(.${cardPreviewClassNames.logo})`]: {\n display: 'block',\n height: '100%',\n width: '100%',\n },\n },\n\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px',\n },\n});\n\n/**\n * Apply styling to the CardPreview slots based on the state.\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n if (state.logo) {\n // eslint-disable-next-line react-hooks/immutability\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","position","display","height","width","bottom","left","useCardPreviewStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D;;CAEC,GACD,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYL,WAAW;IAC3BG,MAAM;QACJG,UAAU;QAEV,CAAC,CAAC,QAAQ,EAAEJ,sBAAsBE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;YAC1CG,SAAS;YACTC,QAAQ;YACRC,OAAO;QACT;IACF;IAEAL,MAAM;QACJE,UAAU;QACVI,QAAQ;QACRC,MAAM;QACNF,OAAO;QACPD,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMI,gCAAgC,CAACC;IAC5C,MAAMC,SAAST;IACf,oDAAoD;IACpDQ,MAAMV,IAAI,CAACY,SAAS,GAAGd,aAAaC,sBAAsBC,IAAI,EAAEW,OAAOX,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IAEjG,IAAIF,MAAMT,IAAI,EAAE;QACd,oDAAoD;QACpDS,MAAMT,IAAI,CAACW,SAAS,GAAGd,aAAaC,sBAAsBE,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IACnG;IAEA,OAAOF;AACT,EAAE"}
|
package/lib/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { Card, cardClassNames, cardCSSVars, renderCard_unstable, useCardStyles_unstable, useCard_unstable, useCardBase_unstable } from
|
|
2
|
-
export { CardFooter, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable, useCardFooterBase_unstable } from
|
|
3
|
-
export { CardHeader, cardHeaderClassNames, cardHeaderCSSVars, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable, useCardHeaderBase_unstable } from
|
|
4
|
-
export { CardPreview, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable, useCardPreviewBase_unstable } from
|
|
5
|
-
export { CardProvider, useCardContext_unstable } from
|
|
1
|
+
export { Card, cardClassNames, cardCSSVars, renderCard_unstable, useCardStyles_unstable, useCard_unstable, useCardBase_unstable } from "./Card.js";
|
|
2
|
+
export { CardFooter, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable, useCardFooterBase_unstable } from "./CardFooter.js";
|
|
3
|
+
export { CardHeader, cardHeaderClassNames, cardHeaderCSSVars, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable, useCardHeaderBase_unstable } from "./CardHeader.js";
|
|
4
|
+
export { CardPreview, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable, useCardPreviewBase_unstable } from "./CardPreview.js";
|
|
5
|
+
export { CardProvider, useCardContext_unstable } from "./Card.js";
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Card,\n cardClassNames,\n cardCSSVars,\n renderCard_unstable,\n useCardStyles_unstable,\n useCard_unstable,\n useCardBase_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState, CardBaseProps, CardBaseState, CardOnSelectionChangeEvent } from './Card';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n useCardFooterBase_unstable,\n} from './CardFooter';\nexport type {\n CardFooterProps,\n CardFooterSlots,\n CardFooterState,\n CardFooterBaseProps,\n CardFooterBaseState,\n} from './CardFooter';\nexport {\n CardHeader,\n cardHeaderClassNames,\n cardHeaderCSSVars,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n useCardHeaderBase_unstable,\n} from './CardHeader';\nexport type {\n CardHeaderProps,\n CardHeaderSlots,\n CardHeaderState,\n CardHeaderBaseProps,\n CardHeaderBaseState,\n} from './CardHeader';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n useCardPreviewBase_unstable,\n} from './CardPreview';\nexport type {\n CardPreviewProps,\n CardPreviewSlots,\n CardPreviewState,\n CardPreviewBaseProps,\n CardPreviewBaseState,\n} from './CardPreview';\nexport { CardProvider, useCardContext_unstable } from './Card';\nexport type { CardContextValue } from './Card';\n"],"names":["Card","cardClassNames","cardCSSVars","renderCard_unstable","useCardStyles_unstable","useCard_unstable","useCardBase_unstable","CardFooter","cardFooterClassNames","renderCardFooter_unstable","useCardFooterStyles_unstable","useCardFooter_unstable","useCardFooterBase_unstable","CardHeader","cardHeaderClassNames","cardHeaderCSSVars","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable","useCardHeaderBase_unstable","CardPreview","cardPreviewClassNames","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable","useCardPreviewBase_unstable","CardProvider","useCardContext_unstable"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,WAAW,EACXC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,EAChBC,oBAAoB,QACf,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Card,\n cardClassNames,\n cardCSSVars,\n renderCard_unstable,\n useCardStyles_unstable,\n useCard_unstable,\n useCardBase_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState, CardBaseProps, CardBaseState, CardOnSelectionChangeEvent } from './Card';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n useCardFooterBase_unstable,\n} from './CardFooter';\nexport type {\n CardFooterProps,\n CardFooterSlots,\n CardFooterState,\n CardFooterBaseProps,\n CardFooterBaseState,\n} from './CardFooter';\nexport {\n CardHeader,\n cardHeaderClassNames,\n cardHeaderCSSVars,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n useCardHeaderBase_unstable,\n} from './CardHeader';\nexport type {\n CardHeaderProps,\n CardHeaderSlots,\n CardHeaderState,\n CardHeaderBaseProps,\n CardHeaderBaseState,\n} from './CardHeader';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n useCardPreviewBase_unstable,\n} from './CardPreview';\nexport type {\n CardPreviewProps,\n CardPreviewSlots,\n CardPreviewState,\n CardPreviewBaseProps,\n CardPreviewBaseState,\n} from './CardPreview';\nexport { CardProvider, useCardContext_unstable } from './Card';\nexport type { CardContextValue } from './Card';\n"],"names":["Card","cardClassNames","cardCSSVars","renderCard_unstable","useCardStyles_unstable","useCard_unstable","useCardBase_unstable","CardFooter","cardFooterClassNames","renderCardFooter_unstable","useCardFooterStyles_unstable","useCardFooter_unstable","useCardFooterBase_unstable","CardHeader","cardHeaderClassNames","cardHeaderCSSVars","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable","useCardHeaderBase_unstable","CardPreview","cardPreviewClassNames","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable","useCardPreviewBase_unstable","CardProvider","useCardContext_unstable"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,WAAW,EACXC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,EAChBC,oBAAoB,QACf,YAAS;AAEhB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,EACtBC,0BAA0B,QACrB,kBAAe;AAQtB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,iBAAiB,EACjBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,EACtBC,0BAA0B,QACrB,kBAAe;AAQtB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,2BAA2B,QACtB,mBAAgB;AAQvB,SAASC,YAAY,EAAEC,uBAAuB,QAAQ,YAAS"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Card.ts"],"sourcesContent":["export type {\n CardContextValue,\n CardOnSelectData,\n CardOnSelectionChangeEvent,\n CardProps,\n CardSlots,\n CardState,\n CardBaseProps,\n CardBaseState,\n} from './components/Card/index';\nexport {\n Card,\n CardProvider,\n cardCSSVars,\n cardClassNames,\n cardContextDefaultValue,\n renderCard_unstable,\n useCardContext_unstable,\n useCardStyles_unstable,\n useCard_unstable,\n useCardBase_unstable,\n} from './components/Card/index';\n"],"names":["Card","CardProvider","cardCSSVars","cardClassNames","cardContextDefaultValue","renderCard_unstable","useCardContext_unstable","useCardStyles_unstable","useCard_unstable","useCardBase_unstable"],"mappings":";;;;;;;;;;;IAWEA;0BAAI;;;eACJC,mBAAY;;;eACZC,kBAAW;;;eACXC,qBAAc;;;eACdC,8BAAuB;;;eACvBC,0BAAmB;;;eAInBI,2BAAoB;;;eAHpBH,8BAAuB;;;eACvBC,6BAAsB;;;eACtBC,uBAAgB;;;uBAEX,
|
|
1
|
+
{"version":3,"sources":["../src/Card.ts"],"sourcesContent":["export type {\n CardContextValue,\n CardOnSelectData,\n CardOnSelectionChangeEvent,\n CardProps,\n CardSlots,\n CardState,\n CardBaseProps,\n CardBaseState,\n} from './components/Card/index';\nexport {\n Card,\n CardProvider,\n cardCSSVars,\n cardClassNames,\n cardContextDefaultValue,\n renderCard_unstable,\n useCardContext_unstable,\n useCardStyles_unstable,\n useCard_unstable,\n useCardBase_unstable,\n} from './components/Card/index';\n"],"names":["Card","CardProvider","cardCSSVars","cardClassNames","cardContextDefaultValue","renderCard_unstable","useCardContext_unstable","useCardStyles_unstable","useCard_unstable","useCardBase_unstable"],"mappings":";;;;;;;;;;;IAWEA;0BAAI;;;eACJC,mBAAY;;;eACZC,kBAAW;;;eACXC,qBAAc;;;eACdC,8BAAuB;;;eACvBC,0BAAmB;;;eAInBI,2BAAoB;;;eAHpBH,8BAAuB;;;eACvBC,6BAAsB;;;eACtBC,uBAAgB;;;uBAEX,6BAA0B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/CardFooter.ts"],"sourcesContent":["export type {\n CardFooterProps,\n CardFooterSlots,\n CardFooterState,\n CardFooterBaseProps,\n CardFooterBaseState,\n} from './components/CardFooter/index';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n useCardFooterBase_unstable,\n} from './components/CardFooter/index';\n"],"names":["CardFooter","cardFooterClassNames","renderCardFooter_unstable","useCardFooterStyles_unstable","useCardFooter_unstable","useCardFooterBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,iBAAU;;;eACVC,2BAAoB;;;eACpBC,gCAAyB;;;eAGzBG,iCAA0B;;;eAF1BF,mCAA4B;;;eAC5BC,6BAAsB;;;uBAEjB,
|
|
1
|
+
{"version":3,"sources":["../src/CardFooter.ts"],"sourcesContent":["export type {\n CardFooterProps,\n CardFooterSlots,\n CardFooterState,\n CardFooterBaseProps,\n CardFooterBaseState,\n} from './components/CardFooter/index';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n useCardFooterBase_unstable,\n} from './components/CardFooter/index';\n"],"names":["CardFooter","cardFooterClassNames","renderCardFooter_unstable","useCardFooterStyles_unstable","useCardFooter_unstable","useCardFooterBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,iBAAU;;;eACVC,2BAAoB;;;eACpBC,gCAAyB;;;eAGzBG,iCAA0B;;;eAF1BF,mCAA4B;;;eAC5BC,6BAAsB;;;uBAEjB,mCAAgC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/CardHeader.ts"],"sourcesContent":["export type {\n CardHeaderProps,\n CardHeaderSlots,\n CardHeaderState,\n CardHeaderBaseProps,\n CardHeaderBaseState,\n} from './components/CardHeader/index';\nexport {\n CardHeader,\n cardHeaderCSSVars,\n cardHeaderClassNames,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n useCardHeaderBase_unstable,\n} from './components/CardHeader/index';\n"],"names":["CardHeader","cardHeaderCSSVars","cardHeaderClassNames","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable","useCardHeaderBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,iBAAU;;;eACVC,wBAAiB;;;eACjBC,2BAAoB;;;eACpBC,gCAAyB;;;eAGzBG,iCAA0B;;;eAF1BF,mCAA4B;;;eAC5BC,6BAAsB;;;uBAEjB,
|
|
1
|
+
{"version":3,"sources":["../src/CardHeader.ts"],"sourcesContent":["export type {\n CardHeaderProps,\n CardHeaderSlots,\n CardHeaderState,\n CardHeaderBaseProps,\n CardHeaderBaseState,\n} from './components/CardHeader/index';\nexport {\n CardHeader,\n cardHeaderCSSVars,\n cardHeaderClassNames,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n useCardHeaderBase_unstable,\n} from './components/CardHeader/index';\n"],"names":["CardHeader","cardHeaderCSSVars","cardHeaderClassNames","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable","useCardHeaderBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,iBAAU;;;eACVC,wBAAiB;;;eACjBC,2BAAoB;;;eACpBC,gCAAyB;;;eAGzBG,iCAA0B;;;eAF1BF,mCAA4B;;;eAC5BC,6BAAsB;;;uBAEjB,mCAAgC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/CardPreview.ts"],"sourcesContent":["export type {\n CardPreviewProps,\n CardPreviewSlots,\n CardPreviewState,\n CardPreviewBaseProps,\n CardPreviewBaseState,\n} from './components/CardPreview/index';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n useCardPreviewBase_unstable,\n} from './components/CardPreview/index';\n"],"names":["CardPreview","cardPreviewClassNames","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable","useCardPreviewBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAG1BG,kCAA2B;;;eAF3BF,oCAA6B;;;eAC7BC,8BAAuB;;;uBAElB,
|
|
1
|
+
{"version":3,"sources":["../src/CardPreview.ts"],"sourcesContent":["export type {\n CardPreviewProps,\n CardPreviewSlots,\n CardPreviewState,\n CardPreviewBaseProps,\n CardPreviewBaseState,\n} from './components/CardPreview/index';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n useCardPreviewBase_unstable,\n} from './components/CardPreview/index';\n"],"names":["CardPreview","cardPreviewClassNames","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable","useCardPreviewBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAG1BG,kCAA2B;;;eAF3BF,oCAA6B;;;eAC7BC,8BAAuB;;;uBAElB,oCAAiC"}
|
|
@@ -11,10 +11,10 @@ Object.defineProperty(exports, "Card", {
|
|
|
11
11
|
});
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
-
const _useCard = require("./useCard");
|
|
15
|
-
const _renderCard = require("./renderCard");
|
|
16
|
-
const _useCardStylesstyles = require("./useCardStyles.styles");
|
|
17
|
-
const _useCardContextValue = require("./useCardContextValue");
|
|
14
|
+
const _useCard = require("./useCard.cjs");
|
|
15
|
+
const _renderCard = require("./renderCard.cjs");
|
|
16
|
+
const _useCardStylesstyles = require("./useCardStyles.styles.cjs");
|
|
17
|
+
const _useCardContextValue = require("./useCardContextValue.cjs");
|
|
18
18
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
19
19
|
const Card = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
20
20
|
const state = (0, _useCard.useCard_unstable)(props, ref);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Card/Card.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles.styles';\nimport type { CardProps } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCardContextValue } from './useCardContextValue';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef<HTMLDivElement>((props, ref) => {\n const state = useCard_unstable(props, ref);\n const cardContextValue = useCardContextValue(state);\n\n useCardStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardStyles_unstable')(state);\n\n return renderCard_unstable(state, cardContextValue);\n});\n\nCard.displayName = 'Card';\n"],"names":["React","useCard_unstable","renderCard_unstable","useCardStyles_unstable","useCardContextValue","useCustomStyleHook_unstable","Card","forwardRef","props","ref","state","cardContextValue","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;yBACE,
|
|
1
|
+
{"version":3,"sources":["../src/components/Card/Card.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles.styles';\nimport type { CardProps } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCardContextValue } from './useCardContextValue';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef<HTMLDivElement>((props, ref) => {\n const state = useCard_unstable(props, ref);\n const cardContextValue = useCardContextValue(state);\n\n useCardStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardStyles_unstable')(state);\n\n return renderCard_unstable(state, cardContextValue);\n});\n\nCard.displayName = 'Card';\n"],"names":["React","useCard_unstable","renderCard_unstable","useCardStyles_unstable","useCardContextValue","useCustomStyleHook_unstable","Card","forwardRef","props","ref","state","cardContextValue","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;yBACE,eAAY;4BACT,kBAAe;qCACZ,4BAAyB;qCAG5B,2BAAwB;qCAChB,kCAAkC;AAKvE,MAAMM,OAAAA,WAAAA,GAAuCN,OAAMO,UAAU,CAAiB,CAACC,OAAOC;IAC3F,MAAMC,YAAQT,yBAAAA,EAAiBO,OAAOC;IACtC,MAAME,uBAAmBP,wCAAAA,EAAoBM;QAE7CP,2CAAAA,EAAuBO;QAEvBL,gDAAAA,EAA4B,0BAA0BK;IAEtD,WAAOR,+BAAAA,EAAoBQ,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}
|
|
@@ -40,8 +40,8 @@ _export(exports, {
|
|
|
40
40
|
return _useCard.useCard_unstable;
|
|
41
41
|
}
|
|
42
42
|
});
|
|
43
|
-
const _Card = require("./Card");
|
|
44
|
-
const _CardContext = require("./CardContext");
|
|
45
|
-
const _renderCard = require("./renderCard");
|
|
46
|
-
const _useCard = require("./useCard");
|
|
47
|
-
const _useCardStylesstyles = require("./useCardStyles.styles");
|
|
43
|
+
const _Card = require("./Card.cjs");
|
|
44
|
+
const _CardContext = require("./CardContext.cjs");
|
|
45
|
+
const _renderCard = require("./renderCard.cjs");
|
|
46
|
+
const _useCard = require("./useCard.cjs");
|
|
47
|
+
const _useCardStylesstyles = require("./useCardStyles.styles.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Card/index.ts"],"sourcesContent":["export { Card } from './Card';\nexport type {\n CardBaseProps,\n CardBaseState,\n CardContextValue,\n CardOnSelectData,\n CardOnSelectionChangeEvent,\n CardProps,\n CardSlots,\n CardState,\n} from './Card.types';\nexport { CardProvider, cardContextDefaultValue, useCardContext_unstable } from './CardContext';\nexport { renderCard_unstable } from './renderCard';\nexport { useCard_unstable, useCardBase_unstable } from './useCard';\nexport { cardCSSVars, cardClassNames, useCardStyles_unstable } from './useCardStyles.styles';\n"],"names":["Card","CardProvider","cardContextDefaultValue","useCardContext_unstable","renderCard_unstable","useCard_unstable","useCardBase_unstable","cardCSSVars","cardClassNames","useCardStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;yBAAI;;;eAWJC,yBAAY;;eAGD;eAAXM;;;eAAaC,mCAAc;;;eAHbN,oCAAuB;;;eACrCE,+BAAmB;;;eACDE,6BAAoB;;;eAFCH,oCAAuB;;;eAGjCM,2CAAsB;;;eADnDJ,yBAAgB;;;sBAbJ,
|
|
1
|
+
{"version":3,"sources":["../src/components/Card/index.ts"],"sourcesContent":["export { Card } from './Card';\nexport type {\n CardBaseProps,\n CardBaseState,\n CardContextValue,\n CardOnSelectData,\n CardOnSelectionChangeEvent,\n CardProps,\n CardSlots,\n CardState,\n} from './Card.types';\nexport { CardProvider, cardContextDefaultValue, useCardContext_unstable } from './CardContext';\nexport { renderCard_unstable } from './renderCard';\nexport { useCard_unstable, useCardBase_unstable } from './useCard';\nexport { cardCSSVars, cardClassNames, useCardStyles_unstable } from './useCardStyles.styles';\n"],"names":["Card","CardProvider","cardContextDefaultValue","useCardContext_unstable","renderCard_unstable","useCard_unstable","useCardBase_unstable","cardCSSVars","cardClassNames","useCardStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;yBAAI;;;eAWJC,yBAAY;;eAGD;eAAXM;;;eAAaC,mCAAc;;;eAHbN,oCAAuB;;;eACrCE,+BAAmB;;;eACDE,6BAAoB;;;eAFCH,oCAAuB;;;eAGjCM,2CAAsB;;;eADnDJ,yBAAgB;;;sBAbJ,YAAS;6BAWiD,mBAAgB;4BAC3D,kBAAe;yBACI,eAAY;qCACC,4BAAyB"}
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "renderCard_unstable", {
|
|
|
10
10
|
});
|
|
11
11
|
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
12
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
13
|
-
const _CardContext = require("./CardContext");
|
|
13
|
+
const _CardContext = require("./CardContext.cjs");
|
|
14
14
|
const renderCard_unstable = (state, cardContextValue)=>{
|
|
15
15
|
(0, _reactutilities.assertSlots)(state);
|
|
16
16
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Card/renderCard.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CardContextValue, CardSlots, CardBaseState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardBaseState, cardContextValue: CardContextValue): JSXElement => {\n assertSlots<CardSlots>(state);\n\n return (\n <state.root>\n <CardProvider value={cardContextValue}>\n {state.checkbox ? <state.checkbox /> : null}\n {state.floatingAction ? <state.floatingAction /> : null}\n {state.root.children}\n </CardProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","CardProvider","renderCard_unstable","state","cardContextValue","root","value","checkbox","floatingAction","children"],"mappings":";;;;+BAWaE;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;6BAG3B,
|
|
1
|
+
{"version":3,"sources":["../src/components/Card/renderCard.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CardContextValue, CardSlots, CardBaseState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardBaseState, cardContextValue: CardContextValue): JSXElement => {\n assertSlots<CardSlots>(state);\n\n return (\n <state.root>\n <CardProvider value={cardContextValue}>\n {state.checkbox ? <state.checkbox /> : null}\n {state.floatingAction ? <state.floatingAction /> : null}\n {state.root.children}\n </CardProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","CardProvider","renderCard_unstable","state","cardContextValue","root","value","checkbox","floatingAction","children"],"mappings":";;;;+BAWaE;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;6BAG3B,mBAAgB;AAKtC,4BAA4B,CAACC,OAAsBC;QACxDJ,2BAAAA,EAAuBG;IAEvB,OAAA,WAAA,OACE,eAAA,EAACA,MAAME,IAAI,EAAA;kBACT,WAAA,OAAA,gBAAA,EAACJ,yBAAAA,EAAAA;YAAaK,OAAOF;;gBAClBD,MAAMI,QAAQ,GAAA,WAAA,OAAG,eAAA,EAACJ,MAAMI,QAAQ,EAAA,CAAA,KAAM;gBACtCJ,MAAMK,cAAc,GAAA,WAAA,GAAG,mBAAA,EAACL,MAAMK,cAAc,EAAA,CAAA,KAAM;gBAClDL,MAAME,IAAI,CAACI,QAAQ;;;;AAI5B,EAAE"}
|
|
@@ -21,8 +21,8 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
21
21
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
22
22
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
23
23
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
24
|
-
const _useCardSelectable = require("./useCardSelectable");
|
|
25
|
-
const _CardContext = require("./CardContext");
|
|
24
|
+
const _useCardSelectable = require("./useCardSelectable.cjs");
|
|
25
|
+
const _CardContext = require("./CardContext.cjs");
|
|
26
26
|
const focusMap = {
|
|
27
27
|
off: undefined,
|
|
28
28
|
'no-tab': 'limited-trap-focus',
|