@via-profit/ui-kit 0.2.1-alpha.1 → 0.2.1-alpha.3

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 (138) hide show
  1. package/Autocomplete/AutocompleteContainer.d.ts +33 -6
  2. package/Autocomplete/AutocompleteContainer.js +28 -24
  3. package/Autocomplete/AutocompleteItem.d.ts +1 -1
  4. package/Autocomplete/AutocompleteTextField.d.ts +3 -0
  5. package/Autocomplete/AutocompleteTextField.js +63 -1
  6. package/Autocomplete/OverrideMenuList.d.ts +4 -0
  7. package/Autocomplete/OverrideMenuList.js +39 -0
  8. package/Autocomplete/context.d.ts +9 -1
  9. package/Autocomplete/context.js +15 -1
  10. package/Autocomplete/index.js +9 -10
  11. package/Autocomplete2/Autocomplete2.d.ts +12 -0
  12. package/Autocomplete2/Autocomplete2.js +83 -0
  13. package/Autocomplete2/Autocomplete2TextField.d.ts +7 -0
  14. package/Autocomplete2/Autocomplete2TextField.js +39 -0
  15. package/Autocomplete2/index.d.ts +2 -0
  16. package/Autocomplete2/index.js +7 -0
  17. package/Avatar/index.js +1 -1
  18. package/Badge/BadgeDeleteButton.js +6 -6
  19. package/Badge/BadgeOutlined.js +2 -2
  20. package/Badge/BadgeStandard.js +1 -1
  21. package/Button/ButtonOutlined.js +1 -1
  22. package/Button/ButtonPlain.js +1 -1
  23. package/Button/ButtonStandard.js +4 -11
  24. package/Calendar/CalendarCell.js +6 -2
  25. package/Calendar/CalendarComponent.d.ts +226 -0
  26. package/Calendar/CalendarComponent.js +572 -0
  27. package/Calendar/CalendarControlButton.js +16 -9
  28. package/Calendar/CalendarDayBadge.js +1 -1
  29. package/Calendar/CalendarEmptyCell.d.ts +2 -2
  30. package/Calendar/CalendarEmptyCell.js +8 -3
  31. package/Calendar/CalendarHeading.js +2 -1
  32. package/Calendar/CalendarSubheading.js +3 -2
  33. package/Calendar/CalendarWeekDayCell.d.ts +10 -0
  34. package/Calendar/CalendarWeekDayCell.js +32 -0
  35. package/Calendar/CalendarWeekDayWeekNumber.d.ts +7 -0
  36. package/Calendar/CalendarWeekDayWeekNumber.js +38 -0
  37. package/Calendar/CalendarWeekRow.d.ts +2 -2
  38. package/Calendar/CalendarWeekRow.js +2 -1
  39. package/Calendar/CalendarWeekRowButton.d.ts +13 -0
  40. package/Calendar/CalendarWeekRowButton.js +31 -0
  41. package/Calendar/CalendarYearsSelector.d.ts +39 -1
  42. package/Calendar/CalendarYearsSelector.js +52 -16
  43. package/Calendar/IconChevronDown.d.ts +3 -0
  44. package/Calendar/IconChevronDown.js +31 -0
  45. package/Calendar/index.d.ts +7 -224
  46. package/Calendar/index.js +19 -281
  47. package/Calendar/use-calendar.d.ts +1 -1
  48. package/Color/Color.d.ts +138 -0
  49. package/Color/Color.js +324 -0
  50. package/Color/ColorGenerator.d.ts +29 -0
  51. package/Color/ColorGenerator.js +141 -0
  52. package/Color/ColorParser.d.ts +20 -0
  53. package/Color/ColorParser.js +284 -0
  54. package/Color/index.d.ts +4 -122
  55. package/Color/index.js +18 -473
  56. package/DatePicker/index.d.ts +2 -17
  57. package/DatePicker/index.js +47 -61
  58. package/DatePicker/useDatePickerFormat.js +5 -5
  59. package/ErrorBoundary/Fallback.d.ts +3 -0
  60. package/ErrorBoundary/Fallback.js +51 -0
  61. package/ErrorBoundary/RenderError.d.ts +6 -0
  62. package/ErrorBoundary/RenderError.js +80 -0
  63. package/ErrorBoundary/index.d.ts +7 -11
  64. package/ErrorBoundary/index.js +4 -51
  65. package/LoadingIndicator/Spinner.d.ts +5 -3
  66. package/LoadingIndicator/Spinner.js +61 -32
  67. package/LoadingIndicator/index.d.ts +3 -3
  68. package/LoadingIndicator/index.js +15 -2
  69. package/MaskedField/index.d.ts +1 -1
  70. package/MaskedField/index.js +11 -10
  71. package/Menu/AutoHeightWrapper.d.ts +6 -0
  72. package/Menu/AutoHeightWrapper.js +43 -0
  73. package/Menu/MeasuredItem.d.ts +10 -0
  74. package/Menu/MeasuredItem.js +51 -0
  75. package/Menu/MenuContainer.d.ts +51 -18
  76. package/Menu/MenuContainer.js +18 -11
  77. package/Menu/MenuItem.d.ts +24 -7
  78. package/Menu/MenuItem.js +13 -6
  79. package/Menu/MenuList.d.ts +4 -2
  80. package/Menu/MenuList.js +26 -6
  81. package/Menu/VirtualizedItem.d.ts +22 -0
  82. package/Menu/VirtualizedItem.js +69 -0
  83. package/Menu/VirtualizedList.d.ts +18 -0
  84. package/Menu/VirtualizedList.js +28 -0
  85. package/Menu/VirtualizedListComponent.d.ts +20 -0
  86. package/Menu/VirtualizedListComponent.js +305 -0
  87. package/Menu/index.d.ts +3 -1
  88. package/Menu/index.js +2 -0
  89. package/Popper/Popper.d.ts +7 -80
  90. package/Popper/Popper.js +26 -12
  91. package/Popper/PopperContainer.js +1 -1
  92. package/Popper/usePopprer.d.ts +88 -3
  93. package/Popper/usePopprer.js +240 -65
  94. package/Selectbox/SelectboxButton.d.ts +5 -0
  95. package/Selectbox/SelectboxButton.js +48 -8
  96. package/Selectbox/SelectboxButtonWrapper.d.ts +2 -0
  97. package/Selectbox/SelectboxButtonWrapper.js +1 -17
  98. package/Selectbox/SelectboxMenu.d.ts +12 -0
  99. package/Selectbox/SelectboxMenu.js +50 -0
  100. package/Selectbox/index.d.ts +5 -5
  101. package/Selectbox/index.js +115 -97
  102. package/Surface/index.js +1 -1
  103. package/Swiper/Swiper.d.ts +44 -0
  104. package/Swiper/Swiper.js +139 -0
  105. package/Swiper/SwiperContainer.d.ts +7 -0
  106. package/Swiper/SwiperContainer.js +14 -0
  107. package/Swiper/SwiperSlide.d.ts +7 -0
  108. package/Swiper/SwiperSlide.js +55 -0
  109. package/Swiper/SwiperTrack.d.ts +14 -0
  110. package/Swiper/SwiperTrack.js +58 -0
  111. package/Swiper/SwiperWrapper.d.ts +14 -0
  112. package/Swiper/SwiperWrapper.js +60 -0
  113. package/Swiper/index.d.ts +7 -0
  114. package/Swiper/index.js +26 -0
  115. package/Switch/SwitchDot.js +1 -1
  116. package/Switch/SwitchTrack.js +1 -1
  117. package/TextField/TextFieldContainer.d.ts +2 -2
  118. package/TextField/TextFieldContainer.js +5 -3
  119. package/TextField/TextFieldErrorText.d.ts +2 -2
  120. package/TextField/TextFieldErrorText.js +5 -4
  121. package/TextField/TextFieldIconWrapper.d.ts +3 -3
  122. package/TextField/TextFieldIconWrapper.js +5 -3
  123. package/TextField/TextFieldInput.d.ts +2 -2
  124. package/TextField/TextFieldInput.js +6 -4
  125. package/TextField/TextFieldInputWrapper.d.ts +2 -2
  126. package/TextField/TextFieldInputWrapper.js +5 -3
  127. package/TextField/TextFieldLabel.d.ts +2 -2
  128. package/TextField/TextFieldLabel.js +5 -3
  129. package/TextField/TextFieldLabelAsterisk.d.ts +2 -2
  130. package/TextField/TextFieldLabelAsterisk.js +5 -3
  131. package/TextField/index.d.ts +8 -1
  132. package/TextField/index.js +49 -22
  133. package/ThemeProvider/createTheme.js +2 -2
  134. package/package.json +1 -1
  135. package/Calendar/reducer.d.ts +0 -17
  136. package/Calendar/reducer.js +0 -50
  137. /package/Calendar/{IconChevronRight.d.ts → CalendarIconNext.d.ts} +0 -0
  138. /package/Calendar/{IconChevronRight.js → CalendarIconNext.js} +0 -0
