@hitachivantara/uikit-react-core 5.37.1 → 5.38.0

package/dist/cjs/components/Input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n  HTMLInputTypeAttribute,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  InputBaseComponentProps as MuiInputBaseComponentProps,\n  useForkRef,\n} from \"@mui/material\";\n\nimport {\n  CloseXS,\n  PreviewOff,\n  Preview,\n  Search,\n  Success,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isBrowser } from \"@core/utils/browser\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvInputLabels,\n  HvInputSuggestion,\n  HvValidationMessages,\n} from \"@core/types/forms\";\nimport { HvBaseProps, HvExtraProps } from \"@core/types/generic\";\nimport {\n  HvAdornment,\n  HvAdornmentProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestion,\n  HvSuggestions,\n  HvSuggestionsProps,\n  HvWarningText,\n  isValid,\n  isInvalid,\n} from \"@core/components/Forms\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvBaseInput, HvBaseInputProps } from \"@core/components/BaseInput\";\nimport {\n  DEFAULT_ERROR_MESSAGES,\n  computeValidationType,\n  hasBuiltInValidations,\n  validateInput,\n  computeValidationState,\n  computeValidationMessage,\n  HvInputValidity,\n} from \"@core/components/BaseInput/validations\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useIsMounted } from \"@core/hooks/useIsMounted\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./Input.styles\";\n\nexport { staticClasses as inputClasses };\n\nexport type HvInputClasses = ExtractNames<typeof useClasses>;\n\ntype InputElement = HTMLInputElement | HTMLTextAreaElement;\n\nexport interface HvInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\"\n  > {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: string;\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n   */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /**\n   * The function that will be executed onChange, allows modification of the input,\n   * it receives the value. If a new value should be presented it must returned it.\n   */\n  onChange?: HvBaseInputProps[\"onChange\"];\n  /**\n   * Callback called when the user submits the value by pressing Enter/Return.\n   *\n   * Also called when the search button is clicked (when type is \"search\").\n   */\n  onEnter?: (\n    event: React.KeyboardEvent<InputElement> | React.MouseEvent,\n    value: string\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the validation state,\n   * it receives the value and the validation state.\n   */\n  onBlur?: (\n    event: React.FocusEvent<InputElement>,\n    value: string,\n    validationState: HvInputValidity\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the value state,\n   * it receives the value.\n   */\n  onFocus?: (event: React.FocusEvent<InputElement>, value: string) => void;\n  /**\n   * The function that will be executed onKeyDown, allows checking the value state,\n   * it receives the event and value.\n   */\n  onKeyDown?: (\n    event: React.KeyboardEvent<InputElement> | React.MouseEvent,\n    value: string\n  ) => void;\n  /** The input type. */\n  type?: HTMLInputTypeAttribute;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** Internal labels?. */\n  labels?: HvInputLabels & HvExtraProps;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /**\n   * Allows passing a ref to the underlying input\n   * @deprecated Use `ref` directly instead\n   * */\n  inputRef?: HvBaseInputProps[\"inputRef\"];\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */\n  suggestionListCallback?: (value: string) => HvInputSuggestion[] | null;\n  /**\n   * The custom validation function, it receives the value and must return\n   * either `true` for valid or `false` for invalid, default validations would only\n   * occur if this function is null or undefined\n   */\n  validation?: (value: string) => boolean;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the clear button is disabled. */\n  disableClear?: boolean;\n  /** If `true` the reveal password button is disabled. Valid only when type is \"password\". */\n  disableRevealPassword?: boolean;\n  /** If `true` the search button is disabled. Valid only when type is \"search\". */\n  disableSearchButton?: boolean;\n  /**\n   * If `true` the validation icon adornment is visible. Defaults to `false`.\n   *\n   * Currently, DS specifications define only a positive feedback icon;\n   * errors are signaled through the border style and by displaying the error message.\n   */\n  showValidationIcon?: boolean;\n  /** A custom icon to be added into the input. */\n  endAdornment?: React.ReactNode;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxCharQuantity?: number;\n  /** The minimum allowed length of the characters, if this value is null no check will be perform. */\n  minCharQuantity?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvInputClasses;\n}\n\nconst DEFAULT_LABELS = {\n  clearButtonLabel: \"Clear the text\",\n  revealPasswordButtonLabel: \"Reveal password\",\n  revealPasswordButtonClickToShowTooltip: \"Click to show password.\",\n  revealPasswordButtonClickToHideTooltip: \"Click to hide password.\",\n  searchButtonLabel: \"Search\",\n};\n\n/**\n * Find the focused element onBlur.\n */\nconst getFocusedElement = (event) =>\n  isBrowser(\"ie\") ? document.activeElement : event.relatedTarget;\n\nfunction eventTargetIsInsideContainer(container, event) {\n  return container != null && container.contains(getFocusedElement(event));\n}\n\n/** Changes a given `input`'s `value`, triggering its `onChange` */\nconst changeInputValue = (input: HTMLInputElement | null, value = \"\") => {\n  const event = new Event(\"input\", { bubbles: true });\n\n  /** Original `input.value` setter (React overrides it). */\n  const setInputValue = Object.getOwnPropertyDescriptor(\n    window.HTMLInputElement.prototype,\n    \"value\"\n  )?.set;\n\n  setInputValue?.call(input, value);\n  input?.dispatchEvent(event);\n};\n\n/**\n * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.\n */\nexport const HvInput = forwardRef<InputElement, HvInputProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value: valueProp,\n    defaultValue = \"\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onEnter,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    type = \"text\",\n    placeholder,\n    autoFocus = false,\n    labels: labelsProp,\n    validationMessages,\n    disableClear = false,\n    disableRevealPassword = false,\n    disableSearchButton = false,\n    endAdornment,\n    maxCharQuantity,\n    minCharQuantity,\n    validation,\n    showValidationIcon = false,\n    suggestionListCallback,\n    inputRef: inputRefProp,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    inputProps = {},\n    ...others\n  } = useDefaultProps(\"HvInput\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const elementId = useUniqueId(id, \"hvinput\");\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const forkedRef = useForkRef(ref, inputRef, inputRefProp);\n  const suggestionsRef = useRef<HTMLElement>(null);\n\n  const [focused, setFocused] = useState(false);\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  // Value related state\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const isEmptyValue = value == null || value === \"\";\n\n  // Validation related state\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  // validationMessages reference tends to change, as users will not memoize/useState for it;\n  // dependencies must be more explicit so we set\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      validationMessages?.error,\n      validationMessages?.requiredError,\n      validationMessages?.minCharError,\n      validationMessages?.maxCharError,\n      validationMessages?.typeMismatchError,\n    ]\n  );\n\n  const validationType = useMemo(() => computeValidationType(type), [type]);\n\n  // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n  // and returns the validity state of the input.\n  const performValidation = useCallback(() => {\n    const inputValidity = validateInput(\n      inputRef.current,\n      value,\n      required,\n      minCharQuantity,\n      maxCharQuantity,\n      validationType,\n      validation\n    );\n\n    // This will only run if status is uncontrolled\n    setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n    // This will only run if statusMessage is uncontrolled\n    setValidationMessage(\n      computeValidationMessage(inputValidity, errorMessages)\n    );\n\n    return inputValidity;\n  }, [\n    errorMessages,\n    isEmptyValue,\n    maxCharQuantity,\n    minCharQuantity,\n    required,\n    setValidationMessage,\n    setValidationState,\n    validation,\n    validationType,\n    value,\n  ]);\n\n  // The error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and any of the built-in validations are active\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined &&\n        hasBuiltInValidations(\n          required,\n          validationType,\n          minCharQuantity,\n          maxCharQuantity,\n          validation,\n          inputProps\n        )));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  // Input type related state\n  const [revealPassword, setRevealPassword] = useState(false);\n\n  const realType = useMemo(() => {\n    if (type === \"password\") {\n      return revealPassword ? \"text\" : \"password\";\n    }\n\n    if (type === \"search\") {\n      return \"search\";\n    }\n\n    return \"text\";\n  }, [revealPassword, type]);\n\n  // Suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState<\n    HvSuggestion[] | null\n  >(null);\n\n  const canShowSuggestions = suggestionListCallback != null;\n  const hasSuggestions = !!suggestionValues;\n\n  // Miscellaneous state\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  /**\n   * Looks for the node that represent the input inside the material tree and focus it.\n   */\n  const focusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  const isMounted = useIsMounted();\n\n  /**\n   * Clears the suggestion array.\n   */\n  const suggestionClearHandler = () => {\n    if (isMounted.current) {\n      setSuggestionValues(null);\n    }\n  };\n\n  /**\n   * Fills of the suggestion array.\n   */\n  const suggestionHandler = (val: string) => {\n    const suggestionsArray = suggestionListCallback?.(val);\n    if (suggestionsArray?.[0]?.label) {\n      setSuggestionValues(suggestionsArray);\n    } else {\n      suggestionClearHandler();\n    }\n  };\n\n  /**\n   * Executes the user callback adds the selection to the state and clears the suggestions.\n   */\n  const suggestionSelectedHandler = (event, item) => {\n    const newValue = item.value || item.label;\n\n    changeInputValue(inputRef.current, newValue);\n\n    focusInput();\n    suggestionClearHandler();\n\n    if (type === \"search\") {\n      // trigger the onEnter callback when the user selects an option in a search box\n      onEnter?.(event, newValue);\n    }\n  };\n\n  const onChangeHandler: HvBaseInputProps[\"onChange\"] = (event, newValue) => {\n    isDirty.current = true;\n\n    // set the input value (only when value is uncontrolled)\n    setValue(newValue);\n\n    onChange?.(event, newValue);\n\n    if (canShowSuggestions) {\n      // an edge case might be a controlled input whose onChange callback\n      // doesn't change the value (or sets another): the suggestionListCallback\n      // callback will still receive the original rejected value.\n      // a refactor is needed so the suggestionListCallback might be called only\n      // when the input is uncontrolled, providing a way to externally control\n      // the suggestion values.\n      suggestionHandler(newValue);\n    }\n  };\n\n  /**\n   * Validates the input updating the state and modifying the info text, also executes\n   * the user provided onBlur passing the current validation status and value.\n   */\n  const onInputBlurHandler: HvBaseInputProps[\"onBlur\"] = (event) => {\n    // If the blur is executed when choosing an suggestion it should be ignored.\n    if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;\n\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event, value, inputValidity);\n  };\n\n  /**\n   * Updates the state putting again the value from the state because the input value is\n   * not automatically manage, it also executes the onFocus function from the user passing the value\n   */\n  const onFocusHandler: HvBaseInputProps[\"onFocus\"] = (event) => {\n    setFocused(true);\n\n    // reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event, value);\n  };\n\n  const getSuggestions = (li: number | null) => {\n    // TODO Replace with ref\n    const listEl = document.getElementById(\n      setId(elementId, \"suggestions-list\") || \"\"\n    );\n    return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n  };\n\n  const onSuggestionKeyDown: HvSuggestionsProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKey(event, \"Tab\")) {\n      suggestionClearHandler();\n    }\n  };\n\n  /** Focus the suggestion list when the arrow down is pressed. */\n  const onKeyDownHandler: HvBaseInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"ArrowDown\") && hasSuggestions) {\n      const li = getSuggestions(0);\n      li?.focus();\n    } else if (isKey(event, \"Enter\")) {\n      onEnter?.(event, value);\n    }\n\n    onKeyDown?.(event, value);\n  };\n\n  /** Clears the suggestion list on blur. */\n  const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n    if (event.relatedTarget) {\n      setTimeout(() => {\n        const list = getSuggestions(null);\n        if (!list?.contains(document.activeElement)) suggestionClearHandler();\n      }, 10);\n    }\n  };\n\n  const hasOnEnter = onEnter != null;\n\n  // show the clear button only if the input is enabled, not read-only, disableClear is false and the input is not empty\n  // also, don't show it when the input type is \"search\" and the input is active (standBy)\n  const showClear =\n    !disabled &&\n    !readOnly &&\n    !disableClear &&\n    !isEmptyValue &&\n    (!hasOnEnter ||\n      type !== \"search\" ||\n      disableSearchButton ||\n      validationState !== validationStates.standBy);\n\n  const showSearchIcon = type === \"search\" && !disableSearchButton;\n\n  const showRevealPasswordButton =\n    type === \"password\" && !disableRevealPassword;\n\n  /**\n   * Clears the input value from the state and refocus the input.\n   */\n  const handleClear = useCallback(() => {\n    // reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    changeInputValue(inputRef.current, \"\");\n\n    // we want to focus the input when clicked and not active\n    setTimeout(focusInput);\n  }, [setValidationState]);\n\n  const clearButton = useMemo(() => {\n    if (!showClear) {\n      return null;\n    }\n\n    return (\n      <HvAdornment\n        // Don't control visibility when the search icon is enabled\n        className={cx(classes.adornmentButton, {\n          [classes.iconClear]: !showSearchIcon,\n        })}\n        onClick={handleClear}\n        aria-label={labels?.clearButtonLabel}\n        aria-controls={setId(elementId, \"input\")}\n        icon={<CloseXS />}\n      />\n    );\n  }, [\n    showClear,\n    classes.adornmentButton,\n    classes.iconClear,\n    showSearchIcon,\n    handleClear,\n    labels?.clearButtonLabel,\n    elementId,\n    cx,\n  ]);\n\n  /**\n   * Calls the onEnter callback and refocus the input.\n   */\n  const handleSearch = useCallback<NonNullable<HvAdornmentProps[\"onClick\"]>>(\n    (event) => {\n      onEnter?.(event, value);\n    },\n    [onEnter, value]\n  );\n\n  const searchButton = useMemo(() => {\n    // If the search icon is not actionable, only show it when the input is empty or active\n    const reallyShowIt =\n      showSearchIcon &&\n      (isEmptyValue ||\n        (hasOnEnter && validationState === validationStates.standBy));\n\n    if (!reallyShowIt) {\n      return null;\n    }\n\n    return (\n      <HvAdornment\n        className={classes.adornmentButton}\n        onClick={hasOnEnter ? handleSearch : undefined}\n        aria-label={labels?.searchButtonLabel}\n        icon={<Search />}\n      />\n    );\n  }, [\n    showSearchIcon,\n    isEmptyValue,\n    hasOnEnter,\n    validationState,\n    classes.adornmentButton,\n    handleSearch,\n    labels?.searchButtonLabel,\n  ]);\n\n  /**\n   * Changes input type and refocus the input.\n   */\n  const handleRevealPassword = useCallback(() => {\n    setRevealPassword(!revealPassword);\n  }, [revealPassword]);\n\n  const revealPasswordButton = useMemo(() => {\n    if (!showRevealPasswordButton) {\n      return null;\n    }\n\n    return (\n      <HvTooltip\n        disableFocusListener\n        disableTouchListener\n        title={\n          <HvTypography>\n            {revealPassword\n              ? labels?.revealPasswordButtonClickToHideTooltip\n              : labels?.revealPasswordButtonClickToShowTooltip}\n          </HvTypography>\n        }\n      >\n        <HvAdornment\n          className={classes.adornmentButton}\n          onClick={handleRevealPassword}\n          aria-label={labels?.revealPasswordButtonLabel}\n          aria-controls={setId(elementId, \"input\")}\n          icon={revealPassword ? <PreviewOff /> : <Preview />}\n        />\n      </HvTooltip>\n    );\n  }, [\n    showRevealPasswordButton,\n    revealPassword,\n    labels?.revealPasswordButtonClickToHideTooltip,\n    labels?.revealPasswordButtonClickToShowTooltip,\n    labels?.revealPasswordButtonLabel,\n    classes.adornmentButton,\n    handleRevealPassword,\n    elementId,\n  ]);\n\n  const validationIcon = useMemo(() => {\n    if (!showValidationIcon) {\n      return null;\n    }\n\n    if (!isValid(validationState)) {\n      return null;\n    }\n\n    return <Success color=\"positive\" className={classes.icon} />;\n  }, [showValidationIcon, validationState, classes.icon]);\n\n  // useMemo to avoid repetitive cloning of the custom icon\n  const customIconEl = useMemo(\n    () =>\n      isValidElement(endAdornment) &&\n      React.cloneElement(endAdornment as React.ReactElement, {\n        className: cx(endAdornment.props.className, classes.icon),\n      }),\n    [classes.icon, endAdornment, cx]\n  );\n\n  const adornments = useMemo(() => {\n    if (\n      !clearButton &&\n      !revealPasswordButton &&\n      !searchButton &&\n      !validationIcon &&\n      !customIconEl\n    )\n      return null;\n\n    // note: specification implies that the custom icon should be hidden when\n    // a validation feedback icon is being shown.\n    return (\n      <div className={classes.adornmentsBox} aria-hidden=\"true\">\n        {clearButton}\n        {revealPasswordButton}\n        {searchButton}\n        {validationIcon || customIconEl}\n      </div>\n    );\n  }, [\n    classes.adornmentsBox,\n    clearButton,\n    customIconEl,\n    revealPasswordButton,\n    searchButton,\n    validationIcon,\n  ]);\n\n  // run initial validation after first render\n  // and also when any validation condition changes\n  useEffect(() => {\n    if (focused || (!isDirty.current && isEmptyValue)) {\n      // skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [focused, isEmptyValue, performValidation]);\n\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.hasSuggestions]: hasSuggestions,\n        },\n        className\n      )}\n      onBlur={onContainerBlurHandler}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              className={classes.label}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseInput\n        id={\n          hasLabel || showClear || showRevealPasswordButton\n            ? setId(elementId, \"input\")\n            : setId(id, \"input\")\n        }\n        name={name}\n        value={value}\n        required={required}\n        readOnly={readOnly}\n        disabled={disabled}\n        onChange={onChangeHandler}\n        autoFocus={autoFocus}\n        onKeyDown={onKeyDownHandler}\n        onBlur={onInputBlurHandler}\n        onFocus={onFocusHandler}\n        placeholder={placeholder}\n        type={realType}\n        classes={{\n          input: classes.input,\n          inputRoot: classes.inputRoot,\n          inputRootFocused: classes.inputRootFocused,\n          inputRootDisabled: classes.inputRootDisabled,\n          inputRootMultiline: classes.inputRootMultiline,\n          inputBorderContainer: classes.inputBorderContainer,\n        }}\n        invalid={isStateInvalid}\n        inputProps={{\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-describedby\":\n            ariaDescribedBy != null\n              ? ariaDescribedBy\n              : description\n              ? setId(elementId, \"description\")\n              : undefined,\n          \"aria-controls\": canShowSuggestions\n            ? setId(elementId, \"suggestions\")\n            : undefined,\n\n          ref: inputRef,\n\n          // prevent browsers auto-fill/suggestions when we have our own\n          autoComplete: canShowSuggestions ? \"off\" : undefined,\n\n          ...inputProps,\n        }}\n        inputRef={forkedRef}\n        endAdornment={adornments}\n        {...others}\n      />\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div role=\"presentation\" className={classes.inputExtension} />\n          )}\n          <HvSuggestions\n            ref={suggestionsRef}\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: classes.suggestionsContainer,\n              list: classes.suggestionList,\n            }}\n            expanded={hasSuggestions}\n            anchorEl={inputRef.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n          />\n        </>\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["DEFAULT_LABELS","clearButtonLabel","revealPasswordButtonLabel","revealPasswordButtonClickToShowTooltip","revealPasswordButtonClickToHideTooltip","searchButtonLabel","getFocusedElement","event","isBrowser","document","activeElement","relatedTarget","eventTargetIsInsideContainer","container","contains","changeInputValue","input","value","Event","bubbles","setInputValue","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","dispatchEvent","HvInput","forwardRef","props","ref","classes","classesProp","className","id","name","valueProp","defaultValue","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onEnter","status","statusMessage","ariaErrorMessage","type","placeholder","autoFocus","labels","labelsProp","validationMessages","disableClear","disableRevealPassword","disableSearchButton","endAdornment","maxCharQuantity","minCharQuantity","validation","showValidationIcon","suggestionListCallback","inputRef","inputRefProp","onBlur","onFocus","onKeyDown","inputProps","others","useDefaultProps","cx","useClasses","useLabels","elementId","useUniqueId","useRef","forkedRef","useForkRef","suggestionsRef","focused","setFocused","useState","isDirty","setValue","useControlled","isEmptyValue","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","errorMessages","useMemo","DEFAULT_ERROR_MESSAGES","error","requiredError","minCharError","maxCharError","typeMismatchError","validationType","computeValidationType","performValidation","useCallback","inputValidity","validateInput","current","computeValidationState","computeValidationMessage","canShowError","undefined","hasBuiltInValidations","isStateInvalid","isInvalid","revealPassword","setRevealPassword","realType","suggestionValues","setSuggestionValues","canShowSuggestions","hasSuggestions","hasLabel","hasDescription","focusInput","focus","isMounted","useIsMounted","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","newValue","onChangeHandler","onInputBlurHandler","onFocusHandler","getSuggestions","li","listEl","getElementById","setId","getElementsByTagName","onSuggestionKeyDown","isKey","onKeyDownHandler","onContainerBlurHandler","setTimeout","list","hasOnEnter","showClear","showSearchIcon","showRevealPasswordButton","handleClear","clearButton","jsx","HvAdornment","adornmentButton","iconClear","CloseXS","handleSearch","searchButton","reallyShowIt","Search","handleRevealPassword","revealPasswordButton","HvTooltip","HvTypography","PreviewOff","Preview","validationIcon","isValid","Success","icon","customIconEl","isValidElement","React","cloneElement","adornments","adornmentsBox","useEffect","errorMessageId","jsxs","HvFormElement","root","labelContainer","HvLabel","HvInfoMessage","HvBaseInput","inputRoot","inputRootFocused","inputRootDisabled","inputRootMultiline","inputBorderContainer","autoComplete","inputExtension","HvSuggestions","suggestionsContainer","suggestionList","parentElement","HvWarningText"],"mappings":"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"}
+{"version":3,"file":"Input.cjs","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n  FocusEvent,\n  HTMLInputTypeAttribute,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  InputBaseComponentProps as MuiInputBaseComponentProps,\n  useForkRef,\n} from \"@mui/material\";\n\nimport {\n  CloseXS,\n  PreviewOff,\n  Preview,\n  Search,\n  Success,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isBrowser } from \"@core/utils/browser\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvInputLabels,\n  HvInputSuggestion,\n  HvValidationMessages,\n} from \"@core/types/forms\";\nimport { HvBaseProps, HvExtraProps } from \"@core/types/generic\";\nimport {\n  HvAdornment,\n  HvAdornmentProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestion,\n  HvSuggestions,\n  HvSuggestionsProps,\n  HvWarningText,\n  isValid,\n  isInvalid,\n} from \"@core/components/Forms\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvBaseInput, HvBaseInputProps } from \"@core/components/BaseInput\";\nimport {\n  DEFAULT_ERROR_MESSAGES,\n  computeValidationType,\n  hasBuiltInValidations,\n  validateInput,\n  computeValidationState,\n  computeValidationMessage,\n  HvInputValidity,\n} from \"@core/components/BaseInput/validations\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useIsMounted } from \"@core/hooks/useIsMounted\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./Input.styles\";\n\nexport { staticClasses as inputClasses };\n\nexport type HvInputClasses = ExtractNames<typeof useClasses>;\n\ntype InputElement = HTMLInputElement | HTMLTextAreaElement;\n\nexport interface HvInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\"\n  > {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: string;\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n   */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /**\n   * The function that will be executed onChange, allows modification of the input,\n   * it receives the value. If a new value should be presented it must returned it.\n   */\n  onChange?: HvBaseInputProps[\"onChange\"];\n  /**\n   * Callback called when the user submits the value by pressing Enter/Return.\n   *\n   * Also called when the search button is clicked (when type is \"search\").\n   */\n  onEnter?: (\n    event: React.KeyboardEvent<InputElement> | React.MouseEvent,\n    value: string\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the validation state,\n   * it receives the value and the validation state.\n   */\n  onBlur?: (\n    event: React.FocusEvent<InputElement>,\n    value: string,\n    validationState: HvInputValidity\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the value state,\n   * it receives the value.\n   */\n  onFocus?: (event: React.FocusEvent<InputElement>, value: string) => void;\n  /**\n   * The function that will be executed onKeyDown, allows checking the value state,\n   * it receives the event and value.\n   */\n  onKeyDown?: (\n    event: React.KeyboardEvent<InputElement> | React.MouseEvent,\n    value: string\n  ) => void;\n  /** The input type. */\n  type?: HTMLInputTypeAttribute;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** Internal labels?. */\n  labels?: HvInputLabels & HvExtraProps;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /**\n   * Allows passing a ref to the underlying input\n   * @deprecated Use `ref` directly instead\n   * */\n  inputRef?: HvBaseInputProps[\"inputRef\"];\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */\n  suggestionListCallback?: (value: string) => HvInputSuggestion[] | null;\n  /**\n   * The custom validation function, it receives the value and must return\n   * either `true` for valid or `false` for invalid, default validations would only\n   * occur if this function is null or undefined\n   */\n  validation?: (value: string) => boolean;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the clear button is disabled. */\n  disableClear?: boolean;\n  /** If `true` the reveal password button is disabled. Valid only when type is \"password\". */\n  disableRevealPassword?: boolean;\n  /** If `true` the search button is disabled. Valid only when type is \"search\". */\n  disableSearchButton?: boolean;\n  /**\n   * If `true` the validation icon adornment is visible. Defaults to `false`.\n   *\n   * Currently, DS specifications define only a positive feedback icon;\n   * errors are signaled through the border style and by displaying the error message.\n   */\n  showValidationIcon?: boolean;\n  /** A custom icon to be added into the input. */\n  endAdornment?: React.ReactNode;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxCharQuantity?: number;\n  /** The minimum allowed length of the characters, if this value is null no check will be perform. */\n  minCharQuantity?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvInputClasses;\n}\n\nconst DEFAULT_LABELS = {\n  clearButtonLabel: \"Clear the text\",\n  revealPasswordButtonLabel: \"Reveal password\",\n  revealPasswordButtonClickToShowTooltip: \"Click to show password.\",\n  revealPasswordButtonClickToHideTooltip: \"Click to hide password.\",\n  searchButtonLabel: \"Search\",\n};\n\n/**\n * Find the focused element onBlur.\n */\nconst getFocusedElement = (event: FocusEvent) =>\n  isBrowser(\"ie\") ? document.activeElement : event.relatedTarget;\n\nfunction eventTargetIsInsideContainer(\n  container: HTMLElement | null,\n  event: FocusEvent<any>\n) {\n  return container != null && container.contains(getFocusedElement(event));\n}\n\n/** Changes a given `input`'s `value`, triggering its `onChange` */\nconst changeInputValue = (input: HTMLInputElement | null, value = \"\") => {\n  const event = new Event(\"input\", { bubbles: true });\n\n  /** Original `input.value` setter (React overrides it). */\n  const setInputValue = Object.getOwnPropertyDescriptor(\n    window.HTMLInputElement.prototype,\n    \"value\"\n  )?.set;\n\n  setInputValue?.call(input, value);\n  input?.dispatchEvent(event);\n};\n\n/**\n * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.\n */\nexport const HvInput = forwardRef<InputElement, HvInputProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value: valueProp,\n    defaultValue = \"\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onEnter,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    type = \"text\",\n    placeholder,\n    autoFocus = false,\n    labels: labelsProp,\n    validationMessages,\n    disableClear = false,\n    disableRevealPassword = false,\n    disableSearchButton = false,\n    endAdornment,\n    maxCharQuantity,\n    minCharQuantity,\n    validation,\n    showValidationIcon = false,\n    suggestionListCallback,\n    inputRef: inputRefProp,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    inputProps = {},\n    ...others\n  } = useDefaultProps(\"HvInput\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const elementId = useUniqueId(id, \"hvinput\");\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const forkedRef = useForkRef(ref, inputRef, inputRefProp);\n  const suggestionsRef = useRef<HTMLElement>(null);\n\n  const [focused, setFocused] = useState(false);\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  // Value related state\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const isEmptyValue = value == null || value === \"\";\n\n  // Validation related state\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  // validationMessages reference tends to change, as users will not memoize/useState for it;\n  // dependencies must be more explicit so we set\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      validationMessages?.error,\n      validationMessages?.requiredError,\n      validationMessages?.minCharError,\n      validationMessages?.maxCharError,\n      validationMessages?.typeMismatchError,\n    ]\n  );\n\n  const validationType = useMemo(() => computeValidationType(type), [type]);\n\n  // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n  // and returns the validity state of the input.\n  const performValidation = useCallback(() => {\n    const inputValidity = validateInput(\n      inputRef.current,\n      value,\n      required,\n      minCharQuantity,\n      maxCharQuantity,\n      validationType,\n      validation\n    );\n\n    // This will only run if status is uncontrolled\n    setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n    // This will only run if statusMessage is uncontrolled\n    setValidationMessage(\n      computeValidationMessage(inputValidity, errorMessages)\n    );\n\n    return inputValidity;\n  }, [\n    errorMessages,\n    isEmptyValue,\n    maxCharQuantity,\n    minCharQuantity,\n    required,\n    setValidationMessage,\n    setValidationState,\n    validation,\n    validationType,\n    value,\n  ]);\n\n  // The error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and any of the built-in validations are active\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined &&\n        hasBuiltInValidations(\n          required,\n          validationType,\n          minCharQuantity,\n          maxCharQuantity,\n          validation,\n          inputProps\n        )));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  // Input type related state\n  const [revealPassword, setRevealPassword] = useState(false);\n\n  const realType = useMemo(() => {\n    if (type === \"password\") {\n      return revealPassword ? \"text\" : \"password\";\n    }\n\n    if (type === \"search\") {\n      return \"search\";\n    }\n\n    return \"text\";\n  }, [revealPassword, type]);\n\n  // Suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState<\n    HvSuggestion[] | null\n  >(null);\n\n  const canShowSuggestions = suggestionListCallback != null;\n  const hasSuggestions = !!suggestionValues;\n\n  // Miscellaneous state\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  /**\n   * Looks for the node that represent the input inside the material tree and focus it.\n   */\n  const focusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  const isMounted = useIsMounted();\n\n  /**\n   * Clears the suggestion array.\n   */\n  const suggestionClearHandler = () => {\n    if (isMounted.current) {\n      setSuggestionValues(null);\n    }\n  };\n\n  /**\n   * Fills of the suggestion array.\n   */\n  const suggestionHandler = (val: string) => {\n    const suggestionsArray = suggestionListCallback?.(val);\n    if (suggestionsArray?.[0]?.label) {\n      setSuggestionValues(suggestionsArray);\n    } else {\n      suggestionClearHandler();\n    }\n  };\n\n  /**\n   * Executes the user callback adds the selection to the state and clears the suggestions.\n   */\n  const suggestionSelectedHandler: HvSuggestionsProps[\"onSuggestionSelected\"] =\n    (event, item) => {\n      const newValue = item.value || (item.label as any);\n\n      changeInputValue(inputRef.current, newValue);\n\n      focusInput();\n      suggestionClearHandler();\n\n      if (type === \"search\") {\n        // trigger the onEnter callback when the user selects an option in a search box\n        onEnter?.(event, newValue);\n      }\n    };\n\n  const onChangeHandler: HvBaseInputProps[\"onChange\"] = (event, newValue) => {\n    isDirty.current = true;\n\n    // set the input value (only when value is uncontrolled)\n    setValue(newValue);\n\n    onChange?.(event, newValue);\n\n    if (canShowSuggestions) {\n      // an edge case might be a controlled input whose onChange callback\n      // doesn't change the value (or sets another): the suggestionListCallback\n      // callback will still receive the original rejected value.\n      // a refactor is needed so the suggestionListCallback might be called only\n      // when the input is uncontrolled, providing a way to externally control\n      // the suggestion values.\n      suggestionHandler(newValue);\n    }\n  };\n\n  /**\n   * Validates the input updating the state and modifying the info text, also executes\n   * the user provided onBlur passing the current validation status and value.\n   */\n  const onInputBlurHandler: HvBaseInputProps[\"onBlur\"] = (event) => {\n    // If the blur is executed when choosing an suggestion it should be ignored.\n    if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;\n\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event, value, inputValidity);\n  };\n\n  /**\n   * Updates the state putting again the value from the state because the input value is\n   * not automatically manage, it also executes the onFocus function from the user passing the value\n   */\n  const onFocusHandler: HvBaseInputProps[\"onFocus\"] = (event) => {\n    setFocused(true);\n\n    // reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event, value);\n  };\n\n  const getSuggestions = (li: number | null) => {\n    // TODO Replace with ref\n    const listEl = document.getElementById(\n      setId(elementId, \"suggestions-list\") || \"\"\n    );\n    return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n  };\n\n  const onSuggestionKeyDown: HvSuggestionsProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKey(event, \"Tab\")) {\n      suggestionClearHandler();\n    }\n  };\n\n  /** Focus the suggestion list when the arrow down is pressed. */\n  const onKeyDownHandler: HvBaseInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"ArrowDown\") && hasSuggestions) {\n      const li = getSuggestions(0);\n      li?.focus();\n    } else if (isKey(event, \"Enter\")) {\n      onEnter?.(event, value);\n    }\n\n    onKeyDown?.(event, value);\n  };\n\n  /** Clears the suggestion list on blur. */\n  const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n    if (event.relatedTarget) {\n      setTimeout(() => {\n        const list = getSuggestions(null);\n        if (!list?.contains(document.activeElement)) suggestionClearHandler();\n      }, 10);\n    }\n  };\n\n  const hasOnEnter = onEnter != null;\n\n  // show the clear button only if the input is enabled, not read-only, disableClear is false and the input is not empty\n  // also, don't show it when the input type is \"search\" and the input is active (standBy)\n  const showClear =\n    !disabled &&\n    !readOnly &&\n    !disableClear &&\n    !isEmptyValue &&\n    (!hasOnEnter ||\n      type !== \"search\" ||\n      disableSearchButton ||\n      validationState !== validationStates.standBy);\n\n  const showSearchIcon = type === \"search\" && !disableSearchButton;\n\n  const showRevealPasswordButton =\n    type === \"password\" && !disableRevealPassword;\n\n  /**\n   * Clears the input value from the state and refocus the input.\n   */\n  const handleClear = useCallback(() => {\n    // reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    changeInputValue(inputRef.current, \"\");\n\n    // we want to focus the input when clicked and not active\n    setTimeout(focusInput);\n  }, [setValidationState]);\n\n  const clearButton = useMemo(() => {\n    if (!showClear) {\n      return null;\n    }\n\n    return (\n      <HvAdornment\n        // Don't control visibility when the search icon is enabled\n        className={cx(classes.adornmentButton, {\n          [classes.iconClear]: !showSearchIcon,\n        })}\n        onClick={handleClear}\n        aria-label={labels?.clearButtonLabel}\n        aria-controls={setId(elementId, \"input\")}\n        icon={<CloseXS />}\n      />\n    );\n  }, [\n    showClear,\n    classes.adornmentButton,\n    classes.iconClear,\n    showSearchIcon,\n    handleClear,\n    labels?.clearButtonLabel,\n    elementId,\n    cx,\n  ]);\n\n  /**\n   * Calls the onEnter callback and refocus the input.\n   */\n  const handleSearch = useCallback<NonNullable<HvAdornmentProps[\"onClick\"]>>(\n    (event) => {\n      onEnter?.(event, value);\n    },\n    [onEnter, value]\n  );\n\n  const searchButton = useMemo(() => {\n    // If the search icon is not actionable, only show it when the input is empty or active\n    const reallyShowIt =\n      showSearchIcon &&\n      (isEmptyValue ||\n        (hasOnEnter && validationState === validationStates.standBy));\n\n    if (!reallyShowIt) {\n      return null;\n    }\n\n    return (\n      <HvAdornment\n        className={classes.adornmentButton}\n        onClick={hasOnEnter ? handleSearch : undefined}\n        aria-label={labels?.searchButtonLabel}\n        icon={<Search />}\n      />\n    );\n  }, [\n    showSearchIcon,\n    isEmptyValue,\n    hasOnEnter,\n    validationState,\n    classes.adornmentButton,\n    handleSearch,\n    labels?.searchButtonLabel,\n  ]);\n\n  /**\n   * Changes input type and refocus the input.\n   */\n  const handleRevealPassword = useCallback(() => {\n    setRevealPassword(!revealPassword);\n  }, [revealPassword]);\n\n  const revealPasswordButton = useMemo(() => {\n    if (!showRevealPasswordButton) {\n      return null;\n    }\n\n    return (\n      <HvTooltip\n        disableFocusListener\n        disableTouchListener\n        title={\n          <HvTypography>\n            {revealPassword\n              ? labels?.revealPasswordButtonClickToHideTooltip\n              : labels?.revealPasswordButtonClickToShowTooltip}\n          </HvTypography>\n        }\n      >\n        <HvAdornment\n          className={classes.adornmentButton}\n          onClick={handleRevealPassword}\n          aria-label={labels?.revealPasswordButtonLabel}\n          aria-controls={setId(elementId, \"input\")}\n          icon={revealPassword ? <PreviewOff /> : <Preview />}\n        />\n      </HvTooltip>\n    );\n  }, [\n    showRevealPasswordButton,\n    revealPassword,\n    labels?.revealPasswordButtonClickToHideTooltip,\n    labels?.revealPasswordButtonClickToShowTooltip,\n    labels?.revealPasswordButtonLabel,\n    classes.adornmentButton,\n    handleRevealPassword,\n    elementId,\n  ]);\n\n  const validationIcon = useMemo(() => {\n    if (!showValidationIcon) {\n      return null;\n    }\n\n    if (!isValid(validationState)) {\n      return null;\n    }\n\n    return <Success color=\"positive\" className={classes.icon} />;\n  }, [showValidationIcon, validationState, classes.icon]);\n\n  // useMemo to avoid repetitive cloning of the custom icon\n  const customIconEl = useMemo(\n    () =>\n      isValidElement(endAdornment) &&\n      React.cloneElement(endAdornment as React.ReactElement, {\n        className: cx(endAdornment.props.className, classes.icon),\n      }),\n    [classes.icon, endAdornment, cx]\n  );\n\n  const adornments = useMemo(() => {\n    if (\n      !clearButton &&\n      !revealPasswordButton &&\n      !searchButton &&\n      !validationIcon &&\n      !customIconEl\n    )\n      return null;\n\n    // note: specification implies that the custom icon should be hidden when\n    // a validation feedback icon is being shown.\n    return (\n      <div className={classes.adornmentsBox} aria-hidden=\"true\">\n        {clearButton}\n        {revealPasswordButton}\n        {searchButton}\n        {validationIcon || customIconEl}\n      </div>\n    );\n  }, [\n    classes.adornmentsBox,\n    clearButton,\n    customIconEl,\n    revealPasswordButton,\n    searchButton,\n    validationIcon,\n  ]);\n\n  // run initial validation after first render\n  // and also when any validation condition changes\n  useEffect(() => {\n    if (focused || (!isDirty.current && isEmptyValue)) {\n      // skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [focused, isEmptyValue, performValidation]);\n\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.hasSuggestions]: hasSuggestions,\n        },\n        className\n      )}\n      onBlur={onContainerBlurHandler}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              className={classes.label}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseInput\n        id={\n          hasLabel || showClear || showRevealPasswordButton\n            ? setId(elementId, \"input\")\n            : setId(id, \"input\")\n        }\n        name={name}\n        value={value}\n        required={required}\n        readOnly={readOnly}\n        disabled={disabled}\n        onChange={onChangeHandler}\n        autoFocus={autoFocus}\n        onKeyDown={onKeyDownHandler}\n        onBlur={onInputBlurHandler}\n        onFocus={onFocusHandler}\n        placeholder={placeholder}\n        type={realType}\n        classes={{\n          input: classes.input,\n          inputRoot: classes.inputRoot,\n          inputRootFocused: classes.inputRootFocused,\n          inputRootDisabled: classes.inputRootDisabled,\n          inputRootMultiline: classes.inputRootMultiline,\n          inputBorderContainer: classes.inputBorderContainer,\n        }}\n        invalid={isStateInvalid}\n        inputProps={{\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-describedby\":\n            ariaDescribedBy != null\n              ? ariaDescribedBy\n              : description\n              ? setId(elementId, \"description\")\n              : undefined,\n          \"aria-controls\": canShowSuggestions\n            ? setId(elementId, \"suggestions\")\n            : undefined,\n\n          ref: inputRef,\n\n          // prevent browsers auto-fill/suggestions when we have our own\n          autoComplete: canShowSuggestions ? \"off\" : undefined,\n\n          ...inputProps,\n        }}\n        inputRef={forkedRef}\n        endAdornment={adornments}\n        {...others}\n      />\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div role=\"presentation\" className={classes.inputExtension} />\n          )}\n          <HvSuggestions\n            ref={suggestionsRef}\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: classes.suggestionsContainer,\n              list: classes.suggestionList,\n            }}\n            expanded={hasSuggestions}\n            anchorEl={inputRef.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n          />\n        </>\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["DEFAULT_LABELS","clearButtonLabel","revealPasswordButtonLabel","revealPasswordButtonClickToShowTooltip","revealPasswordButtonClickToHideTooltip","searchButtonLabel","getFocusedElement","event","isBrowser","document","activeElement","relatedTarget","eventTargetIsInsideContainer","container","contains","changeInputValue","input","value","Event","bubbles","setInputValue","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","dispatchEvent","HvInput","forwardRef","props","ref","classes","classesProp","className","id","name","valueProp","defaultValue","required","readOnly","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onEnter","status","statusMessage","ariaErrorMessage","type","placeholder","autoFocus","labels","labelsProp","validationMessages","disableClear","disableRevealPassword","disableSearchButton","endAdornment","maxCharQuantity","minCharQuantity","validation","showValidationIcon","suggestionListCallback","inputRef","inputRefProp","onBlur","onFocus","onKeyDown","inputProps","others","useDefaultProps","cx","useClasses","useLabels","elementId","useUniqueId","useRef","forkedRef","useForkRef","suggestionsRef","focused","setFocused","useState","isDirty","setValue","useControlled","isEmptyValue","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","errorMessages","useMemo","DEFAULT_ERROR_MESSAGES","error","requiredError","minCharError","maxCharError","typeMismatchError","validationType","computeValidationType","performValidation","useCallback","inputValidity","validateInput","current","computeValidationState","computeValidationMessage","canShowError","undefined","hasBuiltInValidations","isStateInvalid","isInvalid","revealPassword","setRevealPassword","realType","suggestionValues","setSuggestionValues","canShowSuggestions","hasSuggestions","hasLabel","hasDescription","focusInput","focus","isMounted","useIsMounted","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","newValue","onChangeHandler","onInputBlurHandler","onFocusHandler","getSuggestions","li","listEl","getElementById","setId","getElementsByTagName","onSuggestionKeyDown","isKey","onKeyDownHandler","onContainerBlurHandler","setTimeout","list","hasOnEnter","showClear","showSearchIcon","showRevealPasswordButton","handleClear","clearButton","jsx","HvAdornment","adornmentButton","iconClear","CloseXS","handleSearch","searchButton","reallyShowIt","Search","handleRevealPassword","revealPasswordButton","HvTooltip","HvTypography","PreviewOff","Preview","validationIcon","isValid","Success","icon","customIconEl","isValidElement","React","cloneElement","adornments","adornmentsBox","useEffect","errorMessageId","jsxs","HvFormElement","root","labelContainer","HvLabel","HvInfoMessage","HvBaseInput","inputRoot","inputRootFocused","inputRootDisabled","inputRootMultiline","inputBorderContainer","autoComplete","inputExtension","HvSuggestions","suggestionsContainer","suggestionList","parentElement","HvWarningText"],"mappings":"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"}

package/dist/cjs/components/QueryBuilder/ConfirmationDialog/ConfirmationDialog.styles.cjs

@@ -5,9 +5,7 @@ const {
   useClasses,
   staticClasses
 } = classes.createClasses("HvQueryBuilder-ConfirmationDialog", {
-  paper: {
-    width: 500
-  }
+  paper: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/components/QueryBuilder/ConfirmationDialog/ConfirmationDialog.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationDialog.styles.cjs","sources":["../../../../../src/components/QueryBuilder/ConfirmationDialog/ConfirmationDialog.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-ConfirmationDialog\",\n  {\n    paper: {\n      width: 500,\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","paper","width"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAC3C,qCACA;AAAA,EACEC,OAAO;AAAA,IACLC,OAAO;AAAA,EACT;AACF,CACF;;;"}
+{"version":3,"file":"ConfirmationDialog.styles.cjs","sources":["../../../../../src/components/QueryBuilder/ConfirmationDialog/ConfirmationDialog.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-ConfirmationDialog\",\n  {\n    paper: {},\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","paper"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAC3C,qCACA;AAAA,EACEC,OAAO,CAAC;AACV,CACF;;;"}

package/dist/cjs/components/QueryBuilder/QueryBuilder.styles.cjs

@@ -19,14 +19,13 @@ const {
     margin: uikitStyles.theme.space.sm,
     backgroundColor: "transparent",
     maxWidth: "100%",
-    minWidth: 740,
-    paddingBottom: `calc(${uikitStyles.theme.space.md} * 3)`
+    paddingBottom: uikitStyles.theme.space.lg
   },
   /** Styles applied to the sub group containers. */
   subGroup: {
     margin: "40px 14px 32px 20px",
     minHeight: 120,
-    paddingBottom: 60,
+    paddingBottom: uikitStyles.theme.space.md,
     "&::before": {
       content: '""',
       position: "absolute",
@@ -56,8 +55,8 @@ const {
   /** Styles applied to the multi-button combinator container on the top group. */
   topCombinator: {
     position: "absolute",
-    top: `calc( -1 * ${uikitStyles.theme.space.sm})`,
-    left: `calc( -1 * ${uikitStyles.theme.space.sm})`
+    top: `calc(-1 * ${uikitStyles.theme.space.sm})`,
+    left: `calc(-1 * ${uikitStyles.theme.space.sm})`
   },
   /** Styles applied to each combinator button. */
   combinatorButton: {},

package/dist/cjs/components/QueryBuilder/QueryBuilder.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.styles.cjs","sources":["../../../../src/components/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvQueryBuilder\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    marginTop: 12,\n    marginBottom: 32,\n    border: `1px solid ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the top group container. */\n  topGroup: {\n    margin: theme.space.sm,\n    backgroundColor: \"transparent\",\n    maxWidth: \"100%\",\n    minWidth: 740,\n    paddingBottom: `calc(${theme.space.md} * 3)`,\n  },\n  /** Styles applied to the sub group containers. */\n  subGroup: {\n    margin: \"40px 14px 32px 20px\",\n    minHeight: 120,\n    paddingBottom: 60,\n\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: 21,\n      height: 36,\n\n      borderBottom: `1px solid ${theme.colors.atmo4}`,\n      borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n      top: -38,\n      left: -38,\n    },\n    \":not($topRulesContainer)>&:last-child::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 1,\n\n      width: 32,\n      height: \"100%\",\n\n      borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n      top: 0,\n      left: `calc(${theme.space.sm} + 2)`,\n    },\n  },\n  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */\n  combinator: { minWidth: 80 },\n  /** Styles applied to the multi-button combinator container on the top group. */\n  topCombinator: {\n    position: \"absolute\",\n    top: `calc( -1 * ${theme.space.sm})`,\n    left: `calc( -1 * ${theme.space.sm})`,\n  },\n  /** Styles applied to each combinator button. */\n  combinatorButton: {},\n  /** Styles applied to the remove button.  */\n  removeButton: {},\n  /** Styles applied to the remove button on the top group. */\n  topRemoveButton: { position: \"absolute\", top: -16, right: -16 },\n  /** Styles applied to the remove button when disabled on the top group. */\n  topRemoveButtonDisabled: { backgroundColor: theme.colors.atmo2 },\n  /** Styles applied to the rules container. */\n  rulesContainer: {},\n  /** Styles applied to the sub rules container. */\n  subRulesContainer: {\n    borderLeft: `1px solid ${theme.colors.atmo4}`,\n    marginLeft: theme.space.sm,\n    marginBottom: theme.space.md,\n    paddingLeft: theme.space.sm,\n    paddingTop: 7,\n    position: \"relative\",\n    left: -33,\n    width: \"100%\",\n  },\n  /** Styles applied to the action button container. */\n  actionButtonContainer: {\n    marginLeft: \"auto\",\n\n    \"&>*\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  /** Styles applied to the top action button container. */\n  topActionButtonContainer: {\n    position: \"absolute\",\n    bottom: `calc(-1 * ${theme.space.md} * 0.5 - 3px)`,\n    right: `calc(${theme.space.sm} * 1.75 + 2px)`,\n  },\n  /** Styles applied to the top rules container. */\n  topRulesContainer: {},\n  /** Styles applied to the background of buttons to remove transparency */\n  buttonBackground: {\n    backgroundColor: theme.colors.atmo2,\n    display: \"inline-flex\",\n  },\n  createConditionButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n  },\n  createGroupButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","position","padding","theme","space","sm","marginTop","marginBottom","border","colors","atmo4","topGroup","margin","backgroundColor","maxWidth","minWidth","paddingBottom","md","subGroup","minHeight","content","zIndex","width","height","borderBottom","borderLeft","top","left","combinator","topCombinator","combinatorButton","removeButton","topRemoveButton","right","topRemoveButtonDisabled","atmo2","rulesContainer","subRulesContainer","marginLeft","paddingLeft","paddingTop","actionButtonContainer","topActionButtonContainer","bottom","topRulesContainer","buttonBackground","display","createConditionButton","cursor","createGroupButton"],"mappings":"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"}
+{"version":3,"file":"QueryBuilder.styles.cjs","sources":["../../../../src/components/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvQueryBuilder\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    marginTop: 12,\n    marginBottom: 32,\n    border: `1px solid ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the top group container. */\n  topGroup: {\n    margin: theme.space.sm,\n    backgroundColor: \"transparent\",\n    maxWidth: \"100%\",\n    paddingBottom: theme.space.lg,\n  },\n  /** Styles applied to the sub group containers. */\n  subGroup: {\n    margin: \"40px 14px 32px 20px\",\n    minHeight: 120,\n    paddingBottom: theme.space.md,\n\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: 21,\n      height: 36,\n\n      borderBottom: `1px solid ${theme.colors.atmo4}`,\n      borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n      top: -38,\n      left: -38,\n    },\n    \":not($topRulesContainer)>&:last-child::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 1,\n\n      width: 32,\n      height: \"100%\",\n\n      borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n      top: 0,\n      left: `calc(${theme.space.sm} + 2)`,\n    },\n  },\n  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */\n  combinator: { minWidth: 80 },\n  /** Styles applied to the multi-button combinator container on the top group. */\n  topCombinator: {\n    position: \"absolute\",\n    top: `calc(-1 * ${theme.space.sm})`,\n    left: `calc(-1 * ${theme.space.sm})`,\n  },\n  /** Styles applied to each combinator button. */\n  combinatorButton: {},\n  /** Styles applied to the remove button.  */\n  removeButton: {},\n  /** Styles applied to the remove button on the top group. */\n  topRemoveButton: { position: \"absolute\", top: -16, right: -16 },\n  /** Styles applied to the remove button when disabled on the top group. */\n  topRemoveButtonDisabled: { backgroundColor: theme.colors.atmo2 },\n  /** Styles applied to the rules container. */\n  rulesContainer: {},\n  /** Styles applied to the sub rules container. */\n  subRulesContainer: {\n    borderLeft: `1px solid ${theme.colors.atmo4}`,\n    marginLeft: theme.space.sm,\n    marginBottom: theme.space.md,\n    paddingLeft: theme.space.sm,\n    paddingTop: 7,\n    position: \"relative\",\n    left: -33,\n    width: \"100%\",\n  },\n  /** Styles applied to the action button container. */\n  actionButtonContainer: {\n    marginLeft: \"auto\",\n\n    \"&>*\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  /** Styles applied to the top action button container. */\n  topActionButtonContainer: {\n    position: \"absolute\",\n    bottom: `calc(-1 * ${theme.space.md} * 0.5 - 3px)`,\n    right: `calc(${theme.space.sm} * 1.75 + 2px)`,\n  },\n  /** Styles applied to the top rules container. */\n  topRulesContainer: {},\n  /** Styles applied to the background of buttons to remove transparency */\n  buttonBackground: {\n    backgroundColor: theme.colors.atmo2,\n    display: \"inline-flex\",\n  },\n  createConditionButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n  },\n  createGroupButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","position","padding","theme","space","sm","marginTop","marginBottom","border","colors","atmo4","topGroup","margin","backgroundColor","maxWidth","paddingBottom","lg","subGroup","minHeight","md","content","zIndex","width","height","borderBottom","borderLeft","top","left","combinator","minWidth","topCombinator","combinatorButton","removeButton","topRemoveButton","right","topRemoveButtonDisabled","atmo2","rulesContainer","subRulesContainer","marginLeft","paddingLeft","paddingTop","actionButtonContainer","topActionButtonContainer","bottom","topRulesContainer","buttonBackground","display","createConditionButton","cursor","createGroupButton"],"mappings":"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"}

package/dist/cjs/components/QueryBuilder/Rule/Rule.cjs

@@ -53,10 +53,10 @@ const Rule = (props) => {
   const DeleteIcon = withTooltip.withTooltip(() => /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Delete, {}), labels.rule.delete.tooltip, "bottom");
   return /* @__PURE__ */ jsxRuntime.jsxs(Grid.HvGrid, { container: true, className: cx(classes.root, {
     [classes.isMdDown]: isMdDown
-  }), spacing: 0, wrap: "nowrap", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 2, lg: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Attribute.Attribute, { attribute, id, disabled, isInvalid }) }),
-    attribute != null && availableOperators > 0 && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 2, lg: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Operator.Operator, { id, combinator, attribute, operator }) }),
-    attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: true, children: shouldShowValueInput && /* @__PURE__ */ jsxRuntime.jsx(Value.Value, { attribute, id, operator, value }) }),
+  }), spacing: 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Attribute.Attribute, { attribute, id, disabled, isInvalid }) }),
+    attribute != null && availableOperators > 0 && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Operator.Operator, { id, combinator, attribute, operator }) }),
+    attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 12, md: true, children: shouldShowValueInput && /* @__PURE__ */ jsxRuntime.jsx(Value.Value, { attribute, id, operator, value }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, className: classes.actionsContainer, children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, "aria-label": labels.rule.delete.ariaLabel, onClick: () => disableConfirmation ? dispatchAction({
       type: "remove-node",
       id

package/dist/cjs/components/QueryBuilder/Rule/Rule.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.cjs","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Delete } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { HvGrid } from \"@core/components/Grid\";\nimport { HvButton } from \"@core/components/Button\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { useDefaultProps } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils\";\n\nimport { useQueryBuilderContext } from \"../Context\";\nimport { Attribute } from \"./Attribute\";\nimport { Operator } from \"./Operator\";\nimport { Value } from \"./Value\";\nimport { staticClasses, useClasses } from \"./Rule.styles\";\n\nexport { staticClasses as queryBuilderRuleClasses };\n\nexport type HvQueryBuilderRuleClasses = ExtractNames<typeof useClasses>;\n\nexport interface RuleProps {\n  id: React.Key;\n  combinator: string;\n  attribute?: string;\n  operator?: string;\n  value?: any;\n  disabled?: boolean;\n  isInvalid: boolean;\n  classes?: HvQueryBuilderRuleClasses;\n}\n\nexport const Rule = (props: RuleProps) => {\n  const {\n    id,\n    combinator,\n    attribute,\n    operator,\n    value,\n    disabled,\n    isInvalid,\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilderRule\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    askAction,\n    dispatchAction,\n    attributes,\n    operators,\n    labels,\n    readOnly,\n    disableConfirmation,\n  } = useQueryBuilderContext();\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const availableOperators = useMemo(() => {\n    const attributeSpec =\n      attribute != null && attributes ? attributes[attribute] : null;\n    if (attributeSpec != null) {\n      const typeOperators = operators[attributeSpec.type];\n      if (typeOperators != null) {\n        return typeOperators.reduce(\n          (count, item) =>\n            count + (item.combinators.includes(combinator) ? 1 : 0),\n          0\n        );\n      }\n    }\n\n    return -1;\n  }, [attribute, attributes, combinator, operators]);\n\n  const shouldShowValueInput =\n    operator !== \"Empty\" && operator !== \"IsNotEmpty\";\n\n  const DeleteIcon = withTooltip(\n    () => <Delete />,\n    labels.rule.delete.tooltip,\n    \"bottom\"\n  );\n\n  return (\n    <HvGrid\n      container\n      className={cx(classes.root, { [classes.isMdDown]: isMdDown })}\n      spacing={0}\n      wrap=\"nowrap\"\n    >\n      <HvGrid item xs={2} lg={3}>\n        <Attribute\n          attribute={attribute}\n          id={id}\n          disabled={disabled}\n          isInvalid={isInvalid}\n        />\n      </HvGrid>\n      {attribute != null && availableOperators > 0 && (\n        <HvGrid item xs={2} lg={3}>\n          <Operator\n            id={id}\n            combinator={combinator}\n            attribute={attribute}\n            operator={operator}\n          />\n        </HvGrid>\n      )}\n      {attribute != null && (operator != null || availableOperators === 0) && (\n        <HvGrid item xs>\n          {shouldShowValueInput && (\n            <Value\n              attribute={attribute}\n              id={id}\n              operator={operator}\n              value={value}\n            />\n          )}\n        </HvGrid>\n      )}\n      <HvGrid item className={classes.actionsContainer}>\n        <HvButton\n          icon\n          aria-label={labels.rule.delete.ariaLabel}\n          onClick={() =>\n            disableConfirmation\n              ? dispatchAction({ type: \"remove-node\", id })\n              : askAction({\n                  actions: [{ type: \"remove-node\", id }],\n                  dialog: labels.rule.delete,\n                })\n          }\n          disabled={readOnly}\n        >\n          <DeleteIcon />\n        </HvButton>\n      </HvGrid>\n    </HvGrid>\n  );\n};\n"],"names":["Rule","props","id","combinator","attribute","operator","value","disabled","isInvalid","classes","classesProp","useDefaultProps","cx","useClasses","askAction","dispatchAction","attributes","operators","labels","readOnly","disableConfirmation","useQueryBuilderContext","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","availableOperators","useMemo","attributeSpec","typeOperators","type","reduce","count","item","combinators","includes","shouldShowValueInput","DeleteIcon","withTooltip","jsx","Delete","rule","delete","tooltip","HvGrid","root","Attribute","Operator","Value","actionsContainer","HvButton","ariaLabel","actions","dialog"],"mappings":";;;;;;;;;;;;;;;AA+BaA,MAAAA,OAAOA,CAACC,UAAqB;AAClC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,gBAAA,sBAAsBV,KAAK;AAEzC,QAAA;AAAA,IAAEQ;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,YAAAA,WAAWH,WAAW;AAExC,QAAA;AAAA,IACJI;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,MACEC,QAAuB,uBAAA;AAE3B,QAAMC,QAAQC,SAAAA;AAEd,QAAMC,WAAWC,SAAAA,cAAcH,MAAMI,YAAYC,KAAK,IAAI,CAAC;AAErDC,QAAAA,qBAAqBC,MAAAA,QAAQ,MAAM;AACvC,UAAMC,gBACJ1B,aAAa,QAAQY,aAAaA,WAAWZ,SAAS,IAAI;AAC5D,QAAI0B,iBAAiB,MAAM;AACnBC,YAAAA,gBAAgBd,UAAUa,cAAcE,IAAI;AAClD,UAAID,iBAAiB,MAAM;AACzB,eAAOA,cAAcE,OACnB,CAACC,OAAOC,SACND,SAASC,KAAKC,YAAYC,SAASlC,UAAU,IAAI,IAAI,IACvD,CACF;AAAA,MACF;AAAA,IACF;AAEO,WAAA;AAAA,KACN,CAACC,WAAWY,YAAYb,YAAYc,SAAS,CAAC;AAE3CqB,QAAAA,uBACJjC,aAAa,WAAWA,aAAa;AAEjCkC,QAAAA,aAAaC,YAAAA,YACjB,MAAOC,2BAAAA,IAAAC,gBAAAA,QAAA,CAAA,CAAS,GAChBxB,OAAOyB,KAAKC,OAAOC,SACnB,QACF;AAEA,yCACGC,KACC,QAAA,EAAA,WAAS,MACT,WAAWlC,GAAGH,QAAQsC,MAAM;AAAA,IAAE,CAACtC,QAAQe,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAAS,GACT,MAAK,UAEL,UAAA;AAAA,IAAAiB,2BAAA,IAACK,KAAO,QAAA,EAAA,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAAAL,2BAAA,IAACO,UACC,WAAA,EAAA,WACA,IACA,UACA,UAAqB,CAAA,GAEzB;AAAA,IACC5C,aAAa,QAAQwB,qBAAqB,KACxCa,2BAAAA,IAAAK,KAAA,QAAA,EAAO,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAACL,2BAAA,IAAAQ,mBAAA,EACC,IACA,YACA,WACA,SAAmB,CAAA,GAEvB;AAAA,IAED7C,aAAa,SAASC,YAAY,QAAQuB,uBAAuB,qCAC/DkB,KAAAA,QAAO,EAAA,MAAI,MAAC,IAAE,MACZR,kCACEG,2BAAAA,IAAAS,MAAA,OAAA,EACC,WACA,IACA,UACA,OAEH,EACH,CAAA;AAAA,mCAEDJ,KAAAA,QAAO,EAAA,MAAI,MAAC,WAAWrC,QAAQ0C,kBAC9B,UAACV,2BAAAA,IAAAW,OAAA,UAAA,EACC,MAAI,MACJ,cAAYlC,OAAOyB,KAAKC,OAAOS,WAC/B,SAAS,MACPjC,sBACIL,eAAe;AAAA,MAAEiB,MAAM;AAAA,MAAe9B;AAAAA,IAAI,CAAA,IAC1CY,UAAU;AAAA,MACRwC,SAAS,CAAC;AAAA,QAAEtB,MAAM;AAAA,QAAe9B;AAAAA,MAAAA,CAAI;AAAA,MACrCqD,QAAQrC,OAAOyB,KAAKC;AAAAA,IAAAA,CACrB,GAEP,UAAUzB,UAEV,UAACsB,2BAAA,IAAA,YAAA,CAAA,CAAU,EACb,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"Rule.cjs","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Delete } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { HvGrid } from \"@core/components/Grid\";\nimport { HvButton } from \"@core/components/Button\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { useDefaultProps } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils\";\n\nimport { useQueryBuilderContext } from \"../Context\";\nimport { Attribute } from \"./Attribute\";\nimport { Operator } from \"./Operator\";\nimport { Value } from \"./Value\";\nimport { staticClasses, useClasses } from \"./Rule.styles\";\n\nexport { staticClasses as queryBuilderRuleClasses };\n\nexport type HvQueryBuilderRuleClasses = ExtractNames<typeof useClasses>;\n\nexport interface RuleProps {\n  id: React.Key;\n  combinator: string;\n  attribute?: string;\n  operator?: string;\n  value?: any;\n  disabled?: boolean;\n  isInvalid: boolean;\n  classes?: HvQueryBuilderRuleClasses;\n}\n\nexport const Rule = (props: RuleProps) => {\n  const {\n    id,\n    combinator,\n    attribute,\n    operator,\n    value,\n    disabled,\n    isInvalid,\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilderRule\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    askAction,\n    dispatchAction,\n    attributes,\n    operators,\n    labels,\n    readOnly,\n    disableConfirmation,\n  } = useQueryBuilderContext();\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const availableOperators = useMemo(() => {\n    const attributeSpec =\n      attribute != null && attributes ? attributes[attribute] : null;\n    if (attributeSpec != null) {\n      const typeOperators = operators[attributeSpec.type];\n      if (typeOperators != null) {\n        return typeOperators.reduce(\n          (count, item) =>\n            count + (item.combinators.includes(combinator) ? 1 : 0),\n          0\n        );\n      }\n    }\n\n    return -1;\n  }, [attribute, attributes, combinator, operators]);\n\n  const shouldShowValueInput =\n    operator !== \"Empty\" && operator !== \"IsNotEmpty\";\n\n  const DeleteIcon = withTooltip(\n    () => <Delete />,\n    labels.rule.delete.tooltip,\n    \"bottom\"\n  );\n\n  return (\n    <HvGrid\n      container\n      className={cx(classes.root, { [classes.isMdDown]: isMdDown })}\n      spacing={0}\n    >\n      <HvGrid item xs={12} md={3}>\n        <Attribute\n          attribute={attribute}\n          id={id}\n          disabled={disabled}\n          isInvalid={isInvalid}\n        />\n      </HvGrid>\n      {attribute != null && availableOperators > 0 && (\n        <HvGrid item xs={12} md={3}>\n          <Operator\n            id={id}\n            combinator={combinator}\n            attribute={attribute}\n            operator={operator}\n          />\n        </HvGrid>\n      )}\n      {attribute != null && (operator != null || availableOperators === 0) && (\n        <HvGrid item xs={12} md>\n          {shouldShowValueInput && (\n            <Value\n              attribute={attribute}\n              id={id}\n              operator={operator}\n              value={value}\n            />\n          )}\n        </HvGrid>\n      )}\n      <HvGrid item className={classes.actionsContainer}>\n        <HvButton\n          icon\n          aria-label={labels.rule.delete.ariaLabel}\n          onClick={() =>\n            disableConfirmation\n              ? dispatchAction({ type: \"remove-node\", id })\n              : askAction({\n                  actions: [{ type: \"remove-node\", id }],\n                  dialog: labels.rule.delete,\n                })\n          }\n          disabled={readOnly}\n        >\n          <DeleteIcon />\n        </HvButton>\n      </HvGrid>\n    </HvGrid>\n  );\n};\n"],"names":["Rule","props","id","combinator","attribute","operator","value","disabled","isInvalid","classes","classesProp","useDefaultProps","cx","useClasses","askAction","dispatchAction","attributes","operators","labels","readOnly","disableConfirmation","useQueryBuilderContext","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","availableOperators","useMemo","attributeSpec","typeOperators","type","reduce","count","item","combinators","includes","shouldShowValueInput","DeleteIcon","withTooltip","jsx","Delete","rule","delete","tooltip","HvGrid","root","Attribute","Operator","Value","actionsContainer","HvButton","ariaLabel","actions","dialog"],"mappings":";;;;;;;;;;;;;;;AA+BaA,MAAAA,OAAOA,CAACC,UAAqB;AAClC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,gBAAA,sBAAsBV,KAAK;AAEzC,QAAA;AAAA,IAAEQ;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,YAAAA,WAAWH,WAAW;AAExC,QAAA;AAAA,IACJI;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,MACEC,QAAuB,uBAAA;AAE3B,QAAMC,QAAQC,SAAAA;AAEd,QAAMC,WAAWC,SAAAA,cAAcH,MAAMI,YAAYC,KAAK,IAAI,CAAC;AAErDC,QAAAA,qBAAqBC,MAAAA,QAAQ,MAAM;AACvC,UAAMC,gBACJ1B,aAAa,QAAQY,aAAaA,WAAWZ,SAAS,IAAI;AAC5D,QAAI0B,iBAAiB,MAAM;AACnBC,YAAAA,gBAAgBd,UAAUa,cAAcE,IAAI;AAClD,UAAID,iBAAiB,MAAM;AACzB,eAAOA,cAAcE,OACnB,CAACC,OAAOC,SACND,SAASC,KAAKC,YAAYC,SAASlC,UAAU,IAAI,IAAI,IACvD,CACF;AAAA,MACF;AAAA,IACF;AAEO,WAAA;AAAA,KACN,CAACC,WAAWY,YAAYb,YAAYc,SAAS,CAAC;AAE3CqB,QAAAA,uBACJjC,aAAa,WAAWA,aAAa;AAEjCkC,QAAAA,aAAaC,YAAAA,YACjB,MAAOC,2BAAAA,IAAAC,gBAAAA,QAAA,CAAA,CAAS,GAChBxB,OAAOyB,KAAKC,OAAOC,SACnB,QACF;AAEA,yCACGC,KACC,QAAA,EAAA,WAAS,MACT,WAAWlC,GAAGH,QAAQsC,MAAM;AAAA,IAAE,CAACtC,QAAQe,QAAQ,GAAGA;AAAAA,EAAAA,CAAU,GAC5D,SAAS,GAET,UAAA;AAAA,IAAAiB,2BAAA,IAACK,KAAO,QAAA,EAAA,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAAAL,2BAAA,IAACO,UACC,WAAA,EAAA,WACA,IACA,UACA,UAAqB,CAAA,GAEzB;AAAA,IACC5C,aAAa,QAAQwB,qBAAqB,KACxCa,2BAAAA,IAAAK,KAAA,QAAA,EAAO,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAACL,2BAAA,IAAAQ,mBAAA,EACC,IACA,YACA,WACA,SAAmB,CAAA,GAEvB;AAAA,IAED7C,aAAa,SAASC,YAAY,QAAQuB,uBAAuB,MAChEa,2BAAAA,IAACK,eAAO,MAAI,MAAC,IAAI,IAAI,IAAE,MACpBR,UACC,wBAAAG,2BAAAA,IAACS,MAAAA,SACC,WACA,IACA,UACA,MAAA,CAEH,EACH,CAAA;AAAA,mCAEDJ,KAAAA,QAAO,EAAA,MAAI,MAAC,WAAWrC,QAAQ0C,kBAC9B,UAACV,2BAAAA,IAAAW,OAAA,UAAA,EACC,MAAI,MACJ,cAAYlC,OAAOyB,KAAKC,OAAOS,WAC/B,SAAS,MACPjC,sBACIL,eAAe;AAAA,MAAEiB,MAAM;AAAA,MAAe9B;AAAAA,IAAI,CAAA,IAC1CY,UAAU;AAAA,MACRwC,SAAS,CAAC;AAAA,QAAEtB,MAAM;AAAA,QAAe9B;AAAAA,MAAAA,CAAI;AAAA,MACrCqD,QAAQrC,OAAOyB,KAAKC;AAAAA,IAAAA,CACrB,GAEP,UAAUzB,UAEV,UAACsB,2BAAA,IAAA,YAAA,CAAA,CAAU,EACb,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/components/QueryBuilder/Rule/Rule.styles.cjs

