@invoicebox/ui 0.1.0-alpha.291 → 0.1.0-alpha.294

package/dist/components/common/Arrow/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateArrowPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateArrowPalette = exports.generateArrowPalette = function generateArrowPalette(abstractPalette) {
   return {

package/dist/components/common/Calendar/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateCalendarPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateCalendarPalette = exports.generateCalendarPalette = function generateCalendarPalette(abstractPalette) {
   return {

package/dist/components/common/Drawer/palette.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.generateDrawerPalette = void 0;
 var _transformColorByHsl = require("../../../utils/transformColorByHsl");
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateDrawerPalette = exports.generateDrawerPalette = function generateDrawerPalette(abstractPalette) {
   return {

package/dist/components/common/Dropdown/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateDropdownPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateDropdownPalette = exports.generateDropdownPalette = function generateDropdownPalette(abstractPalette) {
   return {

package/dist/components/common/EntityAutocompleteOptionsDrawer/index.js

@@ -31,6 +31,10 @@ var EntityAutocompleteOptionsDrawer = exports.EntityAutocompleteOptionsDrawer =
     onChange(option.value, option);
     onClose();
   }, [onClose, onChange, options]);
+
+  // Скелетоны — только на первой загрузке (опций ещё нет). При повторных запросах держим прежние
+  // опции, иначе лоадер мерцает на каждый ввод символа.
+  var showSkeletons = isLoadingOptions && options.length === 0;
   return /*#__PURE__*/_react["default"].createElement(_Drawer.Drawer, {
     isOpen: isOpen,
     onClose: onClose,
@@ -41,7 +45,7 @@ var EntityAutocompleteOptionsDrawer = exports.EntityAutocompleteOptionsDrawer =
   }, promptMessage && /*#__PURE__*/_react["default"].createElement(S.Prompt, {
     $color: palette.prompt,
     variant: "bodyMRegular"
-  }, promptMessage), isLoadingOptions && /*#__PURE__*/_react["default"].createElement(S.SkeletonListWrapper, null, loadingList.map(function (ComponentSkeleton, index) {
+  }, promptMessage), showSkeletons && /*#__PURE__*/_react["default"].createElement(S.SkeletonListWrapper, null, loadingList.map(function (ComponentSkeleton, index) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/no-array-index-key
@@ -50,7 +54,7 @@ var EntityAutocompleteOptionsDrawer = exports.EntityAutocompleteOptionsDrawer =
         height: "64px"
       })
     );
-  })), !isLoadingOptions && !promptMessage && options.map(function (option, index) {
+  })), !showSkeletons && !promptMessage && options.map(function (option, index) {
     return /*#__PURE__*/_react["default"].createElement(S.OptionWrapper, {
       // eslint-disable-next-line react/no-array-index-key
       key: "".concat(option.value).concat(index),

package/dist/components/common/EntityAutocompleteOptionsDrawer/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateEntityAutocompleteOptionsDrawerPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateEntityAutocompleteOptionsDrawerPalette = exports.generateEntityAutocompleteOptionsDrawerPalette = function generateEntityAutocompleteOptionsDrawerPalette(abstractPalette) {
   return {

package/dist/components/common/PointsLoader/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generatePointsLoaderPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generatePointsLoaderPalette = exports.generatePointsLoaderPalette = function generatePointsLoaderPalette(abstractPalette) {
   return {

package/dist/components/common/Scrollbar/index.js

@@ -1,20 +1,19 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Scrollbar = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactCustomScrollbars = require("react-custom-scrollbars-2");
 var _palette = require("../../../palette");
+var S = _interopRequireWildcard(require("./styles"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-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; }
-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; }
-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; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-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); }
+// CSS-скроллбар (убрали зависимость `react-custom-scrollbars-2`): нативный overflow + стилизованный
+// тонкий ползунок. Публичный API сохранён (maxHeight/trackWidth/autoHeight). autoHeight=true →
+// контейнер растёт по контенту до maxHeight, затем скроллится; autoHeight=false → высота 100% родителя.
 var Scrollbar = exports.Scrollbar = function Scrollbar(_ref) {
   var children = _ref.children,
     _ref$maxHeight = _ref.maxHeight,
@@ -24,29 +23,10 @@ var Scrollbar = exports.Scrollbar = function Scrollbar(_ref) {
     _ref$autoHeight = _ref.autoHeight,
     autoHeight = _ref$autoHeight === void 0 ? true : _ref$autoHeight;
   var palette = (0, _palette.useComponentPalette)('scrollbar');
-  var renderThumbVertical = function renderThumbVertical(thumbProps) {
-    return /*#__PURE__*/_react["default"].createElement("div", _extends({}, thumbProps, {
-      style: _objectSpread(_objectSpread({}, thumbProps.style), {}, {
-        backgroundColor: palette.thumb,
-        width: trackWidth,
-        borderRadius: '4px'
-      })
-    }));
-  };
-  var renderThumbHorizontal = function renderThumbHorizontal(thumbProps) {
-    return /*#__PURE__*/_react["default"].createElement("div", _extends({}, thumbProps, {
-      style: _objectSpread(_objectSpread({}, thumbProps.style), {}, {
-        backgroundColor: palette.thumb,
-        height: trackWidth,
-        borderRadius: '4px'
-      })
-    }));
-  };
-  return /*#__PURE__*/_react["default"].createElement(_reactCustomScrollbars.Scrollbars, {
-    autoHeight: autoHeight,
-    autoHeightMin: 0,
-    autoHeightMax: maxHeight,
-    renderThumbHorizontal: renderThumbHorizontal,
-    renderThumbVertical: renderThumbVertical
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    $maxHeight: maxHeight,
+    $trackWidth: trackWidth,
+    $thumb: palette.thumb,
+    $autoHeight: autoHeight
   }, children);
 };

package/dist/components/common/Scrollbar/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $maxHeight: number | string;
+    $trackWidth: number;
+    $thumb: string;
+    $autoHeight: boolean;
+}>> & string;

package/dist/components/common/Scrollbar/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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; }
+var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-1pl0pr3-0"
+})(["overflow-y:auto;overflow-x:hidden;", " scrollbar-width:thin;scrollbar-color:", " transparent;&::-webkit-scrollbar{width:", "px;height:", "px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:4px;}"], function (_ref) {
+  var $autoHeight = _ref.$autoHeight,
+    $maxHeight = _ref.$maxHeight;
+  return $autoHeight ? (0, _styledComponents.css)(["max-height:", ";"], typeof $maxHeight === 'number' ? "".concat($maxHeight, "px") : $maxHeight) : (0, _styledComponents.css)(["height:100%;"]);
+}, function (_ref2) {
+  var $thumb = _ref2.$thumb;
+  return $thumb;
+}, function (_ref3) {
+  var $trackWidth = _ref3.$trackWidth;
+  return $trackWidth;
+}, function (_ref4) {
+  var $trackWidth = _ref4.$trackWidth;
+  return $trackWidth;
+}, function (_ref5) {
+  var $thumb = _ref5.$thumb;
+  return $thumb;
+});

package/dist/components/common/Toast/styles.js

@@ -7,7 +7,7 @@ exports.Container = void 0;
 var _reactToastify = require("react-toastify");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _breakpoints = require("../../../breakpoints");
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var Container = exports.Container = (0, _styledComponents["default"])(_reactToastify.ToastContainer).withConfig({
   displayName: "styles__Container",

package/dist/components/form/Autocomplete/components/Autocomplete/index.d.ts

@@ -28,6 +28,7 @@ type TControlProps = {
     usePadding?: boolean;
     dropdownWidth?: string;
     useModernStyles?: boolean;
+    isDropdownDisabled?: boolean;
 };
 export type TProps = TFieldProps & TControlProps;
 export declare const Autocomplete: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "name" | "readOnly" | "autoFocus" | "onFocus" | "onBlur"> & {

package/dist/components/form/Autocomplete/components/Autocomplete/index.js

@@ -65,12 +65,22 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     usePadding = _ref$usePadding === void 0 ? false : _ref$usePadding,
     dropdownWidth = _ref.dropdownWidth,
     _ref$useModernStyles = _ref.useModernStyles,
-    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    _ref$isDropdownDisabl = _ref.isDropdownDisabled,
+    isDropdownDisabled = _ref$isDropdownDisabl === void 0 ? false : _ref$isDropdownDisabl;
   var isMobile = (0, _useMedia.useMobile)();
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  // Активная (подсвеченная клавиатурой) опция для combobox-навигации ↑/↓/Enter/Esc.
+  var _useState3 = (0, _react.useState)(-1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeIndex = _useState4[0],
+    setActiveIndex = _useState4[1];
+  var baseId = (0, _react.useId)();
+  var listboxId = "".concat(baseId, "-listbox");
+  var activeOptionRef = (0, _react.useRef)(null);
   var palette = (0, _palette.useComponentPalette)('autocompleteDefaultOption');
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
       onFocus: onFocus,
@@ -83,10 +93,13 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     return setIsOpen(true);
   }, []);
   var handleClose = (0, _react.useCallback)(function () {
-    return setIsOpen(false);
+    setIsOpen(false);
+    setActiveIndex(-1);
   }, []);
   var wrapperRef = (0, _useOutsideClick.useOutsideClick)(handleClose);
   var handleChange = (0, _react.useCallback)(function (event) {
+    // Ввод нового запроса сбрасывает клавиатурную подсветку (результаты сменятся).
+    setActiveIndex(-1);
     onChange(event.target.value);
   }, [onChange]);
   var handleSelect = (0, _react.useCallback)(function (event) {
@@ -127,6 +140,58 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
   var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
     return !isOpen && !value;
   }, [isOpen, value]);
+  var isDropdownOpen = !isDropdownDisabled && isOpen && (!!options.length || !!isLoading);
+  // Скелетоны показываем ТОЛЬКО когда опций ещё нет (первая загрузка). При повторных запросах
+  // (ввод символов) держим прежние опции — иначе лоадер мерцает на каждое изменение.
+  var showSkeletons = !!isLoading && options.length === 0;
+  var getOptionId = function getOptionId(index) {
+    return "".concat(baseId, "-option-").concat(index);
+  };
+
+  // Активная опция всегда видна в прокручиваемом списке.
+  (0, _react.useEffect)(function () {
+    var _activeOptionRef$curr;
+    (_activeOptionRef$curr = activeOptionRef.current) === null || _activeOptionRef$curr === void 0 || _activeOptionRef$curr.scrollIntoView({
+      block: 'nearest'
+    });
+  }, [activeIndex]);
+  var handleKeyDown = function handleKeyDown(event) {
+    if (disabled || readOnly) return;
+    var count = options.length;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!isOpen) {
+          handleOpen();
+        } else if (count) {
+          setActiveIndex(function (prev) {
+            return (prev + 1) % count;
+          });
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        if (count) setActiveIndex(function (prev) {
+          return prev <= 0 ? count - 1 : prev - 1;
+        });
+        break;
+      case 'Enter':
+        if (isDropdownOpen && activeIndex >= 0 && activeIndex < count && !options[activeIndex].isDisabled) {
+          event.preventDefault();
+          onChange(options[activeIndex].value, options[activeIndex]);
+          handleClose();
+        }
+        break;
+      case 'Escape':
+        if (isDropdownOpen) {
+          event.preventDefault();
+          handleClose();
+        }
+        break;
+      default:
+        break;
+    }
+  };
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
     ref: wrapperRef
   }, /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
@@ -159,15 +224,26 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     isOnlyNumbers: isInputOnlyNumbers,
     autoFocus: autoFocus,
     readOnly: readOnly,
-    useModernStyles: useModernStyles
+    useModernStyles: useModernStyles,
+    onKeyDown: handleKeyDown,
+    role: "combobox",
+    "aria-expanded": isDropdownOpen,
+    "aria-controls": isDropdownOpen ? listboxId : undefined,
+    "aria-autocomplete": "list",
+    "aria-activedescendant": isDropdownOpen && activeIndex >= 0 ? getOptionId(activeIndex) : undefined
   }, paddingOptions)))), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
     isOpen: isOpen && (!!options.length || !!isLoading),
     isAutoPosition: true,
     width: dropdownWidth || '100%',
     minWidth: isMobile ? '100%' : '340px',
     usePadding: usePadding
-  }, isLoading ? optionsLoader || /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null), /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null), /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null)) : /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
+  }, showSkeletons ? /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
     maxHeight: listHeight
