colibri-ui 0.7.131 → 0.7.133

package/Datepicker/components/DatePicker/index.d.ts

@@ -1,7 +1,4 @@
 import React from "react";
-type Props = {
-    className?: string;
-    selectedDate?: string;
-};
-declare const DatePicker: ({ className, selectedDate }: Props) => React.JSX.Element;
+import type { DatePickerProps } from "./index.props";
+declare const DatePicker: ({ className, selectedDate, onChangeDate, }: DatePickerProps) => React.JSX.Element;
 export default DatePicker;

package/Datepicker/components/DatePicker/index.js

@@ -19,10 +19,16 @@ var clx = classNames__default.default.bind(styles__default.default);
 var DatePicker = function DatePicker(_a) {
   var className = _a.className,
     _b = _a.selectedDate,
-    selectedDate = _b === void 0 ? "" : _b;
+    selectedDate = _b === void 0 ? "" : _b,
+    onChangeDate = _a.onChangeDate;
   var _c = React.useState(selectedDate),
     date = _c[0],
     setDate = _c[1];
+  var handleDateChange = function handleDateChange(payload) {
+    var newDate = payload.date;
+    setDate(newDate);
+    onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(newDate);
+  };
   return /*#__PURE__*/React__default.default.createElement(index.default, {
     placement: "bottom",
     preventAutoClose: true,
@@ -35,9 +41,7 @@ var DatePicker = function DatePicker(_a) {
       today: index$2.toISODate(new Date()),
       titleSize: "h5",
       selectedDate: date,
-      onChange: function onChange(payload) {
-        setDate(payload.date);
-      }
+      onChange: handleDateChange
     })
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default["input-container"], styles__default.default["input-date"], className)

package/Datepicker/components/DatePicker/index.props.d.ts

@@ -0,0 +1,5 @@
+export type DatePickerProps = {
+    className?: string;
+    selectedDate?: string;
+    onChangeDate?: (date: string) => void;
+};

package/Datepicker/components/TimePicker/index.d.ts

@@ -1,8 +1,4 @@
 import React from "react";
-interface TimePickerProps {
-    className?: string;
-    interval?: 5 | 10 | 15 | 30;
-    selectedTime?: string;
-}
-declare const _default: React.MemoExoticComponent<({ className, interval, selectedTime, }: TimePickerProps) => React.JSX.Element>;
+import type { TimePickerProps } from "./index.props";
+declare const _default: React.MemoExoticComponent<({ className, interval, selectedTime, onChangeTime, }: TimePickerProps) => React.JSX.Element>;
 export default _default;

package/Datepicker/components/TimePicker/index.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
 var React = require('react');
 var classNames = require('classnames/bind');
 var index$1 = require('../../../Select/index.js');
@@ -22,27 +21,26 @@ var TimePicker = function TimePicker(_a) {
     _b = _a.interval,
     interval = _b === void 0 ? 30 : _b,
     _c = _a.selectedTime,
-    selectedTime = _c === void 0 ? "" : _c;
+    selectedTime = _c === void 0 ? "" : _c,
+    onChangeTime = _a.onChangeTime;
   var _d = React.useState(selectedTime),
     time = _d[0],
     setTime = _d[1];
-  var baseOptions = React.useMemo(function () {
+  var options = React.useMemo(function () {
     return helpers.generateSuggest(interval).map(function (item) {
       return {
         value: item.time,
         label: /*#__PURE__*/React__default.default.createElement(index.default, {
           time: item.time
-        })
+        }),
+        disabled: false
       };
     });
   }, [interval]);
-  var options = React.useMemo(function () {
-    return baseOptions.map(function (option) {
-      return tslib.__assign(tslib.__assign({}, option), {
-        disabled: false
-      });
-    });
-  }, [baseOptions, interval]);
+  var handleChange = function handleChange(value) {
+    setTime(value);
+    onChangeTime === null || onChangeTime === void 0 ? void 0 : onChangeTime(value);
+  };
   return /*#__PURE__*/React__default.default.createElement(index$1.default, {
     className: clx(className, styles__default.default.select),
     options: options,
@@ -61,9 +59,7 @@ var TimePicker = function TimePicker(_a) {
       value: time
     })),
     value: time,
-    onChange: function onChange(value) {
-      return setTime(value);
-    }
+    onChange: handleChange
   });
 };
 var TimePickerInput = /*#__PURE__*/React.memo(TimePicker);

package/Datepicker/components/TimePicker/index.props.d.ts

