intelicoreact 0.2.4 → 0.2.5

package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,36 +15,50 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput/CheckboxInput"));
 
+var _AccordionWithCheckbox = _interopRequireDefault(require("./partial/AccordionWithCheckbox"));
+
 require("./TieredCheckboxes.scss");
 
+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 RC = 'tiered-checkboxes';
+
 var TieredCheckboxes = function TieredCheckboxes(_ref) {
   var items = _ref.items,
       className = _ref.className,
       onChange = _ref.onChange,
-      isUseParentsClassesAsDataset = _ref.isUseParentsClassesAsDataset;
+      isUseParentsClassesAsDataset = _ref.isUseParentsClassesAsDataset,
+      isUseAccordionForGroup = _ref.isUseAccordionForGroup,
+      accordionIcons = _ref.accordionIcons;
   var handle = {
-    changeParent: function changeParent(value, key) {
+    changeParent: function changeParent(value, key, prop) {
       var parent = items.find(function (item) {
         return item.key === key;
       });
-      parent.value = value;
-      if (value) parent.children.filter(function (_ref2) {
-        var disabled = _ref2.disabled;
-        return !disabled;
-      }).forEach(function (item) {
-        return item.value = true;
-      });else parent.children.filter(function (_ref3) {
-        var disabled = _ref3.disabled;
-        return !disabled;
-      }).forEach(function (item) {
-        return item.value = false;
-      });
+      if (prop) parent[prop] = value;else parent.value = value;
+
+      if (!prop) {
+        if (value) parent.children.filter(function (_ref2) {
+          var disabled = _ref2.disabled;
+          return !disabled;
+        }).forEach(function (item) {
+          return item.value = true;
+        });else parent.children.filter(function (_ref3) {
+          var disabled = _ref3.disabled;
+          return !disabled;
+        }).forEach(function (item) {
+          return item.value = false;
+        });
+      }
+
       onChange((0, _toConsumableArray2.default)(items));
     },
     changeChild: function changeChild(value, key, parentKey) {
@@ -65,39 +81,60 @@ var TieredCheckboxes = function TieredCheckboxes(_ref) {
       }));
     }
   };
+  (0, _react.useEffect)(function () {
+    return console.log(items);
+  }, [items]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('tiered-checkboxes', className)
+    className: (0, _classnames.default)(RC, className)
   }, items.map(function (parent) {
     var datasetProp = isUseParentsClassesAsDataset ? {
       'data-key': parent === null || parent === void 0 ? void 0 : parent.className
     } : {};
-    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, datasetProp, {
+    return isUseAccordionForGroup ? /*#__PURE__*/_react.default.createElement(_AccordionWithCheckbox.default, {
+      key: parent.key,
+      RC: RC,
+      parent: parent,
+      datasetProp: datasetProp,
+      isUseParentsClassesAsDataset: isUseParentsClassesAsDataset,
+      className: "".concat(RC, "__mono-accordion"),
+      setIsOpen: function setIsOpen() {
+        return handle.changeParent(!parent.isOpen, parent.key, 'isOpen');
+      },
+      onChange: function onChange(value) {
+        return handle.changeParent(value, parent.key);
+      },
+      icon: !parent.isOpen ? (accordionIcons === null || accordionIcons === void 0 ? void 0 : accordionIcons[0]) || null : (accordionIcons === null || accordionIcons === void 0 ? void 0 : accordionIcons[1]) || null // disabled={parent.children?.every?.((child) => child.disabled)}
+
+    }, parent.children && parent.children.map(function (child) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: child.key,
+        className: "".concat(RC, "__children")
+      }, /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+        label: child.label,
+        value: child.value,
+        disabled: child === null || child === void 0 ? void 0 : child.disabled,
+        onChange: function onChange(value) {
+          return handle.changeChild(value, child.key, parent.key);
+        }
+      }));
+    })) : /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, datasetProp, {
       key: parent.key,
-      className: (0, _classnames.default)('tiered-checkboxes__parents', (0, _defineProperty2.default)({}, "".concat(parent.className), !isUseParentsClassesAsDataset))
+      className: (0, _classnames.default)("".concat(RC, "__parents"), (0, _defineProperty2.default)({}, "".concat(parent.className), !isUseParentsClassesAsDataset))
     }), /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
       isStark: handle.isAllChecked(parent),
       label: parent.label,
-      value: parent.children.filter(function (_ref4) {
-        var disabled = _ref4.disabled;
-        return !disabled;
-      }).length && parent.children.filter(function (_ref5) {
-        var disabled = _ref5.disabled;
-        return !disabled;
-      }).every(function (_ref6) {
-        var value = _ref6.value;
-        return value;
-      }),
+      value: parent.value,
       onChange: function onChange(value) {
         return handle.changeParent(value, parent.key);
       },
