@hitachivantara/uikit-react-core 4.0.3 → 4.0.4

package/dist/modern/Dropdown/Dropdown.js

@@ -1,12 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["classes", "className", "id", "name", "required", "disabled", "readOnly", "label", "aria-label", "aria-labelledby", "description", "aria-describedby", "placeholder", "onChange", "status", "statusMessage", "aria-errormessage", "onCancel", "onToggle", "onClickOutside", "onFocus", "onBlur", "values", "multiSelect", "showSearch", "expanded", "defaultExpanded", "notifyChangesOnFirstRender", "labels", "hasTooltips", "disablePortal", "singleSelectionToggle", "placement", "variableWidth", "popperProps", "height", "virtualized", "baseDropdownProps", "listProps"];
-
 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) { _defineProperty(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; }
-
-import "core-js/modules/web.dom-collections.iterator.js";
 import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
@@ -27,54 +23,53 @@ const DEFAULT_LABELS = {
   searchPlaceholder: "Search",
   multiSelectionConjunction: "/"
 };
+
 /**
  * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.
  */
-
 const HvDropdown = props => {
   const {
-    classes,
-    className,
-    id,
-    name,
-    required = false,
-    disabled = false,
-    readOnly = false,
-    label,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    description,
-    "aria-describedby": ariaDescribedBy,
-    placeholder = "Select...",
-    onChange,
-    status,
-    statusMessage,
-    "aria-errormessage": ariaErrorMessage,
-    onCancel,
-    onToggle,
-    onClickOutside,
-    onFocus,
-    onBlur,
-    values,
-    multiSelect = false,
-    showSearch = false,
-    expanded,
-    defaultExpanded = false,
-    notifyChangesOnFirstRender = false,
-    labels: labelsProp,
-    hasTooltips = false,
-    disablePortal = false,
-    singleSelectionToggle = true,
-    placement,
-    variableWidth = false,
-    popperProps = {},
-    height,
-    virtualized = false,
-    baseDropdownProps = {},
-    listProps = {}
-  } = props,
-        others = _objectWithoutProperties(props, _excluded);
-
+      classes,
+      className,
+      id,
+      name,
+      required = false,
+      disabled = false,
+      readOnly = false,
+      label,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      description,
+      "aria-describedby": ariaDescribedBy,
+      placeholder = "Select...",
+      onChange,
+      status,
+      statusMessage,
+      "aria-errormessage": ariaErrorMessage,
+      onCancel,
+      onToggle,
+      onClickOutside,
+      onFocus,
+      onBlur,
+      values,
+      multiSelect = false,
+      showSearch = false,
+      expanded,
+      defaultExpanded = false,
+      notifyChangesOnFirstRender = false,
+      labels: labelsProp,
+      hasTooltips = false,
+      disablePortal = false,
+      singleSelectionToggle = true,
+      placement,
+      variableWidth = false,
+      popperProps = {},
+      height,
+      virtualized = false,
+      baseDropdownProps = {},
+      listProps = {}
+    } = props,
+    others = _objectWithoutProperties(props, _excluded);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const elementId = useUniqueId(id, "hvdropdown");
   const [validationState, setValidationState] = useControlled(status, "standBy");
@@ -88,18 +83,14 @@ const HvDropdown = props => {
   useEffect(() => {
     setSelectionLabel(getSelectionLabel(values, labels, placeholder, multiSelect));
   }, [labels, multiSelect, placeholder, values]);
-
   if (virtualized && !height && process.env.NODE_ENV !== "production") {
     // eslint-disable-next-line no-console
     console.error("Dropdown/List in virtualized mode requires a height. Please define it.");
   }
-
   const dropdownHeaderRef = useRef();
-
   const handleToggle = (_e, open) => {
     onToggle === null || onToggle === void 0 ? void 0 : onToggle(_e, open);
     setIsOpen(open);
-
     if (!open) {
       // also run built-in validation when closing without changes
       // as the user "touched" the input
@@ -107,16 +98,15 @@ const HvDropdown = props => {
         // this will only run if status is uncontrolled
         if (required) {
           const hasSelection = getSelected(internalValues).length > 0;
-
           if (!hasSelection) {
             return "invalid";
           }
         }
-
         return "valid";
       });
     }
   };
+
   /**
    * Applies the selected values to the state
    *
@@ -125,11 +115,8 @@ const HvDropdown = props => {
    * @param {Boolean} toggle -If `true` the dropdown should toggle it's current state
    * @param {Boolean} notifyChanges -If `true` the dropdown will call onChange.
    */
-
-
   const handleSelection = (listValues, commitChanges, toggle, notifyChanges = true) => {
     const selected = getSelected(listValues);
-
     if (commitChanges) {
       setInternalValues(listValues);
       setSelectionLabel(getSelectionLabel(listValues, labels, placeholder, multiSelect));
@@ -138,65 +125,55 @@ const HvDropdown = props => {
         if (required && selected.length === 0) {
           return "invalid";
         }
-
         return "valid";
       });
     }
-
     if (notifyChanges) onChange === null || onChange === void 0 ? void 0 : onChange(multiSelect ? selected : selected[0]);
-
     if (toggle) {
       var _dropdownHeaderRef$cu;
+      handleToggle(undefined, false);
 
-      handleToggle(undefined, false); // focus-ring won't be visible even if using the keyboard:
+      // focus-ring won't be visible even if using the keyboard:
       // https://github.com/WICG/focus-visible/issues/88
-
       (_dropdownHeaderRef$cu = dropdownHeaderRef.current) === null || _dropdownHeaderRef$cu === void 0 ? void 0 : _dropdownHeaderRef$cu.focus({
         preventScroll: true
       });
     }
   };
