@hitachivantara/uikit-react-core 4.0.3 → 4.1.0

package/dist/legacy/Dropdown/Dropdown.js

@@ -3,11 +3,8 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _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/es.function.name.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
@@ -42,113 +39,102 @@ var 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.
  */
-
 var HvDropdown = function HvDropdown(props) {
   var classes = props.classes,
-      className = props.className,
-      id = props.id,
-      name = props.name,
-      _props$required = props.required,
-      required = _props$required === void 0 ? false : _props$required,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      _props$readOnly = props.readOnly,
-      readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
-      label = props.label,
-      ariaLabel = props["aria-label"],
-      ariaLabelledBy = props["aria-labelledby"],
-      description = props.description,
-      ariaDescribedBy = props["aria-describedby"],
-      _props$placeholder = props.placeholder,
-      placeholder = _props$placeholder === void 0 ? "Select..." : _props$placeholder,
-      onChange = props.onChange,
-      status = props.status,
-      statusMessage = props.statusMessage,
-      ariaErrorMessage = props["aria-errormessage"],
-      onCancel = props.onCancel,
-      onToggle = props.onToggle,
-      onClickOutside = props.onClickOutside,
-      onFocus = props.onFocus,
-      onBlur = props.onBlur,
-      values = props.values,
-      _props$multiSelect = props.multiSelect,
-      multiSelect = _props$multiSelect === void 0 ? false : _props$multiSelect,
-      _props$showSearch = props.showSearch,
-      showSearch = _props$showSearch === void 0 ? false : _props$showSearch,
-      expanded = props.expanded,
-      _props$defaultExpande = props.defaultExpanded,
-      defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande,
-      _props$notifyChangesO = props.notifyChangesOnFirstRender,
-      notifyChangesOnFirstRender = _props$notifyChangesO === void 0 ? false : _props$notifyChangesO,
-      labelsProp = props.labels,
-      _props$hasTooltips = props.hasTooltips,
-      hasTooltips = _props$hasTooltips === void 0 ? false : _props$hasTooltips,
-      _props$disablePortal = props.disablePortal,
-      disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
-      _props$singleSelectio = props.singleSelectionToggle,
-      singleSelectionToggle = _props$singleSelectio === void 0 ? true : _props$singleSelectio,
-      placement = props.placement,
-      _props$variableWidth = props.variableWidth,
-      variableWidth = _props$variableWidth === void 0 ? false : _props$variableWidth,
-      _props$popperProps = props.popperProps,
-      popperProps = _props$popperProps === void 0 ? {} : _props$popperProps,
-      height = props.height,
-      _props$virtualized = props.virtualized,
-      virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
-      _props$baseDropdownPr = props.baseDropdownProps,
-      baseDropdownProps = _props$baseDropdownPr === void 0 ? {} : _props$baseDropdownPr,
-      _props$listProps = props.listProps,
-      listProps = _props$listProps === void 0 ? {} : _props$listProps,
-      others = _objectWithoutProperties(props, _excluded);
-
+    className = props.className,
+    id = props.id,
+    name = props.name,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$readOnly = props.readOnly,
+    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    label = props.label,
+    ariaLabel = props["aria-label"],
+    ariaLabelledBy = props["aria-labelledby"],
+    description = props.description,
+    ariaDescribedBy = props["aria-describedby"],
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Select..." : _props$placeholder,
+    onChange = props.onChange,
+    status = props.status,
+    statusMessage = props.statusMessage,
+    ariaErrorMessage = props["aria-errormessage"],
+    onCancel = props.onCancel,
+    onToggle = props.onToggle,
+    onClickOutside = props.onClickOutside,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    values = props.values,
+    _props$multiSelect = props.multiSelect,
+    multiSelect = _props$multiSelect === void 0 ? false : _props$multiSelect,
+    _props$showSearch = props.showSearch,
+    showSearch = _props$showSearch === void 0 ? false : _props$showSearch,
+    expanded = props.expanded,
+    _props$defaultExpande = props.defaultExpanded,
+    defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande,
+    _props$notifyChangesO = props.notifyChangesOnFirstRender,
+    notifyChangesOnFirstRender = _props$notifyChangesO === void 0 ? false : _props$notifyChangesO,
+    labelsProp = props.labels,
+    _props$hasTooltips = props.hasTooltips,
+    hasTooltips = _props$hasTooltips === void 0 ? false : _props$hasTooltips,
+    _props$disablePortal = props.disablePortal,
+    disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
+    _props$singleSelectio = props.singleSelectionToggle,
+    singleSelectionToggle = _props$singleSelectio === void 0 ? true : _props$singleSelectio,
+    placement = props.placement,
+    _props$variableWidth = props.variableWidth,
+    variableWidth = _props$variableWidth === void 0 ? false : _props$variableWidth,
+    _props$popperProps = props.popperProps,
+    popperProps = _props$popperProps === void 0 ? {} : _props$popperProps,
+    height = props.height,
+    _props$virtualized = props.virtualized,
+    virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
+    _props$baseDropdownPr = props.baseDropdownProps,
+    baseDropdownProps = _props$baseDropdownPr === void 0 ? {} : _props$baseDropdownPr,
+    _props$listProps = props.listProps,
+    listProps = _props$listProps === void 0 ? {} : _props$listProps,
+    others = _objectWithoutProperties(props, _excluded);
   var labels = useLabels(DEFAULT_LABELS, labelsProp);
   var elementId = useUniqueId(id, "hvdropdown");
-
   var _useControlled = useControlled(status, "standBy"),
-      _useControlled2 = _slicedToArray(_useControlled, 2),
-      validationState = _useControlled2[0],
-      setValidationState = _useControlled2[1];
-
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    validationState = _useControlled2[0],
+    setValidationState = _useControlled2[1];
   var _useControlled3 = useControlled(statusMessage, "Required"),
-      _useControlled4 = _slicedToArray(_useControlled3, 1),
-      validationMessage = _useControlled4[0];
-
+    _useControlled4 = _slicedToArray(_useControlled3, 1),
+    validationMessage = _useControlled4[0];
   var _useControlled5 = useControlled(expanded, Boolean(defaultExpanded)),
-      _useControlled6 = _slicedToArray(_useControlled5, 2),
-      isOpen = _useControlled6[0],
-      setIsOpen = _useControlled6[1];
-
+    _useControlled6 = _slicedToArray(_useControlled5, 2),
+    isOpen = _useControlled6[0],
+    setIsOpen = _useControlled6[1];
   var _useState = useState(getSelectionLabel(values, labels, placeholder, multiSelect)),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectionLabel = _useState2[0],
-      setSelectionLabel = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selectionLabel = _useState2[0],
+    setSelectionLabel = _useState2[1];
   var _useState3 = useState(values),
-      _useState4 = _slicedToArray(_useState3, 2),
-      internalValues = _useState4[0],
-      setInternalValues = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalValues = _useState4[0],
+    setInternalValues = _useState4[1];
   useEffect(function () {
     setInternalValues(values);
   }, [values]);
   useEffect(function () {
     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.");
   }
-
   var dropdownHeaderRef = useRef();
-
   var handleToggle = function 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
@@ -156,16 +142,15 @@ var HvDropdown = function HvDropdown(props) {
         // this will only run if status is uncontrolled
         if (required) {
           var hasSelection = getSelected(internalValues).length > 0;
-
           if (!hasSelection) {
             return "invalid";
           }
         }
-
         return "valid";
       });
     }
   };
