@invoicebox/ui 0.1.0-alpha.36 → 0.1.0-alpha.38

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

@@ -13,7 +13,7 @@ var visible = (0, _styledComponents.css)(["visibility:visible;opacity:1;transiti
 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) {
+})(["overflow:hidden;border-radius:10px;box-shadow:0px 10px 17px ", ";background:", ";min-width:", ";width:", ";position:absolute;left:", ";right:", ";z-index:", ";", ";", ";", ";"], function (_ref) {
   var $palette = _ref.$palette;
   return $palette.shadow;
 }, function (_ref2) {

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

@@ -10,4 +10,5 @@ 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

@@ -51,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() {
@@ -85,4 +91,5 @@ 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

@@ -6,6 +6,7 @@ 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;
@@ -14,6 +15,7 @@ type TContext = {
     inputLabel: TInputLabelPalette;
     pureInput: TPureInputPalette;
     dropdown: TDropdownPalette;
+    scrollbar: TScrollbarPalette;
 };
 export declare const PaletteContext: import("react").Context<TContext>;
 export {};

package/dist/palette/context.js

@@ -13,6 +13,7 @@ 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),
@@ -20,5 +21,6 @@ var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createCont
   arrow: (0, _palette4.generateArrowPalette)(_constants.defaultAbstractPalette),
   inputLabel: (0, _palette5.generateInputLabelPalette)(_constants.defaultAbstractPalette),
   pureInput: (0, _palette6.generatePureInputPalette)(_constants.defaultAbstractPalette),
-  dropdown: (0, _palette7.generateDropdownPalette)(_constants.defaultAbstractPalette)
+  dropdown: (0, _palette7.generateDropdownPalette)(_constants.defaultAbstractPalette),
+  scrollbar: (0, _palette8.generateScrollbarPalette)(_constants.defaultAbstractPalette)
 });

package/dist/palette/provider.js

@@ -14,6 +14,7 @@ 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); }
@@ -60,7 +61,8 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
       arrow: mergedArrowPalette,
       inputLabel: mergedInputLabelPalette,
       pureInput: mergedPureInputPalette,
-      dropdown: (0, _palette7.generateDropdownPalette)(mergedAbstractPalette)
+      dropdown: (0, _palette7.generateDropdownPalette)(mergedAbstractPalette),
+      scrollbar: (0, _palette8.generateScrollbarPalette)(mergedAbstractPalette)
     };
   }, [mergedSkeletonPalette, mergedInvoiceboxSpinnerPalette, mergedSecondaryButtonPalette, mergedArrowPalette, mergedInputLabelPalette, mergedPureInputPalette, mergedAbstractPalette]);
   return /*#__PURE__*/_react["default"].createElement(_context.PaletteContext.Provider, {

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/usePalette.d.ts

@@ -6,4 +6,5 @@ export declare const usePalette: () => {
     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.36",
+    "version": "0.1.0-alpha.38",
     "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": {