@stokr/components-library 2.3.58-beta.6 → 2.3.58-beta.7

package/dist/components/Chips/Chip.stories.js

@@ -6,39 +6,30 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.WithTooltip = exports.Default = exports.Active = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Chip = _interopRequireDefault(require("./Chip"));
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var _default = {
+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); }
+var _default = exports.default = {
   title: 'Components/Chip',
   component: _Chip.default
 };
-exports.default = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_Chip.default, args);
-};
-var Default = Template.bind({});
-exports.Default = Default;
+const Template = args => /*#__PURE__*/_react.default.createElement(_Chip.default, args);
+const Default = exports.Default = Template.bind({});
 Default.args = {
   children: 'Default Chip',
   isActive: false,
-  onClick: function onClick() {
-    return alert('Chip clicked!');
-  },
+  onClick: () => alert('Chip clicked!'),
   tooltip: 'This is a chip'
 };
-var Active = Template.bind({});
-exports.Active = Active;
+const Active = exports.Active = Template.bind({});
 Active.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   isActive: true,
   children: 'Active Chip'
 });
-var WithTooltip = Template.bind({});
-exports.WithTooltip = WithTooltip;
+const WithTooltip = exports.WithTooltip = Template.bind({});
 WithTooltip.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   tooltip: 'Tooltip text'
 });

package/dist/components/Chips/Chip.styles.js

