@react-spectrum/progress 3.0.0-nightly-641446f65-240905

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@react-spectrum/progress",
+  "version": "3.0.0-nightly-641446f65-240905",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "targets": {
+    "main": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    },
+    "module": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-aria/progress": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-spectrum/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/progress": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/shared": "^3.0.0-nightly-641446f65-240905",
+    "@swc/helpers": "^0.5.0"
+  },
+  "devDependencies": {
+    "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "@react-spectrum/provider": "^3.0.0-nightly-641446f65-240905",
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stableVersion": "3.7.9"
+}

package/src/ProgressBar.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {classNames} from '@react-spectrum/utils';
+import {DOMRef} from '@react-types/shared';
+import {ProgressBarBase} from './ProgressBarBase';
+import React from 'react';
+import {SpectrumProgressBarProps} from '@react-types/progress';
+import styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';
+import {useProgressBar} from '@react-aria/progress';
+
+function ProgressBar(props: SpectrumProgressBarProps, ref: DOMRef<HTMLDivElement>) {
+  let {staticColor, variant, ...otherProps} = props;
+  const {
+    progressBarProps,
+    labelProps
+  } = useProgressBar(props);
+
+  return (
+    <ProgressBarBase
+      {...otherProps}
+      ref={ref}
+      barProps={progressBarProps}
+      labelProps={labelProps}
+      barClassName={
+        classNames(
+          styles,
+          {
+            'spectrum-BarLoader--overBackground': variant === 'overBackground',
+            'spectrum-BarLoader--staticWhite': staticColor === 'white',
+            'spectrum-BarLoader--staticBlack': staticColor === 'black'
+          }
+        )
+      } />
+  );
+}
+
+/**
+ * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
+ * They can represent either determinate or indeterminate progress.
+ */
+let _ProgressBar = React.forwardRef(ProgressBar);
+export {_ProgressBar as ProgressBar};

package/src/ProgressBarBase.tsx

@@ -0,0 +1,102 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {clamp} from '@react-aria/utils';
+import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
+import {DOMRef} from '@react-types/shared';
+import {ProgressBarProps, SpectrumProgressBarBaseProps} from '@react-types/progress';
+import React, {CSSProperties, HTMLAttributes} from 'react';
+import styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';
+
+interface ProgressBarBaseProps extends SpectrumProgressBarBaseProps, ProgressBarProps {
+  barClassName?: string,
+  barProps?: HTMLAttributes<HTMLDivElement>,
+  labelProps?: HTMLAttributes<HTMLLabelElement>
+}
+
+// Base ProgressBar component shared with Meter.
+function ProgressBarBase(props: ProgressBarBaseProps, ref: DOMRef<HTMLDivElement>) {
+  let {
+    value = 0,
+    minValue = 0,
+    maxValue = 100,
+    size = 'L',
+    label,
+    barClassName,
+    showValueLabel = !!label,
+    labelPosition = 'top',
+    isIndeterminate = false,
+    barProps,
+    labelProps,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    ...otherProps
+  } = props;
+  let domRef = useDOMRef(ref);
+  let {styleProps} = useStyleProps(otherProps);
+
+  value = clamp(value, minValue, maxValue);
+
+  let barStyle: CSSProperties = {};
+  if (!isIndeterminate) {
+    let percentage = (value - minValue) / (maxValue - minValue);
+    barStyle.width = `${Math.round(percentage * 100)}%`;
+  }
+
+  // Ideally this should be in useProgressBar, but children
+  // are not supported in ProgressCircle which shares that hook...
+  if (!label && !ariaLabel && !ariaLabelledby) {
+    console.warn('If you do not provide a visible label via children, you must specify an aria-label or aria-labelledby attribute for accessibility');
+  }
+  // use inline style for fit-content because cssnano is too smart for us and will strip out the -moz prefix in css files
+  return (
+    <div
+      {...barProps}
+      ref={domRef}
+      className={
+        classNames(
+          styles,
+          'spectrum-BarLoader',
+          {
+            'spectrum-BarLoader--small': size === 'S',
+            'spectrum-BarLoader--large': size === 'L',
+            'spectrum-BarLoader--indeterminate': isIndeterminate,
+            'spectrum-BarLoader--sideLabel': labelPosition === 'side'
+          },
+          barClassName,
+          styleProps.className
+        )
+      }
+      style={{minWidth: '-moz-fit-content', ...styleProps.style}}>
+      {label &&
+        <span
+          {...labelProps}
+          className={classNames(styles, 'spectrum-BarLoader-label')}>
+            {label}
+        </span>
+      }
+      {showValueLabel && barProps && 
+        <div className={classNames(styles, 'spectrum-BarLoader-percentage')}>
+          {barProps['aria-valuetext']}
+        </div>
+      }
+      <div className={classNames(styles, 'spectrum-BarLoader-track')}>
+        <div
+          className={classNames(styles, 'spectrum-BarLoader-fill')}
+          style={barStyle} />
+      </div>
+    </div>
+  );
+}
+
+let _ProgressBarBase = React.forwardRef(ProgressBarBase);
+export {_ProgressBarBase as ProgressBarBase};

