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

package/es/Spinner/v2/index.js

@@ -0,0 +1,117 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/*
+ * 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 { useState, useEffect, forwardRef } from 'react';
+import { useStyle } from '@instructure/emotion';
+import { callRenderProp, omitProps, useDeterministicId } from '@instructure/ui-react-utils';
+import { logError as error } from '@instructure/console';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+/**
+---
+category: components
+---
+**/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
+  const _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'default' : _props$variant,
+    delay = props.delay,
+    renderTitle = props.renderTitle,
+    margin = props.margin,
+    themeOverride = props.themeOverride;
+  const _useState = useState(!delay),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldRender = _useState2[0],
+    setShouldRender = _useState2[1];
+  // Deterministic ID generation
+  const _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    titleId = _useState4[0],
+    setTitleId = _useState4[1];
+  const getId = useDeterministicId('Spinner');
+  useEffect(() => {
+    setTitleId(getId());
+  }, []);
+  const styles = useStyle({
+    generateStyle,
+    themeOverride,
+    params: {
+      size,
+      variant,
+      margin
+    },
+    componentId: 'Spinner',
+    displayName: 'Spinner'
+  });
+  useEffect(() => {
+    if (delay) {
+      const delayTimeout = setTimeout(() => {
+        setShouldRender(true);
+      }, delay);
+      return () => clearTimeout(delayTimeout);
+    }
+    return void 0;
+  }, [delay]);
+  const renderSpinner = () => {
+    error(!!renderTitle, '[Spinner] The `renderTitle` prop is necessary for screen reader support.');
+    const passthroughProps = omitProps(props, allowedProps);
+    return _jsx("div", {
+      ...passthroughProps,
+      css: styles === null || styles === void 0 ? void 0 : styles.spinner,
+      ref: ref,
+      "data-cid": "Spinner",
+      children: _jsxs("svg", {
+        css: styles === null || styles === void 0 ? void 0 : styles.circle,
+        role: "img",
+        "aria-labelledby": titleId,
+        focusable: "false",
+        children: [_jsx("title", {
+          id: titleId,
+          children: callRenderProp(renderTitle)
+        }), _jsxs("g", {
+          role: "presentation",
+          children: [variant !== 'inverse' && _jsx("circle", {
+            css: styles === null || styles === void 0 ? void 0 : styles.circleTrack,
+            cx: "50%",
+            cy: "50%",
+            r: styles === null || styles === void 0 ? void 0 : styles.radius
+          }), _jsx("circle", {
+            css: styles === null || styles === void 0 ? void 0 : styles.circleSpin,
+            cx: "50%",
+            cy: "50%",
+            r: styles === null || styles === void 0 ? void 0 : styles.radius
+          })]
+        })]
+      })
+    });
+  };
+  return shouldRender ? renderSpinner() : null;
+});
+Spinner.displayName = 'Spinner';
+export default Spinner;
+export { Spinner };

package/es/Spinner/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 = ['delay', 'renderTitle', 'size', 'variant', 'margin'];
+export { allowedProps };

package/es/Spinner/v2/styles.js