-      disabled: parent.children.every(function (_ref7) {
-        var disabled = _ref7.disabled;
+      disabled: parent.children.every(function (_ref4) {
+        var disabled = _ref4.disabled;
         return disabled === true;
       })
     }), parent.children && parent.children.map(function (child) {
       return /*#__PURE__*/_react.default.createElement("div", {
         key: child.key,
-        className: "tiered-checkboxes__children"
+        className: "".concat(RC, "__children")
       }, /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
         label: child.label,
         value: child.value,

package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.scss

@@ -7,4 +7,55 @@
     margin-top: 10px;
     margin-left: 10px;
   }
+
+  &__description-checked {
+    padding-left: 21px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 18px;
+    letter-spacing: 0.2px;
+    color: #757F8C;
+
+
+  }
+
+  .mono-accordion,
+  .mono-accordion_is-open {
+    // box-shadow: inset 0px -1px 0px #EBEFF2;
+  }
+
+  .mono-accordion {
+    box-shadow: inset 0px -1px 0px #EBEFF2;
+
+    &_is-open {
+      border-bottom: 1px solid #EBEFF2;
+    }
+
+    &__head {
+      padding: 8px 4px 0 4px;
+    }
+
+    &__icon-container {
+      width: 20px;
+      height: 20px;
+      margin-top: -8px;
+    }
+
+    &__content-wrapper {
+      margin-top: 8px;
+      padding: 0;
+    }
+    .tiered-checkboxes__children {
+      margin: 0 0 14px 20px;
+    }
+
+    .checkbox-input_disabled + .tiered-checkboxes__description-checked {
+      opacity: 0.5;
+    }
+
+    .checkbox-input {
+      width: fit-content;
+    }
+  }
 }

package/dist/Atomic/FormElements/TieredCheckboxes/partial/AccordionWithCheckbox.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _MonoAccordion = _interopRequireDefault(require("../../../UI/MonoAccordion/MonoAccordion"));
+
+var _CheckboxInput = _interopRequireDefault(require("../../CheckboxInput/CheckboxInput"));
+
+require("../TieredCheckboxes.scss");
+
+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 AccordionWithCheckbox = function AccordionWithCheckbox(_ref) {
+  var _parent$children, _parent$children$some, _parent$children2, _parent$children2$eve, _parent$children3, _parent$children4;
+
+  var children = _ref.children,
+      parent = _ref.parent,
+      onChange = _ref.onChange,
+      className = _ref.className,
+      RC = _ref.RC,
+      setIsOpen = _ref.setIsOpen,
+      icon = _ref.icon,
+      disabled = _ref.disabled,
+      datasetProp = _ref.datasetProp,
+      isUseParentsClassesAsDataset = _ref.isUseParentsClassesAsDataset;
+  return /*#__PURE__*/_react.default.createElement(_MonoAccordion.default, {
+    datasetProp: datasetProp,
+    className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(parent.className), !isUseParentsClassesAsDataset)),
+    isOpen: parent.isOpen,
+    onClick: setIsOpen,
+    icon: icon,
+    disabled: disabled // disabled={parent.children?.every?.((child) => child.disabled)}
+    ,
+    titleJSX: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+      className: "".concat(RC, "__checkbox-input"),
+      isStark: (parent === null || parent === void 0 ? void 0 : (_parent$children = parent.children) === null || _parent$children === void 0 ? void 0 : (_parent$children$some = _parent$children.some) === null || _parent$children$some === void 0 ? void 0 : _parent$children$some.call(_parent$children, function (item) {
+        return item.value;
+      })) && !(parent !== null && parent !== void 0 && (_parent$children2 = parent.children) !== null && _parent$children2 !== void 0 && (_parent$children2$eve = _parent$children2.every) !== null && _parent$children2$eve !== void 0 && _parent$children2$eve.call(_parent$children2, function (item) {
+        return item.value;
+      })),
+      label: parent.label,
+      value: parent.value,
+      onChange: onChange,
+      disabled: parent.children.every(function (_ref2) {
+        var disabled = _ref2.disabled;
+        return disabled === true;
+      })
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(RC, "__description-checked")
+    }, parent !== null && parent !== void 0 && (_parent$children3 = parent.children) !== null && _parent$children3 !== void 0 && _parent$children3.length ? "Selected ".concat(parent.children.filter(function (child) {
+      return child.value;
+    }).length, " from ").concat((_parent$children4 = parent.children) === null || _parent$children4 === void 0 ? void 0 : _parent$children4.length) : null))
+  }, children);
+};
+
+var _default = AccordionWithCheckbox;
+exports.default = _default;

package/dist/Atomic/UI/AdvancedTag/AdvTag.js

@@ -38,7 +38,8 @@ var AdvTag = function AdvTag(_ref) {
       merchants = item.merchants,
       warnLeft = item.warnLeft,
       warnLeftMsg = item.warnLeftMsg,
-      warnRightMsg = item.warnRightMsg;
+      warnRightMsg = item.warnRightMsg,
+      noPingTree = item.noPingTree;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),

