@orfium/ictinus 4.59.0 → 4.61.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

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _lodash = require("lodash");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -37,12 +37,12 @@ var _react2 = require("@emotion/react");
 
 var _excluded = ["handleSelectedOption", "defaultValue", "selectedOption", "multi", "options", "isAsync", "isLoading", "asyncSearch", "status", "minCharactersToSearch", "highlightSearch", "isSearchable", "isVirtualized", "styleType", "disabled", "locked", "dataTestId", "onClear", "onOptionDelete", "selectedOptions"];
 
-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 _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); }
 
 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; }
@@ -122,11 +122,10 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     multi: multi
   }),
       multiSelectedOptions = _useMultiselectUtils.multiSelectedOptions,
-      setMultiSelectedOpts = _useMultiselectUtils.setMultiSelectedOpts,
       availableMultiSelectOptions = _useMultiselectUtils.availableMultiSelectOptions,
-      setAvailableMultiSelectOptions = _useMultiselectUtils.setAvailableMultiSelectOptions,
       handleOptionDelete = _useMultiselectUtils.handleOptionDelete,
-      handleClearAllOptions = _useMultiselectUtils.handleClearAllOptions;
+      handleClearAllOptions = _useMultiselectUtils.handleClearAllOptions,
+      handleMultiSelectOptionClick = _useMultiselectUtils.handleMultiSelectOptionClick;
 
   (0, _react.useEffect)(function () {
     setInputValue(initialValue);
@@ -134,16 +133,12 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
 
   var handleOptionClick = function handleOptionClick(option) {
     if (multi) {
-      setMultiSelectedOpts([].concat(multiSelectedOptions, [option]));
-      setAvailableMultiSelectOptions(availableMultiSelectOptions.filter(function (opt) {
-        return opt.value !== option.value;
-      }));
+      handleMultiSelectOptionClick(option);
     } else {
       setInputValue(option);
+      setOpen(false);
     }
 
-    setOpen(false);
-
     if (isSearchable) {
       setSearchValue('');
     }
@@ -160,12 +155,12 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     }
   };
 
-  var debouncedOnChange = _react["default"].useCallback((0, _lodash.debounce)(function (term) {
+  var debouncedOnChange = _react["default"].useCallback((0, _debounce["default"])(function (term) {
     asyncSearch(term);
   }, 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)
      */
@@ -309,7 +304,8 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     status: status,
     isLoading: isLoading,
     isVirtualized: isVirtualized,
-    searchTerm: highlightSearch ? searchValue : undefined
+    searchTerm: highlightSearch ? searchValue : undefined,
+    hasSelectAllOption: multi
   }))));
 });
 

package/dist/components/Select/components/SelectMenu/SelectMenu.d.ts

@@ -11,6 +11,7 @@ export declare type Props = {
     isLoading?: boolean;
     isVirtualized?: boolean;
     searchTerm?: string;
+    hasSelectAllOption?: boolean;
 };
 declare const SelectMenu: React.FC<Props>;
 export default SelectMenu;

package/dist/components/Select/components/SelectMenu/SelectMenu.js

@@ -11,6 +11,8 @@ var _List = _interopRequireDefault(require("../../../List"));
 
 var _utils = require("../../../List/utils");
 
