@fluentui/react-skeleton 9.4.10 → 9.4.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,12 +1,36 @@
1
1
  # Change Log - @fluentui/react-skeleton
2
2
 
3
- This log was last generated on Thu, 06 Nov 2025 14:57:01 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 17 Dec 2025 18:06:04 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.4.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.4.12)
8
+
9
+ Wed, 17 Dec 2025 18:06:04 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.4.11..@fluentui/react-skeleton_v9.4.12)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-field to v9.4.12 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
15
+ - Bump @fluentui/react-jsx-runtime to v9.3.4 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
16
+ - Bump @fluentui/react-utilities to v9.26.0 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
17
+
18
+ ## [9.4.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.4.11)
19
+
20
+ Tue, 11 Nov 2025 19:18:09 GMT
21
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.4.10..@fluentui/react-skeleton_v9.4.11)
22
+
23
+ ### Patches
24
+
25
+ - chore: Bump @griffel/react package. ([PR #35469](https://github.com/microsoft/fluentui/pull/35469) by estebanmu@microsoft.com)
26
+ - Bump @fluentui/react-field to v9.4.11 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
27
+ - Bump @fluentui/react-jsx-runtime to v9.3.3 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
28
+ - Bump @fluentui/react-shared-contexts to v9.26.0 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
29
+ - Bump @fluentui/react-utilities to v9.25.4 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
30
+
7
31
  ## [9.4.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.4.10)
8
32
 
9
- Thu, 06 Nov 2025 14:57:01 GMT
33
+ Thu, 06 Nov 2025 15:01:25 GMT
10
34
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.4.9..@fluentui/react-skeleton_v9.4.10)
11
35
 
12
36
  ### Patches
@@ -41,15 +41,15 @@ const useStyles = /*#__PURE__*/__styles({
41
41
  s9ouvv: "f18xs7ez",
42
42
  xr36ep: "ffm3629",
43
43
  Bitv4sc: "f1f9zsvm",
44
- Jx5sug: "f1ub80pn",
45
- Hzyzrh: "f1e7twep"
44
+ Gt9ir8: "f1evo4vk",
45
+ Crt7la: "f18va1k3"
46
46
  },
47
47
  wave: {
48
48
  De3pzq: "f1gjxg63",
49
49
  Br128sd: ["f3fo419", "f6m9r4"],
50
50
  h62rwi: ["ftnv2js", "f12jzhyt"],
51
51
  b1kco5: ["fig1c6l", "f1rv5y9h"],
52
- oi31me: "f103n15n"
52
+ Iqrfzq: "f1xjc3a9"
53
53
  },
54
54
  pulse: {
55
55
  Br128sd: "f171zwvm",
@@ -73,11 +73,11 @@ const useStyles = /*#__PURE__*/__styles({
73
73
  }], ".f13zj6fq::after{content:\"\";}", ".f2gz7yw::after{display:block;}", ".f1mdlcz9::after{position:absolute;}", [".f1nt53hs::after{inset:0;}", {
74
74
  p: -1
75
75
  }], ".f18xs7ez::after{animation-iteration-count:infinite;}", ".ffm3629::after{animation-duration:3s;}", ".f1f9zsvm::after{animation-timing-function:ease-in-out;}", ".f1gjxg63{background-color:var(--colorNeutralStencil1);}", ".f3fo419::after{animation-name:f1efwx7q;}", ".f6m9r4::after{animation-name:f1kkgpz1;}", ".ftnv2js::after{background-image:linear-gradient(\n to right,\n var(--colorNeutralStencil1) 0%,\n var(--colorNeutralStencil2) 50%,\n var(--colorNeutralStencil1) 100%);}", ".f12jzhyt::after{background-image:linear-gradient(\n to left,\n var(--colorNeutralStencil1) 0%,\n var(--colorNeutralStencil2) 50%,\n var(--colorNeutralStencil1) 100%);}", ".fig1c6l::after{transform:translate(-100%);}", ".f1rv5y9h::after{transform:translate(100%);}", ".f171zwvm::after{animation-name:f12o7gg6;}", ".fs3pcyf::after{animation-duration:1s;}", ".f1yu5riq::after{background-color:var(--colorNeutralStencil1);}", ".f162mh4z{background-color:var(--colorNeutralStencil1Alpha);}", ".flvf4r0::after{background-image:linear-gradient(\n to right,\n transparent 0%,\n var(--colorNeutralStencil1Alpha) 50%,\n transparent 100%);}", ".f1uek97b::after{background-image:linear-gradient(\n to left,\n transparent 0%,\n var(--colorNeutralStencil1Alpha) 50%,\n transparent 100%);}", ".flu3bqm{background-color:none;}", ".fxucc0w::after{background-color:var(--colorNeutralStencil1Alpha);}", ".ftgm304{display:block;}"],
76
- m: [["@media screen and (prefers-reduced-motion: reduce){.f1ub80pn::after{animation-duration:0.01ms;}}", {
76
+ m: [["@media screen and (prefers-reduced-motion: reduce){.f1evo4vk::after{animation-duration:0.01ms;}}", {
77
77
  m: "screen and (prefers-reduced-motion: reduce)"
78
- }], ["@media screen and (prefers-reduced-motion: reduce){.f1e7twep::after{animation-iteration-count:1;}}", {
78
+ }], ["@media screen and (prefers-reduced-motion: reduce){.f18va1k3::after{animation-iteration-count:1;}}", {
79
79
  m: "screen and (prefers-reduced-motion: reduce)"
80
- }], ["@media screen and (forced-colors: active){.f103n15n::after{background-color:WindowText;}}", {
80
+ }], ["@media screen and (forced-colors: active){.f1xjc3a9::after{background-color:WindowText;}}", {
81
81
  m: "screen and (forced-colors: active)"
82
82
  }]],
83
83
  k: ["@keyframes f1efwx7q{to{transform:translate(100%);}}", "@keyframes f1kkgpz1{to{transform:translate(-100%);}}", "@keyframes f12o7gg6{0%{opacity:1;}50%{opacity:0.4;}100%{opacity:1;}}"]
@@ -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":["'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":[]}
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","Gt9ir8","Crt7la","wave","De3pzq","Br128sd","h62rwi","b1kco5","Iqrfzq","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":"AAAA,YAAY;;AACZ,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":[]}
@@ -56,8 +56,8 @@ const skeletonPulseAnimation = {
56
56
  s9ouvv: "f18xs7ez",
57
57
  xr36ep: "ffm3629",
58
58
  Bitv4sc: "f1f9zsvm",
59
- Jx5sug: "f1ub80pn",
60
- Hzyzrh: "f1e7twep"
59
+ Gt9ir8: "f1evo4vk",
60
+ Crt7la: "f18va1k3"
61
61
  },
62
62
  wave: {
63
63
  De3pzq: "f1gjxg63",
@@ -73,7 +73,7 @@ const skeletonPulseAnimation = {
73
73
  "fig1c6l",
74
74
  "f1rv5y9h"
75
75
  ],
76
- oi31me: "f103n15n"
76
+ Iqrfzq: "f1xjc3a9"
77
77
  },
78
78
  pulse: {
79
79
  Br128sd: "f171zwvm",
@@ -134,19 +134,19 @@ const skeletonPulseAnimation = {
134
134
  ],
135
135
  m: [
136
136
  [
137
- "@media screen and (prefers-reduced-motion: reduce){.f1ub80pn::after{animation-duration:0.01ms;}}",
137
+ "@media screen and (prefers-reduced-motion: reduce){.f1evo4vk::after{animation-duration:0.01ms;}}",
138
138
  {
139
139
  m: "screen and (prefers-reduced-motion: reduce)"
140
140
  }
141
141
  ],
142
142
  [
143
- "@media screen and (prefers-reduced-motion: reduce){.f1e7twep::after{animation-iteration-count:1;}}",
143
+ "@media screen and (prefers-reduced-motion: reduce){.f18va1k3::after{animation-iteration-count:1;}}",
144
144
  {
145
145
  m: "screen and (prefers-reduced-motion: reduce)"
146
146
  }
147
147
  ],
148
148
  [
149
- "@media screen and (forced-colors: active){.f103n15n::after{background-color:WindowText;}}",
149
+ "@media screen and (forced-colors: active){.f1xjc3a9::after{background-color:WindowText;}}",
150
150
  {
151
151
  m: "screen and (forced-colors: active)"
152
152
  }
@@ -1 +1 @@
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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"}
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","Gt9ir8","Crt7la","wave","De3pzq","Br128sd","h62rwi","b1kco5","Iqrfzq","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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-skeleton",
3
- "version": "9.4.10",
3
+ "version": "9.4.12",
4
4
  "description": "Converged v9 Skeleton Component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -18,12 +18,12 @@
18
18
  "@fluentui/scripts-api-extractor": "*"
19
19
  },
20
20
  "dependencies": {
21
- "@fluentui/react-field": "^9.4.10",
22
- "@fluentui/react-jsx-runtime": "^9.3.2",
23
- "@fluentui/react-shared-contexts": "^9.25.2",
21
+ "@fluentui/react-field": "^9.4.12",
22
+ "@fluentui/react-jsx-runtime": "^9.3.4",
23
+ "@fluentui/react-shared-contexts": "^9.26.0",
24
24
  "@fluentui/react-theme": "^9.2.0",
25
- "@fluentui/react-utilities": "^9.25.3",
26
- "@griffel/react": "^1.5.22",
25
+ "@fluentui/react-utilities": "^9.26.0",
26
+ "@griffel/react": "^1.5.32",
27
27
  "@swc/helpers": "^0.5.1"
28
28
  },
29
29
  "peerDependencies": {