@invoicebox/ui 0.1.0-alpha.4 → 0.1.0-alpha.41

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 (142) hide show
  1. package/README.md +15 -1
  2. package/dist/breakpoints/index.d.ts +7 -0
  3. package/dist/breakpoints/index.js +13 -0
  4. package/dist/components/common/Arrow/components/StyledSvg/index.d.ts +11 -0
  5. package/dist/components/common/Arrow/components/StyledSvg/index.js +31 -0
  6. package/dist/components/common/Arrow/components/StyledSvg/index.stories.d.ts +5 -0
  7. package/dist/components/common/Arrow/components/StyledSvg/index.stories.js +29 -0
  8. package/dist/components/common/Arrow/components/Svg/index.d.ts +6 -0
  9. package/dist/components/common/Arrow/components/Svg/index.js +26 -0
  10. package/dist/components/common/Arrow/components/Svg/index.stories.d.ts +6 -0
  11. package/dist/components/common/Arrow/components/Svg/index.stories.js +21 -0
  12. package/dist/components/common/Arrow/index.d.ts +11 -0
  13. package/dist/components/common/Arrow/index.js +34 -0
  14. package/dist/components/common/Arrow/index.stories.d.ts +6 -0
  15. package/dist/components/common/Arrow/index.stories.js +22 -0
  16. package/dist/components/common/Arrow/palette.d.ts +8 -0
  17. package/dist/components/common/Arrow/palette.js +16 -0
  18. package/dist/components/common/Dropdown/index.d.ts +14 -0
  19. package/dist/components/common/Dropdown/index.js +117 -0
  20. package/dist/components/common/Dropdown/index.stories.d.ts +6 -0
  21. package/dist/components/common/Dropdown/index.stories.js +59 -0
  22. package/dist/components/common/Dropdown/palette.d.ts +6 -0
  23. package/dist/components/common/Dropdown/palette.js +14 -0
  24. package/dist/components/common/Dropdown/styles.d.ts +14 -0
  25. package/dist/components/common/Dropdown/styles.js +47 -0
  26. package/dist/components/common/InvoiceboxLoader/index.d.ts +5 -0
  27. package/dist/components/common/InvoiceboxLoader/index.js +878 -0
  28. package/dist/components/common/InvoiceboxLoader/index.stories.d.ts +5 -0
  29. package/dist/components/common/InvoiceboxLoader/index.stories.js +18 -0
  30. package/dist/components/common/InvoiceboxSpinner/index.d.ts +8 -0
  31. package/dist/components/common/InvoiceboxSpinner/index.js +41 -0
  32. package/dist/components/common/InvoiceboxSpinner/index.stories.d.ts +10 -0
  33. package/dist/components/common/InvoiceboxSpinner/index.stories.js +19 -0
  34. package/dist/components/common/InvoiceboxSpinner/palette.d.ts +8 -0
  35. package/dist/components/common/InvoiceboxSpinner/palette.js +14 -0
  36. package/dist/components/common/InvoiceboxSpinner/styles.d.ts +4 -0
  37. package/dist/components/common/InvoiceboxSpinner/styles.js +19 -0
  38. package/dist/components/common/Scrollbar/index.d.ts +6 -0
  39. package/dist/components/common/Scrollbar/index.js +69 -0
  40. package/dist/components/common/Scrollbar/index.stories.d.ts +12 -0
  41. package/dist/components/common/Scrollbar/index.stories.js +36 -0
  42. package/dist/components/common/Scrollbar/palette.d.ts +5 -0
  43. package/dist/components/common/Scrollbar/palette.js +11 -0
  44. package/dist/components/common/SecondaryButton/index.d.ts +19 -0
  45. package/dist/components/common/SecondaryButton/index.js +51 -0
  46. package/dist/components/common/SecondaryButton/index.stories.d.ts +11 -0
  47. package/dist/components/common/SecondaryButton/index.stories.js +38 -0
  48. package/dist/components/common/SecondaryButton/palette.d.ts +8 -0
  49. package/dist/components/common/SecondaryButton/palette.js +14 -0
  50. package/dist/components/common/SecondaryButton/styles.d.ts +11 -0
  51. package/dist/components/common/SecondaryButton/styles.js +46 -0
  52. package/dist/components/common/Skeleton/index.d.ts +8 -0
  53. package/dist/components/common/Skeleton/index.js +28 -0
  54. package/dist/components/common/Skeleton/index.stories.d.ts +11 -0
  55. package/dist/components/common/Skeleton/index.stories.js +29 -0
  56. package/dist/components/common/Skeleton/palette.d.ts +6 -0
  57. package/dist/components/common/Skeleton/palette.js +12 -0
  58. package/dist/components/common/Skeleton/styles.d.ts +10 -0
  59. package/dist/components/common/Skeleton/styles.js +37 -0
  60. package/dist/components/common/Typography/docs.stories.d.ts +6 -0
  61. package/dist/components/common/Typography/docs.stories.js +20 -0
  62. package/dist/components/common/Typography/index.d.ts +26 -0
  63. package/dist/components/common/Typography/index.js +49 -0
  64. package/dist/components/common/Typography/index.stories.d.ts +11 -0
  65. package/dist/components/common/Typography/index.stories.js +35 -0
  66. package/dist/components/common/Typography/styles.d.ts +5 -0
  67. package/dist/components/common/Typography/styles.js +16 -0
  68. package/dist/components/common/Typography/typography.d.ts +20 -0
  69. package/dist/components/common/Typography/typography.js +28 -0
  70. package/dist/components/form/InputLabel/index.d.ts +10 -0
  71. package/dist/components/form/InputLabel/index.js +32 -0
  72. package/dist/components/form/InputLabel/index.stories.d.ts +5 -0
  73. package/dist/components/form/InputLabel/index.stories.js +33 -0
  74. package/dist/components/form/InputLabel/palette.d.ts +7 -0
  75. package/dist/components/form/InputLabel/palette.js +13 -0
  76. package/dist/components/form/InputLabel/styles.d.ts +12 -0
  77. package/dist/components/form/InputLabel/styles.js +40 -0
  78. package/dist/components/form/PositiveIntegerInput/hooks/useFilters.d.ts +6 -0
  79. package/dist/components/form/PositiveIntegerInput/hooks/useFilters.js +21 -0
  80. package/dist/components/form/PositiveIntegerInput/hooks/useIncrement.d.ts +4 -0
  81. package/dist/components/form/PositiveIntegerInput/hooks/useIncrement.js +22 -0
  82. package/dist/components/form/PositiveIntegerInput/hooks/useIncrementDisabledFlags.d.ts +9 -0
  83. package/dist/components/form/PositiveIntegerInput/hooks/useIncrementDisabledFlags.js +24 -0
  84. package/dist/components/form/PositiveIntegerInput/hooks/useNormalizers.d.ts +4 -0
  85. package/dist/components/form/PositiveIntegerInput/hooks/useNormalizers.js +22 -0
  86. package/dist/components/form/PositiveIntegerInput/index.d.ts +10 -0
  87. package/dist/components/form/PositiveIntegerInput/index.js +94 -0
  88. package/dist/components/form/PositiveIntegerInput/index.stories.d.ts +5 -0
  89. package/dist/components/form/PositiveIntegerInput/index.stories.js +49 -0
  90. package/dist/components/form/PositiveIntegerInput/styles.d.ts +5 -0
  91. package/dist/components/form/PositiveIntegerInput/styles.js +21 -0
  92. package/dist/components/form/PureInput/index.d.ts +12 -0
  93. package/dist/components/form/PureInput/index.js +43 -0
  94. package/dist/components/form/PureInput/index.stories.d.ts +5 -0
  95. package/dist/components/form/PureInput/index.stories.js +23 -0
  96. package/dist/components/form/PureInput/palette.d.ts +10 -0
  97. package/dist/components/form/PureInput/palette.js +18 -0
  98. package/dist/components/form/PureInput/styles.d.ts +10 -0
  99. package/dist/components/form/PureInput/styles.js +34 -0
  100. package/dist/components/form/Select/components/Input/index.d.ts +6 -0
  101. package/dist/components/form/Select/components/Input/index.js +42 -0
  102. package/dist/components/form/Select/components/Input/index.stories.d.ts +5 -0
  103. package/dist/components/form/Select/components/Input/index.stories.js +27 -0
  104. package/dist/components/form/Select/components/Input/styles.d.ts +2 -0
  105. package/dist/components/form/Select/components/Input/styles.js +12 -0
  106. package/dist/components/form/Select/index.d.ts +11 -0
  107. package/dist/components/form/Select/index.js +122 -0
  108. package/dist/components/form/Select/index.stories.d.ts +5 -0
  109. package/dist/components/form/Select/index.stories.js +83 -0
  110. package/dist/components/form/Select/styles.d.ts +5 -0
  111. package/dist/components/form/Select/styles.js +25 -0
  112. package/dist/hooks/useClickOutside.d.ts +2 -0
  113. package/dist/hooks/useClickOutside.js +22 -0
  114. package/dist/hooks/useInputFocus.d.ts +11 -0
  115. package/dist/hooks/useInputFocus.js +37 -0
  116. package/dist/index.d.ts +14 -1
  117. package/dist/index.js +94 -4
  118. package/dist/palette/colors.stories.d.ts +4 -0
  119. package/dist/palette/colors.stories.js +40 -0
  120. package/dist/palette/constants.d.ts +2 -0
  121. package/dist/palette/constants.js +18 -0
  122. package/dist/palette/context.d.ts +21 -0
  123. package/dist/palette/context.js +26 -0
  124. package/dist/palette/index.d.ts +3 -0
  125. package/dist/palette/index.js +19 -0
  126. package/dist/palette/index.stories.d.ts +4 -0
  127. package/dist/palette/index.stories.js +81 -0
  128. package/dist/palette/provider.d.ts +20 -0
  129. package/dist/palette/provider.js +71 -0
  130. package/dist/palette/types.d.ts +12 -0
  131. package/dist/palette/types.js +1 -0
  132. package/dist/palette/useComponentPalette.d.ts +2 -0
  133. package/dist/palette/useComponentPalette.js +22 -0
  134. package/dist/palette/usePalette.d.ts +10 -0
  135. package/dist/palette/usePalette.js +11 -0
  136. package/package.json +22 -10
  137. package/dist/stories/Button.d.ts +0 -26
  138. package/dist/stories/Button.js +0 -41
  139. package/dist/stories/Button.stories.d.ts +0 -21
  140. package/dist/stories/Button.stories.js +0 -44
  141. package/dist/stories/styles.d.ts +0 -30
  142. package/dist/stories/styles.js +0 -33
