@hitachivantara/uikit-react-core 4.0.3 → 4.0.4

package/dist/BaseDropdown/BaseDropdown.js

@@ -1,157 +1,108 @@
 "use strict";
 
 require("core-js/modules/es.object.keys.js");
-
 require("core-js/modules/es.symbol.js");
-
 require("core-js/modules/es.array.filter.js");
-
 require("core-js/modules/es.object.get-own-property-descriptor.js");
-
 require("core-js/modules/web.dom-collections.for-each.js");
-
 require("core-js/modules/es.object.get-own-property-descriptors.js");
-
 require("core-js/modules/es.array.iterator.js");
-
 require("core-js/modules/es.string.iterator.js");
-
 require("core-js/modules/es.weak-map.js");
-
 require("core-js/modules/web.dom-collections.iterator.js");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 require("core-js/modules/es.array.concat.js");
-
 require("core-js/modules/es.object.to-string.js");
-
 require("core-js/modules/es.array.includes.js");
-
 require("core-js/modules/es.string.includes.js");
-
 require("core-js/modules/es.string.anchor.js");
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _material = require("@mui/material");
-
 var _styles = require("@mui/styles");
-
 var _reactPopper = require("react-popper");
-
 var _popperMaxSizeModifier = _interopRequireDefault(require("popper-max-size-modifier"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-
 var _ = require("..");
-
 var _utils = require("../utils");
-
 var _styles2 = _interopRequireDefault(require("./styles"));
-
 var _BaseDropdownContext = _interopRequireDefault(require("./BaseDropdownContext"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["id", "role", "classes", "className", "placeholder", "disabled", "readOnly", "expanded", "defaultExpanded", "placement", "popperProps", "onToggle", "onClickOutside", "onContainerCreation", "disablePortal", "component", "adornment", "children", "variableWidth", "dropdownHeaderProps", "dropdownHeaderRef"],
-    _excluded2 = ["modifiers"];
-
+  _excluded2 = ["modifiers"];
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var Tab = _utils.KeyboardCodes.Tab,
-    Enter = _utils.KeyboardCodes.Enter,
-    Esc = _utils.KeyboardCodes.Esc,
-    Space = _utils.KeyboardCodes.Space,
-    ArrowDown = _utils.KeyboardCodes.ArrowDown;
-
+  Enter = _utils.KeyboardCodes.Enter,
+  Esc = _utils.KeyboardCodes.Esc,
+  Space = _utils.KeyboardCodes.Space,
+  ArrowDown = _utils.KeyboardCodes.ArrowDown;
 var HvBaseDropdown = function HvBaseDropdown(_ref) {
   var id = _ref.id,
-      role = _ref.role,
-      classes = _ref.classes,
-      className = _ref.className,
-      placeholder = _ref.placeholder,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      expanded = _ref.expanded,
-      _ref$defaultExpanded = _ref.defaultExpanded,
-      defaultExpanded = _ref$defaultExpanded === void 0 ? false : _ref$defaultExpanded,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? "right" : _ref$placement,
-      _ref$popperProps = _ref.popperProps,
-      popperProps = _ref$popperProps === void 0 ? {} : _ref$popperProps,
-      onToggle = _ref.onToggle,
-      onClickOutside = _ref.onClickOutside,
-      onContainerCreation = _ref.onContainerCreation,
-      _ref$disablePortal = _ref.disablePortal,
-      disablePortal = _ref$disablePortal === void 0 ? false : _ref$disablePortal,
-      component = _ref.component,
-      adornment = _ref.adornment,
-      children = _ref.children,
-      _ref$variableWidth = _ref.variableWidth,
-      variableWidth = _ref$variableWidth === void 0 ? false : _ref$variableWidth,
-      dropdownHeaderProps = _ref.dropdownHeaderProps,
-      dropdownHeaderRefProp = _ref.dropdownHeaderRef,
-      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    role = _ref.role,
+    classes = _ref.classes,
+    className = _ref.className,
+    placeholder = _ref.placeholder,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    expanded = _ref.expanded,
+    _ref$defaultExpanded = _ref.defaultExpanded,
+    defaultExpanded = _ref$defaultExpanded === void 0 ? false : _ref$defaultExpanded,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "right" : _ref$placement,
+    _ref$popperProps = _ref.popperProps,
+    popperProps = _ref$popperProps === void 0 ? {} : _ref$popperProps,
+    onToggle = _ref.onToggle,
+    onClickOutside = _ref.onClickOutside,
+    onContainerCreation = _ref.onContainerCreation,
+    _ref$disablePortal = _ref.disablePortal,
+    disablePortal = _ref$disablePortal === void 0 ? false : _ref$disablePortal,
+    component = _ref.component,
+    adornment = _ref.adornment,
+    children = _ref.children,
+    _ref$variableWidth = _ref.variableWidth,
+    variableWidth = _ref$variableWidth === void 0 ? false : _ref$variableWidth,
+    dropdownHeaderProps = _ref.dropdownHeaderProps,
+    dropdownHeaderRefProp = _ref.dropdownHeaderRef,
+    others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useControlled = (0, _utils.useControlled)(expanded, Boolean(defaultExpanded)),
-      _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
-      isOpen = _useControlled2[0],
-      setIsOpen = _useControlled2[1];
-
+    _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
+    isOpen = _useControlled2[0],
+    setIsOpen = _useControlled2[1];
   var bottom = placement && "bottom-".concat(placement === "right" ? "start" : "end");
-
   var _useState = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      referenceElement = _useState2[0],
-      setReferenceElement = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    referenceElement = _useState2[0],
+    setReferenceElement = _useState2[1];
   var _useState3 = (0, _react.useState)({}),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      popperMaxSize = _useState4[0],
-      setPopperMaxSize = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    popperMaxSize = _useState4[0],
+    setPopperMaxSize = _useState4[1];
   var handleDropdownHeaderRefProp = (0, _utils.useForkRef)(dropdownHeaderRefProp, dropdownHeaderProps === null || dropdownHeaderProps === void 0 ? void 0 : dropdownHeaderProps.ref);
   var handleDropdownHeaderRef = (0, _utils.useForkRef)(setReferenceElement, handleDropdownHeaderRefProp);
-
   var _useState5 = (0, _react.useState)(null),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      popperElement = _useState6[0],
-      setPopperElement = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    popperElement = _useState6[0],
+    setPopperElement = _useState6[1];
   var extensionWidth = referenceElement ? referenceElement.offsetWidth : "inherit";
   var _popperProps$modifier = popperProps.modifiers,
-      popperPropsModifiers = _popperProps$modifier === void 0 ? [] : _popperProps$modifier,
-      otherPopperProps = (0, _objectWithoutProperties2.default)(popperProps, _excluded2);
+    popperPropsModifiers = _popperProps$modifier === void 0 ? [] : _popperProps$modifier,
+    otherPopperProps = (0, _objectWithoutProperties2.default)(popperProps, _excluded2);
   var onFirstUpdate = (0, _react.useCallback)(function () {
     if (onContainerCreation) onContainerCreation(popperElement);
   }, [onContainerCreation, popperElement]);
@@ -169,17 +120,16 @@ var HvBaseDropdown = function HvBaseDropdown(_ref) {
     var state = _ref4.state;
     // The `maxSize` modifier provides this data
     var _state$modifiersData$ = state.modifiersData.maxSize,
-        width = _state$modifiersData$.width,
-        height = _state$modifiersData$.height;
-
+      width = _state$modifiersData$.width,
+      height = _state$modifiersData$.height;
     if (width !== popperMaxSize.width || height !== popperMaxSize.height) {
       setPopperMaxSize({
         width: width,
         height: height
       });
-    } // eslint-disable-next-line no-param-reassign
-
+    }
 
+    // eslint-disable-next-line no-param-reassign
     state.styles.popper = _objectSpread(_objectSpread({}, state.styles.popper), {}, {
       maxWidth: "".concat(width, "px"),
       maxHeight: "".concat(height, "px")
@@ -201,37 +151,32 @@ var HvBaseDropdown = function HvBaseDropdown(_ref) {
       fn: maxSizeCalculator
     }].concat((0, _toConsumableArray2.default)(popperPropsModifiers));
   }, [maxSizeCalculator, popperPropsModifiers, variableWidth, widthCalculator, widthCalculatorEffect]);
-
   var _usePopper = (0, _reactPopper.usePopper)(referenceElement, popperElement, _objectSpread({
-    placement: bottom,
-    modifiers: modifiers,
-    onFirstUpdate: onFirstUpdate
-  }, otherPopperProps)),
-      popperStyles = _usePopper.styles,
-      attributes = _usePopper.attributes;
-
+      placement: bottom,
+      modifiers: modifiers,
+      onFirstUpdate: onFirstUpdate
+    }, otherPopperProps)),
+    popperStyles = _usePopper.styles,
+    attributes = _usePopper.attributes;
   var elementId = (0, _.useUniqueId)(id, "hvbasedropdown");
   var ariaRole = role || (component == null ? "combobox" : undefined);
   var popperPlacement = "bottom";
-
   if (attributes.popper) {
     popperPlacement = attributes.popper["data-popper-placement"];
   }
-
   var handleToggle = (0, _react.useCallback)(function (event) {
     if (event && !(0, _utils.isKeypress)(event, Tab)) {
       event.preventDefault();
-    } // we are checking specifically for false because if "isKeypress" returns true or undefined it should continue
-
-
+    }
+    // we are checking specifically for false because if "isKeypress" returns true or undefined it should continue
     var notControlKey = [Tab, Enter, Esc, ArrowDown, Space].every(function (key) {
       return (0, _utils.isKeypress)(event, key) === false;
     });
     var ignoredCombinations = (0, _utils.isKeypress)(event, Esc) && !isOpen || (0, _utils.isKeypress)(event, ArrowDown) && isOpen || (0, _utils.isKeypress)(event, Tab) && !isOpen;
     if (disabled || notControlKey || ignoredCombinations) return;
     var newOpen = !isOpen;
-    /* If about to close focus on the header component. */
 
+    /* If about to close focus on the header component. */
     var focusHeader = function focusHeader() {
       if (!newOpen) {
         // focus-ring won't be visible even if using the keyboard:
@@ -240,23 +185,18 @@ var HvBaseDropdown = function HvBaseDropdown(_ref) {
           preventScroll: true
         });
       }
-
       return newOpen;
     };
-
     setIsOpen(focusHeader());
     onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, newOpen);
   }, [isOpen, disabled, setIsOpen, onToggle, referenceElement]);