+
   /**
    * Handles the `Cancel` action. Both single and ranged modes are handled here.
    */
-
-
   const handleCancel = evt => {
     var _dropdownHeaderRef$cu2;
-
     onCancel === null || onCancel === void 0 ? void 0 : onCancel(evt);
-    handleToggle(evt, false); // focus-ring won't be visible even if using the keyboard:
-    // https://github.com/WICG/focus-visible/issues/88
+    handleToggle(evt, false);
 
+    // focus-ring won't be visible even if using the keyboard:
+    // https://github.com/WICG/focus-visible/issues/88
     (_dropdownHeaderRef$cu2 = dropdownHeaderRef.current) === null || _dropdownHeaderRef$cu2 === void 0 ? void 0 : _dropdownHeaderRef$cu2.focus({
       preventScroll: true
     });
   };
-
   const handleClickOutside = evt => {
     onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside(evt);
     onCancel === null || onCancel === void 0 ? void 0 : onCancel(evt);
   };
-
   const setFocusToContent = containerRef => {
     const inputs = containerRef === null || containerRef === void 0 ? void 0 : containerRef.getElementsByTagName("input");
-
     if ((inputs === null || inputs === void 0 ? void 0 : inputs.length) > 0) {
       inputs[0].focus();
       return;
     }
-
     const listItems = containerRef != null ? [...containerRef.getElementsByTagName("li")] : [];
     listItems.every(listItem => {
       if (listItem.tabIndex >= 0) {
         listItem.focus();
         return false;
       }
-
       return true;
     });
   };
-
   const buildHeaderLabel = () => {
     const hasSelection = getSelected(internalValues).length > 0;
     return labels.select || !multiSelect ? /*#__PURE__*/_jsx(HvTypography, {
@@ -215,21 +192,19 @@ const HvDropdown = props => {
       }), ` ${labels.multiSelectionConjunction} ${selectionLabel.total}`]
     });
   };
-
   const hasLabel = label != null;
