npm - @fluentui/react-skeleton - Versions diffs - 9.4.5 → 9.4.7 - Mend

@fluentui/react-skeleton 9.4.5 → 9.4.7

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

Files changed (42) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-skeleton
-This log was last generated on Mon, 08 Sep 2025 12:41:13 GMT and should not be manually modified.
+This log was last generated on Wed, 08 Oct 2025 12:00:20 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.4.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.4.7)
+Wed, 08 Oct 2025 12:00:20 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.4.6..@fluentui/react-skeleton_v9.4.7)
+### Patches
+- Bump @fluentui/react-field to v9.4.7 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.2 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-utilities to v9.25.1 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+## [9.4.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.4.6)
+Thu, 02 Oct 2025 15:12:33 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.4.5..@fluentui/react-skeleton_v9.4.6)
+### Patches
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-field to v9.4.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
 ## [9.4.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.4.5)
-Mon, 08 Sep 2025 12:41:13 GMT
+Mon, 08 Sep 2025 12:50:33 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.4.4..@fluentui/react-skeleton_v9.4.5)
 ### Patches

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useSkeleton_unstable } from './useSkeleton';
 import { renderSkeleton_unstable } from './renderSkeleton';

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { useSkeleton_unstable } from './useSkeleton';\nimport { renderSkeleton_unstable } from './renderSkeleton';\nimport { useSkeletonStyles_unstable } from './useSkeletonStyles.styles';\nimport { useSkeletonContextValues } from './useSkeletonContextValues';\nimport type { SkeletonProps } from './Skeleton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Skeleton component - TODO: add more docs\n */\nexport const Skeleton: ForwardRefComponent<SkeletonProps> = React.forwardRef((props, ref) => {\n const state = useSkeleton_unstable(props, ref);\n const contextValues = useSkeletonContextValues(state);\n\n useSkeletonStyles_unstable(state);\n useCustomStyleHook_unstable('useSkeletonStyles_unstable')(state);\n\n return renderSkeleton_unstable(state, contextValues);\n});\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["React","useSkeleton_unstable","renderSkeleton_unstable","useSkeletonStyles_unstable","useSkeletonContextValues","useCustomStyleHook_unstable","Skeleton","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AAGtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAC3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSkeleton_unstable } from './useSkeleton';\nimport { renderSkeleton_unstable } from './renderSkeleton';\nimport { useSkeletonStyles_unstable } from './useSkeletonStyles.styles';\nimport { useSkeletonContextValues } from './useSkeletonContextValues';\nimport type { SkeletonProps } from './Skeleton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Skeleton component - TODO: add more docs\n */\nexport const Skeleton: ForwardRefComponent<SkeletonProps> = React.forwardRef((props, ref) => {\n const state = useSkeleton_unstable(props, ref);\n const contextValues = useSkeletonContextValues(state);\n\n useSkeletonStyles_unstable(state);\n useCustomStyleHook_unstable('useSkeletonStyles_unstable')(state);\n\n return renderSkeleton_unstable(state, contextValues);\n});\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["React","useSkeleton_unstable","renderSkeleton_unstable","useSkeletonStyles_unstable","useSkeletonContextValues","useCustomStyleHook_unstable","Skeleton","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AAGtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAC3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib/components/Skeleton/useSkeleton.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useSkeletonContext } from '../../contexts/SkeletonContext';

package/lib/components/Skeleton/useSkeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SkeletonProps, SkeletonState } from './Skeleton.types';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\n\n/*\n Create the state required to render Skeleton.\n \n The returned state can be modified with hooks such as useSkeletonStyles_unstable,\n * before being passed to renderSkeleton_unstable.\n \n @param props - props from this instance of Skeleton\n * @param ref - reference to root HTMLElement of Skeleton\n */\nexport const useSkeleton_unstable = (props: SkeletonProps, ref: React.Ref<HTMLElement>): SkeletonState => {\n const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n const { animation = contextAnimation ?? 'wave', appearance = contextAppearance ?? 'opaque' } = props;\n\n const 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 role: 'progressbar',\n 'aria-busy': true,\n ...props,\n }),\n { elementType: 'div' },\n );\n return { animation, appearance, components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","root","always","role","elementType","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,GAAGP;IACvE,MAAM,EAAEI,YAAYC,6BAAAA,8BAAAA,mBAAoB,MAAM,EAAEC,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAAE,GAAGL;IAE/F,MAAMM,OAAOT,KAAKU,MAAM,CACtBX,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACLO,MAAM;QACN,aAAa;QACb,GAAGR,KAAK;IACV,IACA;QAAES,aAAa;IAAM;IAEvB,OAAO;QAAEP;QAAWE;QAAYM,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AACpE,EAAE"}
1	+ {"version":3,"sources":["../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SkeletonProps, SkeletonState } from './Skeleton.types';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\n\n/*\n Create the state required to render Skeleton.\n \n The returned state can be modified with hooks such as useSkeletonStyles_unstable,\n * before being passed to renderSkeleton_unstable.\n \n @param props - props from this instance of Skeleton\n * @param ref - reference to root HTMLElement of Skeleton\n */\nexport const useSkeleton_unstable = (props: SkeletonProps, ref: React.Ref<HTMLElement>): SkeletonState => {\n const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n const { animation = contextAnimation ?? 'wave', appearance = contextAppearance ?? 'opaque' } = props;\n\n const 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 role: 'progressbar',\n 'aria-busy': true,\n ...props,\n }),\n { elementType: 'div' },\n );\n return { animation, appearance, components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","root","always","role","elementType","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,GAAGP;IACvE,MAAM,EAAEI,YAAYC,6BAAAA,8BAAAA,mBAAoB,MAAM,EAAEC,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAAE,GAAGL;IAE/F,MAAMM,OAAOT,KAAKU,MAAM,CACtBX,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACLO,MAAM;QACN,aAAa;QACb,GAAGR,KAAK;IACV,IACA;QAAES,aAAa;IAAM;IAEvB,OAAO;QAAEP;QAAWE;QAAYM,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AACpE,EAAE"}

package/lib/components/Skeleton/useSkeletonContextValues.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export const useSkeletonContextValues = (state)=>{
     const { animation, appearance } = state;

package/lib/components/Skeleton/useSkeletonContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Skeleton/useSkeletonContextValues.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { SkeletonContextValues, SkeletonState } from '../Skeleton';\n\nexport const useSkeletonContextValues = (state: SkeletonState): SkeletonContextValues => {\n const { animation, appearance } = state;\n\n const skeletonGroup = React.useMemo(\n () => ({\n animation,\n appearance,\n }),\n [animation, appearance],\n );\n\n return { skeletonGroup };\n};\n"],"names":["React","useSkeletonContextValues","state","animation","appearance","skeletonGroup","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,2BAA2B,CAACC;IACvC,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAE,GAAGF;IAElC,MAAMG,gBAAgBL,MAAMM,OAAO,CACjC,IAAO,CAAA;YACLH;YACAC;QACF,CAAA,GACA;QAACD;QAAWC;KAAW;IAGzB,OAAO;QAAEC;IAAc;AACzB,EAAE"}
1	+ {"version":3,"sources":["../src/components/Skeleton/useSkeletonContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SkeletonContextValues, SkeletonState } from '../Skeleton';\n\nexport const useSkeletonContextValues = (state: SkeletonState): SkeletonContextValues => {\n const { animation, appearance } = state;\n\n const skeletonGroup = React.useMemo(\n () => ({\n animation,\n appearance,\n }),\n [animation, appearance],\n );\n\n return { skeletonGroup };\n};\n"],"names":["React","useSkeletonContextValues","state","animation","appearance","skeletonGroup","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,2BAA2B,CAACC;IACvC,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAE,GAAGF;IAElC,MAAMG,gBAAgBL,MAAMM,OAAO,CACjC,IAAO,CAAA;YACLH;YACAC;QACF,CAAA,GACA;QAACD;QAAWC;KAAW;IAGzB,OAAO;QAAEC;IAAc;AACzB,EAAE"}

package/lib/components/Skeleton/useSkeletonStyles.styles.js CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import { __styles, mergeClasses } from '@griffel/react';
 export const skeletonClassNames = {
   root: 'fui-Skeleton'

package/lib/components/Skeleton/useSkeletonStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","mc9l5x","d","useSkeletonStyles_unstable","state","styles","className","as"],"sources":["useSkeletonStyles.styles.js"],"sourcesContent":["~~import~~ { makeStyles, mergeClasses } from '@griffel/react';\nexport const skeletonClassNames = {\n root: 'fui-Skeleton'\n};\nconst useStyles = makeStyles({\n blockStyling: {\n display: 'block'\n }\n});\n/*\n Apply styling to the Skeleton slots based on the state\n */ export const useSkeletonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAK,YAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,kBAAkB,CAACC,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACS,EAAE,KAAK,MAAM,IAAIF,MAAM,CAACL,YAAY,EAAEI,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EACnI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","mc9l5x","d","useSkeletonStyles_unstable","state","styles","className","as"],"sources":["useSkeletonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const skeletonClassNames = {\n root: 'fui-Skeleton'\n};\nconst useStyles = makeStyles({\n blockStyling: {\n display: 'block'\n }\n});\n/*\n Apply styling to the Skeleton slots based on the state\n */ export const useSkeletonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAK,YAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,kBAAkB,CAACC,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACS,EAAE,KAAK,MAAM,IAAIF,MAAM,CAACL,YAAY,EAAEI,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EACnI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/Skeleton/useSkeletonStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 export const skeletonClassNames = {
     root: 'fui-Skeleton'

package/lib/components/Skeleton/useSkeletonStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Skeleton/useSkeletonStyles.styles.ts"],"sourcesContent":["~~import~~ { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonSlots, SkeletonState } from './Skeleton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nexport const skeletonClassNames: SlotClassNames<SkeletonSlots> = {\n root: 'fui-Skeleton',\n};\n\nconst useStyles = makeStyles({\n blockStyling: {\n display: 'block',\n },\n});\n\n/*\n Apply styling to the Skeleton slots based on the state\n */\nexport const useSkeletonStyles_unstable = (state: SkeletonState): SkeletonState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n skeletonClassNames.root,\n state.root.as === 'span' && styles.blockStyling,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","display","useSkeletonStyles_unstable","state","styles","className","as"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BK,cAAc;QACZC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASL;IAEfI,MAAML,IAAI,CAACO,SAAS,GAAGT,aACrBC,mBAAmBC,IAAI,EACvBK,MAAML,IAAI,CAACQ,EAAE,KAAK,UAAUF,OAAOJ,YAAY,EAC/CG,MAAML,IAAI,CAACO,SAAS;IAGtB,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/Skeleton/useSkeletonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonSlots, SkeletonState } from './Skeleton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nexport const skeletonClassNames: SlotClassNames<SkeletonSlots> = {\n root: 'fui-Skeleton',\n};\n\nconst useStyles = makeStyles({\n blockStyling: {\n display: 'block',\n },\n});\n\n/*\n Apply styling to the Skeleton slots based on the state\n */\nexport const useSkeletonStyles_unstable = (state: SkeletonState): SkeletonState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n skeletonClassNames.root,\n state.root.as === 'span' && styles.blockStyling,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","display","useSkeletonStyles_unstable","state","styles","className","as"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BK,cAAc;QACZC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASL;IAEfI,MAAML,IAAI,CAACO,SAAS,GAAGT,aACrBC,mBAAmBC,IAAI,EACvBK,MAAML,IAAI,CAACQ,EAAE,KAAK,UAAUF,OAAOJ,YAAY,EAC/CG,MAAML,IAAI,CAACO,SAAS;IAGtB,OAAOF;AACT,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useSkeletonItem_unstable } from './useSkeletonItem';
 import { renderSkeletonItem_unstable } from './renderSkeletonItem';

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/SkeletonItem/SkeletonItem.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { useSkeletonItem_unstable } from './useSkeletonItem';\nimport { renderSkeletonItem_unstable } from './renderSkeletonItem';\nimport { useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';\nimport type { SkeletonItemProps } from './SkeletonItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nexport const SkeletonItem: ForwardRefComponent<SkeletonItemProps> = React.forwardRef((props, ref) => {\n const state = useSkeletonItem_unstable(props, ref);\n\n useSkeletonItemStyles_unstable(state);\n useCustomStyleHook_unstable('useSkeletonItemStyles_unstable')(state);\n\n return renderSkeletonItem_unstable(state);\n});\n\nSkeletonItem.displayName = 'SkeletonItem';\n"],"names":["React","useSkeletonItem_unstable","renderSkeletonItem_unstable","useSkeletonItemStyles_unstable","useCustomStyleHook_unstable","SkeletonItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CL,+BAA+BM;IAC/BL,4BAA4B,kCAAkCK;IAE9D,OAAOP,4BAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/SkeletonItem/SkeletonItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSkeletonItem_unstable } from './useSkeletonItem';\nimport { renderSkeletonItem_unstable } from './renderSkeletonItem';\nimport { useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';\nimport type { SkeletonItemProps } from './SkeletonItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nexport const SkeletonItem: ForwardRefComponent<SkeletonItemProps> = React.forwardRef((props, ref) => {\n const state = useSkeletonItem_unstable(props, ref);\n\n useSkeletonItemStyles_unstable(state);\n useCustomStyleHook_unstable('useSkeletonItemStyles_unstable')(state);\n\n return renderSkeletonItem_unstable(state);\n});\n\nSkeletonItem.displayName = 'SkeletonItem';\n"],"names":["React","useSkeletonItem_unstable","renderSkeletonItem_unstable","useSkeletonItemStyles_unstable","useCustomStyleHook_unstable","SkeletonItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CL,+BAA+BM;IAC/BL,4BAA4B,kCAAkCK;IAE9D,OAAOP,4BAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

package/lib/components/SkeletonItem/useSkeletonItem.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useSkeletonContext } from '../../contexts/SkeletonContext';

package/lib/components/SkeletonItem/useSkeletonItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItem.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\nimport type { SkeletonItemProps, SkeletonItemState } from './SkeletonItem.types';\n\n/*\n Create the state required to render SkeletonItem.\n \n The returned state can be modified with hooks such as useSkeletonItemStyles_unstable,\n * before being passed to renderSkeletonItem_unstable.\n \n @param props - props from this instance of SkeletonItem\n * @param ref - reference to root HTMLElement of SkeletonItem\n */\nexport const useSkeletonItem_unstable = (props: SkeletonItemProps, ref: React.Ref<HTMLElement>): SkeletonItemState => {\n const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n const {\n animation = contextAnimation ?? 'wave',\n appearance = contextAppearance ?? 'opaque',\n size = 16,\n shape = 'rectangle',\n } = props;\n\n const 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 return { appearance, animation, size, shape, components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeletonItem_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","root","always","elementType","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,kBAAkB,QAAQ,iCAAiC;AAGpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,GAAGP;IACvE,MAAM,EACJI,YAAYC,6BAAAA,8BAAAA,mBAAoB,MAAM,EACtCC,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CC,OAAO,EAAE,EACTC,QAAQ,WAAW,EACpB,GAAGP;IAEJ,MAAMQ,OAAOX,KAAKY,MAAM,CACtBb,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACL,GAAGD,KAAK;IACV,IACA;QAAEU,aAAa;IAAM;IAEvB,OAAO;QAAEN;QAAYF;QAAWI;QAAMC;QAAOI,YAAY;YAAEH,MAAM;QAAM;QAAGA;IAAK;AACjF,EAAE"}
1	+ {"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\nimport type { SkeletonItemProps, SkeletonItemState } from './SkeletonItem.types';\n\n/*\n Create the state required to render SkeletonItem.\n \n The returned state can be modified with hooks such as useSkeletonItemStyles_unstable,\n * before being passed to renderSkeletonItem_unstable.\n \n @param props - props from this instance of SkeletonItem\n * @param ref - reference to root HTMLElement of SkeletonItem\n */\nexport const useSkeletonItem_unstable = (props: SkeletonItemProps, ref: React.Ref<HTMLElement>): SkeletonItemState => {\n const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n const {\n animation = contextAnimation ?? 'wave',\n appearance = contextAppearance ?? 'opaque',\n size = 16,\n shape = 'rectangle',\n } = props;\n\n const 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 return { appearance, animation, size, shape, components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeletonItem_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","root","always","elementType","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,kBAAkB,QAAQ,iCAAiC;AAGpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,GAAGP;IACvE,MAAM,EACJI,YAAYC,6BAAAA,8BAAAA,mBAAoB,MAAM,EACtCC,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CC,OAAO,EAAE,EACTC,QAAQ,WAAW,EACpB,GAAGP;IAEJ,MAAMQ,OAAOX,KAAKY,MAAM,CACtBb,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACL,GAAGD,KAAK;IACV,IACA;QAAEU,aAAa;IAAM;IAEvB,OAAO;QAAEN;QAAYF;QAAWI;QAAMC;QAAOI,YAAY;YAAEH,MAAM;QAAM;QAAGA;IAAK;AACjF,EAAE"}

package/lib/components/SkeletonItem/useSkeletonItemStyles.styles.js CHANGED Viewed

@@ -1,3 +1,5 @@
+'use client';
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const skeletonItemClassNames = {

package/lib/components/SkeletonItem/useSkeletonItemStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","qhf8xq","B68tc82","Bmxbyg5","Bpg54ce","Bsft5z2","ap17g6","E3zdtr","By385i5","Eqx8gd","B1piin3","bn5sak","B58onuk","s9ouvv","xr36ep","Bitv4sc","Jx5sug","Hzyzrh","wave","De3pzq","Br128sd","h62rwi","b1kco5","oi31me","pulse","Bjyk6c5","translucent","translucentPulse","blockStyling","mc9l5x","d","p","m","k","useRectangleStyles","Bqenvij","a9b677","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"sources":["useSkeletonItemStyles.styles.js"],"sourcesContent":["~~import~~ { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const skeletonItemClassNames = {\n root: 'fui-SkeletonItem'\n};\nconst skeletonWaveAnimation = {\n to: {\n transform: 'translate(100%)'\n }\n};\nconst skeletonPulseAnimation = {\n '0%': {\n opacity: '1'\n },\n '50%': {\n opacity: '0.4'\n },\n '100%': {\n opacity: '1'\n }\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n position: 'relative',\n overflow: 'hidden',\n '::after': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n inset: '0',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationTimingFunction: 'ease-in-out',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1'\n }\n }\n },\n wave: {\n backgroundColor: tokens.colorNeutralStencil1,\n '::after': {\n animationName: skeletonWaveAnimation,\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralStencil1} 0%,\n ${tokens.colorNeutralStencil2} 50%,\n ${tokens.colorNeutralStencil1} 100%)`,\n transform: 'translate(-100%)',\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'WindowText'\n }\n }\n },\n pulse: {\n '::after': {\n animationName: skeletonPulseAnimation,\n animationDuration: '1s',\n backgroundColor: tokens.colorNeutralStencil1\n }\n },\n translucent: {\n backgroundColor: tokens.colorNeutralStencil1Alpha,\n '::after': {\n backgroundImage: `linear-gradient(\n to right,\n transparent 0%,\n ${tokens.colorNeutralStencil1Alpha} 50%,\n transparent 100%)`\n }\n },\n translucentPulse: {\n backgroundColor: 'none',\n '::after': {\n backgroundColor: tokens.colorNeutralStencil1Alpha\n }\n },\n blockStyling: {\n display: 'block'\n }\n});\nconst useRectangleStyles = makeStyles({\n root: {\n width: '100%',\n borderRadius: '4px'\n },\n 8: {\n height: '8px'\n },\n 12: {\n height: '12px'\n },\n 16: {\n height: '16px'\n },\n 20: {\n height: '20px'\n },\n 24: {\n height: '24px'\n },\n 28: {\n height: '28px'\n },\n 32: {\n height: '32px'\n },\n 36: {\n height: '36px'\n },\n 40: {\n height: '40px'\n },\n 48: {\n height: '48px'\n },\n 56: {\n height: '56px'\n },\n 64: {\n height: '64px'\n },\n 72: {\n height: '72px'\n },\n 96: {\n height: '96px'\n },\n 120: {\n height: '120px'\n },\n 128: {\n height: '128px'\n }\n});\nconst useSizeStyles = makeStyles({\n 8: {\n width: '8px',\n height: '8px'\n },\n 12: {\n width: '12px',\n height: '12px'\n },\n 16: {\n width: '16px',\n height: '16px'\n },\n 20: {\n width: '20px',\n height: '20px'\n },\n 24: {\n width: '24px',\n height: '24px'\n },\n 28: {\n width: '28px',\n height: '28px'\n },\n 32: {\n width: '32px',\n height: '32px'\n },\n 36: {\n width: '36px',\n height: '36px'\n },\n 40: {\n width: '40px',\n height: '40px'\n },\n 48: {\n width: '48px',\n height: '48px'\n },\n 56: {\n width: '56px',\n height: '56px'\n },\n 64: {\n width: '64px',\n height: '64px'\n },\n 72: {\n width: '72px',\n height: '72px'\n },\n 96: {\n width: '96px',\n height: '96px'\n },\n 120: {\n width: '120px',\n height: '120px'\n },\n 128: {\n width: '128px',\n height: '128px'\n }\n});\nconst useCircleSizeStyles = makeStyles({\n root: {\n borderRadius: '50%'\n }\n});\n/\n Apply styling to the SkeletonItem slots based on the state\n */ export const useSkeletonItemStyles_unstable = (state)=>{\n 'use no memo';\n const { animation, appearance, size, shape } = state;\n const rootStyles = useStyles();\n const rectStyles = useRectangleStyles();\n const sizeStyles = useSizeStyles();\n const circleStyles = useCircleSizeStyles();\n state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, state.root.as === 'span' && rootStyles.blockStyling, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,qBAAqB,GAAG;EAC1BC,EAAE,EAAE;IACAC,SAAS,EAAE;EACf;AACJ,CAAC;AACD,MAAMC,sBAAsB,GAAG;EAC3B,IAAI,EAAE;IACFC,OAAO,EAAE;EACb,CAAC;EACD,KAAK,EAAE;IACHA,OAAO,EAAE;EACb,CAAC;EACD,MAAM,EAAE;IACJA,OAAO,EAAE;EACb;AACJ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGV,QAAA;EAAAI,IAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAJ,OAAA;IAAAN,MAAA;IAAAW,OAAA;EAAA;EAAAC,WAAA;IAAAP,MAAA;IAAAE,MAAA;EAAA;EAAAM,gBAAA;IAAAR,MAAA;IAAAM,OAAA;EAAA;EAAAG,YAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CA2DrB,CAAC;AACF,MAAMC,kBAAkB,gBAAG5C,QAAA;EAAA;IAAA6C,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAAzC,IAAA;IAAA0C,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAX,CAAA;IAAAC,CAAA;EAAA;AAAA,CAqD1B,CAAC;AACF,MAAMW,aAAa,gBAAGpD,QAAA;EAAA;IAAA8C,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAiErB,CAAC;AACF,MAAMa,mBAAmB,gBAAGrD,QAAA;EAAAI,IAAA;IAAA2C,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAX,CAAA;IAAAC,CAAA;EAAA;AAAA,CAI3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMa,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGJ,KAAK;EACpD,MAAMK,UAAU,GAAGlD,SAAS,CAAC,CAAC;EAC9B,MAAMmD,UAAU,GAAGjB,kBAAkB,CAAC,CAAC;EACvC,MAAMkB,UAAU,GAAGV,aAAa,CAAC,CAAC;EAClC,MAAMW,YAAY,GAAGV,mBAAmB,CAAC,CAAC;EAC1CE,KAAK,CAACnD,IAAI,CAAC4D,SAAS,GAAG/D,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEwD,UAAU,CAACxD,IAAI,EAAEmD,KAAK,CAACnD,IAAI,CAAC6D,EAAE,KAAK,MAAM,IAAIL,UAAU,CAACtB,YAAY,EAAEkB,SAAS,KAAK,MAAM,IAAII,UAAU,CAAChC,IAAI,EAAE4B,SAAS,KAAK,OAAO,IAAII,UAAU,CAAC1B,KAAK,EAAEuB,UAAU,KAAK,aAAa,IAAIG,UAAU,CAACxB,WAAW,EAAEoB,SAAS,KAAK,OAAO,IAAIC,UAAU,KAAK,aAAa,IAAIG,UAAU,CAACvB,gBAAgB,EAAEsB,KAAK,KAAK,WAAW,IAAIE,UAAU,CAACzD,IAAI,EAAEuD,KAAK,KAAK,WAAW,IAAIE,UAAU,CAACH,IAAI,CAAC,EAAEC,KAAK,KAAK,QAAQ,IAAIG,UAAU,CAACJ,IAAI,CAAC,EAAEC,KAAK,KAAK,QAAQ,IAAII,YAAY,CAAC3D,IAAI,EAAEuD,KAAK,KAAK,QAAQ,IAAIG,UAAU,CAACJ,IAAI,CAAC,EAAEH,KAAK,CAACnD,IAAI,CAAC4D,SAAS,CAAC;EAC5kB,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","qhf8xq","B68tc82","Bmxbyg5","Bpg54ce","Bsft5z2","ap17g6","E3zdtr","By385i5","Eqx8gd","B1piin3","bn5sak","B58onuk","s9ouvv","xr36ep","Bitv4sc","Jx5sug","Hzyzrh","wave","De3pzq","Br128sd","h62rwi","b1kco5","oi31me","pulse","Bjyk6c5","translucent","translucentPulse","blockStyling","mc9l5x","d","p","m","k","useRectangleStyles","Bqenvij","a9b677","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"sources":["useSkeletonItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const skeletonItemClassNames = {\n root: 'fui-SkeletonItem'\n};\nconst skeletonWaveAnimation = {\n to: {\n transform: 'translate(100%)'\n }\n};\nconst skeletonPulseAnimation = {\n '0%': {\n opacity: '1'\n },\n '50%': {\n opacity: '0.4'\n },\n '100%': {\n opacity: '1'\n }\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n position: 'relative',\n overflow: 'hidden',\n '::after': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n inset: '0',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationTimingFunction: 'ease-in-out',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1'\n }\n }\n },\n wave: {\n backgroundColor: tokens.colorNeutralStencil1,\n '::after': {\n animationName: skeletonWaveAnimation,\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralStencil1} 0%,\n ${tokens.colorNeutralStencil2} 50%,\n ${tokens.colorNeutralStencil1} 100%)`,\n transform: 'translate(-100%)',\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'WindowText'\n }\n }\n },\n pulse: {\n '::after': {\n animationName: skeletonPulseAnimation,\n animationDuration: '1s',\n backgroundColor: tokens.colorNeutralStencil1\n }\n },\n translucent: {\n backgroundColor: tokens.colorNeutralStencil1Alpha,\n '::after': {\n backgroundImage: `linear-gradient(\n to right,\n transparent 0%,\n ${tokens.colorNeutralStencil1Alpha} 50%,\n transparent 100%)`\n }\n },\n translucentPulse: {\n backgroundColor: 'none',\n '::after': {\n backgroundColor: tokens.colorNeutralStencil1Alpha\n }\n },\n blockStyling: {\n display: 'block'\n }\n});\nconst useRectangleStyles = makeStyles({\n root: {\n width: '100%',\n borderRadius: '4px'\n },\n 8: {\n height: '8px'\n },\n 12: {\n height: '12px'\n },\n 16: {\n height: '16px'\n },\n 20: {\n height: '20px'\n },\n 24: {\n height: '24px'\n },\n 28: {\n height: '28px'\n },\n 32: {\n height: '32px'\n },\n 36: {\n height: '36px'\n },\n 40: {\n height: '40px'\n },\n 48: {\n height: '48px'\n },\n 56: {\n height: '56px'\n },\n 64: {\n height: '64px'\n },\n 72: {\n height: '72px'\n },\n 96: {\n height: '96px'\n },\n 120: {\n height: '120px'\n },\n 128: {\n height: '128px'\n }\n});\nconst useSizeStyles = makeStyles({\n 8: {\n width: '8px',\n height: '8px'\n },\n 12: {\n width: '12px',\n height: '12px'\n },\n 16: {\n width: '16px',\n height: '16px'\n },\n 20: {\n width: '20px',\n height: '20px'\n },\n 24: {\n width: '24px',\n height: '24px'\n },\n 28: {\n width: '28px',\n height: '28px'\n },\n 32: {\n width: '32px',\n height: '32px'\n },\n 36: {\n width: '36px',\n height: '36px'\n },\n 40: {\n width: '40px',\n height: '40px'\n },\n 48: {\n width: '48px',\n height: '48px'\n },\n 56: {\n width: '56px',\n height: '56px'\n },\n 64: {\n width: '64px',\n height: '64px'\n },\n 72: {\n width: '72px',\n height: '72px'\n },\n 96: {\n width: '96px',\n height: '96px'\n },\n 120: {\n width: '120px',\n height: '120px'\n },\n 128: {\n width: '128px',\n height: '128px'\n }\n});\nconst useCircleSizeStyles = makeStyles({\n root: {\n borderRadius: '50%'\n }\n});\n/\n Apply styling to the SkeletonItem slots based on the state\n */ export const useSkeletonItemStyles_unstable = (state)=>{\n 'use no memo';\n const { animation, appearance, size, shape } = state;\n const rootStyles = useStyles();\n const rectStyles = useRectangleStyles();\n const sizeStyles = useSizeStyles();\n const circleStyles = useCircleSizeStyles();\n state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, state.root.as === 'span' && rootStyles.blockStyling, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/SkeletonItem/useSkeletonItemStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const skeletonItemClassNames = {

package/lib/components/SkeletonItem/useSkeletonItemStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItemStyles.styles.ts"],"sourcesContent":["~~import~~ { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonItemSlots, SkeletonItemState } from './SkeletonItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const skeletonItemClassNames: SlotClassNames<SkeletonItemSlots> = {\n root: 'fui-SkeletonItem',\n};\n\nconst skeletonWaveAnimation = {\n to: {\n transform: 'translate(100%)',\n },\n};\n\nconst skeletonPulseAnimation = {\n '0%': {\n opacity: '1',\n },\n '50%': {\n opacity: '0.4',\n },\n '100%': {\n opacity: '1',\n },\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n overflow: 'hidden',\n\n '::after': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n inset: '0',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationTimingFunction: 'ease-in-out',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n },\n wave: {\n backgroundColor: tokens.colorNeutralStencil1,\n\n '::after': {\n animationName: skeletonWaveAnimation,\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralStencil1} 0%,\n ${tokens.colorNeutralStencil2} 50%,\n ${tokens.colorNeutralStencil1} 100%)`,\n transform: 'translate(-100%)',\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'WindowText',\n },\n },\n },\n pulse: {\n '::after': {\n animationName: skeletonPulseAnimation,\n animationDuration: '1s',\n backgroundColor: tokens.colorNeutralStencil1,\n },\n },\n translucent: {\n backgroundColor: tokens.colorNeutralStencil1Alpha,\n\n '::after': {\n backgroundImage: `linear-gradient(\n to right,\n transparent 0%,\n ${tokens.colorNeutralStencil1Alpha} 50%,\n transparent 100%)`,\n },\n },\n translucentPulse: {\n backgroundColor: 'none',\n\n '::after': {\n backgroundColor: tokens.colorNeutralStencil1Alpha,\n },\n },\n blockStyling: {\n display: 'block',\n },\n});\n\nconst useRectangleStyles = makeStyles({\n root: {\n width: '100%',\n borderRadius: '4px',\n },\n 8: { height: '8px' },\n 12: { height: '12px' },\n 16: { height: '16px' },\n 20: { height: '20px' },\n 24: { height: '24px' },\n 28: { height: '28px' },\n 32: { height: '32px' },\n 36: { height: '36px' },\n 40: { height: '40px' },\n 48: { height: '48px' },\n 56: { height: '56px' },\n 64: { height: '64px' },\n 72: { height: '72px' },\n 96: { height: '96px' },\n 120: { height: '120px' },\n 128: { height: '128px' },\n});\n\nconst useSizeStyles = makeStyles({\n 8: { width: '8px', height: '8px' },\n 12: { width: '12px', height: '12px' },\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useCircleSizeStyles = makeStyles({\n root: {\n borderRadius: '50%',\n },\n});\n\n/\n Apply styling to the SkeletonItem slots based on the state\n */\nexport const useSkeletonItemStyles_unstable = (state: SkeletonItemState): SkeletonItemState => {\n 'use no memo';\n\n const { animation, appearance, size, shape } = state;\n\n const rootStyles = useStyles();\n const rectStyles = useRectangleStyles();\n const sizeStyles = useSizeStyles();\n const circleStyles = useCircleSizeStyles();\n\n state.root.className = mergeClasses(\n skeletonItemClassNames.root,\n rootStyles.root,\n state.root.as === 'span' && rootStyles.blockStyling,\n animation === 'wave' && rootStyles.wave,\n animation === 'pulse' && rootStyles.pulse,\n appearance === 'translucent' && rootStyles.translucent,\n animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse,\n shape === 'rectangle' && rectStyles.root,\n shape === 'rectangle' && rectStyles[size],\n shape === 'square' && sizeStyles[size],\n shape === 'circle' && circleStyles.root,\n shape === 'circle' && sizeStyles[size],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","position","overflow","content","display","inset","animationIterationCount","animationDuration","animationTimingFunction","wave","backgroundColor","colorNeutralStencil1","animationName","backgroundImage","colorNeutralStencil2","pulse","translucent","colorNeutralStencil1Alpha","translucentPulse","blockStyling","useRectangleStyles","width","borderRadius","height","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonItemSlots, SkeletonItemState } from './SkeletonItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const skeletonItemClassNames: SlotClassNames<SkeletonItemSlots> = {\n root: 'fui-SkeletonItem',\n};\n\nconst skeletonWaveAnimation = {\n to: {\n transform: 'translate(100%)',\n },\n};\n\nconst skeletonPulseAnimation = {\n '0%': {\n opacity: '1',\n },\n '50%': {\n opacity: '0.4',\n },\n '100%': {\n opacity: '1',\n },\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n overflow: 'hidden',\n\n '::after': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n inset: '0',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationTimingFunction: 'ease-in-out',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n },\n wave: {\n backgroundColor: tokens.colorNeutralStencil1,\n\n '::after': {\n animationName: skeletonWaveAnimation,\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralStencil1} 0%,\n ${tokens.colorNeutralStencil2} 50%,\n ${tokens.colorNeutralStencil1} 100%)`,\n transform: 'translate(-100%)',\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'WindowText',\n },\n },\n },\n pulse: {\n '::after': {\n animationName: skeletonPulseAnimation,\n animationDuration: '1s',\n backgroundColor: tokens.colorNeutralStencil1,\n },\n },\n translucent: {\n backgroundColor: tokens.colorNeutralStencil1Alpha,\n\n '::after': {\n backgroundImage: `linear-gradient(\n to right,\n transparent 0%,\n ${tokens.colorNeutralStencil1Alpha} 50%,\n transparent 100%)`,\n },\n },\n translucentPulse: {\n backgroundColor: 'none',\n\n '::after': {\n backgroundColor: tokens.colorNeutralStencil1Alpha,\n },\n },\n blockStyling: {\n display: 'block',\n },\n});\n\nconst useRectangleStyles = makeStyles({\n root: {\n width: '100%',\n borderRadius: '4px',\n },\n 8: { height: '8px' },\n 12: { height: '12px' },\n 16: { height: '16px' },\n 20: { height: '20px' },\n 24: { height: '24px' },\n 28: { height: '28px' },\n 32: { height: '32px' },\n 36: { height: '36px' },\n 40: { height: '40px' },\n 48: { height: '48px' },\n 56: { height: '56px' },\n 64: { height: '64px' },\n 72: { height: '72px' },\n 96: { height: '96px' },\n 120: { height: '120px' },\n 128: { height: '128px' },\n});\n\nconst useSizeStyles = makeStyles({\n 8: { width: '8px', height: '8px' },\n 12: { width: '12px', height: '12px' },\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useCircleSizeStyles = makeStyles({\n root: {\n borderRadius: '50%',\n },\n});\n\n/\n Apply styling to the SkeletonItem slots based on the state\n */\nexport const useSkeletonItemStyles_unstable = (state: SkeletonItemState): SkeletonItemState => {\n 'use no memo';\n\n const { animation, appearance, size, shape } = state;\n\n const rootStyles = useStyles();\n const rectStyles = useRectangleStyles();\n const sizeStyles = useSizeStyles();\n const circleStyles = useCircleSizeStyles();\n\n state.root.className = mergeClasses(\n skeletonItemClassNames.root,\n rootStyles.root,\n state.root.as === 'span' && rootStyles.blockStyling,\n animation === 'wave' && rootStyles.wave,\n animation === 'pulse' && rootStyles.pulse,\n appearance === 'translucent' && rootStyles.translucent,\n animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse,\n shape === 'rectangle' && rectStyles.root,\n shape === 'rectangle' && rectStyles[size],\n shape === 'square' && sizeStyles[size],\n shape === 'circle' && circleStyles.root,\n shape === 'circle' && sizeStyles[size],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","position","overflow","content","display","inset","animationIterationCount","animationDuration","animationTimingFunction","wave","backgroundColor","colorNeutralStencil1","animationName","backgroundImage","colorNeutralStencil2","pulse","translucent","colorNeutralStencil1Alpha","translucentPulse","blockStyling","useRectangleStyles","width","borderRadius","height","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"mappings":"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"}

package/lib/contexts/SkeletonContext.js CHANGED Viewed

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

package/lib/contexts/SkeletonContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/SkeletonContext.ts"],"sourcesContent":["~~import~~ * as React from 'react';\n\nconst SkeletonContext = React.createContext<SkeletonContextValue \| undefined>(undefined);\n\nexport interface SkeletonContextValue {\n animation?: 'wave' \| 'pulse';\n appearance?: 'opaque' \| 'translucent';\n}\n\nconst skeletonContextDefaultValue: SkeletonContextValue = {};\n\nexport const SkeletonContextProvider = SkeletonContext.Provider;\n\nexport const useSkeletonContext = (): SkeletonContextValue =>\n React.useContext(SkeletonContext) ?? skeletonContextDefaultValue;\n"],"names":["React","SkeletonContext","createContext","undefined","skeletonContextDefaultValue","SkeletonContextProvider","Provider","useSkeletonContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,kBAAkBD,MAAME,aAAa,CAAmCC;AAO9E,MAAMC,8BAAoD,CAAC;AAE3D,OAAO,MAAMC,0BAA0BJ,gBAAgBK,QAAQ,CAAC;AAEhE,OAAO,MAAMC,qBAAqB;QAChCP;WAAAA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,8BAAjBD,+BAAAA,oBAAqCI;EAA4B"}
1	+ {"version":3,"sources":["../src/contexts/SkeletonContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst SkeletonContext = React.createContext<SkeletonContextValue \| undefined>(undefined);\n\nexport interface SkeletonContextValue {\n animation?: 'wave' \| 'pulse';\n appearance?: 'opaque' \| 'translucent';\n}\n\nconst skeletonContextDefaultValue: SkeletonContextValue = {};\n\nexport const SkeletonContextProvider = SkeletonContext.Provider;\n\nexport const useSkeletonContext = (): SkeletonContextValue =>\n React.useContext(SkeletonContext) ?? skeletonContextDefaultValue;\n"],"names":["React","SkeletonContext","createContext","undefined","skeletonContextDefaultValue","SkeletonContextProvider","Provider","useSkeletonContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,kBAAkBD,MAAME,aAAa,CAAmCC;AAO9E,MAAMC,8BAAoD,CAAC;AAE3D,OAAO,MAAMC,0BAA0BJ,gBAAgBK,QAAQ,CAAC;AAEhE,OAAO,MAAMC,qBAAqB;QAChCP;WAAAA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,8BAAjBD,+BAAAA,oBAAqCI;EAA4B"}

package/lib-commonjs/components/Skeleton/Skeleton.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Skeleton/Skeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { useSkeleton_unstable } from './useSkeleton';\nimport { renderSkeleton_unstable } from './renderSkeleton';\nimport { useSkeletonStyles_unstable } from './useSkeletonStyles.styles';\nimport { useSkeletonContextValues } from './useSkeletonContextValues';\nimport type { SkeletonProps } from './Skeleton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Skeleton component - TODO: add more docs\n */\nexport const Skeleton: ForwardRefComponent<SkeletonProps> = React.forwardRef((props, ref) => {\n const state = useSkeleton_unstable(props, ref);\n const contextValues = useSkeletonContextValues(state);\n\n useSkeletonStyles_unstable(state);\n useCustomStyleHook_unstable('useSkeletonStyles_unstable')(state);\n\n return renderSkeleton_unstable(state, contextValues);\n});\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["React","useSkeleton_unstable","renderSkeleton_unstable","useSkeletonStyles_unstable","useSkeletonContextValues","useCustomStyleHook_unstable","Skeleton","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"~~;;;;+BAYaM;;;;;;;iEAZU~~,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;0CAC/B,6BAA6B;qCAG1B,kCAAkC;AAKvE,~~iBAAMA~~,WAAAA,GAA+CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQT,iCAAAA,EAAqBO,OAAOC;IAC1C,MAAME,oBAAgBP,kDAAAA,EAAyBM;QAE/CP,mDAAAA,EAA2BO;QAC3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOR,uCAAAA,EAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSkeleton_unstable } from './useSkeleton';\nimport { renderSkeleton_unstable } from './renderSkeleton';\nimport { useSkeletonStyles_unstable } from './useSkeletonStyles.styles';\nimport { useSkeletonContextValues } from './useSkeletonContextValues';\nimport type { SkeletonProps } from './Skeleton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Skeleton component - TODO: add more docs\n */\nexport const Skeleton: ForwardRefComponent<SkeletonProps> = React.forwardRef((props, ref) => {\n const state = useSkeleton_unstable(props, ref);\n const contextValues = useSkeletonContextValues(state);\n\n useSkeletonStyles_unstable(state);\n useCustomStyleHook_unstable('useSkeletonStyles_unstable')(state);\n\n return renderSkeleton_unstable(state, contextValues);\n});\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["React","useSkeleton_unstable","renderSkeleton_unstable","useSkeletonStyles_unstable","useSkeletonContextValues","useCustomStyleHook_unstable","Skeleton","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;0CAC/B,6BAA6B;qCAG1B,kCAAkC;AAKvE,MAAMM,WAAAA,WAAAA,GAA+CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQT,iCAAAA,EAAqBO,OAAOC;IAC1C,MAAME,oBAAgBP,kDAAAA,EAAyBM;QAE/CP,mDAAAA,EAA2BO;QAC3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOR,uCAAAA,EAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib-commonjs/components/Skeleton/useSkeleton.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Skeleton/useSkeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SkeletonProps, SkeletonState } from './Skeleton.types';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\n\n/*\n Create the state required to render Skeleton.\n \n The returned state can be modified with hooks such as useSkeletonStyles_unstable,\n * before being passed to renderSkeleton_unstable.\n \n @param props - props from this instance of Skeleton\n * @param ref - reference to root HTMLElement of Skeleton\n */\nexport const useSkeleton_unstable = (props: SkeletonProps, ref: React.Ref<HTMLElement>): SkeletonState => {\n const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n const { animation = contextAnimation ?? 'wave', appearance = contextAppearance ?? 'opaque' } = props;\n\n const 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 role: 'progressbar',\n 'aria-busy': true,\n ...props,\n }),\n { elementType: 'div' },\n );\n return { animation, appearance, components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","root","always","role","elementType","components"],"mappings":"~~;;;;+BAcaI~~;;;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;iCAExC,iCAAiC;AAW7D,6BAA6B,CAACC,OAAsBC;IACzD,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,OAAGP,mCAAAA;IACvE,MAAM,EAAEI,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoB,MAAM,EAAEC,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAAE,GAAGL;IAE/F,MAAMM,OAAOT,oBAAAA,CAAKU,MAAM,KACtBX,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACLO,MAAM;QACN,aAAa;QACb,GAAGR,KAAK;IACV,IACA;QAAES,aAAa;IAAM;IAEvB,OAAO;QAAEP;QAAWE;QAAYM,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AACpE,EAAE"}
1	+ {"version":3,"sources":["../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SkeletonProps, SkeletonState } from './Skeleton.types';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\n\n/*\n Create the state required to render Skeleton.\n \n The returned state can be modified with hooks such as useSkeletonStyles_unstable,\n * before being passed to renderSkeleton_unstable.\n \n @param props - props from this instance of Skeleton\n * @param ref - reference to root HTMLElement of Skeleton\n */\nexport const useSkeleton_unstable = (props: SkeletonProps, ref: React.Ref<HTMLElement>): SkeletonState => {\n const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n const { animation = contextAnimation ?? 'wave', appearance = contextAppearance ?? 'opaque' } = props;\n\n const 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 role: 'progressbar',\n 'aria-busy': true,\n ...props,\n }),\n { elementType: 'div' },\n );\n return { animation, appearance, components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","root","always","role","elementType","components"],"mappings":"AAAA;;;;;+BAgBaI;;;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;iCAExC,iCAAiC;AAW7D,6BAA6B,CAACC,OAAsBC;IACzD,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,OAAGP,mCAAAA;IACvE,MAAM,EAAEI,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoB,MAAM,EAAEC,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAAE,GAAGL;IAE/F,MAAMM,OAAOT,oBAAAA,CAAKU,MAAM,KACtBX,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACLO,MAAM;QACN,aAAa;QACb,GAAGR,KAAK;IACV,IACA;QAAES,aAAa;IAAM;IAEvB,OAAO;QAAEP;QAAWE;QAAYM,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AACpE,EAAE"}

package/lib-commonjs/components/Skeleton/useSkeletonContextValues.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Skeleton/useSkeletonContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Skeleton/useSkeletonContextValues.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { SkeletonContextValues, SkeletonState } from '../Skeleton';\n\nexport const useSkeletonContextValues = (state: SkeletonState): SkeletonContextValues => {\n const { animation, appearance } = state;\n\n const skeletonGroup = React.useMemo(\n () => ({\n animation,\n appearance,\n }),\n [animation, appearance],\n );\n\n return { skeletonGroup };\n};\n"],"names":["React","useSkeletonContextValues","state","animation","appearance","skeletonGroup","useMemo"],"mappings":"~~;;;;+BAGaC;;;;;;;iEAHU~~,QAAQ;AAGxB,~~iCAAiC~~,CAACC;IACvC,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAE,GAAGF;IAElC,MAAMG,gBAAgBL,OAAMM,OAAO,CACjC,IAAO,CAAA;YACLH;YACAC;SACF,CAAA,EACA;QAACD;QAAWC;KAAW;IAGzB,OAAO;QAAEC;IAAc;AACzB,EAAE"}
1	+ {"version":3,"sources":["../src/components/Skeleton/useSkeletonContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SkeletonContextValues, SkeletonState } from '../Skeleton';\n\nexport const useSkeletonContextValues = (state: SkeletonState): SkeletonContextValues => {\n const { animation, appearance } = state;\n\n const skeletonGroup = React.useMemo(\n () => ({\n animation,\n appearance,\n }),\n [animation, appearance],\n );\n\n return { skeletonGroup };\n};\n"],"names":["React","useSkeletonContextValues","state","animation","appearance","skeletonGroup","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,MAAMC,2BAA2B,CAACC;IACvC,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAE,GAAGF;IAElC,MAAMG,gBAAgBL,OAAMM,OAAO,CACjC,IAAO,CAAA;YACLH;YACAC;SACF,CAAA,EACA;QAACD;QAAWC;KAAW;IAGzB,OAAO;QAAEC;IAAc;AACzB,EAAE"}

package/lib-commonjs/components/Skeleton/useSkeletonStyles.styles.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Skeleton/useSkeletonStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useSkeletonStyles.styles.js"],"sourcesContent":["~~import~~ { makeStyles, mergeClasses } from '@griffel/react';\nexport const skeletonClassNames = {\n root: 'fui-Skeleton'\n};\nconst useStyles = makeStyles({\n blockStyling: {\n display: 'block'\n }\n});\n/*\n Apply styling to the Skeleton slots based on the state\n */ export const useSkeletonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","mc9l5x","d","useSkeletonStyles_unstable","state","styles","className","as"],"mappings":"~~;;;;;;;;;;;IACaE~~,kBAAkB;;;~~IAUdM~~,~~0BAA0B;;;;uBAXF,~~gBAAgB;AAClD,2BAA2B;IAC9BL,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AAGS,~~mCAAoCE~~,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;IAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,OAAGV,mBAAY,EAACC,kBAAkB,CAACC,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACS,EAAE,KAAK,MAAM,IAAIF,MAAM,CAACL,YAAY,EAAEI,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;IACnI,OAAOF,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useSkeletonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const skeletonClassNames = {\n root: 'fui-Skeleton'\n};\nconst useStyles = makeStyles({\n blockStyling: {\n display: 'block'\n }\n});\n/*\n Apply styling to the Skeleton slots based on the state\n */ export const useSkeletonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","mc9l5x","d","useSkeletonStyles_unstable","state","styles","className","as"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,kBAAkB;;;8BAUY;eAA1BM;;;uBAXwB,gBAAgB;AAClD,2BAA2B;IAC9BL,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AAGS,oCAAoCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;IAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,OAAGV,mBAAY,EAACC,kBAAkB,CAACC,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACS,EAAE,KAAK,MAAM,IAAIF,MAAM,CAACL,YAAY,EAAEI,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;IACnI,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/Skeleton/useSkeletonStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Skeleton/useSkeletonStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Skeleton/useSkeletonStyles.styles.ts"],"sourcesContent":["~~import~~ { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonSlots, SkeletonState } from './Skeleton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nexport const skeletonClassNames: SlotClassNames<SkeletonSlots> = {\n root: 'fui-Skeleton',\n};\n\nconst useStyles = makeStyles({\n blockStyling: {\n display: 'block',\n },\n});\n\n/*\n Apply styling to the Skeleton slots based on the state\n */\nexport const useSkeletonStyles_unstable = (state: SkeletonState): SkeletonState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n skeletonClassNames.root,\n state.root.as === 'span' && styles.blockStyling,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","display","useSkeletonStyles_unstable","state","styles","className","as"],"mappings":"~~;;;;;;;;;;;IAGaE,kBAAAA~~;;;8BAaAK;;;;uBAhB4B,iBAAiB;AAGnD,~~2BAA0D~~;IAC/DJ,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BK,cAAc;QACZC,SAAS;IACX;AACF;AAKO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASL;IAEfI,MAAML,IAAI,CAACO,SAAS,OAAGT,mBAAAA,EACrBC,mBAAmBC,IAAI,EACvBK,MAAML,IAAI,CAACQ,EAAE,KAAK,UAAUF,OAAOJ,YAAY,EAC/CG,MAAML,IAAI,CAACO,SAAS;IAGtB,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/Skeleton/useSkeletonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonSlots, SkeletonState } from './Skeleton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nexport const skeletonClassNames: SlotClassNames<SkeletonSlots> = {\n root: 'fui-Skeleton',\n};\n\nconst useStyles = makeStyles({\n blockStyling: {\n display: 'block',\n },\n});\n\n/*\n Apply styling to the Skeleton slots based on the state\n */\nexport const useSkeletonStyles_unstable = (state: SkeletonState): SkeletonState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n skeletonClassNames.root,\n state.root.as === 'span' && styles.blockStyling,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","display","useSkeletonStyles_unstable","state","styles","className","as"],"mappings":"AAAA;;;;;;;;;;;;sBAKaE;;;8BAaAK;;;;uBAhB4B,iBAAiB;AAGnD,MAAML,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BK,cAAc;QACZC,SAAS;IACX;AACF;AAKO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASL;IAEfI,MAAML,IAAI,CAACO,SAAS,OAAGT,mBAAAA,EACrBC,mBAAmBC,IAAI,EACvBK,MAAML,IAAI,CAACQ,EAAE,KAAK,UAAUF,OAAOJ,YAAY,EAC/CG,MAAML,IAAI,CAACO,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/SkeletonItem/SkeletonItem.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/SkeletonItem/SkeletonItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/SkeletonItem/SkeletonItem.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { useSkeletonItem_unstable } from './useSkeletonItem';\nimport { renderSkeletonItem_unstable } from './renderSkeletonItem';\nimport { useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';\nimport type { SkeletonItemProps } from './SkeletonItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nexport const SkeletonItem: ForwardRefComponent<SkeletonItemProps> = React.forwardRef((props, ref) => {\n const state = useSkeletonItem_unstable(props, ref);\n\n useSkeletonItemStyles_unstable(state);\n useCustomStyleHook_unstable('useSkeletonItemStyles_unstable')(state);\n\n return renderSkeletonItem_unstable(state);\n});\n\nSkeletonItem.displayName = 'SkeletonItem';\n"],"names":["React","useSkeletonItem_unstable","renderSkeletonItem_unstable","useSkeletonItemStyles_unstable","useCustomStyleHook_unstable","SkeletonItem","forwardRef","props","ref","state","displayName"],"mappings":"~~;;;;+BAQaK;;;;;;;iEARU~~,QAAQ;iCACU,oBAAoB;oCACjB,uBAAuB;6CACpB,iCAAiC;qCAGpC,kCAAkC;AAEvE,~~qBAAMA~~,WAAAA,GAAuDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,~~QAAQR~~,~~6CAAAA~~,EAAyBM,OAAOC;QAE9CL,2DAAAA,EAA+BM;QAC/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOP,+CAAAA,EAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/SkeletonItem/SkeletonItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSkeletonItem_unstable } from './useSkeletonItem';\nimport { renderSkeletonItem_unstable } from './renderSkeletonItem';\nimport { useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';\nimport type { SkeletonItemProps } from './SkeletonItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nexport const SkeletonItem: ForwardRefComponent<SkeletonItemProps> = React.forwardRef((props, ref) => {\n const state = useSkeletonItem_unstable(props, ref);\n\n useSkeletonItemStyles_unstable(state);\n useCustomStyleHook_unstable('useSkeletonItemStyles_unstable')(state);\n\n return renderSkeletonItem_unstable(state);\n});\n\nSkeletonItem.displayName = 'SkeletonItem';\n"],"names":["React","useSkeletonItem_unstable","renderSkeletonItem_unstable","useSkeletonItemStyles_unstable","useCustomStyleHook_unstable","SkeletonItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCACU,oBAAoB;oCACjB,uBAAuB;6CACpB,iCAAiC;qCAGpC,kCAAkC;AAEvE,MAAMK,eAAAA,WAAAA,GAAuDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQR,yCAAAA,EAAyBM,OAAOC;QAE9CL,2DAAAA,EAA+BM;QAC/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOP,+CAAAA,EAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

package/lib-commonjs/components/SkeletonItem/useSkeletonItem.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/SkeletonItem/useSkeletonItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItem.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\nimport type { SkeletonItemProps, SkeletonItemState } from './SkeletonItem.types';\n\n/*\n Create the state required to render SkeletonItem.\n \n The returned state can be modified with hooks such as useSkeletonItemStyles_unstable,\n * before being passed to renderSkeletonItem_unstable.\n \n @param props - props from this instance of SkeletonItem\n * @param ref - reference to root HTMLElement of SkeletonItem\n */\nexport const useSkeletonItem_unstable = (props: SkeletonItemProps, ref: React.Ref<HTMLElement>): SkeletonItemState => {\n const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n const {\n animation = contextAnimation ?? 'wave',\n appearance = contextAppearance ?? 'opaque',\n size = 16,\n shape = 'rectangle',\n } = props;\n\n const 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 return { appearance, animation, size, shape, components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeletonItem_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","root","always","elementType","components"],"mappings":"~~;;;;+BAcaI~~;;;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;iCACxC,iCAAiC;AAY7D,iCAAiC,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,OAAGP,mCAAAA;IACvE,MAAM,EACJI,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoB,MAAM,EACtCC,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAC1CC,OAAO,EAAE,EACTC,QAAQ,WAAW,EACpB,GAAGP;IAEJ,MAAMQ,OAAOX,oBAAAA,CAAKY,MAAM,KACtBb,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACL,GAAGD,KAAK;IACV,IACA;QAAEU,aAAa;IAAM;IAEvB,OAAO;QAAEN;QAAYF;QAAWI;QAAMC;QAAOI,YAAY;YAAEH,MAAM;QAAM;QAAGA;IAAK;AACjF,EAAE"}
1	+ {"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\nimport type { SkeletonItemProps, SkeletonItemState } from './SkeletonItem.types';\n\n/*\n Create the state required to render SkeletonItem.\n \n The returned state can be modified with hooks such as useSkeletonItemStyles_unstable,\n * before being passed to renderSkeletonItem_unstable.\n \n @param props - props from this instance of SkeletonItem\n * @param ref - reference to root HTMLElement of SkeletonItem\n */\nexport const useSkeletonItem_unstable = (props: SkeletonItemProps, ref: React.Ref<HTMLElement>): SkeletonItemState => {\n const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n const {\n animation = contextAnimation ?? 'wave',\n appearance = contextAppearance ?? 'opaque',\n size = 16,\n shape = 'rectangle',\n } = props;\n\n const 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 return { appearance, animation, size, shape, components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeletonItem_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","root","always","elementType","components"],"mappings":"AAAA;;;;;+BAgBaI;;;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;iCACxC,iCAAiC;AAY7D,iCAAiC,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,OAAGP,mCAAAA;IACvE,MAAM,EACJI,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoB,MAAM,EACtCC,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAC1CC,OAAO,EAAE,EACTC,QAAQ,WAAW,EACpB,GAAGP;IAEJ,MAAMQ,OAAOX,oBAAAA,CAAKY,MAAM,KACtBb,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACL,GAAGD,KAAK;IACV,IACA;QAAEU,aAAa;IAAM;IAEvB,OAAO;QAAEN;QAAYF;QAAWI;QAAMC;QAAOI,YAAY;YAAEH,MAAM;QAAM;QAAGA;IAAK;AACjF,EAAE"}

package/lib-commonjs/components/SkeletonItem/useSkeletonItemStyles.styles.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/SkeletonItem/useSkeletonItemStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useSkeletonItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const skeletonItemClassNames = {\n root: 'fui-SkeletonItem'\n};\nconst skeletonWaveAnimation = {\n to: {\n transform: 'translate(100%)'\n }\n};\nconst skeletonPulseAnimation = {\n '0%': {\n opacity: '1'\n },\n '50%': {\n opacity: '0.4'\n },\n '100%': {\n opacity: '1'\n }\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n position: 'relative',\n overflow: 'hidden',\n '::after': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n inset: '0',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationTimingFunction: 'ease-in-out',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1'\n }\n }\n },\n wave: {\n backgroundColor: tokens.colorNeutralStencil1,\n '::after': {\n animationName: skeletonWaveAnimation,\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralStencil1} 0%,\n ${tokens.colorNeutralStencil2} 50%,\n ${tokens.colorNeutralStencil1} 100%)`,\n transform: 'translate(-100%)',\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'WindowText'\n }\n }\n },\n pulse: {\n '::after': {\n animationName: skeletonPulseAnimation,\n animationDuration: '1s',\n backgroundColor: tokens.colorNeutralStencil1\n }\n },\n translucent: {\n backgroundColor: tokens.colorNeutralStencil1Alpha,\n '::after': {\n backgroundImage: `linear-gradient(\n to right,\n transparent 0%,\n ${tokens.colorNeutralStencil1Alpha} 50%,\n transparent 100%)`\n }\n },\n translucentPulse: {\n backgroundColor: 'none',\n '::after': {\n backgroundColor: tokens.colorNeutralStencil1Alpha\n }\n },\n blockStyling: {\n display: 'block'\n }\n});\nconst useRectangleStyles = makeStyles({\n root: {\n width: '100%',\n borderRadius: '4px'\n },\n 8: {\n height: '8px'\n },\n 12: {\n height: '12px'\n },\n 16: {\n height: '16px'\n },\n 20: {\n height: '20px'\n },\n 24: {\n height: '24px'\n },\n 28: {\n height: '28px'\n },\n 32: {\n height: '32px'\n },\n 36: {\n height: '36px'\n },\n 40: {\n height: '40px'\n },\n 48: {\n height: '48px'\n },\n 56: {\n height: '56px'\n },\n 64: {\n height: '64px'\n },\n 72: {\n height: '72px'\n },\n 96: {\n height: '96px'\n },\n 120: {\n height: '120px'\n },\n 128: {\n height: '128px'\n }\n});\nconst useSizeStyles = makeStyles({\n 8: {\n width: '8px',\n height: '8px'\n },\n 12: {\n width: '12px',\n height: '12px'\n },\n 16: {\n width: '16px',\n height: '16px'\n },\n 20: {\n width: '20px',\n height: '20px'\n },\n 24: {\n width: '24px',\n height: '24px'\n },\n 28: {\n width: '28px',\n height: '28px'\n },\n 32: {\n width: '32px',\n height: '32px'\n },\n 36: {\n width: '36px',\n height: '36px'\n },\n 40: {\n width: '40px',\n height: '40px'\n },\n 48: {\n width: '48px',\n height: '48px'\n },\n 56: {\n width: '56px',\n height: '56px'\n },\n 64: {\n width: '64px',\n height: '64px'\n },\n 72: {\n width: '72px',\n height: '72px'\n },\n 96: {\n width: '96px',\n height: '96px'\n },\n 120: {\n width: '120px',\n height: '120px'\n },\n 128: {\n width: '128px',\n height: '128px'\n }\n});\nconst useCircleSizeStyles = makeStyles({\n root: {\n borderRadius: '50%'\n }\n});\n/\n Apply styling to the SkeletonItem slots based on the state\n */ export const useSkeletonItemStyles_unstable = (state)=>{\n 'use no memo';\n const { animation, appearance, size, shape } = state;\n const rootStyles = useStyles();\n const rectStyles = useRectangleStyles();\n const sizeStyles = useSizeStyles();\n const circleStyles = useCircleSizeStyles();\n state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, state.root.as === 'span' && rootStyles.blockStyling, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","qhf8xq","B68tc82","Bmxbyg5","Bpg54ce","Bsft5z2","ap17g6","E3zdtr","By385i5","Eqx8gd","B1piin3","bn5sak","B58onuk","s9ouvv","xr36ep","Bitv4sc","Jx5sug","Hzyzrh","wave","De3pzq","Br128sd","h62rwi","b1kco5","oi31me","pulse","Bjyk6c5","translucent","translucentPulse","blockStyling","mc9l5x","d","p","m","k","useRectangleStyles","Bqenvij","a9b677","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"mappings":"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"}
1	+ {"version":3,"sources":["useSkeletonItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const skeletonItemClassNames = {\n root: 'fui-SkeletonItem'\n};\nconst skeletonWaveAnimation = {\n to: {\n transform: 'translate(100%)'\n }\n};\nconst skeletonPulseAnimation = {\n '0%': {\n opacity: '1'\n },\n '50%': {\n opacity: '0.4'\n },\n '100%': {\n opacity: '1'\n }\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n position: 'relative',\n overflow: 'hidden',\n '::after': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n inset: '0',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationTimingFunction: 'ease-in-out',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1'\n }\n }\n },\n wave: {\n backgroundColor: tokens.colorNeutralStencil1,\n '::after': {\n animationName: skeletonWaveAnimation,\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralStencil1} 0%,\n ${tokens.colorNeutralStencil2} 50%,\n ${tokens.colorNeutralStencil1} 100%)`,\n transform: 'translate(-100%)',\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'WindowText'\n }\n }\n },\n pulse: {\n '::after': {\n animationName: skeletonPulseAnimation,\n animationDuration: '1s',\n backgroundColor: tokens.colorNeutralStencil1\n }\n },\n translucent: {\n backgroundColor: tokens.colorNeutralStencil1Alpha,\n '::after': {\n backgroundImage: `linear-gradient(\n to right,\n transparent 0%,\n ${tokens.colorNeutralStencil1Alpha} 50%,\n transparent 100%)`\n }\n },\n translucentPulse: {\n backgroundColor: 'none',\n '::after': {\n backgroundColor: tokens.colorNeutralStencil1Alpha\n }\n },\n blockStyling: {\n display: 'block'\n }\n});\nconst useRectangleStyles = makeStyles({\n root: {\n width: '100%',\n borderRadius: '4px'\n },\n 8: {\n height: '8px'\n },\n 12: {\n height: '12px'\n },\n 16: {\n height: '16px'\n },\n 20: {\n height: '20px'\n },\n 24: {\n height: '24px'\n },\n 28: {\n height: '28px'\n },\n 32: {\n height: '32px'\n },\n 36: {\n height: '36px'\n },\n 40: {\n height: '40px'\n },\n 48: {\n height: '48px'\n },\n 56: {\n height: '56px'\n },\n 64: {\n height: '64px'\n },\n 72: {\n height: '72px'\n },\n 96: {\n height: '96px'\n },\n 120: {\n height: '120px'\n },\n 128: {\n height: '128px'\n }\n});\nconst useSizeStyles = makeStyles({\n 8: {\n width: '8px',\n height: '8px'\n },\n 12: {\n width: '12px',\n height: '12px'\n },\n 16: {\n width: '16px',\n height: '16px'\n },\n 20: {\n width: '20px',\n height: '20px'\n },\n 24: {\n width: '24px',\n height: '24px'\n },\n 28: {\n width: '28px',\n height: '28px'\n },\n 32: {\n width: '32px',\n height: '32px'\n },\n 36: {\n width: '36px',\n height: '36px'\n },\n 40: {\n width: '40px',\n height: '40px'\n },\n 48: {\n width: '48px',\n height: '48px'\n },\n 56: {\n width: '56px',\n height: '56px'\n },\n 64: {\n width: '64px',\n height: '64px'\n },\n 72: {\n width: '72px',\n height: '72px'\n },\n 96: {\n width: '96px',\n height: '96px'\n },\n 120: {\n width: '120px',\n height: '120px'\n },\n 128: {\n width: '128px',\n height: '128px'\n }\n});\nconst useCircleSizeStyles = makeStyles({\n root: {\n borderRadius: '50%'\n }\n});\n/\n Apply styling to the SkeletonItem slots based on the state\n */ export const useSkeletonItemStyles_unstable = (state)=>{\n 'use no memo';\n const { animation, appearance, size, shape } = state;\n const rootStyles = useStyles();\n const rectStyles = useRectangleStyles();\n const sizeStyles = useSizeStyles();\n const circleStyles = useCircleSizeStyles();\n state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, state.root.as === 'span' && rootStyles.blockStyling, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","qhf8xq","B68tc82","Bmxbyg5","Bpg54ce","Bsft5z2","ap17g6","E3zdtr","By385i5","Eqx8gd","B1piin3","bn5sak","B58onuk","s9ouvv","xr36ep","Bitv4sc","Jx5sug","Hzyzrh","wave","De3pzq","Br128sd","h62rwi","b1kco5","oi31me","pulse","Bjyk6c5","translucent","translucentPulse","blockStyling","mc9l5x","d","p","m","k","useRectangleStyles","Bqenvij","a9b677","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"mappings":"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"}

package/lib-commonjs/components/SkeletonItem/useSkeletonItemStyles.styles.raw.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/SkeletonItem/useSkeletonItemStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItemStyles.styles.ts"],"sourcesContent":["~~import~~ { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonItemSlots, SkeletonItemState } from './SkeletonItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const skeletonItemClassNames: SlotClassNames<SkeletonItemSlots> = {\n root: 'fui-SkeletonItem',\n};\n\nconst skeletonWaveAnimation = {\n to: {\n transform: 'translate(100%)',\n },\n};\n\nconst skeletonPulseAnimation = {\n '0%': {\n opacity: '1',\n },\n '50%': {\n opacity: '0.4',\n },\n '100%': {\n opacity: '1',\n },\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n overflow: 'hidden',\n\n '::after': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n inset: '0',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationTimingFunction: 'ease-in-out',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n },\n wave: {\n backgroundColor: tokens.colorNeutralStencil1,\n\n '::after': {\n animationName: skeletonWaveAnimation,\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralStencil1} 0%,\n ${tokens.colorNeutralStencil2} 50%,\n ${tokens.colorNeutralStencil1} 100%)`,\n transform: 'translate(-100%)',\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'WindowText',\n },\n },\n },\n pulse: {\n '::after': {\n animationName: skeletonPulseAnimation,\n animationDuration: '1s',\n backgroundColor: tokens.colorNeutralStencil1,\n },\n },\n translucent: {\n backgroundColor: tokens.colorNeutralStencil1Alpha,\n\n '::after': {\n backgroundImage: `linear-gradient(\n to right,\n transparent 0%,\n ${tokens.colorNeutralStencil1Alpha} 50%,\n transparent 100%)`,\n },\n },\n translucentPulse: {\n backgroundColor: 'none',\n\n '::after': {\n backgroundColor: tokens.colorNeutralStencil1Alpha,\n },\n },\n blockStyling: {\n display: 'block',\n },\n});\n\nconst useRectangleStyles = makeStyles({\n root: {\n width: '100%',\n borderRadius: '4px',\n },\n 8: { height: '8px' },\n 12: { height: '12px' },\n 16: { height: '16px' },\n 20: { height: '20px' },\n 24: { height: '24px' },\n 28: { height: '28px' },\n 32: { height: '32px' },\n 36: { height: '36px' },\n 40: { height: '40px' },\n 48: { height: '48px' },\n 56: { height: '56px' },\n 64: { height: '64px' },\n 72: { height: '72px' },\n 96: { height: '96px' },\n 120: { height: '120px' },\n 128: { height: '128px' },\n});\n\nconst useSizeStyles = makeStyles({\n 8: { width: '8px', height: '8px' },\n 12: { width: '12px', height: '12px' },\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useCircleSizeStyles = makeStyles({\n root: {\n borderRadius: '50%',\n },\n});\n\n/\n Apply styling to the SkeletonItem slots based on the state\n */\nexport const useSkeletonItemStyles_unstable = (state: SkeletonItemState): SkeletonItemState => {\n 'use no memo';\n\n const { animation, appearance, size, shape } = state;\n\n const rootStyles = useStyles();\n const rectStyles = useRectangleStyles();\n const sizeStyles = useSizeStyles();\n const circleStyles = useCircleSizeStyles();\n\n state.root.className = mergeClasses(\n skeletonItemClassNames.root,\n rootStyles.root,\n state.root.as === 'span' && rootStyles.blockStyling,\n animation === 'wave' && rootStyles.wave,\n animation === 'pulse' && rootStyles.pulse,\n appearance === 'translucent' && rootStyles.translucent,\n animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse,\n shape === 'rectangle' && rectStyles.root,\n shape === 'rectangle' && rectStyles[size],\n shape === 'square' && sizeStyles[size],\n shape === 'circle' && circleStyles.root,\n shape === 'circle' && sizeStyles[size],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","position","overflow","content","display","inset","animationIterationCount","animationDuration","animationTimingFunction","wave","backgroundColor","colorNeutralStencil1","animationName","backgroundImage","colorNeutralStencil2","pulse","translucent","colorNeutralStencil1Alpha","translucentPulse","blockStyling","useRectangleStyles","width","borderRadius","height","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"mappings":"~~;;;;;;;;;;;IAKaG~~,sBAAAA;;;kCA8IAiC~~;eAAAA;;;~~uBAnJ4B,iBAAiB;4BAGnC,wBAAwB;AAExC,+BAAkE;IACvEhC,MAAM;AACR,EAAE;AAEF,MAAMC,wBAAwB;IAC5BC,IAAI;QACFC,WAAW;IACb;AACF;AAEA,MAAMC,yBAAyB;IAC7B,MAAM;QACJC,SAAS;IACX;IACA,OAAO;QACLA,SAAS;IACX;IACA,QAAQ;QACNA,SAAS;IACX;AACF;AAEA;;CAEC,GACD,MAAMC,gBAAYV,iBAAAA,EAAW;IAC3BI,MAAM;QACJO,UAAU;QACVC,UAAU;QAEV,WAAW;YACTC,SAAS;YACTC,SAAS;YACTH,UAAU;YACVI,OAAO;YACPC,yBAAyB;YACzBC,mBAAmB;YACnBC,yBAAyB;YACzB,sDAAsD;gBACpDD,mBAAmB;gBACnBD,yBAAyB;YAC3B;QACF;IACF;IACAG,MAAM;QACJC,iBAAiBlB,kBAAAA,CAAOmB,oBAAoB;QAE5C,WAAW;YACTC,eAAejB;YACfkB,iBAAiB,CAAC;;QAEhB,EAAErB,kBAAAA,CAAOmB,oBAAoB,CAAC;QAC9B,EAAEnB,kBAAAA,CAAOsB,oBAAoB,CAAC;QAC9B,EAAEtB,kBAAAA,CAAOmB,oBAAoB,CAAC,MAAM,CAAC;YACvCd,WAAW;YAEX,6CAA6C;gBAC3Ca,iBAAiB;YACnB;QACF;IACF;IACAK,OAAO;QACL,WAAW;YACTH,eAAed;YACfS,mBAAmB;YACnBG,iBAAiBlB,kBAAAA,CAAOmB,oBAAoB;QAC9C;IACF;IACAK,aAAa;QACXN,iBAAiBlB,kBAAAA,CAAOyB,yBAAyB;QAEjD,WAAW;YACTJ,iBAAiB,CAAC;;;MAGlB,EAAErB,kBAAAA,CAAOyB,yBAAyB,CAAC;uBAClB,CAAC;QACpB;IACF;IACAC,kBAAkB;QAChBR,iBAAiB;QAEjB,WAAW;YACTA,iBAAiBlB,kBAAAA,CAAOyB,yBAAyB;QACnD;IACF;IACAE,cAAc;QACZf,SAAS;IACX;AACF;AAEA,MAAMgB,~~yBAAqB9B~~,~~iBAAAA~~,EAAW;IACpCI,MAAM;QACJ2B,OAAO;QACPC,cAAc;IAChB;IACA,GAAG;QAAEC,QAAQ;IAAM;IACnB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,KAAK;QAAEA,QAAQ;IAAQ;IACvB,KAAK;QAAEA,QAAQ;IAAQ;AACzB;AAEA,MAAMC,oBAAgBlC,iBAAAA,EAAW;IAC/B,GAAG;QAAE+B,OAAO;QAAOE,QAAQ;IAAM;IACjC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,KAAK;QAAEF,OAAO;QAASE,QAAQ;IAAQ;IACvC,KAAK;QAAEF,OAAO;QAASE,QAAQ;IAAQ;AACzC;AAEA,MAAME,0BAAsBnC,iBAAAA,EAAW;IACrCI,MAAM;QACJ4B,cAAc;IAChB;AACF;AAKO,~~uCAAuC~~,~~CAACK~~;IAC7C;IAEA,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,MAAMK,aAAahC;IACnB,MAAMiC,aAAab;IACnB,MAAMc,aAAaV;IACnB,MAAMW,eAAeV;IAErBE,MAAMjC,IAAI,CAAC0C,SAAS,~~GAAG7C~~,~~uBAAAA~~,EACrBE,uBAAuBC,IAAI,EAC3BsC,WAAWtC,IAAI,EACfiC,MAAMjC,IAAI,CAAC2C,EAAE,KAAK,UAAUL,WAAWb,YAAY,EACnDS,cAAc,UAAUI,WAAWvB,IAAI,EACvCmB,cAAc,WAAWI,WAAWjB,KAAK,EACzCc,eAAe,iBAAiBG,WAAWhB,WAAW,EACtDY,cAAc,WAAWC,eAAe,iBAAiBG,WAAWd,gBAAgB,EACpFa,UAAU,eAAeE,WAAWvC,IAAI,EACxCqC,UAAU,eAAeE,UAAU,CAACH,KAAK,EACzCC,UAAU,YAAYG,UAAU,CAACJ,KAAK,EACtCC,UAAU,YAAYI,aAAazC,IAAI,EACvCqC,UAAU,YAAYG,UAAU,CAACJ,KAAK,EACtCH,MAAMjC,IAAI,CAAC0C,SAAS;IAGtB,OAAOT;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonItemSlots, SkeletonItemState } from './SkeletonItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const skeletonItemClassNames: SlotClassNames<SkeletonItemSlots> = {\n root: 'fui-SkeletonItem',\n};\n\nconst skeletonWaveAnimation = {\n to: {\n transform: 'translate(100%)',\n },\n};\n\nconst skeletonPulseAnimation = {\n '0%': {\n opacity: '1',\n },\n '50%': {\n opacity: '0.4',\n },\n '100%': {\n opacity: '1',\n },\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n overflow: 'hidden',\n\n '::after': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n inset: '0',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationTimingFunction: 'ease-in-out',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n },\n wave: {\n backgroundColor: tokens.colorNeutralStencil1,\n\n '::after': {\n animationName: skeletonWaveAnimation,\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralStencil1} 0%,\n ${tokens.colorNeutralStencil2} 50%,\n ${tokens.colorNeutralStencil1} 100%)`,\n transform: 'translate(-100%)',\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'WindowText',\n },\n },\n },\n pulse: {\n '::after': {\n animationName: skeletonPulseAnimation,\n animationDuration: '1s',\n backgroundColor: tokens.colorNeutralStencil1,\n },\n },\n translucent: {\n backgroundColor: tokens.colorNeutralStencil1Alpha,\n\n '::after': {\n backgroundImage: `linear-gradient(\n to right,\n transparent 0%,\n ${tokens.colorNeutralStencil1Alpha} 50%,\n transparent 100%)`,\n },\n },\n translucentPulse: {\n backgroundColor: 'none',\n\n '::after': {\n backgroundColor: tokens.colorNeutralStencil1Alpha,\n },\n },\n blockStyling: {\n display: 'block',\n },\n});\n\nconst useRectangleStyles = makeStyles({\n root: {\n width: '100%',\n borderRadius: '4px',\n },\n 8: { height: '8px' },\n 12: { height: '12px' },\n 16: { height: '16px' },\n 20: { height: '20px' },\n 24: { height: '24px' },\n 28: { height: '28px' },\n 32: { height: '32px' },\n 36: { height: '36px' },\n 40: { height: '40px' },\n 48: { height: '48px' },\n 56: { height: '56px' },\n 64: { height: '64px' },\n 72: { height: '72px' },\n 96: { height: '96px' },\n 120: { height: '120px' },\n 128: { height: '128px' },\n});\n\nconst useSizeStyles = makeStyles({\n 8: { width: '8px', height: '8px' },\n 12: { width: '12px', height: '12px' },\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useCircleSizeStyles = makeStyles({\n root: {\n borderRadius: '50%',\n },\n});\n\n/\n Apply styling to the SkeletonItem slots based on the state\n */\nexport const useSkeletonItemStyles_unstable = (state: SkeletonItemState): SkeletonItemState => {\n 'use no memo';\n\n const { animation, appearance, size, shape } = state;\n\n const rootStyles = useStyles();\n const rectStyles = useRectangleStyles();\n const sizeStyles = useSizeStyles();\n const circleStyles = useCircleSizeStyles();\n\n state.root.className = mergeClasses(\n skeletonItemClassNames.root,\n rootStyles.root,\n state.root.as === 'span' && rootStyles.blockStyling,\n animation === 'wave' && rootStyles.wave,\n animation === 'pulse' && rootStyles.pulse,\n appearance === 'translucent' && rootStyles.translucent,\n animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse,\n shape === 'rectangle' && rectStyles.root,\n shape === 'rectangle' && rectStyles[size],\n shape === 'square' && sizeStyles[size],\n shape === 'circle' && circleStyles.root,\n shape === 'circle' && sizeStyles[size],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","position","overflow","content","display","inset","animationIterationCount","animationDuration","animationTimingFunction","wave","backgroundColor","colorNeutralStencil1","animationName","backgroundImage","colorNeutralStencil2","pulse","translucent","colorNeutralStencil1Alpha","translucentPulse","blockStyling","useRectangleStyles","width","borderRadius","height","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"mappings":"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"}

package/lib-commonjs/contexts/SkeletonContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/contexts/SkeletonContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/SkeletonContext.ts"],"sourcesContent":["~~import~~ * as React from 'react';\n\nconst SkeletonContext = React.createContext<SkeletonContextValue \| undefined>(undefined);\n\nexport interface SkeletonContextValue {\n animation?: 'wave' \| 'pulse';\n appearance?: 'opaque' \| 'translucent';\n}\n\nconst skeletonContextDefaultValue: SkeletonContextValue = {};\n\nexport const SkeletonContextProvider = SkeletonContext.Provider;\n\nexport const useSkeletonContext = (): SkeletonContextValue =>\n React.useContext(SkeletonContext) ?? skeletonContextDefaultValue;\n"],"names":["React","SkeletonContext","createContext","undefined","skeletonContextDefaultValue","SkeletonContextProvider","Provider","useSkeletonContext","useContext"],"mappings":"~~;;;;;;;;;;;IAWaK,uBAAAA~~;;;sBAEAE;;;;;iEAbU,QAAQ;AAE/B,MAAMN,gCAAkBD,OAAME,aAAa,CAAmCC;AAO9E,MAAMC,8BAAoD,CAAC;AAEpD,~~gCAAgCH~~,gBAAgBK,QAAQ,CAAC;AAEzD,MAAMC,qBAAqB;QAChCP;WAAAA,CAAAA,oBAAAA,OAAMQ,UAAU,CAACP,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCI;EAA4B"}
1	+ {"version":3,"sources":["../src/contexts/SkeletonContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst SkeletonContext = React.createContext<SkeletonContextValue \| undefined>(undefined);\n\nexport interface SkeletonContextValue {\n animation?: 'wave' \| 'pulse';\n appearance?: 'opaque' \| 'translucent';\n}\n\nconst skeletonContextDefaultValue: SkeletonContextValue = {};\n\nexport const SkeletonContextProvider = SkeletonContext.Provider;\n\nexport const useSkeletonContext = (): SkeletonContextValue =>\n React.useContext(SkeletonContext) ?? skeletonContextDefaultValue;\n"],"names":["React","SkeletonContext","createContext","undefined","skeletonContextDefaultValue","SkeletonContextProvider","Provider","useSkeletonContext","useContext"],"mappings":"AAAA;;;;;;;;;;;;2BAaaK;;;sBAEAE;;;;;iEAbU,QAAQ;AAE/B,MAAMN,gCAAkBD,OAAME,aAAa,CAAmCC;AAO9E,MAAMC,8BAAoD,CAAC;AAEpD,MAAMC,0BAA0BJ,gBAAgBK,QAAQ,CAAC;AAEzD,MAAMC,qBAAqB;QAChCP;WAAAA,CAAAA,oBAAAA,OAAMQ,UAAU,CAACP,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCI;EAA4B"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-skeleton",
-  "version": "9.4.5",
+  "version": "9.4.7",
   "description": "Converged v9 Skeleton Component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,11 +18,11 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.4.5",
-    "@fluentui/react-jsx-runtime": "^9.2.0",
-    "@fluentui/react-shared-contexts": "^9.25.1",
+    "@fluentui/react-field": "^9.4.7",
+    "@fluentui/react-jsx-runtime": "^9.2.2",
+    "@fluentui/react-shared-contexts": "^9.25.2",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.24.1",
+    "@fluentui/react-utilities": "^9.25.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },