@hitachivantara/uikit-react-core 5.44.0 → 5.44.2

package/dist/esm/Footer/Footer.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses } from "./Footer.styles.js";
+import { staticClasses } from "./Footer.styles.js";
+import { HvTypography } from "../Typography/Typography.js";
+const HvFooter = (props) => {
+  const {
+    name = "Hitachi Vantara",
+    copyright = `© Hitachi Vantara Corporation ${(/* @__PURE__ */ new Date()).getFullYear()}. All Rights Reserved.`,
+    links,
+    classes: classesProp,
+    className,
+    ...others
+  } = useDefaultProps("HvFooter", props);
+  const muiTheme = useTheme();
+  const { classes, cx } = useClasses(classesProp);
+  const isSmDown = useMediaQuery(muiTheme.breakpoints.down("sm"));
+  return /* @__PURE__ */ jsxs(
+    "footer",
+    {
+      className: cx(classes.root, { [classes.small]: isSmDown }, className),
+      ...others,
+      children: [
+        /* @__PURE__ */ jsx(HvTypography, { variant: "label", className: classes.name, children: name }),
+        /* @__PURE__ */ jsxs("div", { className: classes.rightContainer, children: [
+          /* @__PURE__ */ jsx(HvTypography, { className: classes.copyright, children: copyright }),
+          links && /* @__PURE__ */ jsx("div", { className: classes.separator }),
+          links
+        ] })
+      ]
+    }
+  );
+};
+export {
+  HvFooter,
+  staticClasses as footerClasses
+};
+//# sourceMappingURL=Footer.js.map

package/dist/esm/Footer/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sources":["../../../src/Footer/Footer.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvTypography } from \"../Typography\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Footer.styles\";\n\nexport { staticClasses as footerClasses };\n\nexport type HvFooterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFooterProps extends HvBaseProps {\n  /** Footer name. */\n  name?: React.ReactNode;\n  /** Footer copyright. */\n  copyright?: React.ReactNode;\n  /** Footer links. */\n  links?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFooterClasses;\n}\n\n/**\n * A Footer is a way of providing extra information at the end of a page.\n */\nexport const HvFooter = (props: HvFooterProps) => {\n  const {\n    name = \"Hitachi Vantara\",\n    copyright = `© Hitachi Vantara Corporation ${new Date().getFullYear()}. All Rights Reserved.`,\n    links,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvFooter\", props);\n  const muiTheme = useTheme();\n  const { classes, cx } = useClasses(classesProp);\n\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n\n  return (\n    <footer\n      className={cx(classes.root, { [classes.small]: isSmDown }, className)}\n      {...others}\n    >\n      <HvTypography variant=\"label\" className={classes.name}>\n        {name}\n      </HvTypography>\n      <div className={classes.rightContainer}>\n        <HvTypography className={classes.copyright}>{copyright}</HvTypography>\n        {links && <div className={classes.separator} />}\n        {links}\n      </div>\n    </footer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA4Ba,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ,OAAO;AAAA,IACP,YAAY,kCAAiC,oBAAI,QAAO,YAAa,CAAA;AAAA,IACrE;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,WAAW;AACjB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,WAAW,cAAc,SAAS,YAAY,KAAK,IAAI,CAAC;AAG5D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,KAAK,GAAG,SAAS,GAAG,SAAS;AAAA,MACnE,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,gBAAa,SAAQ,SAAQ,WAAW,QAAQ,MAC9C,UACH,MAAA;AAAA,QACC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,UAAA,oBAAC,cAAa,EAAA,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,UACtD,SAAS,oBAAC,OAAI,EAAA,WAAW,QAAQ,WAAW;AAAA,UAC5C;AAAA,QAAA,GACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Footer/Footer.styles.js

@@ -0,0 +1,54 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvFooter", {
+  root: {
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "row",
+    padding: `${theme.space.xs} ${theme.space.sm}`,
+    height: 40,
+    bottom: 0,
+    zIndex: theme.zIndices.base,
+    backgroundColor: theme.colors.atmo1,
+    boxShadow: `0 -1px 0 ${theme.colors.atmo4}`
+  },
+  name: {},
+  rightContainer: {
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "row",
+    marginLeft: "auto"
+  },
+  copyright: {},
+  separator: {
+    width: 1,
+    height: 16,
+    backgroundColor: theme.colors.secondary,
+    margin: `${theme.space.xs} ${theme.space.sm}`
+  },
+  small: {
+    "&$root": {
+      height: "unset",
+      flexDirection: "column",
+      padding: theme.space.xs
+    },
+    "& $name": {
+      marginBottom: theme.space.xs
+    },
+    "& $rightContainer": {
+      flexDirection: "column",
+      textAlign: "center",
+      marginLeft: "unset"
+    },
+    "& $copyright": {
+      flexDirection: "column",
+      marginBottom: theme.space.xs
+    },
+    "& $separator": { display: "none" }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Footer.styles.js.map

package/dist/esm/Footer/Footer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.styles.js","sources":["../../../src/Footer/Footer.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFooter\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    flexDirection: \"row\",\n    padding: `${theme.space.xs} ${theme.space.sm}`,\n    height: 40,\n    bottom: 0,\n    zIndex: theme.zIndices.base,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: `0 -1px 0 ${theme.colors.atmo4}`,\n  },\n  name: {},\n  rightContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    flexDirection: \"row\",\n    marginLeft: \"auto\",\n  },\n  copyright: {},\n  separator: {\n    width: 1,\n    height: 16,\n    backgroundColor: theme.colors.secondary,\n    margin: `${theme.space.xs} ${theme.space.sm}`,\n  },\n  small: {\n    \"&$root\": {\n      height: \"unset\",\n      flexDirection: \"column\",\n      padding: theme.space.xs,\n    },\n    \"& $name\": {\n      marginBottom: theme.space.xs,\n    },\n    \"& $rightContainer\": {\n      flexDirection: \"column\",\n      textAlign: \"center\",\n      marginLeft: \"unset\",\n    },\n    \"& $copyright\": {\n      flexDirection: \"column\",\n      marginBottom: theme.space.xs,\n    },\n    \"& $separator\": { display: \"none\" },\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,SAAS,GAAG,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,IAC5C,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ,MAAM,SAAS;AAAA,IACvB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,YAAY,MAAM,OAAO,KAAK;AAAA,EAC3C;AAAA,EACA,MAAM,CAAC;AAAA,EACP,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ,GAAG,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,EAC7C;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,WAAW;AAAA,MACT,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,IACA,qBAAqB;AAAA,MACnB,eAAe;AAAA,MACf,WAAW;AAAA,MACX,YAAY;AAAA,IACd;AAAA,IACA,gBAAgB;AAAA,MACd,eAAe;AAAA,MACf,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,IACA,gBAAgB,EAAE,SAAS,OAAO;AAAA,EACpC;AACF,CAAC;"}

