@sinco/react 1.0.14-rc.3 → 1.0.14-rc.30

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.
package/index.js CHANGED
@@ -146,7 +146,7 @@ var $TypeError$d = TypeError;
146
146
  // `RequireObjectCoercible` abstract operation
147
147
  // https://tc39.es/ecma262/#sec-requireobjectcoercible
148
148
  var requireObjectCoercible$3 = function (it) {
149
- if (isNullOrUndefined$4(it)) throw $TypeError$d("Can't call method on " + it);
149
+ if (isNullOrUndefined$4(it)) throw new $TypeError$d("Can't call method on " + it);
150
150
  return it;
151
151
  };
152
152
 
@@ -295,7 +295,7 @@ var $TypeError$c = TypeError;
295
295
  // `Assert: IsCallable(argument) is true`
296
296
  var aCallable$8 = function (argument) {
297
297
  if (isCallable$h(argument)) return argument;
298
- throw $TypeError$c(tryToString$3(argument) + ' is not a function');
298
+ throw new $TypeError$c(tryToString$3(argument) + ' is not a function');
299
299
  };
300
300
 
301
301
  var aCallable$7 = aCallable$8;
@@ -321,7 +321,7 @@ var ordinaryToPrimitive$1 = function (input, pref) {
321
321
  if (pref === 'string' && isCallable$g(fn = input.toString) && !isObject$7(val = call$f(fn, input))) return val;
322
322
  if (isCallable$g(fn = input.valueOf) && !isObject$7(val = call$f(fn, input))) return val;
323
323
  if (pref !== 'string' && isCallable$g(fn = input.toString) && !isObject$7(val = call$f(fn, input))) return val;
324
- throw $TypeError$b("Can't convert object to primitive value");
324
+ throw new $TypeError$b("Can't convert object to primitive value");
325
325
  };
326
326
 
327
327
  var shared$4 = {exports: {}};
@@ -352,10 +352,10 @@ var store$2 = sharedStore;
352
352
  (shared$4.exports = function (key, value) {
353
353
  return store$2[key] || (store$2[key] = value !== undefined ? value : {});
354
354
  })('versions', []).push({
355
- version: '3.32.2',
355
+ version: '3.33.0',
356
356
  mode: 'global',
357
357
  copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
358
- license: 'https://github.com/zloirock/core-js/blob/v3.32.2/LICENSE',
358
+ license: 'https://github.com/zloirock/core-js/blob/v3.33.0/LICENSE',
359
359
  source: 'https://github.com/zloirock/core-js'
360
360
  });
361
361
 
@@ -430,7 +430,7 @@ var toPrimitive$1 = function (input, pref) {
430
430
  if (pref === undefined) pref = 'default';
431
431
  result = call$e(exoticToPrim, input, pref);
432
432
  if (!isObject$6(result) || isSymbol$1(result)) return result;
433
- throw $TypeError$a("Can't convert object to primitive value");
433
+ throw new $TypeError$a("Can't convert object to primitive value");
434
434
  }
435
435
  if (pref === undefined) pref = 'number';
436
436
  return ordinaryToPrimitive(input, pref);
@@ -515,7 +515,7 @@ var $TypeError$9 = TypeError;
515
515
  // `Assert: Type(argument) is Object`
516
516
  var anObject$d = function (argument) {
517
517
  if (isObject$4(argument)) return argument;
518
- throw $TypeError$9($String$3(argument) + ' is not an object');
518
+ throw new $TypeError$9($String$3(argument) + ' is not an object');
519
519
  };
520
520
 
521
521
  var DESCRIPTORS$7 = descriptors;
@@ -557,7 +557,7 @@ objectDefineProperty.f = DESCRIPTORS$7 ? V8_PROTOTYPE_DEFINE_BUG$1 ? function de
557
557
  if (IE8_DOM_DEFINE) try {
558
558
  return $defineProperty(O, P, Attributes);
559
559
  } catch (error) { /* empty */ }
560
- if ('get' in Attributes || 'set' in Attributes) throw $TypeError$8('Accessors not supported');
560
+ if ('get' in Attributes || 'set' in Attributes) throw new $TypeError$8('Accessors not supported');
561
561
  if ('value' in Attributes) O[P] = Attributes.value;
562
562
  return O;
563
563
  };
@@ -648,7 +648,7 @@ var getterFor = function (TYPE) {
648
648
  return function (it) {
649
649
  var state;
650
650
  if (!isObject$3(it) || (state = get(it)).type !== TYPE) {
651
- throw TypeError$2('Incompatible receiver, ' + TYPE + ' required');
651
+ throw new TypeError$2('Incompatible receiver, ' + TYPE + ' required');
652
652
  } return state;
653
653
  };
654
654
  };
