@cashub/ui 0.47.0 → 0.48.0

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 (178) hide show
  1. package/Tab/TabList.js +38 -26
  2. package/Tab/TabPanel.js +13 -20
  3. package/Tab/TabTab.js +36 -24
  4. package/Tab/index.js +15 -1
  5. package/Tab/subComponent/TabListV2.js +25 -0
  6. package/Tab/subComponent/TabPanelV2.js +52 -0
  7. package/Tab/subComponent/TabTabV2.js +63 -0
  8. package/VerticalTab/TabList.js +13 -18
  9. package/VerticalTab/TabPanel.js +16 -20
  10. package/VerticalTab/TabTab.js +40 -21
  11. package/VerticalTab/VerticalTab.js +8 -4
  12. package/alert/Alert.js +12 -5
  13. package/animate/Collapse.js +5 -7
  14. package/animate/Loader.js +18 -7
  15. package/animate/PulseRing.js +18 -5
  16. package/animate/Spinner.js +8 -3
  17. package/backdrop/BaseBackdrop.js +9 -3
  18. package/backdrop/LoadingBackdrop.js +7 -3
  19. package/backdrop/ModalBackdrop.js +5 -3
  20. package/badge/Badge.js +15 -3
  21. package/badge/BadgeDot.js +8 -3
  22. package/badge/BadgeFill.js +24 -6
  23. package/badge/BadgeWithText.js +13 -3
  24. package/billing/BarChart.js +1 -1
  25. package/breadcrumb/Breadcrumb.js +42 -3
  26. package/button/Button.js +88 -20
  27. package/button/ButtonGroup.js +33 -9
  28. package/button/IconButton.js +37 -10
  29. package/button/ScrollToTopButton.js +12 -4
  30. package/callout/Callout.js +37 -8
  31. package/chart/BarChart.js +10 -17
  32. package/chart/DoughnutChart.js +34 -20
  33. package/chart/LineChart.js +11 -18
  34. package/chart/SingleBarChart.js +22 -5
  35. package/chart/utils/centerTextPlugin.js +2 -2
  36. package/chart/utils/customTooltip.js +7 -7
  37. package/chart/utils/htmlLegendPlugin.js +1 -1
  38. package/container/FlexContainer.js +15 -7
  39. package/cropper/Cropper.js +1 -2
  40. package/datetimePicker/DatePicker.js +80 -26
  41. package/datetimePicker/DatePickerV2.js +95 -36
  42. package/datetimePicker/DatetimePicker.js +174 -11
  43. package/datetimePicker/DatetimePickerV2.js +87 -33
  44. package/datetimePicker/DatetimePickerV3.js +174 -11
  45. package/datetimePicker/TimeInput.js +35 -10
  46. package/datetimePicker/TimePicker.js +77 -22
  47. package/datetimePicker/TimePickerStyle.js +53 -3
  48. package/datetimePicker/TimePickerV2.js +54 -21
  49. package/datetimePicker/accordion/Month.js +93 -16
  50. package/datetimePicker/accordion/Year.js +96 -18
  51. package/datetimePicker/hooks/useChangeNumber.js +3 -6
  52. package/datetimePicker/hooks/useDecrease.js +3 -6
  53. package/datetimePicker/hooks/useIncrease.js +3 -6
  54. package/datetimePicker/subComponent/Accordion.js +101 -20
  55. package/descriptionList/DescriptionDetail.js +15 -4
  56. package/descriptionList/DescriptionList.js +12 -4
  57. package/descriptionList/DescriptionTerm.js +5 -3
  58. package/divider/Divider.js +15 -6
  59. package/dropdown/DropdownButtonOption.js +22 -6
  60. package/dropdown/DropdownContent.js +29 -15
  61. package/dropdown/DropdownDivOption.js +17 -3
  62. package/dropdown/DropdownLinkOption.js +14 -3
  63. package/dropdown/DropdownToggle.js +7 -15
  64. package/dropzone/FileDropzone.js +121 -22
  65. package/dropzone/ImageDropzone.js +83 -14
  66. package/dropzone/subComponent/Message.js +11 -4
  67. package/figure/IconFigure.js +16 -7
  68. package/figure/ImageFigure.js +19 -6
  69. package/file/HiddenFileInput.js +3 -3
  70. package/form/Checkbox.js +74 -13
  71. package/form/Fieldset.js +9 -3
  72. package/form/FormItem.js +10 -5
  73. package/form/Input.js +40 -7
  74. package/form/Label.js +34 -10
  75. package/form/MutedText.js +8 -4
  76. package/form/PasswordInput.js +20 -13
  77. package/form/RadioButton.js +55 -8
  78. package/form/SearchSelect.js +64 -12
  79. package/form/Searchbox.js +45 -19
  80. package/form/Slider.js +28 -10
  81. package/form/SwitchButton.js +48 -14
  82. package/form/Textarea.js +30 -3
  83. package/form/TreeView.js +13 -6
  84. package/grid/Column.js +23 -10
  85. package/grid/Grid.js +14 -6
  86. package/heading/Heading1.js +8 -4
  87. package/heading/Heading2.js +11 -5
  88. package/heading/Heading3.js +20 -8
  89. package/iconbox/ApplicationIconBox.js +48 -12
  90. package/iconbox/IconBox.js +31 -7
  91. package/iconbox/IconBoxV2.js +33 -8
  92. package/iconbox/subComponent/IconBoxFigure.js +17 -9
  93. package/iconbox/subComponent/IconBoxImage.js +21 -8
  94. package/image/ImageFluid.js +7 -3
  95. package/image/UploadImage.js +66 -18
  96. package/index.js +8 -1
  97. package/jsoneditor/JsonEditor.js +121 -15
  98. package/keyframe/Pulse.js +13 -3
  99. package/keyframe/Spin.js +5 -3
  100. package/layout/Aside.js +30 -5
  101. package/layout/Backdrop.js +8 -4
  102. package/layout/Container.js +21 -5
  103. package/layout/Footer.js +26 -7
  104. package/link/LinkSpan.js +37 -19
  105. package/map/GoogleMap.js +3 -7
  106. package/map/GoogleReverseGeolocation.js +6 -3
  107. package/map/LeafletMap.js +2 -2
  108. package/map/subComponent/GoogleMapContainer.js +16 -4
  109. package/map/subComponent/GoogleMapPopup.js +7 -10
  110. package/map/subComponent/GoogleMapWrapper.js +8 -15
  111. package/map/subComponent/LeafletDrawControl.js +9 -7
  112. package/map/subComponent/LeafletMapContainer.js +159 -4
  113. package/modal/StateModal.js +49 -28
  114. package/modal/TitleModal.js +70 -29
  115. package/package.json +1 -1
  116. package/page/Disclaimer.js +119 -3
  117. package/paginate/Paginate.js +54 -12
  118. package/popover/Popover.js +30 -25
  119. package/qrcode/QRCode.js +20 -6
  120. package/qrcode/QRCodeContainter.js +12 -4
  121. package/ribbon/Ribbon.js +29 -4
  122. package/section/Section.js +68 -20
  123. package/section/SectionBody.js +29 -8
  124. package/section/SectionHeader.js +36 -11
  125. package/section/SectionToolbar.js +9 -3
  126. package/section/SectionToolbarItem.js +8 -3
  127. package/select/InputSelect.js +16 -23
  128. package/select/Select.js +112 -43
  129. package/select/subComponent/Checkbox.js +24 -5
  130. package/select/subComponent/Footer.js +4 -3
  131. package/select/subComponent/ListBox.js +12 -5
  132. package/select/subComponent/Option.js +27 -7
  133. package/select/subComponent/OptionGroup.js +13 -3
  134. package/select/subComponent/Options.js +18 -5
  135. package/select/subComponent/SearchBox.js +34 -12
  136. package/select/subComponent/SelectedMultipleTags.js +21 -3
  137. package/select/subComponent/SelectedMultipleText.js +19 -4
  138. package/select/subComponent/SelectedSingle.js +7 -3
  139. package/styles/GlobalStyle.js +156 -45
  140. package/styles/mixin/backgroundColor.js +16 -8
  141. package/styles/mixin/borderColor.js +13 -7
  142. package/styles/mixin/color.js +13 -7
  143. package/styles/mixin/colorOnBackground.js +13 -7
  144. package/styles/mixin/inputPlaceholder.js +20 -3
  145. package/styles/mixin/media.js +5 -3
  146. package/styles/mixin/rounded.js +10 -6
  147. package/styles/mixin/scrollbar.js +13 -3
  148. package/styles/theme/dark.theme.js +15 -14
  149. package/styles/theme/light.theme.js +15 -14
  150. package/styles/theme/white.theme.js +15 -14
  151. package/table/GridTable.js +71 -33
  152. package/table/ImageBox.js +15 -5
  153. package/table/InfiniteGridTable.js +92 -46
  154. package/table/PermissionTable.js +32 -10
  155. package/table/SimpleGridTable.js +143 -0
  156. package/table/Table.js +198 -48
  157. package/table/__mock__/columns.js +1 -1
  158. package/table/index.js +7 -0
  159. package/table/subComponent/BaseTableHeadCell.js +37 -8
  160. package/table/subComponent/GridTableFooter.js +10 -4
  161. package/table/subComponent/GridTableHeadCell.js +6 -4
  162. package/table/subComponent/Resizer.js +19 -4
  163. package/table/subComponent/TableFooter.js +15 -6
  164. package/table/subComponent/TableFooterInfo.js +4 -3
  165. package/table/subComponent/TableFooterPager.js +19 -6
  166. package/table/subComponent/TableHeadCell.js +9 -3
  167. package/table/subComponent/TableSort.js +17 -7
  168. package/tagify/TagifyStyle.js +49 -3
  169. package/tagify/Tags.js +37 -21
  170. package/tagify/templates/getCreateButtonTemplate.js +5 -2
  171. package/text/Paragraph.js +50 -12
  172. package/timeline/Timeline.js +94 -17
  173. package/toast/CustomToastContainer.js +35 -3
  174. package/toast/MessageContainer.js +22 -4
  175. package/tooltip/Tooltip.js +47 -19
  176. package/treeView/TreeViewV2.js +1 -1
  177. package/treeView/TreeflexStyle.js +38 -3
  178. 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
