@hitachivantara/uikit-react-core 5.16.0 → 5.17.0

package/dist/cjs/components/QueryBuilder/RuleGroup/RuleGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RuleGroup.cjs","sources":["../../../../../src/components/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback, useContext } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvButton,\n  HvEmptyState,\n  HvGrid,\n  HvMultiButton,\n  HvTypography,\n} from \"@core/components\";\nimport { withTooltip } from \"@core/hocs\";\nimport { ClassNames } from \"@emotion/react\";\nimport { Rule } from \"../Rule\";\nimport queryBuilderClasses, {\n  HvQueryBuilderClasses,\n} from \"../queryBuilderClasses\";\nimport { QueryBuilderContext } from \"../Context\";\nimport { styles } from \"./RuleGroup.styles\";\n\nexport interface RuleGroupProps {\n  /**\n   * Override or extend the styles applied to the component.\n   * See CSS API tab for more details.\n   */\n  classes?: HvQueryBuilderClasses;\n  id?: number;\n  level?: number;\n  combinator?: string;\n  rules?: any[];\n}\n\nexport const RuleGroup = ({\n  level = 0,\n  id,\n  combinator = \"and\",\n  rules = [],\n  classes,\n}: RuleGroupProps) => {\n  const context = useContext(QueryBuilderContext);\n\n  const { dispatchAction, askAction, maxDepth, combinators, labels, readOnly } =\n    context;\n  const normalizedMaxDepth = maxDepth - 1;\n\n  const actionButtons = (\n    <ClassNames>\n      {({ css, cx }) => (\n        <>\n          <div\n            className={cx(\n              queryBuilderClasses.buttonBackground,\n              css(styles.buttonBackground),\n              classes?.buttonBackground\n            )}\n          >\n            <HvButton\n              variant=\"secondarySubtle\"\n              onClick={() => {\n                dispatchAction({ type: \"add-rule\", id });\n              }}\n              disabled={readOnly}\n              startIcon={<Add />}\n            >\n              {level === 0 && labels.query?.addRule?.label != null\n                ? labels.query?.addRule?.label\n                : labels.group.addRule.label}\n            </HvButton>\n          </div>\n          {level <= normalizedMaxDepth && (\n            <div\n              className={cx(\n                queryBuilderClasses.buttonBackground,\n                css(styles.buttonBackground),\n                classes?.buttonBackground\n              )}\n            >\n              <HvButton\n                variant=\"secondarySubtle\"\n                onClick={() => {\n                  dispatchAction({ type: \"add-group\", id });\n                }}\n                disabled={readOnly}\n                startIcon={<Add />}\n              >\n                {level === 0 && labels.query?.addGroup?.label != null\n                  ? labels.query?.addGroup?.label\n                  : labels.group.addGroup.label}\n              </HvButton>\n            </div>\n          )}\n        </>\n      )}\n    </ClassNames>\n  );\n\n  const DeleteIcon = withTooltip(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <Delete\n            className={\n              readOnly\n                ? cx(\n                    queryBuilderClasses.topRemoveButtonDisabled,\n                    css(styles.topRemoveButtonDisabled),\n                    classes?.topRemoveButtonDisabled\n                  )\n                : \"\"\n            }\n          />\n        )}\n      </ClassNames>\n    ),\n    level === 0 && labels.query?.delete?.tooltip\n      ? labels.query?.delete?.tooltip\n      : labels.group.delete.tooltip,\n    \"top\"\n  );\n\n  const onClickCombinator = useCallback(\n    (item) => {\n      dispatchAction({\n        type: \"set-combinator\",\n        id,\n        combinator: item.operand,\n      });\n    },\n    [dispatchAction, id]\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            queryBuilderClasses.root,\n            level === 0\n              ? queryBuilderClasses.topGroup\n              : queryBuilderClasses.subGroup,\n            css(styles.root),\n            level === 0 ? css(styles.topGroup) : css(styles.subGroup),\n            classes?.root,\n            level === 0 ? classes?.topGroup : classes?.subGroup\n          )}\n        >\n          <HvGrid container>\n            <HvGrid item>\n              <HvMultiButton\n                className={cx(\n                  queryBuilderClasses.combinator,\n                  queryBuilderClasses.topCombinator,\n                  css(styles.combinator),\n                  css(styles.topCombinator),\n                  classes?.combinator,\n                  classes?.topCombinator\n                )}\n                disabled={readOnly}\n              >\n                {combinators &&\n                  combinators.map((item) => (\n                    <HvButton\n                      key={item.operand}\n                      className={cx(\n                        queryBuilderClasses.combinatorButton,\n                        css(styles.combinatorButton),\n                        classes?.combinatorButton\n                      )}\n                      selected={item.operand === combinator}\n                      onClick={() => item.operand && onClickCombinator(item)}\n                      disabled={readOnly}\n                      size=\"xs\"\n                    >\n                      {item.label}\n                    </HvButton>\n                  ))}\n              </HvMultiButton>\n            </HvGrid>\n            <HvGrid item>\n              <div\n                className={cx(\n                  queryBuilderClasses.buttonBackground,\n                  queryBuilderClasses.topRemoveButton,\n                  css(styles.buttonBackground),\n                  css(styles.topRemoveButton),\n                  classes?.buttonBackground,\n                  classes?.topRemoveButton\n                )}\n              >\n                <HvButton\n                  icon\n                  className={cx(\n                    queryBuilderClasses.removeButton,\n                    css(styles.removeButton),\n                    classes?.removeButton\n                  )}\n                  onClick={() => {\n                    askAction({\n                      actions: [{ type: \"remove-node\", id }],\n                      dialog:\n                        level === 0 && labels.query?.delete != null\n                          ? labels.query.delete\n                          : labels.group.delete,\n                    });\n                  }}\n                  aria-label={\n                    level === 0 && labels.query?.delete?.ariaLabel\n                      ? labels.query?.delete?.ariaLabel\n                      : labels.group.delete.ariaLabel\n                  }\n                  disabled={readOnly}\n                  variant=\"secondaryGhost\"\n                >\n                  <DeleteIcon />\n                </HvButton>\n              </div>\n            </HvGrid>\n          </HvGrid>\n          {rules?.length > 0 && (\n            <div\n              className={cx(\n                queryBuilderClasses.rulesContainer,\n                level > 0 && queryBuilderClasses.subRulesContainer,\n                level === 0 && queryBuilderClasses.topRulesContainer,\n                css(styles.rulesContainer),\n                level > 0 && css(styles.subRulesContainer),\n                level === 0 && css(styles.topRulesContainer),\n                classes?.rulesContainer,\n                level > 0 && classes?.subRulesContainer,\n                level === 0 && classes?.topRulesContainer\n              )}\n            >\n              {rules.map((rule, index) => {\n                if (\"combinator\" in rule) {\n                  return (\n                    <RuleGroup\n                      key={rule.id ?? index}\n                      level={level + 1}\n                      {...rule}\n                      id={rule.id}\n                      classes={classes}\n                    />\n                  );\n                }\n\n                const isInvalid =\n                  combinator === \"and\" &&\n                  rules.some((r, i) => {\n                    if (\"attribute\" in r) {\n                      if (\n                        r.attribute === rule.attribute &&\n                        r.id !== rule.id &&\n                        i < index\n                      ) {\n                        return true;\n                      }\n                    }\n                    return false;\n                  });\n\n                return (\n                  <Rule\n                    key={rule.id ?? index}\n                    {...rule}\n                    isInvalid={isInvalid}\n                    id={rule.id}\n                    combinator={combinator}\n                  />\n                );\n              })}\n            </div>\n          )}\n          {rules?.length === 0 && (\n            <HvEmptyState\n              title={labels.empty?.title}\n              message={\n                <>\n                  <HvTypography\n                    variant=\"link\"\n                    component=\"a\"\n                    onClick={() => {\n                      dispatchAction({ type: \"add-rule\", id });\n                    }}\n                    style={{ cursor: \"pointer\", textDecoration: \"underline\" }}\n                  >\n                    {`${labels.empty?.createCondition}`}\n                  </HvTypography>\n                  {level <= normalizedMaxDepth && (\n                    <>\n                      {`${labels.empty?.spacer}`}\n                      <HvTypography\n                        variant=\"link\"\n                        component=\"a\"\n                        onClick={() => {\n                          dispatchAction({ type: \"add-group\", id });\n                        }}\n                        style={{\n                          cursor: \"pointer\",\n                          textDecoration: \"underline\",\n                        }}\n                      >\n                        {`${labels.empty?.createGroup}`}\n                      </HvTypography>\n                    </>\n                  )}\n                </>\n              }\n              icon={<Info />}\n            />\n          )}\n          <HvGrid container>\n            <HvGrid\n              item\n              className={cx(\n                queryBuilderClasses.actionButtonContainer,\n                queryBuilderClasses.topActionButtonContainer,\n                css(styles.actionButtonContainer),\n                css(styles.topActionButtonContainer),\n                classes?.actionButtonContainer,\n                classes?.topActionButtonContainer\n              )}\n            >\n              {actionButtons}\n            </HvGrid>\n          </HvGrid>\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["RuleGroup","level","id","combinator","rules","classes","context","useContext","QueryBuilderContext","dispatchAction","askAction","maxDepth","combinators","labels","readOnly","normalizedMaxDepth","actionButtons","ClassNames","children","css","cx","_Fragment","_jsx","className","queryBuilderClasses","buttonBackground","styles","HvButton","variant","onClick","type","disabled","startIcon","Add","query","addRule","label","group","addGroup","DeleteIcon","withTooltip","Delete","topRemoveButtonDisabled","delete","tooltip","onClickCombinator","useCallback","item","operand","root","topGroup","subGroup","_jsxs","HvGrid","container","HvMultiButton","topCombinator","map","combinatorButton","selected","size","topRemoveButton","icon","removeButton","actions","dialog","ariaLabel","length","rulesContainer","subRulesContainer","topRulesContainer","rule","index","isInvalid","some","r","i","attribute","Rule","HvEmptyState","title","empty","message","HvTypography","component","style","cursor","textDecoration","createCondition","spacer","createGroup","Info","actionButtonContainer","topActionButtonContainer"],"mappings":"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"}
+{"version":3,"file":"RuleGroup.cjs","sources":["../../../../../src/components/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback, useContext } from \"react\";\n\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvButton,\n  HvEmptyState,\n  HvGrid,\n  HvMultiButton,\n  HvTypography,\n} from \"@core/components\";\nimport { withTooltip } from \"@core/hocs\";\n\nimport { Rule } from \"../Rule\";\nimport { QueryBuilderContext } from \"../Context\";\nimport { HvQueryBuilderClasses } from \"../QueryBuilder\";\nimport { useClasses } from \"../QueryBuilder.styles\";\n\nexport interface RuleGroupProps {\n  /**\n   * Override or extend the styles applied to the component.\n   * See CSS API tab for more details.\n   */\n  classes?: HvQueryBuilderClasses;\n  id?: number;\n  level?: number;\n  combinator?: string;\n  rules?: any[];\n}\n\nexport const RuleGroup = ({\n  level = 0,\n  id,\n  combinator = \"and\",\n  rules = [],\n  classes: classesProp = {},\n}: RuleGroupProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const context = useContext(QueryBuilderContext);\n\n  const { dispatchAction, askAction, maxDepth, combinators, labels, readOnly } =\n    context;\n  const normalizedMaxDepth = maxDepth - 1;\n\n  const actionButtons = (\n    <>\n      <div className={classes.buttonBackground}>\n        <HvButton\n          variant=\"secondarySubtle\"\n          onClick={() => {\n            dispatchAction({ type: \"add-rule\", id });\n          }}\n          disabled={readOnly}\n          startIcon={<Add />}\n        >\n          {level === 0 && labels.query?.addRule?.label != null\n            ? labels.query?.addRule?.label\n            : labels.group.addRule.label}\n        </HvButton>\n      </div>\n      {level <= normalizedMaxDepth && (\n        <div className={classes.buttonBackground}>\n          <HvButton\n            variant=\"secondarySubtle\"\n            onClick={() => {\n              dispatchAction({ type: \"add-group\", id });\n            }}\n            disabled={readOnly}\n            startIcon={<Add />}\n          >\n            {level === 0 && labels.query?.addGroup?.label != null\n              ? labels.query?.addGroup?.label\n              : labels.group.addGroup.label}\n          </HvButton>\n        </div>\n      )}\n    </>\n  );\n\n  const DeleteIcon = withTooltip(\n    () => (\n      <Delete\n        className={cx({\n          [classes.topRemoveButtonDisabled]: readOnly,\n        })}\n      />\n    ),\n    level === 0 && labels.query?.delete?.tooltip\n      ? labels.query?.delete?.tooltip\n      : labels.group.delete.tooltip,\n    \"top\"\n  );\n\n  const onClickCombinator = useCallback(\n    (item) => {\n      dispatchAction({\n        type: \"set-combinator\",\n        id,\n        combinator: item.operand,\n      });\n    },\n    [dispatchAction, id]\n  );\n\n  return (\n    <div\n      className={cx(classes.root, {\n        [classes.topGroup]: level === 0,\n        [classes.subGroup]: !(level === 0),\n      })}\n    >\n      <HvGrid container>\n        <HvGrid item>\n          <HvMultiButton\n            className={cx(classes.combinator, classes.topCombinator)}\n            disabled={readOnly}\n          >\n            {combinators &&\n              combinators.map((item) => (\n                <HvButton\n                  key={item.operand}\n                  className={classes.combinatorButton}\n                  selected={item.operand === combinator}\n                  onClick={() => item.operand && onClickCombinator(item)}\n                  disabled={readOnly}\n                  size=\"xs\"\n                >\n                  {item.label}\n                </HvButton>\n              ))}\n          </HvMultiButton>\n        </HvGrid>\n        <HvGrid item>\n          <div\n            className={cx(classes.buttonBackground, classes.topRemoveButton)}\n          >\n            <HvButton\n              icon\n              className={classes.removeButton}\n              onClick={() => {\n                askAction({\n                  actions: [{ type: \"remove-node\", id }],\n                  dialog:\n                    level === 0 && labels.query?.delete != null\n                      ? labels.query.delete\n                      : labels.group.delete,\n                });\n              }}\n              aria-label={\n                level === 0 && labels.query?.delete?.ariaLabel\n                  ? labels.query?.delete?.ariaLabel\n                  : labels.group.delete.ariaLabel\n              }\n              disabled={readOnly}\n              variant=\"secondaryGhost\"\n            >\n              <DeleteIcon />\n            </HvButton>\n          </div>\n        </HvGrid>\n      </HvGrid>\n      {rules?.length > 0 && (\n        <div\n          className={cx(classes.rulesContainer, {\n            [classes.subRulesContainer]: level > 0,\n            [classes.topRulesContainer]: level === 0,\n          })}\n        >\n          {rules.map((rule, index) => {\n            if (\"combinator\" in rule) {\n              return (\n                <RuleGroup\n                  key={rule.id ?? index}\n                  level={level + 1}\n                  {...rule}\n                  id={rule.id}\n                  classes={classes}\n                />\n              );\n            }\n\n            const isInvalid =\n              combinator === \"and\" &&\n              rules.some((r, i) => {\n                if (\"attribute\" in r) {\n                  if (\n                    r.attribute === rule.attribute &&\n                    r.id !== rule.id &&\n                    i < index\n                  ) {\n                    return true;\n                  }\n                }\n                return false;\n              });\n\n            return (\n              <Rule\n                key={rule.id ?? index}\n                {...rule}\n                isInvalid={isInvalid}\n                id={rule.id}\n                combinator={combinator}\n              />\n            );\n          })}\n        </div>\n      )}\n      {rules?.length === 0 && (\n        <HvEmptyState\n          title={labels.empty?.title}\n          message={\n            <>\n              <HvTypography\n                variant=\"link\"\n                component=\"a\"\n                onClick={() => {\n                  dispatchAction({ type: \"add-rule\", id });\n                }}\n                style={{ cursor: \"pointer\", textDecoration: \"underline\" }}\n              >\n                {`${labels.empty?.createCondition}`}\n              </HvTypography>\n              {level <= normalizedMaxDepth && (\n                <>\n                  {`${labels.empty?.spacer}`}\n                  <HvTypography\n                    variant=\"link\"\n                    component=\"a\"\n                    onClick={() => {\n                      dispatchAction({ type: \"add-group\", id });\n                    }}\n                    style={{\n                      cursor: \"pointer\",\n                      textDecoration: \"underline\",\n                    }}\n                  >\n                    {`${labels.empty?.createGroup}`}\n                  </HvTypography>\n                </>\n              )}\n            </>\n          }\n          icon={<Info />}\n        />\n      )}\n      <HvGrid container>\n        <HvGrid\n          item\n          className={cx(\n            classes.actionButtonContainer,\n            classes.topActionButtonContainer\n          )}\n        >\n          {actionButtons}\n        </HvGrid>\n      </HvGrid>\n    </div>\n  );\n};\n"],"names":["RuleGroup","level","id","combinator","rules","classes","classesProp","cx","useClasses","context","useContext","QueryBuilderContext","dispatchAction","askAction","maxDepth","combinators","labels","readOnly","normalizedMaxDepth","actionButtons","_Fragment","children","_jsx","className","buttonBackground","HvButton","variant","onClick","type","disabled","startIcon","Add","query","addRule","label","group","addGroup","DeleteIcon","withTooltip","Delete","topRemoveButtonDisabled","delete","tooltip","onClickCombinator","useCallback","item","operand","root","topGroup","subGroup","_jsxs","HvGrid","container","HvMultiButton","topCombinator","map","combinatorButton","selected","size","topRemoveButton","icon","removeButton","actions","dialog","ariaLabel","length","rulesContainer","subRulesContainer","topRulesContainer","rule","index","isInvalid","some","r","i","attribute","Rule","HvEmptyState","title","empty","message","HvTypography","component","style","cursor","textDecoration","createCondition","spacer","createGroup","Info","actionButtonContainer","topActionButtonContainer"],"mappings":"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"}