-
   var headerComponent = function () {
     var _others$ariaLabel, _others$ariaLabelled;
-
     if (component) {
       return /*#__PURE__*/_react.default.cloneElement(component, {
         ref: handleDropdownHeaderRef
       });
     }
-
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
       id: (0, _utils.setId)(id, "header"),
       className: (0, _clsx.default)(classes.header, isOpen && [classes.headerOpen, popperPlacement.includes("top") && classes.headerOpenUp, popperPlacement.includes("bottom") && classes.headerOpenDown], disabled && classes.headerDisabled, readOnly && classes.headerReadOnly),
@@ -288,7 +228,6 @@ var HvBaseDropdown = function HvBaseDropdown(_ref) {
       }))]
     }));
   }();
-
   var containerComponent = function () {
     /**
      *  Handle keyboard inside children container.
@@ -297,29 +236,23 @@ var HvBaseDropdown = function HvBaseDropdown(_ref) {
       if ((0, _utils.isKeypress)(event, Esc)) {
         handleToggle(event);
       }
-
       if ((0, _utils.isKeypress)(event, Tab) && !event.shiftKey) {
         var focusList = (0, _utils.getFirstAndLastFocus)(popperElement);
-
         if (document.activeElement === (focusList === null || focusList === void 0 ? void 0 : focusList.last)) {
           var _focusList$first;
-
           event.preventDefault();
           focusList === null || focusList === void 0 ? void 0 : (_focusList$first = focusList.first) === null || _focusList$first === void 0 ? void 0 : _focusList$first.focus();
         }
       }
     };
-
     var handleOutside = function handleOutside(event) {
       var isButtonClick = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.contains(event.target);
-
       if (!isButtonClick) {
         onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside(event);
         setIsOpen(false);
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, false);
       }
     };
-
     var container = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
       role: "tooltip",
       ref: setPopperElement,
@@ -354,7 +287,6 @@ var HvBaseDropdown = function HvBaseDropdown(_ref) {
     if (disablePortal) return container;
     return /*#__PURE__*/_reactDom.default.createPortal(container, document.body);
   }();
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: classes.root,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread(_objectSpread({
@@ -373,18 +305,15 @@ var HvBaseDropdown = function HvBaseDropdown(_ref) {
     })), isOpen ? containerComponent : null]
   });
 };