+
   /**
    * Applies the selected values to the state
    *
@@ -174,12 +159,9 @@ var HvDropdown = function 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.
    */
-
-
   var handleSelection = function handleSelection(listValues, commitChanges, toggle) {
     var notifyChanges = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
     var selected = getSelected(listValues);
-
     if (commitChanges) {
       setInternalValues(listValues);
       setSelectionLabel(getSelectionLabel(listValues, labels, placeholder, multiSelect));
@@ -188,65 +170,55 @@ var HvDropdown = function 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.
    */
-
-
   var handleCancel = function 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
     });
   };
-
   var handleClickOutside = function handleClickOutside(evt) {
     onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside(evt);
     onCancel === null || onCancel === void 0 ? void 0 : onCancel(evt);
   };
-
   var setFocusToContent = function setFocusToContent(containerRef) {
     var 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;
     }
-
     var listItems = containerRef != null ? _toConsumableArray(containerRef.getElementsByTagName("li")) : [];
     listItems.every(function (listItem) {
       if (listItem.tabIndex >= 0) {
         listItem.focus();
         return false;
       }
-
       return true;
     });
   };
-
   var buildHeaderLabel = function buildHeaderLabel() {
     var hasSelection = getSelected(internalValues).length > 0;
     return labels.select || !multiSelect ? /*#__PURE__*/_jsx(HvTypography, {
@@ -265,21 +237,19 @@ var HvDropdown = function HvDropdown(props) {
       }), " ".concat(labels.multiSelectionConjunction, " ").concat(selectionLabel.total)]
     });
   };
-
   var hasLabel = label != null;
-  var hasDescription = description != null; // the error message area will only be created if:
+  var 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
-
   var canShowError = ariaErrorMessage == null && (status !== undefined && statusMessage !== undefined || status === undefined && required);
   var isStateInvalid = isInvalid(validationState);
   var errorMessageId;
-
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
   }
-
   return /*#__PURE__*/_jsxs(HvFormElement, _objectSpread(_objectSpread({
     id: id,
     name: name,
@@ -356,13 +326,11 @@ var HvDropdown = function 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.
    */
@@ -371,83 +339,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.
    *
@@ -455,47 +407,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.
    *
@@ -505,26 +448,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.
    */
@@ -535,32 +474,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.
    */
@@ -569,60 +502,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.
    *
@@ -631,7 +553,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.
    *
@@ -639,39 +560,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.
    */