colibri-ui 0.8.1 → 0.8.3

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

@@ -0,0 +1,12 @@
+export type Timestamp = {
+    time: string;
+    disabled?: boolean;
+};
+export declare const DEFAULT_TIME: {
+    index: number;
+    time: string;
+};
+export declare const formatTime: (date: Date) => string;
+export declare const generateSuggest: (interval?: number) => Timestamp[];
+export declare const checkIsBeforeNow: (time: string, currentDate?: Date | null) => boolean;
+export declare const checkIsBeforeSelectedDate: (time: string, interval: number, date?: Date | null) => boolean;

package/Datepicker/components/TimePicker/helpers.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var dateFns = require('date-fns');
+
+var day = new Date();
+day.setHours(24, 0, 0, 0);
+var DEFAULT_TIME = {
+  index: 24,
+  time: "12:00"
+};
+var formatTime = function formatTime(date) {
+  return dateFns.format(date, "HH:mm");
+};
+var generateSuggest = function generateSuggest(interval) {
+  if (interval === void 0) {
+    interval = 15;
+  }
+  return new Array(24 * 60 / interval).fill(null).map(function (_, index) {
+    var date = dateFns.addMinutes(day, index * interval);
+    return {
+      time: formatTime(date)
+    };
+  });
+};
+var checkIsBeforeNow = function checkIsBeforeNow(time, currentDate) {
+  return currentDate ? dateFns.isBefore(dateFns.parse(time, "HH:mm", currentDate), new Date()) : false;
+};
+var checkIsBeforeSelectedDate = function checkIsBeforeSelectedDate(time, interval, date) {
+  if (date) {
+    var selectedDate = new Date(date);
+    selectedDate.setMinutes(selectedDate.getMinutes() + interval);
+    return dateFns.isBefore(dateFns.parse(time, "HH:mm", date), selectedDate);
+  }
+  return false;
+};
+
+exports.DEFAULT_TIME = DEFAULT_TIME;
+exports.checkIsBeforeNow = checkIsBeforeNow;
+exports.checkIsBeforeSelectedDate = checkIsBeforeSelectedDate;
+exports.formatTime = formatTime;
+exports.generateSuggest = generateSuggest;

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

@@ -0,0 +1,4 @@
+import React from "react";
+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

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var index$1 = require('../../../Select/index.js');
+var styles = require('./index.module.css');
+var helpers = require('./helpers.js');
+var index = require('./Label/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var TimePicker = function TimePicker(_a) {
+  var className = _a.className,
+    _b = _a.interval,
+    interval = _b === void 0 ? 30 : _b,
+    _c = _a.selectedTime,
+    selectedTime = _c === void 0 ? "" : _c,
+    onChangeTime = _a.onChangeTime;
+  var _d = React.useState(selectedTime),
+    time = _d[0],
+    setTime = _d[1];
+  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 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,
+    fontSize: 14,
+    customInputRoot: /*#__PURE__*/React__default.default.createElement("div", {
+      className: clx(styles__default.default["input-container"], styles__default.default["input-time"])
+    }, /*#__PURE__*/React__default.default.createElement("input", {
+      className: clx(styles__default.default["input-field"]),
+      tabIndex: 0,
+      "aria-expanded": "false",
+      "aria-haspopup": "true",
+      "aria-invalid": "false",
+      autoComplete: "off",
+      maxLength: 5,
+      readOnly: true,
+      value: time
+    })),
+    value: time,
+    onChange: handleChange
+  });
+};
+var TimePickerInput = /*#__PURE__*/React.memo(TimePicker);
+
+exports.default = TimePickerInput;

package/{src/components/Datepicker/components/TimePicker/index.module.scss → Datepicker/components/TimePicker/index.module.css}

@@ -55,4 +55,4 @@
 
 .select {
   flex: 2;
-}
+}

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

@@ -0,0 +1,4 @@
+import React from "react";
+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

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var styles = require('./Datepicker.module.css');
+var index = require('./components/TimePicker/index.js');
+var index$1 = require('./components/DatePicker/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var Datepicker = function Datepicker(_a) {
+  var className = _a.className,
+    selectedTime = _a.selectedTime,
+    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,
+    onChangeTime: onChangeTime
+  }), /*#__PURE__*/React__default.default.createElement(index$1.default, {
+    selectedDate: selectedDate,
+    onChangeDate: onChangeDate
+  }));
+};
+
+exports.default = Datepicker;

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/Datepicker/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Datepicker/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/{src/components/DotsLoader/DotsLoader.module.scss → DotsLoader/DotsLoader.module.css}