-
 process.env.NODE_ENV !== "production" ? HvBaseDropdown.propTypes = {
   /**
    * Class names to be applied.
    */
   className: _propTypes.default.string,
-
   /**
    * Id to be applied to the root node.
    */
   id: _propTypes.default.string,
-
   /**
    * The role of the element that triggers the popup.
    *
@@ -392,7 +321,6 @@ process.env.NODE_ENV !== "production" ? HvBaseDropdown.propTypes = {
    * "textbox" header is used, undefined otherwise.
    */
   role: _propTypes.default.string,
-
   /**
    * A Jss Object used to override or extend the component styles applied.
    */
@@ -401,200 +329,161 @@ process.env.NODE_ENV !== "production" ? HvBaseDropdown.propTypes = {
      * Styles applied to the root.
      */
     root: _propTypes.default.string,
-
     /**
      * Styles applied to the root when disabled.
      */
     rootDisabled: _propTypes.default.string,
-
     /**
      * Styles applied to the element that serves as reference for the popper when disabled.
      */
     anchor: _propTypes.default.string,
-
     /**
      * Styles applied to the popper element when it is inside the root element hierarchy.
      */
     container: _propTypes.default.string,
-
     /**
      * Styles applied to the header
      */
     header: _propTypes.default.string,
-
     /**
      * Styles applied to the component when is open.
      */
     headerOpen: _propTypes.default.string,
-
     /**
      * Styles applied to the header when the container is opened up.
      */
     headerOpenUp: _propTypes.default.string,
-
     /**
      * Styles applied to the header when the container is opened down.
      */
     headerOpenDown: _propTypes.default.string,
-
     /**
      * Styles applied to the header when it's disabled.
      */
     headerDisabled: _propTypes.default.string,
-
     /**
      * Styles applied to the header when it's in read only mode.
      */
     headerReadOnly: _propTypes.default.string,
-
     /**
      * Styles applied to the arrow
      */
     arrow: _propTypes.default.string,
-
     /**
      * Styles applied to the selection
      */
     selection: _propTypes.default.string,
-
     /**
      * Styles applied for truncating the container elements.
      */
     placeholder: _propTypes.default.string,
-
     /**
      * Styles applied when the selection is disabled.
      */
     selectionDisabled: _propTypes.default.string,
-
     /**
      * Styles applied to the dropdown panel.
      */
     panel: _propTypes.default.string,
-
     /**
      * Styles applied to the extension when open.
      */
     inputExtensionOpen: _propTypes.default.string,
-
     /**
      * Styles applied when position is left.
      */
     inputExtensionLeftPosition: _propTypes.default.string,
-
     /**
      * Styles applied to set the shadow when open.
      */
     inputExtensionOpenShadow: _propTypes.default.string,
-
     /**
      * Styles applied when position is right and the position is up.
      */
     inputExtensionFloatRight: _propTypes.default.string,
-
     /**
      * Styles applied when position is left and the position is up.
      */
     inputExtensionFloatLeft: _propTypes.default.string
   }).isRequired,