package/dist/esm/Forms/Adornment/Adornment.js

@@ -0,0 +1,69 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useContext } from "react";
+import { useClasses } from "./Adornment.styles.js";
+import { staticClasses } from "./Adornment.styles.js";
+import { HvFormElementDescriptorsContext } from "../FormElement/context/FormElementDescriptorsContext.js";
+import { HvFormElementContext } from "../FormElement/context/FormElementContext.js";
+const noop = () => {
+};
+const HvAdornment = forwardRef(
+  ({
+    id,
+    classes: classesProp,
+    className,
+    icon,
+    showWhen = void 0,
+    onClick,
+    isVisible = void 0,
+    ...others
+  }, ref) => {
+    const { classes, cx } = useClasses(classesProp);
+    const { elementStatus = "" } = useContext(HvFormElementContext);
+    const { input } = useContext(HvFormElementDescriptorsContext);
+    const displayIcon = isVisible ?? (showWhen === void 0 || elementStatus === showWhen);
+    const isClickable = !!onClick;
+    return isClickable ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        id,
+        ref,
+        type: "button",
+        tabIndex: -1,
+        "aria-controls": input?.[0]?.id,
+        className: cx(
+          classes.root,
+          classes.adornment,
+          classes.adornmentButton,
+          { [classes.hideIcon]: !displayIcon },
+          className
+        ),
+        onClick,
+        onMouseDown: (event) => event.preventDefault(),
+        onKeyDown: noop,
+        ...others,
+        children: /* @__PURE__ */ jsx("div", { className: classes.icon, children: icon })
+      }
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        id,
+        ref,
+        className: cx(
+          classes.root,
+          classes.adornment,
+          classes.adornmentIcon,
+          { [classes.hideIcon]: !displayIcon },
+          className
+        ),
+        role: "presentation",
+        ...others,
+        children: /* @__PURE__ */ jsx("div", { className: classes.icon, children: icon })
+      }
+    );
+  }
+);
+export {
+  HvAdornment,
+  staticClasses as adornmentClasses
+};
+//# sourceMappingURL=Adornment.js.map

package/dist/esm/Forms/Adornment/Adornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Adornment.js","sources":["../../../../src/Forms/Adornment/Adornment.tsx"],"sourcesContent":["import { useContext, forwardRef, MouseEventHandler, ForwardedRef } from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Adornment.styles\";\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n  HvFormStatus,\n} from \"../FormElement\";\n\nconst noop = () => {};\n\nexport { staticClasses as adornmentClasses };\n\nexport type HvAdornmentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAdornmentProps\n  extends HvBaseProps<\n    HTMLDivElement | HTMLButtonElement,\n    \"onMouseDown\" | \"onKeyDown\"\n  > {\n  /** The icon to be added into the input. */\n  icon: React.ReactNode;\n  /** When the adornment should be displayed. */\n  showWhen?: HvFormStatus;\n  /** Function to be executed when this element is clicked. */\n  onClick?: MouseEventHandler<HTMLButtonElement> | undefined;\n  /** If this property is defined the adornment visibility will be exclusively controlled by this value. */\n  isVisible?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAdornmentClasses;\n}\n\n/**\n * Allows to add a decorative icon or an action to a form element, usually on the right side of an input.\n * E.g., the reveal password button.\n *\n * In addition to the showWhen feature, which uses the form element's context validation state to determine\n * its visibility, this component also ensures that it does not steal focus from the input and that it is\n * not accessible using the keyboard.\n *\n * As such, its functionality, if any, for accessibility purposes must be provided through an alternative mean,\n * or by using a regular icon button or toggle button instead.\n */\nexport const HvAdornment = forwardRef<\n  HTMLDivElement | HTMLButtonElement,\n  HvAdornmentProps\n>(\n  (\n    {\n      id,\n      classes: classesProp,\n      className,\n      icon,\n      showWhen = undefined,\n      onClick,\n      isVisible = undefined,\n      ...others\n    },\n    ref\n  ) => {\n    const { classes, cx } = useClasses(classesProp);\n\n    const { elementStatus = \"\" } = useContext(HvFormElementContext);\n\n    const { input } = useContext(HvFormElementDescriptorsContext);\n\n    const displayIcon =\n      isVisible ?? (showWhen === undefined || elementStatus === showWhen);\n\n    const isClickable = !!onClick;\n\n    return isClickable ? (\n      <button\n        id={id}\n        ref={ref as ForwardedRef<HTMLButtonElement>}\n        type=\"button\"\n        tabIndex={-1}\n        aria-controls={input?.[0]?.id}\n        className={cx(\n          classes.root,\n          classes.adornment,\n          classes.adornmentButton,\n          { [classes.hideIcon]: !displayIcon },\n          className\n        )}\n        onClick={onClick}\n        onMouseDown={(event) => event.preventDefault()}\n        onKeyDown={noop}\n        {...others}\n      >\n        <div className={classes.icon}>{icon}</div>\n      </button>\n    ) : (\n      <div\n        id={id}\n        ref={ref as ForwardedRef<HTMLDivElement>}\n        className={cx(\n          classes.root,\n          classes.adornment,\n          classes.adornmentIcon,\n          { [classes.hideIcon]: !displayIcon },\n          className\n        )}\n        role=\"presentation\"\n        {...others}\n      >\n        <div className={classes.icon}>{icon}</div>\n      </div>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;AAYA,MAAM,OAAO,MAAM;AAAC;AAkCb,MAAM,cAAc;AAAA,EAIzB,CACE;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,KAEL,QACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,EAAE,gBAAgB,GAAG,IAAI,WAAW,oBAAoB;AAE9D,UAAM,EAAE,MAAA,IAAU,WAAW,+BAA+B;AAE5D,UAAM,cACJ,cAAc,aAAa,UAAa,kBAAkB;AAEtD,UAAA,cAAc,CAAC,CAAC;AAEtB,WAAO,cACL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,UAAU;AAAA,QACV,iBAAe,QAAQ,CAAC,GAAG;AAAA,QAC3B,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,CAAC,YAAY;AAAA,UACnC;AAAA,QACF;AAAA,QACA;AAAA,QACA,aAAa,CAAC,UAAU,MAAM,eAAe;AAAA,QAC7C,WAAW;AAAA,QACV,GAAG;AAAA,QAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,MAAA;AAAA,MAAA;AAAA,IAAA,IAGtC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,CAAC,YAAY;AAAA,UACnC;AAAA,QACF;AAAA,QACA,MAAK;AAAA,QACJ,GAAG;AAAA,QAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,MAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG1C;AACF;"}