@@ -8,16 +8,13 @@
   0% {
     transform: scale(0);
   }
-
   50% {
     transform: scale(1);
   }
-
   100% {
     transform: scale(0);
   }
 }
-
 .dot {
   animation-duration: 1.6s;
   animation-iteration-count: infinite;
@@ -27,20 +24,16 @@
   height: 10px;
   transform: scale(0);
   width: 10px;
-
-  &_first {
-    animation-delay: 0s;
-  }
-
-  &_second {
-    animation-delay: 0.2s;
-  }
-
-  &_third {
-    animation-delay: 0.4s;
-  }
-
-  &_fourth {
-    animation-delay: 0.6s;
-  }
 }
+.dot_first {
+  animation-delay: 0s;
+}
+.dot_second {
+  animation-delay: 0.2s;
+}
+.dot_third {
+  animation-delay: 0.4s;
+}
+.dot_fourth {
+  animation-delay: 0.6s;
+}

package/DotsLoader/index.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from "react";
+declare const DotsLoader: FC<{
+    color?: string;
+}>;
+export default DotsLoader;

package/DotsLoader/index.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var styles = require('./DotsLoader.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var DotsLoader = function DotsLoader(_a) {
+  var color = _a.color;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("wrapper")
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    style: {
+      backgroundColor: color
+    },
+    className: clx({
+      dot: true,
+      dot_first: true
+    })
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    style: {
+      backgroundColor: color
+    },
+    className: clx({
+      dot: true,
+      dot_second: true
+    })
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    style: {
+      backgroundColor: color
+    },
+    className: clx({
+      dot: true,
+      dot_third: true
+    })
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    style: {
+      backgroundColor: color
+    },
+    className: clx({
+      dot: true,
+      dot_fourth: true
+    })
+  }));
+};
+
+exports.default = DotsLoader;

package/DotsLoader/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/DotsLoader/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/{src/components/Dropdown/Dropdown.module.scss → Dropdown/Dropdown.module.css}

@@ -11,4 +11,4 @@
   border-style: solid;
   border-width: 1px;
   overflow: hidden;
-}
+}

package/Dropdown/index.d.ts

@@ -0,0 +1,4 @@
+import type { DropdownProps } from "./index.props";
+import type { FC, PropsWithChildren } from "react";
+declare const Dropdown: FC<PropsWithChildren<DropdownProps>>;
+export default Dropdown;

package/Dropdown/index.js

