@hitachivantara/uikit-react-core 5.106.1 → 6.0.0-next.1

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

@@ -1,310 +0,0 @@
-"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

@@ -1,16 +0,0 @@
-"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;

package/dist/cjs/QueryBuilder/Value/NumericValue.cjs

@@ -1,210 +0,0 @@
-"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 Input = require("../../Input/Input.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
-const { useClasses } = uikitReactUtils.createClasses("HvQueryBuilderNumericValue", {
-  root: {},
-  label: {
-    paddingBottom: "6px"
-  },
-  inputContainer: {},
-  rangeContainer: {
-    display: "flex",
-    "& $inputContainer": {
-      flexGrow: 1,
-      overflow: "auto"
-    },
-    "& > $inputContainer:not(:last-child)": {
-      marginRight: uikitStyles.theme.space.md
-    }
-  },
-  input: {
-    flexGrow: 1
-  },
-  isMdDown: {
-    "& > $inputContainer:not(:last-child)": {
-      marginRight: `calc(${uikitStyles.theme.space.md} / 2)`
-    }
-  }
-});
-const NumericValue = ({
-  id,
-  value,
-  operator,
-  initialTouched = false
-}) => {
-  const { classes, cx } = useClasses();
-  const isRange = operator === "range";
-  const { labels, dispatchAction, readOnly } = Context.useQueryBuilderContext();
-  const theme2 = styles.useTheme();
-  const isMdDown = useMediaQuery__default.default(theme2.breakpoints.down("md"));
-  const onSingleValueChange = React.useCallback(
-    (event, data) => {
-      dispatchAction({
-        type: "set-value",
-        id,
-        value: data ?? null
-      });
-    },
-    [dispatchAction, id]
-  );
-  const onRangeValueChange = React.useCallback(
-    (event, data, from = true) => {
-      const currentValue = value;
-      const numericRange = {
-        from: currentValue?.from,
-        to: currentValue?.to
-      };
-      if (from) {
-        numericRange.from = data ?? null;
-      } else {
-        numericRange.to = data ?? null;
-      }
-      dispatchAction({
-        type: "set-value",
-        id,
-        value: numericRange
-      });
-    },
-    [dispatchAction, id, value]
-  );
-  const [touchedNumeric, setTouchedNumeric] = React.useState(initialTouched);
-  const [touchedNumericTo, setTouchedNumericTo] = React.useState(initialTouched);
-  const elementId = helpers.uniqueId("numeric");
-  let numericValidation = null;
-  let rightValidation = null;
-  if (touchedNumeric || touchedNumericTo) {
-    if (value === void 0 || value?.toString() === "") {
-      if (touchedNumeric) {
-        numericValidation = "required";
-      }
-      if (touchedNumericTo) {
-        rightValidation = "required";
-      }
-    } else if (!isRange) {
-      if (Number.isNaN(Number(value))) {
-        numericValidation = "invalid";
-      }
-    } else if (isRange) {
-      const rangeValue = value;
-      if (rangeValue?.from === void 0 || rangeValue?.from?.toString() === "") {
-        numericValidation = "required";
-      } else if (Number.isNaN(Number(rangeValue?.from))) {
-        numericValidation = "invalid";
-      }
-      if (rangeValue?.to === void 0 || rangeValue?.to?.toString() === "") {
-        rightValidation = "required";
-      } else if (Number.isNaN(Number(rangeValue?.to))) {
-        rightValidation = "invalid";
-      } else if (Number(rangeValue?.from) > Number(rangeValue?.to)) {
-        rightValidation = "greaterThan";
-      } else if (Number(rangeValue?.from) === Number(rangeValue?.to)) {
-        rightValidation = "equal";
-      }
-    }
-  }
-  const numericStatus = numericValidation != null ? "invalid" : "valid";
-  const rightStatus = rightValidation != null ? "invalid" : "valid";
-  const renderRangeInputs = (rangeValue) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cx(classes.rangeContainer, { [classes.isMdDown]: isMdDown }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Input.HvInput,
-          {
-            label: labels.rule.value.numeric.range.leftLabel,
-            className: classes.input,
-            id: `${elementId}-numeric-from`,
-            name: `${elementId}-numeric-from`,
-            value: rangeValue?.from?.toString() || "",
-            onChange: (event, data) => onRangeValueChange(event, data),
-            onBlur: () => {
-              setTouchedNumeric(true);
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-              }
-            },
-            status: !touchedNumeric ? "standBy" : numericStatus,
-            statusMessage: numericValidation ? labels.rule.value.numeric.validation[numericValidation] : "",
-            required: true,
-            inputProps: {
-              autoComplete: "off"
-            },
-            placeholder: labels.rule.value.numeric.placeholder,
-            readOnly
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Input.HvInput,
-          {
-            label: labels.rule.value.numeric.range.rightLabel,
-            className: classes.input,
-            id: `${elementId}-numeric-to`,
-            name: `${elementId}-numeric-to`,
-            value: rangeValue?.to?.toString() || "",
-            onChange: (event, data) => onRangeValueChange(event, data, false),
-            onBlur: () => {
-              setTouchedNumericTo(true);
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-              }
-            },
-            status: !touchedNumericTo ? "standBy" : rightStatus,
-            statusMessage: rightValidation ? labels.rule.value.numeric.validation[rightValidation] : "",
-            required: true,
-            inputProps: {
-              autoComplete: "off"
-            },
-            placeholder: labels.rule.value.numeric.placeholder,
-            readOnly
-          }
-        ) })
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
-    isRange && renderRangeInputs(value || {}),
-    !isRange && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Input.HvInput,
-      {
-        label: labels.rule.value.numeric.label,
-        className: classes.input,
-        id: `${elementId}-numeric`,
-        name: `${elementId}-numeric`,
-        value: value?.toString() || "",
-        onChange: onSingleValueChange,
-        onBlur: () => {
-          setTouchedNumeric(true);
-        },
-        onKeyDown: (e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-          }
-        },
-        status: !touchedNumeric ? "standBy" : numericStatus,
-        required: true,
-        inputProps: {
-          autoComplete: "off"
-        },
-        placeholder: labels.rule.value.numeric.placeholder,
-        statusMessage: numericValidation ? labels.rule.value.numeric.validation[numericValidation] : "",
-        readOnly
-      }
-    ) })
-  ] });
-};
-exports.NumericValue = NumericValue;