package/dist/esm/Forms/Adornment/Adornment.styles.js

@@ -0,0 +1,25 @@
+import { outlineStyles } from "../../utils/focusUtils.js";
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvAdornment", {
+  root: {},
+  icon: { width: 32, height: 32 },
+  adornment: {
+    backgroundColor: "transparent",
+    border: "none",
+    padding: 0,
+    margin: 0
+  },
+  adornmentIcon: { cursor: "default", pointerEvents: "none" },
+  hideIcon: { display: "none" },
+  adornmentButton: {
+    cursor: "pointer",
+    "&:focus": {
+      ...outlineStyles
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Adornment.styles.js.map

package/dist/esm/Forms/Adornment/Adornment.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Adornment.styles.js","sources":["../../../../src/Forms/Adornment/Adornment.styles.tsx"],"sourcesContent":["import { outlineStyles } from \"../../utils/focusUtils\";\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAdornment\", {\n  root: {},\n  icon: { width: 32, height: 32 },\n  adornment: {\n    backgroundColor: \"transparent\",\n    border: \"none\",\n    padding: 0,\n    margin: 0,\n  },\n  adornmentIcon: { cursor: \"default\", pointerEvents: \"none\" },\n  hideIcon: { display: \"none\" },\n  adornmentButton: {\n    cursor: \"pointer\",\n    \"&:focus\": {\n      ...outlineStyles,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM,CAAC;AAAA,EACP,MAAM,EAAE,OAAO,IAAI,QAAQ,GAAG;AAAA,EAC9B,WAAW;AAAA,IACT,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,eAAe,EAAE,QAAQ,WAAW,eAAe,OAAO;AAAA,EAC1D,UAAU,EAAE,SAAS,OAAO;AAAA,EAC5B,iBAAiB;AAAA,IACf,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/Forms/CharCounter/CharCounter.js

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useContext } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { setId } from "../../utils/setId.js";
+import { useClasses } from "./CharCounter.styles.js";
+import { staticClasses } from "./CharCounter.styles.js";
+import { HvFormElementContext } from "../FormElement/context/FormElementContext.js";
+import { HvTypography } from "../../Typography/Typography.js";
+const HvCharCounter = (props) => {
+  const {
+    separator = "/",
+    maxCharQuantity,
+    currentCharQuantity = 0,
+    classes: classesProp,
+    className,
+    id,
+    disabled,
+    disableGutter = false,
+    ...others
+  } = useDefaultProps("HvCharCounter", props);
+  const { classes, cx } = useClasses(classesProp);
+  const { elementId, elementDisabled } = useContext(HvFormElementContext);
+  const localDisabled = disabled || elementDisabled;
+  const localId = id ?? setId(elementId, "counter");
+  const currentId = setId(localId, "currentQuantity");
+  const maxQuantityId = setId(localId, "maxQuantity");
+  const isOverloaded = currentCharQuantity > maxCharQuantity;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: localId,
+      className: cx(
+        classes.root,
+        {
+          [classes.counterDisabled]: !!localDisabled,
+          [classes.gutter]: !disableGutter
+        },
+        className
+      ),
+      "aria-live": "polite",
+      "aria-disabled": localDisabled,
+      ...others,
+      children: [
+        /* @__PURE__ */ jsx(
+          HvTypography,
+          {
+            id: currentId,
+            className: cx({
+              [classes.overloaded]: isOverloaded && !localDisabled,
+              [classes.counterDisabled]: !!localDisabled
+            }),
+            variant: "label",
+            component: "label",
+            children: currentCharQuantity
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          HvTypography,
+          {
+            id: maxQuantityId,
+            className: cx({
+              [classes.overloaded]: isOverloaded && !localDisabled,
+              [classes.counterDisabled]: !!localDisabled
+            }),
+            variant: "body",
+            component: "label",
+            children: ` ${separator} ${maxCharQuantity}`
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  HvCharCounter,
+  staticClasses as charCounterClasses
+};
+//# sourceMappingURL=CharCounter.js.map

package/dist/esm/Forms/CharCounter/CharCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CharCounter.js","sources":["../../../../src/Forms/CharCounter/CharCounter.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvTypography } from \"../../Typography\";\n\nimport { staticClasses, useClasses } from \"./CharCounter.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport { staticClasses as charCounterClasses };\n\nexport type HvCharCounterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCharCounterProps extends HvBaseProps {\n  /** The string that separates the current char quantity from the max quantity. */\n  separator?: string;\n  /** The maximum allowed length of the characters. */\n  maxCharQuantity: number;\n  /** The current char quantity to be rendered. */\n  currentCharQuantity?: number;\n  /** If `true` the counter is disabled. */\n  disabled?: boolean;\n  /** If `true` the info message won't have margins. */\n  disableGutter?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCharCounterClasses;\n}\n\n/**\n * Displays the capacity and current usage of a text input box (character count by default).\n *\n * Use the character counter when there is a character or word limit.\n * By itself it doesn't block the user from going above the limit.\n */\nexport const HvCharCounter = (props: HvCharCounterProps) => {\n  const {\n    separator = \"/\",\n    maxCharQuantity,\n    currentCharQuantity = 0,\n    classes: classesProp,\n    className,\n    id,\n    disabled,\n    disableGutter = false,\n    ...others\n  } = useDefaultProps(\"HvCharCounter\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId, elementDisabled } = useContext(HvFormElementContext);\n  const localDisabled = disabled || elementDisabled;\n  const localId = id ?? setId(elementId, \"counter\");\n  const currentId = setId(localId, \"currentQuantity\");\n  const maxQuantityId = setId(localId, \"maxQuantity\");\n  const isOverloaded = currentCharQuantity > maxCharQuantity;\n\n  return (\n    <div\n      id={localId}\n      className={cx(\n        classes.root,\n        {\n          [classes.counterDisabled]: !!localDisabled,\n          [classes.gutter]: !disableGutter,\n        },\n        className\n      )}\n      aria-live=\"polite\"\n      aria-disabled={localDisabled}\n      {...others}\n    >\n      <HvTypography\n        id={currentId}\n        className={cx({\n          [classes.overloaded]: isOverloaded && !localDisabled,\n          [classes.counterDisabled]: !!localDisabled,\n        })}\n        variant=\"label\"\n        component=\"label\"\n      >\n        {currentCharQuantity}\n      </HvTypography>\n      <HvTypography\n        id={maxQuantityId}\n        className={cx({\n          [classes.overloaded]: isOverloaded && !localDisabled,\n          [classes.counterDisabled]: !!localDisabled,\n        })}\n        variant=\"body\"\n        component=\"label\"\n      >\n        {` ${separator} ${maxCharQuantity}`}\n      </HvTypography>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAoCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA,sBAAsB;AAAA,IACtB,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,WAAW,gBAAgB,IAAI,WAAW,oBAAoB;AACtE,QAAM,gBAAgB,YAAY;AAClC,QAAM,UAAU,MAAM,MAAM,WAAW,SAAS;AAC1C,QAAA,YAAY,MAAM,SAAS,iBAAiB;AAC5C,QAAA,gBAAgB,MAAM,SAAS,aAAa;AAClD,QAAM,eAAe,sBAAsB;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,eAAe,GAAG,CAAC,CAAC;AAAA,UAC7B,CAAC,QAAQ,MAAM,GAAG,CAAC;AAAA,QACrB;AAAA,QACA;AAAA,MACF;AAAA,MACA,aAAU;AAAA,MACV,iBAAe;AAAA,MACd,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAW,GAAG;AAAA,cACZ,CAAC,QAAQ,UAAU,GAAG,gBAAgB,CAAC;AAAA,cACvC,CAAC,QAAQ,eAAe,GAAG,CAAC,CAAC;AAAA,YAAA,CAC9B;AAAA,YACD,SAAQ;AAAA,YACR,WAAU;AAAA,YAET,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAW,GAAG;AAAA,cACZ,CAAC,QAAQ,UAAU,GAAG,gBAAgB,CAAC;AAAA,cACvC,CAAC,QAAQ,eAAe,GAAG,CAAC,CAAC;AAAA,YAAA,CAC9B;AAAA,YACD,SAAQ;AAAA,YACR,WAAU;AAAA,YAET,UAAA,IAAI,SAAS,IAAI,eAAe;AAAA,UAAA;AAAA,QACnC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Forms/CharCounter/CharCounter.styles.js

@@ -0,0 +1,13 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvCharCounter", {
+  root: { display: "inline-block", float: "right" },
+  counterDisabled: { color: theme.colors.secondary_60 },
+  gutter: { paddingLeft: "6px" },
+  overloaded: { color: theme.colors.negative }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=CharCounter.styles.js.map

package/dist/esm/Forms/CharCounter/CharCounter.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CharCounter.styles.js","sources":["../../../../src/Forms/CharCounter/CharCounter.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCharCounter\", {\n  root: { display: \"inline-block\", float: \"right\" },\n  counterDisabled: { color: theme.colors.secondary_60 },\n  gutter: { paddingLeft: \"6px\" },\n  overloaded: { color: theme.colors.negative },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,EAAE,SAAS,gBAAgB,OAAO,QAAQ;AAAA,EAChD,iBAAiB,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EACpD,QAAQ,EAAE,aAAa,MAAM;AAAA,EAC7B,YAAY,EAAE,OAAO,MAAM,OAAO,SAAS;AAC7C,CAAC;"}

package/dist/esm/Forms/FormElement/FormElement.js

@@ -0,0 +1,46 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useMemo } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useUniqueId } from "../../hooks/useUniqueId.js";
+import { findDescriptors } from "./utils/FormUtils.js";
+import { HvFormElementContextProvider } from "./context/FormElementContext.js";
+import { HvFormElementValueContextProvider } from "./context/FormElementValueContext.js";
+import { HvFormElementDescriptorsContextProvider } from "./context/FormElementDescriptorsContext.js";
+import { useClasses } from "./FormElement.styles.js";
+import { staticClasses } from "./FormElement.styles.js";
+const HvFormElement = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    children,
+    id,
+    name,
+    value,
+    disabled = false,
+    required = false,
+    readOnly = false,
+    status = "standBy",
+    ...others
+  } = useDefaultProps("HvFormElement", props);
+  const { classes, cx } = useClasses(classesProp);
+  const elementId = useUniqueId(id, "hvformelement");
+  const contextValue = useMemo(
+    () => ({
+      elementId,
+      elementName: name,
+      elementStatus: status,
+      elementDisabled: disabled,
+      elementRequired: required,
+      elementReadOnly: readOnly
+    }),
+    [disabled, elementId, name, readOnly, required, status]
+  );
+  const descriptors = useMemo(() => findDescriptors(children), [children]);
+  return /* @__PURE__ */ jsx("div", { id, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsx(HvFormElementContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx(HvFormElementValueContextProvider, { value, children: /* @__PURE__ */ jsx(HvFormElementDescriptorsContextProvider, { value: descriptors, children }) }) }) });
+};
+HvFormElement.formElementType = "formelement";
+export {
+  HvFormElement,
+  staticClasses as formElementClasses
+};
+//# sourceMappingURL=FormElement.js.map