@@ -0,0 +1,60 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __rest = (this && this.__rest) || function (s, e) {
26
+ var t = {};
27
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
28
+ t[p] = s[p];
29
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
30
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
31
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
32
+ t[p[i]] = s[p[i]];
33
+ }
34
+ return t;
35
+ };
36
+ var __importDefault = (this && this.__importDefault) || function (mod) {
37
+ return (mod && mod.__esModule) ? mod : { "default": mod };
38
+ };
39
+ Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.StyledWrapper = void 0;
41
+ const React = __importStar(require("react"));
42
+ const styled_1 = __importDefault(require("@emotion/styled"));
43
+ const react_1 = require("@emotion/react");
44
+ exports.StyledWrapper = styled_1.default.div `
45
+ width: 100%;
46
+ height: 100%;
47
+ overflow: hidden;
48
+ user-select: none;
49
+
50
+ ${({ $draggable }) => $draggable &&
51
+ (0, react_1.css) `
52
+ touch-action: pan-y;
53
+ `};
54
+ `;
55
+ const SwiperWrapper = React.forwardRef((props, ref) => {
56
+ const { children, draggable } = props, restProps = __rest(props, ["children", "draggable"]);
57
+ return (React.createElement(exports.StyledWrapper, Object.assign({}, restProps, { ref: ref, "$draggable": draggable }), children));
58
+ });
59
+ SwiperWrapper.displayName = 'SwiperWrapper';
60
+ exports.default = SwiperWrapper;
@@ -0,0 +1,7 @@
1
+ import Swiper from './Swiper';
2
+ export * from './Swiper';
3
+ export * from './SwiperContainer';
4
+ export * from './SwiperSlide';
5
+ export * from './SwiperTrack';
6
+ export * from './SwiperWrapper';
7
+ export default Swiper;
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ var __importDefault = (this && this.__importDefault) || function (mod) {
17
+ return (mod && mod.__esModule) ? mod : { "default": mod };
18
+ };
19
+ Object.defineProperty(exports, "__esModule", { value: true });
20
+ const Swiper_1 = __importDefault(require("./Swiper"));
21
+ __exportStar(require("./Swiper"), exports);
22
+ __exportStar(require("./SwiperContainer"), exports);
23
+ __exportStar(require("./SwiperSlide"), exports);
24
+ __exportStar(require("./SwiperTrack"), exports);
25
+ __exportStar(require("./SwiperWrapper"), exports);
26
+ exports.default = Swiper_1.default;
@@ -123,7 +123,7 @@ const SwitchDot = (props, ref) => {
123
123
  let $color = theme.color.surface;
124
124
  try {
125
125
  if (color) {
126
- $color = new Color_1.default(color);
126
+ $color = Color_1.default.fromString(color);
127
127
  }
128
128
  }
129
129
  catch (err) {
@@ -59,7 +59,7 @@ const SwitchTrack = (props, ref) => {
59
59
  let $color = theme.color.surface;
60
60
  try {
61
61
  if (color) {
62
- $color = new Color_1.default(color);
62
+ $color = Color_1.default.fromString(color);
63
63
  }
64
64
  }
65
65
  catch (err) {
@@ -4,5 +4,5 @@ export interface TextFieldContainerProps extends React.InputHTMLAttributes<HTMLD
4
4
  readonly focused?: boolean;
5
5
  readonly error?: boolean;
6
6
  }
7
- declare const _default: React.ForwardRefExoticComponent<TextFieldContainerProps & React.RefAttributes<HTMLDivElement>>;
8
- export default _default;
7
+ export declare const TextFieldContainer: React.ForwardRefExoticComponent<TextFieldContainerProps & React.RefAttributes<HTMLDivElement>>;
8
+ export default TextFieldContainer;
@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
37
37
  return (mod && mod.__esModule) ? mod : { "default": mod };
38
38
  };
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.TextFieldContainer = void 0;
40
41
  const React = __importStar(require("react"));
41
42
  const styled_1 = __importDefault(require("@emotion/styled"));
42
43
  const StyledTextFieldContainer = styled_1.default.div `
@@ -46,8 +47,9 @@ const StyledTextFieldContainer = styled_1.default.div `
46
47
  max-width: ${({ $fullWidth }) => ($fullWidth ? '100%' : '16em')};
47
48
  vertical-align: top;
48
49
  `;
49
- const TextFieldContainer = (props, ref) => {
50
+ exports.TextFieldContainer = React.forwardRef((props, ref) => {
50
51
  const { children, fullWidth, focused, error } = props, nativeProps = __rest(props, ["children", "fullWidth", "focused", "error"]);
51
52
  return (React.createElement(StyledTextFieldContainer, Object.assign({}, nativeProps, { "$fullWidth": fullWidth, "$focused": focused, "$error": error, ref: ref }), children));
52
- };
53
- exports.default = React.forwardRef(TextFieldContainer);
53
+ });
54
+ exports.TextFieldContainer.displayName = 'TextFieldContainer';
55
+ exports.default = exports.TextFieldContainer;
@@ -2,5 +2,5 @@ import * as React from 'react';
2
2
  export interface TextFieldErrorTextProps extends React.HTMLAttributes<HTMLDivElement> {
3
3
  readonly error?: boolean;
4
4
  }
5
- declare const _default: React.ForwardRefExoticComponent<TextFieldErrorTextProps & React.RefAttributes<HTMLDivElement>>;
6
- export default _default;
5
+ export declare const TextFieldErrorText: React.ForwardRefExoticComponent<TextFieldErrorTextProps & React.RefAttributes<HTMLDivElement>>;
6
+ export default TextFieldErrorText;
@@ -37,12 +37,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
37
37
  return (mod && mod.__esModule) ? mod : { "default": mod };
38
38
  };
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.TextFieldErrorText = void 0;
40
41
  const React = __importStar(require("react"));
41
42
  const styled_1 = __importDefault(require("@emotion/styled"));
42
43
  const NoSSR_1 = __importDefault(require("../NoSSR"));
43
44
  const ErrorTextContainer = styled_1.default.div `
44
45
  margin-left: 0.5em;
45
- max-height: 0;
46
46
  max-height: ${({ $maxHeight }) => typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
47
47
  transition: max-height 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
48
48
  overflow: hidden;
@@ -54,7 +54,7 @@ const ErrorTextInner = styled_1.default.div `
54
54
  opacity: ${({ $error }) => ($error ? 1 : 0)};
55
55
  transition: all 240ms 240ms ease-out;
56
56
  `;
57
- const TextFieldErrorText = (props, ref) => {
57
+ exports.TextFieldErrorText = React.forwardRef((props, ref) => {
58
58
  const { children, error } = props, nativeProps = __rest(props, ["children", "error"]);
59
59
  const innerRef = React.useRef(null);
60
60
  const [maxHeight, setMaxHeight] = React.useState('initial');
@@ -72,5 +72,6 @@ const TextFieldErrorText = (props, ref) => {
72
72
  }, [children]);
73
73
  return (React.createElement(ErrorTextContainer, Object.assign({}, nativeProps, { "$maxHeight": error ? maxHeight : 0, ref: ref }),
74
74
  React.createElement(ErrorTextInner, { ref: innerRef, "$error": Boolean(error) }, children ? React.createElement(NoSSR_1.default, null, children) : React.createElement(React.Fragment, null, "\u00A0"))));
75
- };
76
- exports.default = React.forwardRef(TextFieldErrorText);
75
+ });
76
+ exports.TextFieldErrorText.displayName = 'TextFieldErrorText';
77
+ exports.default = exports.TextFieldErrorText;
@@ -7,12 +7,12 @@ export type TextFieldIconWrapperProps = React.InputHTMLAttributes<HTMLDivElement
7
7
  readonly error?: boolean;
8
8
  readonly focused?: boolean;
9
9
  };
10
- declare const _default: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLDivElement> & {
10
+ export declare const TextFieldIconWrapper: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLDivElement> & {
11
11
  /**
12
12
  * Icon position
13
13
  */
14
- readonly position: "start" | "end";
14
+ readonly position: 'start' | 'end';
15
15
  readonly error?: boolean | undefined;
16
16
  readonly focused?: boolean | undefined;
17
17
  } & React.RefAttributes<HTMLDivElement>>;
18
- export default _default;
18
+ export default TextFieldIconWrapper;
@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
37
37
  return (mod && mod.__esModule) ? mod : { "default": mod };
38
38
  };
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.TextFieldIconWrapper = void 0;
40
41
  const React = __importStar(require("react"));
41
42
  const styled_1 = __importDefault(require("@emotion/styled"));
42
43
  const react_1 = require("@emotion/react");
@@ -66,8 +67,9 @@ const IconWrapper = styled_1.default.div `
66
67
  box-shadow: none;
67
68
  }
68
69
  `;
69
- const TextFieldIconWrapper = (props, ref) => {
70
+ exports.TextFieldIconWrapper = React.forwardRef((props, ref) => {
70
71
  const { children, position, focused, error } = props, nativeProps = __rest(props, ["children", "position", "focused", "error"]);
71
72
  return (React.createElement(IconWrapper, Object.assign({}, nativeProps, { "$position": position, "$error": error, "$focused": focused, ref: ref }), children));
72
- };
73
- exports.default = React.forwardRef(TextFieldIconWrapper);
73
+ });
74
+ exports.TextFieldIconWrapper.displayName = 'TextFieldIconWrapper';
75
+ exports.default = exports.TextFieldIconWrapper;
@@ -3,5 +3,5 @@ export interface TextFieldInputProps extends React.InputHTMLAttributes<HTMLInput
3
3
  readonly hasStartIcon: boolean;
4
4
  readonly hasEndIcon: boolean;
5
5
  }
