@fluentui/react-spinner 9.7.15 → 9.8.1

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/react-spinner
 
-This log was last generated on Wed, 25 Feb 2026 13:28:23 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Apr 2026 15:50:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.8.1)
+
+Wed, 01 Apr 2026 15:50:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.8.0..@fluentui/react-spinner_v9.8.1)
+
+### Patches
+
+- Bump @fluentui/react-label to v9.4.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
+
+## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.8.0)
+
+Thu, 26 Mar 2026 08:12:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.7.15..@fluentui/react-spinner_v9.8.0)
+
+### Minor changes
+
+- feat: add base hooks for Spinner ([PR #35818](https://github.com/microsoft/fluentui/pull/35818) by dmytrokirpa@microsoft.com)
+
 ## [9.7.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.7.15)
 
-Wed, 25 Feb 2026 13:28:23 GMT 
+Wed, 25 Feb 2026 13:32:28 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.7.14..@fluentui/react-spinner_v9.7.15)
 
 ### Patches

package/dist/index.d.ts

@@ -10,13 +10,23 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Spinner
  */
-export declare const renderSpinner_unstable: (state: SpinnerState) => JSXElement;
+export declare const renderSpinner_unstable: (state: SpinnerBaseState) => JSXElement;
 
 /**
  * Converged Spinner component for the fluentui repo
  */
 export declare const Spinner: ForwardRefComponent<SpinnerProps>;
 
+/**
+ * Spinner base props, excluding design-related props like appearance and size.
+ */
+export declare type SpinnerBaseProps = Omit<SpinnerProps, 'appearance' | 'size'>;
+
+/**
+ * Spinner base state, excluding design-related state like appearance and size.
+ */
+export declare type SpinnerBaseState = Omit<SpinnerState, 'appearance' | 'size'>;
+
 export declare const spinnerClassNames: SlotClassNames<SpinnerSlots>;
 
 /**
@@ -96,6 +106,15 @@ export declare type SpinnerState = ComponentState<SpinnerSlots> & Required<Pick<
  */
 export declare const useSpinner_unstable: (props: SpinnerProps, ref: React_2.Ref<HTMLElement>) => SpinnerState;
 
+/**
+ * Base hook for Spinner component, which manages state related to slots structure, ARIA attributes,
+ * and delay-based visibility logic.
+ *
+ * @param props - User provided props to the Spinner component.
+ * @param ref - User provided ref to be passed to the Spinner component.
+ */
+export declare const useSpinnerBase_unstable: (props: SpinnerBaseProps, ref: React_2.Ref<HTMLElement>) => SpinnerBaseState;
+
 /**
  * @internal
  */

package/lib/Spinner.js

@@ -1 +1 @@
-export { Spinner, renderSpinner_unstable, spinnerClassNames, useSpinnerStyles_unstable, useSpinner_unstable } from './components/Spinner/index';
+export { Spinner, renderSpinner_unstable, spinnerClassNames, useSpinnerStyles_unstable, useSpinner_unstable, useSpinnerBase_unstable } from './components/Spinner/index';

package/lib/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Spinner.ts"],"sourcesContent":["export type { SpinnerProps, SpinnerSlots, SpinnerState } from './components/Spinner/index';\nexport {\n  Spinner,\n  renderSpinner_unstable,\n  spinnerClassNames,\n  useSpinnerStyles_unstable,\n  useSpinner_unstable,\n} from './components/Spinner/index';\n"],"names":["Spinner","renderSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable","useSpinner_unstable"],"mappings":"AACA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,QACd,6BAA6B"}
+{"version":3,"sources":["../src/Spinner.ts"],"sourcesContent":["export type {\n  SpinnerBaseProps,\n  SpinnerBaseState,\n  SpinnerProps,\n  SpinnerSlots,\n  SpinnerState,\n} from './components/Spinner/index';\nexport {\n  Spinner,\n  renderSpinner_unstable,\n  spinnerClassNames,\n  useSpinnerStyles_unstable,\n  useSpinner_unstable,\n  useSpinnerBase_unstable,\n} from './components/Spinner/index';\n"],"names":["Spinner","renderSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable","useSpinner_unstable","useSpinnerBase_unstable"],"mappings":"AAOA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,EACnBC,uBAAuB,QAClB,6BAA6B"}

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

@@ -1,3 +1,3 @@
 /**
- * State used in rendering Spinner
+ * Spinner base state, excluding design-related state like appearance and size.
  */ export { };

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

@@ -1 +1 @@
-{"version":3,"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', 'span'>>;\n\n  /**\n   * The animated spinning ring.\n   */\n  spinner?: Slot<'span'>;\n\n  /**\n   * The part of the spinner that rotates.\n   */\n  spinnerTail?: NonNullable<Slot<'span'>>;\n\n  /**\n   * An optional label for 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?: 'extra-tiny' | '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"],"names":[],"mappings":"AAuDA;;CAEC,GACD,WAMI"}
+{"version":3,"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', 'span'>>;\n\n  /**\n   * The animated spinning ring.\n   */\n  spinner?: Slot<'span'>;\n\n  /**\n   * The part of the spinner that rotates.\n   */\n  spinnerTail?: NonNullable<Slot<'span'>>;\n\n  /**\n   * An optional label for 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?: 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n};\n\n/**\n * Spinner base props, excluding design-related props like appearance and size.\n */\nexport type SpinnerBaseProps = Omit<SpinnerProps, 'appearance' | 'size'>;\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\n/**\n * Spinner base state, excluding design-related state like appearance and size.\n */\nexport type SpinnerBaseState = Omit<SpinnerState, 'appearance' | 'size'>;\n"],"names":[],"mappings":"AAuEA;;CAEC,GACD,WAAyE"}

package/lib/components/Spinner/index.js

@@ -1,4 +1,4 @@
 export { Spinner } from './Spinner';
 export { renderSpinner_unstable } from './renderSpinner';