package/dist/esm/Forms/FormElement/FormElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormElement.js","sources":["../../../../src/Forms/FormElement/FormElement.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { findDescriptors } from \"./utils/FormUtils\";\nimport { HvFormElementContextProvider } from \"./context/FormElementContext\";\nimport { HvFormElementValueContextProvider } from \"./context/FormElementValueContext\";\nimport { HvFormElementDescriptorsContextProvider } from \"./context/FormElementDescriptorsContext\";\nimport { staticClasses, useClasses } from \"./FormElement.styles\";\n\nexport { staticClasses as formElementClasses };\n\nexport type HvFormElementClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFormStatus = \"standBy\" | \"valid\" | \"invalid\" | \"empty\";\n\nexport interface HvFormElementProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Name of the form element.\n   *\n   * Part of a name/value pair, should be the name property of the underling native input.\n   */\n  name?: string;\n  /**\n   * Current value of the form element.\n   *\n   * Part of a name/value pair, should be the value property of the underling native input.\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Whether the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.FormEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFormElementClasses;\n}\n\nexport const HvFormElement = (props: HvFormElementProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    id,\n    name,\n    value,\n    disabled = false,\n    required = false,\n    readOnly = false,\n    status = \"standBy\",\n    ...others\n  } = useDefaultProps(\"HvFormElement\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvformelement\");\n\n  const contextValue = useMemo(\n    () => ({\n      elementId,\n      elementName: name,\n      elementStatus: status,\n      elementDisabled: disabled,\n      elementRequired: required,\n      elementReadOnly: readOnly,\n    }),\n    [disabled, elementId, name, readOnly, required, status]\n  );\n\n  const descriptors = useMemo(() => findDescriptors(children), [children]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <HvFormElementContextProvider value={contextValue}>\n        <HvFormElementValueContextProvider value={value}>\n          <HvFormElementDescriptorsContextProvider value={descriptors}>\n            {children}\n          </HvFormElementDescriptorsContextProvider>\n        </HvFormElementValueContextProvider>\n      </HvFormElementContextProvider>\n    </div>\n  );\n};\n\nHvFormElement.formElementType = \"formelement\";\n"],"names":[],"mappings":";;;;;;;;;;AAiEa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,YAAY,YAAY,IAAI,eAAe;AAEjD,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,CAAC,UAAU,WAAW,MAAM,UAAU,UAAU,MAAM;AAAA,EAAA;AAGlD,QAAA,cAAc,QAAQ,MAAM,gBAAgB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAGrE,SAAA,oBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACvD,UAAA,oBAAC,gCAA6B,OAAO,cACnC,UAAC,oBAAA,mCAAA,EAAkC,OACjC,UAAA,oBAAC,yCAAwC,EAAA,OAAO,aAC7C,SAAA,CACH,EACF,CAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEA,cAAc,kBAAkB;"}