package/dist/cjs/QueryBuilder/Value/TextValue.cjs

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const Context = require("../Context.cjs");
-const Input = require("../../Input/Input.cjs");
-const { useClasses } = uikitReactUtils.createClasses("HvQueryBuilderTextValue", {
-  location: {
-    flexGrow: 1
-  }
-});
-const TextValue = ({
-  id,
-  value = "",
-  initialTouched = false
-}) => {
-  const { classes } = useClasses();
-  const { labels, dispatchAction, readOnly } = Context.useQueryBuilderContext();
-  const [touched, setTouched] = React.useState(initialTouched);
-  const isValid = value != null && value.toString().trim() !== "";
-  let status = isValid ? "valid" : "invalid";
-  status = !touched ? "standBy" : status;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Input.HvInput,
-    {
-      className: classes.location,
-      label: labels.rule.value.text.label,
-      required: true,
-      status,
-      statusMessage: labels.rule.value.text.validation.required,
-      value,
-      inputProps: {
-        autoComplete: "off"
-      },
-      onChange: (t, v) => {
-        dispatchAction({
-          type: "set-value",
-          id,
-          value: v
-        });
-      },
-      onBlur: () => {
-        setTouched(true);
-      },
-      onKeyDown: (e) => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-        }
-      },
-      placeholder: "—",
-      readOnly
-    }
-  );
-};
-exports.TextValue = TextValue;

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

@@ -1,74 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const Context = require("../Context.cjs");
-const types = require("../types.cjs");
-const BooleanValue = require("./BooleanValue.cjs");
-const DateTimeValue = require("./DateTimeValue.cjs");
-const EmptyValue = require("./EmptyValue.cjs");
-const NumericValue = require("./NumericValue.cjs");
-const TextValue = require("./TextValue.cjs");
-const getRenderer = (renderer, operator) => (
-  // 1. Custom renderer
-  typeof renderer === "function" && renderer || // 2. Custom operator renderer
-  typeof renderer === "object" && operator && renderer[operator] || // 3. Custom DEFAULT renderer
-  typeof renderer === "object" && renderer[types.defaultRendererKey]
-);
-const Value = ({
-  id,
-  attribute,
-  operator,
-  value: valueProp
-}) => {
-  const { attributes, initialTouched, renderers, emptyRenderer } = Context.useQueryBuilderContext();
-  const attrType = attributes?.[attribute]?.type;
-  if (emptyRenderer?.find((op) => op === operator)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(EmptyValue.EmptyValue, { id });
-  }
-  if (attrType && renderers?.[attrType]) {
-    const Renderer = getRenderer(renderers[attrType], operator) || getRenderer(renderers[types.defaultRendererKey], operator) || void 0;
-    if (Renderer) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Renderer,
-        {
-          id,
-          attribute,
-          operator,
-          value: valueProp
-        }
-      );
-    }
-  }
-  switch (attrType) {
-    case "boolean": {
-      return /* @__PURE__ */ jsxRuntime.jsx(BooleanValue.BooleanValue, { id, value: !!valueProp });
-    }
-    case "numeric": {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        NumericValue.NumericValue,
-        {
-          id,
-          operator,
-          value: valueProp,
-          initialTouched
-        }
-      );
-    }
-    case "dateandtime": {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        DateTimeValue.DateTimeValue,
-        {
-          id,
-          operator,
-          value: valueProp,
-          initialTouched
-        }
-      );
-    }
-    case "text":
-    case "textarea":
-    default:
-      return /* @__PURE__ */ jsxRuntime.jsx(TextValue.TextValue, { id, value: valueProp, initialTouched });
-  }
-};
-exports.Value = Value;

package/dist/cjs/QueryBuilder/types.cjs

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const defaultRendererKey = "DEFAULT";
-exports.defaultRendererKey = defaultRendererKey;