+  }, optionsLoader || /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null), /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null), /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null))) : /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
+    maxHeight: listHeight
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    role: "listbox",
+    id: listboxId
   }, options.map(function (option, index) {
     return /*#__PURE__*/_react["default"].createElement(S.OptionWrapperWithPadding, {
       $usePadding: usePadding,
@@ -175,17 +251,23 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     }, /*#__PURE__*/_react["default"].createElement(S.OptionContainer, {
       $hoverBg: palette.hoverBg,
       $usePadding: usePadding,
-      key: "".concat(option.value).concat(index)
+      $active: index === activeIndex
     }, /*#__PURE__*/_react["default"].createElement(S.OptionWrapper, {
-      key: "".concat(option.value).concat(index),
+      ref: index === activeIndex ? activeOptionRef : undefined,
+      id: getOptionId(index),
+      role: "option",
+      "aria-selected": index === activeIndex,
       tabIndex: -1,
       type: "button",
       disabled: option.isDisabled,
       onClick: handleSelect,
+      onMouseEnter: function onMouseEnter() {
+        return setActiveIndex(index);
+      },
       "data-index": JSON.stringify(index)
     }, renderOption ? renderOption(option) : /*#__PURE__*/_react["default"].createElement(_AutocompleteDefaultOption.AutocompleteDefaultOption, {
       usePadding: usePadding
     }, option.value))));
-  }))));
+  })))));
 });
 Autocomplete.displayName = 'Autocomplete';