package/dist/esm/Forms/FormElement/FormElement.styles.js

@@ -0,0 +1,9 @@
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvFormElement", {
+  root: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=FormElement.styles.js.map

package/dist/esm/Forms/FormElement/FormElement.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormElement.styles.js","sources":["../../../../src/Forms/FormElement/FormElement.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFormElement\", {\n  root: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,CAAC;AACT,CAAC;"}

package/dist/esm/Forms/FormElement/context/FormElementContext.js

@@ -0,0 +1,11 @@
+import React__default from "react";
+const HvFormElementContext = React__default.createContext({});
+const HvFormElementContextProvider = HvFormElementContext.Provider;
+const HvFormElementContextConsumer = HvFormElementContext.Consumer;
+export {
+  HvFormElementContext,
+  HvFormElementContextConsumer,
+  HvFormElementContextProvider,
+  HvFormElementContext as default
+};
+//# sourceMappingURL=FormElementContext.js.map

package/dist/esm/Forms/FormElement/context/FormElementContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormElementContext.js","sources":["../../../../../src/Forms/FormElement/context/FormElementContext.ts"],"sourcesContent":["import React from \"react\";\n\nexport const HvFormElementContext = React.createContext<{\n  elementId?: string;\n  elementDisabled?: boolean;\n  elementRequired?: boolean;\n  elementStatus?: string;\n}>({});\n\nexport const HvFormElementContextProvider = HvFormElementContext.Provider;\nexport const HvFormElementContextConsumer = HvFormElementContext.Consumer;\nexport default HvFormElementContext;\n"],"names":["React"],"mappings":";AAEO,MAAM,uBAAuBA,eAAM,cAKvC,EAAE;AAEE,MAAM,+BAA+B,qBAAqB;AAC1D,MAAM,+BAA+B,qBAAqB;"}

package/dist/esm/Forms/FormElement/context/FormElementDescriptorsContext.js

@@ -0,0 +1,11 @@
+import React__default from "react";
+const HvFormElementDescriptorsContext = React__default.createContext({});
+const HvFormElementDescriptorsContextProvider = HvFormElementDescriptorsContext.Provider;
+const HvFormElementDescriptorsContextConsumer = HvFormElementDescriptorsContext.Consumer;
+export {
+  HvFormElementDescriptorsContext,
+  HvFormElementDescriptorsContextConsumer,
+  HvFormElementDescriptorsContextProvider,
+  HvFormElementDescriptorsContext as default
+};
+//# sourceMappingURL=FormElementDescriptorsContext.js.map