-  const hasDescription = description != null; // the error message area will only be created if:
+  const hasDescription = description != null;
+
+  // the error message area will only be created if:
   // - an external element that provides an error message isn't identified via aria-errormessage AND
   //   - both status and statusMessage properties are being controlled OR
   //   - status is uncontrolled and required is true
-
   const canShowError = ariaErrorMessage == null && (status !== undefined && statusMessage !== undefined || status === undefined && required);
   const isStateInvalid = isInvalid(validationState);
   let errorMessageId;
-
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
   }
-
   return /*#__PURE__*/_jsxs(HvFormElement, _objectSpread(_objectSpread({
     id: id,
     name: name,
@@ -306,13 +281,11 @@ const HvDropdown = props => {
     })]
   }));
 };
-
 process.env.NODE_ENV !== "production" ? HvDropdown.propTypes = {
   /**
    * Class names to be applied.
    */
   className: PropTypes.string,
-
   /**
    * A Jss Object used to override or extend the component styles applied.
    */
@@ -321,83 +294,67 @@ process.env.NODE_ENV !== "production" ? HvDropdown.propTypes = {
      * Styles applied to the component root class.
      */
     root: PropTypes.string,
-
     /**
      * Styles applied to the container of the labels elements.
      */
     labelContainer: PropTypes.string,
-
     /**
      * Styles applied to the label element.
      */
     label: PropTypes.string,
-
     /**
      * Styles applied to the icon information text.
      */
     description: PropTypes.string,
-
     /**
      * Styles applied to the error area.
      */
     error: PropTypes.string,
-
     /**
      * Styles applied to the dropdown.
      */
     dropdown: PropTypes.string,
-
     /**
      * Styles applied to the arrow
      */
     arrow: PropTypes.string,
-
     /**
      * Styles applied for truncating the list elements.
      */
     placeholder: PropTypes.string,
-
     /**
      * Styles applied when the selection is disabled.
      */
     selectionDisabled: PropTypes.string,
-
     /**
      * Styles applied to the list.
      */
     rootList: PropTypes.string,
-
     /**
      * Styles applied to the dropdown header.
      */
     dropdownHeader: PropTypes.string,
-
     /**
      * Styles applied to the dropdown is invalid.
      */
     dropdownHeaderInvalid: PropTypes.string,
-
     /**
      * Styles applied to the dropdown is opened.
      */
     dropdownHeaderOpen: PropTypes.string,
-
     /**
      * Styles applied to the dropdown list.
      */
     dropdownListContainer: PropTypes.string
   }).isRequired,
-
   /**
    * Id to be applied to the form element root node.
    */
   id: PropTypes.string,
-
   /**
    * The form element name.
    */
   name: PropTypes.string,
-
   /**
    * The label of the form element.
    *
@@ -405,47 +362,38 @@ process.env.NODE_ENV !== "production" ? HvDropdown.propTypes = {
    * If not provided, an aria-label or aria-labelledby must be provided instead.
    */
   label: PropTypes.node,
-
   /**
    * @ignore
    */
   "aria-label": PropTypes.string,
-
   /**
    * @ignore
    */
   "aria-labelledby": PropTypes.string,
-
   /**
    * Provide additional descriptive text for the form element.
    */
   description: PropTypes.node,
-
   /**
    * @ignore
    */
   "aria-describedby": PropTypes.string,
-
   /**
    * The placeholder value when nothing is selected.
    */
   placeholder: PropTypes.string,
-
   /**
    * Indicates that the form element is disabled.
    */
   disabled: PropTypes.bool,
-
   /**
    * Indicates that the form element is in read only mode.
    */
   readOnly: PropTypes.bool,
-
   /**
    * Indicates that user input is required on the form element.
    */
   required: PropTypes.bool,
-
   /**
    * The status of the form element.
    *
@@ -455,26 +403,22 @@ process.env.NODE_ENV !== "production" ? HvDropdown.propTypes = {
    * or "invalid" after any change to the state.
    */
   status: PropTypes.oneOf(["standBy", "valid", "invalid"]),