- var _monthArr;
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 !== null && bodyRef !== void 0 && bodyRef.current && selectedYearRef !== null && selectedYearRef !== void 0 && selectedYearRef.current) {
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 !== null && bodyRef !== void 0 && bodyRef.current && currentDisplayType === 'year' && selectedYearRef !== null && selectedYearRef !== void 0 && selectedYearRef.current) {
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(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 36px;\n height: 36px;\n background: var(--color-background1);\n border: none;\n color: var(--font-on-background);\n padding: 0;\n transition: 0.3s;\n\n &:hover {\n color: var(--color-primary);\n }\n\n ", "\n\n ", "\n"])), _ref2 => {
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)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n opacity: 0.5;\n\n &:hover {\n color: var(--font-on-background);\n }\n "])));
256
- }, _ref3 => {
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 && "\n position: absolute;\n right: 0;\n ".concat($display && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n transform: rotate(180deg);\n "]))), "\n ");
262
- });
263
- const Header = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-content: center;\n position: relative;\n\n > div {\n width: 72px;\n line-height: 36px;\n text-align: center;\n }\n\n &::before {\n content: '';\n border-bottom: var(--border-width) solid var(--border-color);\n position: absolute;\n width: 300px;\n bottom: 0;\n z-index: 1;\n right: -16px;\n }\n"])));
264
- const Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n flex-wrap: wrap;\n height: 0;\n width: 100%;\n display: ", ";\n ", "\n\n transition: 0.3s;\n"])), _ref4 => {
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
- }, _ref5 => {
319
+ }};
320
+ ${_ref5 => {
270
321
  let {
271
322
  type,
272
323
  fixedYear
273
324
  } = _ref5;
274
- return type && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n min-height: ", "px};\n transition: .3s;\n \n ", ";\n "])), type === 'year' ? '197' : fixedYear ? '144' : '192', type === 'year' && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n overflow-y: scroll;\n gap: 12px 0;\n ", "\n "])), _scrollbar.default));
275
- });
276
- const Item = _styledComponents.default.button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: 84px;\n height: 36px;\n line-height: 36px;\n text-align: center;\n border-radius: var(--border-radius-s);\n padding: 0;\n border: none;\n color: var(--font-on-background);\n background: var(--color-background1);\n\n &:hover {\n ", "\n }\n\n ", "\n\n ", "\n"])), _ref6 => {
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
- }, _ref7 => {
356
+ }}
357
+ }
358
+
359
+ ${_ref7 => {
282
360
  let {
283
361
  disabled
284
362
  } = _ref7;
285
363
  return disabled && 'color: var(--font-on-mute)';
286
- }, _ref8 => {
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
- function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
11
- const DescriptionDetail = _styledComponents.default.dd(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: var(--font-h3);\n line-height: 1.25;\n font-weight: bold;\n color: var(--font-on-background);\n word-break: break-all;\n white-space: pre-line;\n\n > a {\n color: var(--color-primary);\n }\n\n ", "\n"])), _ref => {
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
- function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
11
- const DescriptionList = _styledComponents.default.dl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex: 1;\n\n &:not(:last-child) {\n border-right: var(--border-width) solid var(--border-color);\n margin-right: var(--spacing);\n padding-right: var(--spacing);\n }\n\n ", "\n"])), _ref => {
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
- function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
11
- const DescriptionTerm = _styledComponents.default.dt(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: var(--font-h3);\n color: var(--font-on-mute);\n padding-bottom: var(--spacing-xs);\n"])));
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;
@@ -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
- function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
11
- const Divider = _styledComponents.default.hr(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: none;\n border-top: 1px solid var(--border-color);\n margin: var(--spacing-s);\n\n ", "\n\n ", "\n"])), _ref => {
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 && "\n margin-left: 0;\n margin-right: 0;\n ";
16
- }, _ref2 => {
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
- function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
11
- const DropdownButtonOption = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n padding: 12px var(--spacing-s);\n color: var(--font-on-background);\n background: var(--color-background2);\n width: 100%;\n border: none;\n cursor: ", ";\n\n &:hover {\n ", "\n }\n\n > svg {\n margin-right: var(--spacing-s);\n }\n\n ", "\n"])), _ref => {
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
- }, _ref2 => {
21
+ }};
22
+
23
+ &:hover {
24
+ ${_ref2 => {
17
25
  let {
18
26
  disabled
19
27
  } = _ref2;
20
28
  return !disabled && 'background: var(--color-hover);';
21
- }, _ref3 => {
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, _objectSpread(_objectSpread({
49
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
57
50
  ref: setContentElement,
58
51
  $display: display,
59
- style: styles.popper
60
- }, attributes.popper), {}, {
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(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n visibility: ", ";\n min-width: 160px;\n max-width: 320px;\n border: 1px solid var(--border-color);\n color: var(--font-on-background);\n background: var(--color-background2);\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n padding: var(--spacing-s) 0;\n z-index: 20;\n margin: 0 !important;\n\n ", "\n\n ", "\n"])), _ref2 => {
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
- }, _scrollbar.default, _ref3 => {
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 && "\n overflow-y: auto;\n overflow-x: hidden;\n max-height: min(320px, ((50vh - 36px) - 20px) - 36px);\n\n ";
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
- function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
11
- const DropdownDivOption = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n padding: 12px var(--spacing-s);\n color: var(--font-on-background);\n background: var(--color-background2);\n width: 100%;\n border: none;\n cursor: pointer;\n\n &:hover {\n background: var(--color-hover);\n }\n\n > svg {\n margin-right: var(--spacing-s);\n }\n"])));
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
- function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
12
- const DropdownLinkOption = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n padding: 12px var(--spacing-s);\n color: var(--font-on-background);\n background: var(--color-background2);\n\n &:hover {\n background: var(--color-hover);\n }\n\n > svg {\n margin-right: var(--spacing-s);\n }\n"])));
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
- children
22
- } = _ref,
23
- props = _objectWithoutProperties(_ref, _excluded);
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", _objectSpread(_objectSpread({
39
- onClick: handleToggle
40
- }, props), {}, {
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;