package/dist/cjs/components/TimePicker/TimePicker.cjs

@@ -5,7 +5,6 @@ const date = require("@internationalized/date");
 const datepicker$1 = require("@react-aria/datepicker");
 const datepicker = require("@react-stately/datepicker");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const useCss = require("../../hooks/useCss.cjs");
 require("@hitachivantara/uikit-styles");
 const Placeholder = require("./Placeholder.cjs");
 const TimePicker_styles = require("./TimePicker.styles.cjs");
@@ -71,9 +70,6 @@ const HvTimePicker = (props) => {
   } = props;
   const id = useUniqueId.default(idProp, "hvtimepicker");
   const ref = React.useRef(null);
-  const {
-    css
-  } = useCss.useCss();
   const {
     classes,
     cx
@@ -121,7 +117,6 @@ const HvTimePicker = (props) => {
     second: secondsPlaceholder
   }), [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]);
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
-  const is12HrFormat = state.segments[5] != null;
   const isStateInvalid = validationState === "invalid";
   const errorMessageId = isStateInvalid ? canShowError ? setId.setId(id, "error") : ariaErrorMessage : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
@@ -141,73 +136,68 @@ const HvTimePicker = (props) => {
         className: classes.description,
         children: description
       })]
-    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: css({
-        width: is12HrFormat ? 220 : 200
-      }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, {
-        role: "combobox",
-        variableWidth: true,
-        disabled,
-        readOnly,
-        placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsxRuntime.jsx(Placeholder.Placeholder, {
-          ref,
-          name,
-          state,
-          placeholders,
-          className: cx(classes.placeholder, {
-            [classes.placeholderDisabled]: disabled
-          }),
-          ...fieldProps
+    }), /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, {
+      role: "combobox",
+      variableWidth: true,
+      disabled,
+      readOnly,
+      placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsxRuntime.jsx(Placeholder.Placeholder, {
+        ref,
+        name,
+        state,
+        placeholders,
+        className: cx(classes.placeholder, {
+          [classes.placeholderDisabled]: disabled
         }),
-        classes: {
-          header: cx(classes.dropdownHeader, {
-            [classes.dropdownHeaderInvalid]: isStateInvalid
-          }),
-          panel: classes.dropdownPanel,
-          headerOpen: classes.dropdownHeaderOpen
-        },
-        placement: "right",
-        adornment: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Time, {
-          color: disabled ? "secondary_60" : void 0,
-          className: classes.icon
+        ...fieldProps
+      }),
+      classes: {
+        header: cx(classes.dropdownHeader, {
+          [classes.dropdownHeaderInvalid]: isStateInvalid
         }),
-        expanded: open,
-        onToggle: (evt, newOpen) => {
-          if (disableExpand)
-            return;
-          setOpen(newOpen);
-          onToggle == null ? void 0 : onToggle(evt, newOpen);
-        },
-        onContainerCreation: (containerRef) => {
-          var _a;
-          (_a = containerRef == null ? void 0 : containerRef.getElementsByTagName("input")[0]) == null ? void 0 : _a.focus();
-        },
-        "aria-haspopup": "dialog",
-        "aria-invalid": isStateInvalid ? true : void 0,
-        "aria-errormessage": errorMessageId,
-        disablePortal,
-        popperProps: {
-          modifiers: [{
-            name: "preventOverflow",
-            enabled: escapeWithReference
-          }]
-        },
-        ...dropdownProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-          ref,
-          className: classes.timePopperContainer,
-          children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(Unit.Unit, {
-            state,
-            segment,
-            placeholder: placeholders[segment.type],
-            onAdd: () => state.increment(segment.type),
-            onSub: () => state.decrement(segment.type),
-            onChange: (evt, val) => {
-              state.setSegment(segment.type, Number(val));
-            }
-          }, i))
-        })
+        panel: classes.dropdownPanel,
+        headerOpen: classes.dropdownHeaderOpen
+      },
+      placement: "right",
+      adornment: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Time, {
+        color: disabled ? "secondary_60" : void 0,
+        className: classes.icon
+      }),
+      expanded: open,
+      onToggle: (evt, newOpen) => {
+        if (disableExpand)
+          return;
+        setOpen(newOpen);
+        onToggle == null ? void 0 : onToggle(evt, newOpen);
+      },
+      onContainerCreation: (containerRef) => {
+        var _a;
+        (_a = containerRef == null ? void 0 : containerRef.getElementsByTagName("input")[0]) == null ? void 0 : _a.focus();
+      },
+      "aria-haspopup": "dialog",
+      "aria-invalid": isStateInvalid ? true : void 0,
+      "aria-errormessage": errorMessageId,
+      disablePortal,
+      popperProps: {
+        modifiers: [{
+          name: "preventOverflow",
+          enabled: escapeWithReference
+        }]
+      },
+      ...dropdownProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        ref,
+        className: classes.timePopperContainer,
+        children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(Unit.Unit, {
+          state,
+          segment,
+          placeholder: placeholders[segment.type],
+          onAdd: () => state.increment(segment.type),
+          onSub: () => state.decrement(segment.type),
+          onChange: (evt, val) => {
+            state.setSegment(segment.type, Number(val));
+          }
+        }, i))
       })
     }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
       id: setId.setId(id, "error"),

