@orfium/ictinus 4.59.0 → 4.60.0

package/dist/components/DatePicker/DatePickInput/DatePickInput.js

@@ -5,7 +5,7 @@ exports["default"] = void 0;
 
 var _dayjs = _interopRequireDefault(require("dayjs"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _helpers = require("../../../utils/helpers");
 
@@ -19,6 +19,10 @@ var _DatePickInput = require("./DatePickInput.style");
 
 var _react2 = require("@emotion/react");
 
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign || 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); }
@@ -51,9 +55,7 @@ var DatePickInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       _ref$dateFormatOverri = _ref.dateFormatOverride,
       dateFormatOverride = _ref$dateFormatOverri === void 0 ? 'MM/DD/YYYY' : _ref$dateFormatOverri,
       isOpen = _ref.isOpen;
-
-  var getDateFormatted = _react["default"].useCallback(formatDate(dateFormatOverride), [dateFormatOverride]);
-
+  var getDateFormatted = (0, _react.useCallback)(formatDate(dateFormatOverride), [dateFormatOverride]);
   var formattedFrom = getDateFormatted(selectedDay.from);
   var formattedTo = getDateFormatted(selectedDay.to);
   var labels = getLabels(isRangePicker, formattedTo);
@@ -91,7 +93,7 @@ var DatePickInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
         dataTestId: dataTestId,
         onChange: ON_CHANGE_MOCK,
         placeholder: "Date (start) - Date (end)",
