@fluentui/react-progress 9.0.0-alpha.6 → 9.0.0-alpha.8

package/lib-commonjs/components/Progress/Progress.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Progress = void 0;
-
-const React = /*#__PURE__*/require("react");
-
-const useProgress_1 = /*#__PURE__*/require("./useProgress");
-
-const renderProgress_1 = /*#__PURE__*/require("./renderProgress");
-
-const useProgressStyles_1 = /*#__PURE__*/require("./useProgressStyles");
-/**
- * A progress bar shows the progression of a task.
- */
-
-
-exports.Progress = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useProgress_1.useProgress_unstable(props, ref);
-  useProgressStyles_1.useProgressStyles_unstable(state);
-  return renderProgress_1.renderProgress_unstable(state);
-});
-exports.Progress.displayName = 'Progress';
-//# sourceMappingURL=Progress.js.map

package/lib-commonjs/components/Progress/Progress.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["packages/react-components/react-progress/src/components/Progress/Progress.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAL2D,CAA/C;AAOb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useProgress_unstable } from './useProgress';\nimport { renderProgress_unstable } from './renderProgress';\nimport { useProgressStyles_unstable } from './useProgressStyles';\nimport type { ProgressProps } from './Progress.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A progress bar shows the progression of a task.\n */\nexport const Progress: ForwardRefComponent<ProgressProps> = React.forwardRef((props, ref) => {\n  const state = useProgress_unstable(props, ref);\n\n  useProgressStyles_unstable(state);\n  return renderProgress_unstable(state);\n});\n\nProgress.displayName = 'Progress';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Progress/index.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-const tslib_1 = /*#__PURE__*/require("tslib");
-
-tslib_1.__exportStar(require("./Progress"), exports);
-
-tslib_1.__exportStar(require("./Progress.types"), exports);
-
-tslib_1.__exportStar(require("./renderProgress"), exports);
-
-tslib_1.__exportStar(require("./useProgress"), exports);
-
-tslib_1.__exportStar(require("./useProgressStyles"), exports);
-//# sourceMappingURL=index.js.map

package/lib-commonjs/components/Progress/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["packages/react-components/react-progress/src/components/Progress/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Progress';\nexport * from './Progress.types';\nexport * from './renderProgress';\nexport * from './useProgress';\nexport * from './useProgressStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Progress/renderProgress.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["packages/react-components/react-progress/src/components/Progress/renderProgress.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;EACA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,GAAN,IAAa,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,GAAP,EAAU,EAAA,GAAK,SAAS,CAAC;EAAf,CAAV,CAA9C,CAAP;AACD,CAHM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressState, ProgressSlots } from './Progress.types';\n\n/**\n * Render the final JSX of Progress\n */\nexport const renderProgress_unstable = (state: ProgressState) => {\n  const { slots, slotProps } = getSlots<ProgressSlots>(state);\n  return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Progress/useProgress.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["packages/react-components/react-progress/src/components/Progress/useProgress.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG;EACA,MAAM;IAAE,GAAG,GAAG,GAAR;IAAa,KAAK,GAAG,SAArB;IAAgC,SAAS,GAAG,QAA5C;IAAsD,eAAtD;IAAuE;EAAvE,IAAiF,KAAvF;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;IACxC,GADwC;IAExC,IAAI,EAAE,aAFkC;IAGxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0B,SAHH;IAIxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,GAAtB,GAA4B,SAJL;IAKxC,iBAAiB,KALuB;IAMxC,GAAG;EANqC,CAA7B,CAAb;EASA,MAAM,GAAG,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,GAAvB,EAA4B;IACtC,QAAQ,EAAE;EAD4B,CAA5B,CAAZ;EAIA,MAAM,KAAK,GAAkB;IAC3B,GAD2B;IAE3B,KAF2B;IAG3B,SAH2B;IAI3B,KAJ2B;IAK3B,eAL2B;IAM3B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CANe;IAU3B,IAV2B;IAW3B;EAX2B,CAA7B;EAcA,OAAO,KAAP;AACD,CAhCM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressProps, ProgressState } from './Progress.types';\n\n/**\n * Create the state required to render Progress.\n *\n * The returned state can be modified with hooks such as useProgressStyles_unstable,\n * before being passed to renderProgress_unstable.\n *\n * @param props - props from this instance of Progress\n * @param ref - reference to root HTMLElement of Progress\n */\nexport const useProgress_unstable = (props: ProgressProps, ref: React.Ref<HTMLElement>): ProgressState => {\n  // Props\n  const { max = 1.0, shape = 'rounded', thickness = 'medium', validationState, value } = props;\n\n  const root = getNativeElementProps('div', {\n    ref,\n    role: 'progressbar',\n    'aria-valuemin': value !== undefined ? 0 : undefined,\n    'aria-valuemax': value !== undefined ? max : undefined,\n    'aria-valuenow': value,\n    ...props,\n  });\n\n  const bar = resolveShorthand(props.bar, {\n    required: true,\n  });\n\n  const state: ProgressState = {\n    max,\n    shape,\n    thickness,\n    value,\n    validationState,\n    components: {\n      root: 'div',\n      bar: 'div',\n    },\n    root,\n    bar,\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Progress/useProgressStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["packages/react-components/react-progress/src/components/Progress/useProgressStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressState, ProgressSlots } from './Progress.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressClassNames: SlotClassNames<ProgressSlots> = {\n  root: 'fui-Progress',\n  bar: 'fui-Progress__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\nconst indeterminateProgress = {\n  '0%': {\n    left: '0%',\n  },\n  '100%': {\n    left: '100%',\n  },\n};\nconst indeterminateProgressRTL = {\n  '100%': {\n    right: '-100%',\n  },\n  '0%': {\n    right: '100%',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    justifySelf: 'stretch',\n    ...shorthands.overflow('hidden'),\n\n    '@media screen and (forced-colors: active)': {\n      ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n    },\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  rectangular: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the progress bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n    ...shorthands.borderRadius('inherit'),\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    animationName: indeterminateProgress,\n    animationDuration: '3s',\n    animationIterationCount: 'infinite',\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      animationDuration: '0.01ms',\n      animationIterationCount: '1',\n    },\n  },\n\n  rtl: {\n    animationName: indeterminateProgressRTL,\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the Progress slots based on the state\n */\nexport const useProgressStyles_unstable = (state: ProgressState): ProgressState => {\n  const { max, shape, thickness, validationState, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n  const { dir } = useFluent();\n\n  state.root.className = mergeClasses(\n    progressClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    state.bar.className = mergeClasses(\n      progressClassNames.bar,\n      barStyles.base,\n      value === undefined && barStyles.indeterminate,\n      value === undefined && dir === 'rtl' && barStyles.rtl,\n      barStyles[thickness],\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      validationState && barStyles[validationState],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}