@invoicebox/ui 0.1.0-alpha.180 → 0.1.0-alpha.181
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/form/Select/index.d.ts +5 -1
- package/dist/components/form/Select/index.js +7 -5
- package/dist/components/form/Select/index.stories.d.ts +3 -0
- package/dist/components/form/Select/index.stories.js +77 -13
- package/dist/components/form/Select/styles.d.ts +1 -1
- package/dist/components/form/Select/styles.js +7 -7
- package/package.json +1 -1
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
1
2
|
import { TProps as TInputProps } from './components/Input';
|
|
2
3
|
export type TOption<TValue> = {
|
|
3
4
|
label: string;
|
|
4
5
|
value: TValue;
|
|
5
6
|
groupId?: string;
|
|
7
|
+
entity?: unknown;
|
|
6
8
|
};
|
|
7
9
|
export type TGroup = {
|
|
8
10
|
label: string;
|
|
@@ -14,5 +16,7 @@ export type TProps<TValue> = Pick<TInputProps, 'label' | 'hasError' | 'placehold
|
|
|
14
16
|
options: TOption<TValue>[];
|
|
15
17
|
groups?: TGroup[];
|
|
16
18
|
isResetButtonEnabled?: boolean;
|
|
19
|
+
renderOption?: (entity?: any) => ReactNode;
|
|
20
|
+
dropdownHeader?: ReactNode;
|
|
17
21
|
};
|
|
18
|
-
export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, onFocus, onBlur, name, value, onChange, options, groups, isResetButtonEnabled, size, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, onFocus, onBlur, name, value, onChange, options, groups, isResetButtonEnabled, size, renderOption, dropdownHeader, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -38,7 +38,9 @@ var Select = exports.Select = function Select(_ref) {
|
|
|
38
38
|
groups = _ref$groups === void 0 ? [] : _ref$groups,
|
|
39
39
|
_ref$isResetButtonEna = _ref.isResetButtonEnabled,
|
|
40
40
|
isResetButtonEnabled = _ref$isResetButtonEna === void 0 ? false : _ref$isResetButtonEna,
|
|
41
|
-
size = _ref.size
|
|
41
|
+
size = _ref.size,
|
|
42
|
+
renderOption = _ref.renderOption,
|
|
43
|
+
dropdownHeader = _ref.dropdownHeader;
|
|
42
44
|
var palette = (0, _palette.useComponentPalette)('select');
|
|
43
45
|
var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
|
|
44
46
|
onFocus: onFocus,
|
|
@@ -122,9 +124,9 @@ var Select = exports.Select = function Select(_ref) {
|
|
|
122
124
|
isOpen: isOpen,
|
|
123
125
|
isAutoPosition: true,
|
|
124
126
|
width: "100%"
|
|
125
|
-
}, /*#__PURE__*/_react["default"].createElement(
|
|
127
|
+
}, /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
|
|
126
128
|
maxHeight: LIST_HEIGHT
|
|
127
|
-
}, optionGroups.map(function (_ref2) {
|
|
129
|
+
}, dropdownHeader, optionGroups.map(function (_ref2) {
|
|
128
130
|
var group = _ref2.group,
|
|
129
131
|
groupOptions = _ref2.options;
|
|
130
132
|
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
|
|
@@ -140,7 +142,7 @@ var Select = exports.Select = function Select(_ref) {
|
|
|
140
142
|
"data-value": JSON.stringify(option.value),
|
|
141
143
|
"data-option-identifier": OPTION_IDENTIFIER,
|
|
142
144
|
$isGrouped: !!group
|
|
143
|
-
}, option.label);
|
|
145
|
+
}, renderOption ? renderOption(option.entity) : /*#__PURE__*/_react["default"].createElement(S.DefaultOptionWrapper, null, " ", option.label));
|
|
144
146
|
}));
|
|
145
|
-
}))))
|
|
147
|
+
}))));
|
|
146
148
|
};
|
|
@@ -3,4 +3,7 @@ import { Select, TProps } from '.';
|
|
|
3
3
|
declare const meta: Meta<typeof Select>;
|
|
4
4
|
export default meta;
|
|
5
5
|
export declare const Default: StoryObj<TProps<string>>;
|
|
6
|
+
export declare const WithDropdownHeader: StoryObj<TProps<string>>;
|
|
7
|
+
export declare const RenderOption: StoryObj<TProps<string>>;
|
|
6
8
|
export declare const WithGroups: StoryObj<TProps<string>>;
|
|
9
|
+
export declare const RenderOptionWithGroups: StoryObj<TProps<string>>;
|
|
@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports["default"] = exports.WithGroups = exports.Default = void 0;
|
|
7
|
+
exports["default"] = exports.WithGroups = exports.WithDropdownHeader = exports.RenderOptionWithGroups = exports.RenderOption = exports.Default = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _addonActions = require("@storybook/addon-actions");
|
|
10
10
|
var _ = require(".");
|
|
@@ -52,49 +52,100 @@ var COMMON_ARGS = {
|
|
|
52
52
|
options: [{
|
|
53
53
|
label: 'Option 1',
|
|
54
54
|
value: 'option-1',
|
|
55
|
-
groupId: '1'
|
|
55
|
+
groupId: '1',
|
|
56
|
+
entity: {
|
|
57
|
+
name: 'name option 1'
|
|
58
|
+
}
|
|
56
59
|
}, {
|
|
57
60
|
label: 'Option 2',
|
|
58
61
|
value: 'option-2',
|
|
59
|
-
groupId: '1'
|
|
62
|
+
groupId: '1',
|
|
63
|
+
entity: {
|
|
64
|
+
name: 'name option 2'
|
|
65
|
+
}
|
|
60
66
|
}, {
|
|
61
67
|
label: 'Option 3',
|
|
62
68
|
value: 'option-3',
|
|
63
|
-
groupId: '2'
|
|
69
|
+
groupId: '2',
|
|
70
|
+
entity: {
|
|
71
|
+
name: 'name option 3'
|
|
72
|
+
}
|
|
64
73
|
}, {
|
|
65
74
|
label: 'Option 4',
|
|
66
75
|
value: 'option-4',
|
|
67
|
-
groupId: '2'
|
|
76
|
+
groupId: '2',
|
|
77
|
+
entity: {
|
|
78
|
+
name: 'name option 4'
|
|
79
|
+
}
|
|
68
80
|
}, {
|
|
69
81
|
label: 'Option 5',
|
|
70
|
-
value: 'option-5'
|
|
82
|
+
value: 'option-5',
|
|
83
|
+
entity: {
|
|
84
|
+
name: 'name option 5'
|
|
85
|
+
}
|
|
71
86
|
}, {
|
|
72
87
|
label: 'Option 6',
|
|
73
|
-
value: 'option-6'
|
|
88
|
+
value: 'option-6',
|
|
89
|
+
entity: {
|
|
90
|
+
name: 'name option 6'
|
|
91
|
+
}
|
|
74
92
|
}, {
|
|
75
93
|
label: 'Option 7',
|
|
76
|
-
value: 'option-7'
|
|
94
|
+
value: 'option-7',
|
|
95
|
+
entity: {
|
|
96
|
+
name: 'name option 7'
|
|
97
|
+
}
|
|
77
98
|
}, {
|
|
78
99
|
label: 'Option 8',
|
|
79
|
-
value: 'option-8'
|
|
100
|
+
value: 'option-8',
|
|
101
|
+
entity: {
|
|
102
|
+
name: 'name option 8'
|
|
103
|
+
}
|
|
80
104
|
}, {
|
|
81
105
|
label: 'Option 9',
|
|
82
|
-
value: 'option-9'
|
|
106
|
+
value: 'option-9',
|
|
107
|
+
entity: {
|
|
108
|
+
name: 'name option 9'
|
|
109
|
+
}
|
|
83
110
|
}, {
|
|
84
111
|
label: 'Option 10',
|
|
85
|
-
value: 'option-10'
|
|
112
|
+
value: 'option-10',
|
|
113
|
+
entity: {
|
|
114
|
+
name: 'name option 10'
|
|
115
|
+
}
|
|
86
116
|
}, {
|
|
87
117
|
label: 'Option 11',
|
|
88
|
-
value: 'option-11'
|
|
118
|
+
value: 'option-11',
|
|
119
|
+
entity: {
|
|
120
|
+
name: 'name option 11'
|
|
121
|
+
}
|
|
89
122
|
}, {
|
|
90
123
|
label: 'Option 12',
|
|
91
|
-
value: 'option-12'
|
|
124
|
+
value: 'option-12',
|
|
125
|
+
entity: {
|
|
126
|
+
name: 'name option 12'
|
|
127
|
+
}
|
|
92
128
|
}]
|
|
93
129
|
};
|
|
130
|
+
var renderOption = function renderOption(entity) {
|
|
131
|
+
return /*#__PURE__*/_react["default"].createElement("div", null, "Hello ", entity.name, " ");
|
|
132
|
+
};
|
|
94
133
|
var Default = exports.Default = {
|
|
95
134
|
args: _objectSpread({}, COMMON_ARGS),
|
|
96
135
|
render: Component
|
|
97
136
|
};
|
|
137
|
+
var WithDropdownHeader = exports.WithDropdownHeader = {
|
|
138
|
+
args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
|
|
139
|
+
dropdownHeader: /*#__PURE__*/_react["default"].createElement("div", null, "Dropdown header")
|
|
140
|
+
}),
|
|
141
|
+
render: Component
|
|
142
|
+
};
|
|
143
|
+
var RenderOption = exports.RenderOption = {
|
|
144
|
+
args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
|
|
145
|
+
renderOption: renderOption
|
|
146
|
+
}),
|
|
147
|
+
render: Component
|
|
148
|
+
};
|
|
98
149
|
var WithGroups = exports.WithGroups = {
|
|
99
150
|
args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
|
|
100
151
|
groups: [{
|
|
@@ -106,4 +157,17 @@ var WithGroups = exports.WithGroups = {
|
|
|
106
157
|
}]
|
|
107
158
|
}),
|
|
108
159
|
render: Component
|
|
160
|
+
};
|
|
161
|
+
var RenderOptionWithGroups = exports.RenderOptionWithGroups = {
|
|
162
|
+
args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
|
|
163
|
+
groups: [{
|
|
164
|
+
label: 'Group 1',
|
|
165
|
+
id: '1'
|
|
166
|
+
}, {
|
|
167
|
+
label: 'Group 2',
|
|
168
|
+
id: '2'
|
|
169
|
+
}],
|
|
170
|
+
renderOption: renderOption
|
|
171
|
+
}),
|
|
172
|
+
render: Component
|
|
109
173
|
};
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import { TSelectPalette } from './palette';
|
|
3
3
|
export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
4
4
|
export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
5
|
-
export declare const Options: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
6
5
|
export declare const Option: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
|
|
7
6
|
$palette: TSelectPalette;
|
|
8
7
|
$isGrouped: boolean;
|
|
9
8
|
}>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
|
|
10
9
|
export declare const Group: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
|
|
10
|
+
export declare const DefaultOptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.Wrapper = exports.
|
|
7
|
+
exports.Wrapper = exports.Option = exports.InputWrapper = exports.Group = exports.DefaultOptionWrapper = void 0;
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
9
|
var _Typography = require("../../common/Typography");
|
|
10
10
|
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); }
|
|
@@ -17,14 +17,10 @@ var InputWrapper = exports.InputWrapper = _styledComponents["default"].div.withC
|
|
|
17
17
|
displayName: "styles__InputWrapper",
|
|
18
18
|
componentId: "sc-1x9n0z5-1"
|
|
19
19
|
})(["cursor:pointer;input{cursor:pointer;}"]);
|
|
20
|
-
var Options = exports.Options = _styledComponents["default"].div.withConfig({
|
|
21
|
-
displayName: "styles__Options",
|
|
22
|
-
componentId: "sc-1x9n0z5-2"
|
|
23
|
-
})(["display:flex;flex-direction:column;"]);
|
|
24
20
|
var Option = exports.Option = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
|
|
25
21
|
displayName: "styles__Option",
|
|
26
|
-
componentId: "sc-1x9n0z5-
|
|
27
|
-
})(["overflow:hidden;
|
|
22
|
+
componentId: "sc-1x9n0z5-2"
|
|
23
|
+
})(["overflow:hidden;width:100%;text-align:left;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;&:hover{background-color:", ";}", ""], function (_ref) {
|
|
28
24
|
var $palette = _ref.$palette;
|
|
29
25
|
return $palette.bgHover;
|
|
30
26
|
}, function (_ref2) {
|
|
@@ -33,5 +29,9 @@ var Option = exports.Option = (0, _styledComponents["default"])(_Typography.Typo
|
|
|
33
29
|
});
|
|
34
30
|
var Group = exports.Group = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
|
|
35
31
|
displayName: "styles__Group",
|
|
32
|
+
componentId: "sc-1x9n0z5-3"
|
|
33
|
+
})(["padding:12px 20px;"]);
|
|
34
|
+
var DefaultOptionWrapper = exports.DefaultOptionWrapper = _styledComponents["default"].div.withConfig({
|
|
35
|
+
displayName: "styles__DefaultOptionWrapper",
|
|
36
36
|
componentId: "sc-1x9n0z5-4"
|
|
37
37
|
})(["padding:12px 20px;"]);
|