@instructure/ui-progress 11.6.0 → 11.6.1-snapshot-129

package/es/ProgressBar/v2/index.js

@@ -0,0 +1,130 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["renderValue", "formatScreenReaderValue", "valueNow", "valueMax", "screenReaderLabel", "size", "color", "meterColor", "renderValueInside", "styles"];
+var _dec, _class, _ProgressBar;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { View } from '@instructure/ui-view/latest';
+import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+/**
+---
+category: components
+---
+**/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+let ProgressBar = (_dec = withStyle(generateStyle), _dec(_class = (_ProgressBar = class ProgressBar extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  render() {
+    const _this$props3 = this.props,
+      renderValue = _this$props3.renderValue,
+      formatScreenReaderValue = _this$props3.formatScreenReaderValue,
+      valueNow = _this$props3.valueNow,
+      valueMax = _this$props3.valueMax,
+      screenReaderLabel = _this$props3.screenReaderLabel,
+      size = _this$props3.size,
+      color = _this$props3.color,
+      meterColor = _this$props3.meterColor,
+      renderValueInside = _this$props3.renderValueInside,
+      styles = _this$props3.styles,
+      props = _objectWithoutProperties(_this$props3, _excluded);
+    const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
+      valueNow: valueNow,
+      valueMax: valueMax
+    }) : void 0;
+    const value = callRenderProp(renderValue, {
+      valueNow: valueNow,
+      valueMax: valueMax
+    });
+    return _jsxs(View, {
+      ...passthroughProps(props),
+      as: this.props.as,
+      css: styles === null || styles === void 0 ? void 0 : styles.progressBar,
+      margin: this.props.margin,
+      elementRef: this.handleRef,
+      "data-cid": "ProgressBar",
+      children: [_jsxs("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.trackLayout,
+        children: [_jsx("progress", {
+          css: styles === null || styles === void 0 ? void 0 : styles.htmlProgress,
+          max: valueMax,
+          value: valueNow,
+          "aria-valuetext": valueText,
+          "aria-label": screenReaderLabel
+        }), _jsx("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.track,
+          role: "presentation",
+          "aria-hidden": "true",
+          children: _jsx("span", {
+            css: styles === null || styles === void 0 ? void 0 : styles.trackValue,
+            children: renderValueInside && value
+          })
+        })]
+      }), value && !renderValueInside && _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.value,
+        "aria-hidden": "true",
+        children: value
+      })]
+    });
+  }
+}, _ProgressBar.displayName = "ProgressBar", _ProgressBar.componentId = 'ProgressBar', _ProgressBar.allowedProps = allowedProps, _ProgressBar.defaultProps = {
+  formatScreenReaderValue: ({
+    valueNow,
+    valueMax
+  }) => `${valueNow} / ${valueMax}`,
+  size: 'medium',
+  valueMax: 100,
+  valueNow: 0,
+  as: 'div',
+  color: 'primary',
+  shouldAnimate: false,
+  // default to showing `success` color on completion
+  meterColor: ({
+    valueNow,
+    valueMax
+  }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
+}, _ProgressBar)) || _class);
+export default ProgressBar;
+export { ProgressBar };

package/{src/index.ts → es/ProgressBar/v2/props.js}

@@ -22,8 +22,5 @@
  * SOFTWARE.
  */
 
-export { ProgressBar } from './ProgressBar'
-export { ProgressCircle } from './ProgressCircle'
-
-export type { ProgressBarProps } from './ProgressBar/props'
-export type { ProgressCircleProps } from './ProgressCircle/props'
+const allowedProps = ['screenReaderLabel', 'size', 'valueMax', 'valueNow', 'formatScreenReaderValue', 'renderValue', 'color', 'meterColor', 'shouldAnimate', 'margin', 'elementRef', 'as'];
+export { allowedProps };

package/es/ProgressBar/v2/styles.js

