@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/QueryBuilder/QueryBuilder.js

@@ -1,145 +1,116 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useState, useReducer, useMemo, useEffect } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
 import { useLabels } from "../hooks/useLabels.js";
 import { isEqual } from "../utils/helpers.js";
 import { ConfirmationDialog } from "./ConfirmationDialog.js";
-import { defaultOperators, defaultCombinators, HvQueryBuilderProvider, defaultLabels } from "./Context.js";
+import { HvQueryBuilderProvider, defaultCombinators, defaultLabels, defaultOperators } from "./Context.js";
 import { useClasses } from "./QueryBuilder.styles.js";
-import { staticClasses } from "./QueryBuilder.styles.js";
+import { clearNodeIds, emptyGroup, setNodeIds } from "./utils/index.js";
 import { RuleGroup } from "./RuleGroup.js";
-import { emptyGroup, setNodeIds, clearNodeIds } from "./utils/index.js";
 import reducer from "./utils/reducer.js";
-const HvQueryBuilder = (props) => {
-  const {
-    attributes,
-    renderers,
-    value,
-    defaultValue,
-    onChange,
-    disableConfirmation = false,
-    allowRepeatedAttributes = false,
-    operators = defaultOperators,
-    combinators = defaultCombinators,
-    maxDepth = 1,
-    labels: labelsProp,
-    readOnly = false,
-    emptyRenderer = ["Empty", "IsNotEmpty"],
-    classes: classesProp
-  } = useDefaultProps("HvQueryBuilder", props);
-  const { classes } = useClasses(classesProp);
-  const currentAttributes = useRef(
-    null
-  );
-  const controlled = useRef(value != null);
-  const initialQuery = useRef(value ?? defaultValue ?? emptyGroup());
-  const [query, setQuery] = useControlled(value, initialQuery.current);
-  const prevQuery = useRef(query);
-  const [pendingAction, setPendingAction] = useState();
-  const [initialState, setInitialState] = useState(true);
-  const [state, dispatchAction] = useReducer(
-    reducer,
-    setNodeIds(structuredClone(initialQuery.current))
-  );
-  const labels = useLabels(defaultLabels, labelsProp);
-  const contextValue = useMemo(
-    () => ({
-      dispatchAction,
-      askAction: setPendingAction,
-      attributes,
-      operators,
-      combinators,
-      maxDepth,
-      labels,
-      initialTouched: initialState,
-      readOnly,
-      renderers,
-      disableConfirmation,
-      allowRepeatedAttributes,
-      emptyRenderer
-    }),
-    [
-      attributes,
-      operators,
-      combinators,
-      maxDepth,
-      labels,
-      readOnly,
-      initialState,
-      renderers,
-      disableConfirmation,
-      emptyRenderer,
-      allowRepeatedAttributes
-    ]
-  );
-  useEffect(() => {
-    if (currentAttributes.current == null) {
-      currentAttributes.current = attributes;
-    } else if (currentAttributes.current !== attributes) {
-      currentAttributes.current = attributes;
-      dispatchAction({ type: "reset-query" });
-    }
-  }, [attributes]);
-  useEffect(() => {
-    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)));
-      }
-      prevQuery.current = state;
-      setQuery(state);
-    }
-  }, [onChange, query, setQuery, state]);
-  const handleConfirm = () => {
-    if (pendingAction) {
-      setPendingAction(void 0);
-      pendingAction.actions.forEach((action) => dispatchAction(action));
-    }
-  };
-  const handleCancel = () => {
-    setPendingAction(void 0);
-  };
-  return /* @__PURE__ */ jsxs(HvQueryBuilderProvider, { value: contextValue, children: [
-    /* @__PURE__ */ jsx(
-      RuleGroup,
-      {
-        level: 0,
-        id: state.id,
-        combinator: state.combinator,
-        rules: state.rules,
-        classes
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ConfirmationDialog,
-      {
-        open: pendingAction != null,
-        onConfirm: handleConfirm,
-        onCancel: handleCancel,
-        title: pendingAction?.dialog.dialogTitle,
-        message: pendingAction?.dialog.dialogMessage,
-        confirmButtonLabel: pendingAction?.dialog.dialogConfirm,
-        cancelButtonLabel: pendingAction?.dialog.dialogCancel,
-        buttonTitle: pendingAction?.dialog.dialogCloseTooltip
-      }
-    )
-  ] });
-};
-export {
-  HvQueryBuilder,
-  staticClasses as queryBuilderClasses
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/QueryBuilder/QueryBuilder.tsx
+/**
+* This component allows you to create conditions and group them using logical operators.
+* It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.
+*
+* Take a look at the [usage page](https://pentaho.github.io/uikit-docs/master/components/query-builder) to learn more about this component.
+*/
+var HvQueryBuilder = (props) => {
+	const { attributes, renderers, value, defaultValue, onChange, disableConfirmation = false, allowRepeatedAttributes = false, operators = defaultOperators, combinators = defaultCombinators, maxDepth = 1, labels: labelsProp, readOnly = false, emptyRenderer = ["Empty", "IsNotEmpty"], classes: classesProp } = useDefaultProps("HvQueryBuilder", props);
+	const { classes } = useClasses(classesProp);
+	const currentAttributes = useRef(null);
+	const controlled = useRef(value != null);
+	const initialQuery = useRef(value ?? defaultValue ?? emptyGroup());
+	const [query, setQuery] = useControlled(value, initialQuery.current);
+	const prevQuery = useRef(query);
+	const [pendingAction, setPendingAction] = useState();
+	const [initialState, setInitialState] = useState(true);
+	const [state, dispatchAction] = useReducer(reducer, setNodeIds(structuredClone(initialQuery.current)));
+	const labels = useLabels(defaultLabels, labelsProp);
+	const contextValue = useMemo(() => ({
+		dispatchAction,
+		askAction: setPendingAction,
+		attributes,
+		operators,
+		combinators,
+		maxDepth,
+		labels,
+		initialTouched: initialState,
+		readOnly,
+		renderers,
+		disableConfirmation,
+		allowRepeatedAttributes,
+		emptyRenderer
+	}), [
+		attributes,
+		operators,
+		combinators,
+		maxDepth,
+		labels,
+		readOnly,
+		initialState,
+		renderers,
+		disableConfirmation,
+		emptyRenderer,
+		allowRepeatedAttributes
+	]);
+	useEffect(() => {
+		if (currentAttributes.current == null) currentAttributes.current = attributes;
+		else if (currentAttributes.current !== attributes) {
+			currentAttributes.current = attributes;
+			dispatchAction({ type: "reset-query" });
+		}
+	}, [attributes]);
+	useEffect(() => {
+		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)));
+			prevQuery.current = state;
+			setQuery(state);
+		}
+	}, [
+		onChange,
+		query,
+		setQuery,
+		state
+	]);
+	const handleConfirm = () => {
+		if (pendingAction) {
+			setPendingAction(void 0);
+			pendingAction.actions.forEach((action) => dispatchAction(action));
+		}
+	};
+	const handleCancel = () => {
+		setPendingAction(void 0);
+	};
+	return /* @__PURE__ */ jsxs(HvQueryBuilderProvider, {
+		value: contextValue,
+		children: [/* @__PURE__ */ jsx(RuleGroup, {
+			level: 0,
+			id: state.id,
+			combinator: state.combinator,
+			rules: state.rules,
+			classes
+		}), /* @__PURE__ */ jsx(ConfirmationDialog, {
+			open: pendingAction != null,
+			onConfirm: handleConfirm,
+			onCancel: handleCancel,
+			title: pendingAction?.dialog.dialogTitle,
+			message: pendingAction?.dialog.dialogMessage,
+			confirmButtonLabel: pendingAction?.dialog.dialogConfirm,
+			cancelButtonLabel: pendingAction?.dialog.dialogCancel,
+			buttonTitle: pendingAction?.dialog.dialogCloseTooltip
+		})]
+	});
 };
