@fluentui/react-spinner 9.1.12 → 9.2.0

package/CHANGELOG.json

@@ -2,7 +2,42 @@
   "name": "@fluentui/react-spinner",
   "entries": [
     {
-      "date": "Thu, 18 May 2023 00:35:45 GMT",
+      "date": "Wed, 24 May 2023 20:42:46 GMT",
+      "tag": "@fluentui/react-spinner_v9.2.0",
+      "version": "9.2.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "kakrookaran@gmail.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "5fe4247bc7ce2ff095b1f4c8f727e57293413601",
+            "comment": "feat: added delay prop to spinner"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-label to v9.1.13",
+            "commit": "3f088b7b09988e7c05af1c953021acc94c273026"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.5.0",
+            "commit": "3f088b7b09988e7c05af1c953021acc94c273026"
+          }
+        ],
+        "none": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "69e0617a93cb44ef42f3bd19284b7dc5fe27fed3",
+            "comment": "chore: update test-ssr script"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 18 May 2023 00:39:15 GMT",
       "tag": "@fluentui/react-spinner_v9.1.12",
       "version": "9.1.12",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/react-spinner
 
-This log was last generated on Thu, 18 May 2023 00:35:45 GMT and should not be manually modified.
+This log was last generated on Wed, 24 May 2023 20:42:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.2.0)
+
+Wed, 24 May 2023 20:42:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.1.12..@fluentui/react-spinner_v9.2.0)
+
+### Minor changes
+
+- feat: added delay prop to spinner ([PR #27852](https://github.com/microsoft/fluentui/pull/27852) by kakrookaran@gmail.com)
+- Bump @fluentui/react-label to v9.1.13 ([PR #27989](https://github.com/microsoft/fluentui/pull/27989) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.5.0 ([PR #27989](https://github.com/microsoft/fluentui/pull/27989) by beachball)
+
 ## [9.1.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.1.12)
 
-Thu, 18 May 2023 00:35:45 GMT 
+Thu, 18 May 2023 00:39:15 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.1.11..@fluentui/react-spinner_v9.1.12)
 
 ### Patches

package/dist/index.d.ts

@@ -27,6 +27,11 @@ export declare type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> &
      * @default 'primary'
      */
     appearance?: 'primary' | 'inverted';
+    /**
+     * Time in milliseconds after component mount before spinner is visible.
+     * @default 0
+     */
+    delay?: number;
     /**
      * Where the label is positioned relative to the Spinner
      * @default 'after'
@@ -61,7 +66,12 @@ export declare type SpinnerSlots = {
 /**
  * State used in rendering Spinner
  */
-export declare type SpinnerState = ComponentState<SpinnerSlots> & Required<Pick<SpinnerProps, 'appearance' | 'labelPosition' | 'size'>>;
+export declare type SpinnerState = ComponentState<SpinnerSlots> & Required<Pick<SpinnerProps, 'appearance' | 'delay' | 'labelPosition' | 'size'>> & {
+    /**
+     * Should the spinner be rendered in the DOM
+     */
+    shouldRenderSpinner: boolean;
+};
 
 /**
  * Create the state required to render Spinner.

package/lib/components/Spinner/Spinner.types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/Spinner/Spinner.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\n\nexport type SpinnerSlots = {\n  /**\n   * The root of the Spinner.\n   * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The slot for the animated svg.\n   * The spinner slot receives the `className` and `style` that handles the spinning animation.\n   * An svg is also rendered as a child of this slot\n   */\n  spinner?: Slot<'span'>;\n  /**\n   * The label of the Slider.\n   * The label slot receives the styling related to the text associated with the Spinner.\n   */\n  label?: Slot<typeof Label>;\n};\n\n/**\n * Spinner Props\n */\nexport type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & {\n  /**\n   * The appearance of the Spinner.\n   * @default 'primary'\n   */\n  appearance?: 'primary' | 'inverted';\n\n  /**\n   * Where the label is positioned relative to the Spinner\n   * @default 'after'\n   */\n  labelPosition?: 'above' | 'below' | 'before' | 'after';\n\n  /**\n   * The size of the spinner.\n   * @default 'medium'\n   */\n  size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n};\n\n/**\n * State used in rendering Spinner\n */\nexport type SpinnerState = ComponentState<SpinnerSlots> &\n  Required<Pick<SpinnerProps, 'appearance' | 'labelPosition' | 'size'>>;\n"],"mappings":"AAAA"}
+{"version":3,"names":[],"sources":["../../../src/components/Spinner/Spinner.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\n\nexport type SpinnerSlots = {\n  /**\n   * The root of the Spinner.\n   * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The slot for the animated svg.\n   * The spinner slot receives the `className` and `style` that handles the spinning animation.\n   * An svg is also rendered as a child of this slot\n   */\n  spinner?: Slot<'span'>;\n  /**\n   * The label of the Slider.\n   * The label slot receives the styling related to the text associated with the Spinner.\n   */\n  label?: Slot<typeof Label>;\n};\n\n/**\n * Spinner Props\n */\nexport type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & {\n  /**\n   * The appearance of the Spinner.\n   * @default 'primary'\n   */\n  appearance?: 'primary' | 'inverted';\n\n  /**\n   * Time in milliseconds after component mount before spinner is visible.\n   * @default 0\n   */\n  delay?: number;\n\n  /**\n   * Where the label is positioned relative to the Spinner\n   * @default 'after'\n   */\n  labelPosition?: 'above' | 'below' | 'before' | 'after';\n\n  /**\n   * The size of the spinner.\n   * @default 'medium'\n   */\n  size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n};\n\n/**\n * State used in rendering Spinner\n */\nexport type SpinnerState = ComponentState<SpinnerSlots> &\n  Required<Pick<SpinnerProps, 'appearance' | 'delay' | 'labelPosition' | 'size'>> & {\n    /**\n     * Should the spinner be rendered in the DOM\n     */\n    shouldRenderSpinner: boolean;\n  };\n"],"mappings":"AAAA"}

package/lib/components/Spinner/renderSpinner.js

@@ -9,8 +9,9 @@ export const renderSpinner_unstable = state => {
     slotProps
   } = getSlotsNext(state);
   const {
-    labelPosition
+    labelPosition,
+    shouldRenderSpinner
   } = state;
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.label && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/createElement(slots.label, slotProps.label), slots.spinner && /*#__PURE__*/createElement(slots.spinner, slotProps.spinner), slots.label && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/createElement(slots.label, slotProps.label));
+  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/createElement(slots.label, slotProps.label), slots.spinner && shouldRenderSpinner && /*#__PURE__*/createElement(slots.spinner, slotProps.spinner), slots.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/createElement(slots.label, slotProps.label));
 };
 //# sourceMappingURL=renderSpinner.js.map