@@ -0,0 +1,191 @@
+/*
+ * 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 { keyframes, calcSpacingFromShorthand } from '@instructure/emotion';
+// keyframes have to be outside of 'generateStyle',
+// since it is causing problems in style recalculation
+const rotate = keyframes`
+    to {
+      transform: rotate(360deg)
+    }`;
+const morph = keyframes`
+    0% {
+      stroke-dashoffset: 190%;
+    }
+
+    50% {
+      stroke-dashoffset: 00%;
+      transform: rotate(90deg);
+    }
+
+    100% {
+      stroke-dashoffset: 190%;
+      transform: rotate(360deg);
+    }`;
+
+/**
+ * ---
+ * 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} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, params, sharedTokens) => {
+  const size = params.size,
+    variant = params.variant,
+    margin = params.margin;
+  const spinnerSizes = {
+    'x-small': {
+      width: componentTheme.containerSizeXs,
+      height: componentTheme.containerSizeXs
+    },
+    small: {
+      width: componentTheme.containerSizeSm,
+      height: componentTheme.containerSizeSm
+    },
+    medium: {
+      width: componentTheme.containerSizeMd,
+      height: componentTheme.containerSizeMd
+    },
+    large: {
+      width: componentTheme.containerSizeLg,
+      height: componentTheme.containerSizeLg
+    }
+  };
+  const circleSizes = {
+    'x-small': {
+      width: componentTheme.spinnerSizeXs,
+      height: componentTheme.spinnerSizeXs
+    },
+    small: {
+      width: componentTheme.spinnerSizeSm,
+      height: componentTheme.spinnerSizeSm
+    },
+    medium: {
+      width: componentTheme.spinnerSizeMd,
+      height: componentTheme.spinnerSizeMd
+    },
+    large: {
+      width: componentTheme.spinnerSizeLg,
+      height: componentTheme.spinnerSizeLg
+    }
+  };
+  const circleTrackSizes = {
+    'x-small': {
+      strokeWidth: componentTheme.strokeWidthXs
+    },
+    small: {
+      strokeWidth: componentTheme.strokeWidthSm
+    },
+    medium: {
+      strokeWidth: componentTheme.strokeWidthMd
+    },
+    large: {
+      strokeWidth: componentTheme.strokeWidthLg
+    }
+  };
+  const radii = {
+    'x-small': `calc(50% - ${componentTheme.strokeWidthXs} / 2)`,
+    small: `calc(50% - ${componentTheme.strokeWidthSm} / 2)`,
+    medium: `calc(50% - ${componentTheme.strokeWidthMd} / 2)`,
+    large: `calc(50% - ${componentTheme.strokeWidthLg} / 2)`
+  };
+  const circleSpinSizes = {
+    'x-small': {
+      strokeWidth: componentTheme.strokeWidthXs,
+      transformOrigin: `calc(${componentTheme.spinnerSizeXs} / 2) calc(${componentTheme.spinnerSizeXs} / 2)`
+    },
+    small: {
+      strokeWidth: componentTheme.strokeWidthSm,
+      transformOrigin: `calc(${componentTheme.spinnerSizeSm} / 2) calc(${componentTheme.spinnerSizeSm} / 2)`
+    },
+    medium: {
+      strokeWidth: componentTheme.strokeWidthMd,
+      transformOrigin: `calc(${componentTheme.spinnerSizeMd} / 2) calc(${componentTheme.spinnerSizeMd} / 2)`
+    },
+    large: {
+      strokeWidth: componentTheme.strokeWidthLg,
+      transformOrigin: `calc(${componentTheme.spinnerSizeLg} / 2) calc(${componentTheme.spinnerSizeLg} / 2)` //7em
+    }
+  };
+  const circleSpinVariant = {
+    default: {
+      stroke: componentTheme.color
+    },
+    inverse: {
+      stroke: componentTheme.inverseColor
+    }
+  };
+  return {
+    spinner: {
+      label: 'spinner',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+      verticalAlign: 'middle',
+      ...spinnerSizes[size],
+      // TODO handle the merging on tokens inside the util
+      margin: calcSpacingFromShorthand(margin, {
+        ...sharedTokens.spacing,
+        ...sharedTokens.legacy.spacing
+      })
+    },
+    circle: {
+      label: 'spinner__circle',
+      display: 'block',
+      animationName: rotate,
+      animationDuration: '2.25s',
+      animationIterationCount: 'infinite',
+      animationTimingFunction: 'linear',
+      ...circleSizes[size]
+    },
+    circleTrack: {
+      label: 'spinner__circleTrack',
+      stroke: componentTheme.trackColor,
+      fill: 'none',
+      width: '100%',
+      height: '100%',
+      ...circleTrackSizes[size]
+    },
+    circleSpin: {
+      label: 'spinner__circleSpin',
+      fill: 'none',
+      strokeLinecap: 'round',
+      animationName: morph,
+      animationDuration: '1.75s',
+      animationIterationCount: 'infinite',
+      animationTimingFunction: 'ease',
+      strokeDasharray: `calc(${radii[size]} * 2 * 3.14159 * 0.75) 1000px`,
+      ...circleSpinSizes[size],
+      ...circleSpinVariant[variant]
+    },
+    radius: radii[size]
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Spinner } from "./Spinner/index.js";
+export { Spinner } from "../Spinner/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,6 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-export { Spinner } from './Spinner'
-export type { SpinnerProps } from './Spinner/props'
+export { Spinner } from "../Spinner/v2/index.js";

package/lib/Spinner/{index.js → v1/index.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Spinner = void 0;
 var _react = require("react");
-var _View = require("@instructure/ui-view/lib/View");
+var _v11_ = require("@instructure/ui-view/v11_6");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
@@ -45,7 +45,7 @@ var _dec, _dec2, _class, _Spinner;
 category: components
 ---
 **/
