@hitachivantara/uikit-react-core 5.104.0 → 5.105.0

package/dist/cjs/QueryBuilder/RuleGroup.cjs

@@ -0,0 +1,211 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const icons = require("../icons.cjs");
+const Context = require("./Context.cjs");
+const QueryBuilder_styles = require("./QueryBuilder.styles.cjs");
+const Rule = require("./Rule/Rule.cjs");
+const Button = require("../Button/Button.cjs");
+const EmptyState = require("../EmptyState/EmptyState.cjs");
+const MultiButton = require("../MultiButton/MultiButton.cjs");
+const IconButton = require("../IconButton/IconButton.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const RuleGroup = ({
+  level = 0,
+  id,
+  combinator = "and",
+  rules = [],
+  classes: classesProp
+}) => {
+  const { classes, cx } = QueryBuilder_styles.useClasses(classesProp);
+  const {
+    dispatchAction,
+    askAction,
+    maxDepth,
+    combinators,
+    labels,
+    readOnly,
+    disableConfirmation,
+    allowRepeatedAttributes
+  } = Context.useQueryBuilderContext();
+  const normalizedMaxDepth = maxDepth - 1;
+  const actionButtons = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.buttonBackground, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button.HvButton,
+      {
+        variant: "secondarySubtle",
+        onClick: () => {
+          dispatchAction({ type: "add-rule", id });
+        },
+        disabled: readOnly,
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { compact: true, name: "Add" }),
+        children: level === 0 && labels.query?.addRule?.label != null ? labels.query?.addRule?.label : labels.group.addRule.label
+      }
+    ) }),
+    level <= normalizedMaxDepth && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.buttonBackground, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button.HvButton,
+      {
+        variant: "secondarySubtle",
+        onClick: () => {
+          dispatchAction({ type: "add-group", id });
+        },
+        disabled: readOnly,
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { compact: true, name: "Add" }),
+        children: level === 0 && labels.query?.addGroup?.label != null ? labels.query?.addGroup?.label : labels.group.addGroup.label
+      }
+    ) })
+  ] });
+  const onClickCombinator = React.useCallback(
+    (item) => {
+      dispatchAction({
+        type: "set-combinator",
+        id,
+        combinator: item.operand
+      });
+    },
+    [dispatchAction, id]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cx(classes.root, {
+        [classes.topGroup]: level === 0,
+        [classes.subGroup]: level > 0
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MultiButton.HvMultiButton,
+          {
+            className: cx(classes.combinator, classes.topCombinator),
+            disabled: readOnly,
+            "aria-disabled": readOnly,
+            children: combinators?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              Button.HvButton,
+              {
+                className: classes.combinatorButton,
+                selected: item.operand === combinator,
+                onClick: () => item.operand && onClickCombinator(item),
+                disabled: readOnly,
+                size: "xs",
+                children: item.label
+              },
+              item.operand
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.buttonBackground, classes.topRemoveButton), children: /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton.HvIconButton,
+          {
+            className: classes.removeButton,
+            onClick: () => disableConfirmation ? dispatchAction({ type: "remove-node", id }) : askAction({
+              actions: [{ type: "remove-node", id }],
+              dialog: level === 0 && labels.query?.delete != null ? labels.query.delete : labels.group.delete
+            }),
+            title: level === 0 && labels.query?.delete?.tooltip || labels.group.delete.tooltip || level === 0 && labels.query?.delete?.ariaLabel || labels.group.delete.ariaLabel,
+            disabled: readOnly,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              icons.HvIcon,
+              {
+                name: "Delete",
+                className: cx({ [classes.topRemoveButtonDisabled]: readOnly })
+              }
+            )
+          }
+        ) }),
+        rules?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cx(classes.rulesContainer, {
+              [classes.subRulesContainer]: level > 0,
+              [classes.topRulesContainer]: level === 0
+            }),
+            children: rules.map((rule, index) => {
+              if ("combinator" in rule) {
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  RuleGroup,
+                  {
+                    level: level + 1,
+                    ...rule,
+                    id: rule.id,
+                    classes
+                  },
+                  rule.id
+                );
+              }
+              const isInvalid = allowRepeatedAttributes ? false : combinator === "and" && rules.some((r, i) => {
+                if ("attribute" in r) {
+                  if (r.attribute === rule.attribute && r.id !== rule.id && i < index) {
+                    return true;
+                  }
+                }
+                return false;
+              });
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                Rule.Rule,
+                {
+                  ...rule,
+                  isInvalid,
+                  id: rule.id,
+                  combinator
+                },
+                rule.id
+              );
+            })
+          }
+        ),
+        rules?.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          EmptyState.HvEmptyState,
+          {
+            title: labels.empty?.title,
+            message: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Typography.HvTypography,
+                {
+                  link: true,
+                  component: "button",
+                  onClick: () => {
+                    dispatchAction({ type: "add-rule", id });
+                  },
+                  className: classes.createConditionButton,
+                  disabled: readOnly,
+                  "aria-disabled": readOnly,
+                  children: `${labels.empty?.createCondition}`
+                }
+              ),
+              level <= normalizedMaxDepth && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                `${labels.empty?.spacer}`,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Typography.HvTypography,
+                  {
+                    link: true,
+                    component: "button",
+                    onClick: () => {
+                      dispatchAction({ type: "add-group", id });
+                    },
+                    className: classes.createGroupButton,
+                    disabled: readOnly,
+                    "aria-disabled": readOnly,
+                    children: `${labels.empty?.createGroup}`
+                  }
+                )
+              ] })
+            ] }),
+            icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Info" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cx(
+              classes.actionButtonContainer,
+              classes.topActionButtonContainer
+            ),
+            children: actionButtons
+          }
+        )
+      ]
+    }
+  );
+};
+exports.RuleGroup = RuleGroup;