@@ -0,0 +1,237 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared token object that stores common values for the theme.
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, _sharedTokens) => {
+  const _props$valueNow = props.valueNow,
+    valueNow = _props$valueNow === void 0 ? 0 : _props$valueNow,
+    _props$valueMax = props.valueMax,
+    valueMax = _props$valueMax === void 0 ? 100 : _props$valueMax,
+    size = props.size,
+    color = props.color,
+    meterColor = props.meterColor,
+    shouldAnimate = props.shouldAnimate;
+  const meterColorClassName = typeof meterColor === 'function' ? meterColor({
+    valueNow,
+    valueMax
+  }) : meterColor;
+  const currentValue = valueNow > valueMax ? valueMax : valueNow < 0 ? 0 : valueNow;
+  const currentValuePercent = `${currentValue / valueMax * 100}%`;
+  const sizeVariants = {
+    'x-small': {
+      track: {
+        height: componentTheme.xSmallHeight
+      },
+      value: {
+        fontSize: componentTheme.xSmallValueFontSize
+      }
+    },
+    small: {
+      track: {
+        height: componentTheme.smallHeight
+      },
+      // product design wants = 18px
+      value: {
+        fontSize: componentTheme.smallValueFontSize
+      }
+    },
+    medium: {
+      track: {
+        height: componentTheme.mediumHeight
+      },
+      value: {
+        fontSize: componentTheme.mediumValueFontSize
+      }
+    },
+    large: {
+      track: {
+        height: componentTheme.largeHeight
+      },
+      value: {
+        fontSize: componentTheme.largeValueFontSize
+      }
+    }
+  };
+  const colorVariants = {
+    primary: {
+      trackLayout: {
+        background: componentTheme.trackColor,
+        borderWidth: componentTheme.trackBottomBorderWidth,
+        borderStyle: 'solid',
+        borderColor: componentTheme.borderColor
+      },
+      trackBorder: {
+        borderBottomColor: componentTheme.trackBottomBorderColor
+      },
+      value: {
+        color: componentTheme.textColor
+      },
+      htmlProgress: {
+        borderColor: componentTheme.borderColor
+      }
+    },
+    'primary-inverse': {
+      trackLayout: {
+        background: componentTheme.trackColorInverse,
+        borderWidth: componentTheme.trackBottomBorderWidth,
+        borderStyle: 'solid',
+        borderColor: componentTheme.borderColorInverse
+      },
+      trackBorder: {
+        borderBottomColor: componentTheme.trackBottomBorderColorInverse
+      },
+      value: {
+        color: componentTheme.textColorInverse
+      },
+      htmlProgress: {
+        borderColor: componentTheme.borderColorInverse
+      }
+    }
+  };
+  const trackBackgroundVariants = {
+    primary: {
+      brand: {
+        background: componentTheme.meterColorBrand
+      },
+      info: {
+        background: componentTheme.meterColorInfo
+      },
+      success: {
+        background: componentTheme.meterColorSuccess
+      },
+      danger: {
+        background: componentTheme.meterColorDanger
+      },
+      warning: {
+        background: componentTheme.meterColorWarning
+      },
+      alert: {
+        background: componentTheme.meterColorAlert
+      }
+    },
+    'primary-inverse': {
+      brand: {
+        background: componentTheme.meterColorBrandInverse
+      },
+      info: {
+        background: componentTheme.meterColorInfoInverse
+      },
+      success: {
+        background: componentTheme.meterColorSuccessInverse
+      },
+      danger: {
+        background: componentTheme.meterColorDangerInverse
+      },
+      warning: {
+        background: componentTheme.meterColorWarningInverse
+      },
+      alert: {
+        background: componentTheme.meterColorAlertInverse
+      }
+    }
+  };
+  return {
+    progressBar: {
+      label: 'progressBar',
+      display: 'flex',
+      alignItems: 'center',
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      lineHeight: componentTheme.lineHeight,
+      fontSize: componentTheme.fontSize,
+      borderRadius: componentTheme.borderRadius
+    },
+    trackLayout: {
+      label: 'progressBar__trackLayout',
+      position: 'relative',
+      flex: 1,
+      borderRadius: 'inherit',
+      ...colorVariants[color].trackLayout
+    },
+    track: {
+      label: 'progressBar__track',
+      display: 'block',
+      boxSizing: 'border-box',
+      width: '100%',
+      borderBottomWidth: componentTheme.trackBottomBorderWidth,
+      borderBottomStyle: 'solid',
+      background: 'transparent',
+      // Inner border-radius must be smaller than outer to avoid geometric gaps with nested rounded borders
+      // Formula: inner radius = outer radius - border width
+      borderTopLeftRadius: `calc(${componentTheme.borderRadius} - ${componentTheme.trackBottomBorderWidth})`,
+      borderBottomLeftRadius: `calc(${componentTheme.borderRadius} - ${componentTheme.trackBottomBorderWidth})`,
+      // Negative margin pulls track down so trackLayout's full border overlaps and hides track's bottom border.
+      // When trackLayout border is visible (light/dark themes), it creates a clean full border appearance.
+      // When trackLayout border is transparent (legacy Canvas), track's bottom border remains visible.
+      marginBottom: `calc(-1 * ${componentTheme.trackBottomBorderWidth})`,
+      ...sizeVariants[size].track,
+      ...colorVariants[color].trackBorder
+    },
+    trackValue: {
+      label: 'progressBar__trackValue',
+      display: 'block',
+      boxSizing: 'border-box',
+      height: '100%',
+      width: currentValuePercent,
+      maxWidth: '100%',
+      borderRadius: 'inherit',
+      ...(shouldAnimate && {
+        transition: 'all 0.5s'
+      }),
+      ...(meterColorClassName && trackBackgroundVariants[color][meterColorClassName])
+    },
+    value: {
+      label: 'progressBar__value',
+      lineHeight: 1,
+      boxSizing: 'border-box',
+      paddingInlineStart: componentTheme.valuePadding,
+      flex: '0 0 5.625rem',
+      ...sizeVariants[size].value,
+      ...colorVariants[color].value
+    },
+    htmlProgress: {
+      label: 'progressBar__htmlProgress',
+      display: 'block',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%',
+      boxSizing: 'border-box',
+      zIndex: -1,
+      opacity: 0,
+      ...colorVariants[color].htmlProgress
+    }
+  };
+};
+export default generateStyle;

