@invoicebox/ui 0.1.0-alpha.35 → 0.1.0-alpha.37

package/dist/components/common/Dropdown/index.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from 'react';
+export type TProps = {
+    children: ReactNode;
+    isOpen: boolean;
+    isAutoPosition?: boolean;
+    positionVertical?: number;
+    positionLeft?: string;
+    positionRight?: string;
+    minWidth?: string;
+    width?: string;
+    zIndex?: number;
+    onCloseTransitionEnd?: () => void;
+};
+export declare const Dropdown: FC<TProps>;

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

@@ -0,0 +1,117 @@
+"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.Dropdown = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _palette = require("../../../palette");
+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 && Object.prototype.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(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+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."); }
+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); }
+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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var Dropdown = exports.Dropdown = function Dropdown(_ref) {
+  var children = _ref.children,
+    isOpen = _ref.isOpen,
+    _ref$isAutoPosition = _ref.isAutoPosition,
+    isAutoPosition = _ref$isAutoPosition === void 0 ? false : _ref$isAutoPosition,
+    _ref$positionVertical = _ref.positionVertical,
+    positionVertical = _ref$positionVertical === void 0 ? 5 : _ref$positionVertical,
+    _ref$positionLeft = _ref.positionLeft,
+    positionLeft = _ref$positionLeft === void 0 ? '0px' : _ref$positionLeft,
+    _ref$positionRight = _ref.positionRight,
+    positionRight = _ref$positionRight === void 0 ? 'auto' : _ref$positionRight,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 'auto' : _ref$minWidth,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 'auto' : _ref$width,
+    zIndex = _ref.zIndex,
+    onCloseTransitionEnd = _ref.onCloseTransitionEnd;
+  var mergedPalette = (0, _palette.useComponentPalette)('dropdown');
+  var position = (0, _react.useRef)({
+    isAbove: true,
+    translateY: '0px'
+  });
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    elRef = _useState2[0],
+    setElRef = _useState2[1];
+  var handleCloseTransitionEnd = (0, _react.useCallback)(function (event) {
+    if (event.propertyName !== 'opacity') return;
+    if (isOpen) return;
+    if (onCloseTransitionEnd) onCloseTransitionEnd();
+  }, [isOpen, onCloseTransitionEnd]);
+  var getPosition = (0, _react.useCallback)(function (_ref2) {
+    var dropdownHeight = _ref2.dropdownHeight,
+      belowHeight = _ref2.belowHeight,
+      aboveHeight = _ref2.aboveHeight,
+      dropdownIndent = _ref2.dropdownIndent;
+    var isEnoughSpaceBelow = belowHeight >= dropdownHeight + dropdownIndent;
+    if (isEnoughSpaceBelow) return {
+      isAbove: false,
+      translateY: '0px'
+    };
+    var isEnoghtSpaceAbove = aboveHeight >= dropdownHeight + dropdownIndent;
+    if (isEnoghtSpaceAbove) return {
+      isAbove: true,
+      translateY: '0px'
+    };
+    var isMoreSpaceBelowThanAbove = belowHeight >= aboveHeight;
+    if (isMoreSpaceBelowThanAbove) {
+      var outOfViewPortHeight = dropdownHeight + dropdownIndent - belowHeight;
+      return {
+        isAbove: false,
+        translateY: "-".concat(outOfViewPortHeight, "px")
+      };
+    } else {
+      var _outOfViewPortHeight = dropdownHeight + dropdownIndent - aboveHeight;
+      return {
+        isAbove: true,
+        translateY: "".concat(_outOfViewPortHeight, "px")
+      };
+    }
+  }, []);
+  var openFlagCache = (0, _react.useRef)(null);
+  if (elRef) {
+    var isTriggeredByFlag = openFlagCache.current !== isOpen;
+    openFlagCache.current = isOpen;
+    if (isTriggeredByFlag && isOpen) {
+      var viewportHeight = window.innerHeight;
+      var parent = elRef.parentElement;
+      var _parent$getBoundingCl = parent.getBoundingClientRect(),
+        bottom = _parent$getBoundingCl.bottom,
+        aboveHeight = _parent$getBoundingCl.top;
+      var belowHeight = viewportHeight - bottom;
+      var dropdownHeight = elRef.scrollHeight;
+      position.current = isAutoPosition ? getPosition({
+        dropdownHeight: dropdownHeight,
+        aboveHeight: aboveHeight,
+        belowHeight: belowHeight,
+        dropdownIndent: positionVertical
+      }) : {
+        isAbove: false,
+        translateY: '0px'
+      };
+    }
+  }
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    ref: setElRef,
+    $isVisible: isOpen,
+    $isAbove: position.current.isAbove,
+    $translateY: position.current.translateY,
+    $positionVertical: positionVertical,
+    $positionLeft: positionLeft,
+    $positionRight: positionRight,
+    $minWidth: minWidth,
+    $width: width,
+    $zIndex: zIndex,
+    onTransitionEnd: handleCloseTransitionEnd,
+    $palette: mergedPalette
+  }, children);
+};