package/dist/esm/Forms/FormElement/context/FormElementDescriptorsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormElementDescriptorsContext.js","sources":["../../../../../src/Forms/FormElement/context/FormElementDescriptorsContext.ts"],"sourcesContent":["import React from \"react\";\n\nexport const HvFormElementDescriptorsContext = React.createContext<{\n  input?: any;\n  label?: any;\n}>({});\n\nexport const HvFormElementDescriptorsContextProvider =\n  HvFormElementDescriptorsContext.Provider;\nexport const HvFormElementDescriptorsContextConsumer =\n  HvFormElementDescriptorsContext.Consumer;\nexport default HvFormElementDescriptorsContext;\n"],"names":["React"],"mappings":";AAEO,MAAM,kCAAkCA,eAAM,cAGlD,EAAE;AAEE,MAAM,0CACX,gCAAgC;AAC3B,MAAM,0CACX,gCAAgC;"}

package/dist/esm/Forms/FormElement/context/FormElementValueContext.js

@@ -0,0 +1,11 @@
+import React__default from "react";
+const HvFormElementValueContext = React__default.createContext(void 0);
+const HvFormElementValueContextProvider = HvFormElementValueContext.Provider;
+const HvFormElementValueContextConsumer = HvFormElementValueContext.Consumer;
+export {
+  HvFormElementValueContext,
+  HvFormElementValueContextConsumer,
+  HvFormElementValueContextProvider,
+  HvFormElementValueContext as default
+};
+//# sourceMappingURL=FormElementValueContext.js.map

package/dist/esm/Forms/FormElement/context/FormElementValueContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormElementValueContext.js","sources":["../../../../../src/Forms/FormElement/context/FormElementValueContext.ts"],"sourcesContent":["import React from \"react\";\n\nexport const HvFormElementValueContext = React.createContext(undefined);\n\nexport const HvFormElementValueContextProvider =\n  HvFormElementValueContext.Provider;\nexport const HvFormElementValueContextConsumer =\n  HvFormElementValueContext.Consumer;\nexport default HvFormElementValueContext;\n"],"names":["React"],"mappings":";AAEa,MAAA,4BAA4BA,eAAM,cAAc,MAAS;AAE/D,MAAM,oCACX,0BAA0B;AACrB,MAAM,oCACX,0BAA0B;"}

package/dist/esm/Forms/FormElement/utils/FormUtils.js

@@ -0,0 +1,60 @@
+import React__default from "react";
+const findDescriptors = (children, descriptors = {
+  input: [],
+  label: [],
+  description: [],
+  controlled: [],
+  errormessage: [],
+  // TODO: refactor this out
+  HvCalendarHeader: []
+}) => {
+  React__default.Children.forEach(children, (child) => {
+    if (child?.type?.formElementType && child.props?.id) {
+      descriptors[child.type.formElementType]?.push({
+        id: child.props?.id,
+        htmlFor: child.props?.htmlFor
+      });
+    }
+    if (child?.type?.formElementType !== "formelement") {
+      findDescriptors(child?.props?.children, descriptors);
+    }
+  });
+  return descriptors;
+};
+const getIdReferenceListFor = (formElementType, descriptors, filterFor = null) => {
+  const referenceList = descriptors?.[formElementType]?.filter((d) => d.htmlFor !== filterFor)?.map((d) => d.id).join(" ").trim();
+  return referenceList !== "" ? referenceList : void 0;
+};
+const getIdReferenceFor = (formElementType, descriptors, filterFor = null) => {
+  const referenceList = descriptors?.[formElementType]?.filter((d) => d.htmlFor !== filterFor)?.map((d) => d.id)?.[0];
+  return referenceList !== "" ? referenceList : void 0;
+};
+const buildFormElementPropsFromContext = (name, disabled, readOnly, required, context) => {
+  return {
+    name: name || context?.elementName,
+    disabled: disabled !== void 0 ? disabled : context?.elementDisabled,
+    readOnly: readOnly !== void 0 ? readOnly : context?.elementReadOnly,
+    required: required !== void 0 ? required : context?.elementRequired,
+    status: context?.elementStatus
+  };
+};
+const buildAriaPropsFromContext = (props, context, isInvalid, inputId) => {
+  const arias = {
+    "aria-labelledby": props?.["aria-labelledby"] !== void 0 ? props?.["aria-labelledby"] : getIdReferenceListFor("label", context?.descriptors, inputId),
+    "aria-describedby": props?.["aria-describedby"] !== void 0 ? props?.["aria-describedby"] : getIdReferenceListFor("description", context?.descriptors),
+    "aria-controls": props?.["aria-controls"] !== void 0 ? props?.["aria-controls"] : getIdReferenceListFor("controlled", context?.descriptors)
+  };
+  if (isInvalid) {
+    arias["aria-invalid"] = isInvalid;
+    arias["aria-errormessage"] = props?.["aria-errormessage"] !== void 0 ? props?.["aria-errormessage"] : getIdReferenceFor("errormessage", context?.descriptors);
+  }
+  return arias;
+};
+export {
+  buildAriaPropsFromContext,
+  buildFormElementPropsFromContext,
+  findDescriptors,
+  getIdReferenceFor,
+  getIdReferenceListFor
+};
+//# sourceMappingURL=FormUtils.js.map

