@ringcentral/spring-ui 1.9.1 → 1.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/Button.js +1 -1
  2. package/CircularProgressIndicator.js +1 -2
  3. package/chunks/CircularProgressIndicator.js +1 -29
  4. package/chunks/Popover.js +1 -1
  5. package/index.css +106 -46
  6. package/package.json +5 -4
package/Button.js CHANGED
@@ -6,9 +6,9 @@ import '@mui/base';
6
6
  import '@ringcentral/spring-base';
7
7
  import '@ringcentral/spring-theme';
8
8
  import './chunks/CircularProgressIndicator.js';
9
- import 'framer-motion';
10
9
  import './chunks/Icon.js';
11
10
  import './chunks/Tooltip.js';
11
+ import 'framer-motion';
12
12
  import './chunks/usePrefersReducedMotion.js';
13
13
  import './chunks/getFade.js';
14
14
  import './Popper.js';
package/CircularProgressIndicator.js CHANGED
@@ -2,10 +2,9 @@ export { C as CircularProgressIndicator } from './chunks/CircularProgressIndicat
2
2
  import 'react/jsx-runtime';
3
3
  import 'react';
4
4
  import 'clsx';
5
- import 'framer-motion';
6
5
  import '@ringcentral/spring-base';
7
6
  import '@ringcentral/spring-theme';
8
7
 
9
- var CircularProgressIndicator = {"sui-circular-progress-indicator-root":"sui-circular-progress-indicator-root","sui-circular-progress-indicator-xlarge":"sui-circular-progress-indicator-xlarge","sui-circular-progress-indicator-large":"sui-circular-progress-indicator-large","sui-circular-progress-indicator-medium":"sui-circular-progress-indicator-medium","sui-circular-progress-indicator-small":"sui-circular-progress-indicator-small","sui-circular-progress-indicator-xsmall":"sui-circular-progress-indicator-xsmall","sui-circular-progress-indicator-indeterminate":"sui-circular-progress-indicator-indeterminate","sui-circular-progress-indicator-indeterminate-outer-circle":"sui-circular-progress-indicator-indeterminate-outer-circle","sui-circular-progress-indicator-indeterminate-inner-circle":"sui-circular-progress-indicator-indeterminate-inner-circle","sui-circular-progress-indicator-indeterminate-xlarge":"sui-circular-progress-indicator-indeterminate-xlarge","sui-circular-progress-indicator-indeterminate-large":"sui-circular-progress-indicator-indeterminate-large","sui-circular-progress-indicator-indeterminate-medium":"sui-circular-progress-indicator-indeterminate-medium","sui-circular-progress-indicator-indeterminate-small":"sui-circular-progress-indicator-indeterminate-small","sui-circular-progress-indicator-indeterminate-xsmall":"sui-circular-progress-indicator-indeterminate-xsmall","sui-circular-progress-indicator-indeterminate-primary":"sui-circular-progress-indicator-indeterminate-primary","sui-circular-progress-indicator-indeterminate-neutral":"sui-circular-progress-indicator-indeterminate-neutral","sui-circular-progress-indicator-indeterminate-danger":"sui-circular-progress-indicator-indeterminate-danger","sui-circular-progress-indicator-indeterminate-warning":"sui-circular-progress-indicator-indeterminate-warning","sui-circular-progress-indicator-indeterminate-success":"sui-circular-progress-indicator-indeterminate-success","sui-circular-progress-indicator-determinate-progress-circle":"sui-circular-progress-indicator-determinate-progress-circle","sui-circular-progress-indicator-determinate-primary":"sui-circular-progress-indicator-determinate-primary","sui-circular-progress-indicator-determinate-neutral":"sui-circular-progress-indicator-determinate-neutral","sui-circular-progress-indicator-determinate-danger":"sui-circular-progress-indicator-determinate-danger","sui-circular-progress-indicator-determinate-warning":"sui-circular-progress-indicator-determinate-warning","sui-circular-progress-indicator-determinate-success":"sui-circular-progress-indicator-determinate-success"};
8
+ var CircularProgressIndicator = {"sui-circular-progress-indicator-root":"sui-circular-progress-indicator-root","sui-circular-progress-indicator-xlarge":"sui-circular-progress-indicator-xlarge","sui-circular-progress-indicator-large":"sui-circular-progress-indicator-large","sui-circular-progress-indicator-medium":"sui-circular-progress-indicator-medium","sui-circular-progress-indicator-small":"sui-circular-progress-indicator-small","sui-circular-progress-indicator-xsmall":"sui-circular-progress-indicator-xsmall","sui-circular-progress-indicator-indeterminate":"sui-circular-progress-indicator-indeterminate","sui-circular-progress-indicator-indeterminate-outer-circle":"sui-circular-progress-indicator-indeterminate-outer-circle","sui-circular-progress-indicator-rotate":"sui-circular-progress-indicator-rotate","sui-circular-progress-indicator-indeterminate-inner-circle":"sui-circular-progress-indicator-indeterminate-inner-circle","sui-circular-progress-indicator-pulse":"sui-circular-progress-indicator-pulse","sui-circular-progress-indicator-indeterminate-xlarge":"sui-circular-progress-indicator-indeterminate-xlarge","sui-circular-progress-indicator-indeterminate-large":"sui-circular-progress-indicator-indeterminate-large","sui-circular-progress-indicator-indeterminate-medium":"sui-circular-progress-indicator-indeterminate-medium","sui-circular-progress-indicator-indeterminate-small":"sui-circular-progress-indicator-indeterminate-small","sui-circular-progress-indicator-indeterminate-xsmall":"sui-circular-progress-indicator-indeterminate-xsmall","sui-circular-progress-indicator-indeterminate-primary":"sui-circular-progress-indicator-indeterminate-primary","sui-circular-progress-indicator-indeterminate-neutral":"sui-circular-progress-indicator-indeterminate-neutral","sui-circular-progress-indicator-indeterminate-danger":"sui-circular-progress-indicator-indeterminate-danger","sui-circular-progress-indicator-indeterminate-warning":"sui-circular-progress-indicator-indeterminate-warning","sui-circular-progress-indicator-indeterminate-success":"sui-circular-progress-indicator-indeterminate-success","sui-circular-progress-indicator-determinate-progress-circle":"sui-circular-progress-indicator-determinate-progress-circle","sui-circular-progress-indicator-determinate-primary":"sui-circular-progress-indicator-determinate-primary","sui-circular-progress-indicator-determinate-neutral":"sui-circular-progress-indicator-determinate-neutral","sui-circular-progress-indicator-determinate-danger":"sui-circular-progress-indicator-determinate-danger","sui-circular-progress-indicator-determinate-warning":"sui-circular-progress-indicator-determinate-warning","sui-circular-progress-indicator-determinate-success":"sui-circular-progress-indicator-determinate-success"};
10
9
 
