sag_components 1.0.85 → 1.0.86-7.2

package/dist/stories/components/FilterPanel/FilterPanel.style.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipTextContainer = exports.TooltipText = exports.PeriodPickerEmptyText = exports.PeriodPickerEmptyContainer = exports.PeriodPickerContainer = exports.FieldsContainer = exports.FieldContainer = exports.DatePickerContainer = exports.ControlsContainer = exports.ButtonsContainer = exports.AllFieldsContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  width: ", ";\n  height: ", ";\n  padding: 40px 30px 20px;\n  background-color: #fefefe;\n  border-radius: 10px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n"])), props => props.width, props => props.height, props => props.showShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : '');
+const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;  \n  gap: 10px;\n  flex-direction: row-reverse; \n"])));
+const AllFieldsContainer = exports.AllFieldsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n"])));
+const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  white-space: wrap;\n  gap: 20px;\n  width: 100%;\n"])));
+const FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([" \n  margin: 0;\n"])));
+const DatePickerContainer = exports.DatePickerContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
+const PeriodPickerContainer = exports.PeriodPickerContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)([" \n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])));
+const PeriodPickerEmptyContainer = exports.PeriodPickerEmptyContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)([" \n  display: flex;  \n  align-content: center;\n  justify-content: flex-start;\n  align-items: center;  \n  margin-bottom: 10px;\n  border-radius: 10px; \n  border: 1px solid #E7E7E7;\n  width: ", ";\n  height: ", ";     \n  &:hover {\n    cursor: pointer;\n  } \n"])), props => props.width, props => props.height);
+const PeriodPickerEmptyText = exports.PeriodPickerEmptyText = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 20px;\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  color: #8B8989;\n  user-select: none;    \n"])));
+const TooltipTextContainer = exports.TooltipTextContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)([" \n  margin: 5px;\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  user-select: none;\n  &:hover {\n    cursor: pointer;\n  }\n"])));
+const TooltipText = exports.TooltipText = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)([" \n  margin: 0; \n"])));

package/dist/stories/components/FilterPanel.js