@@ -0,0 +1,165 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var reactPopper = require('react-popper');
+var index = require('../Portal/index.js');
+var on = require('../helpers/on.js');
+var index$1 = require('../ClickOutside/index.js');
+var styles = require('./Dropdown.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var Dropdown = function Dropdown(_a) {
+  var children = _a.children,
+    zIndex = _a.zIndex,
+    fontSize = _a.fontSize,
+    disabled = _a.disabled,
+    onVisibleChange = _a.onVisibleChange,
+    overlay = _a.overlay,
+    _b = _a.placement,
+    placement = _b === void 0 ? "bottom-start" : _b,
+    _c = _a.strategy,
+    strategy = _c === void 0 ? "absolute" : _c,
+    _d = _a.trigger,
+    trigger = _d === void 0 ? ["hover"] : _d,
+    _e = _a.visible,
+    visibleProp = _e === void 0 ? true : _e,
+    _f = _a.preventOverflow,
+    preventOverflow = _f === void 0 ? false : _f,
+    _g = _a.preventAutoClose,
+    preventAutoClose = _g === void 0 ? false : _g,
+    _h = _a.flip,
+    flip = _h === void 0 ? true : _h,
+    _j = _a.samewidth,
+    samewidth = _j === void 0 ? false : _j;
+  var _k = React.useState(null),
+    controlElement = _k[0],
+    setControlElement = _k[1];
+  var _l = React.useState(null),
+    popperElement = _l[0],
+    setPopperElement = _l[1];
+  var _m = React.useState(false),
+    visible = _m[0],
+    setVisible = _m[1];
+  var isVisible = visibleProp && visible && !disabled;
+  var _o = reactPopper.usePopper(controlElement, popperElement, {
+      placement: placement,
+      strategy: strategy,
+      modifiers: [{
+        name: "flip",
+        enabled: flip,
+        options: {
+          fallbackPlacements: ["top"]
+        }
+      }, {
+        name: "preventOverflow",
+        enabled: preventOverflow
+      }]
+    }),
+    popperStyles = _o.styles,
+    attributes = _o.attributes,
+    update = _o.update;
+  var isNotComponent = typeof children === "string";
+  var reference = React.useMemo(function () {
+    if (!children) return null;
+    return React.Children.only(isNotComponent ? /*#__PURE__*/React__default.default.createElement("button", null, children) : children);
+  }, [children, isNotComponent]);
+  var onToggle = React.useCallback(function (event) {
+    var _a;
+    if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('[data-ignore-click="true"]')) {
+      return;
+    }
+    setVisible(function (state) {
+      return !state;
+    });
+  }, [setVisible]);
+  var onShow = React.useCallback(function () {
+    setVisible(true);
+  }, [setVisible]);
+  var onHide = React.useCallback(function () {
+    setVisible(false);
+  }, [setVisible]);
+  var onClickOutside = React.useCallback(function (event) {
+    if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(event.target)) return;
+    onHide();
+  }, [onHide, controlElement]);
+  var onClickOverlay = React.useCallback(function (event) {
+    event.stopPropagation();
+    if (!preventAutoClose) {
+      onHide();
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [onHide]);
+  React.useEffect(function () {
+    var unsubscribes = [];
+    if (trigger.includes("click")) {
+      unsubscribes.push(on.on(controlElement, "click", onToggle, false));
+    }
+    if (trigger.includes("hover")) {
+      unsubscribes.push(on.on(controlElement, "mouseenter", onShow, false));
+      unsubscribes.push(on.on(controlElement, "mouseleave", onHide, false));
+      unsubscribes.push(on.on(popperElement, "mouseenter", onShow, false));
+      unsubscribes.push(on.on(popperElement, "mouseleave", onHide, false));
+    }
+    if (trigger.includes("focus")) {
+      var onFocusOut = function onFocusOut() {
+        requestAnimationFrame(function () {
+          if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(document.activeElement)) return;
+          if (popperElement === null || popperElement === void 0 ? void 0 : popperElement.contains(document.activeElement)) return;
+          onHide();
+        });
+      };
+      unsubscribes.push(on.on(controlElement, "focusin", onShow, false));
+      unsubscribes.push(on.on(controlElement, "focusout", onFocusOut, false));
+      unsubscribes.push(on.on(popperElement, "focusin", onShow, false));
+      unsubscribes.push(on.on(popperElement, "focusout", onFocusOut, false));
+    }
+    return function () {
+      return unsubscribes.forEach(function (un) {
+        return un();
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controlElement, popperElement, onToggle, onShow, onHide]);
+  React.useEffect(function () {
+    if (onVisibleChange) onVisibleChange(visible);
+  }, [onVisibleChange, visible]);
+  React.useEffect(function () {
+    if (update) update();
+  }, [update, visible]);
+  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, reference && (/*#__PURE__*/React__default.default.createElement(reference.type, tslib.__assign({
+    ref: setControlElement,
+    tabIndex: 0
+  }, reference.props))), isVisible && (/*#__PURE__*/React__default.default.createElement(index.default, null, /*#__PURE__*/React__default.default.createElement(index$1.default, {
+    onClick: onClickOutside
+  }, /*#__PURE__*/React__default.default.createElement("div", tslib.__assign({
+    ref: setPopperElement,
+    "data-testid": "popper-container",
+    className: clx("popper-container"),
+    style: tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, popperStyles.popper), {
+      zIndex: zIndex,
+      minWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
+    }), samewidth && {
+      maxWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
+    }), {
+      fontSize: "".concat(fontSize, "px")
+    }),
+    tabIndex: 0
+  }, attributes.popper), /*#__PURE__*/React__default.default.createElement("div", {
+    "data-testid": "overlay-container",
+    className: clx("overlay-container"),
+    onClick: onClickOverlay
+  }, overlay))))));
+};
+
+exports.default = Dropdown;

