@hitachivantara/uikit-react-core 5.80.1 → 5.80.2

package/dist/esm/SelectionList/SelectionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionList.js","sources":["../../../src/SelectionList/SelectionList.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFormElement, HvFormStatus } from \"../Forms/FormElement\";\nimport { HvInfoMessage } from \"../Forms/InfoMessage\";\nimport { HvLabel } from \"../Forms/Label\";\nimport { HvWarningText } from \"../Forms/WarningText\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { multiSelectionEventHandler } from \"../utils/multiSelectionEventHandler\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./SelectionList.styles\";\n\nexport { staticClasses as selectionListClasses };\n\nexport type HvSelectionListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectionListProps\n  extends HvBaseProps<HTMLUListElement, \"onChange\"> {\n  /** The form element name. */\n  name?: string;\n  /**\n   * The value of the form element. It must be represented in the child list items.\n   *\n   * Can either be a single value (when multiple = false) or an\n   * array of values (when multiple = true).\n   *\n   * When defined the selection list state becomes controlled.\n   */\n  value?: any | any[];\n  /** When uncontrolled, defines the initial value. */\n  defaultValue?: any | 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  /** Indicates that the form element is disabled. If `true` the state is propagated to the children list items. */\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  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: string;\n  /** Indicates that the user may select more than one item from the current selectable list items. */\n  multiple?: boolean;\n  /** If `true`, selection can be toggled when single selection. */\n  singleSelectionToggle?: boolean;\n  /** Indicates whether the list orientation is horizontal or vertical. Defaults to vertical. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.MouseEvent, value: any) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSelectionListClasses;\n}\n\nconst getValueFromSelectedChildren = (\n  children: React.ReactNode,\n  multiple: boolean,\n) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.selected !== undefined;\n      const childIsSelected =\n        child && childIsControlled\n          ? child.props?.selected\n          : child.props?.defaultSelected;\n\n      return childIsSelected ? child?.props.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return multiple ? selectedValues : selectedValues?.[0];\n};\n\n/**\n * Allows the user to select one or more items from a list of choices.\n *\n * Although it supports multi-selection, DS recommends the use of a selection list\n * when it’s clear that the user can only select just one option from the range provided.\n */\nexport const HvSelectionList = forwardRef<\n  HTMLUListElement,\n  HvSelectionListProps\n>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    children,\n    name,\n    value: valueProp,\n    defaultValue,\n    required = false,\n    readOnly = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    orientation = \"vertical\",\n    multiple = false,\n    singleSelectionToggle = false,\n    ...others\n  } = useDefaultProps(\"HvSelectionList\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const [value, setValue] = useControlled(\n    valueProp,\n    defaultValue !== undefined\n      ? defaultValue\n      : // when uncontrolled and no default value is given,\n        // extract the initial selected values from the children own state\n        () => getValueFromSelectedChildren(children, multiple),\n  );\n\n  const [validationState, setValidationState] = useControlled<HvFormStatus>(\n    status,\n    \"standBy\",\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [allValues, selectedState] = useMemo(() => {\n    const childValues: any[] = [];\n    const childSelectedState: boolean[] = [];\n\n    Children.toArray(children).forEach((child: any, i: number) => {\n      const childValue = child?.props?.value;\n      const childIsSelected = multiple\n        ? value.indexOf(childValue) !== -1\n        : value === childValue;\n\n      childValues[i] = childValue;\n      childSelectedState[i] = childIsSelected;\n    });\n\n    return [childValues, childSelectedState];\n  }, [children, multiple, value]);\n\n  const selectionAnchor = useRef(undefined);\n\n  const listRef = useRef<any>(null);\n  const listForkedRef = useForkRef(ref, listRef);\n\n  useEffect(() => {\n    const handleMeta = (event: KeyboardEvent) => {\n      const tempArray: any[] = [];\n      if (\n        (isKey(event, \"ArrowUp\") &&\n          event.shiftKey &&\n          listRef.current.contains(event.target)) ||\n        (isKey(event, \"ArrowDown\") &&\n          event.shiftKey &&\n          listRef.current.contains(event.target))\n      ) {\n        selectedState.forEach((isSelected, i) => {\n          if (i === (event.target as any).value - 1) {\n            if (!isSelected) {\n              tempArray.push(allValues[i]);\n            }\n          } else if (isSelected) {\n            tempArray.push(allValues[i]);\n          }\n        });\n        setValue(tempArray);\n      }\n    };\n    window.addEventListener(\"keyup\", handleMeta);\n\n    return () => {\n      window.removeEventListener(\"keyup\", handleMeta);\n    };\n  }, [allValues, selectedState, setValue]);\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnClick: (e: React.MouseEvent) => void,\n      evt: React.MouseEvent,\n    ) => {\n      childOnClick?.(evt);\n\n      if (!readOnly && !disabled) {\n        let newValue: any;\n        if (multiple) {\n          newValue = multiSelectionEventHandler(\n            evt,\n            index,\n            selectionAnchor,\n            allValues,\n            selectedState,\n            undefined,\n          );\n        } else {\n          newValue =\n            singleSelectionToggle && selectedState[index]\n              ? null\n              : allValues[index];\n        }\n\n        onChange?.(evt, newValue);\n\n        setValue(() => {\n          // This will only run if uncontrolled\n\n          if (required && newValue.length === 0) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newValue;\n        });\n      }\n    },\n    [\n      allValues,\n      disabled,\n      multiple,\n      onChange,\n      readOnly,\n      required,\n      selectedState,\n      setValidationState,\n      setValue,\n      singleSelectionToggle,\n      selectionAnchor,\n    ],\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any, i: number) => {\n      const childIsSelected = selectedState[i];\n\n      return cloneElement(child, {\n        role: \"option\",\n        selected: childIsSelected,\n        onClick: (evt) =>\n          onChildChangeInterceptor(i, child?.props?.onClick, evt),\n        disabled: disabled || child?.props?.disabled,\n      });\n    });\n  }, [children, disabled, onChildChangeInterceptor, selectedState]);\n\n  // The error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const errorMessageId = canShowError\n    ? setId(elementId, \"error\")\n    : ariaErrorMessage;\n\n  const listId = (label && setId(elementId, \"listbox\")) || \"\";\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(classes.root, className)}\n    >\n      {label && (\n        <HvLabel\n          id={setId(elementId, \"label\")}\n          label={label}\n          className={classes.label}\n        />\n      )}\n      {description && (\n        <HvInfoMessage\n          id={setId(elementId, \"description\")}\n          className={classes.description}\n        >\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <HvListContainer\n        id={listId}\n        interactive\n        condensed\n        role=\"listbox\"\n        aria-multiselectable={multiple || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={validationState === \"invalid\" ? true : undefined}\n        aria-errormessage={\n          validationState === \"invalid\" ? errorMessageId : undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        className={cx(classes.listbox, {\n          [classes.vertical]: orientation === \"vertical\",\n          [classes.horizontal]: orientation === \"horizontal\",\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        ref={listForkedRef}\n        {...others}\n      >\n        {modifiedChildren}\n      </HvListContainer>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectionList.js","sources":["../../../src/SelectionList/SelectionList.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFormElement, HvFormStatus } from \"../Forms/FormElement\";\nimport { HvInfoMessage } from \"../Forms/InfoMessage\";\nimport { HvLabel } from \"../Forms/Label\";\nimport { HvWarningText } from \"../Forms/WarningText\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { multiSelectionEventHandler } from \"../utils/multiSelectionEventHandler\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./SelectionList.styles\";\n\nexport { staticClasses as selectionListClasses };\n\nexport type HvSelectionListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectionListProps\n  extends HvBaseProps<HTMLUListElement, \"onChange\"> {\n  /** The form element name. */\n  name?: string;\n  /**\n   * The value of the form element. It must be represented in the child list items.\n   *\n   * Can either be a single value (when multiple = false) or an\n   * array of values (when multiple = true).\n   *\n   * When defined the selection list state becomes controlled.\n   */\n  value?: any | any[];\n  /** When uncontrolled, defines the initial value. */\n  defaultValue?: any | 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  /** Indicates that the form element is disabled. If `true` the state is propagated to the children list items. */\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  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: string;\n  /** Indicates that the user may select more than one item from the current selectable list items. */\n  multiple?: boolean;\n  /** If `true`, selection can be toggled when single selection. */\n  singleSelectionToggle?: boolean;\n  /** Indicates whether the list orientation is horizontal or vertical. Defaults to vertical. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.MouseEvent, value: any) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSelectionListClasses;\n}\n\nconst getValueFromSelectedChildren = (\n  children: React.ReactNode,\n  multiple: boolean,\n) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.selected !== undefined;\n      const childIsSelected =\n        child && childIsControlled\n          ? child.props?.selected\n          : child.props?.defaultSelected;\n\n      return childIsSelected ? child?.props.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return multiple ? selectedValues : selectedValues?.[0];\n};\n\n/**\n * Allows the user to select one or more items from a list of choices.\n *\n * Although it supports multi-selection, DS recommends the use of a selection list\n * when it’s clear that the user can only select just one option from the range provided.\n */\nexport const HvSelectionList = forwardRef<\n  HTMLUListElement,\n  HvSelectionListProps\n>(function HvSelectionList(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    children,\n    name,\n    value: valueProp,\n    defaultValue,\n    required = false,\n    readOnly = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    orientation = \"vertical\",\n    multiple = false,\n    singleSelectionToggle = false,\n    ...others\n  } = useDefaultProps(\"HvSelectionList\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const [value, setValue] = useControlled(\n    valueProp,\n    defaultValue !== undefined\n      ? defaultValue\n      : // when uncontrolled and no default value is given,\n        // extract the initial selected values from the children own state\n        () => getValueFromSelectedChildren(children, multiple),\n  );\n\n  const [validationState, setValidationState] = useControlled<HvFormStatus>(\n    status,\n    \"standBy\",\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [allValues, selectedState] = useMemo(() => {\n    const childValues: any[] = [];\n    const childSelectedState: boolean[] = [];\n\n    Children.toArray(children).forEach((child: any, i: number) => {\n      const childValue = child?.props?.value;\n      const childIsSelected = multiple\n        ? value.indexOf(childValue) !== -1\n        : value === childValue;\n\n      childValues[i] = childValue;\n      childSelectedState[i] = childIsSelected;\n    });\n\n    return [childValues, childSelectedState];\n  }, [children, multiple, value]);\n\n  const selectionAnchor = useRef(undefined);\n\n  const listRef = useRef<any>(null);\n  const listForkedRef = useForkRef(ref, listRef);\n\n  useEffect(() => {\n    const handleMeta = (event: KeyboardEvent) => {\n      const tempArray: any[] = [];\n      if (\n        (isKey(event, \"ArrowUp\") &&\n          event.shiftKey &&\n          listRef.current.contains(event.target)) ||\n        (isKey(event, \"ArrowDown\") &&\n          event.shiftKey &&\n          listRef.current.contains(event.target))\n      ) {\n        selectedState.forEach((isSelected, i) => {\n          if (i === (event.target as any).value - 1) {\n            if (!isSelected) {\n              tempArray.push(allValues[i]);\n            }\n          } else if (isSelected) {\n            tempArray.push(allValues[i]);\n          }\n        });\n        setValue(tempArray);\n      }\n    };\n    window.addEventListener(\"keyup\", handleMeta);\n\n    return () => {\n      window.removeEventListener(\"keyup\", handleMeta);\n    };\n  }, [allValues, selectedState, setValue]);\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnClick: (e: React.MouseEvent) => void,\n      evt: React.MouseEvent,\n    ) => {\n      childOnClick?.(evt);\n\n      if (!readOnly && !disabled) {\n        let newValue: any;\n        if (multiple) {\n          newValue = multiSelectionEventHandler(\n            evt,\n            index,\n            selectionAnchor,\n            allValues,\n            selectedState,\n            undefined,\n          );\n        } else {\n          newValue =\n            singleSelectionToggle && selectedState[index]\n              ? null\n              : allValues[index];\n        }\n\n        onChange?.(evt, newValue);\n\n        setValue(() => {\n          // This will only run if uncontrolled\n\n          if (required && newValue.length === 0) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newValue;\n        });\n      }\n    },\n    [\n      allValues,\n      disabled,\n      multiple,\n      onChange,\n      readOnly,\n      required,\n      selectedState,\n      setValidationState,\n      setValue,\n      singleSelectionToggle,\n      selectionAnchor,\n    ],\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any, i: number) => {\n      const childIsSelected = selectedState[i];\n\n      return cloneElement(child, {\n        role: \"option\",\n        selected: childIsSelected,\n        onClick: (evt) =>\n          onChildChangeInterceptor(i, child?.props?.onClick, evt),\n        disabled: disabled || child?.props?.disabled,\n      });\n    });\n  }, [children, disabled, onChildChangeInterceptor, selectedState]);\n\n  // The error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const errorMessageId = canShowError\n    ? setId(elementId, \"error\")\n    : ariaErrorMessage;\n\n  const listId = (label && setId(elementId, \"listbox\")) || \"\";\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(classes.root, className)}\n    >\n      {label && (\n        <HvLabel\n          id={setId(elementId, \"label\")}\n          label={label}\n          className={classes.label}\n        />\n      )}\n      {description && (\n        <HvInfoMessage\n          id={setId(elementId, \"description\")}\n          className={classes.description}\n        >\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <HvListContainer\n        id={listId}\n        interactive\n        condensed\n        role=\"listbox\"\n        aria-multiselectable={multiple || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={validationState === \"invalid\" ? true : undefined}\n        aria-errormessage={\n          validationState === \"invalid\" ? errorMessageId : undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        className={cx(classes.listbox, {\n          [classes.vertical]: orientation === \"vertical\",\n          [classes.horizontal]: orientation === \"horizontal\",\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        ref={listForkedRef}\n        {...others}\n      >\n        {modifiedChildren}\n      </HvListContainer>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvSelectionList"],"mappings":"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"}