package/dist/esm/Forms/FormElement/utils/FormUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormUtils.js","sources":["../../../../../src/Forms/FormElement/utils/FormUtils.ts"],"sourcesContent":["import React from \"react\";\n\ninterface Descriptor {\n  id?: string;\n  htmlFor?: string;\n}\n/**\n * Scans the element's children looking for the children IDs that match the different form element types.\n * This function will produce an object that has a key for each provided name\n * Inside each key there will be an array with each id of the found descriptor.\n *\n * @param {Array} children - The children inside the form element to scan.\n * @param {Object} descriptors - Initial descriptors map (used for recursion).\n *\n */\nconst findDescriptors = (\n  children,\n  descriptors: {\n    input: Descriptor[];\n    label: Descriptor[];\n    description: Descriptor[];\n    controlled: Descriptor[];\n    errormessage: Descriptor[];\n    HvCalendarHeader?: Descriptor[];\n  } = {\n    input: [],\n    label: [],\n    description: [],\n    controlled: [],\n    errormessage: [],\n\n    // TODO: refactor this out\n    HvCalendarHeader: [],\n  }\n) => {\n  React.Children.forEach(children, (child) => {\n    if (child?.type?.formElementType && child.props?.id) {\n      descriptors[child.type.formElementType]?.push({\n        id: child.props?.id,\n        htmlFor: child.props?.htmlFor,\n      });\n    }\n\n    if (child?.type?.formElementType !== \"formelement\") {\n      findDescriptors(child?.props?.children, descriptors);\n    }\n  });\n\n  return descriptors;\n};\n\nconst getIdReferenceListFor = (\n  formElementType,\n  descriptors,\n  filterFor = null\n) => {\n  const referenceList = descriptors?.[formElementType]\n    ?.filter((d) => d.htmlFor !== filterFor)\n    ?.map((d) => d.id)\n    .join(\" \")\n    .trim();\n\n  return referenceList !== \"\" ? referenceList : undefined;\n};\n\nconst getIdReferenceFor = (formElementType, descriptors, filterFor = null) => {\n  const referenceList = descriptors?.[formElementType]\n    ?.filter((d) => d.htmlFor !== filterFor)\n    ?.map((d) => d.id)?.[0];\n\n  return referenceList !== \"\" ? referenceList : undefined;\n};\n\nconst buildFormElementPropsFromContext = (\n  name,\n  disabled,\n  readOnly,\n  required,\n  context\n) => {\n  return {\n    name: name || context?.elementName,\n    disabled: disabled !== undefined ? disabled : context?.elementDisabled,\n    readOnly: readOnly !== undefined ? readOnly : context?.elementReadOnly,\n    required: required !== undefined ? required : context?.elementRequired,\n    status: context?.elementStatus,\n  };\n};\n\nconst buildAriaPropsFromContext = (props, context, isInvalid, inputId) => {\n  const arias: React.AriaAttributes = {\n    \"aria-labelledby\":\n      props?.[\"aria-labelledby\"] !== undefined\n        ? props?.[\"aria-labelledby\"]\n        : getIdReferenceListFor(\"label\", context?.descriptors, inputId),\n    \"aria-describedby\":\n      props?.[\"aria-describedby\"] !== undefined\n        ? props?.[\"aria-describedby\"]\n        : getIdReferenceListFor(\"description\", context?.descriptors),\n    \"aria-controls\":\n      props?.[\"aria-controls\"] !== undefined\n        ? props?.[\"aria-controls\"]\n        : getIdReferenceListFor(\"controlled\", context?.descriptors),\n  };\n\n  if (isInvalid) {\n    arias[\"aria-invalid\"] = isInvalid;\n    arias[\"aria-errormessage\"] =\n      props?.[\"aria-errormessage\"] !== undefined\n        ? props?.[\"aria-errormessage\"]\n        : getIdReferenceFor(\"errormessage\", context?.descriptors);\n  }\n\n  return arias;\n};\n\nexport {\n  findDescriptors,\n  getIdReferenceListFor,\n  getIdReferenceFor,\n  buildFormElementPropsFromContext,\n  buildAriaPropsFromContext,\n};\n"],"names":["React"],"mappings":";AAeM,MAAA,kBAAkB,CACtB,UACA,cAOI;AAAA,EACF,OAAO,CAAC;AAAA,EACR,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,YAAY,CAAC;AAAA,EACb,cAAc,CAAC;AAAA;AAAA,EAGf,kBAAkB,CAAC;AACrB,MACG;AACHA,iBAAM,SAAS,QAAQ,UAAU,CAAC,UAAU;AAC1C,QAAI,OAAO,MAAM,mBAAmB,MAAM,OAAO,IAAI;AACnD,kBAAY,MAAM,KAAK,eAAe,GAAG,KAAK;AAAA,QAC5C,IAAI,MAAM,OAAO;AAAA,QACjB,SAAS,MAAM,OAAO;AAAA,MAAA,CACvB;AAAA,IACH;AAEI,QAAA,OAAO,MAAM,oBAAoB,eAAe;AAClC,sBAAA,OAAO,OAAO,UAAU,WAAW;AAAA,IACrD;AAAA,EAAA,CACD;AAEM,SAAA;AACT;AAEA,MAAM,wBAAwB,CAC5B,iBACA,aACA,YAAY,SACT;AACG,QAAA,gBAAgB,cAAc,eAAe,GAC/C,OAAO,CAAC,MAAM,EAAE,YAAY,SAAS,GACrC,IAAI,CAAC,MAAM,EAAE,EAAE,EAChB,KAAK,GAAG,EACR;AAEI,SAAA,kBAAkB,KAAK,gBAAgB;AAChD;AAEA,MAAM,oBAAoB,CAAC,iBAAiB,aAAa,YAAY,SAAS;AAC5E,QAAM,gBAAgB,cAAc,eAAe,GAC/C,OAAO,CAAC,MAAM,EAAE,YAAY,SAAS,GACrC,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,CAAC;AAEjB,SAAA,kBAAkB,KAAK,gBAAgB;AAChD;AAEA,MAAM,mCAAmC,CACvC,MACA,UACA,UACA,UACA,YACG;AACI,SAAA;AAAA,IACL,MAAM,QAAQ,SAAS;AAAA,IACvB,UAAU,aAAa,SAAY,WAAW,SAAS;AAAA,IACvD,UAAU,aAAa,SAAY,WAAW,SAAS;AAAA,IACvD,UAAU,aAAa,SAAY,WAAW,SAAS;AAAA,IACvD,QAAQ,SAAS;AAAA,EAAA;AAErB;AAEA,MAAM,4BAA4B,CAAC,OAAO,SAAS,WAAW,YAAY;AACxE,QAAM,QAA8B;AAAA,IAClC,mBACE,QAAQ,iBAAiB,MAAM,SAC3B,QAAQ,iBAAiB,IACzB,sBAAsB,SAAS,SAAS,aAAa,OAAO;AAAA,IAClE,oBACE,QAAQ,kBAAkB,MAAM,SAC5B,QAAQ,kBAAkB,IAC1B,sBAAsB,eAAe,SAAS,WAAW;AAAA,IAC/D,iBACE,QAAQ,eAAe,MAAM,SACzB,QAAQ,eAAe,IACvB,sBAAsB,cAAc,SAAS,WAAW;AAAA,EAAA;AAGhE,MAAI,WAAW;AACb,UAAM,cAAc,IAAI;AACxB,UAAM,mBAAmB,IACvB,QAAQ,mBAAmB,MAAM,SAC7B,QAAQ,mBAAmB,IAC3B,kBAAkB,gBAAgB,SAAS,WAAW;AAAA,EAC9D;AAEO,SAAA;AACT;"}