package/es/ProgressCircle/{index.js → v1/index.js}

@@ -27,9 +27,9 @@ var _dec, _class, _ProgressCircle;
 
 import { Component } from 'react';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { View } from '@instructure/ui-view';
+import { View } from '@instructure/ui-view/v11_6';
 import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils';
-import { withStyle } from '@instructure/emotion';
+import { withStyleLegacy as withStyle } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import { allowedProps } from "./props.js";

package/es/ProgressCircle/v2/index.js

@@ -0,0 +1,173 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["color", "renderValue", "formatScreenReaderValue", "meterColor", "valueNow", "valueMax", "screenReaderLabel", "size", "styles"];
+var _dec, _class, _ProgressCircle;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { View } from '@instructure/ui-view/latest';
+import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+/**
+---
+category: components
+---
+**/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+let ProgressCircle = (_dec = withStyle(generateStyle), _dec(_class = (_ProgressCircle = class ProgressCircle extends Component {
+  constructor(props) {
+    super(props);
+    this._timeouts = [];
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+    this.state = {
+      shouldAnimateOnMount: props.shouldAnimateOnMount
+    };
+  }
+  get makeStylesVariables() {
+    return {
+      shouldAnimateOnMount: this.state.shouldAnimateOnMount
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    if (this.state.shouldAnimateOnMount) {
+      this._timeouts.push(setTimeout(() => {
+        this.setState({
+          shouldAnimateOnMount: false
+        });
+      }, this.props.animationDelay || 500));
+    }
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
+  }
+  componentWillUnmount() {
+    this._timeouts.forEach(timeout => clearTimeout(timeout));
+  }
+  render() {
+    var _styles$radii, _styles$radii2, _styles$radii3;
+    const _this$props3 = this.props,
+      color = _this$props3.color,
+      renderValue = _this$props3.renderValue,
+      formatScreenReaderValue = _this$props3.formatScreenReaderValue,
+      meterColor = _this$props3.meterColor,
+      valueNow = _this$props3.valueNow,
+      valueMax = _this$props3.valueMax,
+      screenReaderLabel = _this$props3.screenReaderLabel,
+      size = _this$props3.size,
+      styles = _this$props3.styles,
+      props = _objectWithoutProperties(_this$props3, _excluded);
+    const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
+      valueNow: valueNow,
+      valueMax: valueMax
+    }) : void 0;
+    // consolidating the label and aria-valuetext to put in aria-label because
+    // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
+    // But leaving aria-valuetext because JAWS ignores aria-label
+    const labelAndValueText = `${screenReaderLabel} ${valueText}`;
+    const value = callRenderProp(renderValue, {
+      valueNow: valueNow,
+      valueMax: valueMax
+    });
+    const style = {
+      strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
+    };
+    return _jsxs(View, {
+      ...passthroughProps(props),
+      as: this.props.as,
+      elementRef: this.handleRef,
+      css: styles === null || styles === void 0 ? void 0 : styles.progressCircle,
+      margin: this.props.margin,
+      "data-cid": "ProgressCircle",
+      children: [_jsx(ScreenReaderContent, {
+        children: _jsx("progress", {
+          max: valueMax,
+          value: valueNow,
+          "aria-valuetext": labelAndValueText
+        })
+      }), value && _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.center,
+        "aria-hidden": "true",
+        children: _jsx("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.value,
+          children: value
+        })
+      }), _jsxs("svg", {
+        css: styles === null || styles === void 0 ? void 0 : styles.circle,
+        role: "presentation",
+        focusable: "false",
+        children: [_jsx("circle", {
+          css: styles === null || styles === void 0 ? void 0 : styles.track,
+          role: "presentation",
+          cx: "50%",
+          cy: "50%",
+          r: styles === null || styles === void 0 ? void 0 : (_styles$radii = styles.radii) === null || _styles$radii === void 0 ? void 0 : _styles$radii.radius
+        }), _jsx("circle", {
+          css: styles === null || styles === void 0 ? void 0 : styles.border,
+          role: "presentation",
+          cx: "50%",
+          cy: "50%",
+          r: styles === null || styles === void 0 ? void 0 : (_styles$radii2 = styles.radii) === null || _styles$radii2 === void 0 ? void 0 : _styles$radii2.borderOffsetRadius
+        }), _jsx("circle", {
+          css: styles === null || styles === void 0 ? void 0 : styles.meter,
+          role: "presentation",
+          style: style,
+          cx: "50%",
+          cy: "50%",
+          r: styles === null || styles === void 0 ? void 0 : (_styles$radii3 = styles.radii) === null || _styles$radii3 === void 0 ? void 0 : _styles$radii3.radius
+        })]
+      })]
+    });
+  }
+}, _ProgressCircle.displayName = "ProgressCircle", _ProgressCircle.componentId = 'ProgressCircle', _ProgressCircle.allowedProps = allowedProps, _ProgressCircle.defaultProps = {
+  formatScreenReaderValue: ({
+    valueNow,
+    valueMax
+  }) => `${valueNow} / ${valueMax}`,
+  size: 'medium',
+  valueMax: 100,
+  valueNow: 0,
+  as: 'div',
+  color: 'primary',
+  shouldAnimateOnMount: false,
+  // default to showing `success` color on completion
+  meterColor: ({
+    valueNow,
+    valueMax
+  }) => valueNow / valueMax >= 1 ? 'success' : 'brand'
+}, _ProgressCircle)) || _class);
+export default ProgressCircle;
+export { ProgressCircle };

package/es/ProgressCircle/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['screenReaderLabel', 'size', 'valueMax', 'valueNow', 'formatScreenReaderValue', 'renderValue', 'color', 'meterColor', 'margin', 'elementRef', 'as', 'shouldAnimateOnMount', 'animationDelay'];
+export { allowedProps };