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

package/lib/Spinner/v2/styles.js

@@ -0,0 +1,197 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("@instructure/emotion");
+/*
+ * 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.
+ */
+
+// keyframes have to be outside of 'generateStyle',
+// since it is causing problems in style recalculation
+const rotate = (0, _emotion.keyframes)`
+    to {
+      transform: rotate(360deg)
+    }`;
+const morph = (0, _emotion.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: (0, _emotion.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]
+  };
+};
+var _default = exports.default = generateStyle;

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Spinner", {
   enumerable: true,
   get: function () {
-    return _Spinner.Spinner;
+    return _v.Spinner;
   }
 });
-var _Spinner = require("./Spinner");
+var _v = require("../Spinner/v1");

package/lib/exports/b.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function () {
+    return _v.Spinner;
+  }
+});
+var _v = require("../Spinner/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-spinner",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A spinner/loading component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,22 +15,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-utils": "11.6.0",
-    "@instructure/uid": "11.6.0",
-    "@instructure/ui-view": "11.6.0"
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129",
+    "@instructure/uid": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-themes": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -40,17 +40,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/Spinner/{index.tsx → v1/index.tsx}

@@ -24,7 +24,7 @@
 
 import { Component } from 'react'
 
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 import {
   callRenderProp,
   omitProps,
@@ -32,7 +32,7 @@ import {
 } from '@instructure/ui-react-utils'
 import { logError as error } from '@instructure/console'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Spinner/v2/README.md

@@ -0,0 +1,63 @@
+---
+describes: Spinner
+---
+
+### Choose from four sizes and add margin as needed
+
+The `size` prop allows you to select from `x-small`, `small`, `medium` and `large`
+-sized spinners. Margin can be added as needed using the `margin` prop.
+
+```js
+---
+type: example
+---
+<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+  <Spinner renderTitle="Loading" size="x-small" />
+  <Spinner renderTitle="Loading" size="small" />
+  <Spinner renderTitle="Loading" />
+  <Spinner renderTitle="Loading" size="large" />
+</div>
+```
+
+### Different color schemes for use with light and dark backgrounds
+
+Spinner provides an `inverse` color scheme designed to be used with
+dark backgrounds.
+
+```js
+---
+type: example
+---
+<View background="primary-inverse" as="div" >
+  <Spinner renderTitle="Loading" variant="inverse"  />
+</View>
+```
+
+### Delay rendering
+
+The `delay` prop allows you to delay the rendering of the spinner a desired time to prevent flickering in cases of very fast load times.
+
+```js
+---
+type: example
+---
+<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+  <Spinner renderTitle="Loading" size="x-small" delay={1000} />
+  <Spinner renderTitle="Loading" size="small" delay={2000} />
+  <Spinner renderTitle="Loading" delay={3000} />
+  <Spinner renderTitle="Loading" size="large" delay={4000} />
+</div>
+```
+
+### Screen reader support
+
+The `renderTitle` prop is read to screen readers.
+
+```js
+---
+type: example
+---
+<div>
+  <Spinner renderTitle={() => "Hello world"} />
+</div>
+```

package/src/Spinner/v2/index.tsx

@@ -0,0 +1,134 @@
+/*
+ * 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'
+import type { SpinnerProps } from './props'
+import { allowedProps } from './props'
+
+/**
+---
+category: components
+---
+**/
+const Spinner = forwardRef<HTMLDivElement, SpinnerProps>((props, ref) => {
+  const {
+    size = 'medium',
+    variant = 'default',
+    delay,
+    renderTitle,
+    margin,
+    themeOverride
+  } = props
+
+  const [shouldRender, setShouldRender] = useState(!delay)
+  // Deterministic ID generation
+  const [titleId, setTitleId] = useState<string | undefined>()
+  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 undefined
+  }, [delay])
+
+  const renderSpinner = () => {
+    error(
+      !!renderTitle,
+      '[Spinner] The `renderTitle` prop is necessary for screen reader support.'
+    )
+
+    const passthroughProps = omitProps(props, allowedProps)
+
+    return (
+      <div
+        {...passthroughProps}
+        css={styles?.spinner}
+        ref={ref}
+        data-cid="Spinner"
+      >
+        <svg
+          css={styles?.circle}
+          role="img"
+          aria-labelledby={titleId}
+          focusable="false"
+        >
+          <title id={titleId}>{callRenderProp(renderTitle)}</title>
+          <g role="presentation">
+            {variant !== 'inverse' && (
+              <circle
+                css={styles?.circleTrack}
+                cx="50%"
+                cy="50%"
+                r={styles?.radius as string}
+              />
+            )}
+            <circle
+              css={styles?.circleSpin}
+              cx="50%"
+              cy="50%"
+              r={styles?.radius as string}
+            />
+          </g>
+        </svg>
+      </div>
+    )
+  }
+
+  return shouldRender ? renderSpinner() : null
+})
+
+Spinner.displayName = 'Spinner'
+
+export default Spinner
+export { Spinner }

package/src/Spinner/v2/props.ts

@@ -0,0 +1,81 @@
+/*
+ * 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 type {
+  Spacing,
+  ComponentStyle,
+  ThemeOverrideValue
+} from '@instructure/emotion'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import { Renderable } from '@instructure/shared-types'
+
+type SpinnerOwnProps = {
+  /**
+   * delay spinner rendering for a time (in ms). Used to prevent flickering in case of very fast load times
+   */
+  delay?: number
+  /**
+   * Valid values are `0`, `none`, `auto`, and Spacing token values,
+   * see https://instructure.design/layout-spacing. Apply these values via
+   * familiar CSS-like shorthand. For example, `gap="small auto large"`.
+   */
+  margin?: Spacing
+  /**
+   * Give the spinner a title to be read by screenreaders
+   */
+  renderTitle?: Renderable
+  /**
+   * Different-sized spinners
+   */
+  size?: 'x-small' | 'small' | 'medium' | 'large'
+  /**
+   * Different color schemes for use with light or dark backgrounds
+   */
+  variant?: 'default' | 'inverse'
+}
+
+type PropKeys = keyof SpinnerOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type SpinnerProps = SpinnerOwnProps & {
+  themeOverride?: ThemeOverrideValue
+} & OtherHTMLAttributes<SpinnerOwnProps> &
+  WithDeterministicIdProps
+
+type SpinnerStyle = ComponentStyle<
+  'spinner' | 'circle' | 'circleTrack' | 'circleSpin' | 'radius'
+>
+
+const allowedProps: AllowedPropKeys = [
+  'delay',
+  'renderTitle',
+  'size',
+  'variant',
+  'margin'
+]
+
+export type { SpinnerProps, SpinnerStyle }
+export { allowedProps }