package/dist/Atomic/UI/AdvancedTag/AdvancedTags.scss

@@ -34,7 +34,7 @@
         min-width: 80px;
         padding: 8px;
         z-index: 2;
-
+        white-space: nowrap;
         &:before {
             content: '';
             position: absolute;

package/dist/Atomic/UI/MonoAccordion/MonoAccordion.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./MonoAccordion.scss");
+
+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 RC = 'mono-accordion';
+
+var MonoAccordion = function MonoAccordion(_ref) {
+  var _cn;
+
+  var titleJSX = _ref.titleJSX,
+      icon = _ref.icon,
+      children = _ref.children,
+      isOpen = _ref.isOpen,
+      onClick = _ref.onClick,
+      className = _ref.className,
+      disabled = _ref.disabled,
+      _ref$datasetProp = _ref.datasetProp,
+      datasetProp = _ref$datasetProp === void 0 ? {} : _ref$datasetProp;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      maxHeight = _useState2[0],
+      setMaxHeight = _useState2[1];
+
+  var headRef = (0, _react.useRef)();
+  var containerRef = (0, _react.useRef)();
+
+  var setHeight = function setHeight(value) {
+    if (value !== undefined) setMaxHeight(function (state) {
+      return "".concat(value, "px");
+    });else setMaxHeight(function (state) {
+      var _Array$from, _Array$from$reduce, _containerRef$current;
+
+      return "".concat((_Array$from = Array.from((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.childNodes)) === null || _Array$from === void 0 ? void 0 : (_Array$from$reduce = _Array$from.reduce) === null || _Array$from$reduce === void 0 ? void 0 : _Array$from$reduce.call(_Array$from, function (acc, el) {
+        return acc + el.offsetHeight;
+      }, 0), "px");
+    });
+  };
+
+  var handleClick = function handleClick(e) {
+    if (e.target !== titleJSX) {
+      onClick();
+      e.stopPropagation();
+    } else return e;
+  };
+
+  (0, _react.useLayoutEffect)(function () {
+    if (!isOpen) setHeight(0);else setHeight();
+  }, [isOpen]);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, datasetProp, {
+    className: (0, _classnames.default)(RC, className, (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(RC, "_is-open"), isOpen), (0, _defineProperty2.default)(_cn, "".concat(RC, "_disabled"), disabled), _cn))
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: headRef,
+    className: "".concat(RC, "__head"),
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(RC, "__tile-container")
+  }, titleJSX), /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(RC, "__icon-container")
+  }, icon)), /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    style: {
+      maxHeight: maxHeight
+    },
+    className: (0, _classnames.default)("".concat(RC, "__container"))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(RC, "__content-wrapper")
+  }, children)));
+};
+
+var _default = MonoAccordion;
+exports.default = _default;

package/dist/Atomic/UI/MonoAccordion/MonoAccordion.scss

@@ -0,0 +1,65 @@
+@import "../../../scss/vars";
+@import "../../../scss/mixins";
+
+.mono-accordion {
+  height: fit-content;
+
+  &__head {
+    height: fit-content;
+    padding: 10px 15px;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $color--gray-gentel;
+    }
+  }
+
+  &__icon-container {
+    width: fit-content;
+    height: 100%;
+
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__tile-container {
+    flex-grow: 1;
+  }
+
+  &__container {
+    background: #fff;
+    transition: all 0.25s ease-out;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    overflow: hidden;
+    font-size: 13px;
+
+    @include custom-scroll;
+  }
+
+  &__content-wrapper{
+    padding: 0 15px;
+  }
+
+  &_open {
+    .mono-accordion__container {
+      transition: all 0.25s ease-out;
+      padding: 10px 15px;
+    }
+    .mono-accordion__content-wrapper {
+      pointer-events: initial;
+    }
+  }
+
+  &_disabled {
+    pointer-events: none;
+  }
+}

package/dist/Functions/Portal.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+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 Portal = function Portal(_ref) {
+  var children = _ref.children,
+      parentSelector = _ref.parentSelector;
+
+  var _useState = (0, _react.useState)(function () {
+    return document.createElement('div');
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+      container = _useState2[0];
+
+  (0, _react.useEffect)(function () {
+    var _parent;
+
+    var parent;
+    if (parentSelector) parent = document.querySelector(parentSelector);else parent = document.body;
+    (_parent = parent) === null || _parent === void 0 ? void 0 : _parent.appendChild(container);
+    return function () {
+      var _parent2;
+
+      (_parent2 = parent) === null || _parent2 === void 0 ? void 0 : _parent2.removeChild(container);
+    };
+  }, []);
+  return /*#__PURE__*/_reactDom.default.createPortal(children, container);
+};
+
+var _default = /*#__PURE__*/_react.default.memo(Portal);
+
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "",
   "main": "dist/index.js",
   "files": [