@@ -0,0 +1,568 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _moment = _interopRequireDefault(require("moment"));
+var _DropdownNew = require("./DropdownNew");
+var _Button = _interopRequireDefault(require("./Button"));
+var _RangePicker = _interopRequireDefault(require("./RangePicker"));
+var _QuarterPicker = _interopRequireDefault(require("./QuarterPicker"));
+var _MonthPicker = _interopRequireDefault(require("./MonthPicker"));
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+var _FilterPanel = require("./FilterPanel.style");
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+const FilterPanel = props => {
+  const {
+    availableQuarters,
+    availableMonths,
+    availableYears,
+    fieldsData,
+    borderColor,
+    okButtonBackgroundColor,
+    okButtonHoverColor,
+    resetButtonHoverColor,
+    onOkClick,
+    onResetClick,
+    onItemValueChanged,
+    width,
+    height,
+    disableOKButton,
+    className,
+    useExternalFilterState,
+    showShadow
+  } = props;
+  const [FieldsDataState, setFieldsDataState] = (0, _react.useState)(fieldsData);
+  const [Reset, setReset] = (0, _react.useState)(false);
+  const [FieldsContainerWidth, setFieldsContainerWidth] = (0, _react.useState)(0);
+  const AllFieldsContainerRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    const {
+      offsetWidth
+    } = AllFieldsContainerRef.current;
+    setFieldsContainerWidth(offsetWidth - 2);
+  }, [width]);
+  (0, _react.useEffect)(() => {
+    if (useExternalFilterState) {
+      setFieldsDataState(fieldsData);
+    } else {
+      const newFieldsDataState = FieldsDataState.map(itemFieldsDataState => {
+        const foundItem = fieldsData.find(itemfieldsData => itemFieldsDataState.name === itemfieldsData.name);
+        return {
+          ...itemFieldsDataState,
+          ...(itemFieldsDataState.dropdownOptions ? {
+            dropdownOptions: foundItem !== null && foundItem !== void 0 && foundItem.dropdownOptions ? foundItem === null || foundItem === void 0 ? void 0 : foundItem.dropdownOptions : undefined
+          } : ''),
+          ...{
+            disabled: (foundItem === null || foundItem === void 0 ? void 0 : foundItem.disabled) || false
+          }
+        };
+      });
+      setFieldsDataState(newFieldsDataState);
+    }
+  }, [fieldsData]);
+  const onChangeDropdownMultiHandler = (eventDropdownMulti, item) => {
+    var _eventDropdownMulti$n;
+    const newSelectedValue = (eventDropdownMulti === null || eventDropdownMulti === void 0 ? void 0 : (_eventDropdownMulti$n = eventDropdownMulti.newValue) === null || _eventDropdownMulti$n === void 0 ? void 0 : _eventDropdownMulti$n.length) > 0 ? eventDropdownMulti === null || eventDropdownMulti === void 0 ? void 0 : eventDropdownMulti.newValue : [];
+    const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+      ...itemField,
+      selectedValue: newSelectedValue
+    } : itemField);
+    setFieldsDataState(newFieldsDataState);
+    onItemValueChanged({
+      fieldsData: newFieldsDataState,
+      changedItem: {
+        name: item.name,
+        inputType: item.inputType,
+        selectedValue: newSelectedValue
+      }
+    });
+  };
+  const onChangeDropdownSingleHandler = (eventDropdownSingle, item) => {
+    var _eventDropdownSingle$;
+    const newSelectedValue = (eventDropdownSingle === null || eventDropdownSingle === void 0 ? void 0 : (_eventDropdownSingle$ = eventDropdownSingle.newValue) === null || _eventDropdownSingle$ === void 0 ? void 0 : _eventDropdownSingle$.length) > 0 ? eventDropdownSingle === null || eventDropdownSingle === void 0 ? void 0 : eventDropdownSingle.newValue : [];
+    const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+      ...itemField,
+      selectedValue: newSelectedValue
+    } : itemField);
+    setFieldsDataState(newFieldsDataState);
+    onItemValueChanged({
+      fieldsData: newFieldsDataState,
+      changedItem: {
+        name: item.name,
+        inputType: item.inputType,
+        selectedValue: (newSelectedValue === null || newSelectedValue === void 0 ? void 0 : newSelectedValue.length) > 0 ? newSelectedValue[0].value : undefined
+      }
+    });
+  };
+  const getSelectedValueYear = item => {
+    var _item$defaultValueYea;
+    let selectedValueYear = [];
+    // console.log('selectedValueYear item:', item);
+    // if (availableYears && availableYears?.length > 0) {
+    //   selectedValueYear = [{ value: availableYears[0], label: availableYears[0] }];
+    // } else
+    if (item !== null && item !== void 0 && (_item$defaultValueYea = item.defaultValueYears) !== null && _item$defaultValueYea !== void 0 && _item$defaultValueYea.value) {
+      selectedValueYear = [item === null || item === void 0 ? void 0 : item.defaultValueYears];
+    }
+    // console.log('selectedValueYear selectedValueYear:', selectedValueYear);
+    return selectedValueYear;
+  };
+  const onChangeDropdownPeriodPickerHandler = (eventDropdownPeriodPicker, item) => {
+    var _newPeriodPickerSelec6, _newPeriodPickerSelec7, _newPeriodPickerSelec8, _newPeriodPickerSelec9, _newPeriodPickerSelec10, _getSelectedValueYear, _getSelectedValueYear2;
+    const newPeriodPickerSelectedValue = (eventDropdownPeriodPicker === null || eventDropdownPeriodPicker === void 0 ? void 0 : eventDropdownPeriodPicker.newValue) || [];
+    const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => {
+      var _newPeriodPickerSelec, _newPeriodPickerSelec2, _newPeriodPickerSelec3, _newPeriodPickerSelec4, _newPeriodPickerSelec5;
+      return itemField.name === item.name ? {
+        ...itemField,
+        periodPickerSelectedValue: newPeriodPickerSelectedValue,
+        ...(((_newPeriodPickerSelec = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec === void 0 ? void 0 : _newPeriodPickerSelec.value) === 'year' ? {
+          inputSubType: 'year'
+        } : ''),
+        ...(((_newPeriodPickerSelec2 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec2 === void 0 ? void 0 : _newPeriodPickerSelec2.value) === 'month' ? {
+          inputSubType: 'month'
+        } : ''),
+        ...(((_newPeriodPickerSelec3 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec3 === void 0 ? void 0 : _newPeriodPickerSelec3.value) === 'quarter' ? {
+          inputSubType: 'quarter'
+        } : ''),
+        ...(((_newPeriodPickerSelec4 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec4 === void 0 ? void 0 : _newPeriodPickerSelec4.value) === 'daterange' ? {
+          inputSubType: 'daterange'
+        } : ''),
+        selectedValue: ((_newPeriodPickerSelec5 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec5 === void 0 ? void 0 : _newPeriodPickerSelec5.value) === 'year' ? getSelectedValueYear(item) : []
+      } : itemField;
+    });
+    setFieldsDataState(newFieldsDataState);
+    onItemValueChanged({
+      fieldsData: newFieldsDataState,
+      changedItem: {
+        name: item.name,
+        inputType: item.inputType,
+        ...(((_newPeriodPickerSelec6 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec6 === void 0 ? void 0 : _newPeriodPickerSelec6.value) === 'year' ? {
+          inputSubType: 'year'
+        } : ''),
+        ...(((_newPeriodPickerSelec7 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec7 === void 0 ? void 0 : _newPeriodPickerSelec7.value) === 'month' ? {
+          inputSubType: 'month'
+        } : ''),
+        ...(((_newPeriodPickerSelec8 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec8 === void 0 ? void 0 : _newPeriodPickerSelec8.value) === 'quarter' ? {
+          inputSubType: 'quarter'
+        } : ''),
+        ...(((_newPeriodPickerSelec9 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec9 === void 0 ? void 0 : _newPeriodPickerSelec9.value) === 'daterange' ? {
+          inputSubType: 'daterange'
+        } : ''),
+        selectedValue: ((_newPeriodPickerSelec10 = newPeriodPickerSelectedValue[0]) === null || _newPeriodPickerSelec10 === void 0 ? void 0 : _newPeriodPickerSelec10.value) === 'year' && ((_getSelectedValueYear = getSelectedValueYear(item)) === null || _getSelectedValueYear === void 0 ? void 0 : _getSelectedValueYear.length) > 0 ? (_getSelectedValueYear2 = getSelectedValueYear(item)[0]) === null || _getSelectedValueYear2 === void 0 ? void 0 : _getSelectedValueYear2.value : undefined
+      }
+    });
+  };
+  const onClickResetHandler = () => {
+    const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
+      ...itemField,
+      selectedValue: [],
+      ...(itemField.periodPickerSelectedValue ? {
+        periodPickerSelectedValue: []
+      } : ''),
+      ...(itemField.inputSubType ? {
+        inputSubType: undefined
+      } : '')
+    }));
+    setFieldsDataState(newFieldsDataState);
+    setReset(!Reset);
+    onResetClick({
+      eventName: 'onResetClick',
+      fieldsData: newFieldsDataState
+    });
+  };
+  const getTooltipText = () => /*#__PURE__*/_react.default.createElement(_FilterPanel.TooltipTextContainer, null, /*#__PURE__*/_react.default.createElement(_FilterPanel.TooltipText, null, "Dates can be selected"), /*#__PURE__*/_react.default.createElement(_FilterPanel.TooltipText, null, "only after selecting"), /*#__PURE__*/_react.default.createElement(_FilterPanel.TooltipText, null, "period types"));
+  const getYearsArray = () => {
+    const currentYear = (0, _moment.default)().year();
+    const previousYear = (0, _moment.default)().subtract(1, 'years').year();
+    const yearsArray = [{
+      value: "".concat(previousYear),
+      label: "".concat(previousYear)
+    }, {
+      value: "".concat(currentYear),
+      label: "".concat(currentYear)
+    }];
+    return yearsArray;
+  };
+  const onChangeDropdownYearHandler = (eventDropdownYear, item) => {
+    const newSelectedValue = (eventDropdownYear === null || eventDropdownYear === void 0 ? void 0 : eventDropdownYear.newValue) || [];
+    const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+      ...itemField,
+      inputSubType: (newSelectedValue === null || newSelectedValue === void 0 ? void 0 : newSelectedValue.length) > 0 ? 'year' : undefined,
+      selectedValue: newSelectedValue
+    } : itemField);
+    setFieldsDataState(newFieldsDataState);
+    onItemValueChanged({
+      fieldsData: newFieldsDataState,
+      changedItem: {
+        name: item.name,
+        inputType: item.inputType,
+        inputSubType: (newSelectedValue === null || newSelectedValue === void 0 ? void 0 : newSelectedValue.length) > 0 ? 'year' : undefined,
+        selectedValue: (newSelectedValue === null || newSelectedValue === void 0 ? void 0 : newSelectedValue.length) > 0 ? newSelectedValue[0].value : undefined
+      }
+    });
+  };
+  const displayPeriodPickerContent = item => {
+    var _item$periodPickerSel, _item$periodPickerSel2;
+    let content;
+    const currentValue = item.periodPickerSelectedValue && ((_item$periodPickerSel = item.periodPickerSelectedValue) === null || _item$periodPickerSel === void 0 ? void 0 : _item$periodPickerSel.length) > 0 ? (_item$periodPickerSel2 = item.periodPickerSelectedValue[0]) === null || _item$periodPickerSel2 === void 0 ? void 0 : _item$periodPickerSel2.value : '';
+    let selectedValueYear = [];
+    if (typeof item.selectedValue === 'string') {
+      selectedValueYear = [{
+        value: item.selectedValue,
+        label: item.selectedValue
+      }];
+    } else {
+      selectedValueYear = item.selectedValue;
+    }
+    switch (currentValue) {
+      case 'daterange':
+        content = /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
+          className: "DatePickerContainer"
+        }, /*#__PURE__*/_react.default.createElement(_RangePicker.default, {
+          className: "RangePicker",
+          name: ''.concat(item.name, '_Date'),
+          borderColor: "#E7E7E7",
+          borderColorFocus: borderColor,
+          textColor: "#212121",
+          borderRadius: "12px",
+          label: "Date Range",
+          onChange: eventRangePicker => {
+            const selectedValue = eventRangePicker && typeof eventRangePicker === 'string' ? "".concat(eventRangePicker) : undefined;
+            const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+              ...itemField,
+              inputSubType: 'daterange',
+              // selectedValue ? 'daterange' : undefined,
+              selectedValue: selectedValue ? "".concat(selectedValue) : undefined
+            } : itemField);
+            setFieldsDataState(newFieldsDataState);
+            onItemValueChanged({
+              fieldsData: newFieldsDataState,
+              changedItem: {
+                name: item.name,
+                inputType: item.inputType,
+                inputSubType: 'daterange',
+                selectedValue: selectedValue ? "".concat(selectedValue) : undefined
+              }
+            });
+          },
+          required: item.required,
+          placeholder: "Select Date Range ...",
+          selectedValue: item.selectedValue || '',
+          width: "100%",
+          height: "55px"
+        }));
+        break;
+      case 'month':
+        content = /*#__PURE__*/_react.default.createElement(_MonthPicker.default, {
+          availableMonths: availableMonths,
+          name: ''.concat(item.name, '_Month'),
+          borderColor: "#E7E7E7",
+          borderColorFocus: borderColor,
+          textColor: "#212121",
+          borderRadius: "12px",
+          label: "Month",
+          required: item.required,
+          onChange: eventMonthPicker => {
+            const selectedValue = eventMonthPicker && typeof eventMonthPicker === 'string' ? "".concat(eventMonthPicker) : undefined;
+            const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+              ...itemField,
+              inputSubType: 'month',
+              // inputSubType: selectedValue ? 'month' : undefined,
+              selectedValue: selectedValue ? "".concat(selectedValue) : undefined
+            } : itemField);
+            setFieldsDataState(newFieldsDataState);
+            onItemValueChanged({
+              fieldsData: newFieldsDataState,
+              changedItem: {
+                name: item.name,
+                inputType: item.inputType,
+                inputSubType: 'month',
+                selectedValue: selectedValue ? "".concat(selectedValue) : undefined
+              }
+            });
+          },
+          placeholder: "Select Month ...",
+          selectedValue: item.selectedValue || '',
+          width: "100%",
+          height: "55px"
+        });
+        break;
+      case 'quarter':
+        content = /*#__PURE__*/_react.default.createElement(_QuarterPicker.default, {
+          availableQuarters: availableQuarters,
+          className: "QuarterPicker",
+          name: ''.concat(item.name, '_Quarter'),
+          borderColor: "#E7E7E7",
+          borderColorFocus: borderColor,
+          textColor: "#212121",
+          borderRadius: "12px",
+          label: "Quarter",
+          required: item.required,
+          onChange: eventQuarterPicker => {
+            const selectedValue = eventQuarterPicker && typeof eventQuarterPicker === 'string' ? "".concat(eventQuarterPicker) : undefined;
+            const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+              ...itemField,
+              inputSubType: 'quarter',
+              // inputSubType: selectedValue ? 'quarter' : undefined,
+              selectedValue: selectedValue ? "".concat(selectedValue) : undefined
+            } : itemField);
+            setFieldsDataState(newFieldsDataState);
+            onItemValueChanged({
+              fieldsData: newFieldsDataState,
+              changedItem: {
+                name: item.name,
+                inputType: item.inputType,
+                inputSubType: 'quarter',
+                selectedValue: selectedValue ? "".concat(selectedValue) : undefined
+              }
+            });
+          },
+          placeholder: "Select Quarter ...",
+          selectedValue: item.selectedValue || '',
+          width: "100%",
+          height: "55px"
+        });
+        break;
+      case 'year':
+        content = /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
+          className: "Dropdown_Year",
+          name: ''.concat(item.name, '_Year'),
+          key: item.reset,
+          isMulti: false,
+          placeHolder: "Select Year ...",
+          label: "Year",
+          labelEmptyValue: "Year",
+          labelColor: borderColor,
+          checkBoxColor: okButtonBackgroundColor,
+          required: item.required,
+          disabled: item.disabled,
+          xIconShow: false,
+          error: false,
+          errorMessage: "",
+          selectedValue: selectedValueYear,
+          onChange: eventDropdownYear => onChangeDropdownYearHandler(eventDropdownYear, item),
+          options: availableYears && (availableYears === null || availableYears === void 0 ? void 0 : availableYears.length) > 0 ? availableYears.map(itemYear => ({
+            value: itemYear,
+            label: itemYear
+          })) : getYearsArray(),
+          width: "100%"
+        });
+        break;
+      default:
+        content = /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+          className: "Tooltip",
+          content: getTooltipText(),
+          direction: "top",
+          width: "100%",
+          height: "50px"
+        }, /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerEmptyContainer, {
+          className: "PeriodPickerEmptyContainer",
+          width: FieldsContainerWidth ? "".concat(FieldsContainerWidth === null || FieldsContainerWidth === void 0 ? void 0 : FieldsContainerWidth.toString(), "px") : undefined,
+          height: "50px"
+        }, /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerEmptyText, {
+          className: "PeriodPickerEmptyText"
+        }, "Select Dates")));
+    }
+    return content;
+  };
+  const displayField = item => {
+    let content;
+    switch (item.inputType) {
+      case 'dropdown':
+        content = /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
+          className: "Dropdown_Single",
+          name: item.name,
+          key: item.reset,
+          isMulti: false,
+          placeHolder: item.placeHolder,
+          label: item.label,
+          labelEmptyValue: item.labelEmptyValue,
+          labelColor: borderColor,
+          checkBoxColor: okButtonBackgroundColor,
+          required: item.required,
+          disabled: item.disabled,
+          xIconShow: item.xIconShow,
+          error: false,
+          errorMessage: "",
+          selectedValue: useExternalFilterState ? item.selectedValue : item.selectedValue || item.defaultValue || [],
+          onChange: eventDropdown => onChangeDropdownSingleHandler(eventDropdown, item),
+          options: item.dropdownOptions || [],
+          width: "100%"
+        });
+        break;
+      case 'dropdownMulti':
+        content = /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
+          className: "Dropdown_Multi",
+          name: item.name,
+          key: item.reset,
+          isMulti: true,
+          placeHolder: item.placeHolder,
+          label: item.label,
+          labelEmptyValue: item.labelEmptyValue,
+          labelColor: borderColor,
+          checkBoxColor: okButtonBackgroundColor,
+          required: item.required,
+          disabled: item.disabled,
+          xIconShow: item.xIconShow,
+          error: false,
+          errorMessage: "",
+          selectedValue: useExternalFilterState ? item.selectedValue : item.selectedValue || item.defaultValue || [],
+          onChange: eventDropdownMulti => onChangeDropdownMultiHandler(eventDropdownMulti, item),
+          options: item.dropdownOptions || [],
+          width: "100%"
+        });
+        break;
+      case 'datepicker':
+        content = /*#__PURE__*/_react.default.createElement(_FilterPanel.DatePickerContainer, {
+          className: "DatePickerContainer"
+        }, /*#__PURE__*/_react.default.createElement(_RangePicker.default, {
+          className: "RangePicker",
+          borderColor: borderColor,
+          borderRadius: "12px",
+          label: !item.selectedValue ? item.labelEmptyValue || item.label : item.label,
+          selectedValue: useExternalFilterState ? item.selectedValue : item.selectedValue || item.defaultValue || [],
+          onChange: eventDatePicker => {
+            const selectedValue = eventDatePicker && typeof eventDatePicker === 'string' ? "".concat(eventDatePicker) : undefined;
+            const newFieldsDataState = FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => itemField.name === item.name ? {
+              ...itemField,
+              selectedValue: selectedValue ? "".concat(selectedValue) : undefined,
+              inputType: item.inputType,
+              inputSubType: item.inputSubType
+            } : itemField);
+            setFieldsDataState(newFieldsDataState);
+            onItemValueChanged({
+              fieldsData: newFieldsDataState,
+              changedItem: {
+                name: item.name,
+                inputType: item.inputType,
+                inputSubType: item.inputSubType,
+                selectedValue: selectedValue ? "".concat(selectedValue) : undefined
+              }
+            });
+          },
+          required: item.required,
+          placeholder: item.placeHolder,
+          width: "100%",
+          height: "55px"
+        }));
+        break;
+      case 'periodpicker':
+        content = /*#__PURE__*/_react.default.createElement(_FilterPanel.PeriodPickerContainer, {
+          className: "PeriodPickerContainer"
+        }, /*#__PURE__*/_react.default.createElement(_DropdownNew.DropdownNew, {
+          className: "Dropdown_PeriodPicker",
+          name: item.name,
+          key: item.reset,
+          isMulti: false,
+          placeHolder: item.placeHolder,
+          label: item.label,
+          labelEmptyValue: item.labelEmptyValue,
+          labelColor: borderColor,
+          checkBoxColor: okButtonBackgroundColor,
+          required: item.required,
+          disabled: item.disabled,
+          xIconShow: false,
+          error: false,
+          errorMessage: "",
+          selectedValue: item.periodPickerSelectedValue || [],
+          onChange: eventDropdownPeriodPicker => onChangeDropdownPeriodPickerHandler(eventDropdownPeriodPicker, item),
+          options: item.dropdownOptions || [],
+          width: "100%"
+        }), displayPeriodPickerContent(item));
+        break;
+      default:
+        content = '';
+        break;
+    }
+    return content;
+  };
+  const displayFields = data => {
+    if (!data || data.length === 0) {
+      return '';
+    }
+    return /*#__PURE__*/_react.default.createElement(_FilterPanel.FieldsContainer, {
+      className: "FieldsContainer"
+    }, data === null || data === void 0 ? void 0 : data.map(item => /*#__PURE__*/_react.default.createElement(_FilterPanel.FieldContainer, {
+      className: "FieldContainer"
+    }, displayField(item))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_FilterPanel.ControlsContainer, {
+    className: className,
+    height: height,
+    width: width,
+    showShadow: showShadow
+  }, /*#__PURE__*/_react.default.createElement(_FilterPanel.AllFieldsContainer, {
+    className: "AllFieldsContainer",
+    ref: AllFieldsContainerRef
+  }, displayFields(FieldsDataState)), /*#__PURE__*/_react.default.createElement(_FilterPanel.ButtonsContainer, {
+    className: "ButtonsContainer"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Go",
+    type: "primary",
+    size: "medium",
+    width: "74px",
+    textColor: "#ffffff",
+    backgroundColor: okButtonBackgroundColor,
+    borderColor: okButtonBackgroundColor,
+    hoverTextColor: "#ffffff",
+    hoverBackgroundColor: okButtonHoverColor,
+    hoverBorderColor: okButtonHoverColor,
+    disabledTextColor: "#B1B1B1",
+    disabledBackgroundColor: "#E3E4E5",
+    disabledBorderColor: "#E3E4E5",
+    disabled: disableOKButton,
+    onClick: () => onOkClick({
+      eventName: 'onOkClick',
+      fieldsData: FieldsDataState,
+      selectedValues: FieldsDataState === null || FieldsDataState === void 0 ? void 0 : FieldsDataState.map(itemField => ({
+        name: itemField.name,
+        selectedValue: itemField.selectedValue,
+        ...(itemField.inputSubType ? {
+          inputSubType: itemField.inputSubType
+        } : '')
+      }))
+    })
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Reset",
+    size: "medium",
+    type: "secondary",
+    width: "74px",
+    textColor: "#212121",
+    backgroundColor: "#ffffff",
+    borderColor: "#B1B1B1",
+    hoverTextColor: okButtonBackgroundColor,
+    hoverBackgroundColor: resetButtonHoverColor,
+    hoverBorderColor: okButtonBackgroundColor,
+    disabledTextColor: "#B1B1B1",
+    disabledBackgroundColor: "#ffffff",
+    disabledBorderColor: "#E3E4E5",
+    disabled: false,
+    onClick: e => onClickResetHandler(e)
+  })));
+};
+var _default = exports.default = FilterPanel;
+FilterPanel.defaultProps = {
+  availableQuarters: ['Q1-2024'],
+  availableMonths: ['Jan 2024', 'Feb 2024', 'Mar 2024'],
+  availableYears: ['2024', '2023'],
+  fieldsData: [],
+  width: '800px',
+  height: '600px',
+  okButtonBackgroundColor: '#229E38',
+  okButtonHoverColor: '#92CF17',
+  resetButtonHoverColor: '#E8F5EB',
+  borderColor: '#757575',
+  onOkClick: () => {},
+  onResetClick: () => {},
+  onItemValueChanged: () => {},
+  disableOKButton: false,
+  className: '',
+  useExternalFilterState: false,
+  showShadow: true
+};