@@ -6,32 +6,32 @@ Object.defineProperty(exports, "__esModule", {
 exports.Wrapper = exports.TooltipChipIcon = exports.StyledChip = exports.ChipText = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _theme = _interopRequireDefault(require("../../styles/theme"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var StyledChip = _styledComponents.default.div.withConfig({
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledChip = exports.StyledChip = _styledComponents.default.div.withConfig({
   displayName: "Chipstyles__StyledChip",
   componentId: "sc-pcmyil-0"
-})(["display:inline-flex;gap:4px;align-items:center;padding:8px 16px;border-radius:20px;background-color:transparent;color:black;cursor:pointer;transition:background-color 0.3s;font-size:11px;font-weight:400;line-height:20px;letter-spacing:3px;font-weight:600;min-height:40px;&:hover,&:active{background-color:red;color:white;}", ""], function (_ref) {
-  var isActive = _ref.isActive;
+})(["display:inline-flex;gap:4px;align-items:center;padding:8px 16px;border-radius:20px;background-color:transparent;color:black;cursor:pointer;transition:background-color 0.3s;font-size:11px;font-weight:400;line-height:20px;letter-spacing:3px;font-weight:600;min-height:40px;&:hover,&:active{background-color:red;color:white;}", ""], _ref => {
+  let {
+    isActive
+  } = _ref;
   return isActive && "\n      background-color: red;\n      color: white;\n      font-weight: 800;\n\n      ".concat(TooltipChipIcon, " {\n        color: ").concat(_theme.default.cWhite, ";\n      }\n    ");
 });
-exports.StyledChip = StyledChip;
-var Wrapper = _styledComponents.default.div.withConfig({
+const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Chipstyles__Wrapper",
   componentId: "sc-pcmyil-1"
-})(["display:flex;gap:32px;", ""], function (_ref2) {
-  var customWrapperStyle = _ref2.customWrapperStyle;
+})(["display:flex;gap:32px;", ""], _ref2 => {
+  let {
+    customWrapperStyle
+  } = _ref2;
   return customWrapperStyle;
 });
-exports.Wrapper = Wrapper;
-var ChipText = _styledComponents.default.span.withConfig({
+const ChipText = exports.ChipText = _styledComponents.default.span.withConfig({
   displayName: "Chipstyles__ChipText",
   componentId: "sc-pcmyil-2"
 })(["text-transform:uppercase;"]);
-exports.ChipText = ChipText;
-var TooltipChipIcon = _styledComponents.default.i.attrs({
+const TooltipChipIcon = exports.TooltipChipIcon = _styledComponents.default.i.attrs({
   className: 'ion ion-md-information-circle-outline'
 }).withConfig({
   displayName: "Chipstyles__TooltipChipIcon",
   componentId: "sc-pcmyil-3"
-})(["position:relative;display:inline-block;font-size:16px;line-height:16px;vertical-align:middle;color:", ";transition:color 0.2s;", ":hover &{color:", ";}"], _theme.default.cGrey2, StyledChip, _theme.default.cWhite);
-exports.TooltipChipIcon = TooltipChipIcon;
+})(["position:relative;display:inline-block;font-size:16px;line-height:16px;vertical-align:middle;color:", ";transition:color 0.2s;", ":hover &{color:", ";}"], _theme.default.cGrey2, StyledChip, _theme.default.cWhite);

package/dist/components/Chips/ChipWrapper.js

@@ -1,6 +1,5 @@
 "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
 });
@@ -10,55 +9,39 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Chip = _interopRequireDefault(require("./Chip"));
 var _Chip2 = require("./Chip.styles");
 var _TabsNav = require("../TabsNav/TabsNav.styles");
-var _excluded = ["chips", "onActiveChipChange", "customWrapperStyle"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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); }
-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; }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var ChipsWrapper = function ChipsWrapper(_ref) {
-  var chips = _ref.chips,
-    _ref$onActiveChipChan = _ref.onActiveChipChange,
-    onActiveChipChange = _ref$onActiveChipChan === void 0 ? function () {} : _ref$onActiveChipChan,
-    customWrapperStyle = _ref.customWrapperStyle,
+const _excluded = ["chips", "onActiveChipChange", "customWrapperStyle"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const ChipsWrapper = _ref => {
+  let {
+      chips,
+      onActiveChipChange = () => {},
+      customWrapperStyle
+    } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = (0, _react.useState)(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    activeChip = _useState2[0],
-    setActiveChip = _useState2[1];
-  (0, _react.useEffect)(function () {
-    var initialActiveIndex = chips.findIndex(function (chip) {
-      return chip.isActive;
-    });
+  const [activeChip, setActiveChip] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    const initialActiveIndex = chips.findIndex(chip => chip.isActive);
     if (initialActiveIndex !== -1) {
       setActiveChip(initialActiveIndex);
       onActiveChipChange(initialActiveIndex);
     }
   }, [chips]);
-  var handleChipClick = function handleChipClick(index) {
+  const handleChipClick = index => {
     setActiveChip(index);
     onActiveChipChange(index); // Optionally notify parent about the change
   };
-
   return /*#__PURE__*/_react.default.createElement(_TabsNav.Scroll, null, /*#__PURE__*/_react.default.createElement(_Chip2.Wrapper, {
     customWrapperStyle: customWrapperStyle
-  }, chips.map(function (chip, index) {
-    return /*#__PURE__*/_react.default.createElement(_Chip.default, _extends({
-      key: index,
-      isActive: activeChip === index,
-      onClick: function onClick() {
-        return handleChipClick(index);
-      },
-      tooltip: chip.tooltip
-    }, props), chip.label);
-  })));
+  }, chips.map((chip, index) => /*#__PURE__*/_react.default.createElement(_Chip.default, _extends({
+    key: index,
+    isActive: activeChip === index,
+    onClick: () => handleChipClick(index),
+    tooltip: chip.tooltip
+  }, props), chip.label))));
 };
 exports.ChipsWrapper = ChipsWrapper;
 ChipsWrapper.propTypes = {
@@ -70,5 +53,4 @@ ChipsWrapper.propTypes = {
   onActiveChipChange: _propTypes.default.func,
   customWrapperStyle: _propTypes.default.object
 };
-var _default = ChipsWrapper;
-exports.default = _default;
+var _default = exports.default = ChipsWrapper;

package/dist/components/Chips/ChipsWrapper.stories.js

@@ -6,23 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Default = exports.CustomStyle = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ChipWrapper = _interopRequireDefault(require("./ChipWrapper"));
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var _default = {
+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); }
+var _default = exports.default = {
   title: 'Components/ChipsWrapper',
   component: _ChipWrapper.default
 };
-exports.default = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_ChipWrapper.default, args);
-};
-var Default = Template.bind({});
-exports.Default = Default;
+const Template = args => /*#__PURE__*/_react.default.createElement(_ChipWrapper.default, args);
+const Default = exports.Default = Template.bind({});
 Default.args = {
   chips: [{
     label: 'Chip 1',
@@ -37,12 +32,9 @@ Default.args = {
     tooltip: 'Tooltip 3',
     isActive: false
   }],
-  onActiveChipChange: function onActiveChipChange(index) {
-    return alert("Active chip changed to: ".concat(index));
-  }
+  onActiveChipChange: index => alert("Active chip changed to: ".concat(index))
 };
-var CustomStyle = Template.bind({});
-exports.CustomStyle = CustomStyle;
+const CustomStyle = exports.CustomStyle = Template.bind({});
 CustomStyle.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   customWrapperStyle: {
     backgroundColor: '#f0f0f0',

package/dist/components/ComponentScroll/ComponentScroll.js

@@ -1,6 +1,5 @@
 "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
 });
@@ -9,30 +8,31 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactCustomScrollbars = require("react-custom-scrollbars-2");
 var _ComponentScroll = require("./ComponentScroll.styles");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var ComponentScroll = function ComponentScroll(props) {
-  var children = props.children,
-    noMobileScroll = props.noMobileScroll,
-    autoHeight = props.autoHeight,
-    autoHeightMax = props.autoHeightMax,
-    autoHeightMin = props.autoHeightMin,
-    offset = props.offset,
-    barPadding = props.barPadding,
-    topPadding = props.topPadding,
-    className = props.className,
-    handleScroll = props.handleScroll,
-    fullHeight = props.fullHeight;
-  var scrollRef = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ComponentScroll = props => {
+  const {
+    children,
+    noMobileScroll,
+    autoHeight,
+    autoHeightMax,
+    autoHeightMin,
+    offset,
+    barPadding,
+    topPadding,
+    className,
+    handleScroll,
+    fullHeight
+  } = props;
+  const scrollRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
     if (scrollRef.current) {
       //set scroll ref on initial render
       handleScroll && handleScroll({}, scrollRef.current);
     }
   }, []);
-  var onMouseMove = function onMouseMove() {};
-  var handleScrollFrame = function handleScrollFrame(values) {
+  const onMouseMove = () => {};
+  const handleScrollFrame = values => {
     if (values) {
       //if we need scroll ref and scroll values, you can use handleScroll function to handle it
       handleScroll && handleScroll(values, scrollRef.current);
@@ -52,18 +52,10 @@ var ComponentScroll = function ComponentScroll(props) {
     style: {
       height: '100%'
     },
-    renderTrackHorizontal: function renderTrackHorizontal(props) {
-      return /*#__PURE__*/_react.default.createElement(_ComponentScroll.TrackH, props);
-    },
-    renderThumbHorizontal: function renderThumbHorizontal(props) {
-      return /*#__PURE__*/_react.default.createElement(_ComponentScroll.ThumbH, props);
-    },
-    renderTrackVertical: function renderTrackVertical(props) {
-      return /*#__PURE__*/_react.default.createElement(_ComponentScroll.TrackV, props);
-    },
-    renderThumbVertical: function renderThumbVertical(props) {
-      return /*#__PURE__*/_react.default.createElement(_ComponentScroll.ThumbV, props);
-    },
+    renderTrackHorizontal: props => /*#__PURE__*/_react.default.createElement(_ComponentScroll.TrackH, props),
+    renderThumbHorizontal: props => /*#__PURE__*/_react.default.createElement(_ComponentScroll.ThumbH, props),
+    renderTrackVertical: props => /*#__PURE__*/_react.default.createElement(_ComponentScroll.TrackV, props),
+    renderThumbVertical: props => /*#__PURE__*/_react.default.createElement(_ComponentScroll.ThumbV, props),
     hideTracksWhenNotNeeded: true,
     onMouseMove: onMouseMove,
     onScrollFrame: handleScrollFrame,
@@ -100,5 +92,4 @@ ComponentScroll.defaultProps = {
   offset: 0,
   handleScroll: null
 };
-var _default = ComponentScroll;
-exports.default = _default;
+var _default = exports.default = ComponentScroll;

package/dist/components/ComponentScroll/ComponentScroll.stories.js

@@ -9,8 +9,8 @@ var _ComponentScroll = require("./ComponentScroll");
 var _SvgIcons = require("../SvgIcons");
 var _Modal = require("../Modal/Modal");
 var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
   title: 'Components Library/ComponentScroll',
   component: _ComponentScroll.ComponentScroll,
   argTypes: {
@@ -82,37 +82,30 @@ var _default = {
     }
   }
 }; //making default background grey in story as this reveals height /offset properties ..
-exports.default = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_ComponentScroll.ComponentScroll, args);
-};
-var ScrollAutoHeight1000 = Template.bind({});
-exports.ScrollAutoHeight1000 = ScrollAutoHeight1000;
+const Template = args => /*#__PURE__*/_react.default.createElement(_ComponentScroll.ComponentScroll, args);
+const ScrollAutoHeight1000 = exports.ScrollAutoHeight1000 = Template.bind({});
 ScrollAutoHeight1000.args = {
   children: [/*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null)],
   autoHeight: true,
   autoHeightMax: 1000,
   autoHeightMin: 1000
 };
-var ScrollAutoHeight2000 = Template.bind({});
-exports.ScrollAutoHeight2000 = ScrollAutoHeight2000;
+const ScrollAutoHeight2000 = exports.ScrollAutoHeight2000 = Template.bind({});
 ScrollAutoHeight2000.args = {
   children: [/*#__PURE__*/_react.default.createElement(_SvgIcons.OneSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_SvgIcons.FourSvg, null)],
   autoHeight: true,
   autoHeightMax: 2000,
   autoHeightMin: 2000
 };
-var ModalWithScroll = function ModalWithScroll(args) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
-    thin: true,
-    fullscreen: true,
-    isOpen: true
-  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
-    noPadding: true
-  }, /*#__PURE__*/_react.default.createElement(_ComponentScroll.ComponentScroll, args, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      height: 350
-    }
-  }, "some text")))));
-};
+const ModalWithScroll = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+  thin: true,
+  fullscreen: true,
+  isOpen: true
+}, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+  noPadding: true
+}, /*#__PURE__*/_react.default.createElement(_ComponentScroll.ComponentScroll, args, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    height: 350
+  }
+}, "some text")))));
 exports.ModalWithScroll = ModalWithScroll;