-
   /**
    * Header placeholder. String or node.
    */
   placeholder: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
-
   /**
    * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.
    */
   disabled: _propTypes.default.bool,
-
   /**
    * If `true` the dropdown will be in read only mode, unable to be interacted.
    */
   readOnly: _propTypes.default.bool,
-
   /**
    * Disable the portal behavior.
    * The children stay within it's parent DOM hierarchy.
    */
   disablePortal: _propTypes.default.bool,
-
   /**
    * If `true` the dropdown width depends size of content if `false` the width depends on the header size.
    * Defaults to `false`.
    */
   variableWidth: _propTypes.default.bool,
-
   /**
    * If `true` the dropdown starts opened if `false` it starts closed.
    */
   expanded: _propTypes.default.bool,
-
   /**
    * When uncontrolled, defines the initial expanded state.
    */
   defaultExpanded: _propTypes.default.bool,
-
   /**
    * An object containing props to be wired to the popper component.
    */
   popperProps: _propTypes.default.shape(),
-
   /**
    * Node to be rendered.
    */
   children: _propTypes.default.node,
-
   /**
    * Placement of the dropdown.
    */
   placement: _propTypes.default.oneOf(["left", "right"]),
-
   /**
    * Replacement for the header component.
    */
   component: _propTypes.default.node,
-
   /**
    * Adornment to replace the default arrows.
    */
   adornment: _propTypes.default.node,
-
   /**
    * When dropdown changes the expanded state.
    */
   onToggle: _propTypes.default.func,
-
   /**
    * When user click outside the open container.
    */
   onClickOutside: _propTypes.default.func,
-
   /**
    * Callback called when the dropdown is opened and ready,
    * commonly used to set focus to the content.
    */
   onContainerCreation: _propTypes.default.func,
-
   /**
    * When expanded dropdown flips position.
    */
   onFlip: _propTypes.default.func,
-
   /**
    * Attributes applied to the dropdown header element.
    */
   dropdownHeaderProps: _propTypes.default.instanceOf(Object),
-
   /**
    * Pass a ref to the dropdown header element.
    */
   dropdownHeaderRef: _utils.refType
 } : void 0;
-
 var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvBaseDropdown"
 })(HvBaseDropdown);
-
 exports.default = _default;
 //# sourceMappingURL=BaseDropdown.js.map