-
   /**
    * The error message to show when the validation status is "invalid".
    *
    * Defaults to "Required" when the status is uncontrolled and no `aria-errormessage` is provided.
    */
   statusMessage: PropTypes.node,
-
   /**
    * Identifies the element that provides an error message for the dropdown.
    *
    * Will only be used when the validation status is invalid.
    */
   "aria-errormessage": PropTypes.string,
-
   /**
    * The callback fired when the value changes.
    */
   onChange: PropTypes.func,
-
   /**
    * The list to be rendered by the dropdown.
    */
@@ -485,32 +429,26 @@ process.env.NODE_ENV !== "production" ? HvDropdown.propTypes = {
     value: PropTypes.any,
     selected: PropTypes.bool
   })),
-
   /**
    * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.
    */
   multiSelect: PropTypes.bool,
-
   /**
    * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.
    */
   showSearch: PropTypes.bool,
-
   /**
    * If `true` the dropdown starts opened if `false` it starts closed.
    */
   expanded: PropTypes.bool,
-
   /**
    * When uncontrolled, defines the initial expanded state.
    */
   defaultExpanded: PropTypes.bool,
-
   /**
    * If 'true' the dropdown will notify on the first render.
    */
   notifyChangesOnFirstRender: PropTypes.bool,
-
   /**
    * An object containing all the labels for the dropdown.
    */
@@ -519,60 +457,49 @@ process.env.NODE_ENV !== "production" ? HvDropdown.propTypes = {
      * Label for overwrite the default header behaviour.
      */
     select: PropTypes.string,
-
     /**
      * Label used for the All checkbox action.
      */
     selectAll: PropTypes.string,
-
     /**
      * Cancel button label.
      */
     cancelLabel: PropTypes.string,
-
     /**
      * Apply button label.
      */
     applyLabel: PropTypes.string,
-
     /**
      * The label used in the middle of the multiSelection count.
      */
     multiSelectionConjunction: PropTypes.string
   }),
-
   /**
    * If `true` the dropdown will show tooltips when user mouseenter text in list
    */
   hasTooltips: PropTypes.bool,
-
   /**
    * Disable the portal behavior.
    * The children stay within it's parent DOM hierarchy.
    */
   disablePortal: PropTypes.bool,
-
   /**
    * If `true` the dropdown width depends size of content if `false` the width depends on the header size.
    * Defaults to `false`.
    */
   variableWidth: PropTypes.bool,
-
   /**
    * If `true`, selection can be toggled when single selection.
    */
   singleSelectionToggle: PropTypes.bool,
-
   /**
    * Placement of the dropdown.
    */
   placement: PropTypes.oneOf(["left", "right"]),
-
   /**
    * An object containing props to be wired to the popper component.
    */
   popperProps: PropTypes.shape(),
-
   /**
    * Callback called when the user cancels the changes.
    *
@@ -581,7 +508,6 @@ process.env.NODE_ENV !== "production" ? HvDropdown.propTypes = {
    * @param {object} event The event source of the callback.
    */
   onCancel: PropTypes.func,
-
   /**
    * Callback called when dropdown changes the expanded state.
    *
@@ -589,39 +515,32 @@ process.env.NODE_ENV !== "production" ? HvDropdown.propTypes = {
    * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).
    */
   onToggle: PropTypes.func,
-
   /**
    * Callback called when the user clicks outside the open container.
    *
    * @param {object} event The event source of the callback.
    */
   onClickOutside: PropTypes.func,
-
   /**
    * @ignore
    */
   onFocus: PropTypes.func,
-
   /**
    * @ignore
    */
   onBlur: PropTypes.func,
-
   /**
    * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used
    */
   height: PropTypes.number,
-
   /**
    * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.
    */
   virtualized: PropTypes.bool,
-
   /**
    * Extra props passed to the dropdown.
    */
   baseDropdownProps: PropTypes.object,
-
   /**
    * Extra props passed to the list.
    */