package/dist/components/ComponentScroll/ComponentScroll.styles.js

@@ -1,6 +1,5 @@
 "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
 });
@@ -8,64 +7,40 @@ exports.TrackV = exports.TrackH = exports.ThumbV = exports.ThumbH = exports.Oute
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _rwd = _interopRequireDefault(require("../../styles/rwd"));
 var _theme = _interopRequireDefault(require("../../styles/theme"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var Container = _styledComponents.default.div.withConfig({
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "ComponentScrollstyles__Container",
   componentId: "sc-12avd6v-0"
-})(["position:relative;height:364px;width:100%;display:flex;@media screen and (max-width:767px){height:", ";}", " ", ""], function (_ref) {
-  var isMobile = _ref.isMobile;
+})(["position:relative;height:364px;width:100%;display:flex;@media screen and (max-width:767px){height:", ";}", " ", ""], _ref => {
+  let {
+    isMobile
+  } = _ref;
   return isMobile ? '100%' : '364px';
-}, function (props) {
-  return props.fullHeight && (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      height: 100%;\n    "])));
-}, function (props) {
-  return props.noMobileScroll && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      & > div > div {\n        overflow: visible !important;\n\n        > div:first-child {\n          overflow: visible !important;\n        }\n      }\n\n      ", "\n    "])), _rwd.default.Medium(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      & > div > div {\n        overflow: hidden !important;\n\n        > div:first-child {\n          overflow: scroll !important;  \n        }\n      }\n    "]))));
-});
-exports.Container = Container;
-var TrackH = _styledComponents.default.div.withConfig({
+}, props => props.fullHeight && (0, _styledComponents.css)(["height:100%;"]), props => props.noMobileScroll && (0, _styledComponents.css)(["& > div > div{overflow:visible !important;> div:first-child{overflow:visible !important;}}", ""], _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      & > div > div {\n        overflow: hidden !important;\n\n        > div:first-child {\n          overflow: scroll !important;  \n        }\n      }\n    "])))));
+const TrackH = exports.TrackH = _styledComponents.default.div.withConfig({
   displayName: "ComponentScrollstyles__TrackH",
   componentId: "sc-12avd6v-1"
-})(["background-color:", ";left:16px;right:16px;bottom:14px;height:4px;border-radius:4px;", ""], function (props) {
-  return _theme.default.cGrey;
-}, _rwd.default.Large(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    left: 32px;\n    right: 32px;\n    bottom: 30px;\n  "]))));
-exports.TrackH = TrackH;
-var ThumbH = _styledComponents.default.div.withConfig({
+})(["background-color:", ";left:16px;right:16px;bottom:14px;height:4px;border-radius:4px;", ""], props => _theme.default.cGrey, _rwd.default.Large(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    left: 32px;\n    right: 32px;\n    bottom: 30px;\n  "]))));
+const ThumbH = exports.ThumbH = _styledComponents.default.div.withConfig({
   displayName: "ComponentScrollstyles__ThumbH",
   componentId: "sc-12avd6v-2"
-})(["background-color:", ";height:4px;border-radius:4px;"], function (props) {
-  return _theme.default.cWarning;
-});
-exports.ThumbH = ThumbH;
-var TrackV = _styledComponents.default.div.withConfig({
+})(["background-color:", ";height:4px;border-radius:4px;"], props => _theme.default.cWarning);
+const TrackV = exports.TrackV = _styledComponents.default.div.withConfig({
   displayName: "ComponentScrollstyles__TrackV",
   componentId: "sc-12avd6v-3"
-})(["background-color:", ";top:16px;bottom:16px;right:14px;width:4px;border-radius:4px;", ""], function (props) {
-  return _theme.default.cGrey;
-}, _rwd.default.Large(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    top: 32px;\n    bottom: 32px;\n    right: 30px;\n  "]))));
-exports.TrackV = TrackV;
-var ThumbV = _styledComponents.default.div.withConfig({
+})(["background-color:", ";top:16px;bottom:16px;right:14px;width:4px;border-radius:4px;", ""], props => _theme.default.cGrey, _rwd.default.Large(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    top: 32px;\n    bottom: 32px;\n    right: 30px;\n  "]))));
+const ThumbV = exports.ThumbV = _styledComponents.default.div.withConfig({
   displayName: "ComponentScrollstyles__ThumbV",
   componentId: "sc-12avd6v-4"
-})(["background-color:", ";width:4px;border-radius:4px;"], function (props) {
-  return _theme.default.cWarning;
-});
-exports.ThumbV = ThumbV;
-var Outer = _styledComponents.default.div.withConfig({
+})(["background-color:", ";width:4px;border-radius:4px;"], props => _theme.default.cWarning);
+const Outer = exports.Outer = _styledComponents.default.div.withConfig({
   displayName: "ComponentScrollstyles__Outer",
   componentId: "sc-12avd6v-5"
-})(["position:relative;flex-grow:1;max-height:100%;max-width:100%;", " ", ""], function (props) {
-  return props.barPadding > -1 && props.offset && "\n    margin-right: ".concat(props.offset, "px;\n    margin-bottom: ").concat(props.offset, "px;\n\n    ").concat(TrackH, " {\n      left: ").concat(props.barPadding, "px;\n      right: ").concat(props.barPadding - props.offset, "px;\n      bottom: 0;\n    }\n\n    ").concat(TrackV, " {\n      top: ").concat(props.barPadding, "px;\n      bottom: ").concat(props.barPadding - props.offset, "px;\n      right: 0;\n    }\n  ");
-}, function (props) {
-  return props.topPadding !== 0 && "\n    ".concat(TrackV, " {\n      top: ").concat(props.topPadding, "px;\n    }\n  ");
-});
-exports.Outer = Outer;
-var Inner = _styledComponents.default.div.withConfig({
+})(["position:relative;flex-grow:1;max-height:100%;max-width:100%;", " ", ""], props => props.barPadding > -1 && props.offset && "\n    margin-right: ".concat(props.offset, "px;\n    margin-bottom: ").concat(props.offset, "px;\n\n    ").concat(TrackH, " {\n      left: ").concat(props.barPadding, "px;\n      right: ").concat(props.barPadding - props.offset, "px;\n      bottom: 0;\n    }\n\n    ").concat(TrackV, " {\n      top: ").concat(props.barPadding, "px;\n      bottom: ").concat(props.barPadding - props.offset, "px;\n      right: 0;\n    }\n  "), props => props.topPadding !== 0 && "\n    ".concat(TrackV, " {\n      top: ").concat(props.topPadding, "px;\n    }\n  "));
+const Inner = exports.Inner = _styledComponents.default.div.withConfig({
   displayName: "ComponentScrollstyles__Inner",
   componentId: "sc-12avd6v-6"
-})(["position:relative;", ""], function (props) {
-  return props.offset && "\n    padding-right: ".concat(-props.offset, "px;\n    padding-bottom: ").concat(-props.offset, "px;\n  ");
-});
-exports.Inner = Inner;
+})(["position:relative;", ""], props => props.offset && "\n    padding-right: ".concat(-props.offset, "px;\n    padding-bottom: ").concat(-props.offset, "px;\n  "));