@invoicebox/ui 0.1.0-alpha.40 → 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.
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.PositiveIntegerInput = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var S = _interopRequireWildcard(require("./styles"));
10
- var _useFocusField = require("../../../hooks/useFocusField");
10
+ var _useInputFocus2 = require("../../../hooks/useInputFocus");
11
11
  var _InputLabel = require("../InputLabel");
12
12
  var _PureInput = require("../PureInput");
13
13
  var _Arrow = require("../../common/Arrow");
@@ -30,7 +30,7 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
30
30
  onFocus = _ref.onFocus,
31
31
  onBlur = _ref.onBlur,
32
32
  name = _ref.name;
33
- var _useInputFocus = (0, _useFocusField.useInputFocus)({
33
+ var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
34
34
  onFocus: onFocus,
35
35
  onBlur: onBlur
36
36
  }),
@@ -0,0 +1,6 @@
1
+ import { FC } from 'react';
2
+ import { TProps as TInputLabelProps } from '../../../InputLabel';
3
+ import { TProps as TPureInputProps } from '../../../PureInput';
4
+ import { TProps as TArrowProps } from '../../../../common/Arrow';
5
+ export type TProps = Pick<TInputLabelProps, 'inFocus' | 'label'> & Pick<TPureInputProps, 'hasError' | 'placeholder' | 'name' | 'onFocus' | 'onBlur' | 'value'> & Pick<TArrowProps, 'isOpen'>;
6
+ export declare const Input: FC<TProps>;
@@ -0,0 +1,42 @@
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.Input = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var S = _interopRequireWildcard(require("./styles"));
10
+ var _InputLabel = require("../../../InputLabel");
11
+ var _PureInput = require("../../../PureInput");
12
+ var _Arrow = require("../../../../common/Arrow");
13
+ 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); }
14
+ 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; }
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
16
+ var Input = exports.Input = function Input(_ref) {
17
+ var hasError = _ref.hasError,
18
+ inFocus = _ref.inFocus,
19
+ placeholder = _ref.placeholder,
20
+ onFocus = _ref.onFocus,
21
+ onBlur = _ref.onBlur,
22
+ value = _ref.value,
23
+ name = _ref.name,
24
+ label = _ref.label,
25
+ isOpen = _ref.isOpen;
26
+ return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
27
+ inFocus: inFocus,
28
+ label: label
29
+ }, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, {
30
+ hasError: hasError,
31
+ inFocus: inFocus,
32
+ name: name,
33
+ placeholder: placeholder,
34
+ onFocus: onFocus,
35
+ onBlur: onBlur,
36
+ value: value,
37
+ readOnly: true,
38
+ paddingRight: 52
39
+ }), /*#__PURE__*/_react["default"].createElement(S.IconWrapper, null, /*#__PURE__*/_react["default"].createElement(_Arrow.Arrow, {
40
+ isOpen: isOpen
41
+ })));
42
+ };
@@ -0,0 +1,5 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import { Input, TProps } from '.';
3
+ declare const meta: Meta<typeof Input>;
4
+ export default meta;
5
+ export declare const Default: StoryObj<TProps>;
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = exports.Default = void 0;
7
+ var _addonActions = require("@storybook/addon-actions");
8
+ var _ = require(".");
9
+ var meta = {
10
+ title: 'form/Select/_components/Input',
11
+ component: _.Input,
12
+ tags: ['autodocs']
13
+ };
14
+ var _default = exports["default"] = meta;
15
+ var Default = exports.Default = {
16
+ args: {
17
+ hasError: false,
18
+ inFocus: false,
19
+ placeholder: 'placeholder',
20
+ onFocus: (0, _addonActions.action)('focus'),
21
+ onBlur: (0, _addonActions.action)('blur'),
22
+ value: 'Selected option',
23
+ name: 'name',
24
+ label: 'label',
25
+ isOpen: false
26
+ }
27
+ };
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare const IconWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.IconWrapper = void 0;
7
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
9
+ var IconWrapper = exports.IconWrapper = _styledComponents["default"].div.withConfig({
10
+ displayName: "styles__IconWrapper",
11
+ componentId: "sc-1fsrle6-0"
12
+ })(["position:absolute;right:14px;height:100%;top:0;display:flex;align-items:center;"]);
@@ -0,0 +1,11 @@
1
+ import { TProps as TInputProps } from './components/Input';
2
+ type TProps<TValue> = Pick<TInputProps, 'label' | 'hasError' | 'placeholder' | 'onFocus' | 'onBlur' | 'name'> & {
3
+ value: TValue | null;
4
+ onChange: (value: TValue) => void;
5
+ options: {
6
+ label: string;
7
+ value: TValue;
8
+ }[];
9
+ };
10
+ export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, onFocus, onBlur, name, value, onChange, options, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;
11
+ export {};
@@ -0,0 +1,122 @@
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.Select = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var S = _interopRequireWildcard(require("./styles"));
10
+ var _Input = require("./components/Input");
11
+ var _useInputFocus2 = require("../../../hooks/useInputFocus");
12
+ var _Dropdown = require("../../common/Dropdown");
13
+ var _Scrollbar = require("../../common/Scrollbar");
14
+ var _useClickOutside = require("../../../hooks/useClickOutside");
15
+ 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); }
16
+ 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; }
17
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
18
+ 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."); }
19
+ 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); }
20
+ 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; }
21
+ 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; } }
22
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
23
+ var LIST_HEIGHT = 294;
24
+ var OPTION_IDENTIFIER = 'option-identifier';
25
+ var Select = exports.Select = function Select(_ref) {
26
+ var label = _ref.label,
27
+ hasError = _ref.hasError,
28
+ placeholder = _ref.placeholder,
29
+ onFocus = _ref.onFocus,
30
+ onBlur = _ref.onBlur,
31
+ name = _ref.name,
32
+ value = _ref.value,
33
+ onChange = _ref.onChange,
34
+ options = _ref.options;
35
+ var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
36
+ onFocus: onFocus,
37
+ onBlur: onBlur
38
+ }),
39
+ inFocus = _useInputFocus.inFocus,
40
+ focusHandler = _useInputFocus.handleFocus,
41
+ blurHandler = _useInputFocus.handleBlur;
42
+ var _useState = (0, _react.useState)(false),
43
+ _useState2 = _slicedToArray(_useState, 2),
44
+ isOpen = _useState2[0],
45
+ setIsOpen = _useState2[1];
46
+
47
+ /*
48
+ существует интеграционная проблема селекта с final-form
49
+ Суть:
50
+ - пользователь выбирает опцию;
51
+ - срабатывает onBlur;
52
+ - final-form помечает поле, как toched;
53
+ - если поле не валидно, hasError становится true, отображается красная рамка;
54
+ - срабатывает onChange, и если поле валидно рамка пропадает;
55
+ т.е. рамка мигает, хотя такого быть не должно;
56
+ так появилась логика delayBlur
57
+ */
58
+ var delayBlur = (0, _react.useRef)(null);
59
+ var selectedOption = (0, _react.useMemo)(function () {
60
+ return options.find(function (option) {
61
+ return option.value === value;
62
+ });
63
+ }, [options, value]);
64
+ var handleShow = (0, _react.useCallback)(function () {
65
+ return setIsOpen(true);
66
+ }, []);
67
+ var handleHide = (0, _react.useCallback)(function () {
68
+ return setIsOpen(false);
69
+ }, []);
70
+ var wrapperRef = (0, _useClickOutside.useOutsideClick)(handleHide);
71
+ var handleFocus = (0, _react.useCallback)(function (event) {
72
+ handleShow();
73
+ focusHandler(event);
74
+ }, [focusHandler, handleShow]);
75
+ var handleBlur = (0, _react.useCallback)(function (event) {
76
+ var relatedTarget = event.relatedTarget;
77
+ var isOptionClick = (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.dataset.optionIdentifier) === OPTION_IDENTIFIER;
78
+ if (!isOptionClick) {
79
+ blurHandler(event);
80
+ return;
81
+ }
82
+ delayBlur.current = function () {
83
+ return blurHandler(event);
84
+ };
85
+ }, [blurHandler]);
86
+ var handleSelect = (0, _react.useCallback)(function (event) {
87
+ var newValue = JSON.parse(event.currentTarget.dataset.value);
88
+ onChange(newValue);
89
+ handleHide();
90
+ if (delayBlur.current) {
91
+ delayBlur.current();
92
+ delayBlur.current = null;
93
+ }
94
+ }, [handleHide, onChange]);
95
+ return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
96
+ ref: wrapperRef
97
+ }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_Input.Input, {
98
+ label: label,
99
+ hasError: hasError,
100
+ inFocus: inFocus,
101
+ placeholder: placeholder,
102
+ onFocus: handleFocus,
103
+ onBlur: handleBlur,
104
+ value: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '',
105
+ name: name,
106
+ isOpen: isOpen
107
+ })), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
108
+ isOpen: isOpen,
109
+ isAutoPosition: true,
110
+ width: "100%"
111
+ }, /*#__PURE__*/_react["default"].createElement(S.Options, null, /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
112
+ maxHeight: LIST_HEIGHT
113
+ }, options.map(function (option) {
114
+ return /*#__PURE__*/_react["default"].createElement(S.Option, {
115
+ key: option.value,
116
+ variant: "bodyMRegular",
117
+ onClick: handleSelect,
118
+ "data-value": JSON.stringify(option.value),
119
+ "data-option-identifier": OPTION_IDENTIFIER
120
+ }, option.label);
121
+ })))));
122
+ };
@@ -0,0 +1,5 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import { Select } from '.';
3
+ declare const meta: Meta<typeof Select>;
4
+ export default meta;
5
+ export declare const Default: StoryObj<typeof Select>;
@@ -0,0 +1,83 @@
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["default"] = exports.Default = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _addonActions = require("@storybook/addon-actions");
10
+ var _ = require(".");
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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
14
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
15
+ 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."); }
16
+ 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); }
17
+ 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; }
18
+ 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; } }
19
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
20
+ var meta = {
21
+ title: 'form/Select',
22
+ component: _.Select,
23
+ tags: ['autodocs']
24
+ };
25
+ var _default = exports["default"] = meta;
26
+ var selectOptions = [{
27
+ label: 'Option 1',
28
+ value: 'option-1'
29
+ }, {
30
+ label: 'Option 2',
31
+ value: 'option-2'
32
+ }, {
33
+ label: 'Option 3',
34
+ value: 'option-3'
35
+ }, {
36
+ label: 'Option 4',
37
+ value: 'option-4'
38
+ }, {
39
+ label: 'Option 5',
40
+ value: 'option-5'
41
+ }, {
42
+ label: 'Option 6',
43
+ value: 'option-6'
44
+ }, {
45
+ label: 'Option 7',
46
+ value: 'option-7'
47
+ }, {
48
+ label: 'Option 8',
49
+ value: 'option-8'
50
+ }, {
51
+ label: 'Option 9',
52
+ value: 'option-9'
53
+ }, {
54
+ label: 'Option 10',
55
+ value: 'option-10'
56
+ }, {
57
+ label: 'Option 11',
58
+ value: 'option-11'
59
+ }, {
60
+ label: 'Option 12',
61
+ value: 'option-12'
62
+ }];
63
+ var Default = exports.Default = {
64
+ args: {
65
+ hasError: false,
66
+ label: 'Label',
67
+ name: 'name',
68
+ onBlur: (0, _addonActions.action)('blur'),
69
+ onFocus: (0, _addonActions.action)('focus'),
70
+ placeholder: 'Placeholder'
71
+ },
72
+ render: function Component(props) {
73
+ var _useState = (0, _react.useState)(null),
74
+ _useState2 = _slicedToArray(_useState, 2),
75
+ value = _useState2[0],
76
+ setValue = _useState2[1];
77
+ return /*#__PURE__*/_react["default"].createElement(_.Select, _extends({}, props, {
78
+ value: value,
79
+ onChange: setValue,
80
+ options: selectOptions
81
+ }));
82
+ }
83
+ };
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
3
+ export declare const InputWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
4
+ export declare const Options: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
5
+ export declare const Option: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TProps, import("styled-components/dist/types").BaseObject>> & Omit<import("react").FC<import("../../common/Typography").TProps>, keyof import("react").Component<any, {}, any>>;
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Wrapper = exports.Options = exports.Option = exports.InputWrapper = void 0;
7
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ var _Typography = require("../../common/Typography");
9
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
10
+ var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
11
+ displayName: "styles__Wrapper",
12
+ componentId: "sc-1x9n0z5-0"
13
+ })(["position:relative;width:100%;"]);
14
+ var InputWrapper = exports.InputWrapper = _styledComponents["default"].div.withConfig({
15
+ displayName: "styles__InputWrapper",
16
+ componentId: "sc-1x9n0z5-1"
17
+ })(["cursor:pointer;input{cursor:pointer;}"]);
18
+ var Options = exports.Options = _styledComponents["default"].div.withConfig({
19
+ displayName: "styles__Options",
20
+ componentId: "sc-1x9n0z5-2"
21
+ })(["display:flex;flex-direction:column;"]);
22
+ var Option = exports.Option = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
23
+ displayName: "styles__Option",
24
+ componentId: "sc-1x9n0z5-3"
25
+ })(["overflow:hidden;display:flex;width:100%;text-align:left;flex-direction:column;padding:12px 20px;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;&:hover{background-color:rgba(241,242,246,0.5);}"]);
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare const useOutsideClick: (onClick: () => void) => import("react").RefObject<HTMLDivElement>;
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useOutsideClick = void 0;
7
+ var _react = require("react");
8
+ var useOutsideClick = exports.useOutsideClick = function useOutsideClick(onClick) {
9
+ var ref = (0, _react.useRef)(null);
10
+ (0, _react.useEffect)(function () {
11
+ var handleOutsideClick = function handleOutsideClick(event) {
12
+ if (ref.current && !ref.current.contains(event.target)) {
13
+ onClick();
14
+ }
15
+ };
16
+ document.addEventListener('mousedown', handleOutsideClick);
17
+ return function () {
18
+ document.removeEventListener('mousedown', handleOutsideClick);
19
+ };
20
+ }, [ref, onClick]);
21
+ return ref;
22
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@invoicebox/ui",
3
- "version": "0.1.0-alpha.40",
3
+ "version": "0.1.0-alpha.41",
4
4
  "description": "Invoicebox UI",
5
5
  "license": "Apache License 2.0",
6
6
  "scripts": {