@@ -661,7 +661,7 @@ if (NATIVE_WEAK_MAP || shared$1.state) {
661
661
  store.set = store.set;
662
662
  /* eslint-enable no-self-assign -- prototype methods protection */
663
663
  set$1 = function (it, metadata) {
664
- if (store.has(it)) throw TypeError$2(OBJECT_ALREADY_INITIALIZED);
664
+ if (store.has(it)) throw new TypeError$2(OBJECT_ALREADY_INITIALIZED);
665
665
  metadata.facade = it;
666
666
  store.set(it, metadata);
667
667
  return metadata;
@@ -676,7 +676,7 @@ if (NATIVE_WEAK_MAP || shared$1.state) {
676
676
  var STATE = sharedKey$2('state');
677
677
  hiddenKeys$3[STATE] = true;
678
678
  set$1 = function (it, metadata) {
679
- if (hasOwn$6(it, STATE)) throw TypeError$2(OBJECT_ALREADY_INITIALIZED);
679
+ if (hasOwn$6(it, STATE)) throw new TypeError$2(OBJECT_ALREADY_INITIALIZED);
680
680
  metadata.facade = it;
681
681
  createNonEnumerableProperty$4(it, STATE, metadata);
682
682
  return metadata;
@@ -2759,7 +2759,11 @@ function deprecatedPropType(validator, reason) {
2759
2759
  }
2760
2760
 
2761
2761
  function isMuiElement(element, muiNames) {
2762
- return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
2762
+ var _muiName, _element$type;
2763
+ return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName
2764
+ // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
2765
+ // eslint-disable-next-line no-underscore-dangle
2766
+ (_muiName = element.type.muiName) != null ? _muiName : (_element$type = element.type) == null || (_element$type = _element$type._payload) == null || (_element$type = _element$type.value) == null ? void 0 : _element$type.muiName) !== -1;
2763
2767
  }
2764
2768
 
2765
2769
  function ownerDocument(node) {
@@ -2816,6 +2820,13 @@ function setRef(ref, value) {
2816
2820
  }
2817
2821
  }
2818
2822
 
2823
+ /**
2824
+ * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
2825
+ * This is useful for effects that are only needed for client-side rendering but not for SSR.
2826
+ *
2827
+ * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
2828
+ * and confirm it doesn't apply to your use-case.
2829
+ */
2819
2830
  const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
2820
2831
  var useEnhancedEffect$1 = useEnhancedEffect;
2821
2832
 
@@ -6188,7 +6199,7 @@ tags.forEach(function (tagName) {
6188
6199
  });
6189
6200
 
6190
6201
  /**
6191
- * @mui/styled-engine v5.14.10
6202
+ * @mui/styled-engine v5.14.12
6192
6203
  *
6193
6204
  * @license MIT
6194
6205
  * This source code is licensed under the MIT license found in the
@@ -7545,40 +7556,48 @@ const getStyleOverrides = (name, theme) => {
7545
7556
  }
7546
7557
  return null;
7547
7558
  };
7559
+ const transformVariants = variants => {
7560
+ const variantsStyles = {};
7561
+ if (variants) {
7562
+ variants.forEach(definition => {
7563
+ const key = propsToClassKey(definition.props);
7564
+ variantsStyles[key] = definition.style;
7565
+ });
7566
+ }
7567
+ return variantsStyles;
7568
+ };
7548
7569
  const getVariantStyles = (name, theme) => {
7549
7570
  let variants = [];
7550
7571
  if (theme && theme.components && theme.components[name] && theme.components[name].variants) {
7551
7572
  variants = theme.components[name].variants;
7552
7573
  }
7553
- const variantsStyles = {};
7554
- variants.forEach(definition => {
7555
- const key = propsToClassKey(definition.props);
7556
- variantsStyles[key] = definition.style;
7557
- });
7558
- return variantsStyles;
7574
+ return transformVariants(variants);
7559
7575
  };
7560
- const variantsResolver = (props, styles, theme, name) => {
7561
- var _theme$components;
7576
+ const variantsResolver = (props, styles, variants) => {
7562
7577
  const {
7563
7578
  ownerState = {}
7564
7579
  } = props;
7565
7580
  const variantsStyles = [];
7566
- const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
7567
- if (themeVariants) {
7568
- themeVariants.forEach(themeVariant => {
7581
+ if (variants) {
7582
+ variants.forEach(variant => {
7569
7583
  let isMatch = true;
7570
- Object.keys(themeVariant.props).forEach(key => {
7571
- if (ownerState[key] !== themeVariant.props[key] && props[key] !== themeVariant.props[key]) {
7584
+ Object.keys(variant.props).forEach(key => {
7585
+ if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
7572
7586
  isMatch = false;
7573
7587
  }
7574
7588
  });
7575
7589
  if (isMatch) {
7576
- variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
7590
+ variantsStyles.push(styles[propsToClassKey(variant.props)]);
7577
7591
  }
7578
7592
  });
7579
7593
  }
7580
7594
  return variantsStyles;
7581
7595
  };
7596
+ const themeVariantsResolver = (props, styles, theme, name) => {
7597
+ var _theme$components;
7598
+ const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
7599
+ return variantsResolver(props, styles, themeVariants);
7600
+ };
7582
7601
 
7583
7602
  // Update /system/styled/#api in case if this changes
7584
7603
  function shouldForwardProp(prop) {
@@ -7604,6 +7623,29 @@ function defaultOverridesResolver(slot) {
7604
7623
  }
7605
7624
  return (props, styles) => styles[slot];
7606
7625
  }
7626
+ const muiStyledFunctionResolver = ({
7627
+ styledArg,
7628
+ props,
7629
+ defaultTheme,
7630
+ themeId
7631
+ }) => {
7632
+ const resolvedStyles = styledArg(_extends$2({}, props, {
7633
+ theme: resolveTheme(_extends$2({}, props, {
7634
+ defaultTheme,
7635
+ themeId
7636
+ }))
7637
+ }));
7638
+ let optionalVariants;
7639
+ if (resolvedStyles && resolvedStyles.variants) {
7640
+ optionalVariants = resolvedStyles.variants;
7641
+ delete resolvedStyles.variants;
7642
+ }
7643
+ if (optionalVariants) {
7644
+ const variantsStyles = variantsResolver(props, transformVariants(optionalVariants), optionalVariants);
7645
+ return [resolvedStyles, ...variantsStyles];
7646
+ }
7647
+ return resolvedStyles;
7648
+ };
7607
7649
  function createStyled(input = {}) {
7608
7650
  const {
7609
7651
  themeId,
@@ -7670,16 +7712,61 @@ function createStyled(input = {}) {
7670
7712
  // On the server Emotion doesn't use React.forwardRef for creating components, so the created
7671
7713
  // component stays as a function. This condition makes sure that we do not interpolate functions
7672
7714
  // which are basically components used as a selectors.
7673
- return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? props => {
7674
- return stylesArg(_extends$2({}, props, {
7675
- theme: resolveTheme(_extends$2({}, props, {
7676
- defaultTheme,
7677
- themeId
7678
- }))
7679
- }));
7680
- } : stylesArg;
7715
+ if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg) {
7716
+ return props => muiStyledFunctionResolver({
7717
+ styledArg: stylesArg,
7718
+ props,
7719
+ defaultTheme,
7720
+ themeId
7721
+ });
7722
+ }
7723
+ if (isPlainObject(stylesArg)) {
7724
+ let transformedStylesArg = stylesArg;
7725
+ let styledArgVariants;
7726
+ if (stylesArg && stylesArg.variants) {
7727
+ styledArgVariants = stylesArg.variants;
7728
+ delete transformedStylesArg.variants;
7729
+ transformedStylesArg = props => {
7730
+ let result = stylesArg;
7731
+ const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
7732
+ variantStyles.forEach(variantStyle => {
7733
+ result = deepmerge(result, variantStyle);
7734
+ });
7735
+ return result;
7736
+ };
7737
+ }
7738
+ return transformedStylesArg;
7739
+ }
7740
+ return stylesArg;
7681
7741
  }) : [];
7682
7742
  let transformedStyleArg = styleArg;
7743
+ if (isPlainObject(styleArg)) {
7744
+ let styledArgVariants;
7745
+ if (styleArg && styleArg.variants) {
7746
+ styledArgVariants = styleArg.variants;
7747
+ delete transformedStyleArg.variants;
7748
+ transformedStyleArg = props => {
7749
+ let result = styleArg;
7750
+ const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
7751
+ variantStyles.forEach(variantStyle => {
7752
+ result = deepmerge(result, variantStyle);
7753
+ });
7754
+ return result;
7755
+ };
7756
+ }
7757
+ } else if (typeof styleArg === 'function' &&
7758
+ // On the server Emotion doesn't use React.forwardRef for creating components, so the created
7759
+ // component stays as a function. This condition makes sure that we do not interpolate functions
7760
+ // which are basically components used as a selectors.
7761
+ styleArg.__emotion_real !== styleArg) {
7762
+ // If the type is function, we need to define the default theme.
7763
+ transformedStyleArg = props => muiStyledFunctionResolver({
7764
+ styledArg: styleArg,
7765
+ props,
7766
+ defaultTheme,
7767
+ themeId
7768
+ });
7769
+ }
7683
7770
  if (componentName && overridesResolver) {
7684
7771
  expressionsWithDefaultTheme.push(props => {
7685
7772
  const theme = resolveTheme(_extends$2({}, props, {
@@ -7705,7 +7792,7 @@ function createStyled(input = {}) {
7705
7792
  defaultTheme,
7706
7793
  themeId
7707
7794
  }));
7708
- return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
7795
+ return themeVariantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
7709
7796
  });
7710
7797
  }
7711
7798
  if (!skipSx) {
@@ -7717,18 +7804,6 @@ function createStyled(input = {}) {
7717
7804
  // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
7718
7805
  transformedStyleArg = [...styleArg, ...placeholders];
7719
7806
  transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
7720
- } else if (typeof styleArg === 'function' &&
7721
- // On the server Emotion doesn't use React.forwardRef for creating components, so the created
7722
- // component stays as a function. This condition makes sure that we do not interpolate functions
7723
- // which are basically components used as a selectors.
7724
- styleArg.__emotion_real !== styleArg) {
7725
- // If the type is function, we need to define the default theme.
7726
- transformedStyleArg = props => styleArg(_extends$2({}, props, {
7727
- theme: resolveTheme(_extends$2({}, props, {
7728
- defaultTheme,
7729
- themeId
7730
- }))
7731
- }));
7732
7807
  }
7733
7808
  const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
7734
7809
  if (process.env.NODE_ENV !== 'production') {
@@ -9510,25 +9585,18 @@ const components = {
9510
9585
  },
9511
9586
  MuiCheckbox: {
9512
9587
  variants: [{
9513
- props: {
9514
- size: "xsmall"
9515
- },
9516
- style: {
9517
- padding: 2
9518
- }
9519
- }, {
9520
9588
  props: {
9521
9589
  size: "small"
9522
9590
  },
9523
9591
  style: {
9524
- padding: 4
9592
+ padding: 2
9525
9593
  }
9526
9594
  }, {
9527
9595
  props: {
9528
9596
  size: "medium"
9529
9597
  },
9530
9598
  style: {
9531
- padding: 11
9599
+ padding: 4
9532
9600
  }
9533
9601
  }],
9534
9602
  defaultProps: {
@@ -9536,20 +9604,12 @@ const components = {
9536
9604
  }
9537
9605
  },
9538
9606
  MuiChip: {
9539
- variants: [{
9540
- props: {
9541
- size: "xsmall"
9542
- },
9543
- style: {
9544
- height: 16
9545
- }
9546
- }],
9547
9607
  styleOverrides: {
9548
9608
  sizeSmall: {
9549
- height: 24
9609
+ height: 16
9550
9610
  },
9551
9611
  sizeMedium: {
9552
- height: 30
9612
+ height: 24
9553
9613
  },
9554
9614
  root: {
9555
9615
  height: "inherit",
@@ -9589,34 +9649,45 @@ const components = {
9589
9649
  },
9590
9650
  MuiButton: {
9591
9651
  styleOverrides: {
9592
- endIcon: {
9593
- marginLeft: 2
9594
- },
9595
- iconSizeSmall: {
9596
- height: 14,
9597
- width: 14
9598
- },
9599
- iconSizeMedium: {
9600
- height: 18,
9601
- width: 18
9602
- },
9603
- iconSizeLarge: {
9604
- height: 18,
9605
- width: 22
9606
- },
9607
9652
  sizeSmall: {
9608
- height: 26
9653
+ height: 26,
9654
+ ".MuiSvgIcon-fontSizeSmall": {
9655
+ height: 16,
9656
+ width: 16
9657
+ },
9658
+ ".MuiSvgIcon-fontSizeMedium": {
9659
+ height: 18,
9660
+ width: 18
9661
+ },
9662
+ ".MuiSvgIcon-fontSizeLarge": {
9663
+ height: 20,
9664
+ width: 20
9665
+ }
9609
9666
  },
9610
9667
  sizeMedium: {
9611
9668
  height: 32,
9669
+ ".MuiSvgIcon-fontSizeSmall": {
9670
+ height: 18,
9671
+ width: 18
9672
+ },
9612
9673
  ".MuiSvgIcon-fontSizeMedium": {
9613
9674
  height: 18,
9614
9675
  width: 18
9676
+ },
9677
+ ".MuiSvgIcon-fontSizeLarge": {
9678
+ height: 20,
9679
+ width: 20
9615
9680
  }
9616
9681
  },
9617
9682
  sizeLarge: {
9618
- height: 38,
9619
- fontSize: 14,
9683
+ ".MuiSvgIcon-fontSizeSmall": {
9684
+ height: 16,
9685
+ width: 16
9686
+ },
9687
+ ".MuiSvgIcon-fontSizeMedium": {
9688
+ height: 18,
9689
+ width: 18
9690
+ },
9620
9691
  ".MuiSvgIcon-fontSizeLarge": {
9621
9692
  height: 20,
9622
9693
  width: 20
@@ -10226,7 +10297,7 @@ var classof$4 = classof$5;
10226
10297
  var $String$1 = String;
10227
10298
 
10228
10299
  var toString$2 = function (argument) {
10229
- if (classof$4(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
10300
+ if (classof$4(argument) === 'Symbol') throw new TypeError('Cannot convert a Symbol value to a string');
10230
10301
  return $String$1(argument);
10231
10302
  };
10232
10303
 
@@ -10398,7 +10469,7 @@ var $RegExp$1 = global$9.RegExp;
10398
10469
 
10399
10470
  var regexpUnsupportedDotAll = fails$6(function () {
10400
10471
  var re = $RegExp$1('.', 's');
10401
- return !(re.dotAll && re.exec('\n') && re.flags === 's');
10472
+ return !(re.dotAll && re.test('\n') && re.flags === 's');
10402
10473
  });
10403
10474
 
10404
10475
  var fails$5 = fails$h;
@@ -10652,7 +10723,7 @@ var regexpExecAbstract = function (R, S) {
10652
10723
  return result;
10653
10724
  }
10654
10725
  if (classof$3(R) === 'RegExp') return call$a(regexpExec, R, S);
10655
- throw $TypeError$7('RegExp#exec called on incompatible receiver');
10726
+ throw new $TypeError$7('RegExp#exec called on incompatible receiver');
10656
10727
  };
10657
10728
 
10658
10729
  var call$9 = functionCall;
@@ -17163,7 +17234,7 @@ var $TypeError$6 = TypeError;
17163
17234
 
17164
17235
  var aPossiblePrototype$1 = function (argument) {
17165
17236
  if (typeof argument == 'object' || isCallable$6(argument)) return argument;
17166
- throw $TypeError$6("Can't set " + $String(argument) + ' as a prototype');
17237
+ throw new $TypeError$6("Can't set " + $String(argument) + ' as a prototype');
17167
17238
  };
17168
17239
 
17169
17240
  /* eslint-disable no-proto -- safe */
@@ -17585,6 +17656,49 @@ const FooterActionComponent = ({
17585
17656
  }), /*#__PURE__*/React__default.createElement(Box$2, null, labelChangeCounter), renderRightContent));
17586
17657
  };