11
10
  export { CircularProgressIndicator as circularProgressIndicatorStyle };
package/chunks/CircularProgressIndicator.js CHANGED
@@ -1,22 +1,9 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef } from 'react';
3
3
  import clsx from 'clsx';
4
- import { MotionConfig, motion } from 'framer-motion';
5
4
  import { useClasses } from '@ringcentral/spring-base';
6
5
  import { useThemeProps } from '@ringcentral/spring-theme';
7
6
 
8
- const indeterminateTransition = {
9
- type: 'tween',
10
- duration: 1,
11
- ease: 'easeInOut',
12
- };
13
- const radialGradientScaleMultiplier = {
14
- xlarge: [2.7, 3],
15
- large: [3, 3.5],
16
- medium: [2.7, 3],
17
- small: [3.5, 3],
18
- xsmall: [3.5, 3],
19
- };
20
7
  const CircularProgressIndicator = forwardRef((inProps, ref) => {
21
8
  const props = useThemeProps({
22
9
  props: inProps,
@@ -27,22 +14,7 @@ const CircularProgressIndicator = forwardRef((inProps, ref) => {
27
14
  const progressBarProps = progressBarPropsProp || {};
28
15
  let content = null;
29
16
  if (variant === 'indeterminate') {
30
- const [scale, scaleMultiplier] = radialGradientScaleMultiplier[size];
31
- content = (jsx(MotionConfig, { reducedMotion: "never", children: jsx(motion.span, { className: cls('outer-circle', `${variant}-outer-circle`), animate: {
32
- rotate: 360,
33
- transition: {
34
- repeat: Infinity,
35
- ...indeterminateTransition,
36
- },
37
- }, children: jsx(motion.span, { className: cls('inner-circle', `${variant}-inner-circle`), animate: {
38
- scale: [scale, scale * scaleMultiplier, scale],
39
- opacity: [0.5, 1, 0.5],
40
- transition: {
41
- repeat: Infinity,
42
- repeatType: 'loop',
43
- ...indeterminateTransition,
44
- },
45
- } }) }) }));
17
+ content = (jsx("span", { className: cls('outer-circle', `${variant}-outer-circle`), children: jsx("span", { className: cls('inner-circle', `${variant}-inner-circle`) }) }));
46
18
  }
47
19
  else if (variant === 'determinate') {
48
20
  if (value === undefined) {
package/chunks/Popover.js CHANGED
@@ -18,7 +18,7 @@ const Popover = forwardRef((inProps, ref) => {
18
18
  const paperContentRef = useRef(null);
19
19
  const handlePaperContentRef = useForkRef(popperPaperPropsProp?.contentRef, paperContentRef);
20
20
  const prefersReducedMotion = usePrefersReducedMotion();
21
- return (jsx(Modal, { disableScrollLock: true, ...rest, className: cls('root', 'popper'), ref: ref, motionProps: null, hideBackdrop: true, children: jsx(Popper, { arrowHeight: variant === 'standard' ? 0 : 10, arrowPadding: 12, offset: variant === 'standard' ? 2 : 4, ...combineProps({
21
+ return (jsx(Modal, { ...rest, className: cls('root', 'popper'), ref: ref, motionProps: null, hideBackdrop: true, children: jsx(Popper, { arrowHeight: variant === 'standard' ? 0 : 10, arrowPadding: 12, offset: variant === 'standard' ? 2 : 4, ...combineProps({
22
22
  middlewares: [
23
23
  size({
24
24
  padding: PopperProps?.padding,
package/index.css CHANGED
@@ -752,43 +752,71 @@
752
752
  display: none;
753
753
  }
754
754
 
755
- .sui-circular-progress-indicator-root {
756
-
757
- display: flex;
758
-
759
- flex-direction: column;
760
-
761
- align-items: center;
755
+ @keyframes sui-circular-progress-indicator-rotate {
756
+ from {
757
+ transform: rotate(0deg);
758
+ }
762
759
 
763
- justify-content: center;
760
+ to {
761
+ transform: rotate(360deg);
762
+ }
763
+ }
764
764
 
765
- overflow: hidden;
765
+ @keyframes sui-circular-progress-indicator-pulse {
766
+ 0% {
767
+ transform: scale(var(--sui-circular-progress-indicator-pulse-start-scale));
768
+ opacity: 0.5;
769
+ }
766
770
 
767
- will-change: transform;
771
+ 50% {
772
+ transform: scale(var(--sui-circular-progress-indicator-pulse-end-scale));
773
+ opacity: 1;
774
+ }
768
775
 
769
- border-radius: var(--sui-border-radius-full);
776
+ 100% {
777
+ transform: scale(var(--sui-circular-progress-indicator-pulse-start-scale));
778
+ opacity: 0.5;
779
+ }
780
+ }
770
781
 
771
- --sui-focus-ring-border-radius: var(--sui-border-radius-full);
782
+ .sui-circular-progress-indicator-root {
783
+ display: flex;
784
+ flex-direction: column;
785
+ align-items: center;
786
+ justify-content: center;
787
+ overflow: hidden;
788
+ will-change: transform;
789
+ border-radius: var(--sui-border-radius-full);
790
+ --sui-focus-ring-border-radius: var(--sui-border-radius-full);
772
791
 
773
792
  width: var(--sui-circular-progress-indicator-size);
774
793
  height: var(--sui-circular-progress-indicator-size);
775
794
  }
776
- .sui-circular-progress-indicator-xlarge {
795
+
796
+ .sui-circular-progress-indicator-xlarge {
777
797
  --sui-circular-progress-indicator-size: var(--sui-spacing-14);
778
798
  }
779
- .sui-circular-progress-indicator-large {
799
+
800
+ .sui-circular-progress-indicator-large {
780
801
  --sui-circular-progress-indicator-size: var(--sui-spacing-10);
781
802
  }
782
- .sui-circular-progress-indicator-medium {
803
+
804
+ .sui-circular-progress-indicator-medium {
783
805
  --sui-circular-progress-indicator-size: var(--sui-spacing-6);
784
806
  }
785
- .sui-circular-progress-indicator-small {
807
+
808
+ .sui-circular-progress-indicator-small {
786
809
  --sui-circular-progress-indicator-size: var(--sui-spacing-4);
787
810
  }
788
- .sui-circular-progress-indicator-xsmall {
811
+
812
+ .sui-circular-progress-indicator-xsmall {
789
813
  --sui-circular-progress-indicator-size: var(--sui-spacing-3);
790
814
  }
791
- .sui-circular-progress-indicator-indeterminate {
815
+
816
+ .sui-circular-progress-indicator-indeterminate {
817
+ --sui-circular-progress-indicator-animation-duration: 1s;
818
+ --sui-circular-progress-indicator-animation-easing: ease-in-out;
819
+
792
820
  background-color: var(--sui-circular-progress-indicator-track-bg);
793
821
 
794
822
  /* stylelint-disable-next-line property-no-vendor-prefix */
@@ -799,24 +827,25 @@
799
827
  var(--sui-circular-progress-indicator-gradient-stop)
800
828
  );
801
829
  }
802
- .sui-circular-progress-indicator-indeterminate-outer-circle {
803
830
 
804
- display: block;
805
-
806
- border-radius: var(--sui-border-radius-full);
807
-
808
- --sui-focus-ring-border-radius: var(--sui-border-radius-full);
831
+ .sui-circular-progress-indicator-indeterminate-outer-circle {
832
+ display: block;
833
+ border-radius: var(--sui-border-radius-full);
834
+ --sui-focus-ring-border-radius: var(--sui-border-radius-full);
809
835
 
810
836
  width: calc(var(--sui-circular-progress-indicator-size) / 4);
811
837
  height: calc(var(--sui-circular-progress-indicator-size) + 4px);
838
+ animation: sui-circular-progress-indicator-rotate
839
+ var(--sui-circular-progress-indicator-animation-duration)
840
+ var(--sui-circular-progress-indicator-animation-easing) infinite;
841
+ transform-origin: center center;
842
+ will-change: transform;
812
843
  }
813
- .sui-circular-progress-indicator-indeterminate-inner-circle {
814
-
815
- display: block;
816
844
 
817
- border-radius: var(--sui-border-radius-full);
818
-
819
- --sui-focus-ring-border-radius: var(--sui-border-radius-full);
845
+ .sui-circular-progress-indicator-indeterminate-inner-circle {
846
+ display: block;
847
+ border-radius: var(--sui-border-radius-full);
848
+ --sui-focus-ring-border-radius: var(--sui-border-radius-full);
820
849
 
821
850
  width: calc(var(--sui-circular-progress-indicator-size) / 4);
822
851
  height: calc(var(--sui-circular-progress-indicator-size) / 4);
@@ -826,9 +855,17 @@
826
855
  var(--sui-circular-progress-indicator-gradient-end-color)
827
856
  );
828
857
  clip-path: inset(0 50% 0 0);
858
+ animation: sui-circular-progress-indicator-pulse
859
+ var(--sui-circular-progress-indicator-animation-duration)
860
+ var(--sui-circular-progress-indicator-animation-easing) infinite;
861
+ transform-origin: center center;
862
+ will-change: transform, opacity;
829
863
  }
830
- .sui-circular-progress-indicator-indeterminate-xlarge {
864
+
865
+ .sui-circular-progress-indicator-indeterminate-xlarge {
831
866
  --sui-circular-progress-indicator-gradient-size: 4px;
867
+ --sui-circular-progress-indicator-pulse-start-scale: 2.7;
868
+ --sui-circular-progress-indicator-pulse-end-scale: 8.1;
832
869
  --sui-circular-progress-indicator-gradient-start: calc(
833
870
  var(--sui-circular-progress-indicator-size) / 3
834
871
  );
@@ -836,8 +873,11 @@
836
873
  var(--sui-circular-progress-indicator-size) / 2.92
837
874
  );
838
875
  }
839
- .sui-circular-progress-indicator-indeterminate-large {
876
+
877
+ .sui-circular-progress-indicator-indeterminate-large {
840
878
  --sui-circular-progress-indicator-gradient-size: 3px;
879
+ --sui-circular-progress-indicator-pulse-start-scale: 3;
880
+ --sui-circular-progress-indicator-pulse-end-scale: 10.5;
841
881
  --sui-circular-progress-indicator-gradient-start: calc(
842
882
  var(--sui-circular-progress-indicator-size) / 3
843
883
  );
@@ -845,8 +885,11 @@
845
885
  var(--sui-circular-progress-indicator-size) / 2.82
846
886
  );
847
887
  }
848
- .sui-circular-progress-indicator-indeterminate-medium {
888
+
889
+ .sui-circular-progress-indicator-indeterminate-medium {
849
890
  --sui-circular-progress-indicator-gradient-size: 2px;
891
+ --sui-circular-progress-indicator-pulse-start-scale: 2.7;
892
+ --sui-circular-progress-indicator-pulse-end-scale: 8.1;
850
893
  --sui-circular-progress-indicator-gradient-start: calc(
851
894
  var(--sui-circular-progress-indicator-size) / 3
852
895
  );
@@ -854,8 +897,11 @@
854
897
  var(--sui-circular-progress-indicator-size) / 2.72
855
898
  );
856
899
  }
857
- .sui-circular-progress-indicator-indeterminate-small {
900
+
901
+ .sui-circular-progress-indicator-indeterminate-small {
858
902
  --sui-circular-progress-indicator-gradient-size: 1px;
903
+ --sui-circular-progress-indicator-pulse-start-scale: 3.5;
904
+ --sui-circular-progress-indicator-pulse-end-scale: 10.5;
859
905
  --sui-circular-progress-indicator-gradient-start: calc(
860
906
  var(--sui-circular-progress-indicator-size) / 3
861
907
  );
@@ -863,8 +909,11 @@
863
909
  var(--sui-circular-progress-indicator-size) / 2.72
864
910
  );
865
911
  }
866
- .sui-circular-progress-indicator-indeterminate-xsmall {
912
+
913
+ .sui-circular-progress-indicator-indeterminate-xsmall {
867
914
  --sui-circular-progress-indicator-gradient-size: 1px;
915
+ --sui-circular-progress-indicator-pulse-start-scale: 3.5;
916
+ --sui-circular-progress-indicator-pulse-end-scale: 10.5;
868
917
  --sui-circular-progress-indicator-gradient-start: calc(
869
918
  var(--sui-circular-progress-indicator-size) / 3
870
919
  );
@@ -872,7 +921,8 @@
872
921
  var(--sui-circular-progress-indicator-size) / 2.72
873
922
  );
874
923
  }
875
- .sui-circular-progress-indicator-indeterminate-primary {
924
+
925
+ .sui-circular-progress-indicator-indeterminate-primary {
876
926
  --sui-circular-progress-indicator-gradient-start-color: var(
877
927
  --sui-colors-primary-f
878
928
  );
@@ -881,7 +931,8 @@
881
931
  );
882
932
  --sui-circular-progress-indicator-track-bg: var(--sui-colors-neutral-b4);
883
933
  }
884
- .sui-circular-progress-indicator-indeterminate-neutral {
934
+
935
+ .sui-circular-progress-indicator-indeterminate-neutral {
885
936
  --sui-circular-progress-indicator-gradient-start-color: var(
886
937
  --sui-colors-neutral-static-w0
887
938
  );
@@ -892,7 +943,8 @@
892
943
  --sui-colors-neutral-b4-t50
893
944
  );
894
945
  }
895
- .sui-circular-progress-indicator-indeterminate-danger {
946
+
947
+ .sui-circular-progress-indicator-indeterminate-danger {
896
948
  --sui-circular-progress-indicator-gradient-start-color: var(
897
949
  --sui-colors-danger-f
898
950
  );
@@ -901,7 +953,8 @@
901
953
  );
902
954
  --sui-circular-progress-indicator-track-bg: var(--sui-colors-neutral-b4);
903
955
  }
904
- .sui-circular-progress-indicator-indeterminate-warning {
956
+
957
+ .sui-circular-progress-indicator-indeterminate-warning {
905
958
  --sui-circular-progress-indicator-gradient-start-color: var(
906
959
  --sui-colors-warning-f
907
960
  );
@@ -910,7 +963,8 @@
910
963
  );
911
964
  --sui-circular-progress-indicator-track-bg: var(--sui-colors-neutral-b4);
912
965
  }
913
- .sui-circular-progress-indicator-indeterminate-success {
966
+
967
+ .sui-circular-progress-indicator-indeterminate-success {
914
968
  --sui-circular-progress-indicator-gradient-start-color: var(
915
969
  --sui-colors-success-f
916
970
  );
@@ -919,22 +973,28 @@
919
973
  );
920
974
  --sui-circular-progress-indicator-track-bg: var(--sui-colors-neutral-b4);
921
975
  }
922
- .sui-circular-progress-indicator-determinate-progress-circle {
976
+
977
+ .sui-circular-progress-indicator-determinate-progress-circle {
923
978
  stroke: var(--sui-circular-progress-indicator-bg);
924
979
  }
925
- .sui-circular-progress-indicator-determinate-primary {
980
+
981
+ .sui-circular-progress-indicator-determinate-primary {
926
982
  --sui-circular-progress-indicator-bg: var(--sui-colors-primary-f);
927
983
  }
928
- .sui-circular-progress-indicator-determinate-neutral {
984
+
985
+ .sui-circular-progress-indicator-determinate-neutral {
929
986
  --sui-circular-progress-indicator-bg: var(--sui-colors-neutral-w0);
930
987
  }
931
- .sui-circular-progress-indicator-determinate-danger {
988
+
989
+ .sui-circular-progress-indicator-determinate-danger {
932
990
  --sui-circular-progress-indicator-bg: var(--sui-colors-danger-f);
933
991
  }
934
- .sui-circular-progress-indicator-determinate-warning {
992
+
993
+ .sui-circular-progress-indicator-determinate-warning {
935
994
  --sui-circular-progress-indicator-bg: var(--sui-colors-warning-f);
936
995
  }
937
- .sui-circular-progress-indicator-determinate-success {
996
+
997
+ .sui-circular-progress-indicator-determinate-success {
938
998
  --sui-circular-progress-indicator-bg: var(--sui-colors-success-f);
939
999
  }
940
1000
 
package/package.json CHANGED
@@ -1,11 +1,12 @@
1
1
  {
2
2
  "name": "@ringcentral/spring-ui",
3
- "version": "1.9.1",
3
+ "version": "1.9.2",
4
4
  "author": "RingCentral",
5
5
  "description": "A comprehensive React component library built with Tailwind CSS, featuring production-ready components",
6
6
  "main": "./index.js",
7
7
  "module": "./index.js",
8
8
  "types": "./index.d.ts",
9
+ "style": "./index.css",
9
10
  "dependencies": {
10
11
  "@date-io/dayjs": "^3.0.0",
11
12
  "@dnd-kit/core": "^6.1.0",
@@ -14,9 +15,9 @@
14
15
  "@floating-ui/react-dom": "2.1.1",
15
16
  "@juggle/resize-observer": "3.4.0",
16
17
  "@mui/base": "5.0.0-beta.40",
17
- "@ringcentral/spring-base": "^1.9.1",
18
- "@ringcentral/spring-icon": "^1.9.1",
19
- "@ringcentral/spring-theme": "^1.9.1",
18
+ "@ringcentral/spring-base": "^1.9.2",
19
+ "@ringcentral/spring-icon": "^1.9.2",
20
+ "@ringcentral/spring-theme": "^1.9.2",
20
21
  "@types/lodash": "^4.14.182",
21
22
  "@use-gesture/react": "10.3.1",
22
23
  "clsx": "^1.2.1",