package/lib/components/Spinner/renderSpinner.js.map

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","renderSpinner_unstable","state","slots","slotProps","labelPosition","root","label","spinner"],"sources":["../../../src/components/Spinner/renderSpinner.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerState) => {\n  const { slots, slotProps } = getSlotsNext<SpinnerSlots>(state);\n  const { labelPosition } = state;\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.label && (labelPosition === 'above' || labelPosition === 'before') && <slots.label {...slotProps.label} />}\n      {slots.spinner && <slots.spinner {...slotProps.spinner} />}\n      {slots.label && (labelPosition === 'below' || labelPosition === 'after') && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,sBAAA,GAA0BC,KAAA,IAAwB;EAC7D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA2BE,KAAA;EACxD,MAAM;IAAEG;EAAa,CAAE,GAAGH,KAAA;EAC1B,oBACEH,aAdJ,CAcKI,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,EAC3BH,KAAA,CAAMI,KAAK,KAAKF,aAAA,KAAkB,WAAWA,aAAA,KAAkB,QAAO,kBAAMN,aAfnF,CAeoFI,KAAA,CAAMI,KAAK,EAAKH,SAAA,CAAUG,KAAK,GAC5GJ,KAAA,CAAMK,OAAO,iBAAIT,aAhBxB,CAgByBI,KAAA,CAAMK,OAAO,EAAKJ,SAAA,CAAUI,OAAO,GACrDL,KAAA,CAAMI,KAAK,KAAKF,aAAA,KAAkB,WAAWA,aAAA,KAAkB,OAAM,kBAAMN,aAjBlF,CAiBmFI,KAAA,CAAMI,KAAK,EAAKH,SAAA,CAAUG,KAAK;AAGlH"}
+{"version":3,"names":["createElement","getSlotsNext","renderSpinner_unstable","state","slots","slotProps","labelPosition","shouldRenderSpinner","root","label","spinner"],"sources":["../../../src/components/Spinner/renderSpinner.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerState) => {\n  const { slots, slotProps } = getSlotsNext<SpinnerSlots>(state);\n  const { labelPosition, shouldRenderSpinner } = state;\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && (\n        <slots.label {...slotProps.label} />\n      )}\n      {slots.spinner && shouldRenderSpinner && <slots.spinner {...slotProps.spinner} />}\n      {slots.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && (\n        <slots.label {...slotProps.label} />\n      )}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,sBAAA,GAA0BC,KAAA,IAAwB;EAC7D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA2BE,KAAA;EACxD,MAAM;IAAEG,aAAA;IAAeC;EAAmB,CAAE,GAAGJ,KAAA;EAC/C,oBACEH,aAdJ,CAcKI,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI,EAC3BJ,KAAA,CAAMK,KAAK,IAAIF,mBAAA,KAAwBD,aAAA,KAAkB,WAAWA,aAAA,KAAkB,QAAO,kBAC5FN,aAhBR,CAgBSI,KAAA,CAAMK,KAAK,EAAKJ,SAAA,CAAUI,KAAK,GAEjCL,KAAA,CAAMM,OAAO,IAAIH,mBAAA,iBAAuBP,aAlB/C,CAkBgDI,KAAA,CAAMM,OAAO,EAAKL,SAAA,CAAUK,OAAO,GAC5EN,KAAA,CAAMK,KAAK,IAAIF,mBAAA,KAAwBD,aAAA,KAAkB,WAAWA,aAAA,KAAkB,OAAM,kBAC3FN,aApBR,CAoBSI,KAAA,CAAMK,KAAK,EAAKJ,SAAA,CAAUI,KAAK;AAIxC"}

package/lib/components/Spinner/useSpinner.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { getNativeElementProps, resolveShorthand, useId, useTimeout } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
 import { DefaultSvg } from './DefaultSvg';
 /**
@@ -16,7 +16,8 @@ export const useSpinner_unstable = (props, ref) => {
   const {
     appearance = 'primary',
     labelPosition = 'after',
-    size = 'medium'
+    size = 'medium',
+    delay = 0
   } = props;
   const baseId = useId('spinner');
   const {
@@ -29,6 +30,20 @@ export const useSpinner_unstable = (props, ref) => {
     role,
     ...rest
   }, ['size']);
+  const [isVisible, setIsVisible] = React.useState(true);
+  const [setDelayTimeout, clearDelayTimeout] = useTimeout();
+  React.useEffect(() => {
+    if (delay <= 0) {
+      return;
+    }
+    setIsVisible(false);
+    setDelayTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+    return () => {
+      clearDelayTimeout();
+    };
+  }, [setDelayTimeout, clearDelayTimeout, delay]);
   const labelShorthand = resolveShorthand(props.label, {
     defaultProps: {
       id: baseId
@@ -47,8 +62,10 @@ export const useSpinner_unstable = (props, ref) => {
   }
   const state = {
     appearance,
+    delay,
     labelPosition,
     size,
+    shouldRenderSpinner: isVisible,
     components: {
       root: 'div',
       spinner: 'span',

package/lib/components/Spinner/useSpinner.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useId","Label","DefaultSvg","useSpinner_unstable","props","ref","appearance","labelPosition","size","baseId","role","tabIndex","rest","nativeRoot","labelShorthand","label","defaultProps","id","required","spinnerShortHand","spinner","children","createElement","state","components","root"],"sources":["../../../src/components/Spinner/useSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\n\n/**\n * Create the state required to render Spinner.\n *\n * The returned state can be modified with hooks such as useSpinnerStyles_unstable,\n * before being passed to renderSpinner_unstable.\n *\n * @param props - props from this instance of Spinner\n * @param ref - reference to root HTMLElement of Spinner\n */\nexport const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElement>): SpinnerState => {\n  // Props\n  const { appearance = 'primary', labelPosition = 'after', size = 'medium' } = props;\n  const baseId = useId('spinner');\n\n  const { role = 'progressbar', tabIndex, ...rest } = props;\n  const nativeRoot = getNativeElementProps('div', { ref, role, ...rest }, ['size']);\n\n  const labelShorthand = resolveShorthand(props.label, {\n    defaultProps: {\n      id: baseId,\n    },\n    required: false,\n  });\n\n  const spinnerShortHand = resolveShorthand(props.spinner, {\n    required: true,\n    defaultProps: {\n      children: <DefaultSvg />,\n      tabIndex,\n    },\n  });\n\n  if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['aria-labelledby'] = labelShorthand.id;\n  }\n\n  const state: SpinnerState = {\n    appearance,\n    labelPosition,\n    size,\n    components: {\n      root: 'div',\n      spinner: 'span',\n      label: Label,\n    },\n    root: nativeRoot,\n    spinner: spinnerShortHand,\n    label: labelShorthand,\n  };\n  return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAE/D,SAASC,KAAK,QAAQ;AACtB,SAASC,UAAU,QAAQ;AAE3B;;;;;;;;;AASA,OAAO,MAAMC,mBAAA,GAAsBA,CAACC,KAAA,EAAqBC,GAAA,KAA8C;EACrG;EACA,MAAM;IAAEC,UAAA,GAAa;IAAWC,aAAA,GAAgB;IAASC,IAAA,GAAO;EAAQ,CAAE,GAAGJ,KAAA;EAC7E,MAAMK,MAAA,GAAST,KAAA,CAAM;EAErB,MAAM;IAAEU,IAAA,GAAO;IAAeC,QAAA;IAAU,GAAGC;EAAA,CAAM,GAAGR,KAAA;EACpD,MAAMS,UAAA,GAAaf,qBAAA,CAAsB,OAAO;IAAEO,GAAA;IAAKK,IAAA;IAAM,GAAGE;EAAK,GAAG,CAAC,OAAO;EAEhF,MAAME,cAAA,GAAiBf,gBAAA,CAAiBK,KAAA,CAAMW,KAAK,EAAE;IACnDC,YAAA,EAAc;MACZC,EAAA,EAAIR;IACN;IACAS,QAAA,EAAU;EACZ;EAEA,MAAMC,gBAAA,GAAmBpB,gBAAA,CAAiBK,KAAA,CAAMgB,OAAO,EAAE;IACvDF,QAAA,EAAU,IAAI;IACdF,YAAA,EAAc;MACZK,QAAA,eAAUxB,KAAA,CAAAyB,aAAA,CAACpB,UAAA;MACXS;IACF;EACF;EAEA,IAAIG,cAAA,IAAkBD,UAAA,IAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;IAClEA,UAAU,CAAC,kBAAkB,GAAGC,cAAA,CAAeG,EAAE;EACnD;EAEA,MAAMM,KAAA,GAAsB;IAC1BjB,UAAA;IACAC,aAAA;IACAC,IAAA;IACAgB,UAAA,EAAY;MACVC,IAAA,EAAM;MACNL,OAAA,EAAS;MACTL,KAAA,EAAOd;IACT;IACAwB,IAAA,EAAMZ,UAAA;IACNO,OAAA,EAASD,gBAAA;IACTJ,KAAA,EAAOD;EACT;EACA,OAAOS,KAAA;AACT"}
+{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useId","useTimeout","Label","DefaultSvg","useSpinner_unstable","props","ref","appearance","labelPosition","size","delay","baseId","role","tabIndex","rest","nativeRoot","isVisible","setIsVisible","useState","setDelayTimeout","clearDelayTimeout","useEffect","labelShorthand","label","defaultProps","id","required","spinnerShortHand","spinner","children","createElement","state","shouldRenderSpinner","components","root"],"sources":["../../../src/components/Spinner/useSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useTimeout } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\n\n/**\n * Create the state required to render Spinner.\n *\n * The returned state can be modified with hooks such as useSpinnerStyles_unstable,\n * before being passed to renderSpinner_unstable.\n *\n * @param props - props from this instance of Spinner\n * @param ref - reference to root HTMLElement of Spinner\n */\nexport const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElement>): SpinnerState => {\n  // Props\n  const { appearance = 'primary', labelPosition = 'after', size = 'medium', delay = 0 } = props;\n  const baseId = useId('spinner');\n\n  const { role = 'progressbar', tabIndex, ...rest } = props;\n  const nativeRoot = getNativeElementProps('div', { ref, role, ...rest }, ['size']);\n\n  const [isVisible, setIsVisible] = React.useState(true);\n\n  const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n\n  React.useEffect(() => {\n    if (delay <= 0) {\n      return;\n    }\n    setIsVisible(false);\n    setDelayTimeout(() => {\n      setIsVisible(true);\n    }, delay);\n\n    return () => {\n      clearDelayTimeout();\n    };\n  }, [setDelayTimeout, clearDelayTimeout, delay]);\n\n  const labelShorthand = resolveShorthand(props.label, {\n    defaultProps: {\n      id: baseId,\n    },\n    required: false,\n  });\n\n  const spinnerShortHand = resolveShorthand(props.spinner, {\n    required: true,\n    defaultProps: {\n      children: <DefaultSvg />,\n      tabIndex,\n    },\n  });\n\n  if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['aria-labelledby'] = labelShorthand.id;\n  }\n\n  const state: SpinnerState = {\n    appearance,\n    delay,\n    labelPosition,\n    size,\n    shouldRenderSpinner: isVisible,\n    components: {\n      root: 'div',\n      spinner: 'span',\n      label: Label,\n    },\n    root: nativeRoot,\n    spinner: spinnerShortHand,\n    label: labelShorthand,\n  };\n  return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,UAAU,QAAQ;AAE3E,SAASC,KAAK,QAAQ;AACtB,SAASC,UAAU,QAAQ;AAE3B;;;;;;;;;AASA,OAAO,MAAMC,mBAAA,GAAsBA,CAACC,KAAA,EAAqBC,GAAA,KAA8C;EACrG;EACA,MAAM;IAAEC,UAAA,GAAa;IAAWC,aAAA,GAAgB;IAASC,IAAA,GAAO;IAAUC,KAAA,GAAQ;EAAC,CAAE,GAAGL,KAAA;EACxF,MAAMM,MAAA,GAASX,KAAA,CAAM;EAErB,MAAM;IAAEY,IAAA,GAAO;IAAeC,QAAA;IAAU,GAAGC;EAAA,CAAM,GAAGT,KAAA;EACpD,MAAMU,UAAA,GAAajB,qBAAA,CAAsB,OAAO;IAAEQ,GAAA;IAAKM,IAAA;IAAM,GAAGE;EAAK,GAAG,CAAC,OAAO;EAEhF,MAAM,CAACE,SAAA,EAAWC,YAAA,CAAa,GAAGpB,KAAA,CAAMqB,QAAQ,CAAC,IAAI;EAErD,MAAM,CAACC,eAAA,EAAiBC,iBAAA,CAAkB,GAAGnB,UAAA;EAE7CJ,KAAA,CAAMwB,SAAS,CAAC,MAAM;IACpB,IAAIX,KAAA,IAAS,GAAG;MACd;IACF;IACAO,YAAA,CAAa,KAAK;IAClBE,eAAA,CAAgB,MAAM;MACpBF,YAAA,CAAa,IAAI;IACnB,GAAGP,KAAA;IAEH,OAAO,MAAM;MACXU,iBAAA;IACF;EACF,GAAG,CAACD,eAAA,EAAiBC,iBAAA,EAAmBV,KAAA,CAAM;EAE9C,MAAMY,cAAA,GAAiBvB,gBAAA,CAAiBM,KAAA,CAAMkB,KAAK,EAAE;IACnDC,YAAA,EAAc;MACZC,EAAA,EAAId;IACN;IACAe,QAAA,EAAU;EACZ;EAEA,MAAMC,gBAAA,GAAmB5B,gBAAA,CAAiBM,KAAA,CAAMuB,OAAO,EAAE;IACvDF,QAAA,EAAU,IAAI;IACdF,YAAA,EAAc;MACZK,QAAA,eAAUhC,KAAA,CAAAiC,aAAA,CAAC3B,UAAA;MACXU;IACF;EACF;EAEA,IAAIS,cAAA,IAAkBP,UAAA,IAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;IAClEA,UAAU,CAAC,kBAAkB,GAAGO,cAAA,CAAeG,EAAE;EACnD;EAEA,MAAMM,KAAA,GAAsB;IAC1BxB,UAAA;IACAG,KAAA;IACAF,aAAA;IACAC,IAAA;IACAuB,mBAAA,EAAqBhB,SAAA;IACrBiB,UAAA,EAAY;MACVC,IAAA,EAAM;MACNN,OAAA,EAAS;MACTL,KAAA,EAAOrB;IACT;IACAgC,IAAA,EAAMnB,UAAA;IACNa,OAAA,EAASD,gBAAA;IACTJ,KAAA,EAAOD;EACT;EACA,OAAOS,KAAA;AACT"}

package/lib-commonjs/components/Spinner/renderSpinner.js

@@ -10,8 +10,8 @@ const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderSpinner_unstable = (state)=>{
     const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    const { labelPosition  } = state;
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.label && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.label, slotProps.label), slots.spinner && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.spinner, slotProps.spinner), slots.label && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.label, slotProps.label));
+    const { labelPosition , shouldRenderSpinner  } = state;
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.label, slotProps.label), slots.spinner && shouldRenderSpinner && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.spinner, slotProps.spinner), slots.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.label, slotProps.label));
 }; //# sourceMappingURL=renderSpinner.js.map
 
 //# sourceMappingURL=renderSpinner.js.map

