@hitachivantara/uikit-react-core 5.102.1 → 5.104.0

package/dist/cjs/packages/core/src/QueryBuilder/Context.cjs

@@ -0,0 +1,334 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const defaultOperators = {
+  numeric: [
+    {
+      operator: "greaterThan",
+      label: "Greater than (>)",
+      combinators: ["and"]
+    },
+    {
+      operator: "lessThan",
+      label: "Less than (<)",
+      combinators: ["and"]
+    },
+    {
+      operator: "equalsTo",
+      label: "Equal to (=)",
+      combinators: ["and", "or"]
+    },
+    {
+      operator: "greaterThanEq",
+      label: "Greater than or equal to (>=)",
+      combinators: ["and"]
+    },
+    {
+      operator: "lessThanEq",
+      label: "Less than or equal to (<=)",
+      combinators: ["and"]
+    },
+    {
+      operator: "notEqual",
+      label: "Not equal to (!=)",
+      combinators: ["and"]
+    },
+    {
+      operator: "range",
+      label: "Range",
+      combinators: ["and"]
+    }
+  ],
+  text: [
+    {
+      operator: "equals",
+      label: "Equals",
+      combinators: ["and", "or"]
+    },
+    {
+      operator: "equalsIgnoreCase",
+      label: "Equals Ignore Case",
+      combinators: ["and", "or"]
+    },
+    {
+      operator: "Contains",
+      label: "Contains",
+      combinators: ["and", "or"]
+    },
+    {
+      operator: "StartsWith",
+      label: "A string begins with",
+      combinators: ["and", "or"]
+    },
+    {
+      operator: "EndsWith",
+      label: "A string ends with",
+      combinators: ["and", "or"]
+    },
+    {
+      operator: "IsNotEmpty",
+      label: "Is Not empty",
+      combinators: ["and"]
+    },
+    {
+      operator: "IsNot",
+      label: "Is Not",
+      combinators: ["and"]
+    },
+    {
+      operator: "Empty",
+      label: "Empty",
+      combinators: ["and"]
+    }
+  ],
+  textarea: [
+    {
+      operator: "equals",
+      label: "Equals",
+      combinators: ["and", "or"]
+    },
+    {
+      operator: "equalsIgnoreCase",
+      label: "Equals Ignore Case",
+      combinators: ["and", "or"]
+    },
+    {
+      operator: "Contains",
+      label: "Contains",
+      combinators: ["and", "or"]
+    },
+    {
+      operator: "StartsWith",
+      label: "A string begins with",
+      combinators: ["and", "or"]
+    },
+    {
+      operator: "EndsWith",
+      label: "A string ends with",
+      combinators: ["and", "or"]
+    },
+    {
+      operator: "IsNotEmpty",
+      label: "Is Not empty",
+      combinators: ["and"]
+    },
+    {
+      operator: "IsNot",
+      label: "Is Not",
+      combinators: ["and"]
+    },
+    {
+      operator: "Empty",
+      label: "Empty",
+      combinators: ["and"]
+    }
+  ],
+  boolean: [
+    {
+      operator: "equalsTo",
+      label: "=",
+      combinators: ["and", "or"]
+    }
+  ],
+  dateandtime: [
+    {
+      operator: "greaterThan",
+      label: "Greater than",
+      combinators: ["and"]
+    },
+    {
+      operator: "lessThan",
+      label: "Less than",
+      combinators: ["and"]
+    },
+    {
+      operator: "equalsTo",
+      label: "Equal to",
+      combinators: ["and", "or"]
+    },
+    {
+      operator: "greaterThanEq",
+      label: "Greater than or equal to",
+      combinators: ["and"]
+    },
+    {
+      operator: "lessThanEq",
+      label: "Less than or equal to",
+      combinators: ["and"]
+    },
+    {
+      operator: "notEqual",
+      label: "Not equal to",
+      combinators: ["and"]
+    },
+    {
+      operator: "range",
+      label: "Range",
+      combinators: ["and"]
+    }
+  ]
+};
+const defaultCombinators = [
+  { operand: "and", label: "AND" },
+  { operand: "or", label: "OR" }
+];
+const defaultLabels = {
+  query: {
+    delete: {
+      ariaLabel: "Reset query",
+      tooltip: "Reset query",
+      dialogTitle: "Remove all conditions?",
+      dialogMessage: "Are you sure you want to remove all the conditions? They will be removed permanently.",
+      dialogConfirm: "Yes",
+      dialogCancel: "No",
+      dialogCloseTooltip: "Close"
+    },
+    addRule: {
+      label: "Add condition"
+    },
+    addGroup: {
+      label: "Add group"
+    }
+  },
+  rule: {
+    attribute: {
+      label: "Attribute",
+      placeholder: "Select attribute...",
+      exists: "Attribute already exists."
+    },
+    operator: {
+      label: "Operator",
+      placeholder: "Select operator..."
+    },
+    value: {
+      distance: {
+        label: "Value",
+        connectorText: "radius miles from",
+        button: "Select location",
+        validation: {
+          required: "The value is required.",
+          invalid: "Value must be a positive number."
+        }
+      },
+      text: {
+        label: "Value",
+        placeholder: "Enter value...",
+        validation: {
+          required: "The value is required."
+        }
+      },
+      boolean: {
+        label: "Value",
+        placeholder: "Enter value",
+        options: {
+          true: "True",
+          false: "False"
+        }
+      },
+      numeric: {
+        label: "Value",
+        placeholder: "Enter value",
+        validation: {
+          required: "The value is required.",
+          invalid: "Value must be a number.",
+          equal: "Cannot be equal.",
+          greaterThan: "Needs to be greater."
+        },
+        range: {
+          leftLabel: "From",
+          rightLabel: "To"
+        }
+      },
+      datetime: {
+        dateLabel: "Date",
+        datePlaceholder: "Select Date",
+        timeLabel: "Time",
+        timePlaceholder: "Select Time",
+        startDateLabel: "Start Date",
+        startDatePlaceholder: "Select Start Date",
+        startTimeLabel: "Start Time",
+        startTimePlaceholder: "Select Start Time",
+        endDateLabel: "End Date",
+        endDatePlaceholder: "Select End Date",
+        endTimeLabel: "End Time",
+        endTimePlaceholder: "Select End Time",
+        validation: {
+          required: "The value is required.",
+          invalidInterval: "End date and time must be after start date and time."
+        }
+      }
+    },
+    delete: {
+      ariaLabel: "Remove condition",
+      tooltip: "Remove condition",
+      dialogTitle: "Remove condition?",
+      dialogMessage: "Are you sure you want to remove the condition? It will be removed permanently.",
+      dialogConfirm: "Yes",
+      dialogCancel: "No",
+      dialogCloseTooltip: "Close"
+    }
+  },
+  group: {
+    delete: {
+      ariaLabel: "Remove group",
+      tooltip: "Remove group",
+      dialogTitle: "Remove group?",
+      dialogMessage: "Are you sure you want to remove the group? It will be removed permanently.",
+      dialogConfirm: "Yes",
+      dialogCancel: "No",
+      dialogCloseTooltip: "Close"
+    },
+    reset: {
+      ariaLabel: "Change operator",
+      tooltip: "Change operator query",
+      dialogTitle: "Change conditional operator?",
+      dialogMessage: "Do you want to change conditional operator? You won't be able to undo this operation. Conditions and/or groups will be removed.",
+      dialogConfirm: "Yes",
+      dialogCancel: "No",
+      dialogCloseTooltip: "Close"
+    },
+    addRule: {
+      label: "Add condition"
+    },
+    addGroup: {
+      label: "Add group"
+    }
+  },
+  empty: {
+    title: "No conditions created yet",
+    createCondition: "Create a condition",
+    createGroup: "condition group",
+    spacer: " or a "
+  }
+};
+const HvQueryBuilderContext = a.createContext({
+  dispatchAction: () => ({}),
+  askAction: () => ({}),
+  selectLocation: () => ({}),
+  // TODO - remove in v6 (not used)
+  attributes: {},
+  operators: defaultOperators,
+  combinators: defaultCombinators,
+  maxDepth: 1,
+  labels: defaultLabels,
+  initialTouched: false,
+  disableConfirmation: false,
+  allowRepeatedAttributes: false,
+  readOnly: false
+});
+const HvQueryBuilderProvider = ({
+  children,
+  value
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(HvQueryBuilderContext.Provider, { value, children });
+};
+const useQueryBuilderContext = () => {
+  return a.useContext(HvQueryBuilderContext);
+};
+exports.HvQueryBuilderContext = HvQueryBuilderContext;
+exports.HvQueryBuilderProvider = HvQueryBuilderProvider;
+exports.defaultCombinators = defaultCombinators;
+exports.defaultLabels = defaultLabels;
+exports.defaultOperators = defaultOperators;
+exports.useQueryBuilderContext = useQueryBuilderContext;

package/dist/cjs/packages/core/src/QueryBuilder/QueryBuilder.cjs

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const useControlled = require("../hooks/useControlled.cjs");
+const useLabels = require("../hooks/useLabels.cjs");
+const helpers = require("../utils/helpers.cjs");
+const ConfirmationDialog = require("./ConfirmationDialog.cjs");
+const Context = require("./Context.cjs");
+const QueryBuilder_styles = require("./QueryBuilder.styles.cjs");
+const RuleGroup = require("./RuleGroup.cjs");
+const index = require("./utils/index.cjs");
+const reducer = require("./utils/reducer.cjs");
+const HvQueryBuilder = (props) => {
+  const {
+    attributes,
+    renderers,
+    query: queryProp,
+    // TODO - remove in v6
+    value,
+    defaultValue,
+    onChange,
+    disableConfirmation = false,
+    allowRepeatedAttributes = false,
+    operators = Context.defaultOperators,
+    combinators = Context.defaultCombinators,
+    maxDepth = 1,
+    labels: labelsProp,
+    readOnly = false,
+    emptyRenderer = ["Empty", "IsNotEmpty"],
+    classes: classesProp
+  } = uikitReactUtils.useDefaultProps("HvQueryBuilder", props);
+  const { classes } = QueryBuilder_styles.useClasses(classesProp);
+  const currentAttributes = a.useRef(
+    null
+  );
+  const controlled = a.useRef(value != null);
+  const initialQuery = a.useRef(
+    value ?? defaultValue ?? queryProp ?? index.emptyGroup()
+  );
+  const [query, setQuery] = useControlled.useControlled(value, initialQuery.current);
+  const prevQuery = a.useRef(query);
+  const [pendingAction, setPendingAction] = a.useState();
+  const [initialState, setInitialState] = a.useState(true);
+  const [state, dispatchAction] = a.useReducer(
+    reducer.default,
+    index.setNodeIds(structuredClone(initialQuery.current))
+  );
+  const labels = useLabels.useLabels(Context.defaultLabels, labelsProp);
+  const contextValue = a.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
+    ]
+  );
+  a.useEffect(() => {
+    if (currentAttributes.current == null) {
+      currentAttributes.current = attributes;
+    } else if (currentAttributes.current !== attributes) {
+      currentAttributes.current = attributes;
+      dispatchAction({ type: "reset-query" });
+    }
+  }, [attributes]);
+  a.useEffect(() => {
+    if (!helpers.isEqual(prevQuery.current, query)) {
+      dispatchAction({
+        type: "set-query",
+        query: index.setNodeIds(structuredClone(query), state)
+      });
+      prevQuery.current = query;
+    } else if (!helpers.isEqual(
+      index.clearNodeIds(structuredClone(state)),
+      index.clearNodeIds(structuredClone(query))
+    )) {
+      setInitialState(false);
+      if (!controlled.current) {
+        onChange?.(
+          index.clearNodeIds(structuredClone(state), true)
+        );
+      } else {
+        onChange?.(index.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__ */ jsxRuntime.jsxs(Context.HvQueryBuilderProvider, { value: contextValue, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RuleGroup.RuleGroup,
+      {
+        level: 0,
+        id: state.id,
+        combinator: state.combinator,
+        rules: state.rules,
+        classes
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfirmationDialog.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
+      }
+    )
+  ] });
+};
+exports.queryBuilderClasses = QueryBuilder_styles.staticClasses;
+exports.HvQueryBuilder = HvQueryBuilder;

package/dist/cjs/packages/core/src/QueryBuilder/Rule/Attribute.cjs

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const Context = require("../Context.cjs");
+const index = require("../utils/index.cjs");
+const Dropdown = require("../../Dropdown/Dropdown.cjs");
+const Attribute = ({
+  id,
+  attribute,
+  disabled,
+  isInvalid
+}) => {
+  const { dispatchAction, attributes, operators, labels, readOnly } = Context.useQueryBuilderContext();
+  const values = a.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__ */ jsxRuntime.jsx(
+    Dropdown.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: index.isBigList(values),
+      ...index.isBigList(values) && { virtualized: true, height: 300 }
+    }
+  );
+};
+exports.Attribute = Attribute;

package/dist/cjs/packages/core/src/QueryBuilder/Rule/Operator.cjs

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const Context = require("../Context.cjs");
+const index = require("../utils/index.cjs");
+const Dropdown = require("../../Dropdown/Dropdown.cjs");
+const Operator = ({
+  id,
+  combinator,
+  attribute,
+  operator
+}) => {
+  const { dispatchAction, attributes, operators, labels, readOnly } = Context.useQueryBuilderContext();
+  const value = operator ?? null;
+  const values = a.useMemo(() => {
+    const attributeSpec = attribute && attributes ? attributes[attribute] : null;
+    const options = attributeSpec ? operators[attributeSpec.type].filter(
+      (o) => o.combinators.includes(combinator)
+    ) ?? [] : [];
+    return options.map((key) => ({
+      id: key.operator,
+      label: key.label,
+      selected: key.operator === value
+    }));
+  }, [attribute, attributes, operators, combinator, value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Dropdown.HvDropdown,
+    {
+      required: true,
+      status: "valid",
+      singleSelectionToggle: false,
+      label: labels.rule.operator.label,
+      placeholder: labels.rule.operator.placeholder,
+      values,
+      disabled: values.length === 0,
+      readOnly,
+      onChange: (selected) => {
+        if (selected?.id) {
+          dispatchAction({
+            type: "set-operator",
+            id,
+            operator: selected.id.toString(),
+            value: value === "range" || selected.id === "range" ? null : void 0
+          });
+        } else {
+          dispatchAction({
+            type: "set-operator",
+            id,
+            operator: null,
+            value: null
+          });
+        }
+      },
+      showSearch: index.isBigList(values),
+      ...index.isBigList(values) && { virtualized: true, height: 300 }
+    }
+  );
+};
+exports.Operator = Operator;

package/dist/cjs/packages/core/src/QueryBuilder/Rule/Rule.cjs

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const styles = require("@mui/material/styles");
+const useMediaQuery = require("@mui/material/useMediaQuery");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../../icons.cjs");
+const Context = require("../Context.cjs");
+const Value = require("../Value/Value.cjs");
+const Attribute = require("./Attribute.cjs");
+const Operator = require("./Operator.cjs");
+const Rule_styles = require("./Rule.styles.cjs");
+const Grid = require("../../Grid/Grid.cjs");
+const IconButton = require("../../IconButton/IconButton.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
+const Rule = (props) => {
+  const {
+    id,
+    combinator,
+    attribute,
+    operator,
+    value,
+    disabled,
+    isInvalid,
+    classes: classesProp
+  } = uikitReactUtils.useDefaultProps("HvQueryBuilderRule", props);
+  const { classes, cx } = Rule_styles.useClasses(classesProp);
+  const {
+    askAction,
+    dispatchAction,
+    attributes,
+    operators,
+    labels,
+    readOnly,
+    disableConfirmation
+  } = Context.useQueryBuilderContext();
+  const theme = styles.useTheme();
+  const isMdDown = useMediaQuery__default.default(theme.breakpoints.down("md"));
+  const availableOperators = a.useMemo(() => {
+    const attributeSpec = attribute != null && attributes ? attributes[attribute] : null;
+    if (attributeSpec != null) {
+      const typeOperators = operators[attributeSpec.type];
+      if (typeOperators != null) {
+        return typeOperators.reduce(
+          (count, item) => count + (item.combinators.includes(combinator) ? 1 : 0),
+          0
+        );
+      }
+    }
+    return -1;
+  }, [attribute, attributes, combinator, operators]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Grid.HvGrid,
+    {
+      container: true,
+      className: cx(classes.root, { [classes.isMdDown]: isMdDown }),
+      spacing: 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Attribute.Attribute,
+          {
+            attribute,
+            id,
+            disabled,
+            isInvalid
+          }
+        ) }),
+        attribute != null && availableOperators > 0 && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Operator.Operator,
+          {
+            id,
+            combinator,
+            attribute,
+            operator
+          }
+        ) }),
+        attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 12, md: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Value.Value,
+          {
+            attribute,
+            id,
+            operator,
+            value
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, className: classes.actionsContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton.HvIconButton,
+          {
+            placement: "bottom",
+            title: labels.rule.delete.tooltip || labels.rule.delete.ariaLabel,
+            onClick: () => disableConfirmation ? dispatchAction({ type: "remove-node", id }) : askAction({
+              actions: [{ type: "remove-node", id }],
+              dialog: labels.rule.delete
+            }),
+            disabled: readOnly,
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Delete" })
+          }
+        ) })
+      ]
+    }
+  );
+};
+exports.Rule = Rule;