@hitachivantara/uikit-react-core 5.16.0 → 5.18.0

package/dist/esm/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.js

@@ -0,0 +1,250 @@
+import { useContext, useState, useCallback, useMemo, memo } from "react";
+import uniqueId from "lodash/uniqueId";
+import dayjs from "dayjs";
+import { useTheme, useMediaQuery } from "@mui/material";
+import { QueryBuilderContext } from "../../../Context.js";
+import { padTime, parseDate, parseTime } from "./utils.js";
+import { useClasses } from "./DateTimeValue.styles.js";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { HvDatePicker } from "../../../../DatePicker/DatePicker.js";
+import { HvTimePicker } from "../../../../TimePicker/TimePicker.js";
+import { HvWarningText } from "../../../../Forms/WarningText/WarningText.js";
+function valueIsRange(operator) {
+  return operator === "range";
+}
+const DateTimeValue = ({
+  id,
+  operator,
+  value: valueProp = {},
+  initialTouched = false
+}) => {
+  var _a, _b, _c, _d;
+  const {
+    classes,
+    cx
+  } = useClasses();
+  const theme = useTheme();
+  const isMdDown = useMediaQuery(theme.breakpoints.down("md"));
+  const isRange = valueIsRange(operator);
+  const context = useContext(QueryBuilderContext);
+  const {
+    labels,
+    dispatchAction,
+    readOnly
+  } = context;
+  const elementId = uniqueId(`datetime${id}`);
+  const [touchedDate, setTouchedDate] = useState(initialTouched);
+  const [touchedTime, setTouchedTime] = useState(initialTouched);
+  const [touchedEndDate, setTouchedEndDate] = useState(initialTouched);
+  const [touchedEndTime, setTouchedEndTime] = useState(initialTouched);
+  const onDateChange = useCallback((data) => {
+    var _a2, _b2;
+    setTouchedDate(true);
+    let date;
+    if (data != null) {
+      date = dayjs(data).format("YYYY-MM-DD");
+    }
+    const oldValue = !isRange ? valueProp == null ? void 0 : valueProp.date : (_a2 = valueProp == null ? void 0 : valueProp.start) == null ? void 0 : _a2.date;
+    if (date !== oldValue) {
+      let value;
+      if (!isRange) {
+        value = {
+          date,
+          time: valueProp == null ? void 0 : valueProp.time
+        };
+      } else {
+        value = {
+          start: {
+            date,
+            time: (_b2 = valueProp == null ? void 0 : valueProp.start) == null ? void 0 : _b2.time
+          },
+          end: valueProp == null ? void 0 : valueProp.end
+        };
+      }
+      dispatchAction({
+        type: "set-value",
+        id,
+        value
+      });
+    }
+  }, [dispatchAction, id, isRange, valueProp]);
+  const onTimeChange = useCallback((data) => {
+    var _a2, _b2;
+    setTouchedTime(true);
+    let time;
+    if (data != null) {
+      time = `${padTime(data.hours)}:${padTime(data.minutes)}:${padTime(data.seconds)}`;
+    }
+    const oldValue = !isRange ? valueProp == null ? void 0 : valueProp.time : (_a2 = valueProp == null ? void 0 : valueProp.start) == null ? void 0 : _a2.time;
+    if (time !== oldValue) {
+      let value;
+      if (!isRange) {
+        value = {
+          date: valueProp == null ? void 0 : valueProp.date,
+          time
+        };
+      } else {
+        value = {
+          start: {
+            date: (_b2 = valueProp == null ? void 0 : valueProp.start) == null ? void 0 : _b2.date,
+            time
+          },
+          end: valueProp == null ? void 0 : valueProp.end
+        };
+      }
+      dispatchAction({
+        type: "set-value",
+        id,
+        value
+      });
+    }
+  }, [dispatchAction, id, isRange, valueProp]);
+  const onEndDateChange = useCallback((data) => {
+    var _a2, _b2;
+    setTouchedEndDate(true);
+    let date;
+    if (data != null) {
+      date = dayjs(data).format("YYYY-MM-DD");
+    }
+    if (date !== ((_a2 = valueProp == null ? void 0 : valueProp.end) == null ? void 0 : _a2.date)) {
+      const value = {
+        start: valueProp == null ? void 0 : valueProp.start,
+        end: {
+          date,
+          time: (_b2 = valueProp == null ? void 0 : valueProp.end) == null ? void 0 : _b2.time
+        }
+      };
+      dispatchAction({
+        type: "set-value",
+        id,
+        value
+      });
+    }
+  }, [dispatchAction, id, valueProp]);
+  const onEndTimeChange = useCallback((data) => {
+    var _a2, _b2;
+    setTouchedEndTime(true);
+    let time;
+    if (data != null) {
+      time = `${padTime(data.hours)}:${padTime(data.minutes)}:${padTime(data.seconds)}`;
+    }
+    if (time !== ((_a2 = valueProp == null ? void 0 : valueProp.end) == null ? void 0 : _a2.time)) {
+      const value = {
+        start: valueProp == null ? void 0 : valueProp.start,
+        end: {
+          date: (_b2 = valueProp == null ? void 0 : valueProp.end) == null ? void 0 : _b2.date,
+          time
+        }
+      };
+      dispatchAction({
+        type: "set-value",
+        id,
+        value
+      });
+    }
+  }, [dispatchAction, id, valueProp]);
+  const startDate = isRange ? (_a = valueProp == null ? void 0 : valueProp.start) == null ? void 0 : _a.date : valueProp == null ? void 0 : valueProp.date;
+  const datePickerValue = useMemo(() => parseDate(startDate), [startDate]);
+  const datePickerStatus = datePickerValue != null ? "valid" : "invalid";
+  const startTime = (isRange ? (_b = valueProp == null ? void 0 : valueProp.start) == null ? void 0 : _b.time : valueProp == null ? void 0 : valueProp.time) ?? "";
+  const timePickerValue = useMemo(() => parseTime(startTime), [startTime]);
+  const timePickerStatus = timePickerValue != null ? "valid" : "invalid";
+  const endDate = isRange ? (_c = valueProp == null ? void 0 : valueProp.end) == null ? void 0 : _c.date : null;
+  const endDatePickerValue = useMemo(() => parseDate(endDate), [endDate]);
+  const endTime = isRange ? (_d = valueProp == null ? void 0 : valueProp.end) == null ? void 0 : _d.time : null;
+  const endTimePickerValue = 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__ */ jsxs("div", {
+    className: classes.root,
+    children: [/* @__PURE__ */ jsxs("div", {
+      className: cx(classes.row, classes.horizontal, {
+        [classes.isMdDown]: isMdDown
+      }),
+      children: [/* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsxs("div", {
+      className: cx(classes.row, classes.vertical),
+      children: [/* @__PURE__ */ jsxs("div", {
+        className: cx(classes.horizontal, {
+          [classes.isMdDown]: isMdDown
+        }),
+        children: [/* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(HvWarningText, {
+        disableBorder: true,
+        id: `${elementId}-combined-error`,
+        isVisible: endDateTimeIsBefore,
+        children: labels.rule.value.datetime.validation.invalidInterval
+      })]
+    })]
+  });
+};
+memo(DateTimeValue);
+export {
+  DateTimeValue
+};
+//# sourceMappingURL=DateTimeValue.js.map

package/dist/esm/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeValue.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.tsx"],"sourcesContent":["import { memo, useCallback, useContext, useMemo, useState } from \"react\";\n\nimport uniqueId from \"lodash/uniqueId\";\n\nimport dayjs from \"dayjs\";\n\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { HvDatePicker, HvTimePicker, HvWarningText } from \"@core/components\";\n\nimport { QueryBuilderContext } from \"../../../Context\";\nimport { padTime, parseDate, parseTime } from \"./utils\";\nimport { useClasses } from \"./DateTimeValue.styles\";\n\nfunction valueIsRange(operator) {\n  return operator === \"range\";\n}\n\nexport interface DateTimeValueProps {\n  id: number;\n  operator: string;\n  value: any;\n  initialTouched: boolean;\n}\n\nexport const DateTimeValue = ({\n  id,\n  operator,\n  value: valueProp = {},\n  initialTouched = false,\n}: DateTimeValueProps) => {\n  const { classes, cx } = useClasses();\n\n  const theme = useTheme();\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const isRange = valueIsRange(operator);\n\n  const context = useContext(QueryBuilderContext);\n  const { labels, dispatchAction, readOnly } = context;\n\n  const elementId = uniqueId(`datetime${id}`);\n\n  const [touchedDate, setTouchedDate] = useState(initialTouched);\n  const [touchedTime, setTouchedTime] = useState(initialTouched);\n  const [touchedEndDate, setTouchedEndDate] = useState(initialTouched);\n  const [touchedEndTime, setTouchedEndTime] = useState(initialTouched);\n\n  const onDateChange = useCallback(\n    (data) => {\n      setTouchedDate(true);\n\n      let date;\n      if (data != null) {\n        date = dayjs(data).format(\"YYYY-MM-DD\");\n      }\n\n      const oldValue = !isRange ? valueProp?.date : valueProp?.start?.date;\n\n      if (date !== oldValue) {\n        let value;\n        if (!isRange) {\n          value = {\n            date,\n            time: valueProp?.time,\n          };\n        } else {\n          value = {\n            start: {\n              date,\n              time: valueProp?.start?.time,\n            },\n            end: valueProp?.end,\n          };\n        }\n\n        dispatchAction({\n          type: \"set-value\",\n          id,\n          value,\n        });\n      }\n    },\n    [dispatchAction, id, isRange, valueProp]\n  );\n\n  const onTimeChange = useCallback(\n    (data) => {\n      setTouchedTime(true);\n\n      let time;\n      if (data != null) {\n        time = `${padTime(data.hours)}:${padTime(data.minutes)}:${padTime(\n          data.seconds\n        )}`;\n      }\n\n      const oldValue = !isRange ? valueProp?.time : valueProp?.start?.time;\n\n      if (time !== oldValue) {\n        let value;\n        if (!isRange) {\n          value = {\n            date: valueProp?.date,\n            time,\n          };\n        } else {\n          value = {\n            start: {\n              date: valueProp?.start?.date,\n              time,\n            },\n            end: valueProp?.end,\n          };\n        }\n\n        dispatchAction({\n          type: \"set-value\",\n          id,\n          value,\n        });\n      }\n    },\n    [dispatchAction, id, isRange, valueProp]\n  );\n\n  const onEndDateChange = useCallback(\n    (data) => {\n      setTouchedEndDate(true);\n\n      let date;\n      if (data != null) {\n        date = dayjs(data).format(\"YYYY-MM-DD\");\n      }\n\n      if (date !== valueProp?.end?.date) {\n        const value = {\n          start: valueProp?.start,\n          end: {\n            date,\n            time: valueProp?.end?.time,\n          },\n        };\n\n        dispatchAction({\n          type: \"set-value\",\n          id,\n          value,\n        });\n      }\n    },\n    [dispatchAction, id, valueProp]\n  );\n\n  const onEndTimeChange = useCallback(\n    (data) => {\n      setTouchedEndTime(true);\n\n      let time;\n      if (data != null) {\n        time = `${padTime(data.hours)}:${padTime(data.minutes)}:${padTime(\n          data.seconds\n        )}`;\n      }\n\n      if (time !== valueProp?.end?.time) {\n        const value = {\n          start: valueProp?.start,\n          end: {\n            date: valueProp?.end?.date,\n            time,\n          },\n        };\n\n        dispatchAction({\n          type: \"set-value\",\n          id,\n          value,\n        });\n      }\n    },\n    [dispatchAction, id, valueProp]\n  );\n\n  const startDate = isRange ? valueProp?.start?.date : valueProp?.date;\n  const datePickerValue = useMemo(() => parseDate(startDate), [startDate]);\n  const datePickerStatus = datePickerValue != null ? \"valid\" : \"invalid\";\n\n  const startTime = (isRange ? valueProp?.start?.time : valueProp?.time) ?? \"\";\n  const timePickerValue = useMemo(() => parseTime(startTime), [startTime]);\n  const timePickerStatus = timePickerValue != null ? \"valid\" : \"invalid\";\n\n  const endDate = isRange ? valueProp?.end?.date : null;\n  const endDatePickerValue = useMemo(() => parseDate(endDate), [endDate]);\n\n  const endTime = isRange ? valueProp?.end?.time : null;\n  const endTimePickerValue = useMemo(() => parseTime(endTime), [endTime]);\n\n  const dateStatus = !touchedDate ? \"standBy\" : datePickerStatus;\n  const timeStatus = !touchedTime ? \"standBy\" : timePickerStatus;\n\n  const endDateIsBefore =\n    startDate != null && endDate != null && endDate < startDate;\n\n  const endTimeIsBeforeOrSame =\n    startDate != null &&\n    endDate != null &&\n    endDate === startDate &&\n    startTime != null &&\n    endTime != null &&\n    endTime <= startTime;\n\n  const endDateTimeIsBefore = endDateIsBefore || endTimeIsBeforeOrSame;\n\n  const endDatePickerStatus =\n    endDatePickerValue == null || endDateTimeIsBefore ? \"invalid\" : \"valid\";\n  const endDateStatus = !touchedEndDate ? \"standBy\" : endDatePickerStatus;\n\n  const endTimePickerStatus =\n    endTimePickerValue == null || endDateTimeIsBefore ? \"invalid\" : \"valid\";\n  const endTimeStatus = !touchedEndTime ? \"standBy\" : endTimePickerStatus;\n\n  return (\n    <div className={classes.root}>\n      <div\n        className={cx(classes.row, classes.horizontal, {\n          [classes.isMdDown]: isMdDown,\n        })}\n      >\n        <HvDatePicker\n          className={classes.datePicker}\n          name={`${elementId}-date`}\n          required\n          status={dateStatus}\n          statusMessage={labels.rule.value.datetime.validation.required}\n          label={\n            isRange\n              ? labels.rule.value.datetime.startDateLabel\n              : labels.rule.value.datetime.dateLabel\n          }\n          placeholder={\n            isRange\n              ? labels.rule.value.datetime.startDatePlaceholder\n              : labels.rule.value.datetime.datePlaceholder\n          }\n          value={datePickerValue}\n          onChange={onDateChange}\n          readOnly={readOnly}\n        />\n        <HvTimePicker\n          className={classes.timePicker}\n          timeFormat=\"24\"\n          name={`${elementId}-time`}\n          required\n          status={timeStatus}\n          statusMessage={labels.rule.value.datetime.validation.required}\n          label={\n            isRange\n              ? labels.rule.value.datetime.startTimeLabel\n              : labels.rule.value.datetime.timeLabel\n          }\n          placeholder={\n            isRange\n              ? labels.rule.value.datetime.startTimePlaceholder\n              : labels.rule.value.datetime.timePlaceholder\n          }\n          value={timePickerValue || undefined}\n          onChange={onTimeChange}\n          onToggle={(_evt, open) => {\n            if (!open && !touchedTime) {\n              setTouchedTime(true);\n            }\n          }}\n          readOnly={readOnly}\n        />\n      </div>\n      {isRange && (\n        <div className={cx(classes.row, classes.vertical)}>\n          <div\n            className={cx(classes.horizontal, {\n              [classes.isMdDown]: isMdDown,\n            })}\n          >\n            <HvDatePicker\n              className={classes.datePicker}\n              name={`${elementId}-endDate`}\n              required\n              status={endDateStatus}\n              statusMessage={labels.rule.value.datetime.validation.required}\n              aria-errormessage={\n                endDateTimeIsBefore ? `${elementId}-combined-error` : undefined\n              }\n              label={labels.rule.value.datetime.endDateLabel}\n              placeholder={labels.rule.value.datetime.endDatePlaceholder}\n              value={endDatePickerValue}\n              onChange={onEndDateChange}\n              readOnly={readOnly}\n            />\n            <HvTimePicker\n              className={classes.timePicker}\n              timeFormat=\"24\"\n              name={`${elementId}-endTime`}\n              required\n              status={endTimeStatus}\n              statusMessage={labels.rule.value.datetime.validation.required}\n              aria-errormessage={\n                endDateTimeIsBefore ? `${elementId}-combined-error` : undefined\n              }\n              label={labels.rule.value.datetime.endTimeLabel}\n              placeholder={labels.rule.value.datetime.endTimePlaceholder}\n              value={endTimePickerValue || undefined}\n              onChange={onEndTimeChange}\n              onToggle={(_evt, open) => {\n                if (!open && !touchedEndTime) {\n                  setTouchedEndTime(true);\n                }\n              }}\n              readOnly={readOnly}\n            />\n          </div>\n          <HvWarningText\n            disableBorder\n            id={`${elementId}-combined-error`}\n            isVisible={endDateTimeIsBefore}\n          >\n            {labels.rule.value.datetime.validation.invalidInterval}\n          </HvWarningText>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default memo(DateTimeValue);\n"],"names":["valueIsRange","operator","DateTimeValue","id","value","valueProp","initialTouched","classes","cx","useClasses","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","isRange","context","useContext","QueryBuilderContext","labels","dispatchAction","readOnly","elementId","uniqueId","touchedDate","setTouchedDate","useState","touchedTime","setTouchedTime","touchedEndDate","setTouchedEndDate","touchedEndTime","setTouchedEndTime","onDateChange","useCallback","data","date","dayjs","format","oldValue","start","time","end","type","onTimeChange","padTime","hours","minutes","seconds","onEndDateChange","onEndTimeChange","startDate","datePickerValue","useMemo","parseDate","datePickerStatus","startTime","timePickerValue","parseTime","timePickerStatus","endDate","endDatePickerValue","endTime","endTimePickerValue","dateStatus","timeStatus","endDateIsBefore","endTimeIsBeforeOrSame","endDateTimeIsBefore","endDatePickerStatus","endDateStatus","endTimePickerStatus","endTimeStatus","className","root","children","_jsxs","row","horizontal","_jsx","HvDatePicker","datePicker","name","required","status","statusMessage","rule","datetime","validation","label","startDateLabel","dateLabel","placeholder","startDatePlaceholder","datePlaceholder","onChange","HvTimePicker","timePicker","timeFormat","startTimeLabel","timeLabel","startTimePlaceholder","timePlaceholder","undefined","onToggle","_evt","open","vertical","endDateLabel","endDatePlaceholder","endTimeLabel","endTimePlaceholder","HvWarningText","disableBorder","isVisible","invalidInterval","memo"],"mappings":"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"}

package/dist/esm/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.js

@@ -0,0 +1,40 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../../../../utils/classes.js";
+const {
+  useClasses,
+  staticClasses
+} = createClasses("HvQueryBuilder-DateTimeValue", {
+  root: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  row: {
+    minHeight: 94
+  },
+  vertical: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  horizontal: {
+    display: "flex",
+    "& > div:not(:last-child)": {
+      marginRight: theme.space.md
+    }
+  },
+  isMdDown: {
+    "& > div:not(:last-child)": {
+      marginRight: `calc(${theme.space.md} / 2)`
+    }
+  },
+  datePicker: {
+    flex: "0 1 300px"
+  },
+  timePicker: {
+    flex: "0 1 220px"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=DateTimeValue.styles.js.map

package/dist/esm/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeValue.styles.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-DateTimeValue\",\n  {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    row: {\n      minHeight: 94,\n    },\n    vertical: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    horizontal: {\n      display: \"flex\",\n\n      \"& > div:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n    },\n    isMdDown: {\n      \"& > div:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n    datePicker: {\n      flex: \"0 1 300px\",\n    },\n    timePicker: {\n      flex: \"0 1 220px\",\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","display","flexDirection","row","minHeight","vertical","horizontal","marginRight","theme","space","md","isMdDown","datePicker","flex","timePicker"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,gCACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,EACjB;AAAA,EACAC,KAAK;AAAA,IACHC,WAAW;AAAA,EACb;AAAA,EACAC,UAAU;AAAA,IACRJ,SAAS;AAAA,IACTC,eAAe;AAAA,EACjB;AAAA,EACAI,YAAY;AAAA,IACVL,SAAS;AAAA,IAET,4BAA4B;AAAA,MAC1BM,aAAaC,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACR,4BAA4B;AAAA,MAC1BJ,aAAc,QAAOC,MAAMC,MAAMC;AAAAA,IACnC;AAAA,EACF;AAAA,EACAE,YAAY;AAAA,IACVC,MAAM;AAAA,EACR;AAAA,EACAC,YAAY;AAAA,IACVD,MAAM;AAAA,EACR;AACF,CACF;"}

package/dist/esm/components/QueryBuilder/Rule/Value/DateTimeValue/utils.js

@@ -0,0 +1,35 @@
+import dayjs from "dayjs";
+const padTime = (value) => {
+  if (!value || value < 0) {
+    return "00";
+  }
+  if (value < 10 && value.toString().length === 1) {
+    return `0${value.toString()}`;
+  }
+  return value.toString();
+};
+const parseDate = (date) => {
+  if (date != null) {
+    return dayjs(date).toDate();
+  }
+  return void 0;
+};
+const parseTime = (time) => {
+  if (time != null) {
+    const parts = time.split(":");
+    if (parts.length === 3) {
+      return {
+        hours: Number.parseInt(parts[0], 10),
+        minutes: Number.parseInt(parts[1], 10),
+        seconds: Number.parseInt(parts[2], 10)
+      };
+    }
+  }
+  return null;
+};
+export {
+  padTime,
+  parseDate,
+  parseTime
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/QueryBuilder/Rule/Value/DateTimeValue/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/DateTimeValue/utils.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\n\n/**\n * Pads the unit time values so that they always have two digits\n * @param {Number} value - unit time value\n * @returns The unit time value with two digits\n */\nexport const padTime = (value) => {\n  if (!value || value < 0) {\n    return \"00\";\n  }\n  if (value < 10 && value.toString().length === 1) {\n    return `0${value.toString()}`;\n  }\n\n  return value.toString();\n};\n\nexport const parseDate = (date) => {\n  if (date != null) {\n    return dayjs(date).toDate();\n  }\n\n  return undefined;\n};\n\nexport const parseTime = (time) => {\n  if (time != null) {\n    const parts = time.split(\":\");\n\n    if (parts.length === 3) {\n      return {\n        hours: Number.parseInt(parts[0], 10),\n        minutes: Number.parseInt(parts[1], 10),\n        seconds: Number.parseInt(parts[2], 10),\n      };\n    }\n  }\n\n  return null;\n};\n"],"names":["padTime","value","toString","length","parseDate","date","dayjs","toDate","undefined","parseTime","time","parts","split","hours","Number","parseInt","minutes","seconds"],"mappings":";AAOO,MAAMA,UAAWC,CAAU,UAAA;AAC5B,MAAA,CAACA,SAASA,QAAQ,GAAG;AAChB,WAAA;AAAA,EACT;AACA,MAAIA,QAAQ,MAAMA,MAAMC,SAAS,EAAEC,WAAW,GAAG;AACvC,WAAA,IAAGF,MAAMC,SAAS;AAAA,EAC5B;AAEA,SAAOD,MAAMC;AACf;AAEO,MAAME,YAAaC,CAAS,SAAA;AACjC,MAAIA,QAAQ,MAAM;AACTC,WAAAA,MAAMD,IAAI,EAAEE;EACrB;AAEOC,SAAAA;AACT;AAEO,MAAMC,YAAaC,CAAS,SAAA;AACjC,MAAIA,QAAQ,MAAM;AACVC,UAAAA,QAAQD,KAAKE,MAAM,GAAG;AAExBD,QAAAA,MAAMR,WAAW,GAAG;AACf,aAAA;AAAA,QACLU,OAAOC,OAAOC,SAASJ,MAAM,CAAC,GAAG,EAAE;AAAA,QACnCK,SAASF,OAAOC,SAASJ,MAAM,CAAC,GAAG,EAAE;AAAA,QACrCM,SAASH,OAAOC,SAASJ,MAAM,CAAC,GAAG,EAAE;AAAA,MAAA;AAAA,IAEzC;AAAA,EACF;AAEO,SAAA;AACT;"}

package/dist/esm/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.js

@@ -1,6 +1,9 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import numericValueClasses from "./numericValueClasses.js";
-const styles = {
+import { createClasses } from "../../../../../utils/classes.js";
+const {
+  useClasses,
+  staticClasses
+} = createClasses("HvQueryBuilder-NumericValue", {
   root: {
     display: "flex",
     flexGrow: 1
@@ -16,7 +19,7 @@ const styles = {
   rangeContainer: {
     display: "flex",
     flexGrow: 1,
-    [`& > .${numericValueClasses.inputContainer}:not(:last-child)`]: {
+    "& > $inputContainer:not(:last-child)": {
       marginRight: theme.space.md
     }
   },
@@ -24,12 +27,13 @@ const styles = {
     flexGrow: 1
   },
   isMdDown: {
-    [`& > .${numericValueClasses.inputContainer}:not(:last-child)`]: {
+    "& > $inputContainer:not(:last-child)": {
       marginRight: `calc(${theme.space.md} / 2)`
     }
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Numeric.styles.js.map

package/dist/esm/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Numeric.styles.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport numericValueClasses, {\n  HvNumericValueClasses,\n} from \"./numericValueClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvNumericValueClasses, CSSInterpolation>\n> = {\n  root: {\n    display: \"flex\",\n    flexGrow: 1,\n  },\n  label: {\n    paddingBottom: \"6px\",\n  },\n  inputContainer: {\n    display: \"flex\",\n    alignItems: \"baseline\",\n    flexGrow: 1,\n  },\n  rangeContainer: {\n    display: \"flex\",\n    flexGrow: 1,\n\n    [`& > .${numericValueClasses.inputContainer}:not(:last-child)`]: {\n      marginRight: theme.space.md,\n    },\n  },\n  input: {\n    flexGrow: 1,\n  },\n  isMdDown: {\n    [`& > .${numericValueClasses.inputContainer}:not(:last-child)`]: {\n      marginRight: `calc(${theme.space.md} / 2)`,\n    },\n  },\n};\n"],"names":["styles","root","display","flexGrow","label","paddingBottom","inputContainer","alignItems","rangeContainer","numericValueClasses","marginRight","theme","space","md","input","isMdDown"],"mappings":";;AAMO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,UAAU;AAAA,EACZ;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,EACjB;AAAA,EACAC,gBAAgB;AAAA,IACdJ,SAAS;AAAA,IACTK,YAAY;AAAA,IACZJ,UAAU;AAAA,EACZ;AAAA,EACAK,gBAAgB;AAAA,IACdN,SAAS;AAAA,IACTC,UAAU;AAAA,IAEV,CAAE,QAAOM,oBAAoBH,iCAAiC,GAAG;AAAA,MAC/DI,aAAaC,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLX,UAAU;AAAA,EACZ;AAAA,EACAY,UAAU;AAAA,IACR,CAAE,QAAON,oBAAoBH,iCAAiC,GAAG;AAAA,MAC/DI,aAAc,QAAOC,MAAMC,MAAMC;AAAAA,IACnC;AAAA,EACF;AACF;"}
+{"version":3,"file":"Numeric.styles.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-NumericValue\",\n  {\n    root: {\n      display: \"flex\",\n      flexGrow: 1,\n    },\n    label: {\n      paddingBottom: \"6px\",\n    },\n    inputContainer: {\n      display: \"flex\",\n      alignItems: \"baseline\",\n      flexGrow: 1,\n    },\n    rangeContainer: {\n      display: \"flex\",\n      flexGrow: 1,\n\n      \"& > $inputContainer:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n    },\n    input: {\n      flexGrow: 1,\n    },\n    isMdDown: {\n      \"& > $inputContainer:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","display","flexGrow","label","paddingBottom","inputContainer","alignItems","rangeContainer","marginRight","theme","space","md","input","isMdDown"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,+BACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,UAAU;AAAA,EACZ;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,EACjB;AAAA,EACAC,gBAAgB;AAAA,IACdJ,SAAS;AAAA,IACTK,YAAY;AAAA,IACZJ,UAAU;AAAA,EACZ;AAAA,EACAK,gBAAgB;AAAA,IACdN,SAAS;AAAA,IACTC,UAAU;AAAA,IAEV,wCAAwC;AAAA,MACtCM,aAAaC,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLV,UAAU;AAAA,EACZ;AAAA,EACAW,UAAU;AAAA,IACR,wCAAwC;AAAA,MACtCL,aAAc,QAAOC,MAAMC,MAAMC;AAAAA,IACnC;AAAA,EACF;AACF,CACF;"}

package/dist/esm/components/QueryBuilder/Rule/Value/NumericValue/NumericValue.js

@@ -1,12 +1,10 @@
 import { useContext, useCallback, useState, memo } from "react";
 import uniqueId from "lodash/uniqueId";
 import isEmpty from "lodash/isEmpty";
-import { ClassNames } from "@emotion/react";
 import { useTheme, useMediaQuery } from "@mui/material";
 import { QueryBuilderContext } from "../../../Context.js";
-import { styles } from "./Numeric.styles.js";
-import numericValueClasses from "./numericValueClasses.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useClasses } from "./Numeric.styles.js";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvInput } from "../../../../Input/Input.js";
 const NumericValue = ({
   id,
@@ -15,6 +13,10 @@ const NumericValue = ({
   initialTouched = false
 }) => {
   var _a, _b;
+  const {
+    classes,
+    cx
+  } = useClasses();
   const isRange = operator === "range";
   const context = useContext(QueryBuilderContext);
   const {
@@ -87,85 +89,21 @@ const NumericValue = ({
   }
   const numericStatus = numericValidation != null ? "invalid" : "valid";
   const rightStatus = rightValidation != null ? "invalid" : "valid";
-  const renderRangeInputs = (rangeValue) => /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => {
-      var _a2, _b2;
-      return /* @__PURE__ */ jsxs("div", {
-        className: cx(numericValueClasses.rangeContainer, css(styles.rangeContainer), isMdDown ? cx(numericValueClasses.isMdDown, css(styles.isMdDown)) : ""),
-        children: [/* @__PURE__ */ jsx("div", {
-          className: cx(numericValueClasses.inputContainer, css(styles.inputContainer)),
-          children: /* @__PURE__ */ jsx(HvInput, {
-            label: labels.rule.value.numeric.range.leftLabel,
-            className: cx(numericValueClasses.input, css(styles.input)),
-            id: `${elementId}-numeric-from`,
-            name: `${elementId}-numeric-from`,
-            value: ((_a2 = rangeValue == null ? void 0 : rangeValue.from) == null ? void 0 : _a2.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__ */ jsx("div", {
-          className: cx(numericValueClasses.inputContainer, css(styles.inputContainer)),
-          children: /* @__PURE__ */ jsx(HvInput, {
-            label: labels.rule.value.numeric.range.rightLabel,
-            className: cx(numericValueClasses.input, css(styles.input)),
-            id: `${elementId}-numeric-to`,
-            name: `${elementId}-numeric-to`,
-            value: ((_b2 = rangeValue == null ? void 0 : rangeValue.to) == null ? void 0 : _b2.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__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxs("div", {
-      className: cx(numericValueClasses.root, css(styles.root)),
-      children: [isRange && renderRangeInputs(value || {}), !isRange && /* @__PURE__ */ jsx("div", {
-        className: cx(numericValueClasses.inputContainer, css(styles.inputContainer)),
+  const renderRangeInputs = (rangeValue) => {
+    var _a2, _b2;
+    return /* @__PURE__ */ jsxs("div", {
+      className: cx(classes.rangeContainer, {
+        [classes.isMdDown]: isMdDown
+      }),
+      children: [/* @__PURE__ */ jsx("div", {
+        className: classes.inputContainer,
         children: /* @__PURE__ */ jsx(HvInput, {
-          label: labels.rule.value.numeric.label,
-          className: cx(numericValueClasses.input, css(styles.input)),
-          id: `${elementId}-numeric`,
-          name: `${elementId}-numeric`,
-          value: value ? value.toString() : "",
-          onChange: onSingleValueChange,
+          label: labels.rule.value.numeric.range.leftLabel,
+          className: classes.input,
+          id: `${elementId}-numeric-from`,
+          name: `${elementId}-numeric-from`,
+          value: ((_a2 = rangeValue == null ? void 0 : rangeValue.from) == null ? void 0 : _a2.toString()) || "",
+          onChange: (event, data) => onRangeValueChange(event, data),
           onBlur: () => {
             setTouchedNumeric(true);
           },
@@ -175,16 +113,72 @@ const NumericValue = ({
             }
           },
           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__ */ jsx("div", {
+        className: classes.inputContainer,
+        children: /* @__PURE__ */ jsx(HvInput, {
+          label: labels.rule.value.numeric.range.rightLabel,
+          className: classes.input,
+          id: `${elementId}-numeric-to`,
+          name: `${elementId}-numeric-to`,
+          value: ((_b2 = rangeValue == null ? void 0 : rangeValue.to) == null ? void 0 : _b2.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,
-          statusMessage: numericValidation ? labels.rule.value.numeric.validation[numericValidation] : "",
           readOnly
         })
       })]
-    })
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    className: classes.root,
+    children: [isRange && renderRangeInputs(value || {}), !isRange && /* @__PURE__ */ jsx("div", {
+      className: classes.inputContainer,
+      children: /* @__PURE__ */ jsx(HvInput, {
+        label: labels.rule.value.numeric.label,
+        className: classes.input,
+        id: `${elementId}-numeric`,
+        name: `${elementId}-numeric`,
+        value: 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
+      })
+    })]
   });
 };
 memo(NumericValue);