package/lib-commonjs/components/Spinner/renderSpinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Spinner/renderSpinner.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = state => {\n  const {\n    slots,\n    slotProps\n  } = getSlotsNext(state);\n  const {\n    labelPosition\n  } = state;\n  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.label && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/createElement(slots.label, slotProps.label), slots.spinner && /*#__PURE__*/createElement(slots.spinner, slotProps.spinner), slots.label && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/createElement(slots.label, slotProps.label));\n};\n//# sourceMappingURL=renderSpinner.js.map"],"names":["renderSpinner_unstable","state","slots","slotProps","getSlotsNext","labelPosition","createElement","root","label","spinner"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKrCA;;aAAAA;;iCALqE;gCACrD;AAItB,MAAMA,yBAAyBC,CAAAA,QAAS;IAC7C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,4BAAY,EAACH;IACjB,MAAM,EACJI,cAAa,EACd,GAAGJ;IACJ,OAAO,WAAW,GAAEK,IAAAA,8BAAa,EAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,EAAEL,MAAMM,KAAK,IAAKH,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAO,KAAM,WAAW,GAAEC,IAAAA,8BAAa,EAACJ,MAAMM,KAAK,EAAEL,UAAUK,KAAK,GAAGN,MAAMO,OAAO,IAAI,WAAW,GAAEH,IAAAA,8BAAa,EAACJ,MAAMO,OAAO,EAAEN,UAAUM,OAAO,GAAGP,MAAMM,KAAK,IAAKH,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAM,KAAM,WAAW,GAAEC,IAAAA,8BAAa,EAACJ,MAAMM,KAAK,EAAEL,UAAUK,KAAK;AACvZ,GACA,yCAAyC"}
+{"version":3,"sources":["../../../lib/components/Spinner/renderSpinner.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = state => {\n  const {\n    slots,\n    slotProps\n  } = getSlotsNext(state);\n  const {\n    labelPosition,\n    shouldRenderSpinner\n  } = state;\n  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/createElement(slots.label, slotProps.label), slots.spinner && shouldRenderSpinner && /*#__PURE__*/createElement(slots.spinner, slotProps.spinner), slots.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/createElement(slots.label, slotProps.label));\n};\n//# sourceMappingURL=renderSpinner.js.map"],"names":["renderSpinner_unstable","state","slots","slotProps","getSlotsNext","labelPosition","shouldRenderSpinner","createElement","root","label","spinner"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKrCA;;aAAAA;;iCALqE;gCACrD;AAItB,MAAMA,yBAAyBC,CAAAA,QAAS;IAC7C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,4BAAY,EAACH;IACjB,MAAM,EACJI,cAAa,EACbC,oBAAmB,EACpB,GAAGL;IACJ,OAAO,WAAW,GAAEM,IAAAA,8BAAa,EAACL,MAAMM,IAAI,EAAEL,UAAUK,IAAI,EAAEN,MAAMO,KAAK,IAAIH,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAO,KAAM,WAAW,GAAEE,IAAAA,8BAAa,EAACL,MAAMO,KAAK,EAAEN,UAAUM,KAAK,GAAGP,MAAMQ,OAAO,IAAIJ,uBAAuB,WAAW,GAAEC,IAAAA,8BAAa,EAACL,MAAMQ,OAAO,EAAEP,UAAUO,OAAO,GAAGR,MAAMO,KAAK,IAAIH,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAM,KAAM,WAAW,GAAEE,IAAAA,8BAAa,EAACL,MAAMO,KAAK,EAAEN,UAAUM,KAAK;AAC5d,GACA,yCAAyC"}

package/lib-commonjs/components/Spinner/useSpinner.js

@@ -13,7 +13,7 @@ const _reactLabel = require("@fluentui/react-label");
 const _defaultSvg = require("./DefaultSvg");
 const useSpinner_unstable = (props, ref)=>{
     // Props
-    const { appearance ='primary' , labelPosition ='after' , size ='medium'  } = props;
+    const { appearance ='primary' , labelPosition ='after' , size ='medium' , delay =0  } = props;
     const baseId = (0, _reactUtilities.useId)('spinner');
     const { role ='progressbar' , tabIndex , ...rest } = props;
     const nativeRoot = (0, _reactUtilities.getNativeElementProps)('div', {
@@ -23,6 +23,24 @@ const useSpinner_unstable = (props, ref)=>{
     }, [
         'size'
     ]);
+    const [isVisible, setIsVisible] = _react.useState(true);
+    const [setDelayTimeout, clearDelayTimeout] = (0, _reactUtilities.useTimeout)();
+    _react.useEffect(()=>{
+        if (delay <= 0) {
+            return;
+        }
+        setIsVisible(false);
+        setDelayTimeout(()=>{
+            setIsVisible(true);
+        }, delay);
+        return ()=>{
+            clearDelayTimeout();
+        };
+    }, [
+        setDelayTimeout,
+        clearDelayTimeout,
+        delay
+    ]);
     const labelShorthand = (0, _reactUtilities.resolveShorthand)(props.label, {
         defaultProps: {
             id: baseId
@@ -41,8 +59,10 @@ const useSpinner_unstable = (props, ref)=>{
     }
     const state = {
         appearance,
+        delay,
         labelPosition,
         size,
+        shouldRenderSpinner: isVisible,
         components: {
             root: 'div',
             spinner: 'span',

package/lib-commonjs/components/Spinner/useSpinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Spinner/useSpinner.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\n/**\n * Create the state required to render Spinner.\n *\n * The returned state can be modified with hooks such as useSpinnerStyles_unstable,\n * before being passed to renderSpinner_unstable.\n *\n * @param props - props from this instance of Spinner\n * @param ref - reference to root HTMLElement of Spinner\n */\nexport const useSpinner_unstable = (props, ref) => {\n  // Props\n  const {\n    appearance = 'primary',\n    labelPosition = 'after',\n    size = 'medium'\n  } = props;\n  const baseId = useId('spinner');\n  const {\n    role = 'progressbar',\n    tabIndex,\n    ...rest\n  } = props;\n  const nativeRoot = getNativeElementProps('div', {\n    ref,\n    role,\n    ...rest\n  }, ['size']);\n  const labelShorthand = resolveShorthand(props.label, {\n    defaultProps: {\n      id: baseId\n    },\n    required: false\n  });\n  const spinnerShortHand = resolveShorthand(props.spinner, {\n    required: true,\n    defaultProps: {\n      children: /*#__PURE__*/React.createElement(DefaultSvg, null),\n      tabIndex\n    }\n  });\n  if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['aria-labelledby'] = labelShorthand.id;\n  }\n  const state = {\n    appearance,\n    labelPosition,\n    size,\n    components: {\n      root: 'div',\n      spinner: 'span',\n      label: Label\n    },\n    root: nativeRoot,\n    spinner: spinnerShortHand,\n    label: labelShorthand\n  };\n  return state;\n};\n//# sourceMappingURL=useSpinner.js.map"],"names":["useSpinner_unstable","props","ref","appearance","labelPosition","size","baseId","useId","role","tabIndex","rest","nativeRoot","getNativeElementProps","labelShorthand","resolveShorthand","label","defaultProps","id","required","spinnerShortHand","spinner","children","React","createElement","DefaultSvg","state","components","root","Label"],"mappings":";;;;+BAaaA;;aAAAA;;;6DAbU;gCACwC;4BACzC;4BACK;AAUpB,MAAMA,sBAAsB,CAACC,OAAOC,MAAQ;IACjD,QAAQ;IACR,MAAM,EACJC,YAAa,UAAS,EACtBC,eAAgB,QAAO,EACvBC,MAAO,SAAQ,EAChB,GAAGJ;IACJ,MAAMK,SAASC,IAAAA,qBAAK,EAAC;IACrB,MAAM,EACJC,MAAO,cAAa,EACpBC,SAAQ,EACR,GAAGC,MACJ,GAAGT;IACJ,MAAMU,aAAaC,IAAAA,qCAAqB,EAAC,OAAO;QAC9CV;QACAM;QACA,GAAGE,IAAI;IACT,GAAG;QAAC;KAAO;IACX,MAAMG,iBAAiBC,IAAAA,gCAAgB,EAACb,MAAMc,KAAK,EAAE;QACnDC,cAAc;YACZC,IAAIX;QACN;QACAY,UAAU,KAAK;IACjB;IACA,MAAMC,mBAAmBL,IAAAA,gCAAgB,EAACb,MAAMmB,OAAO,EAAE;QACvDF,UAAU,IAAI;QACdF,cAAc;YACZK,UAAU,WAAW,GAAEC,OAAMC,aAAa,CAACC,sBAAU,EAAE,IAAI;YAC3Df;QACF;IACF;IACA,IAAII,kBAAkBF,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGE,eAAeI,EAAE;IACnD,CAAC;IACD,MAAMQ,QAAQ;QACZtB;QACAC;QACAC;QACAqB,YAAY;YACVC,MAAM;YACNP,SAAS;YACTL,OAAOa,iBAAK;QACd;QACAD,MAAMhB;QACNS,SAASD;QACTJ,OAAOF;IACT;IACA,OAAOY;AACT,GACA,sCAAsC"}
+{"version":3,"sources":["../../../lib/components/Spinner/useSpinner.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useTimeout } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\n/**\n * Create the state required to render Spinner.\n *\n * The returned state can be modified with hooks such as useSpinnerStyles_unstable,\n * before being passed to renderSpinner_unstable.\n *\n * @param props - props from this instance of Spinner\n * @param ref - reference to root HTMLElement of Spinner\n */\nexport const useSpinner_unstable = (props, ref) => {\n  // Props\n  const {\n    appearance = 'primary',\n    labelPosition = 'after',\n    size = 'medium',\n    delay = 0\n  } = props;\n  const baseId = useId('spinner');\n  const {\n    role = 'progressbar',\n    tabIndex,\n    ...rest\n  } = props;\n  const nativeRoot = getNativeElementProps('div', {\n    ref,\n    role,\n    ...rest\n  }, ['size']);\n  const [isVisible, setIsVisible] = React.useState(true);\n  const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n  React.useEffect(() => {\n    if (delay <= 0) {\n      return;\n    }\n    setIsVisible(false);\n    setDelayTimeout(() => {\n      setIsVisible(true);\n    }, delay);\n    return () => {\n      clearDelayTimeout();\n    };\n  }, [setDelayTimeout, clearDelayTimeout, delay]);\n  const labelShorthand = resolveShorthand(props.label, {\n    defaultProps: {\n      id: baseId\n    },\n    required: false\n  });\n  const spinnerShortHand = resolveShorthand(props.spinner, {\n    required: true,\n    defaultProps: {\n      children: /*#__PURE__*/React.createElement(DefaultSvg, null),\n      tabIndex\n    }\n  });\n  if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['aria-labelledby'] = labelShorthand.id;\n  }\n  const state = {\n    appearance,\n    delay,\n    labelPosition,\n    size,\n    shouldRenderSpinner: isVisible,\n    components: {\n      root: 'div',\n      spinner: 'span',\n      label: Label\n    },\n    root: nativeRoot,\n    spinner: spinnerShortHand,\n    label: labelShorthand\n  };\n  return state;\n};\n//# sourceMappingURL=useSpinner.js.map"],"names":["useSpinner_unstable","props","ref","appearance","labelPosition","size","delay","baseId","useId","role","tabIndex","rest","nativeRoot","getNativeElementProps","isVisible","setIsVisible","React","useState","setDelayTimeout","clearDelayTimeout","useTimeout","useEffect","labelShorthand","resolveShorthand","label","defaultProps","id","required","spinnerShortHand","spinner","children","createElement","DefaultSvg","state","shouldRenderSpinner","components","root","Label"],"mappings":";;;;+BAaaA;;aAAAA;;;6DAbU;gCACoD;4BACrD;4BACK;AAUpB,MAAMA,sBAAsB,CAACC,OAAOC,MAAQ;IACjD,QAAQ;IACR,MAAM,EACJC,YAAa,UAAS,EACtBC,eAAgB,QAAO,EACvBC,MAAO,SAAQ,EACfC,OAAQ,EAAC,EACV,GAAGL;IACJ,MAAMM,SAASC,IAAAA,qBAAK,EAAC;IACrB,MAAM,EACJC,MAAO,cAAa,EACpBC,SAAQ,EACR,GAAGC,MACJ,GAAGV;IACJ,MAAMW,aAAaC,IAAAA,qCAAqB,EAAC,OAAO;QAC9CX;QACAO;QACA,GAAGE,IAAI;IACT,GAAG;QAAC;KAAO;IACX,MAAM,CAACG,WAAWC,aAAa,GAAGC,OAAMC,QAAQ,CAAC,IAAI;IACrD,MAAM,CAACC,iBAAiBC,kBAAkB,GAAGC,IAAAA,0BAAU;IACvDJ,OAAMK,SAAS,CAAC,IAAM;QACpB,IAAIf,SAAS,GAAG;YACd;QACF,CAAC;QACDS,aAAa,KAAK;QAClBG,gBAAgB,IAAM;YACpBH,aAAa,IAAI;QACnB,GAAGT;QACH,OAAO,IAAM;YACXa;QACF;IACF,GAAG;QAACD;QAAiBC;QAAmBb;KAAM;IAC9C,MAAMgB,iBAAiBC,IAAAA,gCAAgB,EAACtB,MAAMuB,KAAK,EAAE;QACnDC,cAAc;YACZC,IAAInB;QACN;QACAoB,UAAU,KAAK;IACjB;IACA,MAAMC,mBAAmBL,IAAAA,gCAAgB,EAACtB,MAAM4B,OAAO,EAAE;QACvDF,UAAU,IAAI;QACdF,cAAc;YACZK,UAAU,WAAW,GAAEd,OAAMe,aAAa,CAACC,sBAAU,EAAE,IAAI;YAC3DtB;QACF;IACF;IACA,IAAIY,kBAAkBV,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGU,eAAeI,EAAE;IACnD,CAAC;IACD,MAAMO,QAAQ;QACZ9B;QACAG;QACAF;QACAC;QACA6B,qBAAqBpB;QACrBqB,YAAY;YACVC,MAAM;YACNP,SAAS;YACTL,OAAOa,iBAAK;QACd;QACAD,MAAMxB;QACNiB,SAASD;QACTJ,OAAOF;IACT;IACA,OAAOW;AACT,GACA,sCAAsC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinner",
-  "version": "9.1.12",
+  "version": "9.2.0",
   "description": "Spinner component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -23,7 +23,7 @@
     "storybook": "start-storybook",
     "type-check": "tsc -b tsconfig.json",
     "generate-api": "just-scripts generate-api",
-    "test-ssr": "test-ssr ./stories/**/*.stories.tsx"
+    "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -34,8 +34,8 @@
   },
   "dependencies": {
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.4",
-    "@fluentui/react-label": "^9.1.12",
-    "@fluentui/react-shared-contexts": "^9.4.0",
+    "@fluentui/react-label": "^9.1.13",
+    "@fluentui/react-shared-contexts": "^9.5.0",
     "@fluentui/react-theme": "^9.1.8",
     "@fluentui/react-utilities": "^9.9.0",
     "@griffel/react": "^1.5.2",