package/Dropdown/index.props.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import type { PositioningStrategy } from "@popperjs/core";
+import type { Placement as PopperPlacement } from "@popperjs/core";
+export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end">;
+export type Trigger = "click" | "hover" | "focus";
+export type DropdownProps = {
+    zIndex?: number;
+    fontSize?: number;
+    disabled?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    overlay: ReactNode;
+    placement?: Placement;
+    strategy?: PositioningStrategy;
+    trigger?: [Trigger, ...Trigger[]];
+    visible?: boolean;
+    preventOverflow?: boolean;
+    preventAutoClose?: boolean;
+    flip?: boolean;
+    samewidth?: boolean;
+};

package/Dropdown/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Dropdown/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/{src/components/Grid/Grid.module.scss → Grid/Grid.module.css}

@@ -9,8 +9,7 @@
     grid-auto-rows: minmax(50px, auto);
     grid-gap: 10px;
   }
-
   .root > * {
     margin: 0;
   }
-}
+}

package/{src/components/Grid/Item/Grid-Item.module.scss → Grid/Item/Grid-Item.module.css}

@@ -1,9 +1,9 @@
 .full {
-  grid-column: 1 / -1;
+  grid-column: 1/-1;
 }
 
 .item {
   flex: 1 1 250px;
   margin-left: 5px;
   margin-right: 5px;
-}
+}

package/Grid/Item/index.d.ts

@@ -0,0 +1,4 @@
+import type { FC, PropsWithChildren } from "react";
+import type { GridItemProps } from "./index.props";
+declare const GridItem: FC<PropsWithChildren<GridItemProps>>;
+export default GridItem;

package/Grid/Item/index.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames');
+var styles = require('./Grid-Item.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var GridItem = function GridItem(_a) {
+  var _b;
+  var children = _a.children,
+    _c = _a.fullWidth,
+    fullWidth = _c === void 0 ? false : _c,
+    className = _a.className,
+    style = _a.style;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: classNames__default.default(styles__default.default.item, (_b = {}, _b[styles__default.default.full] = fullWidth, _b), className),
+    style: style
+  }, children);
+};
+
+exports.default = GridItem;

package/{src/components/Grid/Item/index.props.ts → Grid/Item/index.props.d.ts}

@@ -1,7 +1,6 @@
 import type { CSSProperties } from "react";
-
 export type GridItemProps = {
-  fullWidth?: boolean;
-  className?: string;
-  style?: CSSProperties;
+    fullWidth?: boolean;
+    className?: string;
+    style?: CSSProperties;
 };

package/Grid/index.d.ts

@@ -0,0 +1,4 @@
+import type { FC, PropsWithChildren } from "react";
+import type { GridProps } from "./index.props";
+declare const Grid: FC<PropsWithChildren<GridProps>>;
+export default Grid;

package/Grid/index.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames');
+var styles = require('./Grid.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var Grid = function Grid(_a) {
+  var children = _a.children,
+    _b = _a.gridRowGap,
+    gridRowGap = _b === void 0 ? 24 : _b,
+    _c = _a.gridColumnGap,
+    gridColumnGap = _c === void 0 ? 16 : _c,
+    _d = _a.gridItemMinWidth,
+    gridItemMinWidth = _d === void 0 ? 100 : _d,
+    className = _a.className;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: classNames__default.default(styles__default.default.root, className),
+    style: {
+      rowGap: "".concat(gridRowGap, "px"),
+      columnGap: "".concat(gridColumnGap, "px"),
+      gridTemplateColumns: "repeat(auto-fill, minmax(".concat(gridItemMinWidth, "px, 1fr))")
+    }
+  }, children);
+};
+
+exports.default = Grid;

package/Grid/index.props.d.ts

@@ -0,0 +1,6 @@
+export type GridProps = {
+    className?: string;
+    gridRowGap?: number;
+    gridColumnGap?: number;
+    gridItemMinWidth?: number;
+};

package/Grid/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Grid/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Icons/ArrowNext.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { Props } from "./index.props";
+declare const _default: ({ fill, width, height, ref, ...props }: Props) => React.JSX.Element;
+export default _default;