package/dist/esm/Snackbar/Snackbar.js

@@ -1,35 +1,37 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { forwardRef, useCallback } from "react";
 import Slide from "@mui/material/Slide";
 import Snackbar from "@mui/material/Snackbar";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { capitalize } from "../utils/helpers.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./Snackbar.styles.js";
 import { staticClasses } from "./Snackbar.styles.js";
 import { HvSnackbarContent } from "./SnackbarContent/SnackbarContent.js";
-const HvSnackbar = ({
-  classes: classesProp,
-  className,
-  id,
-  open = false,
-  onClose,
-  label = "",
-  anchorOrigin = { vertical: "top", horizontal: "right" },
-  autoHideDuration = 5e3,
-  variant = "default",
-  showIcon = false,
-  customIcon = null,
-  action = null,
-  actionCallback,
-  // TODO - remove in v6
-  onAction,
-  transitionDuration = 300,
-  transitionDirection = "left",
-  container,
-  offset = 60,
-  snackbarContentProps,
-  ...others
-}) => {
+const HvSnackbar = forwardRef(function HvSnackbar2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    id,
+    open = false,
+    onClose,
+    label = "",
+    anchorOrigin = { vertical: "top", horizontal: "right" },
+    autoHideDuration = 5e3,
+    variant = "default",
+    showIcon = false,
+    customIcon = null,
+    action = null,
+    actionCallback,
+    // TODO - remove in v6
+    onAction,
+    transitionDuration = 300,
+    transitionDirection = "left",
+    container,
+    offset = 60,
+    snackbarContentProps,
+    ...others
+  } = useDefaultProps("HvSnackbar", props);
   const { classes } = useClasses(classesProp);
   const anchorOriginOffset = {
     anchorOriginTop: {
@@ -53,6 +55,7 @@ const HvSnackbar = ({
   return /* @__PURE__ */ jsx(
     Snackbar,
     {
+      ref,
       style: anchorOriginOffset[`anchorOrigin${capitalize(anchorOrigin.vertical)}`],
       classes,
       className,
@@ -80,7 +83,7 @@ const HvSnackbar = ({
       )
     }
   );
-};
+});
 export {
   HvSnackbar,
   staticClasses as snackbarClasses

package/dist/esm/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","sources":["../../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport Slide, { SlideProps } from \"@mui/material/Slide\";\nimport MuiSnackbar, {\n  SnackbarProps as MuiSnackbarProps,\n  SnackbarCloseReason,\n  SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { capitalize } from \"../utils/helpers\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Snackbar.styles\";\nimport { HvSnackbarContent, HvSnackbarContentProps } from \"./SnackbarContent\";\nimport { HvSnackbarVariant } from \"./types\";\n\nexport { staticClasses as snackbarClasses };\n\nexport type HvSnackbarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProps\n  extends Omit<MuiSnackbarProps, \"action\" | \"classes\" | \"children\"> {\n  /** If true, Snackbar is open. */\n  open?: boolean;\n  /**\n   * Callback fired when the component requests to be closed.\n   * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.\n   * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.\n   * */\n  onClose?: (\n    event: Event | React.SyntheticEvent<any, Event>,\n    reason: SnackbarCloseReason,\n  ) => void;\n  /** The message to display. */\n  label?: React.ReactNode;\n  /**\n   * The anchor of the Snackbar. vertical: \"top\", \"bottom\" | horizontal: \"left\", \"center\", \"right\".\n   * It defines where the snackbar will end his animation */\n  anchorOrigin?: SnackbarOrigin;\n  /** The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar */\n  autoHideDuration?: number;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Action to display. */\n  action?: React.ReactNode | HvActionGeneric;\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** Duration of transition in milliseconds. */\n  transitionDuration?: number;\n  /** Direction of slide transition. */\n  transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n  /** The container the snackbar should slide from. */\n  container?: SlideProps[\"container\"];\n  /** Custom offset from top/bottom of the page, in px. */\n  offset?: number;\n  /** Others applied to the content of the snackbar. */\n  snackbarContentProps?: HvSnackbarContentProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarClasses;\n  /** @ignore */\n  ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/**\n * A Snackbar provides brief messages about app processes.\n * It is dismissed automatically after a given interval.\n *\n * Snackbar can be built with two different components.\n * One is the HvSnackbar, which wraps all the positioning, transition, auto hide, etc.\n * The other is the HvSnackbarContent, which allows a finer control and customization of the content of the Snackbar.\n */\nexport const HvSnackbar = ({\n  classes: classesProp,\n  className,\n  id,\n  open = false,\n  onClose,\n  label = \"\",\n  anchorOrigin = { vertical: \"top\", horizontal: \"right\" },\n  autoHideDuration = 5000,\n  variant = \"default\",\n  showIcon = false,\n  customIcon = null,\n  action = null,\n  actionCallback, // TODO - remove in v6\n  onAction,\n  transitionDuration = 300,\n  transitionDirection = \"left\",\n  container,\n  offset = 60,\n  snackbarContentProps,\n  ...others\n}: HvSnackbarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const anchorOriginOffset = {\n    anchorOriginTop: {\n      top: `${offset}px`,\n    },\n    anchorOriginBottom: {\n      bottom: `${offset}px`,\n    },\n  };\n\n  const SlideTransition = useCallback<\n    NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n  >(\n    (properties) => (\n      <Slide\n        {...properties}\n        container={container}\n        direction={transitionDirection}\n      />\n    ),\n    [container, transitionDirection],\n  );\n\n  return (\n    <MuiSnackbar\n      style={\n        anchorOriginOffset[\n          `anchorOrigin${capitalize(anchorOrigin.vertical)}` as keyof typeof anchorOriginOffset\n        ]\n      }\n      classes={classes}\n      className={className}\n      id={id}\n      anchorOrigin={anchorOrigin}\n      open={open}\n      onClose={onClose}\n      autoHideDuration={autoHideDuration}\n      transitionDuration={transitionDuration}\n      TransitionComponent={SlideTransition}\n      {...others}\n    >\n      <HvSnackbarContent\n        id={setId(id, \"content\")}\n        label={label}\n        variant={variant}\n        customIcon={customIcon}\n        showIcon={showIcon}\n        action={action}\n        actionCallback={actionCallback}\n        onAction={onAction}\n        {...snackbarContentProps}\n      />\n    </MuiSnackbar>\n  );\n};\n"],"names":["MuiSnackbar"],"mappings":";;;;;;;;;AAiFO,MAAM,aAAa,CAAC;AAAA,EACzB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR,eAAe,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA,EACtD,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,aAAa;AAAA,EACb,SAAS;AAAA,EACT;AAAA;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,qBAAqB;AAAA,IACzB,iBAAiB;AAAA,MACf,KAAK,GAAG,MAAM;AAAA,IAChB;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ,GAAG,MAAM;AAAA,IACnB;AAAA,EAAA;AAGF,QAAM,kBAAkB;AAAA,IAGtB,CAAC,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,CAAC,WAAW,mBAAmB;AAAA,EAAA;AAI/B,SAAA;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,OACE,mBACE,eAAe,WAAW,aAAa,QAAQ,CAAC,EAClD;AAAA,MAEF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACpB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,SAAS;AAAA,UACvB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Snackbar.js","sources":["../../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport Slide, { SlideProps } from \"@mui/material/Slide\";\nimport MuiSnackbar, {\n  SnackbarProps as MuiSnackbarProps,\n  SnackbarCloseReason,\n  SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { capitalize } from \"../utils/helpers\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Snackbar.styles\";\nimport { HvSnackbarContent, HvSnackbarContentProps } from \"./SnackbarContent\";\nimport { HvSnackbarVariant } from \"./types\";\n\nexport { staticClasses as snackbarClasses };\n\nexport type HvSnackbarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProps\n  extends Omit<MuiSnackbarProps, \"action\" | \"classes\" | \"children\"> {\n  /** If true, Snackbar is open. */\n  open?: boolean;\n  /**\n   * Callback fired when the component requests to be closed.\n   * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.\n   * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.\n   * */\n  onClose?: (\n    event: Event | React.SyntheticEvent<any, Event>,\n    reason: SnackbarCloseReason,\n  ) => void;\n  /** The message to display. */\n  label?: React.ReactNode;\n  /**\n   * The anchor of the Snackbar. vertical: \"top\", \"bottom\" | horizontal: \"left\", \"center\", \"right\".\n   * It defines where the snackbar will end his animation */\n  anchorOrigin?: SnackbarOrigin;\n  /** The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar */\n  autoHideDuration?: number;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Action to display. */\n  action?: React.ReactNode | HvActionGeneric;\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** Duration of transition in milliseconds. */\n  transitionDuration?: number;\n  /** Direction of slide transition. */\n  transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n  /** The container the snackbar should slide from. */\n  container?: SlideProps[\"container\"];\n  /** Custom offset from top/bottom of the page, in px. */\n  offset?: number;\n  /** Others applied to the content of the snackbar. */\n  snackbarContentProps?: HvSnackbarContentProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarClasses;\n  /** @ignore */\n  ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/**\n * A Snackbar provides brief messages about app processes.\n * It is dismissed automatically after a given interval.\n *\n * Snackbar can be built with two different components.\n * One is the HvSnackbar, which wraps all the positioning, transition, auto hide, etc.\n * The other is the HvSnackbarContent, which allows a finer control and customization of the content of the Snackbar.\n */\nexport const HvSnackbar = forwardRef<\n  React.ComponentRef<typeof MuiSnackbar>,\n  HvSnackbarProps\n>(function HvSnackbar(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    open = false,\n    onClose,\n    label = \"\",\n    anchorOrigin = { vertical: \"top\", horizontal: \"right\" },\n    autoHideDuration = 5000,\n    variant = \"default\",\n    showIcon = false,\n    customIcon = null,\n    action = null,\n    actionCallback, // TODO - remove in v6\n    onAction,\n    transitionDuration = 300,\n    transitionDirection = \"left\",\n    container,\n    offset = 60,\n    snackbarContentProps,\n    ...others\n  } = useDefaultProps(\"HvSnackbar\", props);\n  const { classes } = useClasses(classesProp);\n\n  const anchorOriginOffset = {\n    anchorOriginTop: {\n      top: `${offset}px`,\n    },\n    anchorOriginBottom: {\n      bottom: `${offset}px`,\n    },\n  };\n\n  const SlideTransition = useCallback<\n    NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n  >(\n    (properties) => (\n      <Slide\n        {...properties}\n        container={container}\n        direction={transitionDirection}\n      />\n    ),\n    [container, transitionDirection],\n  );\n\n  return (\n    <MuiSnackbar\n      ref={ref}\n      style={\n        anchorOriginOffset[`anchorOrigin${capitalize(anchorOrigin.vertical)}`]\n      }\n      classes={classes}\n      className={className}\n      id={id}\n      anchorOrigin={anchorOrigin}\n      open={open}\n      onClose={onClose}\n      autoHideDuration={autoHideDuration}\n      transitionDuration={transitionDuration}\n      TransitionComponent={SlideTransition}\n      {...others}\n    >\n      <HvSnackbarContent\n        id={setId(id, \"content\")}\n        label={label}\n        variant={variant}\n        customIcon={customIcon}\n        showIcon={showIcon}\n        action={action}\n        actionCallback={actionCallback}\n        onAction={onAction}\n        {...snackbarContentProps}\n      />\n    </MuiSnackbar>\n  );\n});\n"],"names":["HvSnackbar","MuiSnackbar"],"mappings":";;;;;;;;;;AAoFO,MAAM,aAAa,WAGxB,SAASA,YAAW,OAAO,KAAK;AAC1B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR,eAAe,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA,IACtD,mBAAmB;AAAA,IACnB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,qBAAqB;AAAA,IACzB,iBAAiB;AAAA,MACf,KAAK,GAAG,MAAM;AAAA,IAChB;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ,GAAG,MAAM;AAAA,IACnB;AAAA,EAAA;AAGF,QAAM,kBAAkB;AAAA,IAGtB,CAAC,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,CAAC,WAAW,mBAAmB;AAAA,EAAA;AAI/B,SAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,OACE,mBAAmB,eAAe,WAAW,aAAa,QAAQ,CAAC,EAAE;AAAA,MAEvE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACpB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,SAAS;AAAA,UACvB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/esm/Switch/Switch.js

@@ -14,7 +14,7 @@ import { HvLabel } from "../Forms/Label/Label.js";
 import { HvWarningText } from "../Forms/WarningText/WarningText.js";
 const isSemantical = (color) => ["positive", "negative", "warning"].includes(color);
 const HvSwitch = forwardRef(
-  (props, ref) => {
+  function HvSwitch2(props, ref) {
     const {
       classes: classesProp,
       className,

package/dist/esm/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseSwitch } from \"../BaseSwitch\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvLabel,\n  HvLabelProps,\n  HvWarningText,\n} from \"../Forms\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Switch.styles\";\n\nexport { staticClasses as switchClasses };\n\nexport type HvSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSwitchProps\n  extends Omit<MuiSwitchProps, \"color\" | \"onChange\" | \"classes\"> {\n  /**\n   * A Jss Object used to override or extend the styles applied to the switch.\n   */\n  classes?: HvSwitchClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\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 switch is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\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 inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: 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 `checked`, depending of the values of both `required` and `checked`.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the switch.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any,\n  ) => void;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /** @ignore */\n  ref?: MuiSwitchProps[\"ref\"];\n  /** @ignore */\n  component?: MuiSwitchProps[\"component\"];\n  /** Color applied to the switch. */\n  color?: HvColorAny;\n}\n\nconst isSemantical = (color: HvColorAny) =>\n  [\"positive\", \"negative\", \"warning\"].includes(color);\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nexport const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      labelProps,\n\n      checked,\n      defaultChecked = false,\n\n      onChange,\n\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      inputProps,\n\n      color,\n\n      ...others\n    } = useDefaultProps(\"HvSwitch\", props);\n\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked),\n    );\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n        setIsChecked(() => {\n          // this will only run if uncontrolled\n          if (required && !newChecked) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newChecked;\n        });\n\n        onChange?.(evt, newChecked, value);\n      },\n      [onChange, required, setIsChecked, setValidationState, value],\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId: string | undefined;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            htmlFor={setId(elementId, \"input\")}\n            label={label}\n            className={classes.label}\n            {...labelProps}\n          />\n        )}\n        <div\n          className={cx(classes.switchContainer, {\n            [classes.invalidSwitch]: isStateInvalid,\n          })}\n        >\n          <HvBaseSwitch\n            ref={ref}\n            id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n            name={name}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n            onChange={onLocalChange}\n            value={value}\n            checked={isChecked}\n            inputProps={{\n              \"aria-invalid\": isStateInvalid ? true : undefined,\n              \"aria-errormessage\": errorMessageId,\n              \"aria-label\": ariaLabel,\n              \"aria-labelledby\": ariaLabelledBy,\n              \"aria-describedby\": ariaDescribedBy,\n              ...inputProps,\n            }}\n            {...(color && {\n              classes: {\n                switchBase: css({\n                  \"&&&+.HvBaseSwitch-track,&&&.HvBaseSwitch-checked+.HvBaseSwitch-track\":\n                    {\n                      backgroundColor: getColor(color),\n                      borderColor: isSemantical(color)\n                        ? getColor(`${color}_120`)\n                        : \"#00000032\",\n                    },\n                }),\n              },\n            })}\n            {...others}\n          />\n        </div>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            className={classes.error}\n            disableBorder\n            disableAdornment\n            hideText\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Switch.js","sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseSwitch } from \"../BaseSwitch\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvLabel,\n  HvLabelProps,\n  HvWarningText,\n} from \"../Forms\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Switch.styles\";\n\nexport { staticClasses as switchClasses };\n\nexport type HvSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSwitchProps\n  extends Omit<MuiSwitchProps, \"color\" | \"onChange\" | \"classes\"> {\n  /**\n   * A Jss Object used to override or extend the styles applied to the switch.\n   */\n  classes?: HvSwitchClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\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 switch is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\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 inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: 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 `checked`, depending of the values of both `required` and `checked`.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the switch.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any,\n  ) => void;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /** @ignore */\n  ref?: MuiSwitchProps[\"ref\"];\n  /** @ignore */\n  component?: MuiSwitchProps[\"component\"];\n  /** Color applied to the switch. */\n  color?: HvColorAny;\n}\n\nconst isSemantical = (color: HvColorAny) =>\n  [\"positive\", \"negative\", \"warning\"].includes(color);\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nexport const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(\n  function HvSwitch(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      labelProps,\n\n      checked,\n      defaultChecked = false,\n\n      onChange,\n\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      inputProps,\n\n      color,\n\n      ...others\n    } = useDefaultProps(\"HvSwitch\", props);\n\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked),\n    );\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n        setIsChecked(() => {\n          // this will only run if uncontrolled\n          if (required && !newChecked) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newChecked;\n        });\n\n        onChange?.(evt, newChecked, value);\n      },\n      [onChange, required, setIsChecked, setValidationState, value],\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId: string | undefined;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            htmlFor={setId(elementId, \"input\")}\n            label={label}\n            className={classes.label}\n            {...labelProps}\n          />\n        )}\n        <div\n          className={cx(classes.switchContainer, {\n            [classes.invalidSwitch]: isStateInvalid,\n          })}\n        >\n          <HvBaseSwitch\n            ref={ref}\n            id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n            name={name}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={required}\n            onChange={onLocalChange}\n            value={value}\n            checked={isChecked}\n            inputProps={{\n              \"aria-invalid\": isStateInvalid ? true : undefined,\n              \"aria-errormessage\": errorMessageId,\n              \"aria-label\": ariaLabel,\n              \"aria-labelledby\": ariaLabelledBy,\n              \"aria-describedby\": ariaDescribedBy,\n              ...inputProps,\n            }}\n            {...(color && {\n              classes: {\n                switchBase: css({\n                  \"&&&+.HvBaseSwitch-track,&&&.HvBaseSwitch-checked+.HvBaseSwitch-track\":\n                    {\n                      backgroundColor: getColor(color),\n                      borderColor: isSemantical(color)\n                        ? getColor(`${color}_120`)\n                        : \"#00000032\",\n                    },\n                }),\n              },\n            })}\n            {...others}\n          />\n        </div>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            className={classes.error}\n            disableBorder\n            disableAdornment\n            hideText\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvSwitch"],"mappings":"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"}

package/dist/esm/Tab/Tab.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import Tab from "@mui/material/Tab";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Tab.styles.js";
 import { staticClasses } from "./Tab.styles.js";
-const HvTab = (props) => {
+const HvTab = forwardRef(function HvTab2(props, ref) {
   const {
     classes: classesProp,
     iconPosition = "top",
@@ -14,6 +15,7 @@ const HvTab = (props) => {
   return /* @__PURE__ */ jsx(
     Tab,
     {
+      ref,
       classes: {
         root: classes.root,
         selected: classes.selected,
@@ -25,7 +27,7 @@ const HvTab = (props) => {
       ...others
     }
   );
-};
+});
 export {
   HvTab,
   staticClasses as tabClasses

package/dist/esm/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../src/Tab/Tab.tsx"],"sourcesContent":["import Tab, { TabProps as MuiTabProps } from \"@mui/material/Tab\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./Tab.styles\";\n\nexport { staticClasses as tabClasses };\n\nexport type HvTabClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tab props: https://mui.com/material-ui/api/tab/#props\nexport interface HvTabProps extends Omit<MuiTabProps, \"children\"> {\n  /** If `true`, the tab will be disabled. */\n  disabled?: boolean;\n  /** The icon element. */\n  icon?: React.ReactElement | string;\n  /** The label element. */\n  label?: React.ReactNode;\n  /** The position of the icon relative to the label. */\n  iconPosition?: \"bottom\" | \"end\" | \"start\" | \"top\";\n  /** A Jss Object used to override or extend the component styles. */\n  classes?: HvTabClasses;\n}\n\nexport const HvTab = (props: HvTabProps) => {\n  const {\n    classes: classesProp,\n    iconPosition = \"top\",\n    disabled = false,\n    ...others\n  } = useDefaultProps(\"HvTab\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <Tab\n      classes={{\n        root: classes.root,\n        selected: classes.selected,\n        disabled: classes.disabled,\n      }}\n      // expose the global class HvIsFocusVisible as a marker\n      // not to be styled directly, only as helper in specific css queries\n      focusVisibleClassName={cx(\"HvIsFocusVisible\", classes.focusVisible)}\n      disabled={disabled}\n      iconPosition={iconPosition}\n      {...others}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AA0Ba,MAAA,QAAQ,CAAC,UAAsB;AACpC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAClC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,UAAU,QAAQ;AAAA,QAClB,UAAU,QAAQ;AAAA,MACpB;AAAA,MAGA,uBAAuB,GAAG,oBAAoB,QAAQ,YAAY;AAAA,MAClE;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"Tab.js","sources":["../../../src/Tab/Tab.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport Tab, { TabProps as MuiTabProps } from \"@mui/material/Tab\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./Tab.styles\";\n\nexport { staticClasses as tabClasses };\n\nexport type HvTabClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tab props: https://mui.com/material-ui/api/tab/#props\nexport interface HvTabProps extends Omit<MuiTabProps, \"children\"> {\n  /** If `true`, the tab will be disabled. */\n  disabled?: boolean;\n  /** The icon element. */\n  icon?: React.ReactElement | string;\n  /** The label element. */\n  label?: React.ReactNode;\n  /** The position of the icon relative to the label. */\n  iconPosition?: \"bottom\" | \"end\" | \"start\" | \"top\";\n  /** A Jss Object used to override or extend the component styles. */\n  classes?: HvTabClasses;\n}\n\nexport const HvTab = forwardRef<\n  // no-indent\n  React.ComponentRef<typeof Tab>,\n  HvTabProps\n>(function HvTab(props, ref) {\n  const {\n    classes: classesProp,\n    iconPosition = \"top\",\n    disabled = false,\n    ...others\n  } = useDefaultProps(\"HvTab\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <Tab\n      ref={ref}\n      classes={{\n        root: classes.root,\n        selected: classes.selected,\n        disabled: classes.disabled,\n      }}\n      // expose the global class HvIsFocusVisible as a marker\n      // not to be styled directly, only as helper in specific css queries\n      focusVisibleClassName={cx(\"HvIsFocusVisible\", classes.focusVisible)}\n      disabled={disabled}\n      iconPosition={iconPosition}\n      {...others}\n    />\n  );\n});\n"],"names":["HvTab"],"mappings":";;;;;;AA2BO,MAAM,QAAQ,WAInB,SAASA,OAAM,OAAO,KAAK;AACrB,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAClC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,UAAU,QAAQ;AAAA,QAClB,UAAU,QAAQ;AAAA,MACpB;AAAA,MAGA,uBAAuB,GAAG,oBAAoB,QAAQ,YAAY;AAAA,MAClE;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/esm/Table/Table.js

@@ -25,7 +25,7 @@ const computeTablePartComponents = (rootComponent) => {
     Td: rootComponent
   };
 };
-const HvTable = forwardRef((props, ref) => {
+const HvTable = forwardRef(function HvTable2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/esm/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../src/Table/Table.tsx"],"sourcesContent":["import { forwardRef, useMemo, useRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./Table.styles\";\nimport TableContext from \"./TableContext\";\n\nexport { staticClasses as tableClasses };\n\nexport type HvTableClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTableVariant = \"listrow\" | \"default\";\nexport type HvTableCellAlign =\n  | \"center\"\n  | \"inherit\"\n  | \"justify\"\n  | \"left\"\n  | \"right\";\nexport type HvTableCellType = \"body\" | \"footer\" | \"head\";\nexport type HvTableCellVariant =\n  | \"checkbox\"\n  | \"expand\"\n  | \"actions\"\n  | \"default\"\n  | \"none\";\n\nexport interface HvTableProps\n  extends React.TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to `table`.\n   *\n   * When using non-table elements, layout is up to the developer using the component.\n   */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children: React.ReactNode;\n  /** Whether the `HvTable` has a sticky header row. */\n  stickyHeader?: boolean;\n  /** Whether the `HvTable` has sticky columns. */\n  stickyColumns?: boolean;\n  /** Whether the `HvTable` has the list row styles or the default. */\n  variant?: HvTableVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableClasses;\n}\n\nconst defaultComponent = \"table\";\n\nconst computeTablePartComponents = (rootComponent: React.ElementType<any>) => {\n  if (rootComponent === \"table\") {\n    return {\n      Table: \"table\",\n      THead: \"thead\",\n      TBody: \"tbody\",\n      Tr: \"tr\",\n      Th: \"th\",\n      Td: \"td\",\n    };\n  }\n\n  return {\n    Table: rootComponent,\n    THead: rootComponent,\n    TBody: rootComponent,\n    Tr: rootComponent,\n    Th: rootComponent,\n    Td: rootComponent,\n  };\n};\n\n/**\n * A table gathers relational data. It displays values arranged to allow quick numerical analysis like comparison and sorting.\n *\n * The **HvTable** component offers a set of HTML-equivalent elements, **styled to Design System's specification**,\n * for building tables.\n * You can rely on these **elements** when your table doesn’t have many interactions or you need it to be very lightweight.\n *\n * For better data handling and **advanced features** we recommend the use of the utility hooks collection.\n * See the <a href=\"?id=guides-table-table-hooks--use-hv-hooks&viewMode=docs\" target=\"_self\">Table Hooks documentation</a> for more details.\n */\nexport const HvTable = forwardRef<HTMLElement, HvTableProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    component = defaultComponent,\n    stickyHeader = false,\n    stickyColumns = false,\n    variant = \"default\",\n    ...others\n  } = useDefaultProps(\"HvTable\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const containerRef = useRef(ref);\n\n  const components = useMemo(\n    () => computeTablePartComponents(component),\n    [component],\n  );\n\n  const tableContext = useMemo(\n    () => ({ components, variant, containerRef }),\n    [components, variant, containerRef],\n  );\n\n  const Table = useMemo(() => components.Table, [components]);\n\n  return (\n    <TableContext.Provider value={tableContext}>\n      <Table\n        ref={ref}\n        role={component === defaultComponent ? null : \"table\"}\n        className={cx(\n          classes.root,\n          {\n            [classes.stickyHeader]: stickyHeader,\n            [classes.stickyColumns]: stickyColumns,\n            [classes.listRow]: variant === \"listrow\",\n          },\n          className,\n        )}\n        {...others}\n      />\n    </TableContext.Provider>\n  );\n});\n"],"names":[],"mappings":";;;;;;AAiDA,MAAM,mBAAmB;AAEzB,MAAM,6BAA6B,CAAC,kBAA0C;AAC5E,MAAI,kBAAkB,SAAS;AACtB,WAAA;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EAER;AAEO,SAAA;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAER;AAYO,MAAM,UAAU,WAAsC,CAAC,OAAO,QAAQ;AACrE,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,GAAG;AAE/B,QAAM,aAAa;AAAA,IACjB,MAAM,2BAA2B,SAAS;AAAA,IAC1C,CAAC,SAAS;AAAA,EAAA;AAGZ,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,YAAY,SAAS;IAC9B,CAAC,YAAY,SAAS,YAAY;AAAA,EAAA;AAGpC,QAAM,QAAQ,QAAQ,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;AAE1D,SACG,oBAAA,aAAa,UAAb,EAAsB,OAAO,cAC5B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,cAAc,mBAAmB,OAAO;AAAA,MAC9C,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,OAAO,GAAG,YAAY;AAAA,QACjC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Table.js","sources":["../../../src/Table/Table.tsx"],"sourcesContent":["import { forwardRef, useMemo, useRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./Table.styles\";\nimport TableContext from \"./TableContext\";\n\nexport { staticClasses as tableClasses };\n\nexport type HvTableClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTableVariant = \"listrow\" | \"default\";\nexport type HvTableCellAlign =\n  | \"center\"\n  | \"inherit\"\n  | \"justify\"\n  | \"left\"\n  | \"right\";\nexport type HvTableCellType = \"body\" | \"footer\" | \"head\";\nexport type HvTableCellVariant =\n  | \"checkbox\"\n  | \"expand\"\n  | \"actions\"\n  | \"default\"\n  | \"none\";\n\nexport interface HvTableProps\n  extends React.TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to `table`.\n   *\n   * When using non-table elements, layout is up to the developer using the component.\n   */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children: React.ReactNode;\n  /** Whether the `HvTable` has a sticky header row. */\n  stickyHeader?: boolean;\n  /** Whether the `HvTable` has sticky columns. */\n  stickyColumns?: boolean;\n  /** Whether the `HvTable` has the list row styles or the default. */\n  variant?: HvTableVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableClasses;\n}\n\nconst defaultComponent = \"table\";\n\nconst computeTablePartComponents = (rootComponent: React.ElementType<any>) => {\n  if (rootComponent === \"table\") {\n    return {\n      Table: \"table\",\n      THead: \"thead\",\n      TBody: \"tbody\",\n      Tr: \"tr\",\n      Th: \"th\",\n      Td: \"td\",\n    };\n  }\n\n  return {\n    Table: rootComponent,\n    THead: rootComponent,\n    TBody: rootComponent,\n    Tr: rootComponent,\n    Th: rootComponent,\n    Td: rootComponent,\n  };\n};\n\n/**\n * A table gathers relational data. It displays values arranged to allow quick numerical analysis like comparison and sorting.\n *\n * The **HvTable** component offers a set of HTML-equivalent elements, **styled to Design System's specification**,\n * for building tables.\n * You can rely on these **elements** when your table doesn’t have many interactions or you need it to be very lightweight.\n *\n * For better data handling and **advanced features** we recommend the use of the utility hooks collection.\n * See the <a href=\"?id=guides-table-table-hooks--use-hv-hooks&viewMode=docs\" target=\"_self\">Table Hooks documentation</a> for more details.\n */\nexport const HvTable = forwardRef<\n  // no-indent\n  HTMLElement,\n  HvTableProps\n>(function HvTable(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    component = defaultComponent,\n    stickyHeader = false,\n    stickyColumns = false,\n    variant = \"default\",\n    ...others\n  } = useDefaultProps(\"HvTable\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const containerRef = useRef(ref);\n\n  const components = useMemo(\n    () => computeTablePartComponents(component),\n    [component],\n  );\n\n  const tableContext = useMemo(\n    () => ({ components, variant, containerRef }),\n    [components, variant, containerRef],\n  );\n\n  const Table = useMemo(() => components.Table, [components]);\n\n  return (\n    <TableContext.Provider value={tableContext}>\n      <Table\n        ref={ref}\n        role={component === defaultComponent ? null : \"table\"}\n        className={cx(\n          classes.root,\n          {\n            [classes.stickyHeader]: stickyHeader,\n            [classes.stickyColumns]: stickyColumns,\n            [classes.listRow]: variant === \"listrow\",\n          },\n          className,\n        )}\n        {...others}\n      />\n    </TableContext.Provider>\n  );\n});\n"],"names":["HvTable"],"mappings":";;;;;;AAiDA,MAAM,mBAAmB;AAEzB,MAAM,6BAA6B,CAAC,kBAA0C;AAC5E,MAAI,kBAAkB,SAAS;AACtB,WAAA;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EAER;AAEO,SAAA;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAER;AAYO,MAAM,UAAU,WAIrB,SAASA,SAAQ,OAAO,KAAK;AACvB,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,GAAG;AAE/B,QAAM,aAAa;AAAA,IACjB,MAAM,2BAA2B,SAAS;AAAA,IAC1C,CAAC,SAAS;AAAA,EAAA;AAGZ,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,YAAY,SAAS;IAC9B,CAAC,YAAY,SAAS,YAAY;AAAA,EAAA;AAGpC,QAAM,QAAQ,QAAQ,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;AAE1D,SACG,oBAAA,aAAa,UAAb,EAAsB,OAAO,cAC5B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,cAAc,mBAAmB,OAAO;AAAA,MAC9C,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,OAAO,GAAG,YAAY;AAAA,QACjC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/esm/Table/TableCell/TableCell.js

@@ -42,11 +42,11 @@ const HvTableCell = forwardRef(
         className: cx(
           classes.root,
           classes[type],
+          align !== "inherit" && classes[`align${capitalize(align)}`],
+          variant !== "default" && classes[`variant${capitalize(variant)}`],
           {
-            [classes[`align${capitalize(align)}`]]: align !== "inherit",
             [classes.variantList]: tableContext.variant === "listrow",
             [classes.variantListHead]: tableContext.variant === "listrow" && type !== "body",
-            [classes[`variant${capitalize(variant)}`]]: variant !== "default",
             [classes.sorted]: sorted,
             [classes.stickyColumn]: stickyColumn,
             [classes.stickyColumnMostLeft]: stickyColumnMostLeft,

package/dist/esm/Table/TableCell/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../../../src/Table/TableCell/TableCell.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport { TableSectionContext } from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableCell.styles\";\n\nexport { staticClasses as tableCellClasses };\n\nexport type HvTableCellClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableCellProps\n  extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** Inline styles to be applied to the root element. */\n  style?: React.CSSProperties;\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant | \"listcheckbox\" | \"listactions\";\n  /** Specify the cell's type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** Whether or not the cell is part of a sorted column. */\n  sorted?: boolean;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableCellClasses;\n}\n\nconst defaultComponent = \"td\";\n\n/**\n * `HvTableCell` acts as a `td` element and inherits styles from its context\n */\nexport const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(\n  (props, externalRef) => {\n    const {\n      children,\n      component,\n      className,\n      style,\n      classes: classesProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sorted = false,\n      resizable = false,\n      resizing = false,\n      ...others\n    } = useDefaultProps(\"HvTableCell\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n\n    const Component =\n      component || tableContext?.components?.Td || defaultComponent;\n\n    return (\n      <Component\n        ref={externalRef}\n        role={Component === defaultComponent ? null : \"cell\"}\n        style={style}\n        className={cx(\n          classes.root,\n          classes[type as keyof HvTableCellClasses],\n          {\n            [classes[`align${capitalize(align)}` as keyof HvTableCellClasses]]:\n              align !== \"inherit\",\n            [classes.variantList]: tableContext.variant === \"listrow\",\n            [classes.variantListHead]:\n              tableContext.variant === \"listrow\" && type !== \"body\",\n            [classes[\n              `variant${capitalize(variant)}` as keyof HvTableCellClasses\n            ]]: variant !== \"default\",\n            [classes.sorted]: sorted,\n            [classes.stickyColumn]: stickyColumn,\n            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n            [classes.groupColumnMostLeft]: groupColumnMostLeft,\n            [classes.groupColumnMostRight]: groupColumnMostRight,\n            [classes.resizable]: resizable,\n            [classes.resizing]: resizing,\n          },\n          className,\n        )}\n        {...others}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;AAsDA,MAAM,mBAAmB;AAKlB,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,gBAAgB;AAChB,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,eAAe;AAAA,MACf,uBAAuB;AAAA,MACvB,yBAAyB;AAAA,MACzB,sBAAsB;AAAA,MACtB,uBAAuB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AACtC,UAAA,sBAAsB,WAAW,mBAAmB;AAEpD,UAAA,OAAO,YAAY,qBAAqB,QAAQ;AAEtD,UAAM,YACJ,aAAa,cAAc,YAAY,MAAM;AAG7C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC9C;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,IAAgC;AAAA,UACxC;AAAA,YACE,CAAC,QAAQ,QAAQ,WAAW,KAAK,CAAC,EAA8B,CAAC,GAC/D,UAAU;AAAA,YACZ,CAAC,QAAQ,WAAW,GAAG,aAAa,YAAY;AAAA,YAChD,CAAC,QAAQ,eAAe,GACtB,aAAa,YAAY,aAAa,SAAS;AAAA,YACjD,CAAC,QACC,UAAU,WAAW,OAAO,CAAC,EAC/B,CAAC,GAAG,YAAY;AAAA,YAChB,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,sBAAsB,GAAG;AAAA,YAClC,CAAC,QAAQ,mBAAmB,GAAG;AAAA,YAC/B,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,SAAS,GAAG;AAAA,YACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"TableCell.js","sources":["../../../../src/Table/TableCell/TableCell.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport { TableSectionContext } from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableCell.styles\";\n\nexport { staticClasses as tableCellClasses };\n\nexport type HvTableCellClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableCellProps\n  extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** Inline styles to be applied to the root element. */\n  style?: React.CSSProperties;\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant | \"listcheckbox\" | \"listactions\";\n  /** Specify the cell's type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** Whether or not the cell is part of a sorted column. */\n  sorted?: boolean;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableCellClasses;\n}\n\nconst defaultComponent = \"td\";\n\n/**\n * `HvTableCell` acts as a `td` element and inherits styles from its context\n */\nexport const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(\n  (props, externalRef) => {\n    const {\n      children,\n      component,\n      className,\n      style,\n      classes: classesProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sorted = false,\n      resizable = false,\n      resizing = false,\n      ...others\n    } = useDefaultProps(\"HvTableCell\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n\n    const Component =\n      component || tableContext?.components?.Td || defaultComponent;\n\n    return (\n      <Component\n        ref={externalRef}\n        role={Component === defaultComponent ? null : \"cell\"}\n        style={style}\n        className={cx(\n          classes.root,\n          classes[type],\n          align !== \"inherit\" && classes[`align${capitalize(align)}`],\n          variant !== \"default\" && classes[`variant${capitalize(variant)}`],\n          {\n            [classes.variantList]: tableContext.variant === \"listrow\",\n            [classes.variantListHead]:\n              tableContext.variant === \"listrow\" && type !== \"body\",\n            [classes.sorted]: sorted,\n            [classes.stickyColumn]: stickyColumn,\n            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n            [classes.groupColumnMostLeft]: groupColumnMostLeft,\n            [classes.groupColumnMostRight]: groupColumnMostRight,\n            [classes.resizable]: resizable,\n            [classes.resizing]: resizing,\n          },\n          className,\n        )}\n        {...others}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;AAsDA,MAAM,mBAAmB;AAKlB,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,gBAAgB;AAChB,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,eAAe;AAAA,MACf,uBAAuB;AAAA,MACvB,yBAAyB;AAAA,MACzB,sBAAsB;AAAA,MACtB,uBAAuB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AACtC,UAAA,sBAAsB,WAAW,mBAAmB;AAEpD,UAAA,OAAO,YAAY,qBAAqB,QAAQ;AAEtD,UAAM,YACJ,aAAa,cAAc,YAAY,MAAM;AAG7C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC9C;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,IAAI;AAAA,UACZ,UAAU,aAAa,QAAQ,QAAQ,WAAW,KAAK,CAAC,EAAE;AAAA,UAC1D,YAAY,aAAa,QAAQ,UAAU,WAAW,OAAO,CAAC,EAAE;AAAA,UAChE;AAAA,YACE,CAAC,QAAQ,WAAW,GAAG,aAAa,YAAY;AAAA,YAChD,CAAC,QAAQ,eAAe,GACtB,aAAa,YAAY,aAAa,SAAS;AAAA,YACjD,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,sBAAsB,GAAG;AAAA,YAClC,CAAC,QAAQ,mBAAmB,GAAG;AAAA,YAC/B,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,SAAS,GAAG;AAAA,YACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/esm/Table/TableHeader/TableHeader.js

@@ -71,6 +71,8 @@ const HvTableHeader = forwardRef(
               )
             }
           }),
+          align !== "inherit" && classes[`align${capitalize(align)}`],
+          variant !== "default" && classes[`variant${capitalize(variant)}`],
           {
             [classes.groupColumnMostLeft]: groupColumnMostLeft,
             [classes.groupColumnMostRight]: groupColumnMostRight,
@@ -81,9 +83,7 @@ const HvTableHeader = forwardRef(
             [classes.stickyColumn]: stickyColumn,
             [classes.stickyColumnMostLeft]: stickyColumnMostLeft,
             [classes.stickyColumnLeastRight]: stickyColumnLeastRight,
-            [classes.variantList]: tableContext.variant === "listrow",
-            [classes[`align${capitalize(align)}`]]: align !== "inherit",
-            [classes[`variant${capitalize(variant)}`]]: variant !== "default"
+            [classes.variantList]: tableContext.variant === "listrow"
           },
           className
         ),
@@ -92,9 +92,10 @@ const HvTableHeader = forwardRef(
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cx(classes.headerContent, {
-              [classes[`alignFlex${capitalize(align)}`]]: align !== "inherit"
-            }),
+            className: cx(
+              classes.headerContent,
+              align !== "inherit" && classes[`alignFlex${capitalize(align)}`]
+            ),
             children: [
               isHeadCell && sortable && /* @__PURE__ */ jsx(
                 HvButton,

package/dist/esm/Table/TableHeader/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../../src/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo } from \"react\";\nimport { alpha, hexToRgb } from \"@mui/material/styles\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport { TableSectionContext } from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHeader.styles\";\nimport { getSortIcon, isParagraph } from \"./utils\";\n\nexport { staticClasses as tableHeaderClasses };\n\nexport type HvTableHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeaderProps\n  extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** The scope of cells that the header element relates to. */\n  scope?: \"col\" | \"row\" | \"colgroup\" | \"rowgroup\";\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant;\n  /** Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is sorted */\n  sorted?: boolean;\n  /** Whether or not the cell is sortable */\n  sortable?: boolean;\n  /** Set sort direction icon and aria-sort. */\n  sortDirection?: \"ascending\" | \"descending\" | false;\n  /** Extra props to be passed onto the text in the header. */\n  headerTextProps?: HvTypographyProps;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** The resize props injected in the resize handler */\n  resizerProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableHeaderClasses;\n  /** Extra props to be passed onto the sort button in the header. */\n  sortButtonProps?: HvButtonProps;\n}\n\nconst defaultComponent = \"th\";\n\n/**\n * `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n  (props, externalRef) => {\n    const {\n      children,\n      component,\n      className,\n      style: styleProp,\n      classes: classesProp,\n      scope: scopeProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sortDirection = \"none\",\n      sorted,\n      sortable,\n      headerTextProps,\n      resizerProps = {},\n      resizable = false,\n      resizing = false,\n      sortButtonProps,\n      ...others\n    } = useDefaultProps(\"HvTableHeader\", props);\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const { colors } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n    const isHeadCell = type === \"head\";\n\n    const scope = scopeProp ?? (isHeadCell ? \"col\" : \"row\");\n\n    const Sort = useMemo(\n      () => getSortIcon(sorted && sortDirection),\n      [sorted, sortDirection],\n    );\n\n    const Component =\n      component || tableContext?.components?.Th || defaultComponent;\n\n    const role =\n      Component === defaultComponent\n        ? null\n        : isHeadCell\n          ? \"columnheader\"\n          : \"rowheader\";\n    const paragraph = isParagraph(children);\n\n    // Keep the header sticky\n    const style = stickyColumn\n      ? { ...styleProp, position: \"sticky\" }\n      : styleProp;\n\n    return (\n      <Component\n        ref={externalRef}\n        role={role}\n        scope={scope}\n        style={style}\n        className={cx(\n          classes.root,\n          classes[type as keyof HvTableHeaderClasses],\n          type === \"body\" &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundColor: alpha(\n                  hexToRgb(colors?.atmo1 || theme.colors.atmo1),\n                  0.4,\n                ),\n              },\n            }),\n          {\n            [classes.groupColumnMostLeft]: groupColumnMostLeft,\n            [classes.groupColumnMostRight]: groupColumnMostRight,\n            [classes.sortable]: sortable,\n            [classes.sorted]: sorted,\n            [classes.resizable]: resizable,\n            [classes.resizing]: resizing,\n            [classes.stickyColumn]: stickyColumn,\n            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n            [classes.variantList]: tableContext.variant === \"listrow\",\n            [classes[\n              `align${capitalize(align)}` as keyof HvTableHeaderClasses\n            ]]: align !== \"inherit\",\n            [classes[\n              `variant${capitalize(variant)}` as keyof HvTableHeaderClasses\n            ]]: variant !== \"default\",\n          },\n          className,\n        )}\n        aria-sort={sortable ? sortDirection : undefined}\n        {...others}\n      >\n        <div\n          className={cx(classes.headerContent, {\n            [classes[\n              `alignFlex${capitalize(align)}` as keyof HvTableHeaderClasses\n            ]]: align !== \"inherit\",\n          })}\n        >\n          {isHeadCell && sortable && (\n            <HvButton\n              className={classes.sortButton}\n              icon\n              overrideIconColors={false}\n              aria-label=\"Sort\"\n              {...sortButtonProps}\n            >\n              <Sort className={classes.sortIcon} />\n            </HvButton>\n          )}\n          <HvTypography\n            component=\"div\"\n            className={cx({\n              [classes.headerText]: !paragraph,\n              [classes.headerParagraph]: paragraph,\n              [classes.sortableHeaderText]: sortable,\n            })}\n            variant=\"label\"\n            {...headerTextProps}\n          >\n            {children}\n          </HvTypography>\n          {resizable && <div {...resizerProps} className={classes.resizer} />}\n        </div>\n      </Component>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TableHeader.js","sources":["../../../../src/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo } from \"react\";\nimport { alpha, hexToRgb } from \"@mui/material/styles\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport { TableSectionContext } from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHeader.styles\";\nimport { getSortIcon, isParagraph } from \"./utils\";\n\nexport { staticClasses as tableHeaderClasses };\n\nexport type HvTableHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeaderProps\n  extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** The scope of cells that the header element relates to. */\n  scope?: \"col\" | \"row\" | \"colgroup\" | \"rowgroup\";\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant;\n  /** Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is sorted */\n  sorted?: boolean;\n  /** Whether or not the cell is sortable */\n  sortable?: boolean;\n  /** Set sort direction icon and aria-sort. */\n  sortDirection?: \"ascending\" | \"descending\" | false;\n  /** Extra props to be passed onto the text in the header. */\n  headerTextProps?: HvTypographyProps;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** The resize props injected in the resize handler */\n  resizerProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableHeaderClasses;\n  /** Extra props to be passed onto the sort button in the header. */\n  sortButtonProps?: HvButtonProps;\n}\n\nconst defaultComponent = \"th\";\n\n/**\n * `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n  (props, externalRef) => {\n    const {\n      children,\n      component,\n      className,\n      style: styleProp,\n      classes: classesProp,\n      scope: scopeProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sortDirection = \"none\",\n      sorted,\n      sortable,\n      headerTextProps,\n      resizerProps = {},\n      resizable = false,\n      resizing = false,\n      sortButtonProps,\n      ...others\n    } = useDefaultProps(\"HvTableHeader\", props);\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const { colors } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n    const isHeadCell = type === \"head\";\n\n    const scope = scopeProp ?? (isHeadCell ? \"col\" : \"row\");\n\n    const Sort = useMemo(\n      () => getSortIcon(sorted && sortDirection),\n      [sorted, sortDirection],\n    );\n\n    const Component =\n      component || tableContext?.components?.Th || defaultComponent;\n\n    const role =\n      Component === defaultComponent\n        ? null\n        : isHeadCell\n          ? \"columnheader\"\n          : \"rowheader\";\n    const paragraph = isParagraph(children);\n\n    // Keep the header sticky\n    const style = stickyColumn\n      ? { ...styleProp, position: \"sticky\" }\n      : styleProp;\n\n    return (\n      <Component\n        ref={externalRef}\n        role={role}\n        scope={scope}\n        style={style}\n        className={cx(\n          classes.root,\n          classes[type],\n          type === \"body\" &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundColor: alpha(\n                  hexToRgb(colors?.atmo1 || theme.colors.atmo1),\n                  0.4,\n                ),\n              },\n            }),\n          align !== \"inherit\" && classes[`align${capitalize(align)}`],\n          variant !== \"default\" && classes[`variant${capitalize(variant)}`],\n          {\n            [classes.groupColumnMostLeft]: groupColumnMostLeft,\n            [classes.groupColumnMostRight]: groupColumnMostRight,\n            [classes.sortable]: sortable,\n            [classes.sorted]: sorted,\n            [classes.resizable]: resizable,\n            [classes.resizing]: resizing,\n            [classes.stickyColumn]: stickyColumn,\n            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n            [classes.variantList]: tableContext.variant === \"listrow\",\n          },\n          className,\n        )}\n        aria-sort={sortable ? sortDirection : undefined}\n        {...others}\n      >\n        <div\n          className={cx(\n            classes.headerContent,\n            align !== \"inherit\" && classes[`alignFlex${capitalize(align)}`],\n          )}\n        >\n          {isHeadCell && sortable && (\n            <HvButton\n              className={classes.sortButton}\n              icon\n              overrideIconColors={false}\n              aria-label=\"Sort\"\n              {...sortButtonProps}\n            >\n              <Sort className={classes.sortIcon} />\n            </HvButton>\n          )}\n          <HvTypography\n            component=\"div\"\n            className={cx({\n              [classes.headerText]: !paragraph,\n              [classes.headerParagraph]: paragraph,\n              [classes.sortableHeaderText]: sortable,\n            })}\n            variant=\"label\"\n            {...headerTextProps}\n          >\n            {children}\n          </HvTypography>\n          {resizable && <div {...resizerProps} className={classes.resizer} />}\n        </div>\n      </Component>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/TableSection/TableSection.js

@@ -6,7 +6,7 @@ import { useClasses } from "./TableSection.styles.js";
 import { staticClasses } from "./TableSection.styles.js";
 import { HvSection } from "../Section/Section.js";
 const HvTableSection = forwardRef(
-  (props, ref) => {
+  function HvTableSection2(props, ref) {
     const {
       id,
       classes: classesProp,

package/dist/esm/TableSection/TableSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSection.js","sources":["../../../src/TableSection/TableSection.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvSection, HvSectionProps } from \"../Section\";\nimport { staticClasses, useClasses } from \"./TableSection.styles\";\n\nexport { staticClasses as tableSectionClasses };\n\nexport type HvTableSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableSectionProps extends HvSectionProps {}\n\n/**\n * The `TableSection` component is a wrapper for the `Section` component that applies\n * specific stylings for tables that follow the latest DS specifications.\n */\nexport const HvTableSection = forwardRef<HTMLDivElement, HvTableSectionProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      children,\n      ...others\n    } = useDefaultProps(\"HvTableSection\", props);\n\n    const { classes } = useClasses(classesProp);\n    const elementId = useUniqueId(id);\n\n    return (\n      <HvSection id={elementId} ref={ref} classes={classes} {...others}>\n        {children}\n      </HvSection>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;AAoBO,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,UAAA,YAAY,YAAY,EAAE;AAG9B,WAAA,oBAAC,aAAU,IAAI,WAAW,KAAU,SAAmB,GAAG,QACvD,SACH,CAAA;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"TableSection.js","sources":["../../../src/TableSection/TableSection.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvSection, HvSectionProps } from \"../Section\";\nimport { staticClasses, useClasses } from \"./TableSection.styles\";\n\nexport { staticClasses as tableSectionClasses };\n\nexport type HvTableSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableSectionProps extends HvSectionProps {}\n\n/**\n * The `TableSection` component is a wrapper for the `Section` component that applies\n * specific stylings for tables that follow the latest DS specifications.\n */\nexport const HvTableSection = forwardRef<HTMLDivElement, HvTableSectionProps>(\n  function HvTableSection(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      children,\n      ...others\n    } = useDefaultProps(\"HvTableSection\", props);\n\n    const { classes } = useClasses(classesProp);\n    const elementId = useUniqueId(id);\n\n    return (\n      <HvSection id={elementId} ref={ref} classes={classes} {...others}>\n        {children}\n      </HvSection>\n    );\n  },\n);\n"],"names":["HvTableSection"],"mappings":";;;;;;;AAoBO,MAAM,iBAAiB;AAAA,EAC5B,SAASA,gBAAe,OAAO,KAAK;AAC5B,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,UAAA,YAAY,YAAY,EAAE;AAG9B,WAAA,oBAAC,aAAU,IAAI,WAAW,KAAU,SAAmB,GAAG,QACvD,SACH,CAAA;AAAA,EAEJ;AACF;"}

package/dist/esm/TableSection/TableSection.styles.js

@@ -9,33 +9,33 @@ import "../Table/TableRow/TableRow.js";
 import { staticClasses as staticClasses$4 } from "../Table/TableCell/TableCell.styles.js";
 import "../Table/TableCell/TableCell.js";
 import { staticClasses as staticClasses$5 } from "../BulkActions/BulkActions.styles.js";
-import "react/jsx-runtime";
+import "../BulkActions/BulkActions.js";
 import { staticClasses as staticClasses$6 } from "../Pagination/Pagination.styles.js";
-import "react";
-import "@mui/material";
-import "@hitachivantara/uikit-react-icons";
+import "../Pagination/Pagination.js";
 const { staticClasses, useClasses } = createClasses("HvTableSection", {
   root: {},
   header: {
     // Only apply the border to divide the header and content when both are displayed
-    "+ div": { borderTop: `1px solid ${theme.colors.atmo3}` }
-  },
-  actions: {
-    right: theme.space.sm
+    "+ div": {
+      borderTop: `1px solid ${theme.colors.atmo3}`,
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0
+    }
   },
+  actions: {},
   content: {
     marginTop: 0,
     padding: 0,
     // Apply border radius to the first child if there's not an header
     "&:first-of-type": {
       "& > :first-of-type": {
-        borderTopLeftRadius: theme.radii.round,
-        borderTopRightRadius: theme.radii.round
+        borderTopLeftRadius: "inherit",
+        borderTopRightRadius: "inherit"
       }
     },
     "& > :last-child": {
-      borderBottomLeftRadius: theme.radii.round,
-      borderBottomRightRadius: theme.radii.round
+      borderBottomLeftRadius: "inherit",
+      borderBottomRightRadius: "inherit"
     },
     [`& .${staticClasses$1.root}`]: {
       paddingBottom: 0
@@ -89,11 +89,13 @@ const { staticClasses, useClasses } = createClasses("HvTableSection", {
   },
   hidden: {},
   raisedHeader: {
-    "+ div": {
+    "& $content": {
       paddingTop: 0
     }
   },
-  spaceTop: { paddingTop: 0 }
+  hasHeader: {},
+  /** @deprecated use `hasHeader` instead */
+  spaceTop: {}
 });
 export {
   staticClasses,

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

@@ -1 +1 @@
-{"version":3,"file":"TableSection.styles.js","sources":["../../../src/TableSection/TableSection.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { bulkActionsClasses } from \"../BulkActions\";\nimport { paginationClasses } from \"../Pagination\";\nimport { tableCellClasses } from \"../Table/TableCell\";\nimport { tableContainerClasses } from \"../Table/TableContainer\";\nimport { tableHeaderClasses } from \"../Table/TableHeader\";\nimport { tableRowClasses } from \"../Table/TableRow\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableSection\", {\n  root: {},\n  header: {\n    // Only apply the border to divide the header and content when both are displayed\n    \"+ div\": { borderTop: `1px solid ${theme.colors.atmo3}` },\n  },\n  actions: {\n    right: theme.space.sm,\n  },\n  content: {\n    marginTop: 0,\n    padding: 0,\n\n    // Apply border radius to the first child if there's not an header\n    \"&:first-of-type\": {\n      \"& > :first-of-type\": {\n        borderTopLeftRadius: theme.radii.round,\n        borderTopRightRadius: theme.radii.round,\n      },\n    },\n\n    \"& > :last-child\": {\n      borderBottomLeftRadius: theme.radii.round,\n      borderBottomRightRadius: theme.radii.round,\n    },\n\n    [`& .${tableContainerClasses.root}`]: {\n      paddingBottom: 0,\n    },\n\n    [`& .${tableHeaderClasses.head}`]: {\n      backgroundColor: theme.colors.atmo2,\n      borderBottomColor: theme.colors.atmo3,\n      [`&.${tableHeaderClasses.variantCheckbox}`]: {\n        borderRight: \"none\",\n      },\n      [`&.${tableHeaderClasses.variantActions}`]: {\n        borderLeft: \"none\",\n      },\n    },\n\n    // Remove border for the last table row\n    [`& .${tableRowClasses.root}`]: {\n      \"&:last-child\": {\n        [`& .${tableCellClasses.root}`]: { borderBottom: \"none\" },\n      },\n    },\n\n    [`& .${tableCellClasses.root}`]: {\n      borderBottomColor: theme.colors.atmo3,\n    },\n\n    [`& .${tableCellClasses.variantCheckbox}`]: {\n      borderRight: \"none\",\n    },\n\n    [`& .${tableCellClasses.variantActions}`]: {\n      borderLeft: \"none\",\n    },\n\n    [`& .${bulkActionsClasses.root}`]: {\n      marginBottom: 0,\n      border: \"none\",\n      borderBottom: `1px solid ${theme.colors.atmo3}`,\n      padding: theme.spacing(\"xs\", \"sm\"),\n    },\n\n    [`& .${paginationClasses.root}`]: {\n      margin: 0,\n      backgroundColor: theme.colors.atmo2,\n      padding: theme.space.xs,\n      borderTop: `1px solid ${theme.colors.atmo3}`,\n    },\n\n    [`& .${paginationClasses.pageSizeOptions}`]: {\n      left: theme.space.sm,\n    },\n    [`& .${paginationClasses.pageSizeHeader}`]: {\n      border: \"none\",\n      \"&:hover\": {\n        border: \"none\",\n      },\n    },\n  },\n  hidden: {},\n  raisedHeader: {\n    \"+ div\": {\n      paddingTop: 0,\n    },\n  },\n  spaceTop: { paddingTop: 0 },\n});\n"],"names":["tableContainerClasses","tableHeaderClasses","tableRowClasses","tableCellClasses","bulkActionsClasses","paginationClasses"],"mappings":";;;;;;;;;;;;;;;;AAUO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA;AAAA,IAEN,SAAS,EAAE,WAAW,aAAa,MAAM,OAAO,KAAK,GAAG;AAAA,EAC1D;AAAA,EACA,SAAS;AAAA,IACP,OAAO,MAAM,MAAM;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA;AAAA,IAGT,mBAAmB;AAAA,MACjB,sBAAsB;AAAA,QACpB,qBAAqB,MAAM,MAAM;AAAA,QACjC,sBAAsB,MAAM,MAAM;AAAA,MACpC;AAAA,IACF;AAAA,IAEA,mBAAmB;AAAA,MACjB,wBAAwB,MAAM,MAAM;AAAA,MACpC,yBAAyB,MAAM,MAAM;AAAA,IACvC;AAAA,IAEA,CAAC,MAAMA,gBAAsB,IAAI,EAAE,GAAG;AAAA,MACpC,eAAe;AAAA,IACjB;AAAA,IAEA,CAAC,MAAMC,gBAAmB,IAAI,EAAE,GAAG;AAAA,MACjC,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB,MAAM,OAAO;AAAA,MAChC,CAAC,KAAKA,gBAAmB,eAAe,EAAE,GAAG;AAAA,QAC3C,aAAa;AAAA,MACf;AAAA,MACA,CAAC,KAAKA,gBAAmB,cAAc,EAAE,GAAG;AAAA,QAC1C,YAAY;AAAA,MACd;AAAA,IACF;AAAA;AAAA,IAGA,CAAC,MAAMC,gBAAgB,IAAI,EAAE,GAAG;AAAA,MAC9B,gBAAgB;AAAA,QACd,CAAC,MAAMC,gBAAiB,IAAI,EAAE,GAAG,EAAE,cAAc,OAAO;AAAA,MAC1D;AAAA,IACF;AAAA,IAEA,CAAC,MAAMA,gBAAiB,IAAI,EAAE,GAAG;AAAA,MAC/B,mBAAmB,MAAM,OAAO;AAAA,IAClC;AAAA,IAEA,CAAC,MAAMA,gBAAiB,eAAe,EAAE,GAAG;AAAA,MAC1C,aAAa;AAAA,IACf;AAAA,IAEA,CAAC,MAAMA,gBAAiB,cAAc,EAAE,GAAG;AAAA,MACzC,YAAY;AAAA,IACd;AAAA,IAEA,CAAC,MAAMC,gBAAmB,IAAI,EAAE,GAAG;AAAA,MACjC,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,MAC7C,SAAS,MAAM,QAAQ,MAAM,IAAI;AAAA,IACnC;AAAA,IAEA,CAAC,MAAMC,gBAAkB,IAAI,EAAE,GAAG;AAAA,MAChC,QAAQ;AAAA,MACR,iBAAiB,MAAM,OAAO;AAAA,MAC9B,SAAS,MAAM,MAAM;AAAA,MACrB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC5C;AAAA,IAEA,CAAC,MAAMA,gBAAkB,eAAe,EAAE,GAAG;AAAA,MAC3C,MAAM,MAAM,MAAM;AAAA,IACpB;AAAA,IACA,CAAC,MAAMA,gBAAkB,cAAc,EAAE,GAAG;AAAA,MAC1C,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,UAAU,EAAE,YAAY,EAAE;AAC5B,CAAC;"}
+{"version":3,"file":"TableSection.styles.js","sources":["../../../src/TableSection/TableSection.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { bulkActionsClasses } from \"../BulkActions\";\nimport { paginationClasses } from \"../Pagination\";\nimport { tableCellClasses } from \"../Table/TableCell\";\nimport { tableContainerClasses } from \"../Table/TableContainer\";\nimport { tableHeaderClasses } from \"../Table/TableHeader\";\nimport { tableRowClasses } from \"../Table/TableRow\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableSection\", {\n  root: {},\n  header: {\n    // Only apply the border to divide the header and content when both are displayed\n    \"+ div\": {\n      borderTop: `1px solid ${theme.colors.atmo3}`,\n      borderTopLeftRadius: 0,\n      borderTopRightRadius: 0,\n    },\n  },\n  actions: {},\n  content: {\n    marginTop: 0,\n    padding: 0,\n\n    // Apply border radius to the first child if there's not an header\n    \"&:first-of-type\": {\n      \"& > :first-of-type\": {\n        borderTopLeftRadius: \"inherit\",\n        borderTopRightRadius: \"inherit\",\n      },\n    },\n\n    \"& > :last-child\": {\n      borderBottomLeftRadius: \"inherit\",\n      borderBottomRightRadius: \"inherit\",\n    },\n\n    [`& .${tableContainerClasses.root}`]: {\n      paddingBottom: 0,\n    },\n\n    [`& .${tableHeaderClasses.head}`]: {\n      backgroundColor: theme.colors.atmo2,\n      borderBottomColor: theme.colors.atmo3,\n      [`&.${tableHeaderClasses.variantCheckbox}`]: {\n        borderRight: \"none\",\n      },\n      [`&.${tableHeaderClasses.variantActions}`]: {\n        borderLeft: \"none\",\n      },\n    },\n\n    // Remove border for the last table row\n    [`& .${tableRowClasses.root}`]: {\n      \"&:last-child\": {\n        [`& .${tableCellClasses.root}`]: { borderBottom: \"none\" },\n      },\n    },\n\n    [`& .${tableCellClasses.root}`]: {\n      borderBottomColor: theme.colors.atmo3,\n    },\n\n    [`& .${tableCellClasses.variantCheckbox}`]: {\n      borderRight: \"none\",\n    },\n\n    [`& .${tableCellClasses.variantActions}`]: {\n      borderLeft: \"none\",\n    },\n\n    [`& .${bulkActionsClasses.root}`]: {\n      marginBottom: 0,\n      border: \"none\",\n      borderBottom: `1px solid ${theme.colors.atmo3}`,\n      padding: theme.spacing(\"xs\", \"sm\"),\n    },\n\n    [`& .${paginationClasses.root}`]: {\n      margin: 0,\n      backgroundColor: theme.colors.atmo2,\n      padding: theme.space.xs,\n      borderTop: `1px solid ${theme.colors.atmo3}`,\n    },\n\n    [`& .${paginationClasses.pageSizeOptions}`]: {\n      left: theme.space.sm,\n    },\n    [`& .${paginationClasses.pageSizeHeader}`]: {\n      border: \"none\",\n      \"&:hover\": {\n        border: \"none\",\n      },\n    },\n  },\n  hidden: {},\n  raisedHeader: {\n    \"& $content\": {\n      paddingTop: 0,\n    },\n  },\n  hasHeader: {},\n  /** @deprecated use `hasHeader` instead */\n  spaceTop: {},\n});\n"],"names":["tableContainerClasses","tableHeaderClasses","tableRowClasses","tableCellClasses","bulkActionsClasses","paginationClasses"],"mappings":";;;;;;;;;;;;;;AAUO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA;AAAA,IAEN,SAAS;AAAA,MACP,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,MAC1C,qBAAqB;AAAA,MACrB,sBAAsB;AAAA,IACxB;AAAA,EACF;AAAA,EACA,SAAS,CAAC;AAAA,EACV,SAAS;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA;AAAA,IAGT,mBAAmB;AAAA,MACjB,sBAAsB;AAAA,QACpB,qBAAqB;AAAA,QACrB,sBAAsB;AAAA,MACxB;AAAA,IACF;AAAA,IAEA,mBAAmB;AAAA,MACjB,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAC3B;AAAA,IAEA,CAAC,MAAMA,gBAAsB,IAAI,EAAE,GAAG;AAAA,MACpC,eAAe;AAAA,IACjB;AAAA,IAEA,CAAC,MAAMC,gBAAmB,IAAI,EAAE,GAAG;AAAA,MACjC,iBAAiB,MAAM,OAAO;AAAA,MAC9B,mBAAmB,MAAM,OAAO;AAAA,MAChC,CAAC,KAAKA,gBAAmB,eAAe,EAAE,GAAG;AAAA,QAC3C,aAAa;AAAA,MACf;AAAA,MACA,CAAC,KAAKA,gBAAmB,cAAc,EAAE,GAAG;AAAA,QAC1C,YAAY;AAAA,MACd;AAAA,IACF;AAAA;AAAA,IAGA,CAAC,MAAMC,gBAAgB,IAAI,EAAE,GAAG;AAAA,MAC9B,gBAAgB;AAAA,QACd,CAAC,MAAMC,gBAAiB,IAAI,EAAE,GAAG,EAAE,cAAc,OAAO;AAAA,MAC1D;AAAA,IACF;AAAA,IAEA,CAAC,MAAMA,gBAAiB,IAAI,EAAE,GAAG;AAAA,MAC/B,mBAAmB,MAAM,OAAO;AAAA,IAClC;AAAA,IAEA,CAAC,MAAMA,gBAAiB,eAAe,EAAE,GAAG;AAAA,MAC1C,aAAa;AAAA,IACf;AAAA,IAEA,CAAC,MAAMA,gBAAiB,cAAc,EAAE,GAAG;AAAA,MACzC,YAAY;AAAA,IACd;AAAA,IAEA,CAAC,MAAMC,gBAAmB,IAAI,EAAE,GAAG;AAAA,MACjC,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,MAC7C,SAAS,MAAM,QAAQ,MAAM,IAAI;AAAA,IACnC;AAAA,IAEA,CAAC,MAAMC,gBAAkB,IAAI,EAAE,GAAG;AAAA,MAChC,QAAQ;AAAA,MACR,iBAAiB,MAAM,OAAO;AAAA,MAC9B,SAAS,MAAM,MAAM;AAAA,MACrB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC5C;AAAA,IAEA,CAAC,MAAMA,gBAAkB,eAAe,EAAE,GAAG;AAAA,MAC3C,MAAM,MAAM,MAAM;AAAA,IACpB;AAAA,IACA,CAAC,MAAMA,gBAAkB,cAAc,EAAE,GAAG;AAAA,MAC1C,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,cAAc;AAAA,IACZ,cAAc;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,WAAW,CAAC;AAAA;AAAA,EAEZ,UAAU,CAAC;AACb,CAAC;"}