@@ -0,0 +1,8 @@
+type TimePickerInterval = 5 | 10 | 15 | 30;
+export type TimePickerProps = {
+    className?: string;
+    interval?: TimePickerInterval;
+    selectedTime?: string;
+    onChangeTime?: (time: string) => void;
+};
+export {};

package/Datepicker/index.d.ts

@@ -1,8 +1,4 @@
 import React from "react";
-type Props = {
-    className?: string;
-    selectedTime?: string;
-    selectedDate?: string;
-};
-declare const Datepicker: ({ className, selectedTime, selectedDate }: Props) => React.JSX.Element;
+import type { Props } from "./index.props";
+declare const Datepicker: ({ className, selectedTime, selectedDate, onChangeDate, onChangeTime, }: Props) => React.JSX.Element;
 export default Datepicker;

package/Datepicker/index.js

@@ -18,13 +18,17 @@ var clx = classNames__default.default.bind(styles__default.default);
 var Datepicker = function Datepicker(_a) {
   var className = _a.className,
     selectedTime = _a.selectedTime,
-    selectedDate = _a.selectedDate;
+    selectedDate = _a.selectedDate,
+    onChangeDate = _a.onChangeDate,
+    onChangeTime = _a.onChangeTime;
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default.root, className)
   }, /*#__PURE__*/React__default.default.createElement(index.default, {
-    selectedTime: selectedTime
+    selectedTime: selectedTime,
+    onChangeTime: onChangeTime
   }), /*#__PURE__*/React__default.default.createElement(index$1.default, {
-    selectedDate: selectedDate
+    selectedDate: selectedDate,
+    onChangeDate: onChangeDate
   }));
 };
 

package/Datepicker/index.props.d.ts

@@ -0,0 +1,7 @@
+export type Props = {
+    className?: string;
+    selectedTime?: string;
+    selectedDate?: string;
+    onChangeTime?: (time: string) => void;
+    onChangeDate?: (date: string) => void;
+};

package/Dropdown/index.js

