@hitachivantara/uikit-react-core 5.59.0 → 5.61.0

package/dist/esm/CheckBox/CheckBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.js","sources":["../../../src/CheckBox/CheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport { HvBaseCheckBox, HvBaseCheckBoxProps } from \"../BaseCheckBox\";\nimport {\n  HvLabelProps,\n  HvFormStatus,\n  HvWarningText,\n  isInvalid,\n  HvFormElement,\n  HvLabel,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./CheckBox.styles\";\n\nexport { staticClasses as checkBoxClasses };\n\nexport type HvCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, \"classes\"> {\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  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\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 the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvCheckBoxClasses;\n}\n\n/**\n * A Checkbox is a mechanism that allows the user to select one or more options.\n *\n * Usually used in a Checkbox Group to present the user with a range of options from\n * which the user <b>may select any number of options</b> to complete their task.\n *\n * It can also be used individually to represent the toggle of a single option, when\n * the Toggle Switch and Toggle Button aren't more appropriate.\n */\nexport const HvCheckBox = forwardRef<HTMLButtonElement, HvCheckBoxProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      name,\n      checked,\n      status,\n      indeterminate,\n      statusMessage,\n      label,\n      labelProps,\n      inputProps,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      semantic = false,\n      defaultChecked = false,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvCheckBox\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked)\n    );\n\n    const [isIndeterminate, setIsIndeterminate] = useControlled(\n      checked !== undefined ? indeterminate : undefined,\n      Boolean(indeterminate)\n    );\n\n    const isStateInvalid = isInvalid(validationState);\n\n    const onChangeCallback = useCallback<\n      NonNullable<HvBaseCheckBoxProps[\"onChange\"]>\n    >(\n      (event, newChecked) => {\n        setIsChecked(() => {\n          // This will only run if uncontrolled\n          setIsIndeterminate(false);\n\n          if (required && !newChecked) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newChecked;\n        });\n\n        onChange?.(event, newChecked, value);\n      },\n      [\n        onChange,\n        required,\n        setIsChecked,\n        setIsIndeterminate,\n        setValidationState,\n        value,\n      ]\n    );\n\n    const onFocusVisibleCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    };\n\n    const onBlurCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(false);\n      onBlur?.(event);\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 required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const hasLabel = label != null;\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    const checkbox = (\n      <HvBaseCheckBox\n        ref={ref}\n        id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        className={cx(classes.checkbox, {\n          [classes.invalidCheckbox]: isStateInvalid,\n        })}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        onChange={onChangeCallback}\n        value={value}\n        checked={isChecked}\n        indeterminate={isIndeterminate}\n        semantic={semantic}\n        inputProps={{\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-describedby\": ariaDescribedBy,\n          ...inputProps,\n        }}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\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          { [classes.focusVisible]: !!(focusVisible && label) },\n          className\n        )}\n      >\n        {hasLabel ? (\n          <div\n            className={cx(classes.container, {\n              [classes.disabled]: disabled,\n              [classes.invalidContainer]: isStateInvalid,\n            })}\n          >\n            {checkbox}\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n              {...labelProps}\n            />\n          </div>\n        ) : (\n          checkbox\n        )}\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableAdornment={!hasLabel}\n            hideText={!hasLabel}\n            disableBorder\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CheckBox.js","sources":["../../../src/CheckBox/CheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport { HvBaseCheckBox, HvBaseCheckBoxProps } from \"../BaseCheckBox\";\nimport {\n  HvLabelProps,\n  HvFormStatus,\n  HvWarningText,\n  isInvalid,\n  HvFormElement,\n  HvLabel,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./CheckBox.styles\";\n\nexport { staticClasses as checkBoxClasses };\n\nexport type HvCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, \"classes\"> {\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  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\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 the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvCheckBoxClasses;\n}\n\n/**\n * A Checkbox is a mechanism that allows the user to select one or more options.\n *\n * Usually used in a Checkbox Group to present the user with a range of options from\n * which the user <b>may select any number of options</b> to complete their task.\n *\n * It can also be used individually to represent the toggle of a single option, when\n * the Toggle Switch and Toggle Button aren't more appropriate.\n */\nexport const HvCheckBox = forwardRef<HTMLButtonElement, HvCheckBoxProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      name,\n      checked,\n      status,\n      indeterminate,\n      statusMessage,\n      label,\n      labelProps,\n      inputProps,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      semantic = false,\n      defaultChecked = false,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvCheckBox\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked)\n    );\n\n    const [isIndeterminate, setIsIndeterminate] = useControlled(\n      checked !== undefined ? indeterminate : undefined,\n      Boolean(indeterminate)\n    );\n\n    const isStateInvalid = isInvalid(validationState);\n\n    const onChangeCallback = useCallback<\n      NonNullable<HvBaseCheckBoxProps[\"onChange\"]>\n    >(\n      (event, newChecked) => {\n        setIsChecked(() => {\n          // This will only run if uncontrolled\n          setIsIndeterminate(false);\n\n          if (required && !newChecked) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newChecked;\n        });\n\n        onChange?.(event, newChecked, value);\n      },\n      [\n        onChange,\n        required,\n        setIsChecked,\n        setIsIndeterminate,\n        setValidationState,\n        value,\n      ]\n    );\n\n    const onFocusVisibleCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    };\n\n    const onBlurCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(false);\n      onBlur?.(event);\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 required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const hasLabel = label != null;\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    const checkbox = (\n      <HvBaseCheckBox\n        ref={ref}\n        id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        className={cx(classes.checkbox, {\n          [classes.invalidCheckbox]: isStateInvalid,\n          [classes.checked]: isChecked,\n          [classes.indeterminate]: isIndeterminate,\n          [classes.semantic]: semantic,\n        })}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        onChange={onChangeCallback}\n        value={value}\n        checked={isChecked}\n        indeterminate={isIndeterminate}\n        semantic={semantic}\n        inputProps={{\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-describedby\": ariaDescribedBy,\n          ...inputProps,\n        }}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\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          { [classes.focusVisible]: !!(focusVisible && label) },\n          className\n        )}\n      >\n        {hasLabel ? (\n          <div\n            className={cx(classes.container, {\n              [classes.disabled]: disabled,\n              [classes.invalidContainer]: isStateInvalid,\n            })}\n          >\n            {checkbox}\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n              {...labelProps}\n            />\n          </div>\n        ) : (\n          checkbox\n        )}\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableAdornment={!hasLabel}\n            hideText={!hasLabel}\n            disableBorder\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/CheckBox/CheckBox.styles.js

@@ -51,7 +51,10 @@ const { staticClasses, useClasses } = createClasses("HvCheckBox", {
     height: "32px",
     lineHeight: "32px",
     width: "100%"
-  }
+  },
+  checked: {},
+  indeterminate: {},
+  semantic: {}
 });
 export {
   staticClasses,

package/dist/esm/CheckBox/CheckBox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.styles.js","sources":["../../../src/CheckBox/CheckBox.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBox\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  focusVisible: {\n    ...outlineStyles,\n\n    \"& div\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n\n    [`& $checkbox div > svg`]: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  checkbox: { height: \"32px\" },\n  invalidCheckbox: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n    borderBottomLeftRadius: \"0px\",\n    borderBottomRightRadius: \"0px\",\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IAEZ,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,cAAc;AAAA,IACZ,GAAG;AAAA,IAEH,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,CAAC,uBAAuB,GAAG;AAAA,MACzB,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,cAAc,aAAa,MAAM,OAAO,QAAQ;AAAA,IAEhD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,UAAU,EAAE,QAAQ,OAAO;AAAA,EAC3B,iBAAiB;AAAA,IACf,cAAc,aAAa,MAAM,OAAO,QAAQ;AAAA,IAChD,wBAAwB;AAAA,IACxB,yBAAyB;AAAA,EAC3B;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,IACZ,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF,CAAC;"}
+{"version":3,"file":"CheckBox.styles.js","sources":["../../../src/CheckBox/CheckBox.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBox\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  focusVisible: {\n    ...outlineStyles,\n\n    \"& div\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n\n    [`& $checkbox div > svg`]: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  checkbox: { height: \"32px\" },\n  invalidCheckbox: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n    borderBottomLeftRadius: \"0px\",\n    borderBottomRightRadius: \"0px\",\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  checked: {},\n  indeterminate: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IAEZ,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,cAAc;AAAA,IACZ,GAAG;AAAA,IAEH,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,CAAC,uBAAuB,GAAG;AAAA,MACzB,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,cAAc,aAAa,MAAM,OAAO,QAAQ;AAAA,IAEhD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,UAAU,EAAE,QAAQ,OAAO;AAAA,EAC3B,iBAAiB;AAAA,IACf,cAAc,aAAa,MAAM,OAAO,QAAQ;AAAA,IAChD,wBAAwB;AAAA,IACxB,yBAAyB;AAAA,EAC3B;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,IACZ,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB,UAAU,CAAC;AACb,CAAC;"}

package/dist/esm/List/List.styles.js

@@ -24,7 +24,7 @@ const { staticClasses, useClasses } = createClasses("HvList", {
   item: {},
   itemSelector: {
     "&:not(:hover):not(.HvIsFocused):not(:focus-within)": {
-      backgroundColor: theme.colors.primary_20
+      backgroundColor: theme.colors.containerBackgroundHover
     }
   },
   link: {

package/dist/esm/List/List.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.styles.js","sources":["../../../src/List/List.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n  root: {},\n  virtualizedRoot: { marginBottom: 5 },\n  selectorRoot: { width: \"100%\", zIndex: 0 },\n  selectorContainer: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within\": {\n      backgroundColor: \"transparent\",\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n  truncate: {\n    display: \"inline-block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {},\n  itemSelector: {\n    \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n      backgroundColor: theme.colors.primary_20,\n    },\n  },\n  link: {\n    ...theme.typography.body,\n    textDecoration: \"none\",\n\n    \"&:focus\": {\n      boxShadow: \"unset !important\",\n    },\n  },\n  selectAllSelector: {\n    width: \"100%\",\n    margin: \"0 0 2px 0\",\n\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,iBAAiB,EAAE,cAAc,EAAE;AAAA,EACnC,cAAc,EAAE,OAAO,QAAQ,QAAQ,EAAE;AAAA,EACzC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,KAAK,EAAE,OAAO,QAAQ,QAAQ,QAAQ,YAAY,OAAO;AAAA,EACzD,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpD,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,UAAU;AAAA,IACV,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"List.styles.js","sources":["../../../src/List/List.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n  root: {},\n  virtualizedRoot: { marginBottom: 5 },\n  selectorRoot: { width: \"100%\", zIndex: 0 },\n  selectorContainer: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within\": {\n      backgroundColor: \"transparent\",\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n  truncate: {\n    display: \"inline-block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {},\n  itemSelector: {\n    \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  link: {\n    ...theme.typography.body,\n    textDecoration: \"none\",\n\n    \"&:focus\": {\n      boxShadow: \"unset !important\",\n    },\n  },\n  selectAllSelector: {\n    width: \"100%\",\n    margin: \"0 0 2px 0\",\n\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,iBAAiB,EAAE,cAAc,EAAE;AAAA,EACnC,cAAc,EAAE,OAAO,QAAQ,QAAQ,EAAE;AAAA,EACzC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,KAAK,EAAE,OAAO,QAAQ,QAAQ,QAAQ,YAAY,OAAO;AAAA,EACzD,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpD,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,UAAU;AAAA,IACV,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/LoadingContainer/LoadingContainer.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses } from "./LoadingContainer.styles.js";
+import { staticClasses } from "./LoadingContainer.styles.js";
+import { HvLoading } from "../Loading/Loading.js";
+const HvLoadingContainer = (props) => {
+  const {
+    children,
+    className,
+    classes: classesProp,
+    hidden,
+    small,
+    label,
+    "aria-label": ariaLabel = label || "Loading",
+    opacity,
+    ...others
+  } = useDefaultProps("HvLoadingContainer", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), ...others, children: [
+    /* @__PURE__ */ jsx(
+      HvLoading,
+      {
+        className: classes.loading,
+        role: "progressbar",
+        small,
+        label,
+        hidden,
+        "aria-label": ariaLabel,
+        style: opacity ? { ["--opacity"]: opacity } : void 0
+      }
+    ),
+    children
+  ] });
+};
+export {
+  HvLoadingContainer,
+  staticClasses as loadingContainerClasses
+};

package/dist/esm/LoadingContainer/LoadingContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingContainer.js","sources":["../../../src/LoadingContainer/LoadingContainer.tsx"],"sourcesContent":["import { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvLoading, HvLoadingProps } from \"../Loading\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./LoadingContainer.styles\";\n\nexport { staticClasses as loadingContainerClasses };\n\nexport type HvLoadingContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingContainerProps\n  extends HvBaseProps<HTMLDivElement>,\n    Pick<HvLoadingProps, \"label\" | \"small\" | \"hidden\"> {\n  opacity?: number;\n  classes?: HvLoadingContainerClasses;\n}\n\n/**\n * A component that wraps `children` with an `HvLoading` component and\n * and an overlay background with opacity.\n *\n * @example\n * <HvLoadingContainer label=\"Loading...\" hidden={!isLoading}>\n *  <MyComponent>\n * </HvLoadingContainer>\n * */\nexport const HvLoadingContainer = (props: HvLoadingContainerProps) => {\n  const {\n    children,\n    className,\n    classes: classesProp,\n    hidden,\n    small,\n    label,\n    \"aria-label\": ariaLabel = label || \"Loading\",\n    opacity,\n    ...others\n  } = useDefaultProps(\"HvLoadingContainer\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <HvLoading\n        className={classes.loading}\n        role=\"progressbar\"\n        small={small}\n        label={label}\n        hidden={hidden}\n        aria-label={ariaLabel}\n        style={opacity ? { [\"--opacity\" as string]: opacity } : undefined}\n      />\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AA0Ba,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,YAAY,SAAS;AAAA,IACnC;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,qBAAC,SAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC/C,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,OAAO,UAAU,EAAE,CAAC,WAAqB,GAAG,YAAY;AAAA,MAAA;AAAA,IAC1D;AAAA,IACC;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/LoadingContainer/LoadingContainer.styles.js

@@ -0,0 +1,20 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvLoadingContainer", {
+  root: {
+    position: "relative",
+    height: "inherit",
+    userSelect: "none"
+  },
+  loading: {
+    position: "absolute",
+    inset: 0,
+    zIndex: theme.zIndices.overlay,
+    transition: "background-color .2s ease",
+    backgroundColor: theme.alpha("atmo1", "var(--opacity, 0.8)")
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/LoadingContainer/LoadingContainer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingContainer.styles.js","sources":["../../../src/LoadingContainer/LoadingContainer.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nconst { staticClasses, useClasses } = createClasses(\"HvLoadingContainer\", {\n  root: {\n    position: \"relative\",\n    height: \"inherit\",\n    userSelect: \"none\",\n  },\n  loading: {\n    position: \"absolute\",\n    inset: 0,\n    zIndex: theme.zIndices.overlay,\n    transition: \"background-color .2s ease\",\n    backgroundColor: theme.alpha(\"atmo1\", \"var(--opacity, 0.8)\"),\n  },\n});\n\nexport { staticClasses, useClasses };\n"],"names":[],"mappings":";;AAIA,MAAM,EAAE,eAAe,eAAe,cAAc,sBAAsB;AAAA,EACxE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ,MAAM,SAAS;AAAA,IACvB,YAAY;AAAA,IACZ,iBAAiB,MAAM,MAAM,SAAS,qBAAqB;AAAA,EAC7D;AACF,CAAC;"}

package/dist/esm/QueryBuilder/Context.js

@@ -298,6 +298,7 @@ const HvQueryBuilderContext = createContext({
   dispatchAction: () => ({}),
   askAction: () => ({}),
   selectLocation: () => ({}),
+  // TODO - remove in v6 (not used)
   attributes: {},
   operators: defaultOperators,
   combinators: defaultCombinators,

package/dist/esm/QueryBuilder/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","sources":["../../../src/QueryBuilder/Context.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nimport {\n  AskAction,\n  HvQueryBuilderAttribute,\n  QueryAction,\n  HvQueryBuilderLabels,\n  HvQueryBuilderQueryCombinator,\n  HvQueryBuilderQueryOperator,\n  HvQueryBuilderRenderers,\n} from \"./types\";\n\nexport const defaultOperators = {\n  numeric: [\n    {\n      operator: \"greaterThan\",\n      label: \"Greater than (>)\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"lessThan\",\n      label: \"Less than (<)\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"equalsTo\",\n      label: \"Equal to (=)\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"greaterThanEq\",\n      label: \"Greater than or equal to (>=)\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"lessThanEq\",\n      label: \"Less than or equal to (<=)\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"notEqual\",\n      label: \"Not equal to (!=)\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"range\",\n      label: \"Range\",\n      combinators: [\"and\"],\n    },\n  ],\n  text: [\n    {\n      operator: \"equals\",\n      label: \"Equals\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"equalsIgnoreCase\",\n      label: \"Equals Ignore Case\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"Contains\",\n      label: \"Contains\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"StartsWith\",\n      label: \"A string begins with\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"EndsWith\",\n      label: \"A string ends with\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"IsNotEmpty\",\n      label: \"Is Not empty\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"IsNot\",\n      label: \"Is Not\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"Empty\",\n      label: \"Empty\",\n      combinators: [\"and\"],\n    },\n  ],\n  textarea: [\n    {\n      operator: \"equals\",\n      label: \"Equals\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"equalsIgnoreCase\",\n      label: \"Equals Ignore Case\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"Contains\",\n      label: \"Contains\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"StartsWith\",\n      label: \"A string begins with\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"EndsWith\",\n      label: \"A string ends with\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"IsNotEmpty\",\n      label: \"Is Not empty\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"IsNot\",\n      label: \"Is Not\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"Empty\",\n      label: \"Empty\",\n      combinators: [\"and\"],\n    },\n  ],\n  boolean: [\n    {\n      operator: \"equalsTo\",\n      label: \"=\",\n      combinators: [\"and\", \"or\"],\n    },\n  ],\n  dateandtime: [\n    {\n      operator: \"greaterThan\",\n      label: \"Greater than\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"lessThan\",\n      label: \"Less than\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"equalsTo\",\n      label: \"Equal to\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"greaterThanEq\",\n      label: \"Greater than or equal to\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"lessThanEq\",\n      label: \"Less than or equal to\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"notEqual\",\n      label: \"Not equal to\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"range\",\n      label: \"Range\",\n      combinators: [\"and\"],\n    },\n  ],\n};\n\nexport const defaultCombinators = [\n  { operand: \"and\", label: \"AND\" },\n  { operand: \"or\", label: \"OR\" },\n];\n\nexport const defaultLabels = {\n  query: {\n    delete: {\n      ariaLabel: \"Reset query\",\n      tooltip: \"Reset query\",\n      dialogTitle: \"Remove all conditions?\",\n      dialogMessage:\n        \"Are you sure you want to remove all the conditions? They will be removed permanently.\",\n      dialogConfirm: \"Yes\",\n      dialogCancel: \"No\",\n      dialogCloseTooltip: \"Close\",\n    },\n  },\n  rule: {\n    attribute: {\n      label: \"Attribute\",\n      placeholder: \"Select attribute...\",\n      exists: \"Attribute already exists.\",\n    },\n    operator: {\n      label: \"Operator\",\n      placeholder: \"Select operator...\",\n    },\n    value: {\n      distance: {\n        label: \"Value\",\n        connectorText: \"radius miles from\",\n        button: \"Select location\",\n        validation: {\n          required: \"The value is required.\",\n          invalid: \"Value must be a positive number.\",\n        },\n      },\n      text: {\n        label: \"Value\",\n        placeholder: \"Enter value...\",\n        validation: {\n          required: \"The value is required.\",\n        },\n      },\n      boolean: {\n        label: \"Value\",\n        placeholder: \"Enter value\",\n        options: {\n          true: \"True\",\n          false: \"False\",\n        },\n      },\n      numeric: {\n        label: \"Value\",\n        placeholder: \"Enter value\",\n        validation: {\n          required: \"The value is required.\",\n          invalid: \"Value must be a number.\",\n          equal: \"Cannot be equal.\",\n          greaterThan: \"Needs to be greater.\",\n        },\n        range: {\n          leftLabel: \"From\",\n          rightLabel: \"To\",\n        },\n      },\n      datetime: {\n        dateLabel: \"Date\",\n        datePlaceholder: \"Select Date\",\n        timeLabel: \"Time\",\n        timePlaceholder: \"Select Time\",\n        startDateLabel: \"Start Date\",\n        startDatePlaceholder: \"Select Start Date\",\n        startTimeLabel: \"Start Time\",\n        startTimePlaceholder: \"Select Start Time\",\n        endDateLabel: \"End Date\",\n        endDatePlaceholder: \"Select End Date\",\n        endTimeLabel: \"End Time\",\n        endTimePlaceholder: \"Select End Time\",\n        validation: {\n          required: \"The value is required.\",\n          invalidInterval:\n            \"End date and time must be after start date and time.\",\n        },\n      },\n    },\n    delete: {\n      ariaLabel: \"Remove condition\",\n      tooltip: \"Remove condition\",\n      dialogTitle: \"Remove condition?\",\n      dialogMessage:\n        \"Are you sure you want to remove the condition? It will be removed permanently.\",\n      dialogConfirm: \"Yes\",\n      dialogCancel: \"No\",\n      dialogCloseTooltip: \"Close\",\n    },\n  },\n  group: {\n    delete: {\n      ariaLabel: \"Remove group\",\n      tooltip: \"Remove group\",\n      dialogTitle: \"Remove group?\",\n      dialogMessage:\n        \"Are you sure you want to remove the group? It will be removed permanently.\",\n      dialogConfirm: \"Yes\",\n      dialogCancel: \"No\",\n      dialogCloseTooltip: \"Close\",\n    },\n    reset: {\n      ariaLabel: \"Change operator\",\n      tooltip: \"Change operator query\",\n      dialogTitle: \"Change conditional operator?\",\n      dialogMessage:\n        \"Do you want to change conditional operator? You won't be able to undo this operation. Conditions and/or groups will be removed.\",\n      dialogConfirm: \"Yes\",\n      dialogCancel: \"No\",\n      dialogCloseTooltip: \"Close\",\n    },\n    addRule: {\n      label: \"Add condition\",\n    },\n    addGroup: {\n      label: \"Add group\",\n    },\n  },\n  empty: {\n    title: \"No conditions created yet\",\n    createCondition: \"Create a condition\",\n    createGroup: \"condition group\",\n    spacer: \" or a \",\n  },\n};\n\nexport interface HvQueryBuilderContextValue {\n  dispatchAction: React.Dispatch<QueryAction>;\n  askAction: React.Dispatch<React.SetStateAction<AskAction | undefined>>;\n  selectLocation?: React.Dispatch<unknown>;\n  attributes?: Record<string, HvQueryBuilderAttribute>;\n  operators: Record<string, HvQueryBuilderQueryOperator[]>;\n  combinators: HvQueryBuilderQueryCombinator[];\n  maxDepth: number;\n  labels: HvQueryBuilderLabels;\n  initialTouched: boolean;\n  readOnly: boolean;\n  disableConfirmation: boolean;\n  renderers?: HvQueryBuilderRenderers;\n  emptyRenderer?: string[];\n}\n\nexport const HvQueryBuilderContext = createContext<HvQueryBuilderContextValue>({\n  dispatchAction: () => ({}),\n  askAction: () => ({}),\n  selectLocation: () => ({}),\n  attributes: {},\n  operators: defaultOperators,\n  combinators: defaultCombinators,\n  maxDepth: 1,\n  labels: defaultLabels,\n  initialTouched: false,\n  disableConfirmation: false,\n  readOnly: false,\n});\n\nexport interface HvQueryBuilderProviderProps {\n  value: HvQueryBuilderContextValue;\n  children: React.ReactNode;\n}\n\nexport const HvQueryBuilderProvider = ({\n  children,\n  value,\n}: HvQueryBuilderProviderProps) => {\n  return (\n    <HvQueryBuilderContext.Provider value={value}>\n      {children}\n    </HvQueryBuilderContext.Provider>\n  );\n};\n\nexport const useQueryBuilderContext = () => {\n  return useContext(HvQueryBuilderContext);\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Context.js","sources":["../../../src/QueryBuilder/Context.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nimport {\n  AskAction,\n  HvQueryBuilderAttribute,\n  QueryAction,\n  HvQueryBuilderLabels,\n  HvQueryBuilderQueryCombinator,\n  HvQueryBuilderQueryOperator,\n  HvQueryBuilderRenderers,\n} from \"./types\";\n\nexport const defaultOperators = {\n  numeric: [\n    {\n      operator: \"greaterThan\",\n      label: \"Greater than (>)\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"lessThan\",\n      label: \"Less than (<)\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"equalsTo\",\n      label: \"Equal to (=)\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"greaterThanEq\",\n      label: \"Greater than or equal to (>=)\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"lessThanEq\",\n      label: \"Less than or equal to (<=)\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"notEqual\",\n      label: \"Not equal to (!=)\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"range\",\n      label: \"Range\",\n      combinators: [\"and\"],\n    },\n  ],\n  text: [\n    {\n      operator: \"equals\",\n      label: \"Equals\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"equalsIgnoreCase\",\n      label: \"Equals Ignore Case\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"Contains\",\n      label: \"Contains\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"StartsWith\",\n      label: \"A string begins with\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"EndsWith\",\n      label: \"A string ends with\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"IsNotEmpty\",\n      label: \"Is Not empty\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"IsNot\",\n      label: \"Is Not\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"Empty\",\n      label: \"Empty\",\n      combinators: [\"and\"],\n    },\n  ],\n  textarea: [\n    {\n      operator: \"equals\",\n      label: \"Equals\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"equalsIgnoreCase\",\n      label: \"Equals Ignore Case\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"Contains\",\n      label: \"Contains\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"StartsWith\",\n      label: \"A string begins with\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"EndsWith\",\n      label: \"A string ends with\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"IsNotEmpty\",\n      label: \"Is Not empty\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"IsNot\",\n      label: \"Is Not\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"Empty\",\n      label: \"Empty\",\n      combinators: [\"and\"],\n    },\n  ],\n  boolean: [\n    {\n      operator: \"equalsTo\",\n      label: \"=\",\n      combinators: [\"and\", \"or\"],\n    },\n  ],\n  dateandtime: [\n    {\n      operator: \"greaterThan\",\n      label: \"Greater than\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"lessThan\",\n      label: \"Less than\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"equalsTo\",\n      label: \"Equal to\",\n      combinators: [\"and\", \"or\"],\n    },\n    {\n      operator: \"greaterThanEq\",\n      label: \"Greater than or equal to\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"lessThanEq\",\n      label: \"Less than or equal to\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"notEqual\",\n      label: \"Not equal to\",\n      combinators: [\"and\"],\n    },\n    {\n      operator: \"range\",\n      label: \"Range\",\n      combinators: [\"and\"],\n    },\n  ],\n};\n\nexport const defaultCombinators = [\n  { operand: \"and\", label: \"AND\" },\n  { operand: \"or\", label: \"OR\" },\n];\n\nexport const defaultLabels = {\n  query: {\n    delete: {\n      ariaLabel: \"Reset query\",\n      tooltip: \"Reset query\",\n      dialogTitle: \"Remove all conditions?\",\n      dialogMessage:\n        \"Are you sure you want to remove all the conditions? They will be removed permanently.\",\n      dialogConfirm: \"Yes\",\n      dialogCancel: \"No\",\n      dialogCloseTooltip: \"Close\",\n    },\n  },\n  rule: {\n    attribute: {\n      label: \"Attribute\",\n      placeholder: \"Select attribute...\",\n      exists: \"Attribute already exists.\",\n    },\n    operator: {\n      label: \"Operator\",\n      placeholder: \"Select operator...\",\n    },\n    value: {\n      distance: {\n        label: \"Value\",\n        connectorText: \"radius miles from\",\n        button: \"Select location\",\n        validation: {\n          required: \"The value is required.\",\n          invalid: \"Value must be a positive number.\",\n        },\n      },\n      text: {\n        label: \"Value\",\n        placeholder: \"Enter value...\",\n        validation: {\n          required: \"The value is required.\",\n        },\n      },\n      boolean: {\n        label: \"Value\",\n        placeholder: \"Enter value\",\n        options: {\n          true: \"True\",\n          false: \"False\",\n        },\n      },\n      numeric: {\n        label: \"Value\",\n        placeholder: \"Enter value\",\n        validation: {\n          required: \"The value is required.\",\n          invalid: \"Value must be a number.\",\n          equal: \"Cannot be equal.\",\n          greaterThan: \"Needs to be greater.\",\n        },\n        range: {\n          leftLabel: \"From\",\n          rightLabel: \"To\",\n        },\n      },\n      datetime: {\n        dateLabel: \"Date\",\n        datePlaceholder: \"Select Date\",\n        timeLabel: \"Time\",\n        timePlaceholder: \"Select Time\",\n        startDateLabel: \"Start Date\",\n        startDatePlaceholder: \"Select Start Date\",\n        startTimeLabel: \"Start Time\",\n        startTimePlaceholder: \"Select Start Time\",\n        endDateLabel: \"End Date\",\n        endDatePlaceholder: \"Select End Date\",\n        endTimeLabel: \"End Time\",\n        endTimePlaceholder: \"Select End Time\",\n        validation: {\n          required: \"The value is required.\",\n          invalidInterval:\n            \"End date and time must be after start date and time.\",\n        },\n      },\n    },\n    delete: {\n      ariaLabel: \"Remove condition\",\n      tooltip: \"Remove condition\",\n      dialogTitle: \"Remove condition?\",\n      dialogMessage:\n        \"Are you sure you want to remove the condition? It will be removed permanently.\",\n      dialogConfirm: \"Yes\",\n      dialogCancel: \"No\",\n      dialogCloseTooltip: \"Close\",\n    },\n  },\n  group: {\n    delete: {\n      ariaLabel: \"Remove group\",\n      tooltip: \"Remove group\",\n      dialogTitle: \"Remove group?\",\n      dialogMessage:\n        \"Are you sure you want to remove the group? It will be removed permanently.\",\n      dialogConfirm: \"Yes\",\n      dialogCancel: \"No\",\n      dialogCloseTooltip: \"Close\",\n    },\n    reset: {\n      ariaLabel: \"Change operator\",\n      tooltip: \"Change operator query\",\n      dialogTitle: \"Change conditional operator?\",\n      dialogMessage:\n        \"Do you want to change conditional operator? You won't be able to undo this operation. Conditions and/or groups will be removed.\",\n      dialogConfirm: \"Yes\",\n      dialogCancel: \"No\",\n      dialogCloseTooltip: \"Close\",\n    },\n    addRule: {\n      label: \"Add condition\",\n    },\n    addGroup: {\n      label: \"Add group\",\n    },\n  },\n  empty: {\n    title: \"No conditions created yet\",\n    createCondition: \"Create a condition\",\n    createGroup: \"condition group\",\n    spacer: \" or a \",\n  },\n};\n\nexport interface HvQueryBuilderContextValue {\n  dispatchAction: React.Dispatch<QueryAction>;\n  askAction: React.Dispatch<React.SetStateAction<AskAction | undefined>>;\n  selectLocation?: React.Dispatch<unknown>; // TODO - remove in v6 (not used)\n  attributes?: Record<string, HvQueryBuilderAttribute>;\n  operators: Record<string, HvQueryBuilderQueryOperator[]>;\n  combinators: HvQueryBuilderQueryCombinator[];\n  maxDepth: number;\n  labels: HvQueryBuilderLabels;\n  initialTouched: boolean;\n  readOnly: boolean;\n  disableConfirmation: boolean;\n  renderers?: HvQueryBuilderRenderers;\n  emptyRenderer?: string[];\n}\n\nexport const HvQueryBuilderContext = createContext<HvQueryBuilderContextValue>({\n  dispatchAction: () => ({}),\n  askAction: () => ({}),\n  selectLocation: () => ({}), // TODO - remove in v6 (not used)\n  attributes: {},\n  operators: defaultOperators,\n  combinators: defaultCombinators,\n  maxDepth: 1,\n  labels: defaultLabels,\n  initialTouched: false,\n  disableConfirmation: false,\n  readOnly: false,\n});\n\nexport interface HvQueryBuilderProviderProps {\n  value: HvQueryBuilderContextValue;\n  children: React.ReactNode;\n}\n\nexport const HvQueryBuilderProvider = ({\n  children,\n  value,\n}: HvQueryBuilderProviderProps) => {\n  return (\n    <HvQueryBuilderContext.Provider value={value}>\n      {children}\n    </HvQueryBuilderContext.Provider>\n  );\n};\n\nexport const useQueryBuilderContext = () => {\n  return useContext(HvQueryBuilderContext);\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/QueryBuilder/QueryBuilder.js

@@ -3,17 +3,21 @@ import { useRef, useState, useReducer, useMemo, useEffect } from "react";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { isEqual } from "../utils/helpers.js";
 import { HvQueryBuilderProvider, defaultOperators, defaultCombinators, defaultLabels } from "./Context.js";
-import { emptyGroup, clearNodeIds } from "./utils/index.js";
+import { emptyGroup, setNodeIds, clearNodeIds } from "./utils/index.js";
 import reducer from "./utils/reducer.js";
 import { useClasses } from "./QueryBuilder.styles.js";
 import { staticClasses } from "./QueryBuilder.styles.js";
+import { useControlled } from "../hooks/useControlled.js";
 import { RuleGroup } from "./RuleGroup/RuleGroup.js";
 import { ConfirmationDialog } from "./ConfirmationDialog/ConfirmationDialog.js";
 const HvQueryBuilder = (props) => {
   const {
     attributes,
     renderers,
-    query,
+    query: queryProp,
+    // TODO - remove in v6
+    value,
+    defaultValue,
     onChange,
     disableConfirmation = false,
     operators = defaultOperators,
@@ -28,16 +32,19 @@ const HvQueryBuilder = (props) => {
   const currentAttributes = useRef(
     null
   );
-  const initialQuery = useRef(query ?? emptyGroup());
+  const controlled = useRef(value != null);
+  const initialQuery = useRef(
+    value ?? defaultValue ?? queryProp ?? emptyGroup()
+  );
+  const [query, setQuery] = useControlled(value, initialQuery.current);
+  const prevQuery = useRef(query);
   const [pendingAction, setPendingAction] = useState();
-  const [prevState, setPrevState] = useState(initialQuery.current);
   const [initialState, setInitialState] = useState(true);
   const [state, dispatchAction] = useReducer(
     reducer,
-    // Deep clone is needed to make sure that the "query" prop and "initialQuery" are not mutated
-    structuredClone(initialQuery.current)
+    setNodeIds(structuredClone(initialQuery.current))
   );
-  const value = useMemo(
+  const contextValue = useMemo(
     () => ({
       dispatchAction,
       askAction: setPendingAction,
@@ -74,14 +81,28 @@ const HvQueryBuilder = (props) => {
     }
   }, [attributes]);
   useEffect(() => {
-    if (!isEqual(state, prevState)) {
-      if (initialState) {
-        setInitialState(false);
+    if (!isEqual(prevQuery.current, query)) {
+      dispatchAction({
+        type: "set-query",
+        query: setNodeIds(structuredClone(query), state)
+      });
+      prevQuery.current = query;
+    } else if (!isEqual(
+      clearNodeIds(structuredClone(state)),
+      clearNodeIds(structuredClone(query))
+    )) {
+      setInitialState(false);
+      if (!controlled.current) {
+        onChange?.(
+          clearNodeIds(structuredClone(state), true)
+        );
+      } else {
+        onChange?.(clearNodeIds(structuredClone(state)));
       }
-      onChange?.(clearNodeIds(state));
-      setPrevState(structuredClone(state));
+      prevQuery.current = state;
+      setQuery(state);
     }
-  }, [initialState, onChange, prevState, state]);
+  }, [onChange, query, setQuery, state]);
   const handleConfirm = () => {
     if (pendingAction) {
       setPendingAction(void 0);
@@ -91,7 +112,7 @@ const HvQueryBuilder = (props) => {
   const handleCancel = () => {
     setPendingAction(void 0);
   };
-  return /* @__PURE__ */ jsxs(HvQueryBuilderProvider, { value, children: [
+  return /* @__PURE__ */ jsxs(HvQueryBuilderProvider, { value: contextValue, children: [
     /* @__PURE__ */ jsx(
       RuleGroup,
       {
@@ -108,11 +129,11 @@ const HvQueryBuilder = (props) => {
         isOpen: pendingAction != null,
         onConfirm: handleConfirm,
         onCancel: handleCancel,
-        title: pendingAction?.dialog.dialogTitle || "",
-        message: pendingAction?.dialog.dialogMessage || "",
-        confirmButtonLabel: pendingAction?.dialog.dialogConfirm || "",
-        cancelButtonLabel: pendingAction?.dialog.dialogCancel || "",
-        closeButtonTooltip: pendingAction?.dialog.dialogCloseTooltip || ""
+        title: pendingAction?.dialog.dialogTitle,
+        message: pendingAction?.dialog.dialogMessage,
+        confirmButtonLabel: pendingAction?.dialog.dialogConfirm,
+        cancelButtonLabel: pendingAction?.dialog.dialogCancel,
+        closeButtonTooltip: pendingAction?.dialog.dialogCloseTooltip
       }
     )
   ] });

package/dist/esm/QueryBuilder/QueryBuilder.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.js","sources":["../../../src/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import { useEffect, useMemo, useReducer, useRef, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isEqual } from \"../utils/helpers\";\n\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\nimport {\n  HvQueryBuilderProvider,\n  defaultCombinators,\n  defaultLabels,\n  defaultOperators,\n} from \"./Context\";\nimport { RuleGroup } from \"./RuleGroup\";\nimport {\n  AskAction,\n  HvQueryBuilderAttribute,\n  HvQueryBuilderQuery,\n  HvQueryBuilderLabels,\n  HvQueryBuilderQueryCombinator,\n  HvQueryBuilderQueryOperator,\n  HvQueryBuilderChangedQuery,\n  HvQueryBuilderRenderers,\n  defaultRendererKey,\n} from \"./types\";\nimport { clearNodeIds, emptyGroup } from \"./utils\";\nimport reducer from \"./utils/reducer\";\nimport { useClasses, staticClasses } from \"./QueryBuilder.styles\";\n\nexport { staticClasses as queryBuilderClasses };\n\nexport type HvQueryBuilderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvQueryBuilderProps {\n  /** The query attribute types. */\n  attributes?: Record<string, HvQueryBuilderAttribute>;\n  /** The query rules operators by attribute type and combinator. */\n  operators?: Record<string, HvQueryBuilderQueryOperator[]>;\n  /** The query combinators operands. */\n  combinators?: HvQueryBuilderQueryCombinator[];\n  /** The initial query representation. */\n  query?: HvQueryBuilderQuery;\n  /** Callback fired when query changes. */\n  onChange?: (value: HvQueryBuilderChangedQuery) => void;\n  /** Max depth of nested query groups. */\n  maxDepth?: number;\n  /** Object containing all the labels. */\n  labels?: HvQueryBuilderLabels;\n  /** Whether the query builder is in read-only mode. */\n  readOnly?: boolean;\n  /**\n   * Operators that should use the empty value renderer when selected.\n   *\n   * When one of the listed operators is selected, the rule value is reset and an empty component is rendered.\n   * This property takes priority over `renderers`.\n   *\n   * @default [\"Empty\", \"IsNotEmpty\"]\n   * */\n  emptyRenderer?: string[];\n  /** Custom renderers for the rules' value. */\n  renderers?: HvQueryBuilderRenderers;\n  /** Whether to opt-out of the confirmation dialogs shown before removing rules and rule groups. @default false. */\n  disableConfirmation?: boolean;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvQueryBuilderClasses;\n}\n\n// TODO - v6\n// - uncontrolled vs controlled: users should be able to control the state\n// - \"query\" renamed to \"initialQuery\" and \"query\" used to control the state\n// - \"query\" provided with ids by the user but removed through \"onChange\"\n// - \"range\", \"Empty\", and \"IsNotEmpty\" operators with internal/built-in logic\n\n/**\n * This component allows you to create conditions and group them using logical operators.\n * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.\n *\n * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/widgets-query-builder-usage--docs) to learn more about this component.\n */\nexport const HvQueryBuilder = (props: HvQueryBuilderProps) => {\n  const {\n    attributes,\n    renderers,\n    query,\n    onChange,\n    disableConfirmation = false,\n    operators = defaultOperators,\n    combinators = defaultCombinators,\n    maxDepth = 1,\n    labels = defaultLabels,\n    readOnly = false,\n    emptyRenderer = [\"Empty\", \"IsNotEmpty\"],\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilder\", props);\n\n  if (\n    import.meta.env.DEV &&\n    [\n      Object.values(attributes || {}).map(({ type }) => type),\n      Object.values(operators || {})\n        .map((ops) => ops.map(({ operator }) => operator))\n        .flat(),\n    ]\n      .flat()\n      ?.find((key) => key === defaultRendererKey)\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      `${defaultRendererKey} is a restricted key and shouldn't be used as an attribute or operator type. Update the key to avoid unexpected behaviors.`\n    );\n  }\n\n  const { classes } = useClasses(classesProp);\n\n  const currentAttributes = useRef<HvQueryBuilderProps[\"attributes\"] | null>(\n    null\n  );\n\n  const initialQuery = useRef(query ?? emptyGroup());\n\n  const [pendingAction, setPendingAction] = useState<AskAction>();\n  const [prevState, setPrevState] = useState(initialQuery.current);\n  const [initialState, setInitialState] = useState(true);\n\n  const [state, dispatchAction] = useReducer(\n    reducer,\n    // Deep clone is needed to make sure that the \"query\" prop and \"initialQuery\" are not mutated\n    structuredClone(initialQuery.current)\n  );\n\n  const value = useMemo(\n    () => ({\n      dispatchAction,\n      askAction: setPendingAction,\n      attributes,\n      operators,\n      combinators,\n      maxDepth,\n      labels,\n      initialTouched: initialState,\n      readOnly,\n      renderers,\n      disableConfirmation,\n      emptyRenderer,\n    }),\n    [\n      attributes,\n      operators,\n      combinators,\n      maxDepth,\n      labels,\n      readOnly,\n      initialState,\n      renderers,\n      disableConfirmation,\n      emptyRenderer,\n    ]\n  );\n\n  // Keep track of attributes\n  useEffect(() => {\n    if (currentAttributes.current == null) {\n      // First run, nothing to do\n      currentAttributes.current = attributes;\n    } else if (currentAttributes.current !== attributes) {\n      // Attributes changed. The existing query is almost certainly invalid, so reset it\n      currentAttributes.current = attributes;\n      dispatchAction({ type: \"reset-query\" });\n    }\n  }, [attributes]);\n\n  // Propagate the change if the query is modified\n  useEffect(() => {\n    if (!isEqual(state, prevState)) {\n      if (initialState) {\n        setInitialState(false);\n      }\n\n      onChange?.(clearNodeIds(state) as HvQueryBuilderChangedQuery);\n      setPrevState(structuredClone(state));\n    }\n  }, [initialState, onChange, prevState, state]);\n\n  const handleConfirm = () => {\n    if (pendingAction) {\n      setPendingAction(undefined);\n      pendingAction.actions.forEach((action) => dispatchAction(action));\n    }\n  };\n\n  const handleCancel = () => {\n    setPendingAction(undefined);\n  };\n\n  return (\n    <HvQueryBuilderProvider value={value}>\n      <RuleGroup\n        level={0}\n        id={state.id}\n        combinator={state.combinator}\n        rules={state.rules}\n        classes={classes}\n      />\n      <ConfirmationDialog\n        isOpen={pendingAction != null}\n        onConfirm={handleConfirm}\n        onCancel={handleCancel}\n        title={pendingAction?.dialog.dialogTitle || \"\"}\n        message={pendingAction?.dialog.dialogMessage || \"\"}\n        confirmButtonLabel={pendingAction?.dialog.dialogConfirm || \"\"}\n        cancelButtonLabel={pendingAction?.dialog.dialogCancel || \"\"}\n        closeButtonTooltip={pendingAction?.dialog.dialogCloseTooltip || \"\"}\n      />\n    </HvQueryBuilderProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA+Ea,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,gBAAgB,CAAC,SAAS,YAAY;AAAA,IACtC,SAAS;AAAA,EAAA,IACP,gBAAgB,kBAAkB,KAAK;AAmB3C,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,oBAAoB;AAAA,IACxB;AAAA,EAAA;AAGF,QAAM,eAAe,OAAO,SAAS,WAAY,CAAA;AAEjD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAoB;AAC9D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,aAAa,OAAO;AAC/D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,IAAI;AAE/C,QAAA,CAAC,OAAO,cAAc,IAAI;AAAA,IAC9B;AAAA;AAAA,IAEA,gBAAgB,aAAa,OAAO;AAAA,EAAA;AAGtC,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAIF,YAAU,MAAM;AACV,QAAA,kBAAkB,WAAW,MAAM;AAErC,wBAAkB,UAAU;AAAA,IAAA,WACnB,kBAAkB,YAAY,YAAY;AAEnD,wBAAkB,UAAU;AACb,qBAAA,EAAE,MAAM,cAAA,CAAe;AAAA,IACxC;AAAA,EAAA,GACC,CAAC,UAAU,CAAC;AAGf,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,OAAO,SAAS,GAAG;AAC9B,UAAI,cAAc;AAChB,wBAAgB,KAAK;AAAA,MACvB;AAEW,iBAAA,aAAa,KAAK,CAA+B;AAC/C,mBAAA,gBAAgB,KAAK,CAAC;AAAA,IACrC;AAAA,KACC,CAAC,cAAc,UAAU,WAAW,KAAK,CAAC;AAE7C,QAAM,gBAAgB,MAAM;AAC1B,QAAI,eAAe;AACjB,uBAAiB,MAAS;AAC1B,oBAAc,QAAQ,QAAQ,CAAC,WAAW,eAAe,MAAM,CAAC;AAAA,IAClE;AAAA,EAAA;AAGF,QAAM,eAAe,MAAM;AACzB,qBAAiB,MAAS;AAAA,EAAA;AAI1B,SAAC,qBAAA,0BAAuB,OACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,IAAI,MAAM;AAAA,QACV,YAAY,MAAM;AAAA,QAClB,OAAO,MAAM;AAAA,QACb;AAAA,MAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ,iBAAiB;AAAA,QACzB,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO,eAAe,OAAO,eAAe;AAAA,QAC5C,SAAS,eAAe,OAAO,iBAAiB;AAAA,QAChD,oBAAoB,eAAe,OAAO,iBAAiB;AAAA,QAC3D,mBAAmB,eAAe,OAAO,gBAAgB;AAAA,QACzD,oBAAoB,eAAe,OAAO,sBAAsB;AAAA,MAAA;AAAA,IAClE;AAAA,KACF;AAEJ;"}
+{"version":3,"file":"QueryBuilder.js","sources":["../../../src/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import { useEffect, useMemo, useReducer, useRef, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isEqual } from \"../utils/helpers\";\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\nimport {\n  HvQueryBuilderProvider,\n  defaultCombinators,\n  defaultLabels,\n  defaultOperators,\n} from \"./Context\";\nimport { RuleGroup } from \"./RuleGroup\";\nimport {\n  AskAction,\n  HvQueryBuilderAttribute,\n  HvQueryBuilderQuery,\n  HvQueryBuilderLabels,\n  HvQueryBuilderQueryCombinator,\n  HvQueryBuilderQueryOperator,\n  HvQueryBuilderRenderers,\n  defaultRendererKey,\n} from \"./types\";\nimport { clearNodeIds, emptyGroup, setNodeIds } from \"./utils\";\nimport reducer from \"./utils/reducer\";\nimport { useClasses, staticClasses } from \"./QueryBuilder.styles\";\nimport { useControlled } from \"../hooks/useControlled\";\n\nexport { staticClasses as queryBuilderClasses };\n\nexport type HvQueryBuilderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvQueryBuilderProps {\n  /** The query attribute types. */\n  attributes?: Record<string, HvQueryBuilderAttribute>;\n  /** The query rules operators by attribute type and combinator. */\n  operators?: Record<string, HvQueryBuilderQueryOperator[]>;\n  /** The query combinators operands. */\n  combinators?: HvQueryBuilderQueryCombinator[];\n  /** The query when the component is controlled. */\n  value?: HvQueryBuilderQuery;\n  /** The initial query when the component is uncontrolled. */\n  defaultValue?: HvQueryBuilderQuery;\n  /**\n   * The initial query when the component is uncontrolled.\n   *\n   * @deprecated Use `defaultValue` instead.\n   * */\n  query?: HvQueryBuilderQuery; // TODO - remove in v6\n  /** Callback fired when the query changes. */\n  onChange?: (value: HvQueryBuilderQuery) => void;\n  /** Max depth of nested query groups. */\n  maxDepth?: number;\n  /** Object containing all the labels. */\n  labels?: HvQueryBuilderLabels;\n  /** Whether the query builder is in read-only mode. */\n  readOnly?: boolean;\n  /**\n   * Operators that should use the empty value renderer when selected.\n   *\n   * When one of the listed operators is selected, the rule value is reset and an empty component is rendered.\n   * This property takes priority over `renderers`.\n   *\n   * @default [\"Empty\", \"IsNotEmpty\"]\n   * */\n  emptyRenderer?: string[];\n  /** Custom renderers for the rules' value. */\n  renderers?: HvQueryBuilderRenderers;\n  /** Whether to opt-out of the confirmation dialogs shown before removing rules and rule groups. @default false. */\n  disableConfirmation?: boolean;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvQueryBuilderClasses;\n}\n\n// TODO - v6\n// - \"range\", \"Empty\", and \"IsNotEmpty\" operators with internal/built-in logic\n\n// Notes:\n// Deep clone is needed throughout the component to avoid undesired mutations in props, state, and ref values\n\n/**\n * This component allows you to create conditions and group them using logical operators.\n * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.\n *\n * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/widgets-query-builder-usage--docs) to learn more about this component.\n */\nexport const HvQueryBuilder = (props: HvQueryBuilderProps) => {\n  const {\n    attributes,\n    renderers,\n    query: queryProp, // TODO - remove in v6\n    value,\n    defaultValue,\n    onChange,\n    disableConfirmation = false,\n    operators = defaultOperators,\n    combinators = defaultCombinators,\n    maxDepth = 1,\n    labels = defaultLabels,\n    readOnly = false,\n    emptyRenderer = [\"Empty\", \"IsNotEmpty\"],\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilder\", props);\n\n  if (\n    import.meta.env.DEV &&\n    [\n      Object.values(attributes || {}).map(({ type }) => type),\n      Object.values(operators || {})\n        .map((ops) => ops.map(({ operator }) => operator))\n        .flat(),\n    ]\n      .flat()\n      ?.find((key) => key === defaultRendererKey)\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      `${defaultRendererKey} is a restricted key and shouldn't be used as an attribute or operator type. Update the key to avoid unexpected behaviors.`\n    );\n  }\n\n  const { classes } = useClasses(classesProp);\n\n  const currentAttributes = useRef<HvQueryBuilderProps[\"attributes\"] | null>(\n    null\n  );\n\n  const controlled = useRef(value != null);\n  const initialQuery = useRef(\n    value ?? defaultValue ?? queryProp ?? emptyGroup()\n  );\n  const [query, setQuery] = useControlled(value, initialQuery.current);\n  const prevQuery = useRef(query);\n\n  const [pendingAction, setPendingAction] = useState<AskAction>();\n  const [initialState, setInitialState] = useState(true);\n\n  const [state, dispatchAction] = useReducer(\n    reducer,\n    setNodeIds(structuredClone(initialQuery.current))\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      dispatchAction,\n      askAction: setPendingAction,\n      attributes,\n      operators,\n      combinators,\n      maxDepth,\n      labels,\n      initialTouched: initialState,\n      readOnly,\n      renderers,\n      disableConfirmation,\n      emptyRenderer,\n    }),\n    [\n      attributes,\n      operators,\n      combinators,\n      maxDepth,\n      labels,\n      readOnly,\n      initialState,\n      renderers,\n      disableConfirmation,\n      emptyRenderer,\n    ]\n  );\n\n  // Keep track of attributes\n  useEffect(() => {\n    if (currentAttributes.current == null) {\n      // First run, nothing to do\n      currentAttributes.current = attributes;\n    } else if (currentAttributes.current !== attributes) {\n      // Attributes changed. The existing query is almost certainly invalid, so reset it\n      currentAttributes.current = attributes;\n      dispatchAction({ type: \"reset-query\" });\n    }\n  }, [attributes]);\n\n  useEffect(() => {\n    // \"value\" prop was updated by user (when controlled)\n    if (!isEqual(prevQuery.current, query)) {\n      dispatchAction({\n        type: \"set-query\",\n        query: setNodeIds(structuredClone(query), state),\n      });\n      prevQuery.current = query;\n    } else if (\n      !isEqual(\n        clearNodeIds(structuredClone(state)),\n        clearNodeIds(structuredClone(query))\n      )\n    ) {\n      setInitialState(false);\n\n      // TODO - remove \"true\" from clearNodeIds in v6 (only keep else statement)\n      // To avoid breaking changes, clearNodeIds will delete all ids provided by the user when uncontrolled\n      // In the future if the user provides ids, it doesn't make sense to remove them with onChange\n      if (!controlled.current) {\n        onChange?.(\n          clearNodeIds(structuredClone(state), true) as HvQueryBuilderQuery\n        );\n      } else {\n        // When controlled, the ids provided by the user are not removed. Only the auto generated ones.\n        onChange?.(clearNodeIds(structuredClone(state)) as HvQueryBuilderQuery);\n      }\n\n      prevQuery.current = state;\n      // This will only run if uncontrolled\n      setQuery(state);\n    }\n  }, [onChange, query, setQuery, state]);\n\n  const handleConfirm = () => {\n    if (pendingAction) {\n      setPendingAction(undefined);\n      pendingAction.actions.forEach((action) => dispatchAction(action));\n    }\n  };\n\n  const handleCancel = () => {\n    setPendingAction(undefined);\n  };\n\n  return (\n    <HvQueryBuilderProvider value={contextValue}>\n      <RuleGroup\n        level={0}\n        id={state.id}\n        combinator={state.combinator}\n        rules={state.rules}\n        classes={classes}\n      />\n      <ConfirmationDialog\n        isOpen={pendingAction != null}\n        onConfirm={handleConfirm}\n        onCancel={handleCancel}\n        title={pendingAction?.dialog.dialogTitle}\n        message={pendingAction?.dialog.dialogMessage}\n        confirmButtonLabel={pendingAction?.dialog.dialogConfirm}\n        cancelButtonLabel={pendingAction?.dialog.dialogCancel}\n        closeButtonTooltip={pendingAction?.dialog.dialogCloseTooltip}\n      />\n    </HvQueryBuilderProvider>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/QueryBuilder/RuleGroup/RuleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuleGroup.js","sources":["../../../../src/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { HvEmptyState } from \"../../EmptyState\";\nimport { HvMultiButton } from \"../../MultiButton\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { Rule } from \"../Rule\";\nimport { useQueryBuilderContext } from \"../Context\";\nimport { useClasses } from \"../QueryBuilder.styles\";\nimport { HvQueryBuilderQuery, HvQueryBuilderQueryCombinator } from \"../types\";\nimport { HvIconButton } from \"../../IconButton\";\n\nexport interface RuleGroupProps {\n  id: React.Key;\n  level?: number;\n  combinator?: string;\n  rules?: HvQueryBuilderQuery[\"rules\"];\n  classes?: ExtractNames<typeof useClasses>;\n}\n\nexport const RuleGroup = ({\n  level = 0,\n  id,\n  combinator = \"and\",\n  rules = [],\n  classes: classesProp,\n}: RuleGroupProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    dispatchAction,\n    askAction,\n    maxDepth,\n    combinators,\n    labels,\n    readOnly,\n    disableConfirmation,\n  } = useQueryBuilderContext();\n\n  const normalizedMaxDepth = maxDepth - 1;\n\n  const actionButtons = (\n    <>\n      <div className={classes.buttonBackground}>\n        <HvButton\n          variant=\"secondarySubtle\"\n          onClick={() => {\n            dispatchAction({ type: \"add-rule\", id });\n          }}\n          disabled={readOnly}\n          startIcon={<Add />}\n        >\n          {level === 0 && labels.query?.addRule?.label != null\n            ? labels.query?.addRule?.label\n            : labels.group.addRule.label}\n        </HvButton>\n      </div>\n      {level <= normalizedMaxDepth && (\n        <div className={classes.buttonBackground}>\n          <HvButton\n            variant=\"secondarySubtle\"\n            onClick={() => {\n              dispatchAction({ type: \"add-group\", id });\n            }}\n            disabled={readOnly}\n            startIcon={<Add />}\n          >\n            {level === 0 && labels.query?.addGroup?.label != null\n              ? labels.query?.addGroup?.label\n              : labels.group.addGroup.label}\n          </HvButton>\n        </div>\n      )}\n    </>\n  );\n\n  const onClickCombinator = useCallback(\n    (item: HvQueryBuilderQueryCombinator) => {\n      dispatchAction({\n        type: \"set-combinator\",\n        id,\n        combinator: item.operand,\n      });\n    },\n    [dispatchAction, id]\n  );\n\n  return (\n    <div\n      className={cx(classes.root, {\n        [classes.topGroup]: level === 0,\n        [classes.subGroup]: level > 0,\n      })}\n    >\n      <HvMultiButton\n        className={cx(classes.combinator, classes.topCombinator)}\n        disabled={readOnly}\n        aria-disabled={readOnly}\n      >\n        {combinators?.map((item) => (\n          <HvButton\n            key={item.operand}\n            className={classes.combinatorButton}\n            selected={item.operand === combinator}\n            onClick={() => item.operand && onClickCombinator(item)}\n            disabled={readOnly}\n            size=\"xs\"\n          >\n            {item.label}\n          </HvButton>\n        ))}\n      </HvMultiButton>\n      <div className={cx(classes.buttonBackground, classes.topRemoveButton)}>\n        <HvIconButton\n          className={classes.removeButton}\n          onClick={() =>\n            disableConfirmation\n              ? dispatchAction({ type: \"remove-node\", id })\n              : askAction({\n                  actions: [{ type: \"remove-node\", id }],\n                  dialog:\n                    level === 0 && labels.query?.delete != null\n                      ? labels.query.delete\n                      : labels.group.delete,\n                })\n          }\n          title={\n            (level === 0 && labels.query?.delete?.tooltip) ||\n            labels.group.delete.tooltip ||\n            (level === 0 && labels.query?.delete?.ariaLabel) ||\n            labels.group.delete.ariaLabel\n          }\n          disabled={readOnly}\n        >\n          <Delete\n            role=\"none\"\n            className={cx({ [classes.topRemoveButtonDisabled]: readOnly })}\n          />\n        </HvIconButton>\n      </div>\n      {rules?.length > 0 && (\n        <div\n          className={cx(classes.rulesContainer, {\n            [classes.subRulesContainer]: level > 0,\n            [classes.topRulesContainer]: level === 0,\n          })}\n        >\n          {rules.map((rule, index) => {\n            if (\"combinator\" in rule) {\n              return (\n                <RuleGroup\n                  key={rule.id}\n                  level={level + 1}\n                  {...rule}\n                  id={rule.id}\n                  classes={classes}\n                />\n              );\n            }\n\n            const isInvalid =\n              combinator === \"and\" &&\n              rules.some((r, i) => {\n                if (\"attribute\" in r) {\n                  if (\n                    r.attribute === rule.attribute &&\n                    r.id !== rule.id &&\n                    i < index\n                  ) {\n                    return true;\n                  }\n                }\n                return false;\n              });\n\n            return (\n              <Rule\n                key={rule.id}\n                {...rule}\n                isInvalid={isInvalid}\n                id={rule.id}\n                combinator={combinator}\n              />\n            );\n          })}\n        </div>\n      )}\n      {rules?.length === 0 && (\n        <HvEmptyState\n          title={labels.empty?.title}\n          message={\n            <>\n              <HvTypography\n                link\n                component=\"button\"\n                onClick={() => {\n                  dispatchAction({ type: \"add-rule\", id });\n                }}\n                className={classes.createConditionButton}\n                disabled={readOnly}\n                aria-disabled={readOnly}\n              >\n                {`${labels.empty?.createCondition}`}\n              </HvTypography>\n              {level <= normalizedMaxDepth && (\n                <>\n                  {`${labels.empty?.spacer}`}\n                  <HvTypography\n                    link\n                    component=\"button\"\n                    onClick={() => {\n                      dispatchAction({ type: \"add-group\", id });\n                    }}\n                    className={classes.createGroupButton}\n                    disabled={readOnly}\n                    aria-disabled={readOnly}\n                  >\n                    {`${labels.empty?.createGroup}`}\n                  </HvTypography>\n                </>\n              )}\n            </>\n          }\n          icon={<Info />}\n        />\n      )}\n      <div\n        className={cx(\n          classes.actionButtonContainer,\n          classes.topActionButtonContainer\n        )}\n      >\n        {actionButtons}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RuleGroup.js","sources":["../../../../src/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { HvEmptyState } from \"../../EmptyState\";\nimport { HvMultiButton } from \"../../MultiButton\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { Rule } from \"../Rule\";\nimport { useQueryBuilderContext } from \"../Context\";\nimport { useClasses } from \"../QueryBuilder.styles\";\nimport { HvQueryBuilderQueryCombinator, Query } from \"../types\";\nimport { HvIconButton } from \"../../IconButton\";\n\nexport interface RuleGroupProps {\n  id: React.Key;\n  level?: number;\n  combinator?: string;\n  rules?: Query[\"rules\"];\n  classes?: ExtractNames<typeof useClasses>;\n}\n\nexport const RuleGroup = ({\n  level = 0,\n  id,\n  combinator = \"and\",\n  rules = [],\n  classes: classesProp,\n}: RuleGroupProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    dispatchAction,\n    askAction,\n    maxDepth,\n    combinators,\n    labels,\n    readOnly,\n    disableConfirmation,\n  } = useQueryBuilderContext();\n\n  const normalizedMaxDepth = maxDepth - 1;\n\n  const actionButtons = (\n    <>\n      <div className={classes.buttonBackground}>\n        <HvButton\n          variant=\"secondarySubtle\"\n          onClick={() => {\n            dispatchAction({ type: \"add-rule\", id });\n          }}\n          disabled={readOnly}\n          startIcon={<Add />}\n        >\n          {level === 0 && labels.query?.addRule?.label != null\n            ? labels.query?.addRule?.label\n            : labels.group.addRule.label}\n        </HvButton>\n      </div>\n      {level <= normalizedMaxDepth && (\n        <div className={classes.buttonBackground}>\n          <HvButton\n            variant=\"secondarySubtle\"\n            onClick={() => {\n              dispatchAction({ type: \"add-group\", id });\n            }}\n            disabled={readOnly}\n            startIcon={<Add />}\n          >\n            {level === 0 && labels.query?.addGroup?.label != null\n              ? labels.query?.addGroup?.label\n              : labels.group.addGroup.label}\n          </HvButton>\n        </div>\n      )}\n    </>\n  );\n\n  const onClickCombinator = useCallback(\n    (item: HvQueryBuilderQueryCombinator) => {\n      dispatchAction({\n        type: \"set-combinator\",\n        id,\n        combinator: item.operand,\n      });\n    },\n    [dispatchAction, id]\n  );\n\n  return (\n    <div\n      className={cx(classes.root, {\n        [classes.topGroup]: level === 0,\n        [classes.subGroup]: level > 0,\n      })}\n    >\n      <HvMultiButton\n        className={cx(classes.combinator, classes.topCombinator)}\n        disabled={readOnly}\n        aria-disabled={readOnly}\n      >\n        {combinators?.map((item) => (\n          <HvButton\n            key={item.operand}\n            className={classes.combinatorButton}\n            selected={item.operand === combinator}\n            onClick={() => item.operand && onClickCombinator(item)}\n            disabled={readOnly}\n            size=\"xs\"\n          >\n            {item.label}\n          </HvButton>\n        ))}\n      </HvMultiButton>\n      <div className={cx(classes.buttonBackground, classes.topRemoveButton)}>\n        <HvIconButton\n          className={classes.removeButton}\n          onClick={() =>\n            disableConfirmation\n              ? dispatchAction({ type: \"remove-node\", id })\n              : askAction({\n                  actions: [{ type: \"remove-node\", id }],\n                  dialog:\n                    level === 0 && labels.query?.delete != null\n                      ? labels.query.delete\n                      : labels.group.delete,\n                })\n          }\n          title={\n            (level === 0 && labels.query?.delete?.tooltip) ||\n            labels.group.delete.tooltip ||\n            (level === 0 && labels.query?.delete?.ariaLabel) ||\n            labels.group.delete.ariaLabel\n          }\n          disabled={readOnly}\n        >\n          <Delete\n            role=\"none\"\n            className={cx({ [classes.topRemoveButtonDisabled]: readOnly })}\n          />\n        </HvIconButton>\n      </div>\n      {rules?.length > 0 && (\n        <div\n          className={cx(classes.rulesContainer, {\n            [classes.subRulesContainer]: level > 0,\n            [classes.topRulesContainer]: level === 0,\n          })}\n        >\n          {rules.map((rule, index) => {\n            if (\"combinator\" in rule) {\n              return (\n                <RuleGroup\n                  key={rule.id}\n                  level={level + 1}\n                  {...rule}\n                  id={rule.id}\n                  classes={classes}\n                />\n              );\n            }\n\n            const isInvalid =\n              combinator === \"and\" &&\n              rules.some((r, i) => {\n                if (\"attribute\" in r) {\n                  if (\n                    r.attribute === rule.attribute &&\n                    r.id !== rule.id &&\n                    i < index\n                  ) {\n                    return true;\n                  }\n                }\n                return false;\n              });\n\n            return (\n              <Rule\n                key={rule.id}\n                {...rule}\n                isInvalid={isInvalid}\n                id={rule.id}\n                combinator={combinator}\n              />\n            );\n          })}\n        </div>\n      )}\n      {rules?.length === 0 && (\n        <HvEmptyState\n          title={labels.empty?.title}\n          message={\n            <>\n              <HvTypography\n                link\n                component=\"button\"\n                onClick={() => {\n                  dispatchAction({ type: \"add-rule\", id });\n                }}\n                className={classes.createConditionButton}\n                disabled={readOnly}\n                aria-disabled={readOnly}\n              >\n                {`${labels.empty?.createCondition}`}\n              </HvTypography>\n              {level <= normalizedMaxDepth && (\n                <>\n                  {`${labels.empty?.spacer}`}\n                  <HvTypography\n                    link\n                    component=\"button\"\n                    onClick={() => {\n                      dispatchAction({ type: \"add-group\", id });\n                    }}\n                    className={classes.createGroupButton}\n                    disabled={readOnly}\n                    aria-disabled={readOnly}\n                  >\n                    {`${labels.empty?.createGroup}`}\n                  </HvTypography>\n                </>\n              )}\n            </>\n          }\n          icon={<Info />}\n        />\n      )}\n      <div\n        className={cx(\n          classes.actionButtonContainer,\n          classes.topActionButtonContainer\n        )}\n      >\n        {actionButtons}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/QueryBuilder/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/QueryBuilder/types.ts"],"sourcesContent":["export const defaultRendererKey = \"DEFAULT\";\n\nconst defaultAttributes = [\n  \"boolean\",\n  \"numeric\",\n  \"dateandtime\",\n  \"text\",\n  \"textarea\",\n] as const;\ntype DefaultAttributes = (typeof defaultAttributes)[number];\n\nexport interface HvQueryBuilderAttribute extends Record<string, unknown> {\n  id?: string;\n  label: string;\n  type: DefaultAttributes | (string & {});\n}\n\nexport interface HvQueryBuilderNumericRange {\n  from: number | string;\n  to: number | string;\n}\n\nexport interface HvQueryBuilderDateTimeStrings {\n  date?: string;\n  time?: string;\n}\n\nexport interface HvQueryBuilderDateTimeRange {\n  start?: HvQueryBuilderDateTimeStrings;\n  end?: HvQueryBuilderDateTimeStrings;\n}\n\nexport type HvQueryBuilderQueryRuleValue =\n  | string\n  | number\n  | boolean\n  | HvQueryBuilderNumericRange\n  | HvQueryBuilderDateTimeStrings\n  | HvQueryBuilderDateTimeRange;\n\nexport interface HvQueryBuilderQueryRule {\n  id: React.Key;\n  attribute?: string;\n  operator?: string;\n  value?: HvQueryBuilderQueryRuleValue;\n}\n\nexport interface HvQueryBuilderQueryGroup {\n  id: React.Key;\n  combinator: string;\n  rules: Array<HvQueryBuilderQueryRule | HvQueryBuilderQueryGroup>;\n}\n\nexport type HvQueryBuilderQuery = HvQueryBuilderQueryGroup;\n\nexport interface HvQueryBuilderChangedQuery\n  extends Omit<HvQueryBuilderQuery, \"id\" | \"rules\"> {\n  rules: Array<\n    Omit<HvQueryBuilderQueryRule, \"id\"> | HvQueryBuilderChangedQuery\n  >;\n}\n\nexport interface HvQueryBuilderQueryCombinator {\n  operand: string;\n  label: string;\n}\n\nexport interface HvQueryBuilderQueryOperator {\n  operator: string;\n  label: string;\n  combinators: string[];\n}\n\ninterface DialogLabels {\n  dialogTitle: string;\n  dialogMessage: string;\n  dialogConfirm: string;\n  dialogCancel: string;\n  dialogCloseTooltip: string;\n}\n\n/** @private label structure action icon buttons */\ninterface ActionIconLabels extends DialogLabels {\n  // TODO: remove in v6 - duplicated labels - `tooltip` *is* the aria-label\n  /** @deprecated use `tooltip` label instead */\n  ariaLabel: string;\n  tooltip?: string;\n}\n\nexport type QueryAction =\n  | {\n      type: \"reset-query\";\n    }\n  | {\n      type: \"reset-group\";\n      id: React.Key;\n    }\n  | {\n      type: \"add-rule\" | \"add-group\" | \"remove-node\";\n      id: React.Key;\n    }\n  | {\n      type: \"set-combinator\";\n      id: React.Key;\n      combinator: string;\n    }\n  | {\n      type: \"set-attribute\";\n      id: React.Key;\n      attribute?: string | null;\n      operator?: string | null;\n      value?: HvQueryBuilderQueryRuleValue | null;\n    }\n  | {\n      type: \"set-operator\";\n      id: React.Key;\n      operator: string | null;\n      value?: HvQueryBuilderQueryRuleValue | null;\n    }\n  | {\n      type: \"set-value\";\n      id: React.Key;\n      value: HvQueryBuilderQueryRuleValue | null | any;\n    };\n\nexport interface AskAction {\n  actions: QueryAction[];\n  dialog: DialogLabels;\n}\n\nexport interface HvQueryBuilderLabels {\n  query?: {\n    delete?: ActionIconLabels;\n    addRule?: {\n      label: string;\n    };\n    addGroup?: {\n      label: string;\n    };\n  };\n  rule: {\n    attribute: {\n      exists: string;\n      label: string;\n      placeholder: string;\n    };\n    operator: {\n      label: string;\n      placeholder: string;\n    };\n    value: {\n      distance: {\n        label: string;\n        placeholder?: string;\n        connectorText: string;\n        button: string;\n        validation: {\n          required: string;\n          invalid: string;\n        };\n      };\n      text: {\n        label: string;\n        placeholder: string;\n        validation: {\n          required: string;\n        };\n      };\n      boolean: {\n        label: string;\n        placeholder: string;\n        options: Record<string, string>;\n      };\n      numeric: {\n        label: string;\n        placeholder: string;\n        validation: {\n          required: string;\n          invalid: string;\n          equal: string;\n          greaterThan: string;\n        };\n        range: {\n          leftLabel: string;\n          rightLabel: string;\n        };\n      };\n      datetime: {\n        dateLabel: string;\n        datePlaceholder: string;\n        timeLabel: string;\n        timePlaceholder: string;\n        startDateLabel: string;\n        startDatePlaceholder: string;\n        startTimeLabel: string;\n        startTimePlaceholder: string;\n        endDateLabel: string;\n        endDatePlaceholder: string;\n        endTimeLabel: string;\n        endTimePlaceholder: string;\n        validation: {\n          required: string;\n          invalidInterval: string;\n        };\n      };\n    };\n    delete: ActionIconLabels;\n  };\n  group: {\n    delete: ActionIconLabels;\n    reset: ActionIconLabels;\n    addRule: {\n      label: string;\n    };\n    addGroup: {\n      label: string;\n    };\n  };\n  empty: {\n    title: string;\n    createCondition: string;\n    createGroup: string;\n    spacer: string;\n  };\n}\n\nexport interface HvQueryBuilderRendererProps<V = any> {\n  id: React.Key;\n  attribute: string;\n  operator?: string;\n  value?: V;\n}\n\nexport type ValueRenderer =\n  | React.FC<HvQueryBuilderRendererProps>\n  | Record<string, React.FC<HvQueryBuilderRendererProps>>;\n\nexport type HvQueryBuilderRenderers = Record<string, ValueRenderer>;\n"],"names":[],"mappings":"AAAO,MAAM,qBAAqB;"}
+{"version":3,"file":"types.js","sources":["../../../src/QueryBuilder/types.ts"],"sourcesContent":["import { HvOptional } from \"../types/generic\";\n\nexport const defaultRendererKey = \"DEFAULT\";\n\nconst defaultAttributes = [\n  \"boolean\",\n  \"numeric\",\n  \"dateandtime\",\n  \"text\",\n  \"textarea\",\n] as const;\ntype DefaultAttributes = (typeof defaultAttributes)[number];\n\nexport interface HvQueryBuilderAttribute extends Record<string, unknown> {\n  id?: string;\n  label: string;\n  type: DefaultAttributes | (string & {});\n}\n\nexport interface HvQueryBuilderNumericRange {\n  from: number | string;\n  to: number | string;\n}\n\nexport interface HvQueryBuilderDateTimeStrings {\n  date?: string;\n  time?: string;\n}\n\nexport interface HvQueryBuilderDateTimeRange {\n  start?: HvQueryBuilderDateTimeStrings;\n  end?: HvQueryBuilderDateTimeStrings;\n}\n\nexport type HvQueryBuilderQueryRuleValue =\n  | string\n  | number\n  | boolean\n  | HvQueryBuilderNumericRange\n  | HvQueryBuilderDateTimeStrings\n  | HvQueryBuilderDateTimeRange;\n\nexport type HvQueryBuilderQueryRule = HvOptional<QueryRule, \"id\">;\n\nexport interface HvQueryBuilderQueryGroup\n  extends Omit<HvOptional<QueryGroup, \"id\">, \"rules\"> {\n  rules: Array<HvQueryBuilderQueryRule | HvQueryBuilderQueryGroup>;\n}\n\nexport type HvQueryBuilderQuery = HvQueryBuilderQueryGroup;\n\nexport interface QueryRule {\n  id: React.Key;\n  attribute?: string;\n  operator?: string;\n  value?: HvQueryBuilderQueryRuleValue;\n}\n\nexport interface QueryGroup {\n  id: React.Key;\n  combinator: string;\n  rules: Array<QueryRule | QueryGroup>;\n}\n\nexport type Query = QueryGroup;\n\n// TODO - remove this type in v6\n/** @deprecated */\nexport interface HvQueryBuilderChangedQuery\n  extends Omit<HvQueryBuilderQuery, \"id\" | \"rules\"> {\n  rules: Array<\n    Omit<HvQueryBuilderQueryRule, \"id\"> | HvQueryBuilderChangedQuery\n  >;\n}\n\nexport interface HvQueryBuilderQueryCombinator {\n  operand: string;\n  label: string;\n}\n\nexport interface HvQueryBuilderQueryOperator {\n  operator: string;\n  label: string;\n  combinators: string[];\n}\n\ninterface DialogLabels {\n  dialogTitle: string;\n  dialogMessage: string;\n  dialogConfirm: string;\n  dialogCancel: string;\n  dialogCloseTooltip: string;\n}\n\n/** @private label structure action icon buttons */\ninterface ActionIconLabels extends DialogLabels {\n  // TODO: remove in v6 - duplicated labels - `tooltip` *is* the aria-label\n  /** @deprecated use `tooltip` label instead */\n  ariaLabel: string;\n  tooltip?: string;\n}\n\nexport type QueryAction =\n  | {\n      type: \"reset-query\";\n    }\n  | {\n      type: \"reset-group\";\n      id: React.Key;\n    }\n  | {\n      type: \"add-rule\" | \"add-group\" | \"remove-node\";\n      id: React.Key;\n    }\n  | {\n      type: \"set-combinator\";\n      id: React.Key;\n      combinator: string;\n    }\n  | {\n      type: \"set-attribute\";\n      id: React.Key;\n      attribute?: string | null;\n      operator?: string | null;\n      value?: HvQueryBuilderQueryRuleValue | null;\n    }\n  | {\n      type: \"set-operator\";\n      id: React.Key;\n      operator: string | null;\n      value?: HvQueryBuilderQueryRuleValue | null;\n    }\n  | {\n      type: \"set-value\";\n      id: React.Key;\n      value: HvQueryBuilderQueryRuleValue | null | any;\n    }\n  | {\n      type: \"set-query\";\n      // Query with ids\n      query: Query;\n    };\n\nexport interface AskAction {\n  actions: QueryAction[];\n  dialog: DialogLabels;\n}\n\nexport interface HvQueryBuilderLabels {\n  query?: {\n    delete?: ActionIconLabels;\n    addRule?: {\n      label: string;\n    };\n    addGroup?: {\n      label: string;\n    };\n  };\n  rule: {\n    attribute: {\n      exists: string;\n      label: string;\n      placeholder: string;\n    };\n    operator: {\n      label: string;\n      placeholder: string;\n    };\n    value: {\n      distance: {\n        label: string;\n        placeholder?: string;\n        connectorText: string;\n        button: string;\n        validation: {\n          required: string;\n          invalid: string;\n        };\n      };\n      text: {\n        label: string;\n        placeholder: string;\n        validation: {\n          required: string;\n        };\n      };\n      boolean: {\n        label: string;\n        placeholder: string;\n        options: Record<string, string>;\n      };\n      numeric: {\n        label: string;\n        placeholder: string;\n        validation: {\n          required: string;\n          invalid: string;\n          equal: string;\n          greaterThan: string;\n        };\n        range: {\n          leftLabel: string;\n          rightLabel: string;\n        };\n      };\n      datetime: {\n        dateLabel: string;\n        datePlaceholder: string;\n        timeLabel: string;\n        timePlaceholder: string;\n        startDateLabel: string;\n        startDatePlaceholder: string;\n        startTimeLabel: string;\n        startTimePlaceholder: string;\n        endDateLabel: string;\n        endDatePlaceholder: string;\n        endTimeLabel: string;\n        endTimePlaceholder: string;\n        validation: {\n          required: string;\n          invalidInterval: string;\n        };\n      };\n    };\n    delete: ActionIconLabels;\n  };\n  group: {\n    delete: ActionIconLabels;\n    reset: ActionIconLabels;\n    addRule: {\n      label: string;\n    };\n    addGroup: {\n      label: string;\n    };\n  };\n  empty: {\n    title: string;\n    createCondition: string;\n    createGroup: string;\n    spacer: string;\n  };\n}\n\nexport interface HvQueryBuilderRendererProps<V = any> {\n  id: React.Key;\n  attribute: string;\n  operator?: string;\n  value?: V;\n}\n\nexport type ValueRenderer =\n  | React.FC<HvQueryBuilderRendererProps>\n  | Record<string, React.FC<HvQueryBuilderRendererProps>>;\n\nexport type HvQueryBuilderRenderers = Record<string, ValueRenderer>;\n"],"names":[],"mappings":"AAEO,MAAM,qBAAqB;"}

package/dist/esm/QueryBuilder/utils/index.js

@@ -1,20 +1,43 @@
+import { isEqual, uniqueId } from "../../utils/helpers.js";
 const isBigList = (values) => values != null && values?.length > 10;
+const ID_PREFIX = "@hv_";
+const createId = () => uniqueId(ID_PREFIX);
 const emptyRule = () => ({
-  id: Math.random()
+  id: createId()
 });
 const emptyGroup = (createEmptyRule = false) => ({
-  id: Math.random(),
+  id: createId(),
   combinator: "and",
   rules: createEmptyRule ? [emptyRule()] : []
 });
-const clearNodeIds = (original) => {
+const clearNodeIds = (original, full = false) => {
   const rule = { ...original };
-  delete rule.id;
+  if (!full && rule.id?.toString().startsWith(ID_PREFIX) || full) {
+    delete rule.id;
+  }
   if ("rules" in rule) {
-    rule.rules = rule.rules.map((r) => clearNodeIds(r));
+    rule.rules = rule.rules.map((r) => clearNodeIds(r, full));
   }
   return rule;
 };
+const isQueryGroup = (value) => "rules" in value;
+const setNodeIds = (query, prevQuery) => {
+  if (!query.id) {
+    query.id = prevQuery && prevQuery?.id && isEqual(
+      clearNodeIds(structuredClone(query)),
+      clearNodeIds(structuredClone(prevQuery))
+    ) ? prevQuery.id : createId();
+  }
+  if (isQueryGroup(query)) {
+    query.rules = query.rules.map(
+      (item, idx) => setNodeIds(
+        item,
+        prevQuery && isQueryGroup(prevQuery) ? prevQuery.rules[idx] : void 0
+      )
+    );
+  }
+  return query;
+};
 const findNodeById = (id, node) => {
   if (node.id === id) {
     return node;
@@ -52,5 +75,6 @@ export {
   emptyRule,
   findNodeById,
   findParentById,
-  isBigList
+  isBigList,
+  setNodeIds
 };

package/dist/esm/QueryBuilder/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/QueryBuilder/utils/index.tsx"],"sourcesContent":["import { HvQueryBuilderQueryGroup, HvQueryBuilderQueryRule } from \"../types\";\n\nexport const isBigList = (values: unknown[]) =>\n  values != null && values?.length > 10;\n\nexport const emptyRule = () => ({\n  id: Math.random(),\n});\n\nexport const emptyGroup = (createEmptyRule = false) => ({\n  id: Math.random(),\n  combinator: \"and\",\n  rules: createEmptyRule ? [emptyRule()] : [],\n});\n\nexport const clearNodeIds = (\n  original: HvQueryBuilderQueryGroup | HvQueryBuilderQueryRule\n) => {\n  const rule = { ...original };\n\n  // @ts-ignore\n  delete rule.id;\n\n  if (\"rules\" in rule) {\n    rule.rules = rule.rules.map((r) => clearNodeIds(r));\n  }\n\n  return rule;\n};\n\nexport const findNodeById = (\n  id: React.Key,\n  node: HvQueryBuilderQueryGroup | HvQueryBuilderQueryRule\n) => {\n  if (node.id === id) {\n    return node;\n  }\n  if (\"rules\" in node) {\n    for (let i = 0; i < node.rules.length; ++i) {\n      const rule = node.rules[i];\n\n      const found = findNodeById(id, rule);\n      if (found) {\n        return found;\n      }\n    }\n  }\n\n  return null;\n};\n\nexport const findParentById = (\n  id: React.Key,\n  node: HvQueryBuilderQueryGroup | HvQueryBuilderQueryRule,\n  parent?: HvQueryBuilderQueryGroup\n) => {\n  if (node.id === id) {\n    return parent ?? null;\n  }\n\n  if (\"rules\" in node) {\n    const group = node;\n\n    for (let i = 0; i < group.rules.length; ++i) {\n      const rule = group.rules[i];\n\n      const found = findParentById(id, rule, group);\n      if (found) {\n        return found;\n      }\n    }\n  }\n\n  return null;\n};\n"],"names":[],"mappings":"AAEO,MAAM,YAAY,CAAC,WACxB,UAAU,QAAQ,QAAQ,SAAS;AAE9B,MAAM,YAAY,OAAO;AAAA,EAC9B,IAAI,KAAK,OAAO;AAClB;AAEa,MAAA,aAAa,CAAC,kBAAkB,WAAW;AAAA,EACtD,IAAI,KAAK,OAAO;AAAA,EAChB,YAAY;AAAA,EACZ,OAAO,kBAAkB,CAAC,UAAU,CAAC,IAAI,CAAC;AAC5C;AAEa,MAAA,eAAe,CAC1B,aACG;AACG,QAAA,OAAO,EAAE,GAAG;AAGlB,SAAO,KAAK;AAEZ,MAAI,WAAW,MAAM;AACd,SAAA,QAAQ,KAAK,MAAM,IAAI,CAAC,MAAM,aAAa,CAAC,CAAC;AAAA,EACpD;AAEO,SAAA;AACT;AAEa,MAAA,eAAe,CAC1B,IACA,SACG;AACC,MAAA,KAAK,OAAO,IAAI;AACX,WAAA;AAAA,EACT;AACA,MAAI,WAAW,MAAM;AACnB,aAAS,IAAI,GAAG,IAAI,KAAK,MAAM,QAAQ,EAAE,GAAG;AACpC,YAAA,OAAO,KAAK,MAAM,CAAC;AAEnB,YAAA,QAAQ,aAAa,IAAI,IAAI;AACnC,UAAI,OAAO;AACF,eAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAEO,SAAA;AACT;AAEO,MAAM,iBAAiB,CAC5B,IACA,MACA,WACG;AACC,MAAA,KAAK,OAAO,IAAI;AAClB,WAAO,UAAU;AAAA,EACnB;AAEA,MAAI,WAAW,MAAM;AACnB,UAAM,QAAQ;AAEd,aAAS,IAAI,GAAG,IAAI,MAAM,MAAM,QAAQ,EAAE,GAAG;AACrC,YAAA,OAAO,MAAM,MAAM,CAAC;AAE1B,YAAM,QAAQ,eAAe,IAAI,MAAM,KAAK;AAC5C,UAAI,OAAO;AACF,eAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAEO,SAAA;AACT;"}
+{"version":3,"file":"index.js","sources":["../../../../src/QueryBuilder/utils/index.tsx"],"sourcesContent":["import { isEqual, uniqueId } from \"../../utils/helpers\";\nimport {\n  HvQueryBuilderQueryGroup,\n  HvQueryBuilderQueryRule,\n  Query,\n} from \"../types\";\n\nexport const isBigList = (values: unknown[]) =>\n  values != null && values?.length > 10;\n\nconst ID_PREFIX = \"@hv_\";\nconst createId = () => uniqueId(ID_PREFIX);\n\nexport const emptyRule = () => ({\n  id: createId(),\n});\n\nexport const emptyGroup = (createEmptyRule = false) => ({\n  id: createId(),\n  combinator: \"and\",\n  rules: createEmptyRule ? [emptyRule()] : [],\n});\n\nexport const clearNodeIds = (\n  original: HvQueryBuilderQueryGroup | HvQueryBuilderQueryRule,\n  full: boolean = false\n) => {\n  const rule = { ...original };\n\n  if ((!full && rule.id?.toString().startsWith(ID_PREFIX)) || full) {\n    delete rule.id;\n  }\n\n  if (\"rules\" in rule) {\n    rule.rules = rule.rules.map((r) => clearNodeIds(r, full));\n  }\n\n  return rule;\n};\n\nconst isQueryGroup = (\n  value: HvQueryBuilderQueryGroup | HvQueryBuilderQueryRule\n): value is HvQueryBuilderQueryGroup => \"rules\" in value;\n\nexport const setNodeIds = (\n  query: HvQueryBuilderQueryGroup | HvQueryBuilderQueryRule,\n  prevQuery?: HvQueryBuilderQueryGroup | HvQueryBuilderQueryRule\n): Query => {\n  // Use already existing autogenerated id when possible\n  if (!query.id) {\n    query.id =\n      prevQuery &&\n      prevQuery?.id &&\n      isEqual(\n        clearNodeIds(structuredClone(query)),\n        clearNodeIds(structuredClone(prevQuery))\n      )\n        ? prevQuery.id\n        : createId();\n  }\n\n  if (isQueryGroup(query)) {\n    query.rules = query.rules.map((item, idx) =>\n      setNodeIds(\n        item,\n        prevQuery && isQueryGroup(prevQuery) ? prevQuery.rules[idx] : undefined\n      )\n    );\n  }\n\n  return query as Query;\n};\n\nexport const findNodeById = (\n  id: React.Key,\n  node: HvQueryBuilderQueryGroup | HvQueryBuilderQueryRule\n) => {\n  if (node.id === id) {\n    return node;\n  }\n  if (\"rules\" in node) {\n    for (let i = 0; i < node.rules.length; ++i) {\n      const rule = node.rules[i];\n\n      const found = findNodeById(id, rule);\n      if (found) {\n        return found;\n      }\n    }\n  }\n\n  return null;\n};\n\nexport const findParentById = (\n  id: React.Key,\n  node: HvQueryBuilderQueryGroup | HvQueryBuilderQueryRule,\n  parent?: HvQueryBuilderQueryGroup\n) => {\n  if (node.id === id) {\n    return parent ?? null;\n  }\n\n  if (\"rules\" in node) {\n    const group = node;\n\n    for (let i = 0; i < group.rules.length; ++i) {\n      const rule = group.rules[i];\n\n      const found = findParentById(id, rule, group);\n      if (found) {\n        return found;\n      }\n    }\n  }\n\n  return null;\n};\n"],"names":[],"mappings":";AAOO,MAAM,YAAY,CAAC,WACxB,UAAU,QAAQ,QAAQ,SAAS;AAErC,MAAM,YAAY;AAClB,MAAM,WAAW,MAAM,SAAS,SAAS;AAElC,MAAM,YAAY,OAAO;AAAA,EAC9B,IAAI,SAAS;AACf;AAEa,MAAA,aAAa,CAAC,kBAAkB,WAAW;AAAA,EACtD,IAAI,SAAS;AAAA,EACb,YAAY;AAAA,EACZ,OAAO,kBAAkB,CAAC,UAAU,CAAC,IAAI,CAAC;AAC5C;AAEO,MAAM,eAAe,CAC1B,UACA,OAAgB,UACb;AACG,QAAA,OAAO,EAAE,GAAG;AAEb,MAAA,CAAC,QAAQ,KAAK,IAAI,WAAW,WAAW,SAAS,KAAM,MAAM;AAChE,WAAO,KAAK;AAAA,EACd;AAEA,MAAI,WAAW,MAAM;AACd,SAAA,QAAQ,KAAK,MAAM,IAAI,CAAC,MAAM,aAAa,GAAG,IAAI,CAAC;AAAA,EAC1D;AAEO,SAAA;AACT;AAEA,MAAM,eAAe,CACnB,UACsC,WAAW;AAEtC,MAAA,aAAa,CACxB,OACA,cACU;AAEN,MAAA,CAAC,MAAM,IAAI;AACP,UAAA,KACJ,aACA,WAAW,MACX;AAAA,MACE,aAAa,gBAAgB,KAAK,CAAC;AAAA,MACnC,aAAa,gBAAgB,SAAS,CAAC;AAAA,IAAA,IAErC,UAAU,KACV;EACR;AAEI,MAAA,aAAa,KAAK,GAAG;AACjB,UAAA,QAAQ,MAAM,MAAM;AAAA,MAAI,CAAC,MAAM,QACnC;AAAA,QACE;AAAA,QACA,aAAa,aAAa,SAAS,IAAI,UAAU,MAAM,GAAG,IAAI;AAAA,MAChE;AAAA,IAAA;AAAA,EAEJ;AAEO,SAAA;AACT;AAEa,MAAA,eAAe,CAC1B,IACA,SACG;AACC,MAAA,KAAK,OAAO,IAAI;AACX,WAAA;AAAA,EACT;AACA,MAAI,WAAW,MAAM;AACnB,aAAS,IAAI,GAAG,IAAI,KAAK,MAAM,QAAQ,EAAE,GAAG;AACpC,YAAA,OAAO,KAAK,MAAM,CAAC;AAEnB,YAAA,QAAQ,aAAa,IAAI,IAAI;AACnC,UAAI,OAAO;AACF,eAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAEO,SAAA;AACT;AAEO,MAAM,iBAAiB,CAC5B,IACA,MACA,WACG;AACC,MAAA,KAAK,OAAO,IAAI;AAClB,WAAO,UAAU;AAAA,EACnB;AAEA,MAAI,WAAW,MAAM;AACnB,UAAM,QAAQ;AAEd,aAAS,IAAI,GAAG,IAAI,MAAM,MAAM,QAAQ,EAAE,GAAG;AACrC,YAAA,OAAO,MAAM,MAAM,CAAC;AAE1B,YAAM,QAAQ,eAAe,IAAI,MAAM,KAAK;AAC5C,UAAI,OAAO;AACF,eAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAEO,SAAA;AACT;"}