-export { useSpinner_unstable } from './useSpinner';
+export { useSpinner_unstable, useSpinnerBase_unstable } from './useSpinner';
 export { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/index.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';\nexport { renderSpinner_unstable } from './renderSpinner';\nexport { useSpinner_unstable } from './useSpinner';\nexport { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\n"],"names":["Spinner","renderSpinner_unstable","useSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}
+{"version":3,"sources":["../src/components/Spinner/index.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerBaseProps, SpinnerBaseState, SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';\nexport { renderSpinner_unstable } from './renderSpinner';\nexport { useSpinner_unstable, useSpinnerBase_unstable } from './useSpinner';\nexport { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\n"],"names":["Spinner","renderSpinner_unstable","useSpinner_unstable","useSpinnerBase_unstable","spinnerClassNames","useSpinnerStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,EAAEC,uBAAuB,QAAQ,eAAe;AAC5E,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/renderSpinner.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 type { SpinnerState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerState): JSXElement => {\n  assertSlots<SpinnerSlots>(state);\n  const { labelPosition, shouldRenderSpinner } = state;\n  return (\n    <state.root>\n      {state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && (\n        <state.label />\n      )}\n      {state.spinner && shouldRenderSpinner && (\n        <state.spinner>{state.spinnerTail && <state.spinnerTail />}</state.spinner>\n      )}\n      {state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && (\n        <state.label />\n      )}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSpinner_unstable","state","labelPosition","shouldRenderSpinner","root","label","spinner","spinnerTail"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrCF,YAA0BE;IAC1B,MAAM,EAAEC,aAAa,EAAEC,mBAAmB,EAAE,GAAGF;IAC/C,qBACE,MAACA,MAAMG,IAAI;;YACRH,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAO,mBAC5F,KAACD,MAAMI,KAAK;YAEbJ,MAAMK,OAAO,IAAIH,qCAChB,KAACF,MAAMK,OAAO;0BAAEL,MAAMM,WAAW,kBAAI,KAACN,MAAMM,WAAW;;YAExDN,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAM,mBAC3F,KAACD,MAAMI,KAAK;;;AAIpB,EAAE"}
+{"version":3,"sources":["../src/components/Spinner/renderSpinner.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 type { SpinnerBaseState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerBaseState): JSXElement => {\n  assertSlots<SpinnerSlots>(state);\n  const { labelPosition, shouldRenderSpinner } = state;\n  return (\n    <state.root>\n      {state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && (\n        <state.label />\n      )}\n      {state.spinner && shouldRenderSpinner && (\n        <state.spinner>{state.spinnerTail && <state.spinnerTail />}</state.spinner>\n      )}\n      {state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && (\n        <state.label />\n      )}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSpinner_unstable","state","labelPosition","shouldRenderSpinner","root","label","spinner","spinnerTail"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrCF,YAA0BE;IAC1B,MAAM,EAAEC,aAAa,EAAEC,mBAAmB,EAAE,GAAGF;IAC/C,qBACE,MAACA,MAAMG,IAAI;;YACRH,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAO,mBAC5F,KAACD,MAAMI,KAAK;YAEbJ,MAAMK,OAAO,IAAIH,qCAChB,KAACF,MAAMK,OAAO;0BAAEL,MAAMM,WAAW,kBAAI,KAACN,MAAMM,WAAW;;YAExDN,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAM,mBAC3F,KAACD,MAAMI,KAAK;;;AAIpB,EAAE"}

package/lib/components/Spinner/useSpinner.js

@@ -12,9 +12,23 @@ import { useSpinnerContext } from '../../contexts/SpinnerContext';
  * @param props - props from this instance of Spinner
  * @param ref - reference to root HTMLElement of Spinner
  */ export const useSpinner_unstable = (props, ref)=>{
-    // Props
     const { size: contextSize } = useSpinnerContext();
-    const { appearance = 'primary', labelPosition = 'after', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', delay = 0 } = props;
+    const { appearance = 'primary', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...baseProps } = props;
+    const baseState = useSpinnerBase_unstable(baseProps, ref);
+    return {
+        ...baseState,
+        appearance,
+        size
+    };
+};
+/**
+ * Base hook for Spinner component, which manages state related to slots structure, ARIA attributes,
+ * and delay-based visibility logic.
+ *
+ * @param props - User provided props to the Spinner component.
+ * @param ref - User provided ref to be passed to the Spinner component.
+ */ export const useSpinnerBase_unstable = (props, ref)=>{
+    const { delay = 0, labelPosition = 'after' } = props;
     const baseId = useId('spinner');
     const { role = 'progressbar', ...rest } = props;
     const nativeRoot = slot.always(getIntrinsicElementProps('div', {
@@ -24,9 +38,7 @@ import { useSpinnerContext } from '../../contexts/SpinnerContext';
         ref: ref,
         role,
         ...rest
-    }, [
-        'size'
-    ]), {
+    }), {
         elementType: 'div'
     });
     const [isShownAfterDelay, setIsShownAfterDelay] = React.useState(false);
@@ -61,10 +73,8 @@ import { useSpinnerContext } from '../../contexts/SpinnerContext';
         nativeRoot['aria-labelledby'] = labelShorthand.id;
     }
     const state = {
-        appearance,
         delay,
         labelPosition,
-        size,
         shouldRenderSpinner: !delay || isShownAfterDelay,
         components: {
             root: 'div',

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/useSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { useSpinnerContext } from '../../contexts/SpinnerContext';\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 { size: contextSize } = useSpinnerContext();\n  const { appearance = 'primary', labelPosition = 'after', size = contextSize ?? 'medium', delay = 0 } = props;\n  const baseId = useId('spinner');\n\n  const { role = 'progressbar', ...rest } = props;\n  const nativeRoot = slot.always(\n    getIntrinsicElementProps(\n      'div',\n      {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role,\n        ...rest,\n      },\n      ['size'],\n    ),\n    {\n      elementType: 'div',\n    },\n  );\n  const [isShownAfterDelay, setIsShownAfterDelay] = React.useState(false);\n  const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n  React.useEffect(() => {\n    if (delay <= 0) {\n      return;\n    }\n    setDelayTimeout(() => {\n      setIsShownAfterDelay(true);\n    }, delay);\n    return () => {\n      clearDelayTimeout();\n    };\n  }, [setDelayTimeout, clearDelayTimeout, delay]);\n  const labelShorthand = slot.optional(props.label, {\n    defaultProps: { id: baseId },\n    renderByDefault: false,\n    elementType: Label,\n  });\n  const spinnerShortHand = slot.optional(props.spinner, {\n    renderByDefault: true,\n    elementType: 'span',\n  });\n  if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['aria-labelledby'] = labelShorthand.id;\n  }\n  const state: SpinnerState = {\n    appearance,\n    delay,\n    labelPosition,\n    size,\n    shouldRenderSpinner: !delay || isShownAfterDelay,\n    components: { root: 'div', spinner: 'span', spinnerTail: 'span', label: Label },\n    root: nativeRoot,\n    spinner: spinnerShortHand,\n    spinnerTail: slot.always(props.spinnerTail, { elementType: 'span' }),\n    label: labelShorthand,\n  };\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","useId","useTimeout","slot","Label","useSpinnerContext","useSpinner_unstable","props","ref","size","contextSize","appearance","labelPosition","delay","baseId","role","rest","nativeRoot","always","elementType","isShownAfterDelay","setIsShownAfterDelay","useState","setDelayTimeout","clearDelayTimeout","useEffect","labelShorthand","optional","label","defaultProps","id","renderByDefault","spinnerShortHand","spinner","state","shouldRenderSpinner","components","root","spinnerTail"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,UAAU,EAAEC,IAAI,QAAQ,4BAA4B;AAE9F,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,iBAAiB,QAAQ,gCAAgC;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,QAAQ;IACR,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGL;IAC9B,MAAM,EAAEM,aAAa,SAAS,EAAEC,gBAAgB,OAAO,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAEG,QAAQ,CAAC,EAAE,GAAGN;IACvG,MAAMO,SAASb,MAAM;IAErB,MAAM,EAAEc,OAAO,aAAa,EAAE,GAAGC,MAAM,GAAGT;IAC1C,MAAMU,aAAad,KAAKe,MAAM,CAC5BlB,yBACE,OACA;QACE,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FQ,KAAKA;QACLO;QACA,GAAGC,IAAI;IACT,GACA;QAAC;KAAO,GAEV;QACEG,aAAa;IACf;IAEF,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGtB,MAAMuB,QAAQ,CAAC;IACjE,MAAM,CAACC,iBAAiBC,kBAAkB,GAAGtB;IAC7CH,MAAM0B,SAAS,CAAC;QACd,IAAIZ,SAAS,GAAG;YACd;QACF;QACAU,gBAAgB;YACdF,qBAAqB;QACvB,GAAGR;QACH,OAAO;YACLW;QACF;IACF,GAAG;QAACD;QAAiBC;QAAmBX;KAAM;IAC9C,MAAMa,iBAAiBvB,KAAKwB,QAAQ,CAACpB,MAAMqB,KAAK,EAAE;QAChDC,cAAc;YAAEC,IAAIhB;QAAO;QAC3BiB,iBAAiB;QACjBZ,aAAaf;IACf;IACA,MAAM4B,mBAAmB7B,KAAKwB,QAAQ,CAACpB,MAAM0B,OAAO,EAAE;QACpDF,iBAAiB;QACjBZ,aAAa;IACf;IACA,IAAIO,kBAAkBT,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGS,eAAeI,EAAE;IACnD;IACA,MAAMI,QAAsB;QAC1BvB;QACAE;QACAD;QACAH;QACA0B,qBAAqB,CAACtB,SAASO;QAC/BgB,YAAY;YAAEC,MAAM;YAAOJ,SAAS;YAAQK,aAAa;YAAQV,OAAOxB;QAAM;QAC9EiC,MAAMpB;QACNgB,SAASD;QACTM,aAAanC,KAAKe,MAAM,CAACX,MAAM+B,WAAW,EAAE;YAAEnB,aAAa;QAAO;QAClES,OAAOF;IACT;IACA,OAAOQ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Spinner/useSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';\nimport type { SpinnerBaseProps, SpinnerBaseState, SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { useSpinnerContext } from '../../contexts/SpinnerContext';\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  const { size: contextSize } = useSpinnerContext();\n  const { appearance = 'primary', size = contextSize ?? 'medium', ...baseProps } = props;\n\n  const baseState = useSpinnerBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    appearance,\n    size,\n  };\n};\n\n/**\n * Base hook for Spinner component, which manages state related to slots structure, ARIA attributes,\n * and delay-based visibility logic.\n *\n * @param props - User provided props to the Spinner component.\n * @param ref - User provided ref to be passed to the Spinner component.\n */\nexport const useSpinnerBase_unstable = (props: SpinnerBaseProps, ref: React.Ref<HTMLElement>): SpinnerBaseState => {\n  const { delay = 0, labelPosition = 'after' } = props;\n  const baseId = useId('spinner');\n\n  const { role = 'progressbar', ...rest } = props;\n  const nativeRoot = slot.always(\n    getIntrinsicElementProps('div', {\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: ref as React.Ref<HTMLDivElement>,\n      role,\n      ...rest,\n    }),\n    {\n      elementType: 'div',\n    },\n  );\n  const [isShownAfterDelay, setIsShownAfterDelay] = React.useState(false);\n  const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n  React.useEffect(() => {\n    if (delay <= 0) {\n      return;\n    }\n    setDelayTimeout(() => {\n      setIsShownAfterDelay(true);\n    }, delay);\n    return () => {\n      clearDelayTimeout();\n    };\n  }, [setDelayTimeout, clearDelayTimeout, delay]);\n  const labelShorthand = slot.optional(props.label, {\n    defaultProps: { id: baseId },\n    renderByDefault: false,\n    elementType: Label,\n  });\n  const spinnerShortHand = slot.optional(props.spinner, {\n    renderByDefault: true,\n    elementType: 'span',\n  });\n  if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['aria-labelledby'] = labelShorthand.id;\n  }\n  const state: SpinnerBaseState = {\n    delay,\n    labelPosition,\n    shouldRenderSpinner: !delay || isShownAfterDelay,\n    components: { root: 'div', spinner: 'span', spinnerTail: 'span', label: Label },\n    root: nativeRoot,\n    spinner: spinnerShortHand,\n    spinnerTail: slot.always(props.spinnerTail, { elementType: 'span' }),\n    label: labelShorthand,\n  };\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","useId","useTimeout","slot","Label","useSpinnerContext","useSpinner_unstable","props","ref","size","contextSize","appearance","baseProps","baseState","useSpinnerBase_unstable","delay","labelPosition","baseId","role","rest","nativeRoot","always","elementType","isShownAfterDelay","setIsShownAfterDelay","useState","setDelayTimeout","clearDelayTimeout","useEffect","labelShorthand","optional","label","defaultProps","id","renderByDefault","spinnerShortHand","spinner","state","shouldRenderSpinner","components","root","spinnerTail"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,UAAU,EAAEC,IAAI,QAAQ,4BAA4B;AAE9F,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,iBAAiB,QAAQ,gCAAgC;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGL;IAC9B,MAAM,EAAEM,aAAa,SAAS,EAAEF,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGE,WAAW,GAAGL;IAEjF,MAAMM,YAAYC,wBAAwBF,WAAWJ;IAErD,OAAO;QACL,GAAGK,SAAS;QACZF;QACAF;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMK,0BAA0B,CAACP,OAAyBC;IAC/D,MAAM,EAAEO,QAAQ,CAAC,EAAEC,gBAAgB,OAAO,EAAE,GAAGT;IAC/C,MAAMU,SAAShB,MAAM;IAErB,MAAM,EAAEiB,OAAO,aAAa,EAAE,GAAGC,MAAM,GAAGZ;IAC1C,MAAMa,aAAajB,KAAKkB,MAAM,CAC5BrB,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FQ,KAAKA;QACLU;QACA,GAAGC,IAAI;IACT,IACA;QACEG,aAAa;IACf;IAEF,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGzB,MAAM0B,QAAQ,CAAC;IACjE,MAAM,CAACC,iBAAiBC,kBAAkB,GAAGzB;IAC7CH,MAAM6B,SAAS,CAAC;QACd,IAAIb,SAAS,GAAG;YACd;QACF;QACAW,gBAAgB;YACdF,qBAAqB;QACvB,GAAGT;QACH,OAAO;YACLY;QACF;IACF,GAAG;QAACD;QAAiBC;QAAmBZ;KAAM;IAC9C,MAAMc,iBAAiB1B,KAAK2B,QAAQ,CAACvB,MAAMwB,KAAK,EAAE;QAChDC,cAAc;YAAEC,IAAIhB;QAAO;QAC3BiB,iBAAiB;QACjBZ,aAAalB;IACf;IACA,MAAM+B,mBAAmBhC,KAAK2B,QAAQ,CAACvB,MAAM6B,OAAO,EAAE;QACpDF,iBAAiB;QACjBZ,aAAa;IACf;IACA,IAAIO,kBAAkBT,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGS,eAAeI,EAAE;IACnD;IACA,MAAMI,QAA0B;QAC9BtB;QACAC;QACAsB,qBAAqB,CAACvB,SAASQ;QAC/BgB,YAAY;YAAEC,MAAM;YAAOJ,SAAS;YAAQK,aAAa;YAAQV,OAAO3B;QAAM;QAC9EoC,MAAMpB;QACNgB,SAASD;QACTM,aAAatC,KAAKkB,MAAM,CAACd,MAAMkC,WAAW,EAAE;YAAEnB,aAAa;QAAO;QAClES,OAAOF;IACT;IACA,OAAOQ;AACT,EAAE"}

package/lib/index.js

@@ -1,2 +1,2 @@
-export { Spinner, spinnerClassNames, renderSpinner_unstable, useSpinner_unstable, useSpinnerStyles_unstable } from './Spinner';
+export { Spinner, spinnerClassNames, renderSpinner_unstable, useSpinner_unstable, useSpinnerStyles_unstable, useSpinnerBase_unstable } from './Spinner';
 export { SpinnerContextProvider, useSpinnerContext } from './contexts/index';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Spinner,\n  spinnerClassNames,\n  renderSpinner_unstable,\n  useSpinner_unstable,\n  useSpinnerStyles_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\nexport { SpinnerContextProvider, useSpinnerContext } from './contexts/index';\nexport type { SpinnerContextValue } from './contexts/index';\n"],"names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable","SpinnerContextProvider","useSpinnerContext"],"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,mBAAmB,EACnBC,yBAAyB,QACpB,YAAY;AAEnB,SAASC,sBAAsB,EAAEC,iBAAiB,QAAQ,mBAAmB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Spinner,\n  spinnerClassNames,\n  renderSpinner_unstable,\n  useSpinner_unstable,\n  useSpinnerStyles_unstable,\n  useSpinnerBase_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState, SpinnerBaseProps, SpinnerBaseState } from './Spinner';\nexport { SpinnerContextProvider, useSpinnerContext } from './contexts/index';\nexport type { SpinnerContextValue } from './contexts/index';\n"],"names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable","useSpinnerBase_unstable","SpinnerContextProvider","useSpinnerContext"],"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,mBAAmB,EACnBC,yBAAyB,EACzBC,uBAAuB,QAClB,YAAY;AAEnB,SAASC,sBAAsB,EAAEC,iBAAiB,QAAQ,mBAAmB"}

package/lib-commonjs/Spinner.js

@@ -18,6 +18,9 @@ _export(exports, {
     spinnerClassNames: function() {
         return _index.spinnerClassNames;
     },
+    useSpinnerBase_unstable: function() {
+        return _index.useSpinnerBase_unstable;
+    },
     useSpinnerStyles_unstable: function() {
         return _index.useSpinnerStyles_unstable;
     },

package/lib-commonjs/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Spinner.ts"],"sourcesContent":["export type { SpinnerProps, SpinnerSlots, SpinnerState } from './components/Spinner/index';\nexport {\n  Spinner,\n  renderSpinner_unstable,\n  spinnerClassNames,\n  useSpinnerStyles_unstable,\n  useSpinner_unstable,\n} from './components/Spinner/index';\n"],"names":["Spinner","renderSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable","useSpinner_unstable"],"mappings":";;;;;;;;;;;;eAEEA,cAAO;;;eACPC,6BAAsB;;;eACtBC,wBAAiB;;;eACjBC,gCAAyB;;;eACzBC,0BAAmB;;;uBACd,6BAA6B"}
+{"version":3,"sources":["../src/Spinner.ts"],"sourcesContent":["export type {\n  SpinnerBaseProps,\n  SpinnerBaseState,\n  SpinnerProps,\n  SpinnerSlots,\n  SpinnerState,\n} from './components/Spinner/index';\nexport {\n  Spinner,\n  renderSpinner_unstable,\n  spinnerClassNames,\n  useSpinnerStyles_unstable,\n  useSpinner_unstable,\n  useSpinnerBase_unstable,\n} from './components/Spinner/index';\n"],"names":["Spinner","renderSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable","useSpinner_unstable","useSpinnerBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,cAAO;;;eACPC,6BAAsB;;;eACtBC,wBAAiB;;;eAGjBG,8BAAuB;;;eAFvBF,gCAAyB;;;eACzBC,0BAAmB;;;uBAEd,6BAA6B"}

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

@@ -1,5 +1,5 @@
 /**
- * State used in rendering Spinner
+ * Spinner base state, excluding design-related state like appearance and size.
  */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"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', 'span'>>;\n\n  /**\n   * The animated spinning ring.\n   */\n  spinner?: Slot<'span'>;\n\n  /**\n   * The part of the spinner that rotates.\n   */\n  spinnerTail?: NonNullable<Slot<'span'>>;\n\n  /**\n   * An optional label for 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?: 'extra-tiny' | '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"],"names":[],"mappings":"AAuDA;;CAEC,GACD,WAMI"}
+{"version":3,"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', 'span'>>;\n\n  /**\n   * The animated spinning ring.\n   */\n  spinner?: Slot<'span'>;\n\n  /**\n   * The part of the spinner that rotates.\n   */\n  spinnerTail?: NonNullable<Slot<'span'>>;\n\n  /**\n   * An optional label for 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?: 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n};\n\n/**\n * Spinner base props, excluding design-related props like appearance and size.\n */\nexport type SpinnerBaseProps = Omit<SpinnerProps, 'appearance' | 'size'>;\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\n/**\n * Spinner base state, excluding design-related state like appearance and size.\n */\nexport type SpinnerBaseState = Omit<SpinnerState, 'appearance' | 'size'>;\n"],"names":[],"mappings":"AAuEA;;CAEC,GACD,WAAyE"}

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

@@ -18,6 +18,9 @@ _export(exports, {
     spinnerClassNames: function() {
         return _useSpinnerStylesstyles.spinnerClassNames;
     },
+    useSpinnerBase_unstable: function() {
+        return _useSpinner.useSpinnerBase_unstable;
+    },
     useSpinnerStyles_unstable: function() {
         return _useSpinnerStylesstyles.useSpinnerStyles_unstable;
     },

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/index.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';\nexport { renderSpinner_unstable } from './renderSpinner';\nexport { useSpinner_unstable } from './useSpinner';\nexport { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\n"],"names":["Spinner","renderSpinner_unstable","useSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAEPC,qCAAsB;;;eAEtBE,yCAAiB;;;eAAEC,iDAAyB;;;eAD5CF,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACrB,eAAe;wCACU,4BAA4B"}
+{"version":3,"sources":["../src/components/Spinner/index.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerBaseProps, SpinnerBaseState, SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';\nexport { renderSpinner_unstable } from './renderSpinner';\nexport { useSpinner_unstable, useSpinnerBase_unstable } from './useSpinner';\nexport { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\n"],"names":["Spinner","renderSpinner_unstable","useSpinner_unstable","useSpinnerBase_unstable","spinnerClassNames","useSpinnerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAEPC,qCAAsB;;;eAEtBG,yCAAiB;;;eADID,mCAAuB;;;eACzBE,iDAAyB;;;eAD5CH,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACI,eAAe;wCACf,4BAA4B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/renderSpinner.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 type { SpinnerState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerState): JSXElement => {\n  assertSlots<SpinnerSlots>(state);\n  const { labelPosition, shouldRenderSpinner } = state;\n  return (\n    <state.root>\n      {state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && (\n        <state.label />\n      )}\n      {state.spinner && shouldRenderSpinner && (\n        <state.spinner>{state.spinnerTail && <state.spinnerTail />}</state.spinner>\n      )}\n      {state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && (\n        <state.label />\n      )}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSpinner_unstable","state","labelPosition","shouldRenderSpinner","root","label","spinner","spinnerTail"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,+BAA+B,CAACC;QACrCF,2BAAAA,EAA0BE;IAC1B,MAAM,EAAEC,aAAa,EAAEC,mBAAmB,EAAE,GAAGF;IAC/C,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRH,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAA,CAAO,IAAA,WAAA,OAC5F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;YAEbJ,MAAMK,OAAO,IAAIH,uBAAAA,WAAAA,OAChB,eAAA,EAACF,MAAMK,OAAO,EAAA;0BAAEL,MAAMM,WAAW,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,WAAW,EAAA,CAAA;;YAExDN,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAA,CAAM,IAAA,WAAA,OAC3F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;;;AAIpB,EAAE"}
+{"version":3,"sources":["../src/components/Spinner/renderSpinner.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 type { SpinnerBaseState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerBaseState): JSXElement => {\n  assertSlots<SpinnerSlots>(state);\n  const { labelPosition, shouldRenderSpinner } = state;\n  return (\n    <state.root>\n      {state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && (\n        <state.label />\n      )}\n      {state.spinner && shouldRenderSpinner && (\n        <state.spinner>{state.spinnerTail && <state.spinnerTail />}</state.spinner>\n      )}\n      {state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && (\n        <state.label />\n      )}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSpinner_unstable","state","labelPosition","shouldRenderSpinner","root","label","spinner","spinnerTail"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,+BAA+B,CAACC;QACrCF,2BAAAA,EAA0BE;IAC1B,MAAM,EAAEC,aAAa,EAAEC,mBAAmB,EAAE,GAAGF;IAC/C,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRH,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAA,CAAO,IAAA,WAAA,OAC5F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;YAEbJ,MAAMK,OAAO,IAAIH,uBAAAA,WAAAA,OAChB,eAAA,EAACF,MAAMK,OAAO,EAAA;0BAAEL,MAAMM,WAAW,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,WAAW,EAAA,CAAA;;YAExDN,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAA,CAAM,IAAA,WAAA,OAC3F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;;;AAIpB,EAAE"}

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

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useSpinner_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useSpinnerBase_unstable: function() {
+        return useSpinnerBase_unstable;
+    },
+    useSpinner_unstable: function() {
         return useSpinner_unstable;
     }
 });
@@ -15,9 +23,17 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _reactlabel = require("@fluentui/react-label");
 const _SpinnerContext = require("../../contexts/SpinnerContext");
 const useSpinner_unstable = (props, ref)=>{
-    // Props
     const { size: contextSize } = (0, _SpinnerContext.useSpinnerContext)();
-    const { appearance = 'primary', labelPosition = 'after', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', delay = 0 } = props;
+    const { appearance = 'primary', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...baseProps } = props;
+    const baseState = useSpinnerBase_unstable(baseProps, ref);
+    return {
+        ...baseState,
+        appearance,
+        size
+    };
+};
+const useSpinnerBase_unstable = (props, ref)=>{
+    const { delay = 0, labelPosition = 'after' } = props;
     const baseId = (0, _reactutilities.useId)('spinner');
     const { role = 'progressbar', ...rest } = props;
     const nativeRoot = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
@@ -27,9 +43,7 @@ const useSpinner_unstable = (props, ref)=>{
         ref: ref,
         role,
         ...rest
-    }, [
-        'size'
-    ]), {
+    }), {
         elementType: 'div'
     });
     const [isShownAfterDelay, setIsShownAfterDelay] = _react.useState(false);
@@ -64,10 +78,8 @@ const useSpinner_unstable = (props, ref)=>{
         nativeRoot['aria-labelledby'] = labelShorthand.id;
     }
     const state = {
-        appearance,
         delay,
         labelPosition,
-        size,
         shouldRenderSpinner: !delay || isShownAfterDelay,
         components: {
             root: 'div',

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/useSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { useSpinnerContext } from '../../contexts/SpinnerContext';\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 { size: contextSize } = useSpinnerContext();\n  const { appearance = 'primary', labelPosition = 'after', size = contextSize ?? 'medium', delay = 0 } = props;\n  const baseId = useId('spinner');\n\n  const { role = 'progressbar', ...rest } = props;\n  const nativeRoot = slot.always(\n    getIntrinsicElementProps(\n      'div',\n      {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role,\n        ...rest,\n      },\n      ['size'],\n    ),\n    {\n      elementType: 'div',\n    },\n  );\n  const [isShownAfterDelay, setIsShownAfterDelay] = React.useState(false);\n  const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n  React.useEffect(() => {\n    if (delay <= 0) {\n      return;\n    }\n    setDelayTimeout(() => {\n      setIsShownAfterDelay(true);\n    }, delay);\n    return () => {\n      clearDelayTimeout();\n    };\n  }, [setDelayTimeout, clearDelayTimeout, delay]);\n  const labelShorthand = slot.optional(props.label, {\n    defaultProps: { id: baseId },\n    renderByDefault: false,\n    elementType: Label,\n  });\n  const spinnerShortHand = slot.optional(props.spinner, {\n    renderByDefault: true,\n    elementType: 'span',\n  });\n  if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['aria-labelledby'] = labelShorthand.id;\n  }\n  const state: SpinnerState = {\n    appearance,\n    delay,\n    labelPosition,\n    size,\n    shouldRenderSpinner: !delay || isShownAfterDelay,\n    components: { root: 'div', spinner: 'span', spinnerTail: 'span', label: Label },\n    root: nativeRoot,\n    spinner: spinnerShortHand,\n    spinnerTail: slot.always(props.spinnerTail, { elementType: 'span' }),\n    label: labelShorthand,\n  };\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","useId","useTimeout","slot","Label","useSpinnerContext","useSpinner_unstable","props","ref","size","contextSize","appearance","labelPosition","delay","baseId","role","rest","nativeRoot","always","elementType","isShownAfterDelay","setIsShownAfterDelay","useState","setDelayTimeout","clearDelayTimeout","useEffect","labelShorthand","optional","label","defaultProps","id","renderByDefault","spinnerShortHand","spinner","state","shouldRenderSpinner","components","root","spinnerTail"],"mappings":"AAAA;;;;;+BAiBaO;;;;;;;iEAfU,QAAQ;gCACmC,4BAA4B;4BAExE,wBAAwB;gCACZ,gCAAgC;AAW3D,4BAA4B,CAACC,OAAqBC;IACvD,QAAQ;IACR,MAAM,EAAEC,MAAMC,WAAW,EAAE,OAAGL,iCAAAA;IAC9B,MAAM,EAAEM,aAAa,SAAS,EAAEC,gBAAgB,OAAO,EAAEH,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAEG,QAAQ,CAAC,EAAE,GAAGN;IACvG,MAAMO,aAASb,qBAAAA,EAAM;IAErB,MAAM,EAAEc,OAAO,aAAa,EAAE,GAAGC,MAAM,GAAGT;IAC1C,MAAMU,aAAad,oBAAAA,CAAKe,MAAM,KAC5BlB,wCAAAA,EACE,OACA;QACE,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FQ,KAAKA;QACLO;QACA,GAAGC,IAAI;IACT,GACA;QAAC;KAAO,GAEV;QACEG,aAAa;IACf;IAEF,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGtB,OAAMuB,QAAQ,CAAC;IACjE,MAAM,CAACC,iBAAiBC,kBAAkB,OAAGtB,0BAAAA;IAC7CH,OAAM0B,SAAS,CAAC;QACd,IAAIZ,SAAS,GAAG;YACd;QACF;QACAU,gBAAgB;YACdF,qBAAqB;QACvB,GAAGR;QACH,OAAO;YACLW;QACF;IACF,GAAG;QAACD;QAAiBC;QAAmBX;KAAM;IAC9C,MAAMa,iBAAiBvB,oBAAAA,CAAKwB,QAAQ,CAACpB,MAAMqB,KAAK,EAAE;QAChDC,cAAc;YAAEC,IAAIhB;QAAO;QAC3BiB,iBAAiB;QACjBZ,aAAaf,iBAAAA;IACf;IACA,MAAM4B,mBAAmB7B,oBAAAA,CAAKwB,QAAQ,CAACpB,MAAM0B,OAAO,EAAE;QACpDF,iBAAiB;QACjBZ,aAAa;IACf;IACA,IAAIO,kBAAkBT,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGS,eAAeI,EAAE;IACnD;IACA,MAAMI,QAAsB;QAC1BvB;QACAE;QACAD;QACAH;QACA0B,qBAAqB,CAACtB,SAASO;QAC/BgB,YAAY;YAAEC,MAAM;YAAOJ,SAAS;YAAQK,aAAa;YAAQV,OAAOxB,iBAAAA;QAAM;QAC9EiC,MAAMpB;QACNgB,SAASD;QACTM,aAAanC,oBAAAA,CAAKe,MAAM,CAACX,MAAM+B,WAAW,EAAE;YAAEnB,aAAa;QAAO;QAClES,OAAOF;IACT;IACA,OAAOQ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Spinner/useSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';\nimport type { SpinnerBaseProps, SpinnerBaseState, SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { useSpinnerContext } from '../../contexts/SpinnerContext';\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  const { size: contextSize } = useSpinnerContext();\n  const { appearance = 'primary', size = contextSize ?? 'medium', ...baseProps } = props;\n\n  const baseState = useSpinnerBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    appearance,\n    size,\n  };\n};\n\n/**\n * Base hook for Spinner component, which manages state related to slots structure, ARIA attributes,\n * and delay-based visibility logic.\n *\n * @param props - User provided props to the Spinner component.\n * @param ref - User provided ref to be passed to the Spinner component.\n */\nexport const useSpinnerBase_unstable = (props: SpinnerBaseProps, ref: React.Ref<HTMLElement>): SpinnerBaseState => {\n  const { delay = 0, labelPosition = 'after' } = props;\n  const baseId = useId('spinner');\n\n  const { role = 'progressbar', ...rest } = props;\n  const nativeRoot = slot.always(\n    getIntrinsicElementProps('div', {\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: ref as React.Ref<HTMLDivElement>,\n      role,\n      ...rest,\n    }),\n    {\n      elementType: 'div',\n    },\n  );\n  const [isShownAfterDelay, setIsShownAfterDelay] = React.useState(false);\n  const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n  React.useEffect(() => {\n    if (delay <= 0) {\n      return;\n    }\n    setDelayTimeout(() => {\n      setIsShownAfterDelay(true);\n    }, delay);\n    return () => {\n      clearDelayTimeout();\n    };\n  }, [setDelayTimeout, clearDelayTimeout, delay]);\n  const labelShorthand = slot.optional(props.label, {\n    defaultProps: { id: baseId },\n    renderByDefault: false,\n    elementType: Label,\n  });\n  const spinnerShortHand = slot.optional(props.spinner, {\n    renderByDefault: true,\n    elementType: 'span',\n  });\n  if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['aria-labelledby'] = labelShorthand.id;\n  }\n  const state: SpinnerBaseState = {\n    delay,\n    labelPosition,\n    shouldRenderSpinner: !delay || isShownAfterDelay,\n    components: { root: 'div', spinner: 'span', spinnerTail: 'span', label: Label },\n    root: nativeRoot,\n    spinner: spinnerShortHand,\n    spinnerTail: slot.always(props.spinnerTail, { elementType: 'span' }),\n    label: labelShorthand,\n  };\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","useId","useTimeout","slot","Label","useSpinnerContext","useSpinner_unstable","props","ref","size","contextSize","appearance","baseProps","baseState","useSpinnerBase_unstable","delay","labelPosition","baseId","role","rest","nativeRoot","always","elementType","isShownAfterDelay","setIsShownAfterDelay","useState","setDelayTimeout","clearDelayTimeout","useEffect","labelShorthand","optional","label","defaultProps","id","renderByDefault","spinnerShortHand","spinner","state","shouldRenderSpinner","components","root","spinnerTail"],"mappings":"AAAA;;;;;;;;;;;;IAqCae,uBAAAA;;;uBApBAR;;;;;iEAfU,QAAQ;gCACmC,4BAA4B;4BAExE,wBAAwB;gCACZ,gCAAgC;AAW3D,MAAMA,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,MAAMC,WAAW,EAAE,OAAGL,iCAAAA;IAC9B,MAAM,EAAEM,aAAa,SAAS,EAAEF,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAE,GAAGE,WAAW,GAAGL;IAEjF,MAAMM,YAAYC,wBAAwBF,WAAWJ;IAErD,OAAO;QACL,GAAGK,SAAS;QACZF;QACAF;IACF;AACF,EAAE;AASK,gCAAgC,CAACF,OAAyBC;IAC/D,MAAM,EAAEO,QAAQ,CAAC,EAAEC,gBAAgB,OAAO,EAAE,GAAGT;IAC/C,MAAMU,aAAShB,qBAAAA,EAAM;IAErB,MAAM,EAAEiB,OAAO,aAAa,EAAE,GAAGC,MAAM,GAAGZ;IAC1C,MAAMa,aAAajB,oBAAAA,CAAKkB,MAAM,KAC5BrB,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FQ,KAAKA;QACLU;QACA,GAAGC,IAAI;IACT,IACA;QACEG,aAAa;IACf;IAEF,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGzB,OAAM0B,QAAQ,CAAC;IACjE,MAAM,CAACC,iBAAiBC,kBAAkB,OAAGzB,0BAAAA;IAC7CH,OAAM6B,SAAS,CAAC;QACd,IAAIb,SAAS,GAAG;YACd;QACF;QACAW,gBAAgB;YACdF,qBAAqB;QACvB,GAAGT;QACH,OAAO;YACLY;QACF;IACF,GAAG;QAACD;QAAiBC;QAAmBZ;KAAM;IAC9C,MAAMc,iBAAiB1B,oBAAAA,CAAK2B,QAAQ,CAACvB,MAAMwB,KAAK,EAAE;QAChDC,cAAc;YAAEC,IAAIhB;QAAO;QAC3BiB,iBAAiB;QACjBZ,aAAalB,iBAAAA;IACf;IACA,MAAM+B,mBAAmBhC,oBAAAA,CAAK2B,QAAQ,CAACvB,MAAM6B,OAAO,EAAE;QACpDF,iBAAiB;QACjBZ,aAAa;IACf;IACA,IAAIO,kBAAkBT,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGS,eAAeI,EAAE;IACnD;IACA,MAAMI,QAA0B;QAC9BtB;QACAC;QACAsB,qBAAqB,CAACvB,SAASQ;QAC/BgB,YAAY;YAAEC,MAAM;YAAOJ,SAAS;YAAQK,aAAa;YAAQV,OAAO3B,iBAAAA;QAAM;QAC9EoC,MAAMpB;QACNgB,SAASD;QACTM,aAAatC,oBAAAA,CAAKkB,MAAM,CAACd,MAAMkC,WAAW,EAAE;YAAEnB,aAAa;QAAO;QAClES,OAAOF;IACT;IACA,OAAOQ;AACT,EAAE"}

package/lib-commonjs/index.js

@@ -21,6 +21,9 @@ _export(exports, {
     spinnerClassNames: function() {
         return _Spinner.spinnerClassNames;
     },
+    useSpinnerBase_unstable: function() {
+        return _Spinner.useSpinnerBase_unstable;
+    },
     useSpinnerContext: function() {
         return _index.useSpinnerContext;
     },

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Spinner,\n  spinnerClassNames,\n  renderSpinner_unstable,\n  useSpinner_unstable,\n  useSpinnerStyles_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\nexport { SpinnerContextProvider, useSpinnerContext } from './contexts/index';\nexport type { SpinnerContextValue } from './contexts/index';\n"],"names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable","SpinnerContextProvider","useSpinnerContext"],"mappings":";;;;;;;;;;;;eACEA,gBAAO;;;eAOAK,6BAAsB;;;eAL7BH,+BAAsB;;;eADtBD,0BAAiB;;;eAMcK,wBAAiB;;;eAHhDF,kCAAyB;;;eADzBD,4BAAmB;;;yBAEd,YAAY;uBAEuC,mBAAmB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Spinner,\n  spinnerClassNames,\n  renderSpinner_unstable,\n  useSpinner_unstable,\n  useSpinnerStyles_unstable,\n  useSpinnerBase_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState, SpinnerBaseProps, SpinnerBaseState } from './Spinner';\nexport { SpinnerContextProvider, useSpinnerContext } from './contexts/index';\nexport type { SpinnerContextValue } from './contexts/index';\n"],"names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable","useSpinnerBase_unstable","SpinnerContextProvider","useSpinnerContext"],"mappings":";;;;;;;;;;;IACEA;+BAAO;;IAQAM;4CAAsB;;;eAN7BJ,+BAAsB;;;eADtBD,0BAAiB;;;eAIjBI,gCAAuB;;;eAGQE,wBAAiB;;;eAJhDH,kCAAyB;;;eADzBD,4BAAmB;;;yBAGd,YAAY;uBAEuC,mBAAmB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinner",
-  "version": "9.7.15",
+  "version": "9.8.1",
   "description": "Spinner component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,7 +13,7 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/react-jsx-runtime": "^9.4.1",
-    "@fluentui/react-label": "^9.3.15",
+    "@fluentui/react-label": "^9.4.0",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
     "@fluentui/react-utilities": "^9.26.2",