package/dist/cjs/components/TimePicker/TimePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.cjs","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport { useCss } from \"@core/hooks/useCss\";\nimport {\n  HvFormElement,\n  HvBaseDropdown,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n  HvBaseDropdownProps,\n  useControlled,\n  useUniqueId,\n  setId,\n  ExtractNames,\n} from \"../..\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n  if (!value) return undefined;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\" | \"onFocus\" | \"onBlur\"\n  > {\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: Partial<HvTimePickerClasses>;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = (props: HvTimePickerProps) => {\n  const {\n    classes: classesProp = {},\n    className,\n\n    id: idProp,\n    name,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    label,\n\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    placeholder,\n    hoursPlaceholder = \"hh\",\n    minutesPlaceholder = \"mm\",\n    secondsPlaceholder = \"ss\",\n\n    value: valueProp,\n    defaultValue: defaultValueProp,\n\n    timeFormat,\n    showSeconds,\n    disableExpand,\n    locale = \"en\",\n\n    onToggle,\n    onChange,\n\n    // misc properties:\n    disablePortal = true,\n    escapeWithReference = true,\n    dropdownProps,\n    ...others\n  } = props;\n  const id = useUniqueId(idProp, \"hvtimepicker\");\n  const ref = useRef<HTMLDivElement>(null);\n  const { css } = useCss();\n  const { classes, cx } = useClasses(classesProp);\n\n  const stateProps: TimeFieldStateOptions = {\n    value: toTime(valueProp),\n    defaultValue: toTime(defaultValueProp),\n    label,\n    locale,\n    isRequired: required,\n    isReadOnly: readOnly,\n    isDisabled: disabled,\n    granularity: \"second\",\n    hourCycle: getFormat(timeFormat),\n    onChange: (value) => {\n      const { hour: hours, minute: minutes, second: seconds } = value;\n      onChange?.({ hours, minutes, seconds });\n    },\n  };\n  const state = useTimeFieldState(stateProps);\n  const { labelProps, fieldProps } = useTimeField(\n    {\n      ...stateProps,\n      id,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n    },\n    state,\n    ref\n  );\n\n  const [open, setOpen] = useState(false);\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n  const [validationState] = useControlled(status, \"standBy\");\n\n  const placeholders = useMemo(\n    () => ({\n      hour: hoursPlaceholder,\n      minute: minutesPlaceholder,\n      second: secondsPlaceholder,\n    }),\n    [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n  );\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const is12HrFormat = state.segments[5] != null;\n  const isStateInvalid = validationState === \"invalid\";\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(id, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      status={validationState}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel label={label} className={classes.label} {...labelProps} />\n          )}\n          {description && (\n            <HvInfoMessage className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      <div className={css({ width: is12HrFormat ? 220 : 200 })}>\n        <HvBaseDropdown\n          role=\"combobox\"\n          variableWidth\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={\n            placeholder && !state.value ? (\n              placeholder\n            ) : (\n              <Placeholder\n                ref={ref}\n                name={name}\n                state={state}\n                placeholders={placeholders}\n                className={cx(classes.placeholder, {\n                  [classes.placeholderDisabled]: disabled,\n                })}\n                {...fieldProps}\n              />\n            )\n          }\n          classes={{\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            panel: classes.dropdownPanel,\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          placement=\"right\"\n          adornment={\n            <TimeIcon\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.icon}\n            />\n          }\n          expanded={open}\n          onToggle={(evt, newOpen) => {\n            if (disableExpand) return;\n            setOpen(newOpen);\n            onToggle?.(evt, newOpen);\n          }}\n          onContainerCreation={(containerRef) => {\n            containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n          }}\n          aria-haspopup=\"dialog\"\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          disablePortal={disablePortal}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          {...dropdownProps}\n        >\n          <div ref={ref} className={classes.timePopperContainer}>\n            {state.segments.map((segment, i) => (\n              <Unit\n                key={i}\n                state={state}\n                segment={segment}\n                placeholder={placeholders[segment.type]}\n                onAdd={() => state.increment(segment.type)}\n                onSub={() => state.decrement(segment.type)}\n                onChange={(evt, val) => {\n                  state.setSegment(segment.type, Number(val));\n                }}\n              />\n            ))}\n          </div>\n        </HvBaseDropdown>\n      </div>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(id, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","props","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useUniqueId","ref","useRef","css","useCss","cx","useClasses","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","is12HrFormat","segments","isStateInvalid","errorMessageId","setId","HvFormElement","root","children","labelContainer","_jsx","HvLabel","HvInfoMessage","width","HvBaseDropdown","role","variableWidth","Placeholder","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","placement","adornment","TimeIcon","color","icon","expanded","evt","newOpen","onContainerCreation","containerRef","getElementsByTagName","focus","popperProps","modifiers","enabled","timePopperContainer","map","segment","i","Unit","type","onAdd","increment","onSub","decrement","val","setSegment","Number","HvWarningText","disableBorder","error"],"mappings":"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"}
+{"version":3,"file":"TimePicker.cjs","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvFormElement,\n  HvBaseDropdown,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n  HvBaseDropdownProps,\n  useControlled,\n  useUniqueId,\n  setId,\n  ExtractNames,\n} from \"../..\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n  if (!value) return undefined;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\" | \"onFocus\" | \"onBlur\"\n  > {\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: Partial<HvTimePickerClasses>;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = (props: HvTimePickerProps) => {\n  const {\n    classes: classesProp = {},\n    className,\n\n    id: idProp,\n    name,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    label,\n\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    placeholder,\n    hoursPlaceholder = \"hh\",\n    minutesPlaceholder = \"mm\",\n    secondsPlaceholder = \"ss\",\n\n    value: valueProp,\n    defaultValue: defaultValueProp,\n\n    timeFormat,\n    showSeconds,\n    disableExpand,\n    locale = \"en\",\n\n    onToggle,\n    onChange,\n\n    // misc properties:\n    disablePortal = true,\n    escapeWithReference = true,\n    dropdownProps,\n    ...others\n  } = props;\n  const id = useUniqueId(idProp, \"hvtimepicker\");\n  const ref = useRef<HTMLDivElement>(null);\n  const { classes, cx } = useClasses(classesProp);\n\n  const stateProps: TimeFieldStateOptions = {\n    value: toTime(valueProp),\n    defaultValue: toTime(defaultValueProp),\n    label,\n    locale,\n    isRequired: required,\n    isReadOnly: readOnly,\n    isDisabled: disabled,\n    granularity: \"second\",\n    hourCycle: getFormat(timeFormat),\n    onChange: (value) => {\n      const { hour: hours, minute: minutes, second: seconds } = value;\n      onChange?.({ hours, minutes, seconds });\n    },\n  };\n  const state = useTimeFieldState(stateProps);\n  const { labelProps, fieldProps } = useTimeField(\n    {\n      ...stateProps,\n      id,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n    },\n    state,\n    ref\n  );\n\n  const [open, setOpen] = useState(false);\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n  const [validationState] = useControlled(status, \"standBy\");\n\n  const placeholders = useMemo(\n    () => ({\n      hour: hoursPlaceholder,\n      minute: minutesPlaceholder,\n      second: secondsPlaceholder,\n    }),\n    [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n  );\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = validationState === \"invalid\";\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(id, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      status={validationState}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel label={label} className={classes.label} {...labelProps} />\n          )}\n          {description && (\n            <HvInfoMessage className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      <HvBaseDropdown\n        role=\"combobox\"\n        variableWidth\n        disabled={disabled}\n        readOnly={readOnly}\n        placeholder={\n          placeholder && !state.value ? (\n            placeholder\n          ) : (\n            <Placeholder\n              ref={ref}\n              name={name}\n              state={state}\n              placeholders={placeholders}\n              className={cx(classes.placeholder, {\n                [classes.placeholderDisabled]: disabled,\n              })}\n              {...fieldProps}\n            />\n          )\n        }\n        classes={{\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          panel: classes.dropdownPanel,\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        placement=\"right\"\n        adornment={\n          <TimeIcon\n            color={disabled ? \"secondary_60\" : undefined}\n            className={classes.icon}\n          />\n        }\n        expanded={open}\n        onToggle={(evt, newOpen) => {\n          if (disableExpand) return;\n          setOpen(newOpen);\n          onToggle?.(evt, newOpen);\n        }}\n        onContainerCreation={(containerRef) => {\n          containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n        }}\n        aria-haspopup=\"dialog\"\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        disablePortal={disablePortal}\n        popperProps={{\n          modifiers: [\n            { name: \"preventOverflow\", enabled: escapeWithReference },\n          ],\n        }}\n        {...dropdownProps}\n      >\n        <div ref={ref} className={classes.timePopperContainer}>\n          {state.segments.map((segment, i) => (\n            <Unit\n              key={i}\n              state={state}\n              segment={segment}\n              placeholder={placeholders[segment.type]}\n              onAdd={() => state.increment(segment.type)}\n              onSub={() => state.decrement(segment.type)}\n              onChange={(evt, val) => {\n                state.setSegment(segment.type, Number(val));\n              }}\n            />\n          ))}\n        </div>\n      </HvBaseDropdown>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(id, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","props","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useUniqueId","ref","useRef","cx","useClasses","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","isStateInvalid","errorMessageId","setId","HvFormElement","root","children","labelContainer","_jsx","HvLabel","HvInfoMessage","HvBaseDropdown","role","variableWidth","Placeholder","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","placement","adornment","TimeIcon","color","icon","expanded","evt","newOpen","onContainerCreation","containerRef","getElementsByTagName","focus","popperProps","modifiers","enabled","timePopperContainer","segments","map","segment","i","Unit","type","onAdd","increment","onSub","decrement","val","setSegment","Number","HvWarningText","disableBorder","error"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -146,7 +146,7 @@ const File = require("./components/FileUploader/File/File.cjs");
 const FileUploader = require("./components/FileUploader/FileUploader.cjs");
 const dropDownMenuClasses = require("./components/DropDownMenu/dropDownMenuClasses.cjs");
 const DropDownMenu = require("./components/DropDownMenu/DropDownMenu.cjs");
-const paginationClasses = require("./components/Pagination/paginationClasses.cjs");
+const Pagination_styles = require("./components/Pagination/Pagination.styles.cjs");
 const Pagination = require("./components/Pagination/Pagination.cjs");
 const actionsGenericClasses = require("./components/ActionsGeneric/actionsGenericClasses.cjs");
 const ActionsGeneric = require("./components/ActionsGeneric/ActionsGeneric.cjs");
@@ -245,7 +245,7 @@ const inlineEditorClasses = require("./components/InlineEditor/inlineEditorClass
 const InlineEditor = require("./components/InlineEditor/InlineEditor.cjs");
 const timeAgoClasses = require("./components/TimeAgo/timeAgoClasses.cjs");
 const TimeAgo = require("./components/TimeAgo/TimeAgo.cjs");
-const queryBuilderClasses = require("./components/QueryBuilder/queryBuilderClasses.cjs");
+const QueryBuilder_styles = require("./components/QueryBuilder/QueryBuilder.styles.cjs");
 const QueryBuilder = require("./components/QueryBuilder/QueryBuilder.cjs");
 const colorPickerClasses = require("./components/ColorPicker/colorPickerClasses.cjs");
 const ColorPicker = require("./components/ColorPicker/ColorPicker.cjs");
@@ -457,7 +457,7 @@ exports.HvFile = File.HvFile;
 exports.HvFileUploader = FileUploader.HvFileUploader;
 exports.dropDownMenuClasses = dropDownMenuClasses.default;
 exports.HvDropDownMenu = DropDownMenu.default;
-exports.paginationClasses = paginationClasses.default;
+exports.paginationClasses = Pagination_styles.staticClasses;
 exports.HvPagination = Pagination.HvPagination;
 exports.actionsGenericClasses = actionsGenericClasses.default;
 exports.HvActionsGeneric = ActionsGeneric.HvActionsGeneric;
@@ -591,7 +591,7 @@ exports.inlineEditorClasses = inlineEditorClasses.default;
 exports.HvInlineEditor = InlineEditor.HvInlineEditor;
 exports.timeAgoClasses = timeAgoClasses.default;
 exports.HvTimeAgo = TimeAgo.HvTimeAgo;
-exports.queryBuilderClasses = queryBuilderClasses.default;
+exports.queryBuilderClasses = QueryBuilder_styles.staticClasses;
 exports.HvQueryBuilder = QueryBuilder.HvQueryBuilder;
 exports.colorPickerClasses = colorPickerClasses.default;
 exports.HvColorPicker = ColorPicker.HvColorPicker;

package/dist/esm/components/Pagination/Pagination.js

@@ -1,11 +1,11 @@
 import { useCallback, useEffect } from "react";
-import { clsx } from "clsx";
 import { Hidden } from "@mui/material";
 import { Start, Backwards, Forwards, End } from "@hitachivantara/uikit-react-icons";
-import { Option } from "./Select.js";
-import { StyledRoot, StyledPageSizeOptions, StyledPageSizePrev, StyledSelect, StyledPageSizeTextContainer, StyledPageNavigator, StyledButtonIconTooltip, StyledPageInfo, StyledPageJump } from "./Pagination.styles.js";
-import paginationClasses from "./paginationClasses.js";
+import HvSelect, { Option } from "./Select.js";
+import { useClasses } from "./Pagination.styles.js";
+import { staticClasses } from "./Pagination.styles.js";
 import { usePageInput, setColor, getSafePage } from "./utils.js";
+import ButtonIconTooltip from "./ButtonIconTooltip.js";
 import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import { useLabels } from "../../hooks/useLabels.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -31,15 +31,16 @@ const DEFAULT_LABELS = {
 const {
   Enter
 } = keyboardCodes;
+const defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];
 const HvPagination = ({
-  classes,
+  classes: classesProp = {},
   className,
   id,
   pages = 1,
   page = 0,
   showPageSizeOptions = true,
-  pageSizeOptions = [5, 10, 20, 25, 50, 100],
-  pageSize = 1,
+  pageSizeOptions = defaultPageSizeOptions,
+  pageSize = defaultPageSizeOptions[1],
   showPageJump = true,
   canPrevious = false,
   canNext = false,
@@ -53,6 +54,10 @@ const HvPagination = ({
 }) => {
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const [pageInput, handleInputChange] = usePageInput(page);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const changePage = useCallback((newPage) => {
     const safePage = getSafePage(newPage, page, pages);
     onPageChange == null ? void 0 : onPageChange(safePage);
@@ -68,8 +73,8 @@ const HvPagination = ({
       handleInputChange(null, page + 1);
     }
   }, [handleInputChange, page]);
-  const renderPageJump = () => /* @__PURE__ */ jsx(StyledPageJump, {
-    className: clsx(paginationClasses.pageJump, classes == null ? void 0 : classes.pageJump),
+  const renderPageJump = () => /* @__PURE__ */ jsx("div", {
+    className: classes.pageJump,
     children: /* @__PURE__ */ jsx(HvInput, {
       id: setId(id, "currentPage"),
       labels,
@@ -79,9 +84,9 @@ const HvPagination = ({
         type: "number"
       },
       classes: {
-        root: clsx(paginationClasses.pageSizeInputContainer, classes == null ? void 0 : classes.pageSizeInputContainer),
-        input: clsx(paginationClasses.pageSizeInput, classes == null ? void 0 : classes.pageSizeInput),
-        inputRoot: clsx(paginationClasses.pageSizeInputRoot, classes == null ? void 0 : classes.pageSizeInputRoot)
+        root: classes == null ? void 0 : classes.pageSizeInputContainer,
+        input: classes == null ? void 0 : classes.pageSizeInput,
+        inputRoot: classes == null ? void 0 : classes.pageSizeInputRoot
       },
       onChange: (event, value) => handleInputChange(event, Number(value)),
       value: String(pageInput),
@@ -92,27 +97,25 @@ const HvPagination = ({
       ...currentPageInputProps
     })
   });
-  return /* @__PURE__ */ jsxs(StyledRoot, {
+  return /* @__PURE__ */ jsxs("div", {
     id,
-    className: clsx(className, paginationClasses.root, classes == null ? void 0 : classes.root),
+    className: cx(classes.root, className),
     ...others,
-    children: [/* @__PURE__ */ jsx(StyledPageSizeOptions, {
-      className: clsx(paginationClasses.pageSizeOptions, classes == null ? void 0 : classes.pageSizeOptions),
+    children: [/* @__PURE__ */ jsx("div", {
+      className: classes.pageSizeOptions,
       ...showPageProps,
       children: showPageSizeOptions && /* @__PURE__ */ jsxs(Fragment, {
         children: [/* @__PURE__ */ jsx(Hidden, {
           xsDown: true,
-          children: /* @__PURE__ */ jsx(StyledPageSizePrev, {
-            className: clsx(paginationClasses.pageSizeTextContainer, classes == null ? void 0 : classes.pageSizeTextContainer),
-            children: /* @__PURE__ */ jsx(HvTypography, {
-              component: "span",
-              children: labels == null ? void 0 : labels.pageSizePrev
-            })
+          children: /* @__PURE__ */ jsx(HvTypography, {
+            component: "span",
+            className: classes == null ? void 0 : classes.pageSizeTextContainer,
+            children: labels == null ? void 0 : labels.pageSizePrev
           })
-        }), /* @__PURE__ */ jsx(StyledSelect, {
+        }), /* @__PURE__ */ jsx(HvSelect, {
           id: setId(id, "pageSize"),
           disabled: pageSize === 0,
-          className: clsx(paginationClasses.pageSizeOptionsSelect, classes == null ? void 0 : classes.pageSizeOptionsSelect),
+          className: classes.pageSizeOptionsSelect,
           "aria-label": labels == null ? void 0 : labels.pageSizeSelectorDescription,
           onChange: (_, val) => onPageSizeChange == null ? void 0 : onPageSizeChange(val),
           value: pageSize,
@@ -122,42 +125,40 @@ const HvPagination = ({
           }, option))
         }), /* @__PURE__ */ jsx(Hidden, {
           xsDown: true,
-          children: /* @__PURE__ */ jsx(StyledPageSizeTextContainer, {
-            className: clsx(paginationClasses.pageSizeTextContainer, classes == null ? void 0 : classes.pageSizeTextContainer),
-            children: /* @__PURE__ */ jsx(HvTypography, {
-              component: "span",
-              children: labels == null ? void 0 : labels.pageSizeEntryName
-            })
+          children: /* @__PURE__ */ jsx(HvTypography, {
+            component: "span",
+            className: classes.pageSizeTextContainer,
+            children: labels == null ? void 0 : labels.pageSizeEntryName
           })
         })]
       })
-    }), /* @__PURE__ */ jsxs(StyledPageNavigator, {
-      className: clsx(paginationClasses.pageNavigator, classes == null ? void 0 : classes.pageNavigator),
+    }), /* @__PURE__ */ jsxs("div", {
+      className: classes.pageNavigator,
       ...navigationProps,
-      children: [/* @__PURE__ */ jsx(StyledButtonIconTooltip, {
+      children: [/* @__PURE__ */ jsx(ButtonIconTooltip, {
         id: setId(id, "firstPage-button"),
         "aria-label": labels == null ? void 0 : labels.firstPage,
-        className: clsx(paginationClasses.iconContainer, classes == null ? void 0 : classes.iconContainer),
+        className: classes.iconContainer,
         disabled: !canPrevious,
         onClick: () => changePage(0),
         tooltip: labels == null ? void 0 : labels.paginationFirstPageTitle,
         children: /* @__PURE__ */ jsx(Start, {
-          className: clsx(paginationClasses.icon, classes == null ? void 0 : classes.icon),
+          className: classes.icon,
           color: setColor(!canPrevious)
         })
-      }), /* @__PURE__ */ jsx(StyledButtonIconTooltip, {
+      }), /* @__PURE__ */ jsx(ButtonIconTooltip, {
         id: setId(id, "previousPage-button"),
         "aria-label": labels == null ? void 0 : labels.previousPage,
-        className: clsx(paginationClasses.iconContainer, classes == null ? void 0 : classes.iconContainer),
+        className: classes.iconContainer,
         disabled: !canPrevious,
         onClick: () => changePage(page - 1),
         tooltip: labels == null ? void 0 : labels.paginationPreviousPageTitle,
         children: /* @__PURE__ */ jsx(Backwards, {
-          className: clsx(paginationClasses.icon, classes == null ? void 0 : classes.icon),
+          className: classes.icon,
           color: setColor(!canPrevious)
         })
-      }), /* @__PURE__ */ jsxs(StyledPageInfo, {
-        className: clsx(paginationClasses.pageInfo, classes == null ? void 0 : classes.pageInfo),
+      }), /* @__PURE__ */ jsxs("div", {
+        className: classes.pageInfo,
         children: [showPageJump ? renderPageJump() : /* @__PURE__ */ jsx(HvTypography, {
           component: "span",
           children: `${page + 1}`
@@ -165,30 +166,30 @@ const HvPagination = ({
           component: "span",
           children: `${labels == null ? void 0 : labels.pagesSeparator} `
         }), /* @__PURE__ */ jsx(HvTypography, {
-          id: setId(id, "totalPages"),
           component: "span",
+          id: setId(id, "totalPages"),
           children: pages
         })]
-      }), /* @__PURE__ */ jsx(StyledButtonIconTooltip, {
+      }), /* @__PURE__ */ jsx(ButtonIconTooltip, {
         id: setId(id, "nextPage-button"),
         "aria-label": labels == null ? void 0 : labels.nextPage,
-        className: clsx(paginationClasses.iconContainer, classes == null ? void 0 : classes.iconContainer),
+        className: classes.iconContainer,
         disabled: !canNext,
         onClick: () => changePage(page + 1),
         tooltip: labels == null ? void 0 : labels.paginationNextPageTitle,
         children: /* @__PURE__ */ jsx(Forwards, {
-          className: clsx(paginationClasses.icon, classes == null ? void 0 : classes.icon),
+          className: classes.icon,
           color: setColor(!canNext)
         })
-      }), /* @__PURE__ */ jsx(StyledButtonIconTooltip, {
+      }), /* @__PURE__ */ jsx(ButtonIconTooltip, {
         id: setId(id, "lastPage-button"),
         "aria-label": labels == null ? void 0 : labels.lastPage,
-        className: clsx(paginationClasses.iconContainer, classes == null ? void 0 : classes.iconContainer),
+        className: classes.iconContainer,
         disabled: !canNext,
         onClick: () => changePage(pages - 1),
         tooltip: labels == null ? void 0 : labels.paginationLastPageTitle,
         children: /* @__PURE__ */ jsx(End, {
-          className: clsx(paginationClasses.icon, classes == null ? void 0 : classes.icon),
+          className: classes.icon,
           color: setColor(!canNext)
         })
       })]
@@ -196,6 +197,7 @@ const HvPagination = ({
   });
 };
 export {
-  HvPagination
+  HvPagination,
+  staticClasses as paginationClasses
 };
 //# sourceMappingURL=Pagination.js.map