package/dist/cjs/QueryBuilder/Value/DateTimeValue.cjs

@@ -0,0 +1,310 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("@mui/material/styles");
+const useMediaQuery = require("@mui/material/useMediaQuery");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const helpers = require("../../utils/helpers.cjs");
+const Context = require("../Context.cjs");
+const DatePicker = require("../../DatePicker/DatePicker.cjs");
+const TimePicker = require("../../TimePicker/TimePicker.cjs");
+const WarningText = require("../../FormElement/WarningText/WarningText.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
+function formatDate(date) {
+  return date?.toISOString().slice(0, 10);
+}
+function formatTime(time) {
+  if (!time) return void 0;
+  const { hours, minutes, seconds } = time;
+  const date = new Date(Date.UTC(2020, 8, 8, hours, minutes, seconds));
+  return date.toISOString().slice(11, 19);
+}
+function parseDate(date) {
+  return date ? new Date(date) : void 0;
+}
+function parseTime(time) {
+  if (!time) return null;
+  const parts = time.split(":");
+  return {
+    hours: Number(parts[0]),
+    minutes: Number(parts[1]),
+    seconds: Number(parts[2]) || 0
+  };
+}
+const { useClasses } = uikitReactUtils.createClasses("HvQueryBuilderDateTimeValue", {
+  root: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  row: {},
+  vertical: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  horizontal: {
+    display: "flex",
+    "& > div:not(:last-child)": {
+      marginRight: uikitStyles.theme.space.md
+    }
+  },
+  isMdDown: {
+    "& > div:not(:last-child)": {
+      marginRight: `calc(${uikitStyles.theme.space.md} / 2)`
+    }
+  },
+  datePicker: {
+    flex: 1
+  },
+  timePicker: {
+    flex: 1
+  }
+});
+const DateTimeValue = ({
+  id,
+  operator,
+  value: valueProp = {},
+  initialTouched = false
+}) => {
+  const { classes, cx } = useClasses();
+  const theme2 = styles.useTheme();
+  const isMdDown = useMediaQuery__default.default(theme2.breakpoints.down("md"));
+  const isRange = operator === "range";
+  const { labels, dispatchAction, readOnly } = Context.useQueryBuilderContext();
+  const elementId = helpers.uniqueId(`datetime${id}`);
+  const [touchedDate, setTouchedDate] = React.useState(initialTouched);
+  const [touchedTime, setTouchedTime] = React.useState(initialTouched);
+  const [touchedEndDate, setTouchedEndDate] = React.useState(initialTouched);
+  const [touchedEndTime, setTouchedEndTime] = React.useState(initialTouched);
+  const onDateChange = React.useCallback(
+    (data) => {
+      setTouchedDate(true);
+      const date = formatDate(data);
+      const oldValue = !isRange ? valueProp?.date : valueProp?.start?.date;
+      if (date !== oldValue) {
+        let value;
+        if (!isRange) {
+          value = {
+            date,
+            time: valueProp?.time
+          };
+        } else {
+          value = {
+            start: {
+              date,
+              time: valueProp?.start?.time
+            },
+            end: valueProp?.end
+          };
+        }
+        dispatchAction({
+          type: "set-value",
+          id,
+          value
+        });
+      }
+    },
+    [dispatchAction, id, isRange, valueProp]
+  );
+  const onTimeChange = React.useCallback(
+    (data) => {
+      setTouchedTime(true);
+      const time = formatTime(data);
+      const oldValue = !isRange ? valueProp?.time : valueProp?.start?.time;
+      if (time !== oldValue) {
+        let value;
+        if (!isRange) {
+          value = {
+            date: valueProp?.date,
+            time
+          };
+        } else {
+          value = {
+            start: {
+              date: valueProp?.start?.date,
+              time
+            },
+            end: valueProp?.end
+          };
+        }
+        dispatchAction({
+          type: "set-value",
+          id,
+          value
+        });
+      }
+    },
+    [dispatchAction, id, isRange, valueProp]
+  );
+  const onEndDateChange = React.useCallback(
+    (data) => {
+      setTouchedEndDate(true);
+      const date = formatDate(data);
+      if (date !== valueProp?.end?.date) {
+        const value = {
+          start: valueProp?.start,
+          end: {
+            date,
+            time: valueProp?.end?.time
+          }
+        };
+        dispatchAction({
+          type: "set-value",
+          id,
+          value
+        });
+      }
+    },
+    [dispatchAction, id, valueProp]
+  );
+  const onEndTimeChange = React.useCallback(
+    (data) => {
+      setTouchedEndTime(true);
+      const time = formatTime(data);
+      if (time !== valueProp?.end?.time) {
+        const value = {
+          start: valueProp?.start,
+          end: {
+            date: valueProp?.end?.date,
+            time
+          }
+        };
+        dispatchAction({
+          type: "set-value",
+          id,
+          value
+        });
+      }
+    },
+    [dispatchAction, id, valueProp]
+  );
+  const startDate = isRange ? valueProp?.start?.date : valueProp?.date;
+  const datePickerValue = React.useMemo(() => parseDate(startDate), [startDate]);
+  const datePickerStatus = datePickerValue != null ? "valid" : "invalid";
+  const startTime = (isRange ? valueProp?.start?.time : valueProp?.time) ?? "";
+  const timePickerValue = React.useMemo(() => parseTime(startTime), [startTime]);
+  const timePickerStatus = timePickerValue != null ? "valid" : "invalid";
+  const endDate = isRange ? valueProp?.end?.date : null;
+  const endDatePickerValue = React.useMemo(() => parseDate(endDate), [endDate]);
+  const endTime = isRange ? valueProp?.end?.time : null;
+  const endTimePickerValue = React.useMemo(() => parseTime(endTime), [endTime]);
+  const dateStatus = !touchedDate ? "standBy" : datePickerStatus;
+  const timeStatus = !touchedTime ? "standBy" : timePickerStatus;
+  const endDateIsBefore = startDate != null && endDate != null && endDate < startDate;
+  const endTimeIsBeforeOrSame = startDate != null && endDate != null && endDate === startDate && startTime != null && endTime != null && endTime <= startTime;
+  const endDateTimeIsBefore = endDateIsBefore || endTimeIsBeforeOrSame;
+  const endDatePickerStatus = endDatePickerValue == null || endDateTimeIsBefore ? "invalid" : "valid";
+  const endDateStatus = !touchedEndDate ? "standBy" : endDatePickerStatus;
+  const endTimePickerStatus = endTimePickerValue == null || endDateTimeIsBefore ? "invalid" : "valid";
+  const endTimeStatus = !touchedEndTime ? "standBy" : endTimePickerStatus;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cx(classes.row, classes.horizontal, {
+          [classes.isMdDown]: isMdDown
+        }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DatePicker.HvDatePicker,
+            {
+              className: classes.datePicker,
+              name: `${elementId}-date`,
+              required: true,
+              status: dateStatus,
+              statusMessage: labels.rule.value.datetime.validation.required,
+              label: isRange ? labels.rule.value.datetime.startDateLabel : labels.rule.value.datetime.dateLabel,
+              placeholder: isRange ? labels.rule.value.datetime.startDatePlaceholder : labels.rule.value.datetime.datePlaceholder,
+              value: datePickerValue,
+              onChange: onDateChange,
+              readOnly
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TimePicker.HvTimePicker,
+            {
+              className: classes.timePicker,
+              timeFormat: "24",
+              name: `${elementId}-time`,
+              required: true,
+              status: timeStatus,
+              statusMessage: labels.rule.value.datetime.validation.required,
+              label: isRange ? labels.rule.value.datetime.startTimeLabel : labels.rule.value.datetime.timeLabel,
+              placeholder: isRange ? labels.rule.value.datetime.startTimePlaceholder : labels.rule.value.datetime.timePlaceholder,
+              value: timePickerValue || void 0,
+              onChange: onTimeChange,
+              onToggle: (_evt, open) => {
+                if (!open && !touchedTime) {
+                  setTouchedTime(true);
+                }
+              },
+              readOnly
+            }
+          )
+        ]
+      }
+    ),
+    isRange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.row, classes.vertical), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cx(classes.horizontal, {
+            [classes.isMdDown]: isMdDown
+          }),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DatePicker.HvDatePicker,
+              {
+                className: classes.datePicker,
+                name: `${elementId}-endDate`,
+                required: true,
+                status: endDateStatus,
+                statusMessage: labels.rule.value.datetime.validation.required,
+                "aria-errormessage": endDateTimeIsBefore ? `${elementId}-combined-error` : void 0,
+                label: labels.rule.value.datetime.endDateLabel,
+                placeholder: labels.rule.value.datetime.endDatePlaceholder,
+                value: endDatePickerValue,
+                onChange: onEndDateChange,
+                readOnly
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TimePicker.HvTimePicker,
+              {
+                className: classes.timePicker,
+                timeFormat: "24",
+                name: `${elementId}-endTime`,
+                required: true,
+                status: endTimeStatus,
+                statusMessage: labels.rule.value.datetime.validation.required,
+                "aria-errormessage": endDateTimeIsBefore ? `${elementId}-combined-error` : void 0,
+                label: labels.rule.value.datetime.endTimeLabel,
+                placeholder: labels.rule.value.datetime.endTimePlaceholder,
+                value: endTimePickerValue || void 0,
+                onChange: onEndTimeChange,
+                onToggle: (_evt, open) => {
+                  if (!open && !touchedEndTime) {
+                    setTouchedEndTime(true);
+                  }
+                },
+                readOnly
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        WarningText.HvWarningText,
+        {
+          disableBorder: true,
+          id: `${elementId}-combined-error`,
+          isVisible: endDateTimeIsBefore,
+          children: labels.rule.value.datetime.validation.invalidInterval
+        }
+      )
+    ] })
+  ] });
+};
+exports.DateTimeValue = DateTimeValue;

package/dist/cjs/QueryBuilder/Value/EmptyValue.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Context = require("../Context.cjs");
+const EmptyValue = ({ id }) => {
+  const { dispatchAction } = Context.useQueryBuilderContext();
+  React.useEffect(() => {
+    dispatchAction({
+      type: "set-value",
+      id,
+      value: null
+    });
+  }, [dispatchAction, id]);
+  return null;
+};
+exports.EmptyValue = EmptyValue;