@fluentui/react-skeleton 9.7.3 → 9.7.5
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 +28 -2
- package/dist/index.d.cts +191 -0
- package/lib/Skeleton.js +1 -1
- package/lib/Skeleton.js.map +1 -1
- package/lib/SkeletonItem.js +1 -1
- package/lib/SkeletonItem.js.map +1 -1
- package/lib/components/Skeleton/Skeleton.js +6 -6
- package/lib/components/Skeleton/Skeleton.js.map +1 -1
- package/lib/components/Skeleton/index.js +5 -5
- package/lib/components/Skeleton/index.js.map +1 -1
- package/lib/components/Skeleton/renderSkeleton.js +2 -2
- package/lib/components/Skeleton/renderSkeleton.js.map +1 -1
- package/lib/components/Skeleton/useSkeleton.js +2 -2
- package/lib/components/Skeleton/useSkeleton.js.map +1 -1
- package/lib/components/Skeleton/useSkeletonContextValues.js +1 -1
- package/lib/components/Skeleton/useSkeletonStyles.styles.js +1 -3
- package/lib/components/Skeleton/useSkeletonStyles.styles.js.map +1 -1
- package/lib/components/Skeleton/useSkeletonStyles.styles.raw.js +1 -2
- package/lib/components/Skeleton/useSkeletonStyles.styles.raw.js.map +1 -1
- package/lib/components/SkeletonItem/SkeletonItem.js +5 -5
- package/lib/components/SkeletonItem/SkeletonItem.js.map +1 -1
- package/lib/components/SkeletonItem/index.js +4 -4
- package/lib/components/SkeletonItem/index.js.map +1 -1
- package/lib/components/SkeletonItem/renderSkeletonItem.js +1 -1
- package/lib/components/SkeletonItem/useSkeletonItem.js +2 -2
- package/lib/components/SkeletonItem/useSkeletonItem.js.map +1 -1
- package/lib/components/SkeletonItem/useSkeletonItemStyles.styles.js +2 -4
- package/lib/components/SkeletonItem/useSkeletonItemStyles.styles.js.map +1 -1
- package/lib/components/SkeletonItem/useSkeletonItemStyles.styles.raw.js +2 -3
- package/lib/components/SkeletonItem/useSkeletonItemStyles.styles.raw.js.map +1 -1
- package/lib/contexts/SkeletonContext.js +1 -1
- package/lib/contexts/index.js +1 -1
- package/lib/contexts/index.js.map +1 -1
- package/lib/index.js +3 -3
- package/lib/index.js.map +1 -1
- package/lib-commonjs/{Skeleton.js → Skeleton.cjs} +1 -1
- package/lib-commonjs/{Skeleton.js.map → Skeleton.cjs.map} +1 -1
- package/lib-commonjs/{SkeletonItem.js → SkeletonItem.cjs} +1 -1
- package/lib-commonjs/{SkeletonItem.js.map → SkeletonItem.cjs.map} +1 -1
- package/lib-commonjs/components/Skeleton/{Skeleton.js → Skeleton.cjs} +4 -4
- package/lib-commonjs/components/Skeleton/{Skeleton.js.map → Skeleton.cjs.map} +1 -1
- package/lib-commonjs/components/Skeleton/{index.js → index.cjs} +5 -5
- package/lib-commonjs/components/Skeleton/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/Skeleton/{renderSkeleton.js → renderSkeleton.cjs} +1 -1
- package/lib-commonjs/components/Skeleton/{renderSkeleton.js.map → renderSkeleton.cjs.map} +1 -1
- package/lib-commonjs/components/Skeleton/{useSkeleton.js → useSkeleton.cjs} +1 -1
- package/lib-commonjs/components/Skeleton/{useSkeleton.js.map → useSkeleton.cjs.map} +1 -1
- package/lib-commonjs/components/Skeleton/{useSkeletonStyles.styles.js → useSkeletonStyles.styles.cjs} +0 -1
- package/lib-commonjs/components/Skeleton/useSkeletonStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/Skeleton/{useSkeletonStyles.styles.raw.js → useSkeletonStyles.styles.raw.cjs} +0 -1
- package/lib-commonjs/components/Skeleton/useSkeletonStyles.styles.raw.cjs.map +1 -0
- package/lib-commonjs/components/SkeletonItem/{SkeletonItem.js → SkeletonItem.cjs} +3 -3
- package/lib-commonjs/components/SkeletonItem/{SkeletonItem.js.map → SkeletonItem.cjs.map} +1 -1
- package/lib-commonjs/components/SkeletonItem/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/SkeletonItem/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/SkeletonItem/{useSkeletonItem.js → useSkeletonItem.cjs} +1 -1
- package/lib-commonjs/components/SkeletonItem/{useSkeletonItem.js.map → useSkeletonItem.cjs.map} +1 -1
- package/lib-commonjs/components/SkeletonItem/{useSkeletonItemStyles.styles.js → useSkeletonItemStyles.styles.cjs} +0 -1
- package/lib-commonjs/components/SkeletonItem/useSkeletonItemStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/SkeletonItem/{useSkeletonItemStyles.styles.raw.js → useSkeletonItemStyles.styles.raw.cjs} +0 -1
- package/lib-commonjs/components/SkeletonItem/useSkeletonItemStyles.styles.raw.cjs.map +1 -0
- package/lib-commonjs/contexts/{index.js → index.cjs} +1 -1
- package/lib-commonjs/contexts/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/{index.js → index.cjs} +3 -3
- package/lib-commonjs/{index.js.map → index.cjs.map} +1 -1
- package/package.json +18 -12
- package/lib-commonjs/components/Skeleton/useSkeletonStyles.styles.js.map +0 -1
- package/lib-commonjs/components/Skeleton/useSkeletonStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/SkeletonItem/useSkeletonItemStyles.styles.js.map +0 -1
- package/lib-commonjs/components/SkeletonItem/useSkeletonItemStyles.styles.raw.js.map +0 -1
- /package/lib-commonjs/components/Skeleton/{Skeleton.types.js → Skeleton.types.cjs} +0 -0
- /package/lib-commonjs/components/Skeleton/{Skeleton.types.js.map → Skeleton.types.cjs.map} +0 -0
- /package/lib-commonjs/components/Skeleton/{useSkeletonContextValues.js → useSkeletonContextValues.cjs} +0 -0
- /package/lib-commonjs/components/Skeleton/{useSkeletonContextValues.js.map → useSkeletonContextValues.cjs.map} +0 -0
- /package/lib-commonjs/components/SkeletonItem/{SkeletonItem.types.js → SkeletonItem.types.cjs} +0 -0
- /package/lib-commonjs/components/SkeletonItem/{SkeletonItem.types.js.map → SkeletonItem.types.cjs.map} +0 -0
- /package/lib-commonjs/components/SkeletonItem/{renderSkeletonItem.js → renderSkeletonItem.cjs} +0 -0
- /package/lib-commonjs/components/SkeletonItem/{renderSkeletonItem.js.map → renderSkeletonItem.cjs.map} +0 -0
- /package/lib-commonjs/contexts/{SkeletonContext.js → SkeletonContext.cjs} +0 -0
- /package/lib-commonjs/contexts/{SkeletonContext.js.map → SkeletonContext.cjs.map} +0 -0
|
@@ -1 +1 @@
|
|
|
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 14: { height: '14px' },\n 16: { height: '16px' },\n 20: { height: '20px' },\n 22: { height: '22px' },\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 52: { height: '52px' },\n 56: { height: '56px' },\n 64: { height: '64px' },\n 72: { height: '72px' },\n 92: { height: '92px' },\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 14: { width: '14px', height: '14px' },\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 22: { width: '22px', height: '22px' },\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 52: { width: '52px', height: '52px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 92: { width: '92px', height: '92px' },\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
|
|
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 14: { height: '14px' },\n 16: { height: '16px' },\n 20: { height: '20px' },\n 22: { height: '22px' },\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 52: { height: '52px' },\n 56: { height: '56px' },\n 64: { height: '64px' },\n 72: { height: '72px' },\n 92: { height: '92px' },\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 14: { width: '14px', height: '14px' },\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 22: { width: '22px', height: '22px' },\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 52: { width: '52px', height: '52px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 92: { width: '92px', height: '92px' },\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 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 // eslint-disable-next-line react-hooks/immutability\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/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { SkeletonContextProvider, useSkeletonContext } from
|
|
1
|
+
export { SkeletonContextProvider, useSkeletonContext } from "./SkeletonContext.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SkeletonContextValue } from './SkeletonContext';\nexport { SkeletonContextProvider, useSkeletonContext } from './SkeletonContext';\n"],"names":["SkeletonContextProvider","useSkeletonContext"],"mappings":"AACA,SAASA,uBAAuB,EAAEC,kBAAkB,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SkeletonContextValue } from './SkeletonContext';\nexport { SkeletonContextProvider, useSkeletonContext } from './SkeletonContext';\n"],"names":["SkeletonContextProvider","useSkeletonContext"],"mappings":"AACA,SAASA,uBAAuB,EAAEC,kBAAkB,QAAQ,uBAAoB"}
|
package/lib/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { Skeleton, renderSkeleton_unstable, skeletonClassNames, useSkeletonContextValues, useSkeletonStyles_unstable, useSkeleton_unstable, useSkeletonBase_unstable } from
|
|
2
|
-
export { SkeletonItem, renderSkeletonItem_unstable, skeletonItemClassNames, useSkeletonItemStyles_unstable, useSkeletonItem_unstable, useSkeletonItemBase_unstable } from
|
|
3
|
-
export { SkeletonContextProvider, useSkeletonContext } from
|
|
1
|
+
export { Skeleton, renderSkeleton_unstable, skeletonClassNames, useSkeletonContextValues, useSkeletonStyles_unstable, useSkeleton_unstable, useSkeletonBase_unstable } from "./Skeleton.js";
|
|
2
|
+
export { SkeletonItem, renderSkeletonItem_unstable, skeletonItemClassNames, useSkeletonItemStyles_unstable, useSkeletonItem_unstable, useSkeletonItemBase_unstable } from "./SkeletonItem.js";
|
|
3
|
+
export { SkeletonContextProvider, useSkeletonContext } from "./contexts/index.js";
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Skeleton,\n renderSkeleton_unstable,\n skeletonClassNames,\n useSkeletonContextValues,\n useSkeletonStyles_unstable,\n useSkeleton_unstable,\n useSkeletonBase_unstable,\n} from './Skeleton';\nexport type {\n SkeletonContextValues,\n SkeletonBaseProps,\n SkeletonProps,\n SkeletonSlots,\n SkeletonBaseState,\n SkeletonState,\n} from './Skeleton';\nexport {\n SkeletonItem,\n renderSkeletonItem_unstable,\n skeletonItemClassNames,\n useSkeletonItemStyles_unstable,\n useSkeletonItem_unstable,\n useSkeletonItemBase_unstable,\n} from './SkeletonItem';\nexport type {\n SkeletonItemBaseProps,\n SkeletonItemProps,\n SkeletonItemSlots,\n SkeletonItemBaseState,\n SkeletonItemState,\n} from './SkeletonItem';\nexport { SkeletonContextProvider, useSkeletonContext } from './contexts/index';\nexport type { SkeletonContextValue } from './contexts/index';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonContextValues","useSkeletonStyles_unstable","useSkeleton_unstable","useSkeletonBase_unstable","SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable","useSkeletonItemBase_unstable","SkeletonContextProvider","useSkeletonContext"],"mappings":"AAAA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,wBAAwB,EACxBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,wBAAwB,QACnB,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Skeleton,\n renderSkeleton_unstable,\n skeletonClassNames,\n useSkeletonContextValues,\n useSkeletonStyles_unstable,\n useSkeleton_unstable,\n useSkeletonBase_unstable,\n} from './Skeleton';\nexport type {\n SkeletonContextValues,\n SkeletonBaseProps,\n SkeletonProps,\n SkeletonSlots,\n SkeletonBaseState,\n SkeletonState,\n} from './Skeleton';\nexport {\n SkeletonItem,\n renderSkeletonItem_unstable,\n skeletonItemClassNames,\n useSkeletonItemStyles_unstable,\n useSkeletonItem_unstable,\n useSkeletonItemBase_unstable,\n} from './SkeletonItem';\nexport type {\n SkeletonItemBaseProps,\n SkeletonItemProps,\n SkeletonItemSlots,\n SkeletonItemBaseState,\n SkeletonItemState,\n} from './SkeletonItem';\nexport { SkeletonContextProvider, useSkeletonContext } from './contexts/index';\nexport type { SkeletonContextValue } from './contexts/index';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonContextValues","useSkeletonStyles_unstable","useSkeleton_unstable","useSkeletonBase_unstable","SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable","useSkeletonItemBase_unstable","SkeletonContextProvider","useSkeletonContext"],"mappings":"AAAA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,wBAAwB,EACxBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,wBAAwB,QACnB,gBAAa;AASpB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,oBAAiB;AAQxB,SAASC,uBAAuB,EAAEC,kBAAkB,QAAQ,sBAAmB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Skeleton.ts"],"sourcesContent":["export type {\n SkeletonBaseProps,\n SkeletonBaseState,\n SkeletonContextValues,\n SkeletonItemSize,\n SkeletonProps,\n SkeletonSlots,\n SkeletonState,\n} from './components/Skeleton/index';\nexport {\n Skeleton,\n renderSkeleton_unstable,\n skeletonClassNames,\n useSkeletonContextValues,\n useSkeletonStyles_unstable,\n useSkeleton_unstable,\n useSkeletonBase_unstable,\n} from './components/Skeleton/index';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonContextValues","useSkeletonStyles_unstable","useSkeleton_unstable","useSkeletonBase_unstable"],"mappings":";;;;;;;;;;;;eAUEA,eAAQ;;;eACRC,8BAAuB;;;eACvBC,yBAAkB;;;eAIlBI,+BAAwB;;;eAHxBH,+BAAwB;;;eACxBC,iCAA0B;;;eAC1BC,2BAAoB;;;uBAEf,
|
|
1
|
+
{"version":3,"sources":["../src/Skeleton.ts"],"sourcesContent":["export type {\n SkeletonBaseProps,\n SkeletonBaseState,\n SkeletonContextValues,\n SkeletonItemSize,\n SkeletonProps,\n SkeletonSlots,\n SkeletonState,\n} from './components/Skeleton/index';\nexport {\n Skeleton,\n renderSkeleton_unstable,\n skeletonClassNames,\n useSkeletonContextValues,\n useSkeletonStyles_unstable,\n useSkeleton_unstable,\n useSkeletonBase_unstable,\n} from './components/Skeleton/index';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonContextValues","useSkeletonStyles_unstable","useSkeleton_unstable","useSkeletonBase_unstable"],"mappings":";;;;;;;;;;;;eAUEA,eAAQ;;;eACRC,8BAAuB;;;eACvBC,yBAAkB;;;eAIlBI,+BAAwB;;;eAHxBH,+BAAwB;;;eACxBC,iCAA0B;;;eAC1BC,2BAAoB;;;uBAEf,iCAA8B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/SkeletonItem.ts"],"sourcesContent":["export type {\n SkeletonItemBaseProps,\n SkeletonItemBaseState,\n SkeletonItemProps,\n SkeletonItemSlots,\n SkeletonItemState,\n} from './components/SkeletonItem/index';\nexport {\n SkeletonItem,\n renderSkeletonItem_unstable,\n skeletonItemClassNames,\n useSkeletonItemStyles_unstable,\n useSkeletonItem_unstable,\n useSkeletonItemBase_unstable,\n} from './components/SkeletonItem/index';\n"],"names":["SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable","useSkeletonItemBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,mBAAY;;;eACZC,kCAA2B;;;eAC3BC,6BAAsB;;;eAGtBG,mCAA4B;;;eAF5BF,qCAA8B;;;eAC9BC,+BAAwB;;;uBAEnB,
|
|
1
|
+
{"version":3,"sources":["../src/SkeletonItem.ts"],"sourcesContent":["export type {\n SkeletonItemBaseProps,\n SkeletonItemBaseState,\n SkeletonItemProps,\n SkeletonItemSlots,\n SkeletonItemState,\n} from './components/SkeletonItem/index';\nexport {\n SkeletonItem,\n renderSkeletonItem_unstable,\n skeletonItemClassNames,\n useSkeletonItemStyles_unstable,\n useSkeletonItem_unstable,\n useSkeletonItemBase_unstable,\n} from './components/SkeletonItem/index';\n"],"names":["SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable","useSkeletonItemBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,mBAAY;;;eACZC,kCAA2B;;;eAC3BC,6BAAsB;;;eAGtBG,mCAA4B;;;eAF5BF,qCAA8B;;;eAC9BC,+BAAwB;;;uBAEnB,qCAAkC"}
|
|
@@ -11,10 +11,10 @@ Object.defineProperty(exports, "Skeleton", {
|
|
|
11
11
|
});
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
-
const _useSkeleton = require("./useSkeleton");
|
|
15
|
-
const _renderSkeleton = require("./renderSkeleton");
|
|
16
|
-
const _useSkeletonStylesstyles = require("./useSkeletonStyles.styles");
|
|
17
|
-
const _useSkeletonContextValues = require("./useSkeletonContextValues");
|
|
14
|
+
const _useSkeleton = require("./useSkeleton.cjs");
|
|
15
|
+
const _renderSkeleton = require("./renderSkeleton.cjs");
|
|
16
|
+
const _useSkeletonStylesstyles = require("./useSkeletonStyles.styles.cjs");
|
|
17
|
+
const _useSkeletonContextValues = require("./useSkeletonContextValues.cjs");
|
|
18
18
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
19
19
|
const Skeleton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
20
20
|
const state = (0, _useSkeleton.useSkeleton_unstable)(props, ref);
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,mBAAgB;gCACb,sBAAmB;yCAChB,gCAA6B;0CAC/B,gCAA6B;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"}
|
|
@@ -31,8 +31,8 @@ _export(exports, {
|
|
|
31
31
|
return _useSkeleton.useSkeleton_unstable;
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
|
-
const _Skeleton = require("./Skeleton");
|
|
35
|
-
const _renderSkeleton = require("./renderSkeleton");
|
|
36
|
-
const _useSkeleton = require("./useSkeleton");
|
|
37
|
-
const _useSkeletonContextValues = require("./useSkeletonContextValues");
|
|
38
|
-
const _useSkeletonStylesstyles = require("./useSkeletonStyles.styles");
|
|
34
|
+
const _Skeleton = require("./Skeleton.cjs");
|
|
35
|
+
const _renderSkeleton = require("./renderSkeleton.cjs");
|
|
36
|
+
const _useSkeleton = require("./useSkeleton.cjs");
|
|
37
|
+
const _useSkeletonContextValues = require("./useSkeletonContextValues.cjs");
|
|
38
|
+
const _useSkeletonStylesstyles = require("./useSkeletonStyles.styles.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Skeleton/index.ts"],"sourcesContent":["export { Skeleton } from './Skeleton';\nexport type {\n SkeletonBaseProps,\n SkeletonBaseState,\n SkeletonContextValues,\n SkeletonItemSize,\n SkeletonProps,\n SkeletonSlots,\n SkeletonState,\n} from './Skeleton.types';\nexport { renderSkeleton_unstable } from './renderSkeleton';\nexport { useSkeleton_unstable, useSkeletonBase_unstable } from './useSkeleton';\nexport { useSkeletonContextValues } from './useSkeletonContextValues';\nexport { skeletonClassNames, useSkeletonStyles_unstable } from './useSkeletonStyles.styles';\n"],"names":["Skeleton","renderSkeleton_unstable","useSkeleton_unstable","useSkeletonBase_unstable","useSkeletonContextValues","skeletonClassNames","useSkeletonStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;iCAAQ;;IAURC;sDAAuB;;;eAGvBI,2CAAkB;;;eAFIF,qCAAwB;;;eAC9CC,kDAAwB;;;eACJE,mDAA0B;;;eAF9CJ,iCAAoB;;;0BAXJ,
|
|
1
|
+
{"version":3,"sources":["../src/components/Skeleton/index.ts"],"sourcesContent":["export { Skeleton } from './Skeleton';\nexport type {\n SkeletonBaseProps,\n SkeletonBaseState,\n SkeletonContextValues,\n SkeletonItemSize,\n SkeletonProps,\n SkeletonSlots,\n SkeletonState,\n} from './Skeleton.types';\nexport { renderSkeleton_unstable } from './renderSkeleton';\nexport { useSkeleton_unstable, useSkeletonBase_unstable } from './useSkeleton';\nexport { useSkeletonContextValues } from './useSkeletonContextValues';\nexport { skeletonClassNames, useSkeletonStyles_unstable } from './useSkeletonStyles.styles';\n"],"names":["Skeleton","renderSkeleton_unstable","useSkeleton_unstable","useSkeletonBase_unstable","useSkeletonContextValues","skeletonClassNames","useSkeletonStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;iCAAQ;;IAURC;sDAAuB;;;eAGvBI,2CAAkB;;;eAFIF,qCAAwB;;;eAC9CC,kDAAwB;;;eACJE,mDAA0B;;;eAF9CJ,iCAAoB;;;0BAXJ,gBAAa;gCAUE,sBAAmB;6BACI,mBAAgB;0CACtC,gCAA6B;yCACP,gCAA6B"}
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "renderSkeleton_unstable", {
|
|
|
10
10
|
});
|
|
11
11
|
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
12
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
13
|
-
const _SkeletonContext = require("../../contexts/SkeletonContext");
|
|
13
|
+
const _SkeletonContext = require("../../contexts/SkeletonContext.cjs");
|
|
14
14
|
const renderSkeleton_unstable = (state, contextValues)=>{
|
|
15
15
|
(0, _reactutilities.assertSlots)(state);
|
|
16
16
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonContext.SkeletonContextProvider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Skeleton/renderSkeleton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { SkeletonContextProvider } from '../../contexts/SkeletonContext';\nimport type { SkeletonContextValues, SkeletonSlots, SkeletonBaseState } from './Skeleton.types';\n\n/**\n * Render the final JSX of Skeleton\n */\nexport const renderSkeleton_unstable = (state: SkeletonBaseState, contextValues: SkeletonContextValues): JSXElement => {\n assertSlots<SkeletonSlots>(state);\n\n return (\n <SkeletonContextProvider value={contextValues.skeletonGroup}>\n <state.root />\n </SkeletonContextProvider>\n );\n};\n"],"names":["assertSlots","SkeletonContextProvider","renderSkeleton_unstable","state","contextValues","value","skeletonGroup","root"],"mappings":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;iCAEhB,
|
|
1
|
+
{"version":3,"sources":["../src/components/Skeleton/renderSkeleton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { SkeletonContextProvider } from '../../contexts/SkeletonContext';\nimport type { SkeletonContextValues, SkeletonSlots, SkeletonBaseState } from './Skeleton.types';\n\n/**\n * Render the final JSX of Skeleton\n */\nexport const renderSkeleton_unstable = (state: SkeletonBaseState, contextValues: SkeletonContextValues): JSXElement => {\n assertSlots<SkeletonSlots>(state);\n\n return (\n <SkeletonContextProvider value={contextValues.skeletonGroup}>\n <state.root />\n </SkeletonContextProvider>\n );\n};\n"],"names":["assertSlots","SkeletonContextProvider","renderSkeleton_unstable","state","contextValues","value","skeletonGroup","root"],"mappings":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;iCAEhB,oCAAiC;AAMlE,gCAAgC,CAACC,OAA0BC;QAChEJ,2BAAAA,EAA2BG;IAE3B,OAAA,WAAA,OACE,eAAA,EAACF,wCAAAA,EAAAA;QAAwBI,OAAOD,cAAcE,aAAa;kBACzD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}
|
|
@@ -18,7 +18,7 @@ _export(exports, {
|
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
20
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
21
|
-
const _SkeletonContext = require("../../contexts/SkeletonContext");
|
|
21
|
+
const _SkeletonContext = require("../../contexts/SkeletonContext.cjs");
|
|
22
22
|
const useSkeleton_unstable = (props, ref)=>{
|
|
23
23
|
const { animation: contextAnimation, appearance: contextAppearance } = (0, _SkeletonContext.useSkeletonContext)();
|
|
24
24
|
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size, shape, ...baseProps } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SkeletonBaseProps, SkeletonBaseState, 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 {\n animation = contextAnimation ?? 'wave',\n appearance = contextAppearance ?? 'opaque',\n size,\n shape,\n ...baseProps\n } = props;\n\n const baseState = useSkeletonBase_unstable(baseProps, ref as React.Ref<HTMLDivElement>);\n\n return {\n ...baseState,\n animation,\n appearance,\n size,\n shape,\n };\n};\n\n/**\n * Base hook for Skeleton component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the Skeleton component.\n * @param ref - User provided ref to be passed to the Skeleton component.\n */\nexport const useSkeletonBase_unstable = (\n props: SkeletonBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): SkeletonBaseState => {\n const root = slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'progressbar',\n 'aria-busy': true,\n ...props,\n }),\n { elementType: 'div' },\n );\n return { components: { root: 'div' }, root };\n};\n"],"names":["getIntrinsicElementProps","slot","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","baseProps","baseState","useSkeletonBase_unstable","root","always","role","elementType","components"],"mappings":"AAAA;;;;;;;;;;;;IA2Cac,wBAAAA;;;wBA3BAX;;;;gCAbkC,4BAA4B;iCAExC,
|
|
1
|
+
{"version":3,"sources":["../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SkeletonBaseProps, SkeletonBaseState, 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 {\n animation = contextAnimation ?? 'wave',\n appearance = contextAppearance ?? 'opaque',\n size,\n shape,\n ...baseProps\n } = props;\n\n const baseState = useSkeletonBase_unstable(baseProps, ref as React.Ref<HTMLDivElement>);\n\n return {\n ...baseState,\n animation,\n appearance,\n size,\n shape,\n };\n};\n\n/**\n * Base hook for Skeleton component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the Skeleton component.\n * @param ref - User provided ref to be passed to the Skeleton component.\n */\nexport const useSkeletonBase_unstable = (\n props: SkeletonBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): SkeletonBaseState => {\n const root = slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'progressbar',\n 'aria-busy': true,\n ...props,\n }),\n { elementType: 'div' },\n );\n return { components: { root: 'div' }, root };\n};\n"],"names":["getIntrinsicElementProps","slot","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","baseProps","baseState","useSkeletonBase_unstable","root","always","role","elementType","components"],"mappings":"AAAA;;;;;;;;;;;;IA2Cac,wBAAAA;;;wBA3BAX;;;;gCAbkC,4BAA4B;iCAExC,oCAAiC;AAW7D,MAAMA,uBAAuB,CAACC,OAAsBC;IACzD,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,IAAI,EACJC,KAAK,EACL,GAAGC,WACJ,GAAGR;IAEJ,MAAMS,YAAYC,yBAAyBF,WAAWP;IAEtD,OAAO;QACL,GAAGQ,SAAS;QACZP;QACAE;QACAE;QACAC;IACF;AACF,EAAE;AAQK,iCAAiC,CACtCP,OACAC;IAEA,MAAMU,OAAOd,oBAAAA,CAAKe,MAAM,KACtBhB,wCAAAA,EAAyB,OAAO;QAC9BK;QACAY,MAAM;QACN,aAAa;QACb,GAAGb,KAAK;IACV,IACA;QAAEc,aAAa;IAAM;IAEvB,OAAO;QAAEC,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AAC7C,EAAE"}
|
|
@@ -31,7 +31,6 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
31
31
|
]
|
|
32
32
|
});
|
|
33
33
|
const useSkeletonStyles_unstable = (state)=>{
|
|
34
|
-
'use no memo';
|
|
35
34
|
const styles = useStyles();
|
|
36
35
|
// eslint-disable-next-line react-hooks/immutability
|
|
37
36
|
state.root.className = (0, _react.mergeClasses)(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);
|
|
@@ -0,0 +1 @@
|
|
|
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 const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\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,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAK,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"}
|
|
@@ -27,7 +27,6 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
27
27
|
}
|
|
28
28
|
});
|
|
29
29
|
const useSkeletonStyles_unstable = (state)=>{
|
|
30
|
-
'use no memo';
|
|
31
30
|
const styles = useStyles();
|
|
32
31
|
// eslint-disable-next-line react-hooks/immutability
|
|
33
32
|
state.root.className = (0, _react.mergeClasses)(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);
|
|
@@ -0,0 +1 @@
|
|
|
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 const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\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,MAAMC,SAASL;IAEf,oDAAoD;IACpDI,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"}
|
|
@@ -11,9 +11,9 @@ Object.defineProperty(exports, "SkeletonItem", {
|
|
|
11
11
|
});
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
-
const _useSkeletonItem = require("./useSkeletonItem");
|
|
15
|
-
const _renderSkeletonItem = require("./renderSkeletonItem");
|
|
16
|
-
const _useSkeletonItemStylesstyles = require("./useSkeletonItemStyles.styles");
|
|
14
|
+
const _useSkeletonItem = require("./useSkeletonItem.cjs");
|
|
15
|
+
const _renderSkeletonItem = require("./renderSkeletonItem.cjs");
|
|
16
|
+
const _useSkeletonItemStylesstyles = require("./useSkeletonItemStyles.styles.cjs");
|
|
17
17
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
18
18
|
const SkeletonItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
19
19
|
const state = (0, _useSkeletonItem.useSkeletonItem_unstable)(props, ref);
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,uBAAoB;oCACjB,0BAAuB;6CACpB,oCAAiC;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"}
|
|
@@ -28,7 +28,7 @@ _export(exports, {
|
|
|
28
28
|
return _useSkeletonItem.useSkeletonItem_unstable;
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
|
-
const _SkeletonItem = require("./SkeletonItem");
|
|
32
|
-
const _renderSkeletonItem = require("./renderSkeletonItem");
|
|
33
|
-
const _useSkeletonItem = require("./useSkeletonItem");
|
|
34
|
-
const _useSkeletonItemStylesstyles = require("./useSkeletonItemStyles.styles");
|
|
31
|
+
const _SkeletonItem = require("./SkeletonItem.cjs");
|
|
32
|
+
const _renderSkeletonItem = require("./renderSkeletonItem.cjs");
|
|
33
|
+
const _useSkeletonItem = require("./useSkeletonItem.cjs");
|
|
34
|
+
const _useSkeletonItemStylesstyles = require("./useSkeletonItemStyles.styles.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SkeletonItem/index.ts"],"sourcesContent":["export { SkeletonItem } from './SkeletonItem';\nexport type {\n SkeletonItemBaseProps,\n SkeletonItemBaseState,\n SkeletonItemProps,\n SkeletonItemSlots,\n SkeletonItemState,\n} from './SkeletonItem.types';\nexport { renderSkeletonItem_unstable } from './renderSkeletonItem';\nexport { useSkeletonItem_unstable, useSkeletonItemBase_unstable } from './useSkeletonItem';\nexport { skeletonItemClassNames, useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';\n"],"names":["SkeletonItem","renderSkeletonItem_unstable","useSkeletonItem_unstable","useSkeletonItemBase_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAQZC,+CAA2B;;;eAE3BG,mDAAsB;;;eADID,6CAA4B;;;eAC9BE,2DAA8B;;;eADtDH,yCAAwB;;;8BATJ,
|
|
1
|
+
{"version":3,"sources":["../src/components/SkeletonItem/index.ts"],"sourcesContent":["export { SkeletonItem } from './SkeletonItem';\nexport type {\n SkeletonItemBaseProps,\n SkeletonItemBaseState,\n SkeletonItemProps,\n SkeletonItemSlots,\n SkeletonItemState,\n} from './SkeletonItem.types';\nexport { renderSkeletonItem_unstable } from './renderSkeletonItem';\nexport { useSkeletonItem_unstable, useSkeletonItemBase_unstable } from './useSkeletonItem';\nexport { skeletonItemClassNames, useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';\n"],"names":["SkeletonItem","renderSkeletonItem_unstable","useSkeletonItem_unstable","useSkeletonItemBase_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAQZC,+CAA2B;;;eAE3BG,mDAAsB;;;eADID,6CAA4B;;;eAC9BE,2DAA8B;;;eADtDH,yCAAwB;;;8BATJ,oBAAiB;oCAQF,0BAAuB;iCACI,uBAAoB;6CACpB,oCAAiC"}
|
|
@@ -18,7 +18,7 @@ _export(exports, {
|
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
20
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
21
|
-
const _SkeletonContext = require("../../contexts/SkeletonContext");
|
|
21
|
+
const _SkeletonContext = require("../../contexts/SkeletonContext.cjs");
|
|
22
22
|
const useSkeletonItem_unstable = (props, ref)=>{
|
|
23
23
|
const { animation: contextAnimation, appearance: contextAppearance, size: contextSize, shape: contextShape } = (0, _SkeletonContext.useSkeletonContext)();
|
|
24
24
|
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size = contextSize !== null && contextSize !== void 0 ? contextSize : 16, shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'rectangle', ...baseProps } = props;
|
package/lib-commonjs/components/SkeletonItem/{useSkeletonItem.js.map → useSkeletonItem.cjs.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItem.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\nimport type {\n SkeletonItemBaseProps,\n SkeletonItemBaseState,\n SkeletonItemProps,\n SkeletonItemState,\n} 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 {\n animation: contextAnimation,\n appearance: contextAppearance,\n size: contextSize,\n shape: contextShape,\n } = useSkeletonContext();\n const {\n animation = contextAnimation ?? 'wave',\n appearance = contextAppearance ?? 'opaque',\n size = contextSize ?? 16,\n shape = contextShape ?? 'rectangle',\n ...baseProps\n } = props;\n\n const baseState = useSkeletonItemBase_unstable(baseProps, ref as React.Ref<HTMLDivElement>);\n\n return {\n ...baseState,\n animation,\n appearance,\n size,\n shape,\n };\n};\n\n/**\n * Base hook for SkeletonItem component, which manages state related to slots structure.\n *\n * @param props - User provided props to the SkeletonItem component.\n * @param ref - User provided ref to be passed to the SkeletonItem component.\n */\nexport const useSkeletonItemBase_unstable = (\n props: SkeletonItemBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): SkeletonItemBaseState => {\n const root = slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n );\n return { components: { root: 'div' }, root };\n};\n"],"names":["getIntrinsicElementProps","slot","useSkeletonContext","useSkeletonItem_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","contextSize","shape","contextShape","baseProps","baseState","useSkeletonItemBase_unstable","root","always","elementType","components"],"mappings":"AAAA;;;;;;;;;;;;gCAqDagB;eAAAA;;4BAhCAb;;;;gCAlBkC,4BAA4B;iCACxC,
|
|
1
|
+
{"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItem.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\nimport type {\n SkeletonItemBaseProps,\n SkeletonItemBaseState,\n SkeletonItemProps,\n SkeletonItemState,\n} 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 {\n animation: contextAnimation,\n appearance: contextAppearance,\n size: contextSize,\n shape: contextShape,\n } = useSkeletonContext();\n const {\n animation = contextAnimation ?? 'wave',\n appearance = contextAppearance ?? 'opaque',\n size = contextSize ?? 16,\n shape = contextShape ?? 'rectangle',\n ...baseProps\n } = props;\n\n const baseState = useSkeletonItemBase_unstable(baseProps, ref as React.Ref<HTMLDivElement>);\n\n return {\n ...baseState,\n animation,\n appearance,\n size,\n shape,\n };\n};\n\n/**\n * Base hook for SkeletonItem component, which manages state related to slots structure.\n *\n * @param props - User provided props to the SkeletonItem component.\n * @param ref - User provided ref to be passed to the SkeletonItem component.\n */\nexport const useSkeletonItemBase_unstable = (\n props: SkeletonItemBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): SkeletonItemBaseState => {\n const root = slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n );\n return { components: { root: 'div' }, root };\n};\n"],"names":["getIntrinsicElementProps","slot","useSkeletonContext","useSkeletonItem_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","contextSize","shape","contextShape","baseProps","baseState","useSkeletonItemBase_unstable","root","always","elementType","components"],"mappings":"AAAA;;;;;;;;;;;;gCAqDagB;eAAAA;;4BAhCAb;;;;gCAlBkC,4BAA4B;iCACxC,oCAAiC;AAiB7D,MAAMA,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EACJC,WAAWC,gBAAgB,EAC3BC,YAAYC,iBAAiB,EAC7BC,MAAMC,WAAW,EACjBC,OAAOC,YAAY,EACpB,OAAGX,mCAAAA;IACJ,MAAM,EACJI,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoB,MAAM,EACtCC,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAC1CC,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,EAAE,EACxBC,QAAQC,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,eAAgB,WAAW,EACnC,GAAGC,WACJ,GAAGV;IAEJ,MAAMW,YAAYC,6BAA6BF,WAAWT;IAE1D,OAAO;QACL,GAAGU,SAAS;QACZT;QACAE;QACAE;QACAE;IACF;AACF,EAAE;AAQK,qCAAqC,CAC1CR,OACAC;IAEA,MAAMY,OAAOhB,oBAAAA,CAAKiB,MAAM,KACtBlB,wCAAAA,EAAyB,OAAO;QAC9BK;QACA,GAAGD,KAAK;IACV,IACA;QAAEe,aAAa;IAAM;IAEvB,OAAO;QAAEC,YAAY;YAAEH,MAAM;QAAM;QAAGA;IAAK;AAC7C,EAAE"}
|
|
@@ -402,7 +402,6 @@ const useCircleSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
402
402
|
]
|
|
403
403
|
});
|
|
404
404
|
const useSkeletonItemStyles_unstable = (state)=>{
|
|
405
|
-
'use no memo';
|
|
406
405
|
const { animation, appearance, size, shape } = state;
|
|
407
406
|
const rootStyles = useStyles();
|
|
408
407
|
const rectStyles = useRectangleStyles();
|
|
@@ -0,0 +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 14: {\n height: '14px'\n },\n 16: {\n height: '16px'\n },\n 20: {\n height: '20px'\n },\n 22: {\n height: '22px'\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 52: {\n height: '52px'\n },\n 56: {\n height: '56px'\n },\n 64: {\n height: '64px'\n },\n 72: {\n height: '72px'\n },\n 92: {\n height: '92px'\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 14: {\n width: '14px',\n height: '14px'\n },\n 16: {\n width: '16px',\n height: '16px'\n },\n 20: {\n width: '20px',\n height: '20px'\n },\n 22: {\n width: '22px',\n height: '22px'\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 52: {\n width: '52px',\n height: '52px'\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 92: {\n width: '92px',\n height: '92px'\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 const { animation, appearance, size, shape } = state;\n const rootStyles = useStyles();\n const rectStyles = useRectangleStyles();\n const sizeStyles = useSizeStyles();\n const circleStyles = useCircleSizeStyles();\n // eslint-disable-next-line react-hooks/immutability\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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"}
|
|
@@ -254,7 +254,6 @@ const useCircleSizeStyles = (0, _react.makeStyles)({
|
|
|
254
254
|
}
|
|
255
255
|
});
|
|
256
256
|
const useSkeletonItemStyles_unstable = (state)=>{
|
|
257
|
-
'use no memo';
|
|
258
257
|
const { animation, appearance, size, shape } = state;
|
|
259
258
|
const rootStyles = useStyles();
|
|
260
259
|
const rectStyles = useRectangleStyles();
|
|
@@ -0,0 +1 @@
|
|
|
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 14: { height: '14px' },\n 16: { height: '16px' },\n 20: { height: '20px' },\n 22: { height: '22px' },\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 52: { height: '52px' },\n 56: { height: '56px' },\n 64: { height: '64px' },\n 72: { height: '72px' },\n 92: { height: '92px' },\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 14: { width: '14px', height: '14px' },\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 22: { width: '22px', height: '22px' },\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 52: { width: '52px', height: '52px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 92: { width: '92px', height: '92px' },\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 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 // eslint-disable-next-line react-hooks/immutability\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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SkeletonContextValue } from './SkeletonContext';\nexport { SkeletonContextProvider, useSkeletonContext } from './SkeletonContext';\n"],"names":["SkeletonContextProvider","useSkeletonContext"],"mappings":";;;;;;;;;;;;eACSA,wCAAuB;;;eAAEC,mCAAkB;;;iCAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SkeletonContextValue } from './SkeletonContext';\nexport { SkeletonContextProvider, useSkeletonContext } from './SkeletonContext';\n"],"names":["SkeletonContextProvider","useSkeletonContext"],"mappings":";;;;;;;;;;;;eACSA,wCAAuB;;;eAAEC,mCAAkB;;;iCAAQ,uBAAoB"}
|
|
@@ -55,6 +55,6 @@ _export(exports, {
|
|
|
55
55
|
return _Skeleton.useSkeleton_unstable;
|
|
56
56
|
}
|
|
57
57
|
});
|
|
58
|
-
const _Skeleton = require("./Skeleton");
|
|
59
|
-
const _SkeletonItem = require("./SkeletonItem");
|
|
60
|
-
const _index = require("./contexts/index");
|
|
58
|
+
const _Skeleton = require("./Skeleton.cjs");
|
|
59
|
+
const _SkeletonItem = require("./SkeletonItem.cjs");
|
|
60
|
+
const _index = require("./contexts/index.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Skeleton,\n renderSkeleton_unstable,\n skeletonClassNames,\n useSkeletonContextValues,\n useSkeletonStyles_unstable,\n useSkeleton_unstable,\n useSkeletonBase_unstable,\n} from './Skeleton';\nexport type {\n SkeletonContextValues,\n SkeletonBaseProps,\n SkeletonProps,\n SkeletonSlots,\n SkeletonBaseState,\n SkeletonState,\n} from './Skeleton';\nexport {\n SkeletonItem,\n renderSkeletonItem_unstable,\n skeletonItemClassNames,\n useSkeletonItemStyles_unstable,\n useSkeletonItem_unstable,\n useSkeletonItemBase_unstable,\n} from './SkeletonItem';\nexport type {\n SkeletonItemBaseProps,\n SkeletonItemProps,\n SkeletonItemSlots,\n SkeletonItemBaseState,\n SkeletonItemState,\n} from './SkeletonItem';\nexport { SkeletonContextProvider, useSkeletonContext } from './contexts/index';\nexport type { SkeletonContextValue } from './contexts/index';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonContextValues","useSkeletonStyles_unstable","useSkeleton_unstable","useSkeletonBase_unstable","SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable","useSkeletonItemBase_unstable","SkeletonContextProvider","useSkeletonContext"],"mappings":";;;;;;;;;;;IACEA;iCAAQ;;IA+BDa;6CAAuB;;;eAd9BN,0BAAY;;;eACZC,yCAA2B;;;eAjB3BP,iCAAuB;;;eACvBC,4BAAkB;;IAiBlBO,sBAAsB;;;;eAbtBH,kCAAwB;;sBAyB0B;eAAlBQ;;;eA5BhCX,kCAAwB;;;eAmBxBS,0CAA4B;;;eAF5BF,4CAA8B;;;eAC9BC,sCAAwB;;;eAjBxBP,oCAA0B;;;eAC1BC,8BAAoB;;;0BAEf,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Skeleton,\n renderSkeleton_unstable,\n skeletonClassNames,\n useSkeletonContextValues,\n useSkeletonStyles_unstable,\n useSkeleton_unstable,\n useSkeletonBase_unstable,\n} from './Skeleton';\nexport type {\n SkeletonContextValues,\n SkeletonBaseProps,\n SkeletonProps,\n SkeletonSlots,\n SkeletonBaseState,\n SkeletonState,\n} from './Skeleton';\nexport {\n SkeletonItem,\n renderSkeletonItem_unstable,\n skeletonItemClassNames,\n useSkeletonItemStyles_unstable,\n useSkeletonItem_unstable,\n useSkeletonItemBase_unstable,\n} from './SkeletonItem';\nexport type {\n SkeletonItemBaseProps,\n SkeletonItemProps,\n SkeletonItemSlots,\n SkeletonItemBaseState,\n SkeletonItemState,\n} from './SkeletonItem';\nexport { SkeletonContextProvider, useSkeletonContext } from './contexts/index';\nexport type { SkeletonContextValue } from './contexts/index';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonContextValues","useSkeletonStyles_unstable","useSkeleton_unstable","useSkeletonBase_unstable","SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable","useSkeletonItemBase_unstable","SkeletonContextProvider","useSkeletonContext"],"mappings":";;;;;;;;;;;IACEA;iCAAQ;;IA+BDa;6CAAuB;;;eAd9BN,0BAAY;;;eACZC,yCAA2B;;;eAjB3BP,iCAAuB;;;eACvBC,4BAAkB;;IAiBlBO,sBAAsB;;;;eAbtBH,kCAAwB;;sBAyB0B;eAAlBQ;;;eA5BhCX,kCAAwB;;;eAmBxBS,0CAA4B;;;eAF5BF,4CAA8B;;;eAC9BC,sCAAwB;;;eAjBxBP,oCAA0B;;;eAC1BC,8BAAoB;;;0BAEf,gBAAa;8BAgBb,oBAAiB;uBAQoC,sBAAmB"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-skeleton",
|
|
3
|
-
"version": "9.7.
|
|
3
|
+
"version": "9.7.5",
|
|
4
4
|
"description": "Converged v9 Skeleton Component",
|
|
5
|
-
"main": "lib-commonjs/index.
|
|
5
|
+
"main": "lib-commonjs/index.cjs",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
7
|
"typings": "./dist/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
@@ -12,11 +12,11 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui/react-field": "^9.5.
|
|
16
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
17
|
-
"@fluentui/react-shared-contexts": "^9.26.
|
|
18
|
-
"@fluentui/react-theme": "^9.2.
|
|
19
|
-
"@fluentui/react-utilities": "^9.26.
|
|
15
|
+
"@fluentui/react-field": "^9.5.4",
|
|
16
|
+
"@fluentui/react-jsx-runtime": "^9.4.5",
|
|
17
|
+
"@fluentui/react-shared-contexts": "^9.26.3",
|
|
18
|
+
"@fluentui/react-theme": "^9.2.2",
|
|
19
|
+
"@fluentui/react-utilities": "^9.26.6",
|
|
20
20
|
"@griffel/react": "^1.5.32",
|
|
21
21
|
"@swc/helpers": "^0.5.1"
|
|
22
22
|
},
|
|
@@ -34,17 +34,23 @@
|
|
|
34
34
|
},
|
|
35
35
|
"exports": {
|
|
36
36
|
".": {
|
|
37
|
-
"
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
"import": {
|
|
38
|
+
"types": "./dist/index.d.ts",
|
|
39
|
+
"default": "./lib/index.js"
|
|
40
|
+
},
|
|
41
|
+
"require": {
|
|
42
|
+
"types": "./dist/index.d.cts",
|
|
43
|
+
"default": "./lib-commonjs/index.cjs"
|
|
44
|
+
}
|
|
41
45
|
},
|
|
42
46
|
"./package.json": "./package.json"
|
|
43
47
|
},
|
|
44
48
|
"files": [
|
|
45
49
|
"*.md",
|
|
46
50
|
"dist/*.d.ts",
|
|
51
|
+
"dist/*.d.cts",
|
|
47
52
|
"lib",
|
|
48
53
|
"lib-commonjs"
|
|
49
|
-
]
|
|
54
|
+
],
|
|
55
|
+
"type": "module"
|
|
50
56
|
}
|
|
@@ -1 +0,0 @@
|
|
|
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 // eslint-disable-next-line react-hooks/immutability\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;;;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,oCAAoCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAK,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 +0,0 @@
|
|
|
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 // eslint-disable-next-line react-hooks/immutability\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;;;;;;;;;;;;IAKaE,kBAAAA;;;8BAaAK;;;;uBAhB4B,iBAAiB;AAGnD,2BAA0D;IAC/DJ,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,qBAAAA,EAAW;IAC3BK,cAAc;QACZC,SAAS;IACX;AACF;AAKO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASL;IAEf,oDAAoD;IACpDI,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 +0,0 @@
|
|
|
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 14: {\n height: '14px'\n },\n 16: {\n height: '16px'\n },\n 20: {\n height: '20px'\n },\n 22: {\n height: '22px'\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 52: {\n height: '52px'\n },\n 56: {\n height: '56px'\n },\n 64: {\n height: '64px'\n },\n 72: {\n height: '72px'\n },\n 92: {\n height: '92px'\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 14: {\n width: '14px',\n height: '14px'\n },\n 16: {\n width: '16px',\n height: '16px'\n },\n 20: {\n width: '20px',\n height: '20px'\n },\n 22: {\n width: '22px',\n height: '22px'\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 52: {\n width: '52px',\n height: '52px'\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 92: {\n width: '92px',\n height: '92px'\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 // eslint-disable-next-line react-hooks/immutability\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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"}
|