@fluentui/react-skeleton 9.7.3 → 9.7.5

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

@@ -1 +0,0 @@
-{"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  'use no memo';\n\n  const { animation, appearance, size, shape } = state;\n\n  const rootStyles = useStyles();\n  const rectStyles = useRectangleStyles();\n  const sizeStyles = useSizeStyles();\n  const circleStyles = useCircleSizeStyles();\n\n  // 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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"}