package/src/ProgressCircle.tsx

@@ -0,0 +1,109 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {clamp} from '@react-aria/utils';
+import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
+import {DOMRef} from '@react-types/shared';
+import React, {CSSProperties} from 'react';
+import {SpectrumProgressCircleProps} from '@react-types/progress';
+import styles from '@adobe/spectrum-css-temp/components/circleloader/vars.css';
+import {useProgressBar} from '@react-aria/progress';
+
+
+function ProgressCircle(props: SpectrumProgressCircleProps, ref: DOMRef<HTMLDivElement>) {
+  let {
+    value = 0,
+    minValue = 0,
+    maxValue = 100,
+    size = 'M',
+    staticColor,
+    variant,
+    isIndeterminate = false,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    ...otherProps
+  } = props;
+  let domRef = useDOMRef(ref);
+  let {styleProps} = useStyleProps(otherProps);
+
+  value = clamp(value, minValue, maxValue);
+  let {progressBarProps} = useProgressBar({...props, value});
+
+  let subMask1Style: CSSProperties = {};
+  let subMask2Style: CSSProperties = {};
+  if (!isIndeterminate) {
+    let percentage = (value - minValue) / (maxValue - minValue) * 100;
+    let angle;
+    if (percentage > 0 && percentage <= 50) {
+      angle = -180 + (percentage / 50 * 180);
+      subMask1Style.transform = `rotate(${angle}deg)`;
+      subMask2Style.transform = 'rotate(-180deg)';
+    } else if (percentage > 50) {
+      angle = -180 + (percentage - 50) / 50 * 180;
+      subMask1Style.transform = 'rotate(0deg)';
+      subMask2Style.transform = `rotate(${angle}deg)`;
+    }
+  }
+
+  if (!ariaLabel && !ariaLabelledby) {
+    console.warn('ProgressCircle requires an aria-label or aria-labelledby attribute for accessibility');
+  }
+
+  return (
+    <div
+      {...styleProps}
+      {...progressBarProps}
+      ref={domRef}
+      className={
+        classNames(
+          styles,
+          'spectrum-CircleLoader',
+          {
+            'spectrum-CircleLoader--indeterminate': isIndeterminate,
+            'spectrum-CircleLoader--small': size === 'S',
+            'spectrum-CircleLoader--large': size === 'L',
+            'spectrum-CircleLoader--overBackground': variant === 'overBackground',
+            'spectrum-CircleLoader--staticWhite': staticColor === 'white',
+            'spectrum-CircleLoader--staticBlack': staticColor === 'black'
+          },
+          styleProps.className
+        )
+      }>
+      <div className={classNames(styles, 'spectrum-CircleLoader-track')} />
+      <div className={classNames(styles, 'spectrum-CircleLoader-fills')} >
+        <div className={classNames(styles, 'spectrum-CircleLoader-fillMask1')} >
+          <div
+            className={classNames(styles, 'spectrum-CircleLoader-fillSubMask1')}
+            data-testid="fillSubMask1"
+            style={subMask1Style}>
+            <div className={classNames(styles, 'spectrum-CircleLoader-fill')} />
+          </div>
+        </div>
+        <div className={classNames(styles, 'spectrum-CircleLoader-fillMask2')} >
+          <div
+            className={classNames(styles, 'spectrum-CircleLoader-fillSubMask2')}
+            data-testid="fillSubMask2"
+            style={subMask2Style} >
+            <div className={classNames(styles, 'spectrum-CircleLoader-fill')} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
+ * They can represent determinate or indeterminate progress.
+ */
+let _ProgressCircle = React.forwardRef(ProgressCircle);
+export {_ProgressCircle as ProgressCircle};

package/src/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/// <reference types="css-module-types" />
+
+export {ProgressBar} from './ProgressBar';
+export {ProgressCircle} from './ProgressCircle';
+export {ProgressBarBase} from './ProgressBarBase';
+export type {SpectrumProgressBarProps, SpectrumProgressCircleProps} from '@react-types/progress';