package/dist/stories/components/FilterPanel.style.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipTextContainer = exports.TooltipText = exports.PeriodPickerEmptyText = exports.PeriodPickerEmptyContainer = exports.PeriodPickerContainer = exports.FieldsContainer = exports.FieldContainer = exports.DatePickerContainer = exports.ControlsContainer = exports.ButtonsContainer = exports.AllFieldsContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  width: ", ";\n  height: ", ";\n  padding: 40px 30px 20px;\n  background-color: #fefefe;\n  border-radius: 10px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n"])), props => props.width, props => props.height, props => props.showShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : '');
+const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;  \n  gap: 10px;\n  flex-direction: row-reverse; \n"])));
+const AllFieldsContainer = exports.AllFieldsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n"])));
+const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  white-space: wrap;\n  gap: 20px;\n  width: 100%;\n"])));
+const FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([" \n  margin: 0;\n"])));
+const DatePickerContainer = exports.DatePickerContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
+const PeriodPickerContainer = exports.PeriodPickerContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)([" \n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])));
+const PeriodPickerEmptyContainer = exports.PeriodPickerEmptyContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)([" \n  display: flex;  \n  align-content: center;\n  justify-content: flex-start;\n  align-items: center;  \n  margin-bottom: 10px;\n  border-radius: 10px; \n  border: 1px solid #E7E7E7;\n  width: ", ";\n  height: ", ";     \n  &:hover {\n    cursor: pointer;\n  } \n"])), props => props.width, props => props.height);
+const PeriodPickerEmptyText = exports.PeriodPickerEmptyText = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 20px;\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  color: #8B8989;\n  user-select: none;    \n"])));
+const TooltipTextContainer = exports.TooltipTextContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)([" \n  margin: 5px;\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  user-select: none;\n  &:hover {\n    cursor: pointer;\n  }\n"])));
+const TooltipText = exports.TooltipText = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)([" \n  margin: 0; \n"])));

package/dist/stories/components/FormInput/FormInput.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormInput = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactHookForm = require("react-hook-form");
+var _Input = _interopRequireDefault(require("../Input/Input"));
+var _PopupFieldsRules = require("../PopupContent/PopupFieldsRules");
+const FormInput = _ref => {
+  let {
+    control,
+    name,
+    ...props
+  } = _ref;
+  const {
+    field,
+    fieldState: {
+      invalid,
+      isTouched,
+      isDirty
+    },
+    formState: {
+      touchedFields,
+      dirtyFields
+    }
+  } = (0, _reactHookForm.useController)({
+    name,
+    control,
+    rules: (0, _PopupFieldsRules.getPopupFieldsRules)(name)
+  });
+  return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, props, {
+    onChange: field.onChange,
+    value: field.value,
+    name: field.name,
+    inputRef: field.ref
+  }));
+};
+exports.FormInput = FormInput;