@@ -12,7 +12,7 @@ const {
     marginTop: uikitStyles.theme.space.xs,
     minHeight: 94,
     "&>div:not(:last-child)": {
-      marginRight: uikitStyles.theme.space.md
+      paddingRight: uikitStyles.theme.space.md
     },
     // hide required * as all fields are required
     "& label>span[aria-hidden]": {
@@ -27,7 +27,7 @@ const {
       borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`,
       borderLeft: `1px solid ${uikitStyles.theme.colors.atmo4}`,
       top: 0,
-      left: `calc( -1 * 17px)`
+      left: `calc(-1 * 17px)`
     },
     [`:not(.${QueryBuilder_styles.staticClasses.topRulesContainer})>&:last-child::after`]: {
       content: '""',
@@ -37,7 +37,7 @@ const {
       height: "100%",
       borderLeft: `1px solid ${uikitStyles.theme.colors.atmo4}`,
       top: 0,
-      left: `calc( -1 * 17px)`
+      left: `calc(-1 * 17px)`
     }
   },
   actionsContainer: {
@@ -49,7 +49,10 @@ const {
   },
   isMdDown: {
     "&>div:not(:last-child)": {
-      marginRight: `calc(${uikitStyles.theme.space.md} / 2)`
+      paddingRight: 0
+    },
+    "&>div:not(:first-child)": {
+      marginTop: uikitStyles.theme.space.xs
     }
   }
 });

package/dist/cjs/components/QueryBuilder/Rule/Rule.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.styles.cjs","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { staticClasses as queryBuilderClasses } from \"../QueryBuilder.styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-Rule\",\n  {\n    root: {\n      position: \"relative\",\n      marginTop: theme.space.xs,\n\n      minHeight: 94,\n\n      \"&>div:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n\n      // hide required * as all fields are required\n      \"& label>span[aria-hidden]\": {\n        visibility: \"hidden\",\n      },\n      \"&::before\": {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 2,\n\n        width: \"17px\",\n        height: \"39px\",\n\n        borderBottom: `1px solid ${theme.colors.atmo4}`,\n        borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n        top: 0,\n        left: `calc( -1 * 17px)`,\n      },\n      [`:not(.${queryBuilderClasses.topRulesContainer})>&:last-child::after`]: {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 1,\n\n        width: \"17px\",\n        height: \"100%\",\n\n        borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n        top: 0,\n        left: `calc( -1 * 17px)`,\n      },\n    },\n    actionsContainer: {\n      marginLeft: \"auto\",\n      marginTop: \"24px\",\n\n      \"&>:not(:last-child)\": {\n        marginRight: theme.space.xs,\n      },\n    },\n    isMdDown: {\n      \"&>div:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","position","marginTop","theme","space","xs","minHeight","marginRight","md","visibility","content","zIndex","width","height","borderBottom","colors","atmo4","borderLeft","top","left","queryBuilderClasses","topRulesContainer","actionsContainer","marginLeft","isMdDown"],"mappings":";;;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAC3C,uBACA;AAAA,EACEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,YAAAA,MAAMC,MAAMC;AAAAA,IAEvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,aAAaJ,YAAAA,MAAMC,MAAMI;AAAAA,IAC3B;AAAA;AAAA,IAGA,6BAA6B;AAAA,MAC3BC,YAAY;AAAA,IACd;AAAA,IACA,aAAa;AAAA,MACXC,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERC,cAAe,aAAYX,YAAMY,MAAAA,OAAOC,KAAM;AAAA,MAC9CC,YAAa,aAAYd,YAAMY,MAAAA,OAAOC,KAAM;AAAA,MAE5CE,KAAK;AAAA,MACLC,MAAO;AAAA,IACT;AAAA,IACA,CAAE,SAAQC,oBAAAA,cAAoBC,iBAAkB,uBAAsB,GAAG;AAAA,MACvEX,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERI,YAAa,aAAYd,YAAMY,MAAAA,OAAOC,KAAM;AAAA,MAE5CE,KAAK;AAAA,MACLC,MAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAG,kBAAkB;AAAA,IAChBC,YAAY;AAAA,IACZrB,WAAW;AAAA,IAEX,uBAAuB;AAAA,MACrBK,aAAaJ,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAmB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBjB,aAAc,QAAOJ,YAAAA,MAAMC,MAAMI,EAAG;AAAA,IACtC;AAAA,EACF;AACF,CACF;;;"}
+{"version":3,"file":"Rule.styles.cjs","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { staticClasses as queryBuilderClasses } from \"../QueryBuilder.styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-Rule\",\n  {\n    root: {\n      position: \"relative\",\n      marginTop: theme.space.xs,\n      minHeight: 94,\n\n      \"&>div:not(:last-child)\": {\n        paddingRight: theme.space.md,\n      },\n\n      // hide required * as all fields are required\n      \"& label>span[aria-hidden]\": {\n        visibility: \"hidden\",\n      },\n\n      \"&::before\": {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 2,\n\n        width: \"17px\",\n        height: \"39px\",\n\n        borderBottom: `1px solid ${theme.colors.atmo4}`,\n        borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n        top: 0,\n        left: `calc(-1 * 17px)`,\n      },\n\n      [`:not(.${queryBuilderClasses.topRulesContainer})>&:last-child::after`]: {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 1,\n\n        width: \"17px\",\n        height: \"100%\",\n\n        borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n        top: 0,\n        left: `calc(-1 * 17px)`,\n      },\n    },\n    actionsContainer: {\n      marginLeft: \"auto\",\n      marginTop: \"24px\",\n\n      \"&>:not(:last-child)\": {\n        marginRight: theme.space.xs,\n      },\n    },\n    isMdDown: {\n      \"&>div:not(:last-child)\": {\n        paddingRight: 0,\n      },\n      \"&>div:not(:first-child)\": {\n        marginTop: theme.space.xs,\n      },\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","position","marginTop","theme","space","xs","minHeight","paddingRight","md","visibility","content","zIndex","width","height","borderBottom","colors","atmo4","borderLeft","top","left","queryBuilderClasses","topRulesContainer","actionsContainer","marginLeft","marginRight","isMdDown"],"mappings":";;;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAC3C,uBACA;AAAA,EACEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,YAAAA,MAAMC,MAAMC;AAAAA,IACvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,cAAcJ,YAAAA,MAAMC,MAAMI;AAAAA,IAC5B;AAAA;AAAA,IAGA,6BAA6B;AAAA,MAC3BC,YAAY;AAAA,IACd;AAAA,IAEA,aAAa;AAAA,MACXC,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERC,cAAe,aAAYX,YAAMY,MAAAA,OAAOC,KAAM;AAAA,MAC9CC,YAAa,aAAYd,YAAMY,MAAAA,OAAOC,KAAM;AAAA,MAE5CE,KAAK;AAAA,MACLC,MAAO;AAAA,IACT;AAAA,IAEA,CAAE,SAAQC,oBAAAA,cAAoBC,iBAAkB,uBAAsB,GAAG;AAAA,MACvEX,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERI,YAAa,aAAYd,YAAMY,MAAAA,OAAOC,KAAM;AAAA,MAE5CE,KAAK;AAAA,MACLC,MAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAG,kBAAkB;AAAA,IAChBC,YAAY;AAAA,IACZrB,WAAW;AAAA,IAEX,uBAAuB;AAAA,MACrBsB,aAAarB,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAoB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBlB,cAAc;AAAA,IAChB;AAAA,IACA,2BAA2B;AAAA,MACzBL,WAAWC,YAAAA,MAAMC,MAAMC;AAAAA,IACzB;AAAA,EACF;AACF,CACF;;;"}

package/dist/cjs/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.cjs

@@ -10,9 +10,7 @@ const {
     display: "flex",
     flexDirection: "column"
   },
-  row: {
-    minHeight: 94
-  },
+  row: {},
   vertical: {
     display: "flex",
     flexDirection: "column"
@@ -29,10 +27,10 @@ const {
     }
   },
   datePicker: {
-    flex: "0 1 300px"
+    flex: 1
   },
   timePicker: {
-    flex: "0 1 220px"
+    flex: 1
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeValue.styles.cjs","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-DateTimeValue\",\n  {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    row: {\n      minHeight: 94,\n    },\n    vertical: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    horizontal: {\n      display: \"flex\",\n\n      \"& > div:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n    },\n    isMdDown: {\n      \"& > div:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n    datePicker: {\n      flex: \"0 1 300px\",\n    },\n    timePicker: {\n      flex: \"0 1 220px\",\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","display","flexDirection","row","minHeight","vertical","horizontal","marginRight","theme","space","md","isMdDown","datePicker","flex","timePicker"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAC3C,gCACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,EACjB;AAAA,EACAC,KAAK;AAAA,IACHC,WAAW;AAAA,EACb;AAAA,EACAC,UAAU;AAAA,IACRJ,SAAS;AAAA,IACTC,eAAe;AAAA,EACjB;AAAA,EACAI,YAAY;AAAA,IACVL,SAAS;AAAA,IAET,4BAA4B;AAAA,MAC1BM,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACR,4BAA4B;AAAA,MAC1BJ,aAAc,QAAOC,YAAAA,MAAMC,MAAMC,EAAG;AAAA,IACtC;AAAA,EACF;AAAA,EACAE,YAAY;AAAA,IACVC,MAAM;AAAA,EACR;AAAA,EACAC,YAAY;AAAA,IACVD,MAAM;AAAA,EACR;AACF,CACF;;;"}
+{"version":3,"file":"DateTimeValue.styles.cjs","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-DateTimeValue\",\n  {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    row: {},\n    vertical: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    horizontal: {\n      display: \"flex\",\n\n      \"& > div:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n    },\n    isMdDown: {\n      \"& > div:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n    datePicker: {\n      flex: 1,\n    },\n    timePicker: {\n      flex: 1,\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","display","flexDirection","row","vertical","horizontal","marginRight","theme","space","md","isMdDown","datePicker","flex","timePicker"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAC3C,gCACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,EACjB;AAAA,EACAC,KAAK,CAAC;AAAA,EACNC,UAAU;AAAA,IACRH,SAAS;AAAA,IACTC,eAAe;AAAA,EACjB;AAAA,EACAG,YAAY;AAAA,IACVJ,SAAS;AAAA,IAET,4BAA4B;AAAA,MAC1BK,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACR,4BAA4B;AAAA,MAC1BJ,aAAc,QAAOC,YAAAA,MAAMC,MAAMC,EAAG;AAAA,IACtC;AAAA,EACF;AAAA,EACAE,YAAY;AAAA,IACVC,MAAM;AAAA,EACR;AAAA,EACAC,YAAY;AAAA,IACVD,MAAM;AAAA,EACR;AACF,CACF;;;"}

package/dist/cjs/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.cjs

@@ -6,21 +6,17 @@ const {
   useClasses,
   staticClasses
 } = classes.createClasses("HvQueryBuilder-NumericValue", {
-  root: {
-    display: "flex",
-    flexGrow: 1
-  },
+  root: {},
   label: {
     paddingBottom: "6px"
   },
-  inputContainer: {
-    display: "flex",
-    alignItems: "baseline",
-    flexGrow: 1
-  },
+  inputContainer: {},
   rangeContainer: {
     display: "flex",
-    flexGrow: 1,
+    "& $inputContainer": {
+      flexGrow: 1,
+      overflow: "auto"
+    },
     "& > $inputContainer:not(:last-child)": {
       marginRight: uikitStyles.theme.space.md
     }

package/dist/cjs/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Numeric.styles.cjs","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-NumericValue\",\n  {\n    root: {\n      display: \"flex\",\n      flexGrow: 1,\n    },\n    label: {\n      paddingBottom: \"6px\",\n    },\n    inputContainer: {\n      display: \"flex\",\n      alignItems: \"baseline\",\n      flexGrow: 1,\n    },\n    rangeContainer: {\n      display: \"flex\",\n      flexGrow: 1,\n\n      \"& > $inputContainer:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n    },\n    input: {\n      flexGrow: 1,\n    },\n    isMdDown: {\n      \"& > $inputContainer:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","display","flexGrow","label","paddingBottom","inputContainer","alignItems","rangeContainer","marginRight","theme","space","md","input","isMdDown"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAC3C,+BACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,UAAU;AAAA,EACZ;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,EACjB;AAAA,EACAC,gBAAgB;AAAA,IACdJ,SAAS;AAAA,IACTK,YAAY;AAAA,IACZJ,UAAU;AAAA,EACZ;AAAA,EACAK,gBAAgB;AAAA,IACdN,SAAS;AAAA,IACTC,UAAU;AAAA,IAEV,wCAAwC;AAAA,MACtCM,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLV,UAAU;AAAA,EACZ;AAAA,EACAW,UAAU;AAAA,IACR,wCAAwC;AAAA,MACtCL,aAAc,QAAOC,YAAAA,MAAMC,MAAMC,EAAG;AAAA,IACtC;AAAA,EACF;AACF,CACF;;;"}
+{"version":3,"file":"Numeric.styles.cjs","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-NumericValue\",\n  {\n    root: {},\n    label: {\n      paddingBottom: \"6px\",\n    },\n    inputContainer: {},\n    rangeContainer: {\n      display: \"flex\",\n\n      \"& $inputContainer\": {\n        flexGrow: 1,\n        overflow: \"auto\",\n      },\n\n      \"& > $inputContainer:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n    },\n    input: {\n      flexGrow: 1,\n    },\n    isMdDown: {\n      \"& > $inputContainer:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","label","paddingBottom","inputContainer","rangeContainer","display","flexGrow","overflow","marginRight","theme","space","md","input","isMdDown"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAC3C,+BACA;AAAA,EACEC,MAAM,CAAC;AAAA,EACPC,OAAO;AAAA,IACLC,eAAe;AAAA,EACjB;AAAA,EACAC,gBAAgB,CAAC;AAAA,EACjBC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IAET,qBAAqB;AAAA,MACnBC,UAAU;AAAA,MACVC,UAAU;AAAA,IACZ;AAAA,IAEA,wCAAwC;AAAA,MACtCC,aAAaC,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLN,UAAU;AAAA,EACZ;AAAA,EACAO,UAAU;AAAA,IACR,wCAAwC;AAAA,MACtCL,aAAc,QAAOC,YAAAA,MAAMC,MAAMC,EAAG;AAAA,IACtC;AAAA,EACF;AACF,CACF;;;"}

package/dist/cjs/components/QueryBuilder/RuleGroup/RuleGroup.cjs

@@ -9,7 +9,6 @@ const QueryBuilder_styles = require("../QueryBuilder.styles.cjs");
 const Button = require("../../Button/Button.cjs");
 const Rule = require("../Rule/Rule.cjs");
 const EmptyState = require("../../EmptyState/EmptyState.cjs");
-const Grid = require("../../Grid/Grid.cjs");
 const MultiButton = require("../../MultiButton/MultiButton.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const RuleGroup = ({
@@ -61,19 +60,17 @@ const RuleGroup = ({
     [classes.topGroup]: level === 0,
     [classes.subGroup]: level > 0
   }), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Grid.HvGrid, { container: true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx(MultiButton.HvMultiButton, { className: cx(classes.combinator, classes.topCombinator), disabled: readOnly, children: combinators && combinators.map((item) => /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { className: classes.combinatorButton, selected: item.operand === combinator, onClick: () => item.operand && onClickCombinator(item), disabled: readOnly, size: "xs", children: item.label }, item.operand)) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.buttonBackground, classes.topRemoveButton), children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, className: classes.removeButton, onClick: () => disableConfirmation ? dispatchAction({
+    /* @__PURE__ */ jsxRuntime.jsx(MultiButton.HvMultiButton, { className: cx(classes.combinator, classes.topCombinator), disabled: readOnly, children: combinators && combinators.map((item) => /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { className: classes.combinatorButton, selected: item.operand === combinator, onClick: () => item.operand && onClickCombinator(item), disabled: readOnly, size: "xs", children: item.label }, item.operand)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.buttonBackground, classes.topRemoveButton), children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, className: classes.removeButton, onClick: () => disableConfirmation ? dispatchAction({
+      type: "remove-node",
+      id
+    }) : askAction({
+      actions: [{
         type: "remove-node",
         id
-      }) : askAction({
-        actions: [{
-          type: "remove-node",
-          id
-        }],
-        dialog: level === 0 && labels.query?.delete != null ? labels.query.delete : labels.group.delete
-      }), "aria-label": level === 0 && labels.query?.delete?.ariaLabel ? labels.query?.delete?.ariaLabel : labels.group.delete.ariaLabel, disabled: readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {}) }) }) })
-    ] }),
+      }],
+      dialog: level === 0 && labels.query?.delete != null ? labels.query.delete : labels.group.delete
+    }), "aria-label": level === 0 && labels.query?.delete?.ariaLabel ? labels.query?.delete?.ariaLabel : labels.group.delete.ariaLabel, disabled: readOnly, children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {}) }) }),
     rules?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.rulesContainer, {
       [classes.subRulesContainer]: level > 0,
       [classes.topRulesContainer]: level === 0
@@ -108,7 +105,7 @@ const RuleGroup = ({
         }, className: classes.createGroupButton, children: `${labels.empty?.createGroup}` })
       ] })
     ] }), icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { container: true, children: /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, className: cx(classes.actionButtonContainer, classes.topActionButtonContainer), children: actionButtons }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.actionButtonContainer, classes.topActionButtonContainer), children: actionButtons })
   ] });
 };
 exports.RuleGroup = RuleGroup;