-let Spinner = exports.Spinner = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Spinner = class Spinner extends _react.Component {
+let Spinner = exports.Spinner = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Spinner = class Spinner extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -96,10 +96,10 @@ let Spinner = exports.Spinner = (_dec = (0, _withDeterministicId.withDeterminist
   }
   renderSpinner() {
     var _this$props$styles, _this$props$styles2, _this$props$styles3, _this$props$styles4;
-    const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Spinner.allowedProps), Spinner);
+    const passthroughProps = _v11_.View.omitViewProps((0, _omitProps.omitProps)(this.props, Spinner.allowedProps), Spinner);
     const hasTitle = this.props.renderTitle;
     (0, _console.logError)(!!hasTitle, '[Spinner] The renderTitle prop is necessary for screen reader support.');
-    return (0, _jsxRuntime.jsx)(_View.View, {
+    return (0, _jsxRuntime.jsx)(_v11_.View, {
       ...passthroughProps,
       as: this.props.as,
       elementRef: this.handleRef,

package/lib/Spinner/v2/index.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Spinner = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _emotion = require("@instructure/emotion");
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _useDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/useDeterministicId.js");
+var _console = require("@instructure/console");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/*
+ * 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.
+ */
+
+/**
+---
+category: components
+---
+**/const Spinner = exports.Spinner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'default' : _props$variant,
+    delay = props.delay,
+    renderTitle = props.renderTitle,
+    margin = props.margin,
+    themeOverride = props.themeOverride;
+  const _useState = (0, _react.useState)(!delay),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    shouldRender = _useState2[0],
+    setShouldRender = _useState2[1];
+  // Deterministic ID generation
+  const _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    titleId = _useState4[0],
+    setTitleId = _useState4[1];
+  const getId = (0, _useDeterministicId.useDeterministicId)('Spinner');
+  (0, _react.useEffect)(() => {
+    setTitleId(getId());
+  }, []);
+  const styles = (0, _emotion.useStyle)({
+    generateStyle: _styles.default,
+    themeOverride,
+    params: {
+      size,
+      variant,
+      margin
+    },
+    componentId: 'Spinner',
+    displayName: 'Spinner'
+  });
+  (0, _react.useEffect)(() => {
+    if (delay) {
+      const delayTimeout = setTimeout(() => {
+        setShouldRender(true);
+      }, delay);
+      return () => clearTimeout(delayTimeout);
+    }
+    return void 0;
+  }, [delay]);
+  const renderSpinner = () => {
+    (0, _console.logError)(!!renderTitle, '[Spinner] The `renderTitle` prop is necessary for screen reader support.');
+    const passthroughProps = (0, _omitProps.omitProps)(props, _props.allowedProps);
+    return (0, _jsxRuntime.jsx)("div", {
+      ...passthroughProps,
+      css: styles === null || styles === void 0 ? void 0 : styles.spinner,
+      ref: ref,
+      "data-cid": "Spinner",
+      children: (0, _jsxRuntime.jsxs)("svg", {
+        css: styles === null || styles === void 0 ? void 0 : styles.circle,
+        role: "img",
+        "aria-labelledby": titleId,
+        focusable: "false",
+        children: [(0, _jsxRuntime.jsx)("title", {
+          id: titleId,
+          children: (0, _callRenderProp.callRenderProp)(renderTitle)
+        }), (0, _jsxRuntime.jsxs)("g", {
+          role: "presentation",
+          children: [variant !== 'inverse' && (0, _jsxRuntime.jsx)("circle", {
+            css: styles === null || styles === void 0 ? void 0 : styles.circleTrack,
+            cx: "50%",
+            cy: "50%",
+            r: styles === null || styles === void 0 ? void 0 : styles.radius
+          }), (0, _jsxRuntime.jsx)("circle", {
+            css: styles === null || styles === void 0 ? void 0 : styles.circleSpin,
+            cx: "50%",
+            cy: "50%",
+            r: styles === null || styles === void 0 ? void 0 : styles.radius
+          })]
+        })]
+      })
+    });
+  };
+  return shouldRender ? renderSpinner() : null;
+});
+Spinner.displayName = 'Spinner';
+var _default = exports.default = Spinner;

package/lib/Spinner/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * 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 = exports.allowedProps = ['delay', 'renderTitle', 'size', 'variant', 'margin'];