6
- declare const _default: React.ForwardRefExoticComponent<TextFieldInputProps & React.RefAttributes<HTMLInputElement>>;
7
- export default _default;
6
+ export declare const TextFieldInput: React.ForwardRefExoticComponent<TextFieldInputProps & React.RefAttributes<HTMLInputElement>>;
7
+ export default TextFieldInput;
@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
37
37
  return (mod && mod.__esModule) ? mod : { "default": mod };
38
38
  };
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.TextFieldInput = void 0;
40
41
  const React = __importStar(require("react"));
41
42
  const styled_1 = __importDefault(require("@emotion/styled"));
42
43
  const react_1 = require("@emotion/react");
@@ -64,8 +65,9 @@ const Input = styled_1.default.input `
64
65
  font-style: italic;
65
66
  }
66
67
  `;
67
- const TextFieldInput = (props, ref) => {
68
+ exports.TextFieldInput = React.forwardRef((props, ref) => {
68
69
  const { hasEndIcon, hasStartIcon } = props, nativeProps = __rest(props, ["hasEndIcon", "hasStartIcon"]);
69
- return React.createElement(Input, Object.assign({}, nativeProps, { "$hasEndIcon": hasEndIcon, "$hasStartIcon": hasStartIcon, ref: ref }));
70
- };
71
- exports.default = React.forwardRef(TextFieldInput);
70
+ return (React.createElement(Input, Object.assign({}, nativeProps, { "$hasEndIcon": hasEndIcon, "$hasStartIcon": hasStartIcon, ref: ref })));
71
+ });
72
+ exports.TextFieldInput.displayName = 'TextFieldInput';
73
+ exports.default = exports.TextFieldInput;
@@ -5,10 +5,10 @@ export type TextFieldInputWrapperProps = React.HTMLAttributes<HTMLDivElement> &
5
5
  readonly readOnly?: boolean;