package/dist/components/common/Dropdown/index.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dropdown, TProps } from '.';
+declare const meta: Meta<typeof Dropdown>;
+export default meta;
+export declare const Default: StoryObj<TProps>;
+export declare const AutoPosition: StoryObj<TProps>;

package/dist/components/common/Dropdown/index.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = exports.AutoPosition = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _addonActions = require("@storybook/addon-actions");
+var _ = require(".");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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 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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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); }
+var meta = {
+  title: 'common/Dropdown',
+  component: _.Dropdown,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var args = {
+  isOpen: false,
+  positionVertical: 5,
+  positionLeft: '0px',
+  positionRight: 'auto',
+  minWidth: 'auto',
+  width: 'auto',
+  zIndex: 5,
+  onCloseTransitionEnd: (0, _addonActions.action)('closeTransitionEnd'),
+  children: Array(100).fill('children ').join('')
+};
+var Default = exports.Default = {
+  args: _objectSpread(_objectSpread({}, args), {}, {
+    isAutoPosition: false
+  }),
+  render: function render(props) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "parent"), /*#__PURE__*/_react["default"].createElement(_.Dropdown, props));
+  }
+};
+var AutoPosition = exports.AutoPosition = {
+  args: _objectSpread(_objectSpread({}, args), {}, {
+    isAutoPosition: true
+  }),
+  render: function render(props) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, "\u0414\u0440\u043E\u043F\u0434\u0430\u0443\u043D \u043D\u0438\u0436\u0435 \u2193", /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        position: 'relative',
+        marginTop: '800px',
+        marginBottom: '800px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "parent"), /*#__PURE__*/_react["default"].createElement(_.Dropdown, props)));
+  }
+};

package/dist/components/common/Dropdown/palette.d.ts

@@ -0,0 +1,6 @@
+import { TAbstractPalette } from '../../../palette';
+export type TDropdownPalette = {
+    bg: string;
+    shadow: string;
+};
+export declare const generateDropdownPalette: (abstractPalette: TAbstractPalette) => TDropdownPalette;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateDropdownPalette = void 0;
+var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var generateDropdownPalette = exports.generateDropdownPalette = function generateDropdownPalette(abstractPalette) {
+  return {
+    bg: abstractPalette.base,
+    shadow: (0, _hexToRgba["default"])(abstractPalette.primary, 0.09)
+  };
+};

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { TDropdownPalette } from './palette';
+export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isVisible: boolean;
+    $isAbove: boolean;
+    $translateY: string;
+    $positionVertical: number;
+    $positionLeft: string;
+    $positionRight: string;
+    $minWidth: string;
+    $width: string;
+    $zIndex?: number | undefined;
+    $palette: TDropdownPalette;
+}>>;

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

