@cashub/ui 0.21.0 → 0.21.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.
Files changed (229) hide show
  1. package/Tab/Tab.js +9 -13
  2. package/Tab/TabList.js +14 -32
  3. package/Tab/TabPanel.js +21 -58
  4. package/Tab/TabTab.js +20 -40
  5. package/Tab/index.js +2 -10
  6. package/Tab/subComponent/TabContext.js +2 -5
  7. package/animate/Collapse.js +26 -53
  8. package/animate/Loader.js +21 -26
  9. package/animate/NumberCounter.js +22 -44
  10. package/animate/PulseRing.js +9 -21
  11. package/animate/Spinner.js +2 -10
  12. package/animate/index.js +5 -11
  13. package/backdrop/BaseBackdrop.js +2 -9
  14. package/backdrop/LoadingBackdrop.js +2 -9
  15. package/backdrop/ModalBackdrop.js +2 -9
  16. package/backdrop/index.js +3 -7
  17. package/badge/Badge.js +2 -11
  18. package/badge/BadgeDot.js +2 -10
  19. package/badge/BadgeFill.js +15 -20
  20. package/badge/BadgeWithText.js +6 -13
  21. package/badge/index.js +4 -9
  22. package/billing/BarChart.js +10 -17
  23. package/billing/Grid.js +11 -15
  24. package/billing/Header2.js +6 -9
  25. package/billing/Header3.js +9 -16
  26. package/billing/Paragraph.js +8 -14
  27. package/billing/ParagraphGroup.js +6 -9
  28. package/billing/ParagraphText.js +7 -12
  29. package/billing/Section.js +13 -23
  30. package/billing/SectionBody.js +5 -8
  31. package/billing/SectionHeader.js +7 -12
  32. package/breadcrumb/Breadcrumb.js +11 -21
  33. package/breadcrumb/index.js +1 -3
  34. package/button/Button.js +41 -38
  35. package/button/ButtonGroup.js +21 -18
  36. package/button/IconButton.js +29 -29
  37. package/button/ScrollToTopButton.js +12 -39
  38. package/button/index.js +4 -9
  39. package/callout/Callout.js +13 -26
  40. package/callout/index.js +1 -3
  41. package/chart/BarChart.js +28 -53
  42. package/chart/DoughnutChart.js +23 -62
  43. package/chart/LineChart.js +33 -55
  44. package/chart/SingleBarChart.js +11 -17
  45. package/chart/index.js +5 -12
  46. package/chart/utils/customTooltip.js +26 -43
  47. package/chart/utils/htmlLegendPlugin.js +24 -30
  48. package/chart/utils/index.js +3 -7
  49. package/chart/utils/padEmptyChartBar.js +24 -22
  50. package/container/FlexContainer.js +9 -12
  51. package/container/index.js +1 -3
  52. package/cropper/Cropper.js +21 -34
  53. package/cropper/CropperModalHandler.js +15 -21
  54. package/cropper/index.js +2 -5
  55. package/cropper/subComponent/CropImageModal.js +23 -58
  56. package/datetimePicker/DatePicker.js +103 -217
  57. package/datetimePicker/DatePickerV2.js +116 -221
  58. package/datetimePicker/DatetimePicker.js +27 -48
  59. package/datetimePicker/DatetimePickerV2.js +115 -231
  60. package/datetimePicker/TimeInput.js +9 -22
  61. package/datetimePicker/TimePicker.js +94 -151
  62. package/datetimePicker/TimePickerStyle.js +2 -9
  63. package/datetimePicker/accordion/Month.js +70 -90
  64. package/datetimePicker/accordion/Year.js +91 -135
  65. package/datetimePicker/hooks/index.js +3 -7
  66. package/datetimePicker/hooks/useChangeNumber.js +14 -27
  67. package/datetimePicker/hooks/useDecrease.js +19 -35
  68. package/datetimePicker/hooks/useIncrease.js +19 -35
  69. package/datetimePicker/index.js +7 -15
  70. package/datetimePicker/provider/constant.js +2 -3
  71. package/datetimePicker/subComponent/Accordion.js +108 -158
  72. package/datetimePicker/subComponent/CustomTimeInput.js +18 -48
  73. package/datetimePicker/subComponent/DateTimePickerContext.js +2 -5
  74. package/datetimePicker/utils/GMTDate.js +3 -7
  75. package/datetimePicker/utils/pad.js +2 -6
  76. package/datetimePicker/utils/toUTC0.js +3 -6
  77. package/descriptionList/DescriptionDetail.js +5 -10
  78. package/descriptionList/DescriptionList.js +5 -10
  79. package/descriptionList/DescriptionTerm.js +2 -9
  80. package/descriptionList/index.js +3 -7
  81. package/divider/Divider.js +9 -12
  82. package/divider/index.js +1 -3
  83. package/dropdown/Dropdown.js +28 -65
  84. package/dropdown/DropdownButtonOption.js +2 -9
  85. package/dropdown/DropdownContent.js +33 -64
  86. package/dropdown/DropdownDivOption.js +2 -9
  87. package/dropdown/DropdownItem.js +10 -16
  88. package/dropdown/DropdownLinkOption.js +2 -9
  89. package/dropdown/DropdownToggle.js +18 -38
  90. package/dropdown/index.js +6 -17
  91. package/dropdown/subComponent/DropdownContext.js +2 -5
  92. package/dropzone/FileDropzone.js +148 -302
  93. package/dropzone/ImageDropzone.js +96 -171
  94. package/dropzone/index.js +2 -5
  95. package/dropzone/subComponent/Message.js +7 -14
  96. package/figure/IconFigure.js +9 -16
  97. package/figure/ImageFigure.js +11 -17
  98. package/figure/index.js +2 -5
  99. package/file/HiddenFileInput.js +5 -14
  100. package/file/index.js +1 -3
  101. package/form/Checkbox.js +34 -43
  102. package/form/FormItem.js +2 -9
  103. package/form/Input.js +13 -15
  104. package/form/Label.js +10 -13
  105. package/form/MutedText.js +5 -10
  106. package/form/RadioButton.js +20 -32
  107. package/form/Searchbox.js +21 -65
  108. package/form/Slider.js +14 -0
  109. package/form/SwitchButton.js +34 -39
  110. package/form/Textarea.js +2 -11
  111. package/form/index.js +9 -19
  112. package/grid/Column.js +17 -17
  113. package/grid/Grid.js +13 -14
  114. package/grid/index.js +2 -5
  115. package/heading/Heading1.js +5 -10
  116. package/heading/Heading2.js +9 -12
  117. package/heading/Heading3.js +21 -18
  118. package/heading/index.js +3 -7
  119. package/helmet/Helmet.js +6 -9
  120. package/helmet/index.js +2 -5
  121. package/iconbox/ApplicationIconBox.js +25 -31
  122. package/iconbox/IconBox.js +11 -24
  123. package/iconbox/IconBoxV2.js +14 -26
  124. package/iconbox/index.js +3 -7
  125. package/iconbox/subComponent/IconBoxFigure.js +25 -20
  126. package/iconbox/subComponent/IconBoxImage.js +15 -18
  127. package/image/ImageFluid.js +2 -10
  128. package/image/UploadImage.js +65 -113
  129. package/image/index.js +2 -5
  130. package/index.js +44 -130
  131. package/jsoneditor/JsonEditor.js +10 -32
  132. package/jsoneditor/index.js +1 -3
  133. package/keyframe/Pulse.js +2 -7
  134. package/keyframe/Spin.js +2 -7
  135. package/link/LinkSpan.js +22 -35
  136. package/link/index.js +1 -3
  137. package/map/GoogleMap.js +122 -175
  138. package/map/GoogleReverseGeolocation.js +79 -186
  139. package/map/LeafletMap.js +78 -132
  140. package/map/LeafletReverseGeolocation.js +49 -121
  141. package/map/index.js +4 -9
  142. package/map/subComponent/BasicLeafletMap.js +8 -14
  143. package/map/subComponent/GoogleMapContainer.js +5 -10
  144. package/map/subComponent/GoogleMapPopup.js +66 -123
  145. package/map/subComponent/GoogleMapWrapper.js +13 -32
  146. package/map/subComponent/GoogleMarkerSpiderfier.js +14 -24
  147. package/map/subComponent/LeafletDrawControl.js +47 -84
  148. package/map/subComponent/LeafletMapContainer.js +5 -10
  149. package/map/subComponent/MapSearchBoxControl.js +24 -70
  150. package/modal/StateModal.js +41 -100
  151. package/modal/TitleModal.js +89 -190
  152. package/modal/index.js +2 -5
  153. package/package.json +1 -1
  154. package/paginate/Paginate.js +40 -54
  155. package/paginate/index.js +1 -3
  156. package/popover/Popover.js +39 -87
  157. package/popover/index.js +1 -3
  158. package/qrcode/QRCode.js +10 -23
  159. package/qrcode/QRCodeContainter.js +8 -16
  160. package/qrcode/index.js +2 -5
  161. package/ribbon/Ribbon.js +4 -15
  162. package/ribbon/index.js +1 -3
  163. package/section/Section.js +57 -39
  164. package/section/SectionBody.js +15 -22
  165. package/section/SectionHeader.js +27 -27
  166. package/section/SectionToolbar.js +2 -9
  167. package/section/SectionToolbarItem.js +2 -9
  168. package/section/index.js +5 -11
  169. package/select/InputSelect.js +103 -215
  170. package/select/Select.js +204 -362
  171. package/select/index.js +2 -5
  172. package/select/subComponent/ListBox.js +9 -12
  173. package/select/subComponent/Option.js +8 -16
  174. package/select/subComponent/OptionGroup.js +2 -9
  175. package/select/subComponent/Options.js +5 -11
  176. package/select/subComponent/SearchBox.js +9 -29
  177. package/select/subComponent/SelectedMultiple.js +8 -16
  178. package/select/subComponent/SelectedSingle.js +2 -9
  179. package/styles/GlobalStyle.js +169 -91
  180. package/styles/config/breakpoint.style.js +2 -3
  181. package/styles/config/header.style.js +2 -3
  182. package/styles/config/sidebar.style.js +2 -3
  183. package/styles/index.js +2 -5
  184. package/styles/mixin/backgroundColor.js +17 -14
  185. package/styles/mixin/borderColor.js +17 -14
  186. package/styles/mixin/color.js +17 -14
  187. package/styles/mixin/colorOnBackground.js +17 -14
  188. package/styles/mixin/inputPlaceholder.js +3 -9
  189. package/styles/mixin/media.js +3 -11
  190. package/styles/mixin/rounded.js +13 -12
  191. package/styles/mixin/scrollbar.js +7 -13
  192. package/styles/theme/dark.theme.js +20 -20
  193. package/styles/theme/light.theme.js +20 -20
  194. package/styles/theme/white.theme.js +20 -20
  195. package/styles/themes.js +2 -8
  196. package/table/GridTable.js +105 -143
  197. package/table/ImageBox.js +8 -18
  198. package/table/PermissionTable.js +25 -25
  199. package/table/Table.js +137 -153
  200. package/table/__mock__/columns.js +2 -3
  201. package/table/__mock__/data.js +2 -3
  202. package/table/hooks/index.js +2 -5
  203. package/table/hooks/useCalculateDataRange.js +9 -36
  204. package/table/hooks/useGenerateSort.js +6 -17
  205. package/table/index.js +4 -9
  206. package/table/subComponent/BaseTableHeadCell.js +15 -21
  207. package/table/subComponent/GridTableFooter.js +5 -10
  208. package/table/subComponent/GridTableHeadCell.js +5 -10
  209. package/table/subComponent/Resizer.js +17 -44
  210. package/table/subComponent/TableFooter.js +5 -10
  211. package/table/subComponent/TableFooterInfo.js +2 -9
  212. package/table/subComponent/TableFooterPager.js +5 -12
  213. package/table/subComponent/TableHeadCell.js +2 -9
  214. package/table/subComponent/TableSort.js +13 -19
  215. package/tagify/TagifyStyle.js +2 -9
  216. package/tagify/Tags.js +15 -37
  217. package/tagify/index.js +2 -5
  218. package/text/Paragraph.js +25 -20
  219. package/text/index.js +1 -3
  220. package/timeline/Timeline.js +28 -37
  221. package/timeline/index.js +1 -3
  222. package/toast/CustomToastContainer.js +2 -9
  223. package/toast/MessageContainer.js +9 -18
  224. package/toast/index.js +3 -8
  225. package/toast/show.js +18 -28
  226. package/tooltip/Tooltip.js +48 -97
  227. package/tooltip/index.js +1 -3
  228. package/wizard/Wizard.js +63 -133
  229. package/wizard/index.js +1 -3