6
6
  readonly focused?: boolean;
7
7
  };
8
- declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
8
+ export declare const TextFieldInputWrapper: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
9
9
  readonly error?: boolean | undefined;
10
10
  readonly fullWidth?: boolean | undefined;
11
11
  readonly readOnly?: boolean | undefined;
12
12
  readonly focused?: boolean | undefined;
13
13
  } & React.RefAttributes<HTMLDivElement>>;
14
- export default _default;
14
+ export default TextFieldInputWrapper;
@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
37
37
  return (mod && mod.__esModule) ? mod : { "default": mod };
38
38
  };
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.TextFieldInputWrapper = void 0;
40
41
  const React = __importStar(require("react"));
41
42
  const styled_1 = __importDefault(require("@emotion/styled"));
42
43
  const react_1 = require("@emotion/react");
@@ -69,8 +70,9 @@ const Wrapper = styled_1.default.div `
69
70
  }
70
71
  `}
71
72
  `;
72
- const TextFieldInputWrapper = (props, ref) => {
73
+ exports.TextFieldInputWrapper = React.forwardRef((props, ref) => {
73
74
  const { focused, error, readOnly, fullWidth, children } = props, nativeProps = __rest(props, ["focused", "error", "readOnly", "fullWidth", "children"]);
74
75
  return (React.createElement(Wrapper, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, "$readOnly": readOnly, "$fullWidth": Boolean(fullWidth), ref: ref }), children));
75
- };
76
- exports.default = React.forwardRef(TextFieldInputWrapper);
76
+ });
77
+ exports.TextFieldInputWrapper.displayName = 'TextFieldInputWrapper';
78
+ exports.default = exports.TextFieldInputWrapper;
@@ -3,5 +3,5 @@ export interface TextFieldLabelProps extends React.LabelHTMLAttributes<HTMLLabel
3
3
  readonly error?: boolean;
4
4
  readonly focused?: boolean;
5
5
  }
6
- declare const _default: React.ForwardRefExoticComponent<TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
7
- export default _default;
6
+ export declare const TextFieldLabel: React.ForwardRefExoticComponent<TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
7
+ export default TextFieldLabel;
@@ -37,14 +37,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
37
37
  return (mod && mod.__esModule) ? mod : { "default": mod };
38
38
  };
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.TextFieldLabel = void 0;
40
41
  const React = __importStar(require("react"));
41
42
  const styled_1 = __importDefault(require("@emotion/styled"));
42
43
  const Label = styled_1.default.label `