@@ -0,0 +1,47 @@
+"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 && Object.prototype.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 hidden = (0, _styledComponents.css)(["visibility:hidden;opacity:0;transition:visibility 0ms 200ms,opacity 200ms 0ms ease;"]);
+var visible = (0, _styledComponents.css)(["visibility:visible;opacity:1;transition:visibility 0ms 0ms,opacity 200ms 0ms ease;"]);
+var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-1f1enhf-0"
+})(["overflow:hidden;border-radius:10px;box-shadow:0px 10px 17px ", ";bckground:", ";min-width:", ";width:", ";position:absolute;left:", ";right:", ";z-index:", ";", ";", ";", ";"], function (_ref) {
+  var $palette = _ref.$palette;
+  return $palette.shadow;
+}, function (_ref2) {
+  var $palette = _ref2.$palette;
+  return $palette.bg;
+}, function (_ref3) {
+  var $minWidth = _ref3.$minWidth;
+  return $minWidth;
+}, function (_ref4) {
+  var $width = _ref4.$width;
+  return $width;
+}, function (_ref5) {
+  var $positionLeft = _ref5.$positionLeft;
+  return $positionLeft;
+}, function (_ref6) {
+  var $positionRight = _ref6.$positionRight;
+  return $positionRight;
+}, function (_ref7) {
+  var $zIndex = _ref7.$zIndex;
+  return $zIndex !== null && $zIndex !== void 0 ? $zIndex : 5;
+}, function (_ref8) {
+  var $isVisible = _ref8.$isVisible;
+  return $isVisible ? visible : hidden;
+}, function (_ref9) {
+  var $isAbove = _ref9.$isAbove,
+    $positionVertical = _ref9.$positionVertical;
+  return $isAbove ? (0, _styledComponents.css)(["bottom:calc(100% + ", "px);"], $positionVertical) : (0, _styledComponents.css)(["top:calc(100% + ", "px);"], $positionVertical);
+}, function (_ref10) {
+  var $translateY = _ref10.$translateY;
+  return (0, _styledComponents.css)(["transform:translateY(", ");"], $translateY);
+});

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

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+export type TProps = {
+    children: ReactNode;
+    maxHeight: number;
+};
+export declare const Scrollbar: FC<TProps>;

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

@@ -0,0 +1,56 @@
+"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 = _interopRequireWildcard(require("react"));
+var _reactScrollbarsCustom = require("react-scrollbars-custom");
+var _palette = require("../../../palette");
+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 && Object.prototype.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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var Scrollbar = exports.Scrollbar = function Scrollbar(_ref) {
+  var children = _ref.children,
+    maxHeight = _ref.maxHeight;
+  var palette = (0, _palette.useComponentPalette)('scrollbar');
+  var props = (0, _react.useMemo)(function () {
+    return {
+      style: {
+        maxHeight: maxHeight,
+        minWidth: '100%',
+        maxWidth: '100%'
+      },
+      thumbYProps: {
+        style: {
+          backgroundColor: palette.thumb
+        }
+      },
+      trackYProps: {
+        style: {
+          backgroundColor: 'transparent',
+          width: '6px',
+          height: 'calc(100% - 0px)',
+          top: '0px'
+        }
+      },
+      thumbXProps: {
+        style: {
+          backgroundColor: palette.thumb
+        }
+      },
+      trackXProps: {
+        style: {
+          backgroundColor: 'transparent',
+          height: '6px',
+          width: 'calc(100% - 10px)',
+          left: '0px'
+        }
+      }
+    };
+  }, [maxHeight, palette]);
+  return /*#__PURE__*/_react["default"].createElement(_reactScrollbarsCustom.Scrollbar, _extends({
+    translateContentSizesToHolder: true
+  }, props), children);
+};

package/dist/components/common/Scrollbar/index.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import { Scrollbar } from '.';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import(".").TProps>;
+    tags: string[];
+};
+export default meta;
+export declare const Default: StoryObj<typeof Scrollbar>;
+export declare const Horisontall: StoryObj<typeof Scrollbar>;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Horisontall = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/Scrollbar',
+  component: _.Scrollbar,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var longDummyText = Array(10).fill("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eius\n    mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n    laborum.").join(' ');
+var Default = exports.Default = {
+  args: {
+    children: longDummyText,
+    maxHeight: 200
+  }
+};
+var Horisontall = exports.Horisontall = {
+  args: {
+    maxHeight: 200,
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 2000
+      }
+    }, longDummyText)
+  }
+};

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