-        value: selectedDay.from && formattedFrom + " - " + formattedTo,
+        value: selectedDay.from ? formattedFrom + " - " + formattedTo : '',
         rightIcon: (0, _react2.jsx)(_Icon["default"], {
           name: 'calendarEmpty',
           color: '#676767'
@@ -107,7 +109,7 @@ var DatePickInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       dataTestId: dataTestId,
       onChange: ON_CHANGE_MOCK,
       placeholder: "Select date",
-      value: selectedDay.to && formattedFrom,
+      value: selectedDay.to ? formattedFrom : '',
       rightIcon: (0, _react2.jsx)(_Icon["default"], {
         name: 'calendarEmpty',
         color: '#676767'

package/dist/components/DatePicker/DatePicker.js

@@ -47,11 +47,7 @@ var DatePicker = function DatePicker(_ref) {
       isRangePicker = _ref$isRangePicker === void 0 ? false : _ref$isRangePicker,
       onChange = _ref.onChange,
       disableDates = _ref.disableDates,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? {
-    from: _utils.datepickerPropValue == null ? void 0 : _utils.datepickerPropValue.toDate(),
-    to: _utils.datepickerPropValue == null ? void 0 : _utils.datepickerPropValue.toDate()
-  } : _ref$value,
+      initialValue = _ref.value,
       inputProps = _ref.inputProps,
       _ref$dateFormatOverri = _ref.dateFormatOverride,
       dateFormatOverride = _ref$dateFormatOverri === void 0 ? undefined : _ref$dateFormatOverri,
@@ -61,6 +57,9 @@ var DatePicker = function DatePicker(_ref) {
       _ref$isDefaultNow = _ref.isDefaultNow,
       isDefaultNow = _ref$isDefaultNow === void 0 ? true : _ref$isDefaultNow,
       dataTestId = _ref.dataTestId;
+  var value = (0, _react.useMemo)(function () {
+    return (0, _utils.initDates)(initialValue || {}, isDefaultNow);
+  }, [initialValue]);
 
   var _useState = (0, _react.useState)(false),
       isOpen = _useState[0],
@@ -70,14 +69,22 @@ var DatePicker = function DatePicker(_ref) {
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
 
-  var _useState3 = (0, _react.useState)((0, _utils.initDates)(value, isDefaultNow)),
+  var _useState3 = (0, _react.useState)(function () {
+    return value;
+  }),
       range = _useState3[0],
       setRange = _useState3[1];
 
-  var _useState4 = (0, _react.useState)((0, _utils.initDates)(value, isDefaultNow)),
+  var _useState4 = (0, _react.useState)(function () {
+    return value;
+  }),
       selectedRange = _useState4[0],
       setSelectedRange = _useState4[1];
 
+  (0, _react.useEffect)(function () {
+    setRange(value);
+    setSelectedRange(value);
+  }, [value, isDefaultNow]);
   var handleSelectedOptions = (0, _react.useCallback)(function (option) {
     var foundOption = extraOptions.find(function (optionItem) {
       return optionItem.value === option;

package/dist/components/DatePicker/utils.js

@@ -23,8 +23,8 @@ var initDates = function initDates(value, isDefaultNow) {
     return v;
   });
   return {
-    from: hasDefaultDate ? (0, _dayjs["default"])(value.from) : undefined,
-    to: hasDefaultDate ? (0, _dayjs["default"])(value.to) : undefined
+    from: hasDefaultDate ? (0, _dayjs["default"])(value.from || currentDay) : undefined,
+    to: hasDefaultDate ? (0, _dayjs["default"])(value.to || currentDay) : undefined
   };
 };
 

package/dist/components/Select/Select.js

@@ -114,7 +114,6 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _useMultiselectUtils = (0, _useMultiselectUtils2["default"])({
     selectedOptions: selectedOptions,
     options: options,
-    setOpen: setOpen,
     setSearchValue: setSearchValue,
     isSearchable: isSearchable,
     onClear: onClear,
@@ -140,10 +139,9 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       }));
     } else {
       setInputValue(option);
+      setOpen(false);
     }
 
-    setOpen(false);
-
     if (isSearchable) {
       setSearchValue('');
     }
@@ -165,7 +163,7 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   }, 400), []);
 
   var handleOnInput = _react["default"].useCallback(function (event) {
-    /** 
+    /**
      * For Multiselect: [for now] when we select an option the SelectMenu closes but the user
      * can still type on the input field (so they must be able to see the SelectMenu)
      */

package/dist/components/Select/hooks/useMultiselectUtils.d.ts

@@ -3,14 +3,13 @@ import { SelectOption } from '../Select';
 declare type Props = {
     selectedOptions: SelectOption[];
     options: SelectOption[];
-    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
     setSearchValue: React.Dispatch<React.SetStateAction<string>>;
     isSearchable: boolean;
     onClear?: () => void;
     onOptionDelete?: (option: SelectOption) => void;
     multi?: boolean;
 };
-declare const useMultiselectUtils: ({ selectedOptions, options, setOpen, setSearchValue, isSearchable, onClear, onOptionDelete, multi, }: Props) => {
+declare const useMultiselectUtils: ({ selectedOptions, options, setSearchValue, isSearchable, onClear, onOptionDelete, multi, }: Props) => {
     multiSelectedOptions: SelectOption[];
     setMultiSelectedOpts: React.Dispatch<React.SetStateAction<SelectOption[]>>;
     availableMultiSelectOptions: SelectOption[];

package/dist/components/Select/hooks/useMultiselectUtils.js

@@ -12,7 +12,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var useMultiselectUtils = function useMultiselectUtils(_ref) {
   var selectedOptions = _ref.selectedOptions,
       options = _ref.options,
-      setOpen = _ref.setOpen,
       setSearchValue = _ref.setSearchValue,
       isSearchable = _ref.isSearchable,
       onClear = _ref.onClear,
@@ -67,14 +66,11 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
         setAvailableMultiSelectOptions([].concat(availableMultiSelectOptions, [lastItem]));
       }
     }
-
-    setOpen(false);
   };
 
   var handleClearAllOptions = function handleClearAllOptions() {
     setAvailableMultiSelectOptions([].concat(availableMultiSelectOptions, multiSelectedOptions));
     setMultiSelectedOpts([]);
-    setOpen(false);
 
     if (onClear) {
       onClear();

package/dist/components/utils/PositionInScreen/hooks.js

@@ -3,8 +3,12 @@
 exports.__esModule = true;
 exports.useWrapperWidth = exports.usePositionInScreen = void 0;
 
+var _head = _interopRequireDefault(require("lodash/head"));
+
 var _react = require("react");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var usePositionInScreen = function usePositionInScreen(parentRef, itemRef, offsetX, offsetY, visible) {
   var _useState = (0, _react.useState)({
     x: -1,
@@ -13,6 +17,31 @@ var usePositionInScreen = function usePositionInScreen(parentRef, itemRef, offse
       position = _useState[0],
       setPosition = _useState[1];
 
+  var _useState2 = (0, _react.useState)(0),
+      parentHeight = _useState2[0],
+      setParentHeight = _useState2[1];
+  /**
+   * We use this ResizeObserver in order to track any changes on the parent's height:
+   * This is necessary for the case of the MultiSelect, where the height of the TextField is dynamic
+   * and will increase/decrease as more Chips (Selected Options) are added/deleted.
+   * Therefore the parentHeight is stored on the useState above.
+   */
+
+
+  (0, _react.useEffect)(function () {
+    if (!parentRef.current) return;
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var parent = (0, _head["default"])(entries);
+
+      if (parent) {
+        setParentHeight(parent.contentRect.height);
+      }
+    });
+    resizeObserver.observe(parentRef.current);
+    return function () {
+      return resizeObserver.disconnect();
+    };
+  }, [parentRef]);
   (0, _react.useEffect)(function () {
     var _parentRef$current, _itemRef$current, _itemRef$current$chil;
 
@@ -27,8 +56,9 @@ var usePositionInScreen = function usePositionInScreen(parentRef, itemRef, offse
         parentX = _ref.x,
         parentY = _ref.y,
         parentWidth = _ref.width,
-        parentHeight = _ref.height; // width, height are the element's that's going to be positioned dimensions
+        parentTempHeight = _ref.height;
 
+    setParentHeight(parentTempHeight); // width, height are the element's that's going to be positioned dimensions
 
     var _ref2 = itemRef != null && itemRef.current ? itemRef == null ? void 0 : (_itemRef$current = itemRef.current) == null ? void 0 : (_itemRef$current$chil = _itemRef$current.children[0]) == null ? void 0 : _itemRef$current$chil.getBoundingClientRect() : {
       width: 0,
@@ -74,16 +104,16 @@ var usePositionInScreen = function usePositionInScreen(parentRef, itemRef, offse
       x: x,
       y: y
     });
-  }, [parentRef, itemRef, visible, offsetY, offsetX]);
+  }, [parentRef, itemRef, visible, offsetY, offsetX, parentHeight]);
   return position;
 };
 
 exports.usePositionInScreen = usePositionInScreen;
 
 var useWrapperWidth = function useWrapperWidth(hasWrapperWidth, wrapperRef) {
-  var _useState2 = (0, _react.useState)(),
-      width = _useState2[0],
-      setWidth = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+      width = _useState3[0],
+      setWidth = _useState3[1];
 
   (0, _react.useEffect)(function () {
     if (hasWrapperWidth) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "4.59.0",
+  "version": "4.60.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",