package/dist/esm/Forms/FormElement/validationStates.js

@@ -0,0 +1,13 @@
+const validationState = Object.freeze({
+  standBy: "standBy",
+  valid: "valid",
+  invalid: "invalid"
+});
+const isValid = (compareState) => compareState === validationState.valid;
+const isInvalid = (compareState) => compareState === validationState.invalid;
+export {
+  validationState as default,
+  isInvalid,
+  isValid
+};
+//# sourceMappingURL=validationStates.js.map

package/dist/esm/Forms/FormElement/validationStates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validationStates.js","sources":["../../../../src/Forms/FormElement/validationStates.ts"],"sourcesContent":["import { HvFormStatus } from \"./FormElement\";\n\nconst validationState = Object.freeze({\n  standBy: \"standBy\",\n  valid: \"valid\",\n  invalid: \"invalid\",\n});\n\nexport const isValid = (compareState: HvFormStatus) =>\n  compareState === validationState.valid;\nexport const isInvalid = (compareState: HvFormStatus) =>\n  compareState === validationState.invalid;\n\nexport default validationState;\n"],"names":[],"mappings":"AAEM,MAAA,kBAAkB,OAAO,OAAO;AAAA,EACpC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX,CAAC;AAEM,MAAM,UAAU,CAAC,iBACtB,iBAAiB,gBAAgB;AAC5B,MAAM,YAAY,CAAC,iBACxB,iBAAiB,gBAAgB;"}

package/dist/esm/Forms/InfoMessage/InfoMessage.js

@@ -0,0 +1,46 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useContext } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { setId } from "../../utils/setId.js";
+import { useClasses } from "./InfoMessage.styles.js";
+import { staticClasses } from "./InfoMessage.styles.js";
+import { HvFormElementContext } from "../FormElement/context/FormElementContext.js";
+import { HvTypography } from "../../Typography/Typography.js";
+const HvInfoMessage = (props) => {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    children,
+    disabled,
+    disableGutter = false,
+    ...others
+  } = useDefaultProps("HvInfoMessage", props);
+  const { classes, cx } = useClasses(classesProp);
+  const { elementId, elementDisabled } = useContext(HvFormElementContext);
+  const localDisabled = disabled || elementDisabled;
+  const localId = id ?? setId(elementId, "description");
+  return /* @__PURE__ */ jsx(
+    HvTypography,
+    {
+      id: localId,
+      className: cx(
+        classes.root,
+        {
+          [classes.infoDisabled]: !!localDisabled,
+          [classes.gutter]: !disableGutter
+        },
+        className
+      ),
+      variant: "body",
+      component: "label",
+      ...others,
+      children
+    }
+  );
+};
+export {
+  HvInfoMessage,
+  staticClasses as infoMessageClasses
+};
+//# sourceMappingURL=InfoMessage.js.map

package/dist/esm/Forms/InfoMessage/InfoMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoMessage.js","sources":["../../../../src/Forms/InfoMessage/InfoMessage.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { setId } from \"../../utils/setId\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\n\nimport { staticClasses, useClasses } from \"./InfoMessage.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport { staticClasses as infoMessageClasses };\n\nexport type HvInfoMessageClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInfoMessageProps extends HvTypographyProps<\"label\"> {\n  /** If `true` the label is disabled. */\n  disabled?: boolean;\n  /** If `true` the info message won't have margins. */\n  disableGutter?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvInfoMessageClasses;\n}\n\n/**\n * Provides the user with additional descriptive text for the form element.\n */\nexport const HvInfoMessage = (props: HvInfoMessageProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    children,\n    disabled,\n    disableGutter = false,\n    ...others\n  } = useDefaultProps(\"HvInfoMessage\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId, elementDisabled } = useContext(HvFormElementContext);\n  const localDisabled = disabled || elementDisabled;\n  const localId = id ?? setId(elementId, \"description\");\n\n  return (\n    <HvTypography\n      id={localId}\n      className={cx(\n        classes.root,\n        {\n          [classes.infoDisabled]: !!localDisabled,\n          [classes.gutter]: !disableGutter,\n        },\n        className\n      )}\n      variant=\"body\"\n      component=\"label\"\n      {...others}\n    >\n      {children}\n    </HvTypography>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA0Ba,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,WAAW,gBAAgB,IAAI,WAAW,oBAAoB;AACtE,QAAM,gBAAgB,YAAY;AAClC,QAAM,UAAU,MAAM,MAAM,WAAW,aAAa;AAGlD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,YAAY,GAAG,CAAC,CAAC;AAAA,UAC1B,CAAC,QAAQ,MAAM,GAAG,CAAC;AAAA,QACrB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAQ;AAAA,MACR,WAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Forms/InfoMessage/InfoMessage.styles.js

@@ -0,0 +1,12 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvInfoMessage", {
+  root: { color: theme.colors.secondary_80, display: "inline-block" },
+  infoDisabled: { color: theme.colors.secondary_60 },
+  gutter: { padding: `0 0 6px ${theme.space.xs}` }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=InfoMessage.styles.js.map

package/dist/esm/Forms/InfoMessage/InfoMessage.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoMessage.styles.js","sources":["../../../../src/Forms/InfoMessage/InfoMessage.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInfoMessage\", {\n  root: { color: theme.colors.secondary_80, display: \"inline-block\" },\n  infoDisabled: { color: theme.colors.secondary_60 },\n  gutter: { padding: `0 0 6px ${theme.space.xs}` },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,EAAE,OAAO,MAAM,OAAO,cAAc,SAAS,eAAe;AAAA,EAClE,cAAc,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EACjD,QAAQ,EAAE,SAAS,WAAW,MAAM,MAAM,EAAE,GAAG;AACjD,CAAC;"}