@@ -58,7 +58,7 @@ var Dropdown = function Dropdown(_a) {
         name: "flip",
         enabled: flip,
         options: {
-          fallbackPlacements: ['top']
+          fallbackPlacements: ["top"]
         }
       }, {
         name: "preventOverflow",

package/TabsMenu/Tab/Tab.js

@@ -20,17 +20,15 @@ var Tab = function Tab(_a) {
     className = _a.className,
     content = _a.content,
     disabled = _a.disabled,
-    first = _a.first,
     size = _a.size,
-    props = tslib.__rest(_a, ["innerRef", "active", "className", "content", "disabled", "first", "size"]);
+    props = tslib.__rest(_a, ["innerRef", "active", "className", "content", "disabled", "size"]);
   return /*#__PURE__*/React__default.default.createElement("li", tslib.__assign({}, props, {
     "aria-selected": active,
     ref: innerRef,
     className: clx(styles__default.default.tab, {
       tab_inactive: !active,
       tab_active: !!active,
-      tab_disabled: !!disabled,
-      tab_first: !!first
+      tab_disabled: !!disabled
     }, className),
     "data-size": size,
     role: "tab",

package/TabsMenu/Tab/Tab.module.css

@@ -1,7 +1,5 @@
 .tab {
   cursor: pointer;
-  display: inline-block;
-  margin-left: 16px;
   padding: 0 20px;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   transition-duration: 0.3s;

package/TabsMenu/Tab/Tab.props.d.ts

@@ -4,7 +4,6 @@ export type TabProps = {
     id?: string;
     active?: boolean;
     disabled?: boolean;
-    first?: boolean;
     content?: ReactNode;
     onClick?: MouseEventHandler<HTMLLIElement>;
     innerRef?: RefObject<HTMLLIElement>;

package/TabsMenu/TabsMenu.module.css

@@ -1,4 +1,8 @@
 .root {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  list-style: none;
   margin: 0;
   padding: 0;
 }

package/TabsMenu/index.js

@@ -72,7 +72,6 @@ var TabsMenu = function TabsMenu(_a) {
       tabProps = tslib.__rest(_a, ["id", "disabled"]);
     return /*#__PURE__*/React__default.default.createElement(Tab.default, tslib.__assign({}, tabProps, {
       innerRef: tabsRefs[index],
-      first: index === 0,
       disabled: disabled,
       size: size,
       onClick: disabled || !onChange && !tabProps.onClick ? undefined : function (event) {

package/esm/Datepicker/components/DatePicker/index.d.ts

@@ -1,7 +1,4 @@
 import React from "react";
-type Props = {
-    className?: string;
-    selectedDate?: string;
-};
-declare const DatePicker: ({ className, selectedDate }: Props) => React.JSX.Element;
+import type { DatePickerProps } from "./index.props";
+declare const DatePicker: ({ className, selectedDate, onChangeDate, }: DatePickerProps) => React.JSX.Element;
 export default DatePicker;

package/esm/Datepicker/components/DatePicker/index.js

@@ -9,10 +9,16 @@ var clx = classNames.bind(styles);
 var DatePicker = function DatePicker(_a) {
   var className = _a.className,
     _b = _a.selectedDate,
-    selectedDate = _b === void 0 ? "" : _b;
+    selectedDate = _b === void 0 ? "" : _b,
+    onChangeDate = _a.onChangeDate;
   var _c = useState(selectedDate),
     date = _c[0],
     setDate = _c[1];
+  var handleDateChange = function handleDateChange(payload) {
+    var newDate = payload.date;
+    setDate(newDate);
+    onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(newDate);
+  };
   return /*#__PURE__*/React__default.createElement(Dropdown, {
     placement: "bottom",
     preventAutoClose: true,
@@ -25,9 +31,7 @@ var DatePicker = function DatePicker(_a) {
       today: toISODate(new Date()),
       titleSize: "h5",
       selectedDate: date,
-      onChange: function onChange(payload) {
-        setDate(payload.date);
-      }
+      onChange: handleDateChange
     })
   }, /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles["input-container"], styles["input-date"], className)

package/esm/Datepicker/components/DatePicker/index.props.d.ts

@@ -0,0 +1,5 @@
+export type DatePickerProps = {
+    className?: string;
+    selectedDate?: string;
+    onChangeDate?: (date: string) => void;
+};

package/esm/Datepicker/components/TimePicker/index.d.ts

@@ -1,8 +1,4 @@
 import React from "react";
-interface TimePickerProps {
-    className?: string;
-    interval?: 5 | 10 | 15 | 30;
-    selectedTime?: string;
-}
-declare const _default: React.MemoExoticComponent<({ className, interval, selectedTime, }: TimePickerProps) => React.JSX.Element>;
+import type { TimePickerProps } from "./index.props";
+declare const _default: React.MemoExoticComponent<({ className, interval, selectedTime, onChangeTime, }: TimePickerProps) => React.JSX.Element>;
 export default _default;

package/esm/Datepicker/components/TimePicker/index.js

@@ -1,4 +1,3 @@
-import { __assign } from 'tslib';
 import React__default, { useState, useMemo, memo } from 'react';
 import classNames from 'classnames/bind';
 import Select from '../../../Select/index.js';
@@ -12,27 +11,26 @@ var TimePicker = function TimePicker(_a) {
     _b = _a.interval,
     interval = _b === void 0 ? 30 : _b,
     _c = _a.selectedTime,
-    selectedTime = _c === void 0 ? "" : _c;
+    selectedTime = _c === void 0 ? "" : _c,
+    onChangeTime = _a.onChangeTime;
   var _d = useState(selectedTime),
     time = _d[0],
     setTime = _d[1];
-  var baseOptions = useMemo(function () {
+  var options = useMemo(function () {
     return generateSuggest(interval).map(function (item) {
       return {
         value: item.time,
         label: /*#__PURE__*/React__default.createElement(OptionLabel, {
           time: item.time
-        })
+        }),
+        disabled: false
       };
     });
   }, [interval]);
-  var options = useMemo(function () {
-    return baseOptions.map(function (option) {
-      return __assign(__assign({}, option), {
-        disabled: false
-      });
-    });
-  }, [baseOptions, interval]);
+  var handleChange = function handleChange(value) {
+    setTime(value);
+    onChangeTime === null || onChangeTime === void 0 ? void 0 : onChangeTime(value);
+  };
   return /*#__PURE__*/React__default.createElement(Select, {
     className: clx(className, styles.select),
     options: options,
@@ -51,9 +49,7 @@ var TimePicker = function TimePicker(_a) {
       value: time
     })),
     value: time,
-    onChange: function onChange(value) {
-      return setTime(value);
-    }
+    onChange: handleChange
   });
 };
 var TimePickerInput = /*#__PURE__*/memo(TimePicker);

package/esm/Datepicker/components/TimePicker/index.props.d.ts

@@ -0,0 +1,8 @@
+type TimePickerInterval = 5 | 10 | 15 | 30;
+export type TimePickerProps = {
+    className?: string;
+    interval?: TimePickerInterval;
+    selectedTime?: string;
+    onChangeTime?: (time: string) => void;
+};
+export {};

package/esm/Datepicker/index.d.ts

@@ -1,8 +1,4 @@
 import React from "react";
-type Props = {
-    className?: string;
-    selectedTime?: string;
-    selectedDate?: string;
-};
-declare const Datepicker: ({ className, selectedTime, selectedDate }: Props) => React.JSX.Element;
+import type { Props } from "./index.props";
+declare const Datepicker: ({ className, selectedTime, selectedDate, onChangeDate, onChangeTime, }: Props) => React.JSX.Element;
 export default Datepicker;

package/esm/Datepicker/index.js

@@ -8,13 +8,17 @@ var clx = classNames.bind(styles);
 var Datepicker = function Datepicker(_a) {
   var className = _a.className,
     selectedTime = _a.selectedTime,
-    selectedDate = _a.selectedDate;
+    selectedDate = _a.selectedDate,
+    onChangeDate = _a.onChangeDate,
+    onChangeTime = _a.onChangeTime;
   return /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.root, className)
   }, /*#__PURE__*/React__default.createElement(TimePickerInput, {
-    selectedTime: selectedTime
+    selectedTime: selectedTime,
+    onChangeTime: onChangeTime
   }), /*#__PURE__*/React__default.createElement(DatePicker, {
-    selectedDate: selectedDate
+    selectedDate: selectedDate,
+    onChangeDate: onChangeDate
   }));
 };
 

package/esm/Datepicker/index.props.d.ts

@@ -0,0 +1,7 @@
+export type Props = {
+    className?: string;
+    selectedTime?: string;
+    selectedDate?: string;
+    onChangeTime?: (time: string) => void;
+    onChangeDate?: (date: string) => void;
+};

package/esm/Dropdown/index.js

@@ -48,7 +48,7 @@ var Dropdown = function Dropdown(_a) {
         name: "flip",
         enabled: flip,
         options: {
-          fallbackPlacements: ['top']
+          fallbackPlacements: ["top"]
         }
       }, {
         name: "preventOverflow",

package/esm/TabsMenu/Tab/Tab.js

@@ -10,17 +10,15 @@ var Tab = function Tab(_a) {
     className = _a.className,
     content = _a.content,
     disabled = _a.disabled,
-    first = _a.first,
     size = _a.size,
-    props = __rest(_a, ["innerRef", "active", "className", "content", "disabled", "first", "size"]);
+    props = __rest(_a, ["innerRef", "active", "className", "content", "disabled", "size"]);
   return /*#__PURE__*/React__default.createElement("li", __assign({}, props, {
     "aria-selected": active,
     ref: innerRef,
     className: clx(styles.tab, {
       tab_inactive: !active,
       tab_active: !!active,
-      tab_disabled: !!disabled,
-      tab_first: !!first
+      tab_disabled: !!disabled
     }, className),
     "data-size": size,
     role: "tab",

package/esm/TabsMenu/Tab/Tab.module.css

@@ -1,7 +1,5 @@
 .tab {
   cursor: pointer;
-  display: inline-block;
-  margin-left: 16px;
   padding: 0 20px;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   transition-duration: 0.3s;

package/esm/TabsMenu/Tab/Tab.props.d.ts

@@ -4,7 +4,6 @@ export type TabProps = {
     id?: string;
     active?: boolean;
     disabled?: boolean;
-    first?: boolean;
     content?: ReactNode;
     onClick?: MouseEventHandler<HTMLLIElement>;
     innerRef?: RefObject<HTMLLIElement>;

package/esm/TabsMenu/TabsMenu.module.css

@@ -1,4 +1,8 @@
 .root {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  list-style: none;
   margin: 0;
   padding: 0;
 }

package/esm/TabsMenu/index.js

@@ -62,7 +62,6 @@ var TabsMenu = function TabsMenu(_a) {
       tabProps = __rest(_a, ["id", "disabled"]);
     return /*#__PURE__*/React__default.createElement(Tab, __assign({}, tabProps, {
       innerRef: tabsRefs[index],
-      first: index === 0,
       disabled: disabled,
       size: size,
       onClick: disabled || !onChange && !tabProps.onClick ? undefined : function (event) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.131",
+  "version": "0.7.133",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},