@hitachivantara/uikit-react-core 5.44.1 → 5.44.3

package/dist/esm/Banner/BannerContent/BannerContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerContent.js","sources":["../../../../src/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\n\nimport { iconVariant } from \"../../utils/iconVariant\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvActionGeneric } from \"../../ActionsGeneric\";\n\nimport { HvBannerActionPosition, HvBannerVariant } from \"../types\";\nimport { HvActionContainer, HvActionContainerProps } from \"./ActionContainer\";\nimport { HvMessageContainer } from \"./MessageContainer\";\nimport { useClasses, staticClasses } from \"./BannerContent.styles\";\n\nexport { staticClasses as bannerContentClasses };\n\nexport type HvBannerContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\"> {\n  /** The message to display. */\n  content?: string;\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** onClose function. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display on the right side. */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** The props to pass down to the Action Container. */\n  actionProps?: HvActionContainerProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      showIcon = false,\n      customIcon,\n      variant = \"default\",\n      onClose,\n      actions,\n      actionsCallback,\n      actionsPosition = \"auto\",\n      content,\n      actionProps,\n      ...others\n    } = props;\n    const { classes, cx } = useClasses(classesProp);\n    const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n\n    // default to inline\n    // this might try to be more intelligent in the future,\n    // taking into account the content length, available space,\n    // number of actions, etc..\n    const effectiveActionsPosition =\n      actionsPosition === \"auto\" ? \"inline\" : actionsPosition;\n\n    return (\n      <div className={classes.outContainer}>\n        <SnackbarContent\n          ref={ref}\n          id={id}\n          classes={{\n            root: classes.root,\n            message: classes.message,\n            action: classes.action,\n          }}\n          className={cx(classes?.baseVariant, classes?.[variant])}\n          message={\n            <HvMessageContainer\n              id={id}\n              icon={icon}\n              {...(effectiveActionsPosition === \"inline\" && {\n                actionsOnMessage: actions,\n                actionsOnMessageCallback: actionsCallback,\n              })}\n              message={content}\n            />\n          }\n          action={\n            <HvActionContainer\n              id={id}\n              onClose={onClose}\n              {...(effectiveActionsPosition === \"bottom-right\" && {\n                action: actions,\n                actionCallback: actionsCallback,\n              })}\n              {...actionProps}\n            />\n          }\n          {...others}\n        />\n      </div>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;AA+CO,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAC9C,UAAM,OAAO,cAAe,YAAY,YAAY,SAAS,WAAW;AAMlE,UAAA,2BACJ,oBAAoB,SAAS,WAAW;AAE1C,WACG,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACtB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,SAAS,QAAQ;AAAA,UACjB,QAAQ,QAAQ;AAAA,QAClB;AAAA,QACA,WAAW,GAAG,SAAS,aAAa,UAAU,OAAO,CAAC;AAAA,QACtD,SACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACC,GAAI,6BAA6B,YAAY;AAAA,cAC5C,kBAAkB;AAAA,cAClB,0BAA0B;AAAA,YAC5B;AAAA,YACA,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAEF,QACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACC,GAAI,6BAA6B,kBAAkB;AAAA,cAClD,QAAQ;AAAA,cACR,gBAAgB;AAAA,YAClB;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAED,GAAG;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AACF;"}

package/dist/esm/Banner/BannerContent/BannerContent.styles.js