+var _constants = require("../../constants");
+
 var _react2 = require("@emotion/react");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -20,16 +22,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 SelectMenu = function SelectMenu(props) {
-  var _props$size = props.size,
-      size = _props$size === void 0 ? 'sm' : _props$size,
-      _props$status = props.status,
-      status = _props$status === void 0 ? 'normal' : _props$status,
-      filteredOptions = props.filteredOptions,
+  var filteredOptions = props.filteredOptions,
       handleOptionClick = props.handleOptionClick,
       selectedOption = props.selectedOption,
       isLoading = props.isLoading,
       isVirtualized = props.isVirtualized,
-      searchTerm = props.searchTerm;
+      searchTerm = props.searchTerm,
+      _props$hasSelectAllOp = props.hasSelectAllOption,
+      hasSelectAllOption = _props$hasSelectAllOp === void 0 ? false : _props$hasSelectAllOp;
   var myRef = (0, _react.useRef)(null);
 
   var executeScroll = function executeScroll() {
@@ -53,7 +53,8 @@ var SelectMenu = function SelectMenu(props) {
       ref: myRef,
       handleOptionClick: handleOptionClick,
       searchTerm: searchTerm,
-      selectedItem: selectedOption
+      selectedItem: selectedOption,
+      defaultOption: hasSelectAllOption ? _constants.SELECT_ALL_OPTION : undefined
     }) : (0, _react2.jsx)("div", {
       css: (0, _SelectMenu.optionStyle)({
         selected: false,

package/dist/components/Select/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SELECT_ALL_OPTION: {
+    readonly value: "select_all";
+    readonly label: "Select All";
+};

package/dist/components/Select/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.SELECT_ALL_OPTION = void 0;
+var SELECT_ALL_OPTION = {
+  value: 'select_all',
+  label: 'Select All'
+};
+exports.SELECT_ALL_OPTION = SELECT_ALL_OPTION;

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

@@ -12,10 +12,9 @@ declare type Props = {
 };
 declare const useMultiselectUtils: ({ selectedOptions, options, setOpen, setSearchValue, isSearchable, onClear, onOptionDelete, multi, }: Props) => {
     multiSelectedOptions: SelectOption[];
-    setMultiSelectedOpts: React.Dispatch<React.SetStateAction<SelectOption[]>>;
     availableMultiSelectOptions: SelectOption[];
-    setAvailableMultiSelectOptions: React.Dispatch<React.SetStateAction<SelectOption[]>>;
     handleOptionDelete: (option?: SelectOption | undefined) => void;
     handleClearAllOptions: () => void;
+    handleMultiSelectOptionClick: (option: SelectOption) => void;
 };
 export default useMultiselectUtils;

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

@@ -3,12 +3,18 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
 var _react = _interopRequireWildcard(require("react"));
 
+var _constants = require("../constants");
+
 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 }; }
+
 var useMultiselectUtils = function useMultiselectUtils(_ref) {
   var selectedOptions = _ref.selectedOptions,
       options = _ref.options,
@@ -67,14 +73,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();
@@ -85,13 +88,33 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
     }
   };
 
+  var handleMultiSelectOptionClick = function handleMultiSelectOptionClick(option) {
+    /** The user clicks the Select All option */
+    if ((0, _isEqual["default"])(option, _constants.SELECT_ALL_OPTION)) {
+      var _availableMultiSelect = availableMultiSelectOptions.reduce(function (result, element) {
+        result[element.isDisabled ? 0 : 1].push(element);
+        return result;
+      }, [[], []]),
+          remaining = _availableMultiSelect[0],
+          selected = _availableMultiSelect[1];
+
+      setMultiSelectedOpts([].concat(multiSelectedOptions, selected));
+      setAvailableMultiSelectOptions(remaining);
+      setOpen(false);
+    } else {
+      setMultiSelectedOpts([].concat(multiSelectedOptions, [option]));
+      setAvailableMultiSelectOptions(availableMultiSelectOptions.filter(function (opt) {
+        return opt.value !== option.value;
+      }));
+    }
+  };
+
   return {
     multiSelectedOptions: multiSelectedOptions,
-    setMultiSelectedOpts: setMultiSelectedOpts,
     availableMultiSelectOptions: availableMultiSelectOptions,
-    setAvailableMultiSelectOptions: setAvailableMultiSelectOptions,
     handleOptionDelete: handleOptionDelete,
-    handleClearAllOptions: handleClearAllOptions
+    handleClearAllOptions: handleClearAllOptions,
+    handleMultiSelectOptionClick: handleMultiSelectOptionClick
   };
 };
 

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.61.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",