package/dist/components/form/Autocomplete/components/Autocomplete/styles.d.ts

@@ -3,6 +3,7 @@ export declare const Wrapper: import("styled-components/dist/types").IStyledComp
 export declare const OptionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $usePadding: boolean;
     $hoverBg: string;
+    $active?: boolean | undefined;
 }>> & string;
 export declare const OptionWrapperWithPadding: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $usePadding: boolean;

package/dist/components/form/Autocomplete/components/Autocomplete/styles.js

@@ -13,18 +13,22 @@ var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
 var OptionContainer = exports.OptionContainer = _styledComponents["default"].div.withConfig({
   displayName: "styles__OptionContainer",
   componentId: "sc-1fp3ia8-1"
-})(["width:100%;border-radius:", ";&:hover{background-color:", ";}"], function (_ref) {
+})(["width:100%;border-radius:", ";background-color:", ";&:hover{background-color:", ";}"], function (_ref) {
   var $usePadding = _ref.$usePadding;
   return $usePadding ? '12px' : 'none';
 }, function (_ref2) {
-  var $hoverBg = _ref2.$hoverBg;
+  var $active = _ref2.$active,
+    $hoverBg = _ref2.$hoverBg;
+  return $active ? $hoverBg : 'transparent';
+}, function (_ref3) {
+  var $hoverBg = _ref3.$hoverBg;
   return $hoverBg;
 });
 var OptionWrapperWithPadding = exports.OptionWrapperWithPadding = _styledComponents["default"].div.withConfig({
   displayName: "styles__OptionWrapperWithPadding",
   componentId: "sc-1fp3ia8-2"
-})(["padding:", ";"], function (_ref3) {
-  var $usePadding = _ref3.$usePadding;
+})(["padding:", ";"], function (_ref4) {
+  var $usePadding = _ref4.$usePadding;
   return $usePadding ? '0 8px' : 'none';
 });
 var OptionWrapper = exports.OptionWrapper = _styledComponents["default"].button.withConfig({

package/dist/components/form/Autocomplete/components/AutocompleteDefaultOption/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateAutocompleteDefaultOptionPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateAutocompleteDefaultOptionPalette = exports.generateAutocompleteDefaultOptionPalette = function generateAutocompleteDefaultOptionPalette(abstractPalette) {
   return {

package/dist/components/form/Autocomplete/components/OrganizationAutocompleteItem/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateOrganizationAutocompleteItemPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateOrganizationAutocompleteItemPalette = exports.generateOrganizationAutocompleteItemPalette = function generateOrganizationAutocompleteItemPalette(abstractPalette) {
   return {

package/dist/components/form/CodeInput/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateCodeInputPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateCodeInputPalette = exports.generateCodeInputPalette = function generateCodeInputPalette(abstractPalette) {
   return {

package/dist/components/form/CountrySelect/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateCountrySelectPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateCountrySelectPalette = exports.generateCountrySelectPalette = function generateCountrySelectPalette(abstractPalette) {
   return {

package/dist/components/form/DateTimeInput/components/TimePicker/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateTimePickerPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateTimePickerPalette = exports.generateTimePickerPalette = function generateTimePickerPalette(abstractPalette) {
   return {

package/dist/components/form/DateTimeInput/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateDateTimeInputPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateDateTimeInputPalette = exports.generateDateTimeInputPalette = function generateDateTimeInputPalette(abstractPalette) {
   return {

package/dist/components/form/PureInput/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generatePureInputPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generatePureInputPalette = exports.generatePureInputPalette = function generatePureInputPalette(abstractPalette) {
   return {

package/dist/components/form/Select/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateSelectPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateSelectPalette = exports.generateSelectPalette = function generateSelectPalette(abstractPalette) {
   return {

package/dist/components/form/TextInput/index.d.ts

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { TProps as TInputLabelProps } from '../InputLabel';
 import { TProps as TPureInputProps } from '../PureInput';
 import { TSizes } from '../constants';
-export type TProps = Pick<TInputLabelProps, 'label' | 'required'> & Pick<TPureInputProps, 'placeholder' | 'hasError' | 'onFocus' | 'onBlur' | 'disabled' | 'name' | 'paddingRight' | 'type' | 'isOnlyNumbers' | 'autoFocus' | 'rows' | 'id' | 'useModernStyles' | 'readOnly' | 'inputMode'> & {
+export type TProps = Pick<TInputLabelProps, 'label' | 'required'> & Pick<TPureInputProps, 'placeholder' | 'hasError' | 'onFocus' | 'onBlur' | 'disabled' | 'name' | 'paddingRight' | 'type' | 'isOnlyNumbers' | 'autoFocus' | 'rows' | 'id' | 'useModernStyles' | 'readOnly' | 'inputMode' | 'autoComplete'> & {
     value: string;
     onChange: (value: string) => void;
     maxLength?: number;
@@ -11,7 +11,7 @@ export type TProps = Pick<TInputLabelProps, 'label' | 'required'> & Pick<TPureIn
     element?: 'input' | 'textarea';
     required?: boolean;
 };
-export declare const TextInput: React.ForwardRefExoticComponent<Pick<TInputLabelProps, "required" | "label"> & Pick<TPureInputProps, "type" | "id" | "name" | "paddingRight" | "inputMode" | "disabled" | "placeholder" | "readOnly" | "rows" | "autoFocus" | "onFocus" | "onBlur" | "useModernStyles" | "hasError" | "isOnlyNumbers"> & {
+export declare const TextInput: React.ForwardRefExoticComponent<Pick<TInputLabelProps, "required" | "label"> & Pick<TPureInputProps, "type" | "id" | "name" | "paddingRight" | "inputMode" | "disabled" | "autoComplete" | "placeholder" | "readOnly" | "rows" | "autoFocus" | "onFocus" | "onBlur" | "useModernStyles" | "hasError" | "isOnlyNumbers"> & {
     value: string;
     onChange: (value: string) => void;
     maxLength?: number | undefined;

package/dist/components/form/TextInput/index.js

@@ -43,7 +43,8 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
     id = _ref.id,
     inputMode = _ref.inputMode,
-    readOnly = _ref.readOnly;
+    readOnly = _ref.readOnly,
+    autoComplete = _ref.autoComplete;
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
       onFocus: onFocus,
       onBlur: onBlur
@@ -114,7 +115,8 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
     rows: rows,
     useModernStyles: useModernStyles,
     inputMode: inputMode,
-    readOnly: readOnly
+    readOnly: readOnly,
+    autoComplete: autoComplete
   }, paddingOptions)), children && /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, null, children)));
 });
 TextInput.displayName = 'TextInput';

package/dist/components/form/Toggle/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateTogglePalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateTogglePalette = exports.generateTogglePalette = function generateTogglePalette(abstractPalette) {
   return {

package/dist/components/form/common/DrawerHeader/palette.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateDrawerHeaderPalette = void 0;
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+var _hexToRgba = _interopRequireDefault(require("../../../../utils/hexToRgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateDrawerHeaderPalette = exports.generateDrawerHeaderPalette = function generateDrawerHeaderPalette(abstractPalette) {
   return {

package/dist/esm/breakpoints/index.js

@@ -0,0 +1,7 @@
+export var breakpoints = {
+  sm: '(max-width: 576px)',
+  md: '(max-width: 767px)',
+  ld: '(max-width: 992px)',
+  xl: '(max-width: 1200px)',
+  xxl: '(max-width: 1400px)'
+};

package/dist/esm/components/_helpers/StoryBorderWrapper/index.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export var StoryBorderWrapper = styled.div.withConfig({
+  displayName: "StoryBorderWrapper",
+  componentId: "sc-19oc2rg-0"
+})(["border:1px solid #26c6da;margin-left:20px;width:300px;"]);

package/dist/esm/components/_helpers/selectOptions.js

@@ -0,0 +1,37 @@
+export var selectOptions = [{
+  label: 'Option 1',
+  value: 'option-1'
+}, {
+  label: 'Option 2',
+  value: 'option-2'
+}, {
+  label: 'Option 3',
+  value: 'option-3'
+}, {
+  label: 'Option 4',
+  value: 'option-4'
+}, {
+  label: 'Option 5',
+  value: 'option-5'
+}, {
+  label: 'Option 6',
+  value: 'option-6'
+}, {
+  label: 'Option 7',
+  value: 'option-7'
+}, {
+  label: 'Option 8',
+  value: 'option-8'
+}, {
+  label: 'Option 9',
+  value: 'option-9'
+}, {
+  label: 'Option 10',
+  value: 'option-10'
+}, {
+  label: 'Option 11',
+  value: 'option-11'
+}, {
+  label: 'Option 12',
+  value: 'option-12'
+}];