43
44
  font-size: 0.8em;
44
45
  margin-bottom: 0.2em;
45
46
  `;
46
- const TextFieldLabel = (props, ref) => {
47
+ exports.TextFieldLabel = React.forwardRef((props, ref) => {
47
48
  const { children, error, focused } = props, nativeProps = __rest(props, ["children", "error", "focused"]);
48
49
  return (React.createElement(Label, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, ref: ref }), children));
49
- };
50
- exports.default = React.forwardRef(TextFieldLabel);
50
+ });
51
+ exports.TextFieldLabel.displayName = 'TextFieldLabel';
52
+ exports.default = exports.TextFieldLabel;
@@ -9,5 +9,5 @@ export interface TextFieldLabelAsteriskProps extends React.HTMLAttributes<HTMLSp
9
9
  */
10
10
  readonly focused?: boolean;
11
11
  }
12
- declare const _default: React.ForwardRefExoticComponent<TextFieldLabelAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
13
- export default _default;
12
+ export declare const TextFieldLabelAsterisk: React.ForwardRefExoticComponent<TextFieldLabelAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
13
+ export default TextFieldLabelAsterisk;
@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
37
37
  return (mod && mod.__esModule) ? mod : { "default": mod };
38
38
  };
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.TextFieldLabelAsterisk = void 0;
40
41
  const React = __importStar(require("react"));
41
42
  const styled_1 = __importDefault(require("@emotion/styled"));
42
43
  const Asterisk = styled_1.default.span `
@@ -44,8 +45,9 @@ const Asterisk = styled_1.default.span `
44
45
  margin-left: 0.2em;
45
46
  color: ${({ theme }) => theme.color.error.toString()};
46
47
  `;
47
- const TextFieldLabelAsterisk = (props, ref) => {
48
+ exports.TextFieldLabelAsterisk = React.forwardRef((props, ref) => {
48
49
  const { children, error, focused } = props, nativeProps = __rest(props, ["children", "error", "focused"]);
49
50
  return (React.createElement(Asterisk, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, ref: ref }), children));
50
- };
51
- exports.default = React.forwardRef(TextFieldLabelAsterisk);
51
+ });
52
+ exports.TextFieldLabelAsterisk.displayName = 'TextFieldLabelAsterisk';
53
+ exports.default = exports.TextFieldLabelAsterisk;
@@ -6,6 +6,13 @@ import { TextFieldInputWrapperProps } from './TextFieldInputWrapper';
6
6
  import { TextFieldInputProps } from './TextFieldInput';
7
7
  import { TextFieldErrorTextProps } from './TextFieldErrorText';
8
8
  import { TextFieldIconWrapperProps } from './TextFieldIconWrapper';
9
+ export * from './TextFieldContainer';
10
+ export * from './TextFieldLabel';
11
+ export * from './TextFieldLabelAsterisk';
12
+ export * from './TextFieldInputWrapper';
13
+ export * from './TextFieldInput';
14
+ export * from './TextFieldErrorText';
15
+ export * from './TextFieldIconWrapper';
9
16
  export interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
10
17
  /**
11
18
  * If true then `errorText` value will be displayed under the TextField element
@@ -76,5 +83,5 @@ export interface TextFieldOverrides {
76
83
  */
77
84
  readonly Container?: React.ComponentType<TextFieldContainerProps & React.RefAttributes<HTMLDivElement>>;
78
85
  }
79
- declare const _default: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>;
86
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>>;
80
87
  export default _default;
@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
26
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
27
+ };
25
28
  var __rest = (this && this.__rest) || function (s, e) {
26
29
  var t = {};
27
30
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -45,7 +48,23 @@ const TextFieldInputWrapper_1 = __importDefault(require("./TextFieldInputWrapper
45
48
  const TextFieldInput_1 = __importDefault(require("./TextFieldInput"));
46
49
  const TextFieldErrorText_1 = __importDefault(require("./TextFieldErrorText"));
47
50
  const TextFieldIconWrapper_1 = __importDefault(require("./TextFieldIconWrapper"));
48
- const TextField = (props, ref) => {
51
+ __exportStar(require("./TextFieldContainer"), exports);
52
+ __exportStar(require("./TextFieldLabel"), exports);
53
+ __exportStar(require("./TextFieldLabelAsterisk"), exports);
54
+ __exportStar(require("./TextFieldInputWrapper"), exports);
55
+ __exportStar(require("./TextFieldInput"), exports);
56
+ __exportStar(require("./TextFieldErrorText"), exports);
57
+ __exportStar(require("./TextFieldIconWrapper"), exports);
58
+ const defailtOverrides = {
59
+ Label: TextFieldLabel_1.default,
60
+ Input: TextFieldInput_1.default,
61
+ Asterisk: TextFieldLabelAsterisk_1.default,
62
+ Container: TextFieldContainer_1.default,
63
+ ErrorText: TextFieldErrorText_1.default,
64
+ IconWrapper: TextFieldIconWrapper_1.default,
65
+ InputWrapper: TextFieldInputWrapper_1.default,
66
+ };
67
+ const TextField = React.forwardRef((props, ref) => {
49
68
  const { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = props, nativeInputProps = __rest(props, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
50
69
  const [focused, setFocused] = React.useState(false);
51
70
  const inputID = React.useMemo(() => {
@@ -53,19 +72,21 @@ const TextField = (props, ref) => {
53
72
  return id;
54
73
  }
55
74
  const u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
56
- const guid = [
75
+ return [
57
76
  u.substring(0, 8),
58
77
  u.substring(8, 12),
59
78
  '4000-8' + u.substring(13, 16),
60
79
  u.substring(16, 28),
61
80
  ].join('-');
62
- return guid;
63
81
  }, [id]);
82
+ const stableOnChange = React.useCallback(onChange ? onChange : () => undefined, [onChange]); // уже есть
83
+ // const stableOnFocus = React.useCallback(onFocus, [onFocus]); // уже есть
84
+ // const stableOnBlur = React.useCallback(onBlur, [onBlur]); // уже есть
64
85
  const inputChange = React.useCallback(event => {
65
- if (onChange) {
66
- onChange(event);
86
+ if (stableOnChange) {
87
+ stableOnChange(event);
67
88
  }
68
- }, [onChange]);
89
+ }, [stableOnChange]);
69
90
  const inputFocus = React.useCallback(event => {
70
91
  setFocused(true);
71
92
  if (typeof onFocus === 'function') {
@@ -80,23 +101,29 @@ const TextField = (props, ref) => {
80
101
  }, [onBlur]);
81
102
  const hasStartIcon = React.useMemo(() => typeof startIcon !== 'undefined' && startIcon !== null, [startIcon]);
82
103
  const hasEndIcon = React.useMemo(() => typeof endIcon !== 'undefined' && endIcon !== null, [endIcon]);
83
- const overridesMap = React.useMemo(() => ({
84
- Label: (overrides === null || overrides === void 0 ? void 0 : overrides.Label) || TextFieldLabel_1.default,
85
- Input: (overrides === null || overrides === void 0 ? void 0 : overrides.Input) || TextFieldInput_1.default,
86
- Asterisk: (overrides === null || overrides === void 0 ? void 0 : overrides.Asterisk) || TextFieldLabelAsterisk_1.default,
87
- Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || TextFieldContainer_1.default,
88
- ErrorText: (overrides === null || overrides === void 0 ? void 0 : overrides.ErrorText) || TextFieldErrorText_1.default,
89
- IconWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.IconWrapper) || TextFieldIconWrapper_1.default,
90
- InputWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.InputWrapper) || TextFieldInputWrapper_1.default,
91
- }), [overrides]);
92
- return (React.createElement(overridesMap.Container, { ref: ref, fullWidth: fullWidth, className: className, style: style, focused: focused },
93
- typeof label !== 'undefined' && label !== null && (React.createElement(overridesMap.Label, { htmlFor: inputID, error: error },
104
+ const overridesMap = React.useMemo(() => (Object.assign(Object.assign({}, defailtOverrides), overrides)), [overrides]);
105
+ const renderAsterisk = React.useCallback(() => {
106
+ if (!requiredAsterisk) {
107
+ return null;
108
+ }
109
+ return (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk));
110
+ }, [overridesMap, requiredAsterisk]);
111
+ const renderLabel = React.useCallback(() => {
112
+ if (!label) {
113
+ return null;
114
+ }
115
+ return (React.createElement(overridesMap.Label, { htmlFor: inputID, error: error },
94
116
  label,
95
- typeof requiredAsterisk !== 'undefined' && requiredAsterisk !== null && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
117
+ renderAsterisk()));
118
+ }, [error, inputID, label, overridesMap, renderAsterisk]);
119
+ const renderIcon = React.useCallback((position, icon) => (React.createElement(overridesMap.IconWrapper, { position: position }, icon)), [overridesMap]);
120
+ return (React.createElement(overridesMap.Container, { ref: ref, fullWidth: fullWidth, className: className, style: style, focused: focused },
121
+ renderLabel(),
96
122
  React.createElement(overridesMap.InputWrapper, { error: error, focused: focused, fullWidth: fullWidth },
97
- hasStartIcon && (React.createElement(overridesMap.IconWrapper, { position: "start" }, startIcon)),
123
+ hasStartIcon && renderIcon('start', startIcon),
98
124
  React.createElement(overridesMap.Input, Object.assign({}, nativeInputProps, { hasStartIcon: hasStartIcon, hasEndIcon: hasEndIcon, ref: inputRef, id: inputID, onChange: inputChange, onFocus: inputFocus, onBlur: inputBlur })),
99
- hasEndIcon && (React.createElement(overridesMap.IconWrapper, { position: "end" }, endIcon))),
125
+ hasEndIcon && renderIcon('end', endIcon)),
100
126
  React.createElement(overridesMap.ErrorText, { error: error }, errorText)));
101
- };
102
- exports.default = React.forwardRef(TextField);
127
+ });
128
+ TextField.displayName = 'TextField';
129
+ exports.default = React.memo(TextField);
@@ -39,9 +39,9 @@ const createTheme = overrides => {
39
39
  successContrast: '#ffffff',
40
40
  };
41
41
  Object.entries(Object.assign(Object.assign({}, defaultColors), color)).forEach(([colorName, colorValue]) => {
42
- theme.color[colorName] = new Color_1.default(colorValue);
42
+ theme.color[colorName] = Color_1.default.fromString(colorValue);
43
43
  });
44
- theme.color.test = new Color_1.default('red');
44
+ theme.color.test = Color_1.default.fromString('red');
45
45
  return theme;
46
46
  };
47
47
  exports.createTheme = createTheme;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@via-profit/ui-kit",
3
- "version": "0.2.1-alpha.1",
3
+ "version": "0.2.1-alpha.3",
4
4
  "description": "UI Kit",
5
5
  "repository": {
6
6
  "type": "git",
@@ -1,17 +0,0 @@
1
- import { CalendarValue } from './use-calendar';
2
- export type State<Range extends boolean | undefined = undefined> = {
3
- readonly calendarDate: Date;
4
- readonly calendarValue: CalendarValue<Range>;
5
- readonly calendarCurrentView: CalendarView;
6
- readonly calendarViewVariants: readonly CalendarView[];
7
- };
8
- export type CalendarView = 'days' | 'months' | 'years';
9
- export declare const createDefaultState: <Range_1 extends boolean | undefined = undefined>(range?: Range_1 | undefined, params?: {
10
- views?: readonly CalendarView[];
11
- initialView?: CalendarView;
12
- }) => State<Range_1>;
13
- export type Action<Range extends boolean | undefined = undefined> = {
14
- readonly type: 'setPartial';
15
- readonly payload: Partial<State<Range>>;
16
- };
17
- export declare const reducer: <Range_1 extends boolean | undefined = undefined>(state: State<Range_1>, action: Action<Range_1>) => State<Range_1>;
@@ -1,50 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.reducer = exports.createDefaultState = void 0;
4
- const createDefaultState = (range, params) => {
5
- const { views, initialView } = params || {};
6
- const currentDate = new Date();
7
- const nextDate = new Date();
8
- nextDate.setDate(nextDate.getDate() + 3);
9
- let calendarViewVariants = ['days', 'months', 'years'];
10
- let calendarCurrentView = 'days';
11
- if (views && typeof initialView === 'string') {
12
- if (!views.includes(initialView)) {
13
- throw new Error(`Property views must be contained prperty initialView`);
14
- }
15
- calendarCurrentView = initialView;
16
- calendarViewVariants = views;
17
- }
18
- if (views && typeof initialView !== 'string') {
19
- if (views.includes('days')) {
20
- calendarCurrentView = 'days';
21
- calendarViewVariants = views;
22
- }
23
- else {
24
- calendarCurrentView = views[0];
25
- calendarViewVariants = views;
26
- }
27
- }
28
- if (!views && typeof initialView === 'string') {
29
- calendarViewVariants = ['days', 'months', 'years'];
30
- calendarCurrentView = initialView;
31
- }
32
- return {
33
- calendarValue: range
34
- ? [currentDate, nextDate]
35
- : new Date(),
36
- calendarDate: range ? currentDate : new Date(),
37
- calendarCurrentView,
38
- calendarViewVariants,
39
- };
40
- };
41
- exports.createDefaultState = createDefaultState;
42
- const reducer = (state, action) => {
43
- switch (action.type) {
44
- case 'setPartial':
45
- return Object.assign(Object.assign({}, state), action.payload);
46
- default:
47
- return state;
48
- }
49
- };
50
- exports.reducer = reducer;