@invoicebox/ui 0.1.0-alpha.188 → 0.1.0-alpha.189

package/dist/components/form/Select/components/Loader/index.d.ts

@@ -0,0 +1,2 @@
+declare const Loader: () => import("react/jsx-runtime").JSX.Element;
+export default Loader;

package/dist/components/form/Select/components/Loader/index.js

@@ -0,0 +1,26 @@
+"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["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+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 }; }
+var Loader = function Loader() {
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, null, /*#__PURE__*/_react["default"].createElement(S.SvgLoader, {
+    viewBox: "25 25 50 50"
+  }, /*#__PURE__*/_react["default"].createElement(S.CircleLoader, {
+    className: "loader-path",
+    cx: "50",
+    cy: "50",
+    r: "20",
+    fill: "none",
+    stroke: "#70c542",
+    strokeWidth: "2"
+  })));
+};
+var _default = exports["default"] = Loader;

package/dist/components/form/Select/components/Loader/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SvgLoader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, never>> & string;
+export declare const CircleLoader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGCircleElement>, never>> & string;

package/dist/components/form/Select/components/Loader/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.SvgLoader = exports.CircleLoader = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-86q913-0"
+})(["height:24px;width:24px;position:relative;margin:0 auto;@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124;}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124;}}@-webkit-keyframes color{0%{stroke:#353f47;}40%{stroke:#353f47;}66%{stroke:#353f47;}80%,90%{stroke:#353f47;}}@keyframes color{0%{stroke:#353f47;}40%{stroke:#353f47;}66%{stroke:#353f47;}80%,90%{stroke:#353f47;}}"]);
+var SvgLoader = exports.SvgLoader = _styledComponents["default"].svg.withConfig({
+  displayName: "styles__SvgLoader",
+  componentId: "sc-86q913-1"
+})(["-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto;"]);
+var CircleLoader = exports.CircleLoader = _styledComponents["default"].circle.withConfig({
+  displayName: "styles__CircleLoader",
+  componentId: "sc-86q913-2"
+})(["stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;stroke-linecap:round;"]);

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

@@ -23,5 +23,7 @@ export type TProps<TValue> = Pick<TInputProps, 'label' | 'hasError' | 'placehold
     scrollbarHeader?: ReactNode;
     isDrawerOptions?: boolean;
     scrollbarMaxHeight?: number;
+    emptyOptionsLabel?: string;
+    isLoading?: boolean;
 };
-export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, name, value, onChange, options, groups, isResetButtonEnabled, size, renderOption, dropdownHeader, isDrawerOptions, renderGroup, scrollbarMaxHeight, scrollbarHeader, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, name, value, onChange, options, groups, isResetButtonEnabled, size, renderOption, dropdownHeader, isDrawerOptions, renderGroup, scrollbarMaxHeight, scrollbarHeader, emptyOptionsLabel, isLoading, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;

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

@@ -15,6 +15,8 @@ var _useOutsideClick = require("../../../hooks/useOutsideClick");
 var _palette = require("../../../palette");
 var _useOptionGroups = require("./hooks/useOptionGroups");
 var _Drawer = require("../../common/Drawer");
+var _Loader = _interopRequireDefault(require("./components/Loader"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -45,7 +47,9 @@ var Select = exports.Select = function Select(_ref) {
     renderGroup = _ref.renderGroup,
     _ref$scrollbarMaxHeig = _ref.scrollbarMaxHeight,
     scrollbarMaxHeight = _ref$scrollbarMaxHeig === void 0 ? MAX_LIST_HEIGHT : _ref$scrollbarMaxHeig,
-    scrollbarHeader = _ref.scrollbarHeader;
+    scrollbarHeader = _ref.scrollbarHeader,
+    emptyOptionsLabel = _ref.emptyOptionsLabel,
+    isLoading = _ref.isLoading;
   var palette = (0, _palette.useComponentPalette)('select');
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)(),
     inFocus = _useInputFocus.inFocus,
@@ -158,6 +162,33 @@ var Select = exports.Select = function Select(_ref) {
       }, handleOptionRender(option));
     }));
   }));
+  var emptyLabel = /*#__PURE__*/_react["default"].createElement(S.DefaultOptionWrapper, null, /*#__PURE__*/_react["default"].createElement(S.EmptyLabel, {
+    variant: 'bodyMRegular',
+    $color: palette.empty
+  }, emptyOptionsLabel || 'Нет значений'));
+  var loader = /*#__PURE__*/_react["default"].createElement(S.DefaultOptionWrapper, null, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null));
+  var handleDropdownContentRender = function handleDropdownContentRender() {
+    if (isLoading) {
+      return loader;
+    }
+    if (optionGroups.length) {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, dropdownHeader, /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
+        maxHeight: scrollbarMaxHeight
+      }, scrollbarContent));
+    }
+    return emptyLabel;
+  };
+  var handleDrawerContentRender = function handleDrawerContentRender() {
+    if (isLoading) {
+      return loader;
+    }
+    if (optionGroups.length) {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, dropdownHeader, /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
+        maxHeight: scrollbarMaxHeight
+      }, scrollbarContent, /*#__PURE__*/_react["default"].createElement(S.DrawerBottom, null)));
+    }
+    return emptyLabel;
+  };
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
     ref: isDrawerOptions ? undefined : wrapperRef
   }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_Input.Input, {
@@ -178,13 +209,9 @@ var Select = exports.Select = function Select(_ref) {
     onClose: handleHide,
     isOpen: isOpen,
     isPadding: false
-  }, /*#__PURE__*/_react["default"].createElement(S.DrawerContent, null, dropdownHeader, /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
-    maxHeight: scrollbarMaxHeight
-  }, scrollbarContent, /*#__PURE__*/_react["default"].createElement(S.DrawerBottom, null)))) : /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
+  }, /*#__PURE__*/_react["default"].createElement(S.DrawerContent, null, handleDrawerContentRender())) : /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
     isOpen: isOpen,
     isAutoPosition: true,
     width: "100%"