17587
17658
 
17659
+ const PageHeaderContent = styled$1(Stack$1)(() => ({
17660
+ backgroundColor: "#fff",
17661
+ boxShadow: "0px 1px 3px rgba(24, 39, 75, 0.12), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 2px 1px -2px rgba(24, 39, 75, 0.2)",
17662
+ zIndex: 100,
17663
+ padding: "8px 24px",
17664
+ minHeight: 39
17665
+ }));
17666
+ const PageHeaderComponent = ({
17667
+ title,
17668
+ subtitle,
17669
+ actions,
17670
+ buttonBack,
17671
+ fixed
17672
+ }) => {
17673
+ return /*#__PURE__*/React__default.createElement(ThemeProvider, {
17674
+ theme: SincoTheme
17675
+ }, /*#__PURE__*/React__default.createElement(PageHeaderContent, {
17676
+ position: fixed === true ? "fixed" : "relative",
17677
+ sx: {
17678
+ width: fixed === true ? "-webkit-fill-available" : "inherit"
17679
+ }
17680
+ }, /*#__PURE__*/React__default.createElement(Stack$1, {
17681
+ width: "100%",
17682
+ justifyContent: "space-between",
17683
+ flexDirection: "row",
17684
+ alignItems: "center"
17685
+ }, /*#__PURE__*/React__default.createElement(Stack$1, {
17686
+ gap: 1.5,
17687
+ flexDirection: "row",
17688
+ alignItems: "center"
17689
+ }, buttonBack, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(Typography$1, {
17690
+ variant: "h6",
17691
+ color: "text.primary"
17692
+ }, title), /*#__PURE__*/React__default.createElement(Typography$1, {
17693
+ variant: "caption",
17694
+ color: "text.secondary"
17695
+ }, subtitle))), /*#__PURE__*/React__default.createElement(Stack$1, {
17696
+ gap: 1,
17697
+ alignItems: "center",
17698
+ flexDirection: "row"
17699
+ }, actions))));
17700
+ };
17701
+
17588
17702
  const useProgress = timeProgress => {
17589
17703
  const [progress, setProgress] = useState(100);
17590
17704
  useEffect(() => {
@@ -17606,69 +17720,9 @@ const useProgress = timeProgress => {
17606
17720
  };
17607
17721
  };
17608
17722
 
17609
- const ToastContainer = styled$1(Stack$1)(() => ({
17610
- position: "fixed",
17611
- zIndex: 1400,
17612
- boxShadow: "0px 5px 5px -3px rgba(24, 39, 75, 0.2), 0px 8px 10px 1px rgba(24, 39, 75, 0.14), 0px 3px 14px 2px rgba(24, 39, 75, 0.12)",
17613
- right: 16,
17614
- marginTop: 16
17615
- }));
17616
- const ToastContent = styled$1(Box$2)(({
17617
- theme
17618
- }) => ({
17619
- padding: theme.spacing(1.5),
17620
- gap: theme.spacing(1.5),
17621
- display: "flex",
17622
- alignItems: "center",
17623
- "&.color-error": {
17624
- backgroundColor: "#FEEBEE"
17625
- },
17626
- "&.color-info": {
17627
- backgroundColor: "#E1F5FE"
17628
- },
17629
- "&.color-warning": {
17630
- backgroundColor: "#FFF3E0"
17631
- },
17632
- "&.color-success": {
17633
- backgroundColor: "#E8F5E9"
17634
- }
17635
- }));
17636
- const RippleIcon = styled$1(Stack$1)(({
17637
- theme
17638
- }) => ({
17639
- padding: theme.spacing(1),
17640
- gap: theme.spacing(1),
17641
- height: 20,
17642
- borderRadius: 50,
17643
- "&.ripple-error": {
17644
- backgroundColor: "#D143431F"
17645
- },
17646
- "&.ripple-info": {
17647
- backgroundColor: "#2D9FC51F"
17648
- },
17649
- "&.ripple-warning": {
17650
- backgroundColor: "#FB85001F"
17651
- },
17652
- "&.ripple-success": {
17653
- backgroundColor: "#8FC93A1F"
17654
- }
17655
- }));
17656
- const ToastIconContainer = styled$1(Stack$1)(({
17657
- theme
17658
- }) => ({
17659
- "&.icon-color.color-info": {
17660
- color: theme.palette.info.main
17661
- },
17662
- "&.icon-color.color-error": {
17663
- color: theme.palette.error.main
17664
- },
17665
- "&.icon-color.color-warning": {
17666
- color: theme.palette.warning.main
17667
- },
17668
- "&.icon-color.color-success": {
17669
- color: theme.palette.success.main
17670
- }
17671
- }));
17723
+ function concatenateObjectValues(obj) {
17724
+ return Object.values(obj).join("");
17725
+ }
17672
17726
  const ToastNotificationComponent = toast => {
17673
17727
  const [stateOptions, setStateOptions] = useState(true);
17674
17728
  const [stateToast, setStateToast] = useState(true);
@@ -17697,19 +17751,75 @@ const ToastNotificationComponent = toast => {
17697
17751
  setStateOptions(prevShowOptions => !prevShowOptions);
17698
17752
  };
17699
17753
  useEffect(() => {
17700
- if (progressToast <= 0) setStateToast(false);
17754
+ progressToast <= 0 && setStateToast(false);
17701
17755
  }, [progressToast]);
17702
17756
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, stateToast && /*#__PURE__*/React__default.createElement(Stack$1, {
17703
- height: 105,
17704
17757
  position: "absolute",
17705
17758
  zIndex: 1400
17706
- }, /*#__PURE__*/React__default.createElement(ToastContainer, {
17759
+ }, /*#__PURE__*/React__default.createElement(Stack$1, {
17760
+ sx: {
17761
+ position: "fixed",
17762
+ zIndex: 1400,
17763
+ boxShadow: "0px 5px 5px -3px rgba(24, 39, 75, 0.2), 0px 8px 10px 1px rgba(24, 39, 75, 0.14), 0px 3px 14px 2px rgba(24, 39, 75, 0.12)",
17764
+ right: 16,
17765
+ marginTop: 2
17766
+ },
17707
17767
  position: "fixed"
17708
- }, /*#__PURE__*/React__default.createElement(ToastContent, {
17768
+ }, /*#__PURE__*/React__default.createElement(Box$2, {
17769
+ sx: {
17770
+ padding: SincoTheme.spacing(1.5),
17771
+ gap: SincoTheme.spacing(1.5),
17772
+ display: "flex",
17773
+ alignItems: "center",
17774
+ "&.color-error": {
17775
+ backgroundColor: "#FEEBEE"
17776
+ },
17777
+ "&.color-info": {
17778
+ backgroundColor: "#E1F5FE"
17779
+ },
17780
+ "&.color-warning": {
17781
+ backgroundColor: "#FFF3E0"
17782
+ },
17783
+ "&.color-success": {
17784
+ backgroundColor: "#E8F5E9"
17785
+ }
17786
+ },
17709
17787
  className: `color-${toastColorConfig}`
17710
- }, toast && /*#__PURE__*/React__default.createElement(RippleIcon, {
17788
+ }, toast && /*#__PURE__*/React__default.createElement(Stack$1, {
17789
+ sx: {
17790
+ padding: SincoTheme.spacing(1),
17791
+ gap: SincoTheme.spacing(1),
17792
+ height: 20,
17793
+ borderRadius: 50,
17794
+ "&.ripple-error": {
17795
+ backgroundColor: "#D143431F"
17796
+ },
17797
+ "&.ripple-info": {
17798
+ backgroundColor: "#2D9FC51F"
17799
+ },
17800
+ "&.ripple-warning": {
17801
+ backgroundColor: "#FB85001F"
17802
+ },
17803
+ "&.ripple-success": {
17804
+ backgroundColor: "#8FC93A1F"
17805
+ }
17806
+ },
17711
17807
  className: `ripple-${toast.type || "info"}`
17712
- }, /*#__PURE__*/React__default.createElement(ToastIconContainer, {
17808
+ }, /*#__PURE__*/React__default.createElement(Stack$1, {
17809
+ sx: {
17810
+ "&.icon-color.color-info": {
17811
+ color: SincoTheme.palette.info.main
17812
+ },
17813
+ "&.icon-color.color-error": {
17814
+ color: SincoTheme.palette.error.main
17815
+ },
17816
+ "&.icon-color.color-warning": {
17817
+ color: SincoTheme.palette.warning.main
17818
+ },
17819
+ "&.icon-color.color-success": {
17820
+ color: SincoTheme.palette.success.main
17821
+ }
17822
+ },
17713
17823
  className: `icon-color color-${toast.type || "info"}`
17714
17824
  }, ToastIconConfig)), /*#__PURE__*/React__default.createElement(Divider$1, {
17715
17825
  orientation: "vertical",
@@ -17740,21 +17850,14 @@ const ToastNotificationComponent = toast => {
17740
17850
  fontSize: 11,
17741
17851
  color: "#101840de"
17742
17852
  }
17743
- }, toast.dataOpt.map((element, i) => {
17744
- const keyElement = Object.keys(element);
17745
- let options = "";
17746
- for (let _i = 0; _i < keyElement.length; _i++) {
17747
- options += element[keyElement[_i]];
17748
- }
17749
- return /*#__PURE__*/React__default.createElement("li", {
17750
- style: {
17751
- width: "fit-content"
17752
- },
17753
- key: i
17754
- }, /*#__PURE__*/React__default.createElement(Typography$1, {
17755
- variant: "caption"
17756
- }, options));
17757
- }))), /*#__PURE__*/React__default.createElement(Stack$1, {
17853
+ }, toast.dataOpt.map((element, i) => /*#__PURE__*/React__default.createElement("li", {
17854
+ style: {
17855
+ width: "fit-content"
17856
+ },
17857
+ key: i
17858
+ }, /*#__PURE__*/React__default.createElement(Typography$1, {
17859
+ variant: "caption"
17860
+ }, concatenateObjectValues(element)))))), /*#__PURE__*/React__default.createElement(Stack$1, {
17758
17861
  justifyContent: "flex-end",
17759
17862
  flexDirection: "row",
17760
17863
  alignItems: "flex-end"
@@ -17778,13 +17881,6 @@ const ToastNotificationComponent = toast => {
17778
17881
  }))));
17779
17882
  };
17780
17883
 
17781
- // app.tsx
17782
- const App = () => {
17783
- return /*#__PURE__*/React__default.createElement(React__default.StrictMode, null, /*#__PURE__*/React__default.createElement(ThemeProvider, {
17784
- theme: SincoTheme
17785
- }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ToastNotificationComponent, null))));
17786
- };
17787
-
17788
17884
  var global$6 = global$l;
17789
17885
  var classof$2 = classofRaw$2;
17790
17886
 
@@ -17823,7 +17919,7 @@ var $TypeError$5 = TypeError;
17823
17919
 
17824
17920
  var anInstance$1 = function (it, Prototype) {
17825
17921
  if (isPrototypeOf$1(Prototype, it)) return it;
17826
- throw $TypeError$5('Incorrect invocation');
17922
+ throw new $TypeError$5('Incorrect invocation');
17827
17923
  };
17828
17924
 
17829
17925
  var uncurryThis$2 = functionUncurryThis;
@@ -17838,7 +17934,7 @@ var empty = [];
17838
17934
  var construct = getBuiltIn$2('Reflect', 'construct');
17839
17935
  var constructorRegExp = /^\s*(?:class|function)\b/;
17840
17936
  var exec = uncurryThis$2(constructorRegExp.exec);
17841
- var INCORRECT_TO_STRING = !constructorRegExp.exec(noop);
17937
+ var INCORRECT_TO_STRING = !constructorRegExp.test(noop);
17842
17938
 
17843
17939
  var isConstructorModern = function isConstructor(argument) {
17844
17940
  if (!isCallable$4(argument)) return false;
@@ -17887,7 +17983,7 @@ var $TypeError$4 = TypeError;
17887
17983
  // `Assert: IsConstructor(argument) is true`
17888
17984
  var aConstructor$1 = function (argument) {
17889
17985
  if (isConstructor(argument)) return argument;
17890
- throw $TypeError$4(tryToString$2(argument) + ' is not a constructor');
17986
+ throw new $TypeError$4(tryToString$2(argument) + ' is not a constructor');
17891
17987
  };
17892
17988
 
17893
17989
  var anObject$4 = anObject$d;
@@ -17937,7 +18033,7 @@ var arraySlice$1 = uncurryThis([].slice);
17937
18033
  var $TypeError$3 = TypeError;
17938
18034
 
17939
18035
  var validateArgumentsLength$1 = function (passed, required) {
17940
- if (passed < required) throw $TypeError$3('Not enough arguments');
18036
+ if (passed < required) throw new $TypeError$3('Not enough arguments');
17941
18037
  return passed;
17942
18038
  };
17943
18039
 
@@ -18260,7 +18356,7 @@ var $TypeError$2 = TypeError;
18260
18356
  var PromiseCapability = function (C) {
18261
18357
  var resolve, reject;
18262
18358
  this.promise = new C(function ($$resolve, $$reject) {
18263
- if (resolve !== undefined || reject !== undefined) throw $TypeError$2('Bad Promise constructor');
18359
+ if (resolve !== undefined || reject !== undefined) throw new $TypeError$2('Bad Promise constructor');
18264
18360
  resolve = $$resolve;
18265
18361
  reject = $$reject;
18266
18362
  });
@@ -18353,7 +18449,7 @@ var callReaction = function (reaction, state) {
18353
18449
  }
18354
18450
  }
18355
18451
  if (result === reaction.promise) {
18356
- reject(TypeError$1('Promise-chain cycle'));
18452
+ reject(new TypeError$1('Promise-chain cycle'));
18357
18453
  } else if (then = isThenable(result)) {
18358
18454
  call$6(then, result, resolve, reject);
18359
18455
  } else resolve(result);
@@ -18443,7 +18539,7 @@ var internalResolve = function (state, value, unwrap) {
18443
18539
  state.done = true;
18444
18540
  if (unwrap) state = unwrap;
18445
18541
  try {
18446
- if (state.facade === value) throw TypeError$1("Promise can't be resolved itself");
18542
+ if (state.facade === value) throw new TypeError$1("Promise can't be resolved itself");
18447
18543
  var then = isThenable(value);
18448
18544
  if (then) {
18449
18545
  microtask(function () {
@@ -18597,7 +18693,7 @@ var $TypeError$1 = TypeError;
18597
18693
  var getIterator$1 = function (argument, usingIterator) {
18598
18694
  var iteratorMethod = arguments.length < 2 ? getIteratorMethod$1(argument) : usingIterator;
18599
18695
  if (aCallable$2(iteratorMethod)) return anObject$3(call$5(iteratorMethod, argument));
18600
- throw $TypeError$1(tryToString$1(argument) + ' is not iterable');
18696
+ throw new $TypeError$1(tryToString$1(argument) + ' is not iterable');
18601
18697
  };
18602
18698
 
18603
18699
  var call$4 = functionCall;
@@ -18671,7 +18767,7 @@ var iterate$2 = function (iterable, unboundFunction, options) {
18671
18767
  iterator = iterable;
18672
18768
  } else {
18673
18769
  iterFn = getIteratorMethod(iterable);
18674
- if (!iterFn) throw $TypeError(tryToString(iterable) + ' is not iterable');
18770
+ if (!iterFn) throw new $TypeError(tryToString(iterable) + ' is not iterable');
18675
18771
  // optimisation for array iterators
18676
18772
  if (isArrayIteratorMethod(iterFn)) {
18677
18773
  for (index = 0, length = lengthOfArrayLike(iterable); length > index; index++) {
@@ -23242,4 +23338,4 @@ const useDynamicColor = url => {
23242
23338
  };
23243
23339
  };
23244
23340
 
23245
- export { App, DrawerComponent, DynamicColor, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, SincoTheme, ToastNotificationComponent, useDynamicColor };
23341
+ export { DrawerComponent, DynamicColor, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, PageHeaderComponent, PageHeaderContent, SincoTheme, ToastNotificationComponent, useDynamicColor };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sinco/react",
3
- "version": "1.0.14-rc.3",
3
+ "version": "1.0.14-rc.30",
4
4
  "description": "package for the configuration of mui react sinco",
5
5
  "private": false,
6
6
  "license": "MIT",
@@ -0,0 +1 @@
1
+ export declare const main: () => JSX.Element;
@@ -0,0 +1,13 @@
1
+ import React from "react";
2
+ interface PageheaderProperties {
3
+ title?: string;
4
+ subtitle?: string;
5
+ actions?: React.ReactNode;
6
+ buttonBack?: React.ReactNode;
7
+ fixed?: boolean;
8
+ }
9
+ export declare const PageHeaderContent: import("@emotion/styled").StyledComponent<import("@mui/material").StackOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
10
+ ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
11
+ }, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/material").StackOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
12
+ export declare const PageHeaderComponent: ({ title, subtitle, actions, buttonBack, fixed, }: PageheaderProperties) => JSX.Element;
13
+ export {};
@@ -1,12 +1,10 @@
1
1
  import React from "react";
2
- interface Option {
3
- }
4
2
  interface ToastNotificationProperties {
5
3
  type?: string;
6
4
  subtitle?: string;
7
5
  time?: number | any;
8
6
  title?: string;
9
- dataOpt?: Option[];
7
+ dataOpt?: Array<object>;
10
8
  actions?: React.ReactNode;
11
9
  seeMore?: boolean;
12
10
  }
@@ -1,5 +1,5 @@
1
1
  export * from './EmptyState';
2
2
  export * from './Drawer';
3
3
  export * from './FooterAction';
4
- export * from './ToastNotification';
5
- export * from './App';
4
+ export * from './PageHeader';
5
+ export * from './ToastNofitication';
@@ -1,12 +1,2 @@
1
1
  import { Components } from '@mui/material';
2
- declare module '@mui/material/Chip' {
3
- interface ChipPropsSizeOverrides {
4
- xsmall: true;
5
- }
6
- }
7
- declare module "@mui/material/Checkbox" {
8
- interface CheckboxPropsSizeOverrides {
9
- xsmall: true;
10
- }
11
- }
12
2
  export declare const components: Components;
@@ -1,2 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const App: () => JSX.Element;