@@ -0,0 +1,48 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const { useClasses, staticClasses } = createClasses("HvBannerContent", {
+  root: {
+    minWidth: "100%",
+    position: "relative",
+    display: "flex",
+    flexWrap: "nowrap",
+    boxShadow: "none",
+    borderRadius: theme.radii.none
+  },
+  message: {
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing("xs", 0),
+    paddingLeft: theme.space.sm
+  },
+  action: {
+    padding: theme.spacing("xs"),
+    marginRight: 0,
+    flex: "0 0 auto",
+    placeSelf: "stretch"
+  },
+  baseVariant: {
+    padding: 0
+  },
+  success: {
+    backgroundColor: theme.colors.positive_20
+  },
+  warning: {
+    backgroundColor: theme.colors.warning_20
+  },
+  error: {
+    backgroundColor: theme.colors.negative_20
+  },
+  default: {
+    backgroundColor: theme.colors.neutral_20
+  },
+  outContainer: {
+    width: "100%",
+    position: "relative"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=BannerContent.styles.js.map

package/dist/esm/Banner/BannerContent/BannerContent.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerContent.styles.js","sources":["../../../../src/Banner/BannerContent/BannerContent.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBannerContent\", {\n  root: {\n    minWidth: \"100%\",\n    position: \"relative\",\n    display: \"flex\",\n    flexWrap: \"nowrap\",\n    boxShadow: \"none\",\n    borderRadius: theme.radii.none,\n  },\n  message: {\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: theme.spacing(\"xs\", 0),\n    paddingLeft: theme.space.sm,\n  },\n  action: {\n    padding: theme.spacing(\"xs\"),\n    marginRight: 0,\n    flex: \"0 0 auto\",\n    placeSelf: \"stretch\",\n  },\n  baseVariant: {\n    padding: 0,\n  },\n  success: {\n    backgroundColor: theme.colors.positive_20,\n  },\n  warning: {\n    backgroundColor: theme.colors.warning_20,\n  },\n  error: {\n    backgroundColor: theme.colors.negative_20,\n  },\n  default: {\n    backgroundColor: theme.colors.neutral_20,\n  },\n  outContainer: {\n    width: \"100%\",\n    position: \"relative\",\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,YAAY,kBAAkB,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,IACX,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,MAAM,CAAC;AAAA,IAC9B,aAAa,MAAM,MAAM;AAAA,EAC3B;AAAA,EACA,QAAQ;AAAA,IACN,SAAS,MAAM,QAAQ,IAAI;AAAA,IAC3B,aAAa;AAAA,IACb,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,OAAO;AAAA,IACL,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,cAAc;AAAA,IACZ,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AACF,CAAC;"}

package/dist/esm/Banner/BannerContent/MessageContainer/MessageContainer.js

@@ -0,0 +1,41 @@
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { setId } from "../../../utils/setId.js";
+import { useClasses } from "./MessageContainer.styles.js";
+import { staticClasses } from "./MessageContainer.styles.js";
+import { HvTypography } from "../../../Typography/Typography.js";
+import { HvActionsGeneric } from "../../../ActionsGeneric/ActionsGeneric.js";
+const HvMessageContainer = ({
+  id,
+  classes: classesProp,
+  icon,
+  actionsOnMessage,
+  actionsOnMessageCallback,
+  message
+}) => {
+  const { classes } = useClasses(classesProp);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx("div", { className: classes.iconContainer, children: icon }),
+    /* @__PURE__ */ jsx(HvTypography, { id: setId(id, "message-text"), className: classes.message, children: message }),
+    actionsOnMessage && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: setId(id, "message-actions"),
+        className: classes.actionMessageContainer,
+        children: /* @__PURE__ */ jsx(
+          HvActionsGeneric,
+          {
+            id,
+            category: "semantic",
+            actions: actionsOnMessage,
+            actionsCallback: actionsOnMessageCallback
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  HvMessageContainer,
+  staticClasses as messageContainerClasses
+};
+//# sourceMappingURL=MessageContainer.js.map

package/dist/esm/Banner/BannerContent/MessageContainer/MessageContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageContainer.js","sources":["../../../../../src/Banner/BannerContent/MessageContainer/MessageContainer.tsx"],"sourcesContent":["import { HvBaseProps } from \"../../../types/generic\";\nimport { HvActionGeneric, HvActionsGeneric } from \"../../../ActionsGeneric\";\nimport { HvTypography } from \"../../../Typography\";\nimport { ExtractNames } from \"../../../utils/classes\";\nimport { setId } from \"../../../utils/setId\";\n\nimport { staticClasses, useClasses } from \"./MessageContainer.styles\";\n\nexport { staticClasses as messageContainerClasses };\n\nexport type HvMessageContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMessageContainerProps extends HvBaseProps {\n  /** Icon to be presented. */\n  icon?: React.ReactNode;\n  /** The message to display. */\n  message?: React.ReactNode;\n  /** Actions to display on message. */\n  actionsOnMessage?: React.ReactNode | HvActionGeneric[];\n  /** The callback function ran when an action is triggered, receiving `actionsOnMessage` as param */\n  actionsOnMessageCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMessageContainerClasses;\n}\n\nexport const HvMessageContainer = ({\n  id,\n  classes: classesProp,\n  icon,\n  actionsOnMessage,\n  actionsOnMessageCallback,\n  message,\n}: HvMessageContainerProps) => {\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <>\n      {icon && <div className={classes.iconContainer}>{icon}</div>}\n      <HvTypography id={setId(id, \"message-text\")} className={classes.message}>\n        {message}\n      </HvTypography>\n      {actionsOnMessage && (\n        <div\n          id={setId(id, \"message-actions\")}\n          className={classes.actionMessageContainer}\n        >\n          <HvActionsGeneric\n            id={id}\n            category=\"semantic\"\n            actions={actionsOnMessage}\n            actionsCallback={actionsOnMessageCallback}\n          />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA6BO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AAC7B,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,QAAS,oBAAA,OAAA,EAAI,WAAW,QAAQ,eAAgB,UAAK,MAAA;AAAA,IACtD,oBAAC,cAAa,EAAA,IAAI,MAAM,IAAI,cAAc,GAAG,WAAW,QAAQ,SAC7D,UACH,QAAA,CAAA;AAAA,IACC,oBACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,iBAAiB;AAAA,QAC/B,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,UAAS;AAAA,YACT,SAAS;AAAA,YACT,iBAAiB;AAAA,UAAA;AAAA,QACnB;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/Banner/BannerContent/MessageContainer/MessageContainer.styles.js

@@ -0,0 +1,24 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../../utils/classes.js";
+const name = "HvBannerMessageContainer";
+const { staticClasses, useClasses } = createClasses(name, {
+  message: {
+    color: theme.colors.base_dark,
+    wordBreak: "break-word",
+    maxWidth: "700px",
+    overflow: "hidden",
+    marginRight: 10
+  },
+  iconContainer: {
+    marginRight: theme.space.xs,
+    marginLeft: -theme.space.xs
+  },
+  actionMessageContainer: {
+    flex: "0 0 auto"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=MessageContainer.styles.js.map

package/dist/esm/Banner/BannerContent/MessageContainer/MessageContainer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageContainer.styles.js","sources":["../../../../../src/Banner/BannerContent/MessageContainer/MessageContainer.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../../utils/classes\";\n\nconst name = \"HvBannerMessageContainer\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  message: {\n    color: theme.colors.base_dark,\n    wordBreak: \"break-word\",\n    maxWidth: \"700px\",\n    overflow: \"hidden\",\n    marginRight: 10,\n  },\n  iconContainer: {\n    marginRight: theme.space.xs,\n    marginLeft: -theme.space.xs,\n  },\n  actionMessageContainer: {\n    flex: \"0 0 auto\",\n  },\n});\n"],"names":[],"mappings":";;AAIA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,SAAS;AAAA,IACP,OAAO,MAAM,OAAO;AAAA,IACpB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EACA,eAAe;AAAA,IACb,aAAa,MAAM,MAAM;AAAA,IACzB,YAAY,CAAC,MAAM,MAAM;AAAA,EAC3B;AAAA,EACA,wBAAwB;AAAA,IACtB,MAAM;AAAA,EACR;AACF,CAAC;"}

package/dist/esm/BaseCheckBox/BaseCheckBox.js

@@ -0,0 +1,99 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useState, useCallback } from "react";
+import MuiCheckbox from "@mui/material/Checkbox";
+import { Checkbox, CheckboxPartial, CheckboxCheck } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses } from "./BaseCheckBox.styles.js";
+import { staticClasses } from "./BaseCheckBox.styles.js";
+const getSelectorIcons = (options, classes) => {
+  const { disabled, semantic } = options;
+  const color = disabled && ["atmo3", "secondary_60"] || semantic && ["base_light", "base_dark"] || void 0;
+  const checkedColor = disabled && ["atmo3", "secondary_60"] || semantic && ["base_dark", "base_light"] || void 0;
+  return {
+    checkbox: /* @__PURE__ */ jsx(Checkbox, { color, className: classes.icon }),
+    checkboxPartial: /* @__PURE__ */ jsx(CheckboxPartial, { color, className: classes.icon }),
+    checkboxChecked: /* @__PURE__ */ jsx(CheckboxCheck, { color: checkedColor, className: classes.icon })
+  };
+};
+const HvBaseCheckBox = forwardRef((props, ref) => {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    name,
+    inputProps,
+    onChange,
+    onFocusVisible,
+    onBlur,
+    checked,
+    indeterminate,
+    defaultChecked,
+    value = "on",
+    required = false,
+    readOnly = false,
+    disabled = false,
+    semantic = false,
+    ...others
+  } = useDefaultProps("HvBaseCheckBox", props);
+  const { classes, cx } = useClasses(classesProp);
+  const [focusVisible, setFocusVisible] = useState(false);
+  const icons = getSelectorIcons({ disabled, semantic }, classes);
+  const onChangeCallback = useCallback(
+    (event) => {
+      if (readOnly) {
+        return;
+      }
+      onChange?.(event, event.target.checked, value);
+    },
+    [onChange, readOnly, value]
+  );
+  const onBlurCallback = useCallback(
+    (event) => {
+      setFocusVisible(false);
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
+  const onFocusVisibleCallback = useCallback(
+    (event) => {
+      setFocusVisible(true);
+      onFocusVisible?.(event);
+    },
+    [onFocusVisible]
+  );
+  return /* @__PURE__ */ jsx(
+    MuiCheckbox,
+    {
+      ref,
+      id,
+      name,
+      value,
+      className: cx(
+        classes.root,
+        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },
+        className
+      ),
+      icon: icons.checkbox,
+      indeterminateIcon: icons.checkboxPartial,
+      checkedIcon: icons.checkboxChecked,
+      disabled,
+      required,
+      readOnly,
+      checked,
+      defaultChecked,
+      indeterminate,
+      inputProps,
+      onChange: onChangeCallback,
+      onFocusVisible: onFocusVisibleCallback,
+      onBlur: onBlurCallback,
+      color: "default",
+      disableRipple: true,
+      ...others
+    }
+  );
+});
+export {
+  HvBaseCheckBox,
+  staticClasses as baseCheckBoxClasses
+};
+//# sourceMappingURL=BaseCheckBox.js.map

package/dist/esm/BaseCheckBox/BaseCheckBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCheckBox.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\n\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport {\n  CheckboxCheck as CheckboxCheckIcon,\n  CheckboxPartial as CheckboxPartialIcon,\n  Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\"> {\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = (\n  options: {\n    disabled: boolean;\n    semantic: boolean;\n  },\n  classes: HvBaseCheckBoxClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  // Default colors: [\"atmo1\",\"secondary\"]\n  return {\n    checkbox: <CheckboxIcon color={color} className={classes.icon} />,\n    checkboxPartial: (\n      <CheckboxPartialIcon color={color} className={classes.icon} />\n    ),\n    checkboxChecked: (\n      <CheckboxCheckIcon color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = forwardRef<\n  HTMLButtonElement,\n  HvBaseCheckBoxProps\n>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    name,\n    inputProps,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    checked,\n    indeterminate,\n    defaultChecked,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    ...others\n  } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible]\n  );\n\n  return (\n    <MuiCheckbox\n      ref={ref}\n      id={id}\n      name={name}\n      value={value}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },\n        className\n      )}\n      icon={icons.checkbox}\n      indeterminateIcon={icons.checkboxPartial}\n      checkedIcon={icons.checkboxChecked}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      disableRipple\n      {...others}\n    />\n  );\n});\n"],"names":["CheckboxIcon","CheckboxPartialIcon","CheckboxCheckIcon"],"mappings":";;;;;;;AA6FA,MAAM,mBAAmB,CACvB,SAIA,YACG;AACG,QAAA,EAAE,UAAU,SAAa,IAAA;AACzB,QAAA,QACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,cAAc,WAAW,KACvC;AACI,QAAA,eACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,aAAa,YAAY,KACvC;AAGK,SAAA;AAAA,IACL,UAAW,oBAAAA,UAAA,EAAa,OAAc,WAAW,QAAQ,MAAM;AAAA,IAC/D,iBACG,oBAAAC,iBAAA,EAAoB,OAAc,WAAW,QAAQ,MAAM;AAAA,IAE9D,iBACG,oBAAAC,eAAA,EAAkB,OAAO,cAAc,WAAW,QAAQ,MAAM;AAAA,EAAA;AAGvE;AAQO,MAAM,iBAAiB,WAG5B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,QAAQ,iBAAiB,EAAE,UAAU,SAAA,GAAY,OAAO;AAE9D,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAA+C;AAC9C,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,iBAAW,OAAO,MAAM,OAAO,SAAS,KAAK;AAAA,IAC/C;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAAA;AAG5B,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAA+C;AAC9C,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,QAAM,yBAAyB;AAAA,IAC7B,CAAC,UAAiC;AAChC,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EAAA;AAIf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,YAAY,GAAG,aAAa;AAAA,QACrE;AAAA,MACF;AAAA,MACA,MAAM,MAAM;AAAA,MACZ,mBAAmB,MAAM;AAAA,MACzB,aAAa,MAAM;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,OAAM;AAAA,MACN,eAAa;AAAA,MACZ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/esm/BaseCheckBox/BaseCheckBox.styles.js

@@ -0,0 +1,35 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
+  root: {
+    padding: 0,
+    borderRadius: theme.radii.base,
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: theme.colors.containerBackgroundHover
+    }
+  },
+  disabled: {
+    "&$root": {
+      cursor: "not-allowed",
+      pointerEvents: "initial"
+    },
+    "& svg": {
+      "& path:nth-of-type(2)": {
+        fill: theme.colors.secondary_60
+      }
+    }
+  },
+  focusVisible: {
+    "& svg": {
+      ...outlineStyles
+    }
+  },
+  icon: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=BaseCheckBox.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCheckBox.styles.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    borderRadius: theme.radii.base,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  disabled: {\n    \"&$root\": {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n    },\n\n    \"& svg\": {\n      \"& path:nth-of-type(2)\": {\n        fill: theme.colors.secondary_60,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,IACjB;AAAA,IAEA,SAAS;AAAA,MACP,yBAAyB;AAAA,QACvB,MAAM,MAAM,OAAO;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AACT,CAAC;"}

package/dist/esm/BaseDropdown/BaseDropdown.js

@@ -0,0 +1,350 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import React__default, { forwardRef, useState, useCallback, useMemo } from "react";
+import { createPortal } from "react-dom";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
+import { usePopper } from "react-popper";
+import { detectOverflow } from "@popperjs/core";
+import { useUniqueId } from "../hooks/useUniqueId.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { useForkRef } from "../hooks/useForkRef.js";
+import { useControlled } from "../hooks/useControlled.js";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { isKey, isOneOfKeys } from "../utils/keyboardUtils.js";
+import { setId } from "../utils/setId.js";
+import { getFirstAndLastFocus } from "../utils/focusableElementFinder.js";
+import { useClasses } from "./BaseDropdown.styles.js";
+import { staticClasses } from "./BaseDropdown.styles.js";
+import BaseDropdownContext from "./BaseDropdownContext/BaseDropdownContext.js";
+import { HvTypography } from "../Typography/Typography.js";
+const HvBaseDropdown = forwardRef(
+  (props, ref) => {
+    const {
+      id: idProp,
+      className,
+      classes: classesProp,
+      children,
+      role,
+      placeholder,
+      component,
+      adornment,
+      expanded,
+      dropdownHeaderProps,
+      defaultExpanded,
+      disabled,
+      readOnly,
+      required,
+      disablePortal,
+      variableWidth,
+      placement: placementProp = "right",
+      "aria-expanded": ariaExpandedProp,
+      "aria-label": ariaLabelProp,
+      "aria-labelledby": ariaLabelledByProp,
+      popperProps = {},
+      dropdownHeaderRef: dropdownHeaderRefProp,
+      onToggle,
+      onClickOutside,
+      onContainerCreation,
+      ...others
+    } = useDefaultProps("HvBaseDropdown", props);
+    const { classes, cx } = useClasses(classesProp);
+    const { rootId } = useTheme();
+    const [isOpen, setIsOpen] = useControlled(
+      expanded,
+      Boolean(defaultExpanded)
+    );
+    const [referenceElement, setReferenceElement] = useState(null);
+    const [popperElement, setPopperElement] = useState(
+      null
+    );
+    const [popperMaxSize, setPopperMaxSize] = useState({});
+    const handleDropdownHeaderRefProp = useForkRef(
+      dropdownHeaderRefProp,
+      dropdownHeaderProps?.ref
+    );
+    const handleDropdownHeaderRef = useForkRef(
+      setReferenceElement,
+      handleDropdownHeaderRefProp
+    );
+    const ariaRole = role || (component == null ? "combobox" : void 0);
+    const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
+    const id = useUniqueId(idProp, "hvbasedropdown");
+    const containerId = setId(id, "children-container");
+    const headerControlArias = {
+      "aria-required": required ?? void 0,
+      "aria-readonly": readOnly ?? void 0,
+      "aria-disabled": disabled ?? void 0,
+      "aria-expanded": ariaExpanded,
+      "aria-owns": isOpen ? containerId : void 0,
+      "aria-controls": isOpen ? containerId : void 0
+    };
+    const headerAriaLabels = {
+      "aria-label": ariaLabelProp,
+      "aria-labelledby": ariaLabelledByProp
+    };
+    const placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
+    const extensionWidth = referenceElement ? referenceElement?.offsetWidth : "inherit";
+    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } = popperProps;
+    const onFirstUpdate = useCallback(() => {
+      onContainerCreation?.(popperElement);
+    }, [onContainerCreation, popperElement]);
+    const widthCalculator = useCallback(
+      ({ state }) => {
+        state.styles.popper.width = `${state.rects.reference.width}px`;
+      },
+      []
+    );
+    const widthCalculatorEffect = useCallback(
+      ({ state }) => {
+        state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+      },
+      []
+    );
+    const applyMaxSizeCalculator = useCallback(
+      ({ state }) => {
+        const { width, height } = state.modifiersData.maxSize;
+        if (width !== popperMaxSize?.width || height !== popperMaxSize?.height) {
+          setPopperMaxSize({ width, height });
+        }
+        state.styles.popper = {
+          ...state.styles.popper,
+          maxWidth: `${width}px`,
+          maxHeight: `${height}px`
+        };
+      },
+      [popperMaxSize]
+    );
+    const maxSizeCalculator = useCallback(
+      ({ state, name, options }) => {
+        const overflow = detectOverflow(state, options);
+        const x = state.modifiersData.preventOverflow?.x || 0;
+        const y = state.modifiersData.preventOverflow?.y || 0;
+        const popperWidth = state.rects.popper.width;
+        const popperHeight = state.rects.popper.height;
+        const basePlacement = state.placement.split("-")[0];
+        const widthProp = basePlacement === "left" ? "left" : "right";
+        const heightProp = basePlacement === "top" ? "top" : "bottom";
+        state.modifiersData[name] = {
+          width: popperWidth - overflow[widthProp] - x,
+          height: popperHeight - overflow[heightProp] - y
+        };
+      },
+      []
+    );
+    const modifiers = useMemo(
+      () => [
+        {
+          name: "variableWidth",
+          enabled: !variableWidth,
+          phase: "beforeWrite",
+          requires: ["computeStyles"],
+          fn: widthCalculator,
+          effect: widthCalculatorEffect
+        },
+        {
+          name: "maxSize",
+          enabled: true,
+          phase: "main",
+          requiresIfExists: ["offset", "preventOverflow", "flip"],
+          fn: maxSizeCalculator
+        },
+        {
+          name: "applyMaxSize",
+          enabled: true,
+          phase: "beforeWrite",
+          requires: ["maxSize"],
+          fn: applyMaxSizeCalculator
+        },
+        ...popperPropsModifiers
+      ],
+      [
+        maxSizeCalculator,
+        applyMaxSizeCalculator,
+        popperPropsModifiers,
+        variableWidth,
+        widthCalculator,
+        widthCalculatorEffect
+      ]
+    );
+    const { styles: popperStyles, attributes } = usePopper(
+      referenceElement,
+      popperElement,
+      {
+        placement,
+        modifiers,
+        onFirstUpdate,
+        ...otherPopperProps
+      }
+    );
+    const popperPlacement = attributes.popper?.["data-popper-placement"] ?? "bottom";
+    const handleToggle = useCallback(
+      (event) => {
+        if (event && !isKey(event, "Tab")) {
+          event.preventDefault();
+        }
+        const notControlKey = !!event?.code && !isOneOfKeys(event, ["Tab", "Enter", "Esc", "ArrowDown", "Space"]);
+        const ignoredCombinations = isKey(event, "Esc") && !isOpen || isKey(event, "ArrowDown") && isOpen || isKey(event, "Tab") && !isOpen;
+        if (disabled || notControlKey || ignoredCombinations)
+          return;
+        const newOpen = !isOpen;
+        setIsOpen(() => {
+          if (!newOpen) {
+            referenceElement?.focus({ preventScroll: true });
+          }
+          return newOpen;
+        });
+        onToggle?.(event, newOpen);
+      },
+      [isOpen, disabled, setIsOpen, onToggle, referenceElement]
+    );
+    const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;
+    const defaultHeaderElement = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: setId(id, "header"),
+        className: cx(classes.header, {
+          [classes.headerDisabled]: disabled,
+          [classes.headerReadOnly]: readOnly,
+          [classes.headerOpen]: isOpen,
+          [classes.headerOpenUp]: isOpen && popperPlacement.includes("top"),
+          [classes.headerOpenDown]: isOpen && popperPlacement.includes("bottom")
+        }),
+        role: ariaRole === "combobox" ? "textbox" : void 0,
+        ...headerAriaLabels,
+        style: disabled || readOnly ? { pointerEvents: "none" } : void 0,
+        tabIndex: disabled ? -1 : 0,
+        ref: handleDropdownHeaderRef,
+        ...dropdownHeaderProps,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: classes.selection, children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsx(
+            HvTypography,
+            {
+              className: cx(classes.placeholder, {
+                [classes.selectionDisabled]: disabled
+              }),
+              variant: "body",
+              children: placeholder
+            }
+          ) : placeholder }),
+          /* @__PURE__ */ jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsx(
+            ExpanderComponent,
+            {
+              iconSize: "XS",
+              color: disabled ? "secondary_60" : void 0,
+              className: classes.arrow
+            }
+          ) })
+        ]
+      }
+    );
+    const headerElement = component && React__default.isValidElement(component) ? React__default.cloneElement(component, {
+      ref: handleDropdownHeaderRef,
+      ...headerControlArias
+    }) : defaultHeaderElement;
+    const containerComponent = (() => {
+      const handleContainerKeyDown = (event) => {
+        if (isKey(event, "Esc")) {
+          handleToggle(event);
+        }
+        if (isKey(event, "Tab") && !event.shiftKey) {
+          const focusList = getFirstAndLastFocus(popperElement);
+          if (document.activeElement === focusList?.last) {
+            event.preventDefault();
+            focusList?.first?.focus();
+          }
+        }
+      };
+      const handleOutside = (event) => {
+        const isButtonClick = referenceElement?.contains(event.target);
+        if (!isButtonClick) {
+          onClickOutside?.(event);
+          setIsOpen(false);
+          onToggle?.(event, false);
+        }
+      };
+      const container = /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: setPopperElement,
+          className: classes.container,
+          style: popperStyles.popper,
+          ...attributes.popper,
+          children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleOutside, children: /* @__PURE__ */ jsxs("div", { onKeyDown: handleContainerKeyDown, children: [
+            popperPlacement.includes("bottom") && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: { width: extensionWidth },
+                className: cx(classes.inputExtensionOpen, {
+                  [classes.inputExtensionLeftPosition]: popperPlacement.includes("end")
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx(BaseDropdownContext.Provider, { value: popperMaxSize, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: containerId,
+                className: cx(classes.panel, {
+                  [classes.panelOpenedUp]: popperPlacement.includes("top"),
+                  [classes.panelOpenedDown]: popperPlacement.includes("bottom")
+                }),
+                children
+              }
+            ) }),
+            popperPlacement.includes("top") && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: { width: extensionWidth },
+                className: cx(
+                  classes.inputExtensionOpen,
+                  classes.inputExtensionOpenShadow,
+                  {
+                    [classes.inputExtensionFloatRight]: popperPlacement.includes("end"),
+                    [classes.inputExtensionFloatLeft]: popperPlacement.includes("start")
+                  }
+                )
+              }
+            )
+          ] }) })
+        }
+      );
+      if (disablePortal)
+        return container;
+      return createPortal(
+        container,
+        document.getElementById(rootId || "") || document.body
+      );
+    })();
+    return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          id,
+          className: cx(
+            classes.anchor,
+            { [classes.rootDisabled]: disabled },
+            className
+          ),
+          ...!readOnly && {
+            onKeyDown: handleToggle,
+            onClick: handleToggle
+          },
+          ...ariaRole && {
+            role: ariaRole,
+            ...headerAriaLabels,
+            ...headerControlArias
+          },
+          tabIndex: -1,
+          ...others,
+          children: headerElement
+        }
+      ),
+      isOpen && containerComponent
+    ] });
+  }
+);
+export {
+  HvBaseDropdown,
+  staticClasses as baseDropdownClasses
+};
+//# sourceMappingURL=BaseDropdown.js.map