@@ -0,0 +1,5 @@
+import { TAbstractPalette } from '../../../palette';
+export type TScrollbarPalette = {
+    thumb: string;
+};
+export declare const generateScrollbarPalette: (abstractPalette: TAbstractPalette) => TScrollbarPalette;

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateScrollbarPalette = void 0;
+var generateScrollbarPalette = exports.generateScrollbarPalette = function generateScrollbarPalette(abstractPalette) {
+  return {
+    thumb: abstractPalette.neutralFoggy
+  };
+};

package/dist/index.d.ts

@@ -8,4 +8,7 @@ export { InputLabel } from './components/form/InputLabel';
 export { PureInput } from './components/form/PureInput';
 export { PositiveIntegerInput } from './components/form/PositiveIntegerInput';
 export type { TProps as TPositiveIntegerInputProps } from './components/form/PositiveIntegerInput';
+export { Dropdown } from './components/common/Dropdown';
+export type { TProps as TDropdownProps } from './components/common/Dropdown';
+export { Scrollbar } from './components/common/Scrollbar';
 export { PaletteProvider } from './palette';

package/dist/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "Arrow", {
     return _Arrow.Arrow;
   }
 });
+Object.defineProperty(exports, "Dropdown", {
+  enumerable: true,
+  get: function get() {
+    return _Dropdown.Dropdown;
+  }
+});
 Object.defineProperty(exports, "InputLabel", {
   enumerable: true,
   get: function get() {
@@ -45,6 +51,12 @@ Object.defineProperty(exports, "PureInput", {
     return _PureInput.PureInput;
   }
 });
+Object.defineProperty(exports, "Scrollbar", {
+  enumerable: true,
+  get: function get() {
+    return _Scrollbar.Scrollbar;
+  }
+});
 Object.defineProperty(exports, "SecondaryButton", {
   enumerable: true,
   get: function get() {
@@ -78,4 +90,6 @@ var _Arrow = require("./components/common/Arrow");
 var _InputLabel = require("./components/form/InputLabel");
 var _PureInput = require("./components/form/PureInput");
 var _PositiveIntegerInput = require("./components/form/PositiveIntegerInput");
+var _Dropdown = require("./components/common/Dropdown");
+var _Scrollbar = require("./components/common/Scrollbar");
 var _palette = require("./palette");

package/dist/palette/constants.js

@@ -13,5 +13,6 @@ var defaultAbstractPalette = exports.defaultAbstractPalette = {
   neutralUsual: '#f1f2f6',
   neutralHeavy: '#ececf0',
   neutralMassive: '#dee0e7',
+  neutralFoggy: '#ccc',
   neutralBrutal: '#999'
 };

package/dist/palette/context.d.ts

@@ -5,6 +5,8 @@ import { TSecondaryButtonPalette } from '../components/common/SecondaryButton/pa
 import { TArrowPalette } from '../components/common/Arrow/palette';
 import { TInputLabelPalette } from '../components/form/InputLabel/palette';
 import { TPureInputPalette } from '../components/form/PureInput/palette';
+import { TDropdownPalette } from '../components/common/Dropdown/palette';
+import { TScrollbarPalette } from '../components/common/Scrollbar/palette';
 type TContext = {
     skeleton: TSkeletonPalette;
     invoiceboxSpinner: TInvoiceboxSpinnerPalette;
@@ -12,6 +14,8 @@ type TContext = {
     arrow: TArrowPalette;
     inputLabel: TInputLabelPalette;
     pureInput: TPureInputPalette;
+    dropdown: TDropdownPalette;
+    scrollbar: TScrollbarPalette;
 };
 export declare const PaletteContext: import("react").Context<TContext>;
 export {};

package/dist/palette/context.js

@@ -12,11 +12,15 @@ var _palette3 = require("../components/common/SecondaryButton/palette");
 var _palette4 = require("../components/common/Arrow/palette");
 var _palette5 = require("../components/form/InputLabel/palette");
 var _palette6 = require("../components/form/PureInput/palette");
+var _palette7 = require("../components/common/Dropdown/palette");
+var _palette8 = require("../components/common/Scrollbar/palette");
 var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createContext)({
   skeleton: (0, _palette.generateSkeletonPalette)(_constants.defaultAbstractPalette),
   invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(_constants.defaultAbstractPalette),
   secondaryButton: (0, _palette3.generateSecondaryButtonPalette)(_constants.defaultAbstractPalette),
   arrow: (0, _palette4.generateArrowPalette)(_constants.defaultAbstractPalette),
   inputLabel: (0, _palette5.generateInputLabelPalette)(_constants.defaultAbstractPalette),
-  pureInput: (0, _palette6.generatePureInputPalette)(_constants.defaultAbstractPalette)
+  pureInput: (0, _palette6.generatePureInputPalette)(_constants.defaultAbstractPalette),
+  dropdown: (0, _palette7.generateDropdownPalette)(_constants.defaultAbstractPalette),
+  scrollbar: (0, _palette8.generateScrollbarPalette)(_constants.defaultAbstractPalette)
 });

package/dist/palette/provider.js

@@ -13,6 +13,8 @@ var _palette3 = require("../components/common/SecondaryButton/palette");
 var _palette4 = require("../components/common/Arrow/palette");
 var _palette5 = require("../components/form/InputLabel/palette");
 var _palette6 = require("../components/form/PureInput/palette");
+var _palette7 = require("../components/common/Dropdown/palette");
+var _palette8 = require("../components/common/Scrollbar/palette");
 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 && Object.prototype.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 _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); }
@@ -58,9 +60,11 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
       secondaryButton: mergedSecondaryButtonPalette,
       arrow: mergedArrowPalette,
       inputLabel: mergedInputLabelPalette,
-      pureInput: mergedPureInputPalette
+      pureInput: mergedPureInputPalette,
+      dropdown: (0, _palette7.generateDropdownPalette)(mergedAbstractPalette),
+      scrollbar: (0, _palette8.generateScrollbarPalette)(mergedAbstractPalette)
     };
-  }, [mergedSkeletonPalette, mergedInvoiceboxSpinnerPalette, mergedSecondaryButtonPalette, mergedArrowPalette, mergedInputLabelPalette, mergedPureInputPalette]);
+  }, [mergedSkeletonPalette, mergedInvoiceboxSpinnerPalette, mergedSecondaryButtonPalette, mergedArrowPalette, mergedInputLabelPalette, mergedPureInputPalette, mergedAbstractPalette]);
   return /*#__PURE__*/_react["default"].createElement(_context.PaletteContext.Provider, {
     value: value
   }, children);