package/README.md CHANGED
@@ -1,3 +1,17 @@
1
1
  # invoicebox-ui
2
2
 
3
- Invoicebox UI
3
+ Библиотека компонентов Invoicebox.
4
+
5
+ [Cторибук](https://ui.invoicebox.ru/) с документацией и примерами.
6
+
7
+ # Установка
8
+
9
+ ```bash
10
+ npm i @invoicebox/ui
11
+ ```
12
+
13
+ или
14
+
15
+ ```bash
16
+ yarn add @invoicebox/ui
17
+ ```
@@ -0,0 +1,7 @@
1
+ export declare const breakpoints: {
2
+ sm: string;
3
+ md: string;
4
+ ld: string;
5
+ xl: string;
6
+ xxl: string;
7
+ };
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.breakpoints = void 0;
7
+ var breakpoints = exports.breakpoints = {
8
+ sm: '(max-width: 576px)',
9
+ md: '(max-width: 767px)',
10
+ ld: '(max-width: 992px)',
11
+ xl: '(max-width: 1200px)',
12
+ xxl: '(max-width: 1400px)'
13
+ };
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ export declare const StyledSvg: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../Svg").TProps, {
3
+ $isOpen: boolean;
4
+ $isLight: boolean;
5
+ $openLightColor: string;
6
+ $closeLightColor: string;
7
+ $openUsualColor: string;
8
+ $closeUsualColor: string;
9
+ $padding: number;
10
+ $defaultRotate: number;
11
+ }>> & Omit<import("react").FC<import("../Svg").TProps>, keyof import("react").Component<any, {}, any>>;
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.StyledSvg = void 0;
7
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ var _Svg = require("../Svg");
9
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
10
+ var StyledSvg = exports.StyledSvg = (0, _styledComponents["default"])(_Svg.Svg).withConfig({
11
+ displayName: "StyledSvg",
12
+ componentId: "sc-8dnufv-0"
13
+ })(["transform:rotateZ(", "deg);transition:all 0.2s ease-in-out 0s;box-sizing:content-box;padding:", "px;path{stroke:", ";"], function (_ref) {
14
+ var $isOpen = _ref.$isOpen,
15
+ $defaultRotate = _ref.$defaultRotate;
16
+ return $isOpen ? $defaultRotate + 180 : $defaultRotate;
17
+ }, function (_ref2) {
18
+ var $padding = _ref2.$padding;
19
+ return $padding;
20
+ }, function (_ref3) {
21
+ var $isLight = _ref3.$isLight,
22
+ $isOpen = _ref3.$isOpen,
23
+ $openLightColor = _ref3.$openLightColor,
24
+ $closeLightColor = _ref3.$closeLightColor,
25
+ $openUsualColor = _ref3.$openUsualColor,
26
+ $closeUsualColor = _ref3.$closeUsualColor;
27
+ if ($isLight && $isOpen) return $openLightColor;
28
+ if ($isLight && !$isOpen) return $closeLightColor;
29
+ if (!$isLight && $isOpen) return $openUsualColor;
30
+ if (!$isLight && !$isOpen) return $closeUsualColor;
31
+ });
@@ -0,0 +1,5 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import { StyledSvg } from '.';
3
+ declare const meta: Meta<typeof StyledSvg>;
4
+ export default meta;
5
+ export declare const Default: StoryObj<typeof StyledSvg>;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = exports.Default = void 0;
7
+ var _ = require(".");
8
+ var meta = {
9
+ title: 'common/Arrow/_components/StyledSvg',
10
+ component: _.StyledSvg,
11
+ tags: ['autodocs'],
12
+ parameters: {
13
+ layout: 'centered'
14
+ }
15
+ };
16
+ var _default = exports["default"] = meta;
17
+ var Default = exports.Default = {
18
+ args: {
19
+ $isOpen: false,
20
+ $isLight: false,
21
+ $openLightColor: '#cfc',
22
+ $closeLightColor: '#cac',
23
+ $openUsualColor: '#05b',
24
+ $closeUsualColor: '#00b',
25
+ size: 10,
26
+ $padding: 7,
27
+ $defaultRotate: 0
28
+ }
29
+ };
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ export type TProps = {
3
+ className?: string;
4
+ size: number;
5
+ };
6
+ export declare const Svg: FC<TProps>;
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Svg = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
9
+ var Svg = exports.Svg = function Svg(_ref) {
10
+ var className = _ref.className,
11
+ size = _ref.size;
12
+ return /*#__PURE__*/_react["default"].createElement("svg", {
13
+ className: className,
14
+ width: size,
15
+ height: size,
16
+ viewBox: "7 7 10 10",
17
+ fill: "none",
18
+ xmlns: "http://www.w3.org/2000/svg"
19
+ }, /*#__PURE__*/_react["default"].createElement("path", {
20
+ d: "M16.0846 9.95825L12.0013 14.0416L7.91797 9.95825",
21
+ stroke: "currentColor",
22
+ strokeWidth: "1.5",
23
+ strokeLinecap: "round",
24
+ strokeLinejoin: "round"
25
+ }));
26
+ };
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import { Svg, TProps } from '.';
3
+ declare const meta: Meta<typeof Svg>;
4
+ export default meta;
5
+ type TStory = StoryObj<TProps>;
6
+ export declare const Default: TStory;
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = exports.Default = void 0;
7
+ var _ = require(".");
8
+ var meta = {
9
+ title: 'common/Arrow/_components/Svg',
10
+ component: _.Svg,
11
+ tags: ['autodocs'],
12
+ parameters: {
13
+ layout: 'centered'
14
+ }
15
+ };
16
+ var _default = exports["default"] = meta;
17
+ var Default = exports.Default = {
18
+ args: {
19
+ size: 10
20
+ }
21
+ };
@@ -0,0 +1,11 @@
1
+ import { FC } from 'react';
2
+ import { TArrowPalette } from './palette';
3
+ export type TProps = {
4
+ isOpen: boolean;
5
+ isLight?: boolean;
6
+ innerSize?: number;
7
+ outterSize?: number;
8
+ defaultRotate?: number;
9
+ palette?: Partial<TArrowPalette>;
10
+ };
11
+ export declare const Arrow: FC<TProps>;
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Arrow = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _StyledSvg = require("./components/StyledSvg");
9
+ var _palette = require("../../../palette");
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
+ var Arrow = exports.Arrow = function Arrow(_ref) {
12
+ var isOpen = _ref.isOpen,
13
+ _ref$isLight = _ref.isLight,
14
+ isLight = _ref$isLight === void 0 ? false : _ref$isLight,
15
+ _ref$innerSize = _ref.innerSize,
16
+ innerSize = _ref$innerSize === void 0 ? 10 : _ref$innerSize,
17
+ _ref$outterSize = _ref.outterSize,
18
+ outterSize = _ref$outterSize === void 0 ? 24 : _ref$outterSize,
19
+ _ref$defaultRotate = _ref.defaultRotate,
20
+ defaultRotate = _ref$defaultRotate === void 0 ? 0 : _ref$defaultRotate,
21
+ palette = _ref.palette;
22
+ var mergedPalette = (0, _palette.useComponentPalette)('arrow', palette);
23
+ return /*#__PURE__*/_react["default"].createElement(_StyledSvg.StyledSvg, {
24
+ $isOpen: isOpen,
25
+ $isLight: isLight,
26
+ $openLightColor: mergedPalette.openLight,
27
+ $closeLightColor: mergedPalette.closeLight,
28
+ $openUsualColor: mergedPalette.openUsual,
29
+ $closeUsualColor: mergedPalette.closeUsual,
30
+ size: innerSize,
31
+ $padding: (outterSize - innerSize) / 2,
32
+ $defaultRotate: defaultRotate
33
+ });
34
+ };
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import { Arrow, TProps } from '.';
3
+ declare const meta: Meta<typeof Arrow>;
4
+ export default meta;
5
+ type TStory = StoryObj<TProps>;
6
+ export declare const Default: TStory;
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = exports.Default = void 0;
7
+ var _ = require(".");
8
+ var meta = {
9
+ title: 'common/Arrow',
10
+ component: _.Arrow,
11
+ tags: ['autodocs']
12
+ };
13
+ var _default = exports["default"] = meta;
14
+ var Default = exports.Default = {
15
+ args: {
16
+ isOpen: false,
17
+ isLight: false,
18
+ innerSize: 10,
19
+ outterSize: 24,
20
+ defaultRotate: 0
21
+ }
22
+ };
@@ -0,0 +1,8 @@
1
+ import { TAbstractPalette } from '../../../palette';
2
+ export type TArrowPalette = {
3
+ openLight: string;
4
+ closeLight: string;
5
+ openUsual: string;
6
+ closeUsual: string;
7
+ };
8
+ export declare const generateArrowPalette: (abstractPalette: TAbstractPalette) => TArrowPalette;
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.generateArrowPalette = void 0;
7
+ var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
8
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
9
+ var generateArrowPalette = exports.generateArrowPalette = function generateArrowPalette(abstractPalette) {
10
+ return {
11
+ openLight: (0, _hexToRgba["default"])(abstractPalette.neutralUsual, 0.8),
12
+ closeLight: (0, _hexToRgba["default"])(abstractPalette.neutralUsual, 0.8),
13
+ openUsual: (0, _hexToRgba["default"])(abstractPalette.primary, 0.5),
14
+ closeUsual: (0, _hexToRgba["default"])(abstractPalette.primary, 0.5)
15
+ };
16
+ };
@@ -0,0 +1,14 @@
1
+ import { FC, ReactNode } from 'react';
2
+ export type TProps = {
3
+ children: ReactNode;
4
+ isOpen: boolean;
5
+ isAutoPosition?: boolean;
6
+ positionVertical?: number;
7
+ positionLeft?: string;
8
+ positionRight?: string;
9
+ minWidth?: string;
10
+ width?: string;
11
+ zIndex?: number;
12
+ onCloseTransitionEnd?: () => void;
13
+ };
14
+ export declare const Dropdown: FC<TProps>;
@@ -0,0 +1,117 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.Dropdown = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var S = _interopRequireWildcard(require("./styles"));
10
+ var _palette = require("../../../palette");
11
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
12
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
13
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
14
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
15
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
16
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
17
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
18
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
19
+ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
20
+ var children = _ref.children,
21
+ isOpen = _ref.isOpen,
22
+ _ref$isAutoPosition = _ref.isAutoPosition,
23
+ isAutoPosition = _ref$isAutoPosition === void 0 ? false : _ref$isAutoPosition,
24
+ _ref$positionVertical = _ref.positionVertical,
25
+ positionVertical = _ref$positionVertical === void 0 ? 5 : _ref$positionVertical,
26
+ _ref$positionLeft = _ref.positionLeft,
27
+ positionLeft = _ref$positionLeft === void 0 ? '0px' : _ref$positionLeft,
28
+ _ref$positionRight = _ref.positionRight,
29
+ positionRight = _ref$positionRight === void 0 ? 'auto' : _ref$positionRight,
30
+ _ref$minWidth = _ref.minWidth,
31
+ minWidth = _ref$minWidth === void 0 ? 'auto' : _ref$minWidth,
32
+ _ref$width = _ref.width,
33
+ width = _ref$width === void 0 ? 'auto' : _ref$width,
34
+ zIndex = _ref.zIndex,
35
+ onCloseTransitionEnd = _ref.onCloseTransitionEnd;
36
+ var mergedPalette = (0, _palette.useComponentPalette)('dropdown');
37
+ var position = (0, _react.useRef)({
38
+ isAbove: true,
39
+ translateY: '0px'
40
+ });
41
+ var _useState = (0, _react.useState)(null),
42
+ _useState2 = _slicedToArray(_useState, 2),
43
+ elRef = _useState2[0],
44
+ setElRef = _useState2[1];
45
+ var handleCloseTransitionEnd = (0, _react.useCallback)(function (event) {
46
+ if (event.propertyName !== 'opacity') return;
47
+ if (isOpen) return;
48
+ if (onCloseTransitionEnd) onCloseTransitionEnd();
49
+ }, [isOpen, onCloseTransitionEnd]);
50
+ var getPosition = (0, _react.useCallback)(function (_ref2) {
51
+ var dropdownHeight = _ref2.dropdownHeight,
52
+ belowHeight = _ref2.belowHeight,
53
+ aboveHeight = _ref2.aboveHeight,
54
+ dropdownIndent = _ref2.dropdownIndent;
55
+ var isEnoughSpaceBelow = belowHeight >= dropdownHeight + dropdownIndent;
56
+ if (isEnoughSpaceBelow) return {
57
+ isAbove: false,
58
+ translateY: '0px'
59
+ };
60
+ var isEnoghtSpaceAbove = aboveHeight >= dropdownHeight + dropdownIndent;
61
+ if (isEnoghtSpaceAbove) return {
62
+ isAbove: true,
63
+ translateY: '0px'
64
+ };
65
+ var isMoreSpaceBelowThanAbove = belowHeight >= aboveHeight;
66
+ if (isMoreSpaceBelowThanAbove) {
67
+ var outOfViewPortHeight = dropdownHeight + dropdownIndent - belowHeight;
68
+ return {
69
+ isAbove: false,
70
+ translateY: "-".concat(outOfViewPortHeight, "px")
71
+ };
72
+ } else {
73
+ var _outOfViewPortHeight = dropdownHeight + dropdownIndent - aboveHeight;
74
+ return {
75
+ isAbove: true,
76
+ translateY: "".concat(_outOfViewPortHeight, "px")
77
+ };
78
+ }
79
+ }, []);
80
+ var openFlagCache = (0, _react.useRef)(null);
81
+ if (elRef) {
82
+ var isTriggeredByFlag = openFlagCache.current !== isOpen;
83
+ openFlagCache.current = isOpen;
84
+ if (isTriggeredByFlag && isOpen) {
85
+ var viewportHeight = window.innerHeight;
86
+ var parent = elRef.parentElement;
87
+ var _parent$getBoundingCl = parent.getBoundingClientRect(),
88
+ bottom = _parent$getBoundingCl.bottom,
89
+ aboveHeight = _parent$getBoundingCl.top;
90
+ var belowHeight = viewportHeight - bottom;
91
+ var dropdownHeight = elRef.scrollHeight;
92
+ position.current = isAutoPosition ? getPosition({
93
+ dropdownHeight: dropdownHeight,
94
+ aboveHeight: aboveHeight,
95
+ belowHeight: belowHeight,
96
+ dropdownIndent: positionVertical
97
+ }) : {
98
+ isAbove: false,
99
+ translateY: '0px'
100
+ };
101
+ }
102
+ }
103
+ return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
104
+ ref: setElRef,
105
+ $isVisible: isOpen,
106
+ $isAbove: position.current.isAbove,
107
+ $translateY: position.current.translateY,
108
+ $positionVertical: positionVertical,
109
+ $positionLeft: positionLeft,
110
+ $positionRight: positionRight,
111
+ $minWidth: minWidth,
112
+ $width: width,
113
+ $zIndex: zIndex,
114
+ onTransitionEnd: handleCloseTransitionEnd,
115
+ $palette: mergedPalette
116
+ }, children);
117
+ };
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import { Dropdown, TProps } from '.';
3
+ declare const meta: Meta<typeof Dropdown>;
4
+ export default meta;
5
+ export declare const Default: StoryObj<TProps>;
6
+ export declare const AutoPosition: StoryObj<TProps>;
@@ -0,0 +1,59 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = exports.Default = exports.AutoPosition = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _addonActions = require("@storybook/addon-actions");
9
+ var _ = require(".");
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
12
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
13
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
14
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
15
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
16
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
17
+ var meta = {
18
+ title: 'common/Dropdown',
19
+ component: _.Dropdown,
20
+ tags: ['autodocs']
21
+ };
22
+ var _default = exports["default"] = meta;
23
+ var args = {
24
+ isOpen: false,
25
+ positionVertical: 5,
26
+ positionLeft: '0px',
27
+ positionRight: 'auto',
28
+ minWidth: 'auto',
29
+ width: 'auto',
30
+ zIndex: 5,
31
+ onCloseTransitionEnd: (0, _addonActions.action)('closeTransitionEnd'),
32
+ children: Array(100).fill('children ').join('')
33
+ };
34
+ var Default = exports.Default = {
35
+ args: _objectSpread(_objectSpread({}, args), {}, {
36
+ isAutoPosition: false
37
+ }),
38
+ render: function render(props) {
39
+ return /*#__PURE__*/_react["default"].createElement("div", {
40
+ style: {
41
+ position: 'relative'
42
+ }
43
+ }, /*#__PURE__*/_react["default"].createElement("div", null, "parent"), /*#__PURE__*/_react["default"].createElement(_.Dropdown, props));
44
+ }
45
+ };
46
+ var AutoPosition = exports.AutoPosition = {
47
+ args: _objectSpread(_objectSpread({}, args), {}, {
48
+ isAutoPosition: true
49
+ }),
50
+ render: function render(props) {
51
+ return /*#__PURE__*/_react["default"].createElement("div", null, "\u0414\u0440\u043E\u043F\u0434\u0430\u0443\u043D \u043D\u0438\u0436\u0435 \u2193", /*#__PURE__*/_react["default"].createElement("div", {
52
+ style: {
53
+ position: 'relative',
54
+ marginTop: '800px',
55
+ marginBottom: '800px'
56
+ }
57
+ }, /*#__PURE__*/_react["default"].createElement("div", null, "parent"), /*#__PURE__*/_react["default"].createElement(_.Dropdown, props)));
58
+ }
59
+ };
@@ -0,0 +1,6 @@
1
+ import { TAbstractPalette } from '../../../palette';
2
+ export type TDropdownPalette = {
3
+ bg: string;
4
+ shadow: string;
5
+ };
6
+ export declare const generateDropdownPalette: (abstractPalette: TAbstractPalette) => TDropdownPalette;
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.generateDropdownPalette = void 0;
7
+ var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
8
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
9
+ var generateDropdownPalette = exports.generateDropdownPalette = function generateDropdownPalette(abstractPalette) {
10
+ return {
11
+ bg: abstractPalette.base,
12
+ shadow: (0, _hexToRgba["default"])(abstractPalette.primary, 0.09)
13
+ };
14
+ };
@@ -0,0 +1,14 @@
1
+ /// <reference types="react" />
2
+ import { TDropdownPalette } from './palette';
3
+ export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
4
+ $isVisible: boolean;
5
+ $isAbove: boolean;
6
+ $translateY: string;
7
+ $positionVertical: number;
8
+ $positionLeft: string;
9
+ $positionRight: string;
10
+ $minWidth: string;
11
+ $width: string;
12
+ $zIndex?: number | undefined;
13
+ $palette: TDropdownPalette;
14
+ }>>;
@@ -0,0 +1,47 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.Wrapper = void 0;
8
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
10
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
11
+ var hidden = (0, _styledComponents.css)(["visibility:hidden;opacity:0;transition:visibility 0ms 200ms,opacity 200ms 0ms ease;"]);
12
+ var visible = (0, _styledComponents.css)(["visibility:visible;opacity:1;transition:visibility 0ms 0ms,opacity 200ms 0ms ease;"]);
13
+ var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
14
+ displayName: "styles__Wrapper",
15
+ componentId: "sc-1f1enhf-0"
16
+ })(["overflow:hidden;border-radius:10px;box-shadow:0px 10px 17px ", ";background:", ";min-width:", ";width:", ";position:absolute;left:", ";right:", ";z-index:", ";", ";", ";", ";"], function (_ref) {
17
+ var $palette = _ref.$palette;
18
+ return $palette.shadow;
19
+ }, function (_ref2) {
20
+ var $palette = _ref2.$palette;
21
+ return $palette.bg;
22
+ }, function (_ref3) {
23
+ var $minWidth = _ref3.$minWidth;
24
+ return $minWidth;
25
+ }, function (_ref4) {
26
+ var $width = _ref4.$width;
27
+ return $width;
28
+ }, function (_ref5) {
29
+ var $positionLeft = _ref5.$positionLeft;
30
+ return $positionLeft;
31
+ }, function (_ref6) {
32
+ var $positionRight = _ref6.$positionRight;
33
+ return $positionRight;
34
+ }, function (_ref7) {
35
+ var $zIndex = _ref7.$zIndex;
36
+ return $zIndex !== null && $zIndex !== void 0 ? $zIndex : 5;
37
+ }, function (_ref8) {
38
+ var $isVisible = _ref8.$isVisible;
39
+ return $isVisible ? visible : hidden;
40
+ }, function (_ref9) {
41
+ var $isAbove = _ref9.$isAbove,
42
+ $positionVertical = _ref9.$positionVertical;
43
+ return $isAbove ? (0, _styledComponents.css)(["bottom:calc(100% + ", "px);"], $positionVertical) : (0, _styledComponents.css)(["top:calc(100% + ", "px);"], $positionVertical);
44
+ }, function (_ref10) {
45
+ var $translateY = _ref10.$translateY;
46
+ return (0, _styledComponents.css)(["transform:translateY(", ");"], $translateY);
47
+ });
@@ -0,0 +1,5 @@
1
+ import { FC } from 'react';
2
+ export type TProps = {
3
+ width?: string;
4
+ };
5
+ export declare const InvoiceboxLoader: FC<TProps>;