+//#endregion
+export { HvQueryBuilder };

package/dist/QueryBuilder/QueryBuilder.styles.js

@@ -1,110 +1,119 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { useClasses, staticClasses } = createClasses("HvQueryBuilder", {
-  /** Styles applied to the component root class. */
-  root: {
-    position: "relative",
-    padding: theme.space.sm,
-    marginTop: 12,
-    marginBottom: 32,
-    border: `1px solid ${theme.colors.border}`
-  },
-  /** Styles applied to the top group container. */
-  topGroup: {
-    margin: theme.space.sm,
-    backgroundColor: "transparent",
-    maxWidth: "100%",
-    paddingBottom: theme.space.lg
-  },
-  /** Styles applied to the sub group containers. */
-  subGroup: {
-    margin: "40px 14px 32px 20px",
-    minHeight: 120,
-    paddingBottom: theme.space.md,
-    "&::before": {
-      content: '""',
-      position: "absolute",
-      zIndex: 2,
-      width: 21,
-      height: 36,
-      borderBottom: `1px solid ${theme.colors.border}`,
-      borderLeft: `1px solid ${theme.colors.border}`,
-      top: -38,
-      left: -38
-    },
-    ":not($topRulesContainer)>&:last-child::after": {
-      content: '""',
-      position: "absolute",
-      zIndex: 1,
-      width: 32,
-      height: "100%",
-      borderLeft: `1px solid ${theme.colors.border}`,
-      top: 0,
-      left: `calc(${theme.space.sm} + 2)`
-    }
-  },
-  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */
-  combinator: { minWidth: 80 },
-  /** Styles applied to the multi-button combinator container on the top group. */
-  topCombinator: {
-    position: "absolute",
-    top: `calc(-1 * ${theme.space.sm})`,
-    left: `calc(-1 * ${theme.space.sm})`
-  },
-  /** Styles applied to each combinator button. */
-  combinatorButton: {},
-  /** Styles applied to the remove button.  */
-  removeButton: {},
-  /** Styles applied to the remove button on the top group. */
-  topRemoveButton: { position: "absolute", top: -16, right: -16 },
-  /** Styles applied to the remove button when disabled on the top group. */
-  topRemoveButtonDisabled: { backgroundColor: theme.colors.bgPage },
-  /** Styles applied to the rules container. */
-  rulesContainer: {},
-  /** Styles applied to the sub rules container. */
-  subRulesContainer: {
-    borderLeft: `1px solid ${theme.colors.border}`,
-    marginLeft: theme.space.sm,
-    marginBottom: theme.space.md,
-    paddingLeft: theme.space.sm,
-    paddingTop: 7,
-    position: "relative",
-    left: -33,
-    width: "100%"
-  },
-  /** Styles applied to the action button container. */
-  actionButtonContainer: {
-    marginLeft: "auto",
-    display: "flex",
-    gap: theme.space.sm
-  },
-  /** Styles applied to the top action button container. */
-  topActionButtonContainer: {
-    position: "absolute",
-    bottom: `calc(-1 * ${theme.space.md} * 0.5 - 3px)`,
-    right: `calc(${theme.space.sm} * 1.75 + 2px)`
-  },
-  /** Styles applied to the top rules container. */
-  topRulesContainer: {},
-  /** Styles applied to the background of buttons to remove transparency */
-  buttonBackground: {
-    backgroundColor: theme.colors.bgPage,
-    display: "inline-flex"
-  },
-  createConditionButton: {
-    cursor: "pointer",
-    backgroundColor: "transparent",
-    padding: 0,
-    "&:disabled": { cursor: "not-allowed", pointerEvents: "none" }
-  },
-  createGroupButton: {
-    cursor: "pointer",
-    backgroundColor: "transparent",
-    padding: 0,
-    "&:disabled": { cursor: "not-allowed", pointerEvents: "none" }
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/QueryBuilder/QueryBuilder.styles.tsx
+var { useClasses, staticClasses } = createClasses("HvQueryBuilder", {
+	/** Styles applied to the component root class. */
+	root: {
+		position: "relative",
+		padding: theme.space.sm,
+		marginTop: 12,
+		marginBottom: 32,
+		border: `1px solid ${theme.colors.border}`
+	},
+	/** Styles applied to the top group container. */
+	topGroup: {
+		margin: theme.space.sm,
+		backgroundColor: "transparent",
+		maxWidth: "100%",
+		paddingBottom: theme.space.lg
+	},
+	/** Styles applied to the sub group containers. */
+	subGroup: {
+		margin: "40px 14px 32px 20px",
+		minHeight: 120,
+		paddingBottom: theme.space.md,
+		"&::before": {
+			content: "\"\"",
+			position: "absolute",
+			zIndex: 2,
+			width: 21,
+			height: 36,
+			borderBottom: `1px solid ${theme.colors.border}`,
+			borderLeft: `1px solid ${theme.colors.border}`,
+			top: -38,
+			left: -38
+		},
+		":not($topRulesContainer)>&:last-child::after": {
+			content: "\"\"",
+			position: "absolute",
+			zIndex: 1,
+			width: 32,
+			height: "100%",
+			borderLeft: `1px solid ${theme.colors.border}`,
+			top: 0,
+			left: `calc(${theme.space.sm} + 2)`
+		}
+	},
+	/** Styles applied to the radio button+label topGroup when the radio button is disabled. */
+	combinator: { minWidth: 80 },
+	/** Styles applied to the multi-button combinator container on the top group. */
+	topCombinator: {
+		position: "absolute",
+		top: `calc(-1 * ${theme.space.sm})`,
+		left: `calc(-1 * ${theme.space.sm})`
+	},
+	/** Styles applied to each combinator button. */
+	combinatorButton: {},
+	/** Styles applied to the remove button.  */
+	removeButton: {},
+	/** Styles applied to the remove button on the top group. */
+	topRemoveButton: {
+		position: "absolute",
+		top: -16,
+		right: -16
+	},
+	/** Styles applied to the remove button when disabled on the top group. */
+	topRemoveButtonDisabled: { backgroundColor: theme.colors.bgPage },
+	/** Styles applied to the rules container. */
+	rulesContainer: {},
+	/** Styles applied to the sub rules container. */
+	subRulesContainer: {
+		borderLeft: `1px solid ${theme.colors.border}`,
+		marginLeft: theme.space.sm,
+		marginBottom: theme.space.md,
+		paddingLeft: theme.space.sm,
+		paddingTop: 7,
+		position: "relative",
+		left: -33,
+		width: "100%"
+	},
+	/** Styles applied to the action button container. */
+	actionButtonContainer: {
+		marginLeft: "auto",
+		display: "flex",
+		gap: theme.space.sm
+	},
+	/** Styles applied to the top action button container. */
+	topActionButtonContainer: {
+		position: "absolute",
+		bottom: `calc(-1 * ${theme.space.md} * 0.5 - 3px)`,
+		right: `calc(${theme.space.sm} * 1.75 + 2px)`
+	},
+	/** Styles applied to the top rules container. */
+	topRulesContainer: {},
+	/** Styles applied to the background of buttons to remove transparency */
+	buttonBackground: {
+		backgroundColor: theme.colors.bgPage,
+		display: "inline-flex"
+	},
+	createConditionButton: {
+		cursor: "pointer",
+		backgroundColor: "transparent",
+		padding: 0,
+		"&:disabled": {
+			cursor: "not-allowed",
+			pointerEvents: "none"
+		}
+	},
+	createGroupButton: {
+		cursor: "pointer",
+		backgroundColor: "transparent",
+		padding: 0,
+		"&:disabled": {
+			cursor: "not-allowed",
+			pointerEvents: "none"
+		}
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/QueryBuilder/Rule/Attribute.js

@@ -1,65 +1,59 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { HvDropdown } from "../../Dropdown/Dropdown.js";
 import { useQueryBuilderContext } from "../Context.js";
 import { isBigList } from "../utils/index.js";
-import { HvDropdown } from "../../Dropdown/Dropdown.js";
-const Attribute = ({
-  id,
-  attribute,
-  disabled,
-  isInvalid
-}) => {
-  const { dispatchAction, attributes, operators, labels, readOnly } = useQueryBuilderContext();
-  const values = useMemo(() => {
-    if (!attributes) return [];
-    return Object.keys(attributes).map((key) => ({
-      id: key,
-      label: attributes[key].label,
-      selected: key === attribute
-    }));
-  }, [attributes, attribute]);
-  const currentType = attribute != null && attributes ? attributes[attribute]?.type : null;
-  return /* @__PURE__ */ jsx(
-    HvDropdown,
-    {
-      singleSelectionToggle: false,
-      label: labels.rule.attribute.label,
-      placeholder: labels.rule.attribute.placeholder,
-      values,
-      disabled,
-      readOnly,
-      status: isInvalid ? "invalid" : "valid",
-      statusMessage: labels.rule.attribute.exists,
-      onChange: (selected) => {
-        if (selected) {
-          const attributeId = selected.id;
-          const type = attributes && attributeId && attributes[attributeId]?.type;
-          const typeOperators = type ? operators[type] : void 0;
-          let operator;
-          if (currentType === type) {
-            operator = void 0;
-          } else if (typeOperators?.length === 1) {
-            operator = typeOperators[0].operator;
-          } else {
-            operator = null;
-          }
-          const value = type === "boolean" ? true : void 0;
-          dispatchAction({
-            type: "set-attribute",
-            id,
-            attribute: attributeId?.toString(),
-            operator,
-            value
-          });
-        } else {
-          dispatchAction({ type: "set-attribute", id, attribute: null });
-        }
-      },
-      showSearch: isBigList(values),
-      ...isBigList(values) && { virtualized: true, height: 300 }
-    }
-  );
-};
-export {
-  Attribute
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/QueryBuilder/Rule/Attribute.tsx
+var Attribute = ({ id, attribute, disabled, isInvalid }) => {
+	const { dispatchAction, attributes, operators, labels, readOnly } = useQueryBuilderContext();
+	const values = useMemo(() => {
+		if (!attributes) return [];
+		return Object.keys(attributes).map((key) => ({
+			id: key,
+			label: attributes[key].label,
+			selected: key === attribute
+		}));
+	}, [attributes, attribute]);
+	const currentType = attribute != null && attributes ? attributes[attribute]?.type : null;
+	return /* @__PURE__ */ jsx(HvDropdown, {
+		singleSelectionToggle: false,
+		label: labels.rule.attribute.label,
+		placeholder: labels.rule.attribute.placeholder,
+		values,
+		disabled,
+		readOnly,
+		status: isInvalid ? "invalid" : "valid",
+		style: { gridArea: "attribute" },
+		statusMessage: labels.rule.attribute.exists,
+		onChange: (selected) => {
+			if (selected) {
+				const attributeId = selected.id;
+				const type = attributes && attributeId && attributes[attributeId]?.type;
+				const typeOperators = type ? operators[type] : void 0;
+				let operator;
+				if (currentType === type) operator = void 0;
+				else if (typeOperators?.length === 1) operator = typeOperators[0].operator;
+				else operator = null;
+				const value = type === "boolean" ? true : void 0;
+				dispatchAction({
+					type: "set-attribute",
+					id,
+					attribute: attributeId?.toString(),
+					operator,
+					value
+				});
+			} else dispatchAction({
+				type: "set-attribute",
+				id,
+				attribute: null
+			});
+		},
+		showSearch: isBigList(values),
+		...isBigList(values) && {
+			virtualized: true,
+			height: 300
+		}
+	});
 };
+//#endregion
+export { Attribute };