package/dist/palette/types.d.ts

@@ -7,5 +7,6 @@ export type TAbstractPalette = {
     neutralLight: string;
     neutralHeavy: string;
     neutralMassive: string;
+    neutralFoggy: string;
     neutralBrutal: string;
 };

package/dist/palette/useComponentPalette.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useComponentPalette = void 0;
+var _react = require("react");
 var _usePalette = require("./usePalette");
 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 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; }
@@ -14,5 +15,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 var useComponentPalette = exports.useComponentPalette = function useComponentPalette(componentName, componentPropsPalette) {
   var palette = (0, _usePalette.usePalette)();
   var componentPalette = palette[componentName];
-  return _objectSpread(_objectSpread({}, componentPalette), componentPropsPalette);
+  var value = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, componentPalette), componentPropsPalette);
+  }, [componentPalette, componentPropsPalette]);
+  return value;
 };

package/dist/palette/usePalette.d.ts

@@ -5,4 +5,6 @@ export declare const usePalette: () => {
     arrow: import("../components/common/Arrow/palette").TArrowPalette;
     inputLabel: import("../components/form/InputLabel/palette").TInputLabelPalette;
     pureInput: import("../components/form/PureInput/palette").TPureInputPalette;
+    dropdown: import("../components/common/Dropdown/palette").TDropdownPalette;
+    scrollbar: import("../components/common/Scrollbar/palette").TScrollbarPalette;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.35",
+    "version": "0.1.0-alpha.37",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {
@@ -49,6 +49,7 @@
     "dependencies": {
         "hex-to-rgba": "^2.0.1",
         "lottie-react": "^2.4.0",
+        "react-scrollbars-custom": "^4.1.1",
         "styled-components": "^6.1.8"
     },
     "peerDependencies": {