-  }, dropdownHeader, /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
-    maxHeight: scrollbarMaxHeight
-  }, scrollbarContent)));
+  }, handleDropdownContentRender()));
 };

package/dist/components/form/Select/index.stories.d.ts

@@ -3,6 +3,7 @@ import { Select, TProps } from '.';
 declare const meta: Meta<typeof Select>;
 export default meta;
 export declare const Default: StoryObj<TProps<string>>;
+export declare const EmptyOptions: StoryObj<TProps<string>>;
 export declare const WithDropdownHeader: StoryObj<TProps<string>>;
 export declare const RenderOption: StoryObj<TProps<string>>;
 export declare const WithGroups: StoryObj<TProps<string>>;

package/dist/components/form/Select/index.stories.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithGroups = exports.WithDropdownHeader = exports.WithCustomGroups = exports.RenderOptionWithGroups = exports.RenderOption = exports.Default = void 0;
+exports["default"] = exports.WithGroups = exports.WithDropdownHeader = exports.WithCustomGroups = exports.RenderOptionWithGroups = exports.RenderOption = exports.EmptyOptions = exports.Default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _addonActions = require("@storybook/addon-actions");
 var _ = require(".");
@@ -49,6 +49,7 @@ var COMMON_ARGS = {
   placeholder: 'Placeholder',
   isResetButtonEnabled: false,
   size: 'L',
+  isLoading: false,
   options: [{
     label: 'Option 1',
     value: 'option-1',
@@ -137,9 +138,16 @@ var Default = exports.Default = {
   args: _objectSpread({}, COMMON_ARGS),
   render: Component
 };
+var EmptyOptions = exports.EmptyOptions = {
+  args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
+    options: []
+  }),
+  render: Component
+};
 var WithDropdownHeader = exports.WithDropdownHeader = {
   args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
-    dropdownHeader: /*#__PURE__*/_react["default"].createElement("div", null, "Dropdown header")
+    dropdownHeader: /*#__PURE__*/_react["default"].createElement("div", null, "Dropdown header"),
+    options: []
   }),
   render: Component
 };

package/dist/components/form/Select/palette.d.ts

@@ -1,5 +1,6 @@
 import { TAbstractPalette } from '../../../palette';
 export type TSelectPalette = {
     bgHover: string;
+    empty: string;
 };
 export declare const generateSelectPalette: (abstractPalette: TAbstractPalette) => TSelectPalette;

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

@@ -8,6 +8,7 @@ var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var generateSelectPalette = exports.generateSelectPalette = function generateSelectPalette(abstractPalette) {
   return {
-    bgHover: (0, _hexToRgba["default"])(abstractPalette.neutralUsual, 0.5)
+    bgHover: (0, _hexToRgba["default"])(abstractPalette.neutralUsual, 0.5),
+    empty: abstractPalette.neutralFoggy
   };
 };

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

@@ -10,3 +10,6 @@ export declare const Group: import("styled-components/dist/types").IStyledCompon
 export declare const DefaultOptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DrawerContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DrawerBottom: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EmptyLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
+    $color: string;
+}>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;

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

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.Option = exports.InputWrapper = exports.Group = exports.DrawerContent = exports.DrawerBottom = exports.DefaultOptionWrapper = void 0;
+exports.Wrapper = exports.Option = exports.InputWrapper = exports.Group = exports.EmptyLabel = exports.DrawerContent = exports.DrawerBottom = exports.DefaultOptionWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Typography = require("../../common/Typography");
 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); }
@@ -42,4 +42,11 @@ var DrawerContent = exports.DrawerContent = _styledComponents["default"].div.wit
 var DrawerBottom = exports.DrawerBottom = _styledComponents["default"].div.withConfig({
   displayName: "styles__DrawerBottom",
   componentId: "sc-1x9n0z5-6"
-})(["height:36px;"]);
+})(["height:36px;"]);
+var EmptyLabel = exports.EmptyLabel = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
+  displayName: "styles__EmptyLabel",
+  componentId: "sc-1x9n0z5-7"
+})(["color:", ";"], function (_ref3) {
+  var $color = _ref3.$color;
+  return $color;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.188",
+    "version": "0.1.0-alpha.189",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {