@cashub/ui 0.47.0 → 0.48.1
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/Tab/TabList.js +38 -26
- package/Tab/TabPanel.js +13 -20
- package/Tab/TabTab.js +36 -24
- package/Tab/index.js +15 -1
- package/Tab/subComponent/TabListV2.js +25 -0
- package/Tab/subComponent/TabPanelV2.js +52 -0
- package/Tab/subComponent/TabTabV2.js +63 -0
- package/VerticalTab/TabList.js +13 -18
- package/VerticalTab/TabPanel.js +16 -20
- package/VerticalTab/TabTab.js +40 -21
- package/VerticalTab/VerticalTab.js +8 -4
- package/alert/Alert.js +12 -5
- package/animate/Collapse.js +5 -7
- package/animate/Loader.js +18 -7
- package/animate/PulseRing.js +18 -5
- package/animate/Spinner.js +8 -3
- package/backdrop/BaseBackdrop.js +9 -3
- package/backdrop/LoadingBackdrop.js +7 -3
- package/backdrop/ModalBackdrop.js +5 -3
- package/badge/Badge.js +15 -3
- package/badge/BadgeDot.js +8 -3
- package/badge/BadgeFill.js +24 -6
- package/badge/BadgeWithText.js +13 -3
- package/billing/BarChart.js +1 -1
- package/breadcrumb/Breadcrumb.js +42 -3
- package/button/Button.js +88 -20
- package/button/ButtonGroup.js +33 -9
- package/button/IconButton.js +37 -10
- package/button/ScrollToTopButton.js +12 -4
- package/callout/Callout.js +37 -8
- package/chart/BarChart.js +10 -17
- package/chart/DoughnutChart.js +34 -20
- package/chart/LineChart.js +11 -18
- package/chart/SingleBarChart.js +22 -5
- package/chart/utils/centerTextPlugin.js +2 -2
- package/chart/utils/customTooltip.js +7 -7
- package/chart/utils/htmlLegendPlugin.js +1 -1
- package/container/FlexContainer.js +15 -7
- package/cropper/Cropper.js +1 -2
- package/datetimePicker/DatePicker.js +80 -26
- package/datetimePicker/DatePickerV2.js +95 -36
- package/datetimePicker/DatetimePicker.js +174 -11
- package/datetimePicker/DatetimePickerV2.js +87 -33
- package/datetimePicker/DatetimePickerV3.js +174 -11
- package/datetimePicker/TimeInput.js +35 -10
- package/datetimePicker/TimePicker.js +77 -22
- package/datetimePicker/TimePickerStyle.js +53 -3
- package/datetimePicker/TimePickerV2.js +54 -21
- package/datetimePicker/accordion/Month.js +93 -16
- package/datetimePicker/accordion/Year.js +96 -18
- package/datetimePicker/hooks/useChangeNumber.js +3 -6
- package/datetimePicker/hooks/useDecrease.js +3 -6
- package/datetimePicker/hooks/useIncrease.js +3 -6
- package/datetimePicker/subComponent/Accordion.js +101 -20
- package/descriptionList/DescriptionDetail.js +15 -4
- package/descriptionList/DescriptionList.js +12 -4
- package/descriptionList/DescriptionTerm.js +5 -3
- package/divider/Divider.js +15 -6
- package/dropdown/DropdownButtonOption.js +22 -6
- package/dropdown/DropdownContent.js +29 -15
- package/dropdown/DropdownDivOption.js +17 -3
- package/dropdown/DropdownLinkOption.js +14 -3
- package/dropdown/DropdownToggle.js +7 -15
- package/dropzone/FileDropzone.js +121 -22
- package/dropzone/ImageDropzone.js +83 -14
- package/dropzone/subComponent/Message.js +11 -4
- package/figure/IconFigure.js +16 -7
- package/figure/ImageFigure.js +19 -6
- package/file/HiddenFileInput.js +3 -3
- package/form/Checkbox.js +74 -13
- package/form/Fieldset.js +9 -3
- package/form/FormItem.js +10 -5
- package/form/Input.js +40 -7
- package/form/Label.js +34 -10
- package/form/MutedText.js +8 -4
- package/form/PasswordInput.js +20 -13
- package/form/RadioButton.js +55 -8
- package/form/SearchSelect.js +64 -12
- package/form/Searchbox.js +45 -19
- package/form/Slider.js +28 -10
- package/form/SwitchButton.js +48 -14
- package/form/Textarea.js +30 -3
- package/form/TreeView.js +13 -6
- package/grid/Column.js +23 -10
- package/grid/Grid.js +14 -6
- package/heading/Heading1.js +8 -4
- package/heading/Heading2.js +11 -5
- package/heading/Heading3.js +20 -8
- package/iconbox/ApplicationIconBox.js +48 -12
- package/iconbox/IconBox.js +31 -7
- package/iconbox/IconBoxV2.js +33 -8
- package/iconbox/subComponent/IconBoxFigure.js +17 -9
- package/iconbox/subComponent/IconBoxImage.js +21 -8
- package/image/ImageFluid.js +7 -3
- package/image/UploadImage.js +66 -18
- package/index.js +8 -1
- package/jsoneditor/JsonEditor.js +121 -15
- package/keyframe/Pulse.js +13 -3
- package/keyframe/Spin.js +5 -3
- package/layout/Aside.js +30 -5
- package/layout/Backdrop.js +8 -4
- package/layout/Container.js +21 -5
- package/layout/Footer.js +26 -7
- package/link/LinkSpan.js +37 -19
- package/map/GoogleMap.js +3 -7
- package/map/GoogleReverseGeolocation.js +6 -3
- package/map/LeafletMap.js +2 -2
- package/map/subComponent/GoogleMapContainer.js +16 -4
- package/map/subComponent/GoogleMapPopup.js +7 -10
- package/map/subComponent/GoogleMapWrapper.js +8 -15
- package/map/subComponent/LeafletDrawControl.js +9 -7
- package/map/subComponent/LeafletMapContainer.js +159 -4
- package/modal/StateModal.js +49 -28
- package/modal/TitleModal.js +70 -29
- package/package.json +1 -1
- package/page/Disclaimer.js +119 -3
- package/paginate/Paginate.js +54 -12
- package/popover/Popover.js +30 -25
- package/qrcode/QRCode.js +20 -6
- package/qrcode/QRCodeContainter.js +12 -4
- package/ribbon/Ribbon.js +29 -4
- package/section/Section.js +68 -20
- package/section/SectionBody.js +29 -8
- package/section/SectionHeader.js +36 -11
- package/section/SectionToolbar.js +9 -3
- package/section/SectionToolbarItem.js +8 -3
- package/select/InputSelect.js +16 -23
- package/select/Select.js +112 -43
- package/select/subComponent/Checkbox.js +24 -5
- package/select/subComponent/Footer.js +4 -3
- package/select/subComponent/ListBox.js +12 -5
- package/select/subComponent/Option.js +27 -7
- package/select/subComponent/OptionGroup.js +13 -3
- package/select/subComponent/Options.js +18 -5
- package/select/subComponent/SearchBox.js +34 -12
- package/select/subComponent/SelectedMultipleTags.js +21 -3
- package/select/subComponent/SelectedMultipleText.js +20 -4
- package/select/subComponent/SelectedSingle.js +7 -3
- package/styles/GlobalStyle.js +156 -45
- package/styles/mixin/backgroundColor.js +16 -8
- package/styles/mixin/borderColor.js +13 -7
- package/styles/mixin/color.js +13 -7
- package/styles/mixin/colorOnBackground.js +13 -7
- package/styles/mixin/inputPlaceholder.js +20 -3
- package/styles/mixin/media.js +5 -3
- package/styles/mixin/rounded.js +10 -6
- package/styles/mixin/scrollbar.js +13 -3
- package/styles/theme/dark.theme.js +15 -14
- package/styles/theme/light.theme.js +15 -14
- package/styles/theme/white.theme.js +15 -14
- package/table/GridTable.js +71 -33
- package/table/ImageBox.js +15 -5
- package/table/InfiniteGridTable.js +92 -46
- package/table/PermissionTable.js +32 -10
- package/table/SimpleGridTable.js +143 -0
- package/table/Table.js +198 -48
- package/table/__mock__/columns.js +1 -1
- package/table/index.js +7 -0
- package/table/subComponent/BaseTableHeadCell.js +37 -8
- package/table/subComponent/GridTableFooter.js +10 -4
- package/table/subComponent/GridTableHeadCell.js +6 -4
- package/table/subComponent/Resizer.js +19 -4
- package/table/subComponent/TableFooter.js +15 -6
- package/table/subComponent/TableFooterInfo.js +4 -3
- package/table/subComponent/TableFooterPager.js +19 -6
- package/table/subComponent/TableHeadCell.js +9 -3
- package/table/subComponent/TableSort.js +17 -7
- package/tagify/TagifyStyle.js +49 -3
- package/tagify/Tags.js +37 -21
- package/tagify/templates/getCreateButtonTemplate.js +5 -2
- package/text/Paragraph.js +50 -12
- package/timeline/Timeline.js +94 -17
- package/toast/CustomToastContainer.js +35 -3
- package/toast/MessageContainer.js +22 -4
- package/tooltip/Tooltip.js +47 -19
- package/treeView/TreeViewV2.js +1 -1
- package/treeView/TreeflexStyle.js +38 -3
- package/wizard/Wizard.js +115 -6
|
@@ -11,11 +11,9 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
11
11
|
var _utils = require("@cashub/utils");
|
|
12
12
|
var _scrollbar = _interopRequireDefault(require("../../styles/mixin/scrollbar"));
|
|
13
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
15
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
17
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 && {}.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; }
|
|
18
|
-
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
19
17
|
const monthArr = [{
|
|
20
18
|
number: '01',
|
|
21
19
|
name: 'Jan'
|
|
@@ -81,8 +79,7 @@ const Accordion = _ref => {
|
|
|
81
79
|
if (type === 'year') {
|
|
82
80
|
return selectedYear ? selectedYear : new Date().getFullYear();
|
|
83
81
|
} else if (type === 'month') {
|
|
84
|
-
|
|
85
|
-
return (_monthArr = monthArr[selectedMonth ? selectedMonth : new Date().getMonth()]) === null || _monthArr === void 0 ? void 0 : _monthArr.name;
|
|
82
|
+
return monthArr[selectedMonth ? selectedMonth : new Date().getMonth()]?.name;
|
|
86
83
|
}
|
|
87
84
|
};
|
|
88
85
|
const handleChangeMonth = (0, _react.useCallback)(month => {
|
|
@@ -176,7 +173,7 @@ const Accordion = _ref => {
|
|
|
176
173
|
}
|
|
177
174
|
}, [fixedYear, selectedYear]);
|
|
178
175
|
const scroll = (0, _react.useCallback)(() => {
|
|
179
|
-
if (bodyRef
|
|
176
|
+
if (bodyRef?.current && selectedYearRef?.current) {
|
|
180
177
|
const body = bodyRef.current;
|
|
181
178
|
if (body.scrollTop < 200) {
|
|
182
179
|
body.removeEventListener('scroll', scroll);
|
|
@@ -211,7 +208,7 @@ const Accordion = _ref => {
|
|
|
211
208
|
setDisplay(currentDisplayType === type);
|
|
212
209
|
}, [currentDisplayType, type]);
|
|
213
210
|
(0, _react.useEffect)(() => {
|
|
214
|
-
if (display && bodyRef
|
|
211
|
+
if (display && bodyRef?.current && currentDisplayType === 'year' && selectedYearRef?.current) {
|
|
215
212
|
bodyRef.current.scrollTo({
|
|
216
213
|
top: selectedYearRef.current.offsetTop - bodyRef.current.offsetTop
|
|
217
214
|
});
|
|
@@ -248,45 +245,129 @@ const Accordion = _ref => {
|
|
|
248
245
|
})]
|
|
249
246
|
});
|
|
250
247
|
};
|
|
251
|
-
const IconButton = _styledComponents.default.button
|
|
248
|
+
const IconButton = _styledComponents.default.button`
|
|
249
|
+
width: 36px;
|
|
250
|
+
height: 36px;
|
|
251
|
+
background: var(--color-background1);
|
|
252
|
+
border: none;
|
|
253
|
+
color: var(--font-on-background);
|
|
254
|
+
padding: 0;
|
|
255
|
+
transition: 0.3s;
|
|
256
|
+
|
|
257
|
+
&:hover {
|
|
258
|
+
color: var(--color-primary);
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
${_ref2 => {
|
|
252
262
|
let {
|
|
253
263
|
disabled
|
|
254
264
|
} = _ref2;
|
|
255
|
-
return disabled && (0, _styledComponents.css)
|
|
256
|
-
|
|
265
|
+
return disabled && (0, _styledComponents.css)`
|
|
266
|
+
opacity: 0.5;
|
|
267
|
+
|
|
268
|
+
&:hover {
|
|
269
|
+
color: var(--font-on-background);
|
|
270
|
+
}
|
|
271
|
+
`;
|
|
272
|
+
}}
|
|
273
|
+
|
|
274
|
+
${_ref3 => {
|
|
257
275
|
let {
|
|
258
276
|
right,
|
|
259
277
|
$display
|
|
260
278
|
} = _ref3;
|
|
261
|
-
return right &&
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
279
|
+
return right && `
|
|
280
|
+
position: absolute;
|
|
281
|
+
right: 0;
|
|
282
|
+
${$display && (0, _styledComponents.css)`
|
|
283
|
+
transform: rotate(180deg);
|
|
284
|
+
`}
|
|
285
|
+
`;
|
|
286
|
+
}}
|
|
287
|
+
`;
|
|
288
|
+
const Header = _styledComponents.default.div`
|
|
289
|
+
display: flex;
|
|
290
|
+
justify-content: center;
|
|
291
|
+
align-content: center;
|
|
292
|
+
position: relative;
|
|
293
|
+
|
|
294
|
+
> div {
|
|
295
|
+
width: 72px;
|
|
296
|
+
line-height: 36px;
|
|
297
|
+
text-align: center;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
&::before {
|
|
301
|
+
content: '';
|
|
302
|
+
border-bottom: var(--border-width) solid var(--border-color);
|
|
303
|
+
position: absolute;
|
|
304
|
+
width: 300px;
|
|
305
|
+
bottom: 0;
|
|
306
|
+
z-index: 1;
|
|
307
|
+
right: -16px;
|
|
308
|
+
}
|
|
309
|
+
`;
|
|
310
|
+
const Body = _styledComponents.default.div`
|
|
311
|
+
flex-wrap: wrap;
|
|
312
|
+
height: 0;
|
|
313
|
+
width: 100%;
|
|
314
|
+
display: ${_ref4 => {
|
|
265
315
|
let {
|
|
266
316
|
$display
|
|
267
317
|
} = _ref4;
|
|
268
318
|
return $display ? 'flex' : 'none';
|
|
269
|
-
}
|
|
319
|
+
}};
|
|
320
|
+
${_ref5 => {
|
|
270
321
|
let {
|
|
271
322
|
type,
|
|
272
323
|
fixedYear
|
|
273
324
|
} = _ref5;
|
|
274
|
-
return type && (0, _styledComponents.css)
|
|
275
|
-
}
|
|
276
|
-
|
|
325
|
+
return type && (0, _styledComponents.css)`
|
|
326
|
+
min-height: ${type === 'year' ? '197' : fixedYear ? '144' : '192'}px};
|
|
327
|
+
transition: .3s;
|
|
328
|
+
|
|
329
|
+
${type === 'year' && (0, _styledComponents.css)`
|
|
330
|
+
overflow-y: scroll;
|
|
331
|
+
gap: 12px 0;
|
|
332
|
+
${_scrollbar.default}
|
|
333
|
+
`};
|
|
334
|
+
`;
|
|
335
|
+
}}
|
|
336
|
+
|
|
337
|
+
transition: 0.3s;
|
|
338
|
+
`;
|
|
339
|
+
const Item = _styledComponents.default.button`
|
|
340
|
+
width: 84px;
|
|
341
|
+
height: 36px;
|
|
342
|
+
line-height: 36px;
|
|
343
|
+
text-align: center;
|
|
344
|
+
border-radius: var(--border-radius-s);
|
|
345
|
+
padding: 0;
|
|
346
|
+
border: none;
|
|
347
|
+
color: var(--font-on-background);
|
|
348
|
+
background: var(--color-background1);
|
|
349
|
+
|
|
350
|
+
&:hover {
|
|
351
|
+
${_ref6 => {
|
|
277
352
|
let {
|
|
278
353
|
disabled
|
|
279
354
|
} = _ref6;
|
|
280
355
|
return !disabled && 'background: var(--color-primary)';
|
|
281
|
-
}
|
|
356
|
+
}}
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
${_ref7 => {
|
|
282
360
|
let {
|
|
283
361
|
disabled
|
|
284
362
|
} = _ref7;
|
|
285
363
|
return disabled && 'color: var(--font-on-mute)';
|
|
286
|
-
}
|
|
364
|
+
}}
|
|
365
|
+
|
|
366
|
+
${_ref8 => {
|
|
287
367
|
let {
|
|
288
368
|
selected
|
|
289
369
|
} = _ref8;
|
|
290
370
|
return selected && 'background: var(--color-hover)';
|
|
291
|
-
}
|
|
371
|
+
}}
|
|
372
|
+
`;
|
|
292
373
|
var _default = exports.default = Accordion;
|
|
@@ -5,13 +5,24 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
-
var _templateObject;
|
|
9
8
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
const DescriptionDetail = _styledComponents.default.dd`
|
|
10
|
+
font-size: var(--font-h3);
|
|
11
|
+
line-height: 1.25;
|
|
12
|
+
font-weight: bold;
|
|
13
|
+
color: var(--font-on-background);
|
|
14
|
+
word-break: break-all;
|
|
15
|
+
white-space: pre-line;
|
|
16
|
+
|
|
17
|
+
> a {
|
|
18
|
+
color: var(--color-primary);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
${_ref => {
|
|
12
22
|
let {
|
|
13
23
|
fontNormal
|
|
14
24
|
} = _ref;
|
|
15
25
|
return fontNormal && 'font-weight: normal;';
|
|
16
|
-
}
|
|
26
|
+
}}
|
|
27
|
+
`;
|
|
17
28
|
var _default = exports.default = DescriptionDetail;
|
|
@@ -5,13 +5,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
-
var _templateObject;
|
|
9
8
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
const DescriptionList = _styledComponents.default.dl`
|
|
10
|
+
flex: 1;
|
|
11
|
+
|
|
12
|
+
&:not(:last-child) {
|
|
13
|
+
border-right: var(--border-width) solid var(--border-color);
|
|
14
|
+
margin-right: var(--spacing);
|
|
15
|
+
padding-right: var(--spacing);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
${_ref => {
|
|
12
19
|
let {
|
|
13
20
|
invisible
|
|
14
21
|
} = _ref;
|
|
15
22
|
return invisible && 'visibility: hidden';
|
|
16
|
-
}
|
|
23
|
+
}}
|
|
24
|
+
`;
|
|
17
25
|
var _default = exports.default = DescriptionList;
|
|
@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
-
var _templateObject;
|
|
9
8
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
const DescriptionTerm = _styledComponents.default.dt`
|
|
10
|
+
font-size: var(--font-h3);
|
|
11
|
+
color: var(--font-on-mute);
|
|
12
|
+
padding-bottom: var(--spacing-xs);
|
|
13
|
+
`;
|
|
12
14
|
var _default = exports.default = DescriptionTerm;
|
package/divider/Divider.js
CHANGED
|
@@ -5,18 +5,27 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
-
var _templateObject;
|
|
9
8
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
const Divider = _styledComponents.default.hr`
|
|
10
|
+
border: none;
|
|
11
|
+
border-top: 1px solid var(--border-color);
|
|
12
|
+
margin: var(--spacing-s);
|
|
13
|
+
|
|
14
|
+
${_ref => {
|
|
12
15
|
let {
|
|
13
16
|
noMarginX
|
|
14
17
|
} = _ref;
|
|
15
|
-
return noMarginX &&
|
|
16
|
-
|
|
18
|
+
return noMarginX && `
|
|
19
|
+
margin-left: 0;
|
|
20
|
+
margin-right: 0;
|
|
21
|
+
`;
|
|
22
|
+
}}
|
|
23
|
+
|
|
24
|
+
${_ref2 => {
|
|
17
25
|
let {
|
|
18
26
|
dashed
|
|
19
27
|
} = _ref2;
|
|
20
28
|
return dashed && 'border-top-style: dashed;';
|
|
21
|
-
}
|
|
29
|
+
}}
|
|
30
|
+
`;
|
|
22
31
|
var _default = exports.default = Divider;
|
|
@@ -5,23 +5,39 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
-
var _templateObject;
|
|
9
8
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
const DropdownButtonOption = _styledComponents.default.button`
|
|
10
|
+
display: flex;
|
|
11
|
+
padding: 12px var(--spacing-s);
|
|
12
|
+
color: var(--font-on-background);
|
|
13
|
+
background: var(--color-background2);
|
|
14
|
+
width: 100%;
|
|
15
|
+
border: none;
|
|
16
|
+
cursor: ${_ref => {
|
|
12
17
|
let {
|
|
13
18
|
disabled
|
|
14
19
|
} = _ref;
|
|
15
20
|
return disabled ? 'no-drop' : 'pointer';
|
|
16
|
-
}
|
|
21
|
+
}};
|
|
22
|
+
|
|
23
|
+
&:hover {
|
|
24
|
+
${_ref2 => {
|
|
17
25
|
let {
|
|
18
26
|
disabled
|
|
19
27
|
} = _ref2;
|
|
20
28
|
return !disabled && 'background: var(--color-hover);';
|
|
21
|
-
}
|
|
29
|
+
}}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
> svg {
|
|
33
|
+
margin-right: var(--spacing-s);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
${_ref3 => {
|
|
22
37
|
let {
|
|
23
38
|
disabled
|
|
24
39
|
} = _ref3;
|
|
25
40
|
return disabled && 'opacity: 0.5';
|
|
26
|
-
}
|
|
41
|
+
}}
|
|
42
|
+
`;
|
|
27
43
|
var _default = exports.default = DropdownButtonOption;
|
|
@@ -9,14 +9,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
9
9
|
var _DropdownContext = _interopRequireDefault(require("./subComponent/DropdownContext"));
|
|
10
10
|
var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
-
var _templateObject;
|
|
13
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
-
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
15
|
-
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; }
|
|
16
|
-
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; }
|
|
17
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
18
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
19
|
-
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); }
|
|
20
13
|
const DropdownContent = _ref => {
|
|
21
14
|
let {
|
|
22
15
|
children,
|
|
@@ -53,24 +46,45 @@ const DropdownContent = _ref => {
|
|
|
53
46
|
update();
|
|
54
47
|
}
|
|
55
48
|
}, [update, children]);
|
|
56
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper,
|
|
49
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
|
|
57
50
|
ref: setContentElement,
|
|
58
51
|
$display: display,
|
|
59
|
-
style: styles.popper
|
|
60
|
-
|
|
52
|
+
style: styles.popper,
|
|
53
|
+
...attributes.popper,
|
|
61
54
|
showScrollbar: showScrollbar,
|
|
62
55
|
children: children
|
|
63
|
-
})
|
|
56
|
+
});
|
|
64
57
|
};
|
|
65
|
-
const Wrapper = _styledComponents.default.div
|
|
58
|
+
const Wrapper = _styledComponents.default.div`
|
|
59
|
+
visibility: ${_ref2 => {
|
|
66
60
|
let {
|
|
67
61
|
$display
|
|
68
62
|
} = _ref2;
|
|
69
63
|
return $display === true ? 'visible' : 'hidden';
|
|
70
|
-
}
|
|
64
|
+
}};
|
|
65
|
+
min-width: 160px;
|
|
66
|
+
max-width: 320px;
|
|
67
|
+
border: 1px solid var(--border-color);
|
|
68
|
+
color: var(--font-on-background);
|
|
69
|
+
background: var(--color-background2);
|
|
70
|
+
box-shadow: var(--box-shadow);
|
|
71
|
+
border-radius: var(--border-radius);
|
|
72
|
+
padding: var(--spacing-s) 0;
|
|
73
|
+
z-index: 20;
|
|
74
|
+
margin: 0 !important;
|
|
75
|
+
|
|
76
|
+
${_scrollbar.default}
|
|
77
|
+
|
|
78
|
+
${_ref3 => {
|
|
71
79
|
let {
|
|
72
80
|
showScrollbar
|
|
73
81
|
} = _ref3;
|
|
74
|
-
return showScrollbar &&
|
|
75
|
-
|
|
82
|
+
return showScrollbar && `
|
|
83
|
+
overflow-y: auto;
|
|
84
|
+
overflow-x: hidden;
|
|
85
|
+
max-height: min(320px, ((50vh - 36px) - 20px) - 36px);
|
|
86
|
+
|
|
87
|
+
`;
|
|
88
|
+
}}
|
|
89
|
+
`;
|
|
76
90
|
var _default = exports.default = DropdownContent;
|
|
@@ -5,8 +5,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
-
var _templateObject;
|
|
9
8
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
const DropdownDivOption = _styledComponents.default.div`
|
|
10
|
+
display: flex;
|
|
11
|
+
padding: 12px var(--spacing-s);
|
|
12
|
+
color: var(--font-on-background);
|
|
13
|
+
background: var(--color-background2);
|
|
14
|
+
width: 100%;
|
|
15
|
+
border: none;
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
|
|
18
|
+
&:hover {
|
|
19
|
+
background: var(--color-hover);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
> svg {
|
|
23
|
+
margin-right: var(--spacing-s);
|
|
24
|
+
}
|
|
25
|
+
`;
|
|
12
26
|
var _default = exports.default = DropdownDivOption;
|
|
@@ -6,8 +6,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
8
|
var _reactRouterDom = require("react-router-dom");
|
|
9
|
-
var _templateObject;
|
|
10
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
const DropdownLinkOption = (0, _styledComponents.default)(_reactRouterDom.Link)`
|
|
11
|
+
display: flex;
|
|
12
|
+
padding: 12px var(--spacing-s);
|
|
13
|
+
color: var(--font-on-background);
|
|
14
|
+
background: var(--color-background2);
|
|
15
|
+
|
|
16
|
+
&:hover {
|
|
17
|
+
background: var(--color-hover);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
> svg {
|
|
21
|
+
margin-right: var(--spacing-s);
|
|
22
|
+
}
|
|
23
|
+
`;
|
|
13
24
|
var _default = exports.default = DropdownLinkOption;
|
|
@@ -7,20 +7,12 @@ exports.default = void 0;
|
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _DropdownContext = _interopRequireDefault(require("./subComponent/DropdownContext"));
|
|
9
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
-
const _excluded = ["children"];
|
|
11
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
15
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : 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
|
-
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
18
|
-
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
19
11
|
const DropdownToggle = _ref => {
|
|
20
12
|
let {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
13
|
+
children,
|
|
14
|
+
...props
|
|
15
|
+
} = _ref;
|
|
24
16
|
const {
|
|
25
17
|
display,
|
|
26
18
|
setDisplay,
|
|
@@ -35,12 +27,12 @@ const DropdownToggle = _ref => {
|
|
|
35
27
|
update();
|
|
36
28
|
}
|
|
37
29
|
};
|
|
38
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div",
|
|
39
|
-
onClick: handleToggle
|
|
40
|
-
|
|
30
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
31
|
+
onClick: handleToggle,
|
|
32
|
+
...props,
|
|
41
33
|
children: /*#__PURE__*/(0, _react.cloneElement)(children, {
|
|
42
34
|
ref: setToggleElement
|
|
43
35
|
})
|
|
44
|
-
})
|
|
36
|
+
});
|
|
45
37
|
};
|
|
46
38
|
var _default = exports.default = DropdownToggle;
|