@@ -4,16 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
-
10
8
  var _templateObject;
11
-
12
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
10
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
15
-
16
- var 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"])));
17
-
18
- var _default = DescriptionTerm;
19
- exports.default = _default;
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"])));
12
+ var _default = exports.default = DescriptionTerm;
@@ -5,27 +5,23 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  Object.defineProperty(exports, "DescriptionDetail", {
7
7
  enumerable: true,
8
- get: function get() {
8
+ get: function () {
9
9
  return _DescriptionDetail.default;
10
10
  }
11
11
  });
12
12
  Object.defineProperty(exports, "DescriptionList", {
13
13
  enumerable: true,
14
- get: function get() {
14
+ get: function () {
15
15
  return _DescriptionList.default;
16
16
  }
17
17
  });
18
18
  Object.defineProperty(exports, "DescriptionTerm", {
19
19
  enumerable: true,
20
- get: function get() {
20
+ get: function () {
21
21
  return _DescriptionTerm.default;
22
22
  }
23
23
  });
24
-
25
24
  var _DescriptionDetail = _interopRequireDefault(require("./DescriptionDetail"));
26
-
27
25
  var _DescriptionList = _interopRequireDefault(require("./DescriptionList"));
28
-
29
26
  var _DescriptionTerm = _interopRequireDefault(require("./DescriptionTerm"));
30
-
31
27
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -4,22 +4,19 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
-
10
8
  var _templateObject;
11
-
12
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
10
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
15
-
16
- var 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"])), function (_ref) {
17
- var noMarginX = _ref.noMarginX;
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 => {
12
+ let {
13
+ noMarginX
14
+ } = _ref;
18
15
  return noMarginX && "\n margin-left: 0;\n margin-right: 0;\n ";
19
- }, function (_ref2) {
20
- var dashed = _ref2.dashed;
16
+ }, _ref2 => {
17
+ let {
18
+ dashed
19
+ } = _ref2;
21
20
  return dashed && 'border-top-style: dashed;';
22
21
  });
23
-
24
- var _default = Divider;
25
- exports.default = _default;
22
+ var _default = exports.default = Divider;
package/divider/index.js CHANGED
@@ -5,11 +5,9 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  Object.defineProperty(exports, "Divider", {
7
7
  enumerable: true,
8
- get: function get() {
8
+ get: function () {
9
9
  return _Divider.default;
10
10
  }
11
11
  });
12
-
13
12
  var _Divider = _interopRequireDefault(require("./Divider"));
14
-
15
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -4,89 +4,52 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
11
-
12
9
  var _hooks = require("@cashub/hooks");
13
-
14
10
  var _DropdownContext = _interopRequireDefault(require("./subComponent/DropdownContext"));
15
-
16
11
  var _jsxRuntime = require("react/jsx-runtime");
17
-
18
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
-
20
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
21
-
22
- 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."); }
23
-
24
- 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); }
25
-
26
- 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; }
27
-
28
- function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
29
-
30
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
31
-
32
- var Dropdown = function Dropdown(_ref) {
33
- var children = _ref.children,
34
- fixed = _ref.fixed;
35
-
36
- var _useState = (0, _react.useState)(null),
37
- _useState2 = _slicedToArray(_useState, 2),
38
- initialized = _useState2[0],
39
- setInitialized = _useState2[1];
40
-
41
- var _useState3 = (0, _react.useState)(false),
42
- _useState4 = _slicedToArray(_useState3, 2),
43
- display = _useState4[0],
44
- setDisplay = _useState4[1];
45
-
46
- var _useState5 = (0, _react.useState)(null),
47
- _useState6 = _slicedToArray(_useState5, 2),
48
- toggleElement = _useState6[0],
49
- setToggleElement = _useState6[1];
50
-
51
- var _useState7 = (0, _react.useState)(null),
52
- _useState8 = _slicedToArray(_useState7, 2),
53
- contentElement = _useState8[0],
54
- setContentElement = _useState8[1];
55
-
56
- var _useCustomPopper = (0, _hooks.useCustomPopper)(toggleElement, contentElement, {
13
+ const Dropdown = _ref => {
14
+ let {
15
+ children,
16
+ fixed
17
+ } = _ref;
18
+ const [initialized, setInitialized] = (0, _react.useState)(null);
19
+ const [display, setDisplay] = (0, _react.useState)(false);
20
+ const [toggleElement, setToggleElement] = (0, _react.useState)(null);
21
+ const [contentElement, setContentElement] = (0, _react.useState)(null);
22
+ const {
23
+ styles,
24
+ attributes,
25
+ state,
26
+ update
27
+ } = (0, _hooks.useCustomPopper)(toggleElement, contentElement, {
57
28
  strategy: fixed ? 'fixed' : 'absolute'
58
- }),
59
- styles = _useCustomPopper.styles,
60
- attributes = _useCustomPopper.attributes,
61
- state = _useCustomPopper.state,
62
- update = _useCustomPopper.update;
63
-
64
- var handleSelect = function handleSelect() {
29
+ });
30
+ const handleSelect = () => {
65
31
  setDisplay(false);
66
32
  };
67
-
68
- var context = {
69
- display: display,
70
- setDisplay: setDisplay,
71
- handleSelect: handleSelect,
72
- setInitialized: setInitialized,
33
+ const context = {
34
+ display,
35
+ setDisplay,
36
+ handleSelect,
37
+ setInitialized,
73
38
  setToggleElement: initialized ? setToggleElement : null,
74
39
  setContentElement: initialized ? setContentElement : null,
75
- styles: styles,
76
- attributes: attributes,
77
- state: state,
78
- update: update
40
+ styles,
41
+ attributes,
42
+ state,
43
+ update
79
44
  };
80
45
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContext.default.Provider, {
81
46
  value: context,
82
47
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOutsideClickHandler.default, {
83
- onOutsideClick: function onOutsideClick() {
48
+ onOutsideClick: () => {
84
49
  setDisplay(false);
85
50
  },
86
51
  children: children
87
52
  })
88
53
  });
89
54
  };
90
-
91
- var _default = Dropdown;
92
- exports.default = _default;
55
+ var _default = exports.default = Dropdown;
@@ -4,16 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
-
10
8
  var _templateObject;
11
-
12
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
10
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
15
-
16
- var 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: pointer;\n\n &:hover {\n background: var(--color-hover);\n }\n\n > svg {\n margin-right: var(--spacing-s);\n }\n"])));
17
-
18
- var _default = DropdownButtonOption;
19
- exports.default = _default;
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: pointer;\n\n &:hover {\n background: var(--color-hover);\n }\n\n > svg {\n margin-right: var(--spacing-s);\n }\n"])));
12
+ var _default = exports.default = DropdownButtonOption;
@@ -4,99 +4,68 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
-
12
9
  var _DropdownContext = _interopRequireDefault(require("./subComponent/DropdownContext"));
13
-
14
10
  var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
15
-
16
11
  var _jsxRuntime = require("react/jsx-runtime");
17
-
18
12
  var _templateObject;
19
-
20
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
-
22
14
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
23
-
24
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
25
-
26
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
27
-
28
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
29
-
30
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
31
-
32
- 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."); }
33
-
34
- 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); }
35
-
36
- 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; }
37
-
38
- function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
39
-
40
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
41
-
42
- var DropdownContent = function DropdownContent(_ref) {
43
- var children = _ref.children,
44
- onShow = _ref.onShow,
45
- onClose = _ref.onClose,
46
- _ref$showScrollbar = _ref.showScrollbar,
47
- showScrollbar = _ref$showScrollbar === void 0 ? true : _ref$showScrollbar;
48
-
49
- var _useContext = (0, _react.useContext)(_DropdownContext.default),
50
- display = _useContext.display,
51
- setContentElement = _useContext.setContentElement,
52
- styles = _useContext.styles,
53
- attributes = _useContext.attributes,
54
- update = _useContext.update;
55
-
56
- var _useState = (0, _react.useState)(false),
57
- _useState2 = _slicedToArray(_useState, 2),
58
- isToggle = _useState2[0],
59
- setIsToggle = _useState2[1];
60
-
61
- (0, _react.useEffect)(function () {
15
+ const DropdownContent = _ref => {
16
+ let {
17
+ children,
18
+ onShow,
19
+ onClose,
20
+ showScrollbar = true
21
+ } = _ref;
22
+ const {
23
+ display,
24
+ setContentElement,
25
+ styles,
26
+ attributes,
27
+ update
28
+ } = (0, _react.useContext)(_DropdownContext.default);
29
+ const [isToggle, setIsToggle] = (0, _react.useState)(false);
30
+ (0, _react.useEffect)(() => {
62
31
  if (isToggle) {
63
32
  if (display && onShow) {
64
33
  onShow();
65
34
  }
66
-
67
35
  if (!display && onClose) {
68
36
  onClose();
69
37
  }
70
-
71
38
  setIsToggle(false);
72
39
  }
73
40
  }, [isToggle, display, onShow, onClose]);
74
- (0, _react.useEffect)(function () {
41
+ (0, _react.useEffect)(() => {
75
42
  setIsToggle(true);
76
- }, [display]); // rerender時不會更新位置,所以補上children讓rerender時可以更新位置
43
+ }, [display]);
77
44
 
78
- (0, _react.useEffect)(function () {
45
+ // rerender時不會更新位置,所以補上children讓rerender時可以更新位置
46
+ (0, _react.useEffect)(() => {
79
47
  if (update) {
80
48
  update();
81
49
  }
82
50
  }, [update, children]);
83
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, _objectSpread(_objectSpread({
51
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
84
52
  ref: setContentElement,
85
53
  $display: display,
86
- style: styles.popper
87
- }, attributes.popper), {}, {
54
+ style: styles.popper,
55
+ ...attributes.popper,
88
56
  showScrollbar: showScrollbar,
89
57
  children: children
90
- }));
58
+ });
91
59
  };
92
-
93
- var 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"])), function (_ref2) {
94
- var $display = _ref2.$display;
60
+ 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 => {
61
+ let {
62
+ $display
63
+ } = _ref2;
95
64
  return $display === true ? 'visible' : 'hidden';
96
- }, _scrollbar.default, function (_ref3) {
97
- var showScrollbar = _ref3.showScrollbar;
65
+ }, _scrollbar.default, _ref3 => {
66
+ let {
67
+ showScrollbar
68
+ } = _ref3;
98
69
  return showScrollbar && "\n overflow-y: auto;\n overflow-x: hidden;\n max-height: min(320px, ((50vh - 36px) - 20px) - 36px);\n\n ";
99
70
  });
100
-
101
- var _default = DropdownContent;
102
- exports.default = _default;
71
+ var _default = exports.default = DropdownContent;
@@ -4,16 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
-
10
8
  var _templateObject;
11
-
12
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
10
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
15
-
16
- var 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"])));
17
-
18
- var _default = DropdownDivOption;
19
- exports.default = _default;
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"])));
12
+ var _default = exports.default = DropdownDivOption;
@@ -4,29 +4,23 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var _DropdownContext = _interopRequireDefault(require("./subComponent/DropdownContext"));
11
-
12
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
- var DropdownItem = function DropdownItem(_ref) {
15
- var children = _ref.children,
16
- onClick = _ref.onClick;
17
-
18
- var _useContext = (0, _react.useContext)(_DropdownContext.default),
19
- handleSelect = _useContext.handleSelect;
20
-
21
- var handleClick = function handleClick(event) {
10
+ const DropdownItem = _ref => {
11
+ let {
12
+ children,
13
+ onClick
14
+ } = _ref;
15
+ const {
16
+ handleSelect
17
+ } = (0, _react.useContext)(_DropdownContext.default);
18
+ const handleClick = event => {
22
19
  if (onClick) onClick(event);
23
20
  handleSelect();
24
21
  };
25
-
26
22
  return /*#__PURE__*/(0, _react.cloneElement)(children, {
27
23
  onClick: handleClick
28
24
  });
29
25
  };
30
-
31
- var _default = DropdownItem;
32
- exports.default = _default;
26
+ var _default = exports.default = DropdownItem;
@@ -4,17 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
-
10
8
  var _reactRouterDom = require("react-router-dom");
11
-
12
9
  var _templateObject;
13
-
14
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
-
16
11
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
17
-
18
- var 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"])));
19
- var _default = DropdownLinkOption;
20
- exports.default = _default;
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"])));
13
+ var _default = exports.default = DropdownLinkOption;
@@ -4,55 +4,35 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var _DropdownContext = _interopRequireDefault(require("./subComponent/DropdownContext"));
11
-
12
9
  var _jsxRuntime = require("react/jsx-runtime");
13
-
14
- var _excluded = ["children"];
15
-
16
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
19
-
20
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
21
-
22
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
23
-
24
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
25
-
26
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
27
-
28
- var DropdownToggle = function DropdownToggle(_ref) {
29
- var children = _ref.children,
30
- props = _objectWithoutProperties(_ref, _excluded);
31
-
32
- var _useContext = (0, _react.useContext)(_DropdownContext.default),
33
- display = _useContext.display,
34
- setDisplay = _useContext.setDisplay,
35
- setInitialized = _useContext.setInitialized,
36
- setToggleElement = _useContext.setToggleElement,
37
- update = _useContext.update;
38
-
39
- var handleToggle = function handleToggle() {
11
+ const DropdownToggle = _ref => {
12
+ let {
13
+ children,
14
+ ...props
15
+ } = _ref;
16
+ const {
17
+ display,
18
+ setDisplay,
19
+ setInitialized,
20
+ setToggleElement,
21
+ update
22
+ } = (0, _react.useContext)(_DropdownContext.default);
23
+ const handleToggle = () => {
40
24
  setInitialized(true);
41
25
  setDisplay(!display);
42
-
43
26
  if (update) {
44
27
  update();
45
28
  }
46
29
  };
47
-
48
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
49
- onClick: handleToggle
50
- }, props), {}, {
30
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
31
+ onClick: handleToggle,
32
+ ...props,
51
33
  children: /*#__PURE__*/(0, _react.cloneElement)(children, {
52
34
  ref: setToggleElement
53
35
  })
54
- }));
36
+ });
55
37
  };
