text: import { loaderBehavior } from '@fluentui/accessibility';
  import * as customPropTypes from '@fluentui/react-proptypes';
  import { useTelemetry, useFluentContext, getElementType, useUnhandledProps, useStyles, useAccessibility } from '@fluentui/react-bindings';
  import * as PropTypes from 'prop-types';
  import * as React from 'react';
  import { createShorthandFactory, commonPropTypes, getOrGenerateIdFromShorthand } from '../../utils';
  import { Box } from '../Box/Box';
  import { Text } from '../Text/Text';
  export var loaderClassName = 'ui-loader';
  export var loaderSlotClassNames = {
    indicator: loaderClassName + "__indicator",
    label: loaderClassName + "__label",
    svg: loaderClassName + "__svg"
  };
  
  /**
   * A loader alerts a user that content is being loaded or processed and they should wait for the activity to complete.
   *
   * @accessibility
   * Implements [ARIA progressbar](https://www.w3.org/TR/wai-aria-1.1/#progressbar) role.
   */
  export var Loader = /*#__PURE__*/function () {
    var Loader = function Loader(props) {
      var context = useFluentContext();
  
      var _useTelemetry = useTelemetry(Loader.displayName, context.telemetry),
          setStart = _useTelemetry.setStart,
          setEnd = _useTelemetry.setEnd;
  
      setStart();
      var delay = props.delay,
          label = props.label,
          indicator = props.indicator,
          svg = props.svg,
          inline = props.inline,
          labelPosition = props.labelPosition,
          className = props.className,
          design = props.design,
          styles = props.styles,
          variables = props.variables,
          size = props.size;
      var ElementType = getElementType(props);
      var unhandledProps = useUnhandledProps(Loader.handledProps, props);
      var delayTimer = React.useRef();
  
      var _React$useState = React.useState(props.delay === 0),
          visible = _React$useState[0],
          setVisible = _React$useState[1];
  
      var labelId = React.useRef();
      labelId.current = getOrGenerateIdFromShorthand('loader-label-', label, labelId.current);
  
      var _useStyles = useStyles(Loader.displayName, {
        className: loaderClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            inline: inline,
            labelPosition: labelPosition,
            size: size
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl
      }),
          classes = _useStyles.classes,
          resolvedStyles = _useStyles.styles;
  
      var getA11yProps = useAccessibility(props.accessibility, {
        debugName: Loader.displayName,
        mapPropsToBehavior: function mapPropsToBehavior() {
          return {
            labelId: labelId.current
          };
        },
        rtl: context.rtl
      });
      React.useEffect(function () {
        if (delay > 0) {
          // @ts-ignore We have a collision between types from DOM and @types/node
          delayTimer.current = setTimeout(function () {
            setVisible(true);
          }, delay);
        }
  
        return function () {
          return clearTimeout(delayTimer.current);
        };
      }, [delay]);
      var svgElement = Box.create(svg, {
        defaultProps: function defaultProps() {
          return {
            className: loaderSlotClassNames.svg,
            styles: resolvedStyles.svg
          };
        }
      });
      var element = visible && /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', Object.assign({
        className: classes.root
      }, unhandledProps)), Box.create(indicator, {
        defaultProps: function defaultProps() {
          return getA11yProps('indicator', {
            children: svgElement,
            className: loaderSlotClassNames.indicator,
            styles: resolvedStyles.indicator
          });
        }
      }), Text.create(label, {
        defaultProps: function defaultProps() {
          return getA11yProps('label', {
            className: loaderSlotClassNames.label,
            styles: resolvedStyles.label,
            id: labelId.current
          });
        }
      }));
      setEnd();
      return element;
    };
  
    Loader.displayName = 'Loader';
    Loader.propTypes = Object.assign({}, commonPropTypes.createCommon({
      children: false,
      content: false
    }), {
      delay: PropTypes.number,
      indicator: customPropTypes.itemShorthand,
      inline: PropTypes.bool,
      label: customPropTypes.itemShorthand,
      labelPosition: PropTypes.oneOf(['above', 'below', 'start', 'end']),
      size: customPropTypes.size,
      svg: customPropTypes.itemShorthand
    });
    Loader.defaultProps = {
      accessibility: loaderBehavior,
      delay: 0,
      indicator: {},
      labelPosition: 'below',
      svg: '',
      size: 'medium'
    };
    Loader.handledProps = Object.keys(Loader.propTypes);
    Loader.create = createShorthandFactory({
      Component: Loader,
      mappedProp: 'label'
    });
    Loader.shorthandConfig = {
      mappedProp: 'label'
    };
    return Loader;
  }();
  //# sourceMappingURL=Loader.js.map
  