56
-
57
- var _default = DropdownToggle;
58
- exports.default = _default;
38
+ var _default = exports.default = DropdownToggle;
package/dropdown/index.js CHANGED
@@ -5,49 +5,38 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  Object.defineProperty(exports, "DropdownButtonOption", {
7
7
  enumerable: true,
8
- get: function get() {
8
+ get: function () {
9
9
  return _DropdownButtonOption.default;
10
10
  }
11
11
  });
12
12
  Object.defineProperty(exports, "DropdownDivOption", {
13
13
  enumerable: true,
14
- get: function get() {
14
+ get: function () {
15
15
  return _DropdownDivOption.default;
16
16
  }
17
17
  });
18
18
  Object.defineProperty(exports, "DropdownItem", {
19
19
  enumerable: true,
20
- get: function get() {
20
+ get: function () {
21
21
  return _DropdownItem.default;
22
22
  }
23
23
  });
24
24
  Object.defineProperty(exports, "DropdownLinkOption", {
25
25
  enumerable: true,
26
- get: function get() {
26
+ get: function () {
27
27
  return _DropdownLinkOption.default;
28
28
  }
29
29
  });
30
30
  exports.default = void 0;
31
-
32
31
  var _Dropdown = _interopRequireDefault(require("./Dropdown"));
33
-
34
32
  var _DropdownToggle = _interopRequireDefault(require("./DropdownToggle"));
35
-
36
33
  var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
37
-
38
34
  var _DropdownItem = _interopRequireDefault(require("./DropdownItem"));
39
-
40
35
  var _DropdownButtonOption = _interopRequireDefault(require("./DropdownButtonOption"));
41
-
42
36
  var _DropdownDivOption = _interopRequireDefault(require("./DropdownDivOption"));
43
-
44
37
  var _DropdownLinkOption = _interopRequireDefault(require("./DropdownLinkOption"));
45
-
46
38
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
47
-
48
- var _default = Object.assign(_Dropdown.default, {
39
+ var _default = exports.default = Object.assign(_Dropdown.default, {
49
40
  Toggle: _DropdownToggle.default,
50
41
  Content: _DropdownContent.default
51
- });
52
-
53
- exports.default = _default;
42
+ });
@@ -4,9 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
- var DropdownContext = /*#__PURE__*/(0, _react.createContext)(null);
11
- var _default = DropdownContext;
12
- exports.default = _default;
8
+ const DropdownContext = /*#__PURE__*/(0, _react.createContext)(null);
9
+ var _default = exports.default = DropdownContext;