@hitachivantara/uikit-react-core 5.80.0 → 5.80.2

package/dist/esm/FilterGroup/FilterContent/FilterContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.js","sources":["../../../../src/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo, useRef, useState } from \"react\";\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionBar } from \"../../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../../BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"../../Button\";\nimport { HvFormStatus } from \"../../Forms\";\nimport { HvTypography } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport type { HvFilterGroupLabels } from \"../FilterGroup\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\nimport { HvFilterGroupHorizontalPlacement, HvFilterGroupValue } from \"../types\";\nimport { staticClasses, useClasses } from \"./FilterContent.styles\";\n\nexport { staticClasses as filterGroupContentClasses };\n\nexport type HvFilterGroupContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupContentProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  description?: React.ReactNode;\n  status?: HvFormStatus;\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue,\n  ) => void;\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  labels?: HvFilterGroupLabels;\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  disablePortal?: boolean;\n  escapeWithReference?: boolean;\n  height?: string | number;\n  leftEmptyElement?: React.ReactNode;\n  rightEmptyElement?: React.ReactNode;\n  disabled?: boolean;\n  classes?: HvFilterGroupContentClasses;\n}\n\nexport const HvFilterGroupContent = forwardRef<\n  HTMLDivElement,\n  HvFilterGroupContentProps\n>((props, ref) => {\n  const {\n    id,\n    status,\n    disabled = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onCancel,\n    onClear,\n    labels,\n    horizontalPlacement = \"right\",\n    disablePortal = true,\n    escapeWithReference = true,\n    height,\n    leftEmptyElement,\n    rightEmptyElement,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvFilterGroupContent\", props);\n\n  const { classes } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const [filterGroupOpen, setFilterGroupOpen] = useState<boolean>(false);\n\n  const {\n    defaultValue,\n    filterValues,\n    rollbackFilters,\n    clearFilters,\n    applyFilters,\n    applyDisabled,\n  } = useContext(HvFilterGroupContext);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const onApplyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    applyFilters();\n    onChange?.(event, filterValues);\n    setFilterGroupOpen(false);\n  };\n\n  const onCancelHandler = (\n    event: React.MouseEvent<HTMLButtonElement> | Event,\n  ) => {\n    rollbackFilters();\n    onCancel?.(event);\n    setFilterGroupOpen(false);\n  };\n\n  const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    clearFilters();\n    onClear?.(event);\n  };\n\n  const handleToggle = (event: Event, open: boolean) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (event === null) return;\n    setFilterGroupOpen(open);\n    if (!open) onCancelHandler?.(event);\n  };\n\n  const Header = useMemo(\n    () => (\n      <>\n        <Filters />\n        <HvTypography variant=\"label\">{labels?.placeholder}</HvTypography>\n      </>\n    ),\n    [labels?.placeholder],\n  );\n\n  return (\n    <HvBaseDropdown\n      ref={ref}\n      id={setId(id, \"dropdown\")}\n      role=\"combobox\"\n      classes={{\n        root: classes.dropdown,\n        panel: classes.panel,\n        selection: classes.baseDropdownSelection,\n        header: classes.header,\n      }}\n      disabled={disabled}\n      disablePortal={disablePortal}\n      variableWidth\n      placement={horizontalPlacement}\n      expanded={filterGroupOpen}\n      onToggle={handleToggle}\n      onClickOutside={onCancelHandler}\n      onContainerCreation={focusOnContainer}\n      placeholder={Header}\n      adornment={<HvFilterGroupCounter />}\n      popperProps={{\n        modifiers: [{ name: \"preventOverflow\", enabled: escapeWithReference }],\n      }}\n      aria-haspopup=\"dialog\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-invalid={status === \"invalid\" ? true : undefined}\n      aria-errormessage={status === \"invalid\" ? setId(id, \"error\") : undefined}\n      aria-describedby={\n        [description && setId(id, \"description\"), ariaDescribedBy]\n          .join(\" \")\n          .trim() || undefined\n      }\n      {...others}\n    >\n      <div ref={focusTarget} tabIndex={-1} />\n      <div className={classes.root} style={{ height }}>\n        <HvFilterGroupLeftPanel\n          id={id}\n          className={classes.leftSidePanel}\n          emptyElement={leftEmptyElement}\n        />\n        <HvFilterGroupRightPanel\n          id={id}\n          className={classes.rightSidePanel}\n          emptyElement={rightEmptyElement}\n          labels={labels}\n        />\n      </div>\n      <HvActionBar className={classes.actionBar}>\n        <HvButton\n          id={setId(id, \"clearFilters-button\")}\n          disabled={\n            defaultValue\n              ? defaultValue?.flat().length === filterValues?.flat().length\n              : filterValues?.flat().length === 0\n          }\n          variant=\"secondaryGhost\"\n          onClick={onClearHandler}\n        >\n          {labels?.clearLabel}\n        </HvButton>\n        <div aria-hidden=\"true\" className={classes.space}>\n          &nbsp;\n        </div>\n        <HvButton\n          id={setId(id, \"apply-button\")}\n          disabled={applyDisabled}\n          variant={\n            activeTheme?.filterGroup.applyButtonVariant as HvButtonVariant\n          }\n          onClick={onApplyHandler}\n          className={classes.applyButton}\n        >\n          {labels?.applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"cancel-button\")}\n          variant={\n            activeTheme?.filterGroup.cancelButtonVariant as HvButtonVariant\n          }\n          onClick={onCancelHandler}\n        >\n          {labels?.cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    </HvBaseDropdown>\n  );\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FilterContent.js","sources":["../../../../src/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo, useRef, useState } from \"react\";\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionBar } from \"../../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../../BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"../../Button\";\nimport { HvFormStatus } from \"../../Forms\";\nimport { HvTypography } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport type { HvFilterGroupLabels } from \"../FilterGroup\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\nimport { HvFilterGroupHorizontalPlacement, HvFilterGroupValue } from \"../types\";\nimport { staticClasses, useClasses } from \"./FilterContent.styles\";\n\nexport { staticClasses as filterGroupContentClasses };\n\nexport type HvFilterGroupContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupContentProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  description?: React.ReactNode;\n  status?: HvFormStatus;\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue,\n  ) => void;\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  labels?: HvFilterGroupLabels;\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  disablePortal?: boolean;\n  escapeWithReference?: boolean;\n  height?: string | number;\n  leftEmptyElement?: React.ReactNode;\n  rightEmptyElement?: React.ReactNode;\n  disabled?: boolean;\n  classes?: HvFilterGroupContentClasses;\n}\n\nexport const HvFilterGroupContent = forwardRef<\n  HTMLDivElement,\n  HvFilterGroupContentProps\n>(function HvFilterGroupContent(props, ref) {\n  const {\n    id,\n    status,\n    disabled = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onCancel,\n    onClear,\n    labels,\n    horizontalPlacement = \"right\",\n    disablePortal = true,\n    escapeWithReference = true,\n    height,\n    leftEmptyElement,\n    rightEmptyElement,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvFilterGroupContent\", props);\n\n  const { classes } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const [filterGroupOpen, setFilterGroupOpen] = useState<boolean>(false);\n\n  const {\n    defaultValue,\n    filterValues,\n    rollbackFilters,\n    clearFilters,\n    applyFilters,\n    applyDisabled,\n  } = useContext(HvFilterGroupContext);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const onApplyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    applyFilters();\n    onChange?.(event, filterValues);\n    setFilterGroupOpen(false);\n  };\n\n  const onCancelHandler = (\n    event: React.MouseEvent<HTMLButtonElement> | Event,\n  ) => {\n    rollbackFilters();\n    onCancel?.(event);\n    setFilterGroupOpen(false);\n  };\n\n  const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    clearFilters();\n    onClear?.(event);\n  };\n\n  const handleToggle = (event: Event, open: boolean) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (event === null) return;\n    setFilterGroupOpen(open);\n    if (!open) onCancelHandler?.(event);\n  };\n\n  const Header = useMemo(\n    () => (\n      <>\n        <Filters />\n        <HvTypography variant=\"label\">{labels?.placeholder}</HvTypography>\n      </>\n    ),\n    [labels?.placeholder],\n  );\n\n  return (\n    <HvBaseDropdown\n      ref={ref}\n      id={setId(id, \"dropdown\")}\n      role=\"combobox\"\n      classes={{\n        root: classes.dropdown,\n        panel: classes.panel,\n        selection: classes.baseDropdownSelection,\n        header: classes.header,\n      }}\n      disabled={disabled}\n      disablePortal={disablePortal}\n      variableWidth\n      placement={horizontalPlacement}\n      expanded={filterGroupOpen}\n      onToggle={handleToggle}\n      onClickOutside={onCancelHandler}\n      onContainerCreation={focusOnContainer}\n      placeholder={Header}\n      adornment={<HvFilterGroupCounter />}\n      popperProps={{\n        modifiers: [{ name: \"preventOverflow\", enabled: escapeWithReference }],\n      }}\n      aria-haspopup=\"dialog\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-invalid={status === \"invalid\" ? true : undefined}\n      aria-errormessage={status === \"invalid\" ? setId(id, \"error\") : undefined}\n      aria-describedby={\n        [description && setId(id, \"description\"), ariaDescribedBy]\n          .join(\" \")\n          .trim() || undefined\n      }\n      {...others}\n    >\n      <div ref={focusTarget} tabIndex={-1} />\n      <div className={classes.root} style={{ height }}>\n        <HvFilterGroupLeftPanel\n          id={id}\n          className={classes.leftSidePanel}\n          emptyElement={leftEmptyElement}\n        />\n        <HvFilterGroupRightPanel\n          id={id}\n          className={classes.rightSidePanel}\n          emptyElement={rightEmptyElement}\n          labels={labels}\n        />\n      </div>\n      <HvActionBar className={classes.actionBar}>\n        <HvButton\n          id={setId(id, \"clearFilters-button\")}\n          disabled={\n            defaultValue\n              ? defaultValue?.flat().length === filterValues?.flat().length\n              : filterValues?.flat().length === 0\n          }\n          variant=\"secondaryGhost\"\n          onClick={onClearHandler}\n        >\n          {labels?.clearLabel}\n        </HvButton>\n        <div aria-hidden=\"true\" className={classes.space}>\n          &nbsp;\n        </div>\n        <HvButton\n          id={setId(id, \"apply-button\")}\n          disabled={applyDisabled}\n          variant={\n            activeTheme?.filterGroup.applyButtonVariant as HvButtonVariant\n          }\n          onClick={onApplyHandler}\n          className={classes.applyButton}\n        >\n          {labels?.applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"cancel-button\")}\n          variant={\n            activeTheme?.filterGroup.cancelButtonVariant as HvButtonVariant\n          }\n          onClick={onCancelHandler}\n        >\n          {labels?.cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    </HvBaseDropdown>\n  );\n});\n"],"names":["HvFilterGroupContent"],"mappings":"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"}

package/dist/esm/FilterGroup/FilterGroup.js

@@ -30,7 +30,7 @@ const DEFAULT_LABELS = {
   multiSelectionConjunction: "/"
 };
 const HvFilterGroup = forwardRef(
-  (props, ref) => {
+  function HvFilterGroup2(props, ref) {
     const {
       className,
       id,

package/dist/esm/FilterGroup/FilterGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterGroup.js","sources":["../../../src/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { staticClasses, useClasses } from \"./FilterGroup.styles\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport {\n  HvFilterGroupFilters,\n  HvFilterGroupHorizontalPlacement,\n  HvFilterGroupValue,\n} from \"./types\";\n\nexport { staticClasses as filterGroupClasses };\n\nexport type HvFilterGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\n  name?: string;\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. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue,\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS = {\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Clear button label. */\n  clearLabel: \"Clear Filters\",\n  /** Placeholder label. */\n  placeholder: \"Filters\",\n  /** SearchBox placeholder label. */\n  searchBoxPlaceholder: \"Search\",\n  /** Select All placeholder label. */\n  selectAll: \"All\",\n  /** Multi selection conjunction placeholder label. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvFilterGroupLabels = Partial<typeof DEFAULT_LABELS>;\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = forwardRef<HTMLDivElement, HvFilterGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      id,\n      name,\n      required = false,\n      disabled = false,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      labels: labelsProp,\n      defaultValue,\n      value,\n      filters,\n      horizontalPlacement = \"right\",\n      disablePortal = true,\n      escapeWithReference = true,\n      height = 350,\n      filterContentProps,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvFilterGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const hasLabel = label != null;\n\n    const hasDescription = description != null;\n\n    // Error message area will only be needed if the status is being controlled\n    // or if required is true\n    const canShowError = status !== undefined || required;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={value}\n        status={status}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvFilterGroupProvider\n          defaultValue={defaultValue}\n          value={value}\n          filters={filters}\n        >\n          <HvFilterGroupContent\n            ref={ref}\n            id={elementId}\n            disabled={disabled}\n            disablePortal={disablePortal}\n            variableWidth\n            placement={horizontalPlacement}\n            escapeWithReference={escapeWithReference}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            status={status}\n            onChange={onChange}\n            onCancel={onCancel}\n            onClear={onClear}\n            labels={labels}\n            height={height}\n            {...filterContentProps}\n          />\n          {canShowError && (\n            <HvWarningText\n              id={setId(elementId, \"error\")}\n              disableBorder\n              className={classes.error}\n            >\n              {validationMessage}\n            </HvWarningText>\n          )}\n        </HvFilterGroupProvider>\n      </HvFormElement>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkGA,MAAM,iBAAiB;AAAA;AAAA,EAErB,YAAY;AAAA;AAAA,EAEZ,aAAa;AAAA;AAAA,EAEb,YAAY;AAAA;AAAA,EAEZ,aAAa;AAAA;AAAA,EAEb,sBAAsB;AAAA;AAAA,EAEtB,WAAW;AAAA;AAAA,EAEX,2BAA2B;AAC7B;AASO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB;AAAA,MACA,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,MACtB,SAAS;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAC9C,UAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AAE7D,UAAA,YAAY,YAAY,EAAE;AAE1B,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,UAAM,WAAW,SAAS;AAE1B,UAAM,iBAAiB,eAAe;AAIhC,UAAA,eAAe,WAAW,UAAa;AAG3C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,QAEF,UAAA;AAAA,WAAA,YAAY,mBACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA;AAAA,YACC,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,WAAW,OAAO;AAAA,gBAC5B,SAAS,MAAM,WAAW,OAAO;AAAA,gBACjC;AAAA,gBACA,WAAW,QAAQ;AAAA,cAAA;AAAA,YACrB;AAAA,YAGD,kBACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,WAAW,aAAa;AAAA,gBAClC,WAAW,QAAQ;AAAA,gBAElB,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA,GAEJ;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC;AAAA,oBACA,IAAI;AAAA,oBACJ;AAAA,oBACA;AAAA,oBACA,eAAa;AAAA,oBACb,WAAW;AAAA,oBACX;AAAA,oBACA,cAAY;AAAA,oBACZ,mBAAiB;AAAA,oBACjB;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACC,GAAG;AAAA,kBAAA;AAAA,gBACN;AAAA,gBACC,gBACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,MAAM,WAAW,OAAO;AAAA,oBAC5B,eAAa;AAAA,oBACb,WAAW,QAAQ;AAAA,oBAElB,UAAA;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"FilterGroup.js","sources":["../../../src/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { staticClasses, useClasses } from \"./FilterGroup.styles\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport {\n  HvFilterGroupFilters,\n  HvFilterGroupHorizontalPlacement,\n  HvFilterGroupValue,\n} from \"./types\";\n\nexport { staticClasses as filterGroupClasses };\n\nexport type HvFilterGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\n  name?: string;\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. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue,\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS = {\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Clear button label. */\n  clearLabel: \"Clear Filters\",\n  /** Placeholder label. */\n  placeholder: \"Filters\",\n  /** SearchBox placeholder label. */\n  searchBoxPlaceholder: \"Search\",\n  /** Select All placeholder label. */\n  selectAll: \"All\",\n  /** Multi selection conjunction placeholder label. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvFilterGroupLabels = Partial<typeof DEFAULT_LABELS>;\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = forwardRef<HTMLDivElement, HvFilterGroupProps>(\n  function HvFilterGroup(props, ref) {\n    const {\n      className,\n      id,\n      name,\n      required = false,\n      disabled = false,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      labels: labelsProp,\n      defaultValue,\n      value,\n      filters,\n      horizontalPlacement = \"right\",\n      disablePortal = true,\n      escapeWithReference = true,\n      height = 350,\n      filterContentProps,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvFilterGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const hasLabel = label != null;\n\n    const hasDescription = description != null;\n\n    // Error message area will only be needed if the status is being controlled\n    // or if required is true\n    const canShowError = status !== undefined || required;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={value}\n        status={status}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvFilterGroupProvider\n          defaultValue={defaultValue}\n          value={value}\n          filters={filters}\n        >\n          <HvFilterGroupContent\n            ref={ref}\n            id={elementId}\n            disabled={disabled}\n            disablePortal={disablePortal}\n            variableWidth\n            placement={horizontalPlacement}\n            escapeWithReference={escapeWithReference}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            status={status}\n            onChange={onChange}\n            onCancel={onCancel}\n            onClear={onClear}\n            labels={labels}\n            height={height}\n            {...filterContentProps}\n          />\n          {canShowError && (\n            <HvWarningText\n              id={setId(elementId, \"error\")}\n              disableBorder\n              className={classes.error}\n            >\n              {validationMessage}\n            </HvWarningText>\n          )}\n        </HvFilterGroupProvider>\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvFilterGroup"],"mappings":";;;;;;;;;;;;;;;AAkGA,MAAM,iBAAiB;AAAA;AAAA,EAErB,YAAY;AAAA;AAAA,EAEZ,aAAa;AAAA;AAAA,EAEb,YAAY;AAAA;AAAA,EAEZ,aAAa;AAAA;AAAA,EAEb,sBAAsB;AAAA;AAAA,EAEtB,WAAW;AAAA;AAAA,EAEX,2BAA2B;AAC7B;AASO,MAAM,gBAAgB;AAAA,EAC3B,SAASA,eAAc,OAAO,KAAK;AAC3B,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB;AAAA,MACA,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,MACtB,SAAS;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAC9C,UAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AAE7D,UAAA,YAAY,YAAY,EAAE;AAE1B,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,UAAM,WAAW,SAAS;AAE1B,UAAM,iBAAiB,eAAe;AAIhC,UAAA,eAAe,WAAW,UAAa;AAG3C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,QAEF,UAAA;AAAA,WAAA,YAAY,mBACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA;AAAA,YACC,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,WAAW,OAAO;AAAA,gBAC5B,SAAS,MAAM,WAAW,OAAO;AAAA,gBACjC;AAAA,gBACA,WAAW,QAAQ;AAAA,cAAA;AAAA,YACrB;AAAA,YAGD,kBACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,WAAW,aAAa;AAAA,gBAClC,WAAW,QAAQ;AAAA,gBAElB,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA,GAEJ;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC;AAAA,oBACA,IAAI;AAAA,oBACJ;AAAA,oBACA;AAAA,oBACA,eAAa;AAAA,oBACb,WAAW;AAAA,oBACX;AAAA,oBACA,cAAY;AAAA,oBACZ,mBAAiB;AAAA,oBACjB;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACC,GAAG;AAAA,kBAAA;AAAA,gBACN;AAAA,gBACC,gBACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,MAAM,WAAW,OAAO;AAAA,oBAC5B,eAAa;AAAA,oBACb,WAAW,QAAQ;AAAA,oBAElB,UAAA;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/esm/Footer/Footer.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Footer.styles.js";
 import { staticClasses } from "./Footer.styles.js";
 import { HvTypography } from "../Typography/Typography.js";
-const HvFooter = (props) => {
+const HvFooter = forwardRef(function HvFooter2(props, ref) {
   const {
     name = "Hitachi Vantara",
     copyright = `© Hitachi Vantara LLC ${(/* @__PURE__ */ new Date()).getFullYear()}. All Rights Reserved.`,
@@ -20,6 +21,7 @@ const HvFooter = (props) => {
   return /* @__PURE__ */ jsxs(
     "footer",
     {
+      ref,
       className: cx(classes.root, { [classes.small]: isSmDown }, className),
       ...others,
       children: [
@@ -32,7 +34,7 @@ const HvFooter = (props) => {
       ]
     }
   );
-};
+});
 export {
   HvFooter,
   staticClasses as footerClasses

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Suggestions.js","sources":["../../../../src/Forms/Suggestions/Suggestions.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from \"@mui/base/ClickAwayListener\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useTheme, type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvSelectionList } from \"../../SelectionList\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { getContainerElement } from \"../../utils/document\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./Suggestions.styles\";\n\nexport { staticClasses as suggestionsClasses };\n\nexport type HvSuggestionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSuggestion {\n  id?: string;\n  label: React.ReactNode;\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n  /** Whether suggestions is visible */\n  open?: boolean;\n  /**\n   * Whether suggestions is visible.\n   * @deprecated use `open` instead.\n   * */\n  expanded?: boolean;\n  /** The HTML element Suggestions attaches to. */\n  anchorEl?: HTMLElement | null;\n  /** Array of { id, label, ...others } values to display in the suggestion list */\n  suggestionValues?: HvSuggestion[] | null;\n  /** Function called when a suggestion is selected */\n  onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n  /** Function called when suggestion list is closed */\n  onClose?: ClickAwayListenerProps[\"onClickAway\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSuggestionsClasses;\n  /**\n   * If enabled, the suggestions list will be rendered using a portal.\n   * If disabled, it will be under the DOM hierarchy of the parent component.\n   * @default false\n   * */\n  enablePortal?: boolean;\n}\n\nexport const HvSuggestions = forwardRef((props: HvSuggestionsProps, extRef) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    expanded = false,\n    enablePortal = false,\n    open: openProp,\n    anchorEl,\n    suggestionValues = [],\n    onClose,\n    onSuggestionSelected,\n    ...others\n  } = props;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const { elementId } = useContext(HvFormElementContext);\n  const localId = id ?? setId(elementId, \"suggestions\");\n\n  const ref = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, extRef);\n\n  // TODO: remove controlled+uncontrolled `expanded` prop in v6\n  const [isOpen, setIsOpen] = useState(expanded);\n  useEffect(() => {\n    setIsOpen(expanded);\n  }, [expanded]);\n\n  return (\n    <div\n      id={localId}\n      ref={forkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <ClickAwayListener\n        onClickAway={(event) => {\n          setIsOpen(false);\n          onClose?.(event);\n        }}\n      >\n        <Popper\n          style={{\n            // @ts-ignore\n            \"--popper-width\": enablePortal\n              ? `${anchorEl?.clientWidth}px`\n              : \"100%\",\n          }}\n          open={openProp ?? isOpen}\n          disablePortal={!enablePortal}\n          container={enablePortal ? getContainerElement(rootId) : undefined}\n          anchorEl={anchorEl}\n          className={cx(classes.popper, {\n            [classes.portal]: enablePortal,\n          })}\n        >\n          <HvSelectionList\n            className={classes.list}\n            id={setId(localId, \"list\")}\n            onChange={onSuggestionSelected}\n          >\n            {suggestionValues?.map((item) => (\n              <HvListItem key={item.id} value={item} disabled={item.disabled}>\n                {item.label}\n              </HvListItem>\n            ))}\n          </HvSelectionList>\n        </Popper>\n      </ClickAwayListener>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsDO,MAAM,gBAAgB,WAAW,CAAC,OAA2B,WAAW;AACvE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AAEJ,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,EAAE,WAAW;AAEnB,QAAM,EAAE,UAAA,IAAc,WAAW,oBAAoB;AACrD,QAAM,UAAU,MAAM,MAAM,WAAW,aAAa;AAE9C,QAAA,MAAM,OAAuB,IAAI;AACjC,QAAA,YAAY,WAAW,KAAK,MAAM;AAGxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,QAAQ;AAC7C,YAAU,MAAM;AACd,cAAU,QAAQ;AAAA,EAAA,GACjB,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAa,CAAC,UAAU;AACtB,sBAAU,KAAK;AACf,sBAAU,KAAK;AAAA,UACjB;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA;AAAA,gBAEL,kBAAkB,eACd,GAAG,UAAU,WAAW,OACxB;AAAA,cACN;AAAA,cACA,MAAM,YAAY;AAAA,cAClB,eAAe,CAAC;AAAA,cAChB,WAAW,eAAe,oBAAoB,MAAM,IAAI;AAAA,cACxD;AAAA,cACA,WAAW,GAAG,QAAQ,QAAQ;AAAA,gBAC5B,CAAC,QAAQ,MAAM,GAAG;AAAA,cAAA,CACnB;AAAA,cAED,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,QAAQ;AAAA,kBACnB,IAAI,MAAM,SAAS,MAAM;AAAA,kBACzB,UAAU;AAAA,kBAET,UAAkB,kBAAA,IAAI,CAAC,6BACrB,YAAyB,EAAA,OAAO,MAAM,UAAU,KAAK,UACnD,UAAA,KAAK,SADS,KAAK,EAEtB,CACD;AAAA,gBAAA;AAAA,cACH;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"Suggestions.js","sources":["../../../../src/Forms/Suggestions/Suggestions.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from \"@mui/base/ClickAwayListener\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useTheme, type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvSelectionList } from \"../../SelectionList\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { getContainerElement } from \"../../utils/document\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./Suggestions.styles\";\n\nexport { staticClasses as suggestionsClasses };\n\nexport type HvSuggestionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSuggestion {\n  id?: string;\n  label: React.ReactNode;\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n  /** Whether suggestions is visible */\n  open?: boolean;\n  /**\n   * Whether suggestions is visible.\n   * @deprecated use `open` instead.\n   * */\n  expanded?: boolean;\n  /** The HTML element Suggestions attaches to. */\n  anchorEl?: HTMLElement | null;\n  /** Array of { id, label, ...others } values to display in the suggestion list */\n  suggestionValues?: HvSuggestion[] | null;\n  /** Function called when a suggestion is selected */\n  onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n  /** Function called when suggestion list is closed */\n  onClose?: ClickAwayListenerProps[\"onClickAway\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSuggestionsClasses;\n  /**\n   * If enabled, the suggestions list will be rendered using a portal.\n   * If disabled, it will be under the DOM hierarchy of the parent component.\n   * @default false\n   * */\n  enablePortal?: boolean;\n}\n\nexport const HvSuggestions = forwardRef<\n  // no-indent\n  unknown,\n  HvSuggestionsProps\n>((props, extRef) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    expanded = false,\n    enablePortal = false,\n    open: openProp,\n    anchorEl,\n    suggestionValues = [],\n    onClose,\n    onSuggestionSelected,\n    ...others\n  } = props;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const { elementId } = useContext(HvFormElementContext);\n  const localId = id ?? setId(elementId, \"suggestions\");\n\n  const ref = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, extRef);\n\n  // TODO: remove controlled+uncontrolled `expanded` prop in v6\n  const [isOpen, setIsOpen] = useState(expanded);\n  useEffect(() => {\n    setIsOpen(expanded);\n  }, [expanded]);\n\n  return (\n    <div\n      id={localId}\n      ref={forkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <ClickAwayListener\n        onClickAway={(event) => {\n          setIsOpen(false);\n          onClose?.(event);\n        }}\n      >\n        <Popper\n          style={{\n            // @ts-ignore\n            \"--popper-width\": enablePortal\n              ? `${anchorEl?.clientWidth}px`\n              : \"100%\",\n          }}\n          open={openProp ?? isOpen}\n          disablePortal={!enablePortal}\n          container={enablePortal ? getContainerElement(rootId) : undefined}\n          anchorEl={anchorEl}\n          className={cx(classes.popper, {\n            [classes.portal]: enablePortal,\n          })}\n        >\n          <HvSelectionList\n            className={classes.list}\n            id={setId(localId, \"list\")}\n            onChange={onSuggestionSelected}\n          >\n            {suggestionValues?.map((item) => (\n              <HvListItem key={item.id} value={item} disabled={item.disabled}>\n                {item.label}\n              </HvListItem>\n            ))}\n          </HvSelectionList>\n        </Popper>\n      </ClickAwayListener>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsDO,MAAM,gBAAgB,WAI3B,CAAC,OAAO,WAAW;AACb,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AAEJ,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,EAAE,WAAW;AAEnB,QAAM,EAAE,UAAA,IAAc,WAAW,oBAAoB;AACrD,QAAM,UAAU,MAAM,MAAM,WAAW,aAAa;AAE9C,QAAA,MAAM,OAAuB,IAAI;AACjC,QAAA,YAAY,WAAW,KAAK,MAAM;AAGxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,QAAQ;AAC7C,YAAU,MAAM;AACd,cAAU,QAAQ;AAAA,EAAA,GACjB,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAa,CAAC,UAAU;AACtB,sBAAU,KAAK;AACf,sBAAU,KAAK;AAAA,UACjB;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA;AAAA,gBAEL,kBAAkB,eACd,GAAG,UAAU,WAAW,OACxB;AAAA,cACN;AAAA,cACA,MAAM,YAAY;AAAA,cAClB,eAAe,CAAC;AAAA,cAChB,WAAW,eAAe,oBAAoB,MAAM,IAAI;AAAA,cACxD;AAAA,cACA,WAAW,GAAG,QAAQ,QAAQ;AAAA,gBAC5B,CAAC,QAAQ,MAAM,GAAG;AAAA,cAAA,CACnB;AAAA,cAED,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,QAAQ;AAAA,kBACnB,IAAI,MAAM,SAAS,MAAM;AAAA,kBACzB,UAAU;AAAA,kBAET,UAAkB,kBAAA,IAAI,CAAC,6BACrB,YAAyB,EAAA,OAAO,MAAM,UAAU,KAAK,UACnD,UAAA,KAAK,SADS,KAAK,EAEtB,CACD;AAAA,gBAAA;AAAA,cACH;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/esm/GlobalActions/GlobalActions.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses, getBreakpointStyles } from "./GlobalActions.styles.js";
 import { staticClasses } from "./GlobalActions.styles.js";
 import { HvTypography } from "../Typography/Typography.js";
-const HvGlobalActions = (props) => {
+const HvGlobalActions = forwardRef(function HvGlobalActions2(props, ref) {
   const {
     children,
     classes: classesProp,
@@ -26,6 +27,7 @@ const HvGlobalActions = (props) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref,
       className: cx(
         classes.root,
         {
@@ -64,7 +66,7 @@ const HvGlobalActions = (props) => {
       )
     }
   );
-};
+});
 export {
   HvGlobalActions,
   staticClasses as globalActionsClasses

package/dist/esm/GlobalActions/GlobalActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalActions.js","sources":["../../../src/GlobalActions/GlobalActions.tsx"],"sourcesContent":["import { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport {\n  getBreakpointStyles,\n  staticClasses,\n  useClasses,\n} from \"./GlobalActions.styles\";\n\nexport { staticClasses as globalActionsClasses };\nexport type HvGlobalActionsClasses = ExtractNames<typeof useClasses>;\n\nexport type HvGlobalActionsVariant = \"global\" | \"section\";\nexport type HvGlobalActionsPosition = \"sticky\" | \"fixed\" | \"relative\";\nexport type HvGlobalActionsHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface HvGlobalActionsProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title?: React.ReactNode;\n  /** Denotes if this is a global or section component. */\n  variant?: HvGlobalActionsVariant;\n  /** User can pass in a fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\n  /** Heading Level to apply to Title Area. */\n  headingLevel?: HvGlobalActionsHeadingLevel;\n  /**\n   * Position of the Global Actions.\n   * @default variant === \"global\" ? \"sticky\" : \"relative\"\n   */\n  position?: HvGlobalActionsPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGlobalActionsClasses;\n}\n\n/**\n * Global Actions are actions that affect the entire page they live in.\n * They should persist while scrolling down the screen.\n */\nexport const HvGlobalActions = (props: HvGlobalActionsProps) => {\n  const {\n    children,\n    classes: classesProp,\n    className,\n    title,\n    variant = \"global\",\n    backButton,\n    headingLevel,\n    position: positionProp,\n    ...others\n  } = useDefaultProps(\"HvGlobalActions\", props);\n  const muiTheme = useMuiTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const isUpMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const headingLevelToApply = headingLevel || (variant === \"global\" ? 1 : 2);\n\n  const position =\n    positionProp || (variant === \"global\" ? \"sticky\" : \"relative\");\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.global]: variant === \"global\",\n          [classes.section]: variant === \"section\",\n        },\n        position === \"fixed\" && css(getBreakpointStyles(isUpMd, isSmDown)),\n        className,\n      )}\n      {...others}\n    >\n      <div\n        className={cx(classes.wrapper, {\n          [classes.globalWrapperComplement]: variant === \"global\",\n          [classes.globalSectionArea]: variant === \"section\",\n        })}\n      >\n        {variant === \"global\" && backButton && (\n          <div className={classes.backButton}>{backButton}</div>\n        )}\n        {typeof title !== \"string\" ? (\n          title\n        ) : (\n          <HvTypography\n            variant={variant === \"global\" ? \"title3\" : \"title4\"}\n            component={`h${headingLevelToApply}`}\n            className={cx(classes.name, {\n              [classes.sectionName]: variant !== \"global\",\n            })}\n          >\n            {title}\n          </HvTypography>\n        )}\n        {children && <div className={classes.actions}>{children}</div>}\n      </div>\n    </div>\n  );\n};\n"],"names":["useMuiTheme"],"mappings":";;;;;;;AA6Ca,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAC5C,QAAM,WAAWA;AACjB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AACnD,QAAM,WAAW,cAAc,SAAS,YAAY,KAAK,IAAI,CAAC;AAC9D,QAAM,SAAS,cAAc,SAAS,YAAY,GAAG,IAAI,CAAC;AAE1D,QAAM,sBAAsB,iBAAiB,YAAY,WAAW,IAAI;AAExE,QAAM,WACJ,iBAAiB,YAAY,WAAW,WAAW;AAGnD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,cAAc,GAAG,aAAa;AAAA,UACvC,CAAC,QAAQ,aAAa,GAAG,aAAa;AAAA,UACtC,CAAC,QAAQ,MAAM,GAAG,YAAY;AAAA,UAC9B,CAAC,QAAQ,OAAO,GAAG,YAAY;AAAA,QACjC;AAAA,QACA,aAAa,WAAW,IAAI,oBAAoB,QAAQ,QAAQ,CAAC;AAAA,QACjE;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,SAAS;AAAA,YAC7B,CAAC,QAAQ,uBAAuB,GAAG,YAAY;AAAA,YAC/C,CAAC,QAAQ,iBAAiB,GAAG,YAAY;AAAA,UAAA,CAC1C;AAAA,UAEA,UAAA;AAAA,YAAA,YAAY,YAAY,cACvB,oBAAC,SAAI,WAAW,QAAQ,YAAa,UAAW,WAAA,CAAA;AAAA,YAEjD,OAAO,UAAU,WAChB,QAEA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS,YAAY,WAAW,WAAW;AAAA,gBAC3C,WAAW,IAAI,mBAAmB;AAAA,gBAClC,WAAW,GAAG,QAAQ,MAAM;AAAA,kBAC1B,CAAC,QAAQ,WAAW,GAAG,YAAY;AAAA,gBAAA,CACpC;AAAA,gBAEA,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YAED,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MAC1D;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"GlobalActions.js","sources":["../../../src/GlobalActions/GlobalActions.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport {\n  getBreakpointStyles,\n  staticClasses,\n  useClasses,\n} from \"./GlobalActions.styles\";\n\nexport { staticClasses as globalActionsClasses };\nexport type HvGlobalActionsClasses = ExtractNames<typeof useClasses>;\n\nexport type HvGlobalActionsVariant = \"global\" | \"section\";\nexport type HvGlobalActionsPosition = \"sticky\" | \"fixed\" | \"relative\";\nexport type HvGlobalActionsHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface HvGlobalActionsProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title?: React.ReactNode;\n  /** Denotes if this is a global or section component. */\n  variant?: HvGlobalActionsVariant;\n  /** User can pass in a fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\n  /** Heading Level to apply to Title Area. */\n  headingLevel?: HvGlobalActionsHeadingLevel;\n  /**\n   * Position of the Global Actions.\n   * @default variant === \"global\" ? \"sticky\" : \"relative\"\n   */\n  position?: HvGlobalActionsPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGlobalActionsClasses;\n}\n\n/**\n * Global Actions are actions that affect the entire page they live in.\n * They should persist while scrolling down the screen.\n */\nexport const HvGlobalActions = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvGlobalActionsProps\n>(function HvGlobalActions(props, ref) {\n  const {\n    children,\n    classes: classesProp,\n    className,\n    title,\n    variant = \"global\",\n    backButton,\n    headingLevel,\n    position: positionProp,\n    ...others\n  } = useDefaultProps(\"HvGlobalActions\", props);\n  const muiTheme = useMuiTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const isUpMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const headingLevelToApply = headingLevel || (variant === \"global\" ? 1 : 2);\n\n  const position =\n    positionProp || (variant === \"global\" ? \"sticky\" : \"relative\");\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.global]: variant === \"global\",\n          [classes.section]: variant === \"section\",\n        },\n        position === \"fixed\" && css(getBreakpointStyles(isUpMd, isSmDown)),\n        className,\n      )}\n      {...others}\n    >\n      <div\n        className={cx(classes.wrapper, {\n          [classes.globalWrapperComplement]: variant === \"global\",\n          [classes.globalSectionArea]: variant === \"section\",\n        })}\n      >\n        {variant === \"global\" && backButton && (\n          <div className={classes.backButton}>{backButton}</div>\n        )}\n        {typeof title !== \"string\" ? (\n          title\n        ) : (\n          <HvTypography\n            variant={variant === \"global\" ? \"title3\" : \"title4\"}\n            component={`h${headingLevelToApply}`}\n            className={cx(classes.name, {\n              [classes.sectionName]: variant !== \"global\",\n            })}\n          >\n            {title}\n          </HvTypography>\n        )}\n        {children && <div className={classes.actions}>{children}</div>}\n      </div>\n    </div>\n  );\n});\n"],"names":["HvGlobalActions","useMuiTheme"],"mappings":";;;;;;;;AA8CO,MAAM,kBAAkB,WAG7B,SAASA,iBAAgB,OAAO,KAAK;AAC/B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAC5C,QAAM,WAAWC;AACjB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AACnD,QAAM,WAAW,cAAc,SAAS,YAAY,KAAK,IAAI,CAAC;AAC9D,QAAM,SAAS,cAAc,SAAS,YAAY,GAAG,IAAI,CAAC;AAE1D,QAAM,sBAAsB,iBAAiB,YAAY,WAAW,IAAI;AAExE,QAAM,WACJ,iBAAiB,YAAY,WAAW,WAAW;AAGnD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,cAAc,GAAG,aAAa;AAAA,UACvC,CAAC,QAAQ,aAAa,GAAG,aAAa;AAAA,UACtC,CAAC,QAAQ,MAAM,GAAG,YAAY;AAAA,UAC9B,CAAC,QAAQ,OAAO,GAAG,YAAY;AAAA,QACjC;AAAA,QACA,aAAa,WAAW,IAAI,oBAAoB,QAAQ,QAAQ,CAAC;AAAA,QACjE;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,SAAS;AAAA,YAC7B,CAAC,QAAQ,uBAAuB,GAAG,YAAY;AAAA,YAC/C,CAAC,QAAQ,iBAAiB,GAAG,YAAY;AAAA,UAAA,CAC1C;AAAA,UAEA,UAAA;AAAA,YAAA,YAAY,YAAY,cACvB,oBAAC,SAAI,WAAW,QAAQ,YAAa,UAAW,WAAA,CAAA;AAAA,YAEjD,OAAO,UAAU,WAChB,QAEA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS,YAAY,WAAW,WAAW;AAAA,gBAC3C,WAAW,IAAI,mBAAmB;AAAA,gBAClC,WAAW,GAAG,QAAQ,MAAM;AAAA,kBAC1B,CAAC,QAAQ,WAAW,GAAG,YAAY;AAAA,gBAAA,CACpC;AAAA,gBAEA,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YAED,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MAC1D;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/esm/Grid/Grid.js

@@ -78,7 +78,7 @@ const WidthGrid = forwardRef((props, ref) => {
   ) : {};
   return /* @__PURE__ */ jsx(MuiGrid, { ref, ...containerProps, ...others });
 });
-const HvGrid = forwardRef((props, ref) => {
+const HvGrid = forwardRef(function HvGrid2(props, ref) {
   const {
     item,
     container,

package/dist/esm/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../src/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiGrid, { GridProps as MuiGridProps } from \"@mui/material/Grid\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useWidth } from \"../hooks/useWidth\";\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n  xs: 2,\n  sm: 2,\n  md: 4,\n  lg: 4,\n  xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport type HvGridDirection =\n  | \"row\"\n  | \"row-reverse\"\n  | \"column\"\n  | \"column-reverse\";\n\nexport type HvGridSpacing =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"auto\"\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10;\n\nexport interface HvGridProps extends Omit<MuiGridProps, \"classes\" | \"columns\"> {\n  /**\n   * If `true`, the component will have the flex *container* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  container?: boolean;\n  /**\n   * If `true`, the component will have the flex *item* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  item?: boolean;\n  /**\n   * Defines the space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   */\n  spacing?: HvGridSpacing | number;\n  /**\n   * Defines the vertical space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  rowSpacing?: HvGridSpacing | number;\n  /**\n   * Defines the horizontal space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  columnSpacing?: HvGridSpacing | number;\n  /**\n   * The number of columns.\n   * Defaults to a 12-column grid.\n   * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n   * @default 12\n   */\n  columns?: \"auto\" | MuiGridProps[\"columns\"];\n  /**\n   * Defines the `flex-direction` style property.\n   * It is applied for all screen sizes.\n   */\n  direction?: HvGridDirection;\n  /**\n   * Defines the `justify-content` style property.\n   * It is applied for all screen sizes.\n   */\n  justify?:\n    | \"flex-start\"\n    | \"center\"\n    | \"flex-end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for all the screen sizes with the lowest priority.\n   */\n  xs?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `sm` breakpoint and wider screens if not overridden.\n   */\n  sm?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `md` breakpoint and wider screens if not overridden.\n   */\n  md?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `lg` breakpoint and wider screens if not overridden.\n   */\n  lg?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `xl` breakpoint and wider screens.\n   */\n  xl?: number | boolean;\n  /**\n   * Defines the `flex-wrap` style property.\n   * It's applied for all screen sizes.\n   */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n  /**\n   * If `true`, it sets `min-width: 0` on the item.\n   * Refer to the limitations section of the documentation to better understand the use case.\n   */\n  zeroMinWidth?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n  let gridSpacing: MuiGridProps[\"spacing\"];\n\n  if (typeof spacing === \"string\") {\n    if (spacing === \"auto\") {\n      gridSpacing = BREAKPOINT_GUTTERS;\n    } else {\n      gridSpacing = BREAKPOINT_GUTTERS[spacing];\n    }\n  } else if (typeof spacing === \"object\") {\n    gridSpacing = Object.keys(spacing).reduce<Record<string, number>>(\n      (acc, bp) => {\n        acc[bp] = BREAKPOINT_GUTTERS[spacing[bp]] ?? spacing[bp];\n        return acc;\n      },\n      {},\n    );\n  } else if (spacing === 0) {\n    gridSpacing = { xs: 0 };\n  } else {\n    gridSpacing = spacing;\n  }\n\n  return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n  let numberOfColumns: MuiGridProps[\"columns\"];\n\n  if (columns === \"auto\") {\n    numberOfColumns = BREAKPOINT_COLUMNS;\n  } else {\n    numberOfColumns = columns;\n  }\n\n  return numberOfColumns;\n}\n\nfunction getContainerProps(\n  spacing: HvGridProps[\"spacing\"],\n  rowSpacing: HvGridProps[\"rowSpacing\"],\n  columnSpacing: HvGridProps[\"columnSpacing\"],\n  columns: HvGridProps[\"columns\"],\n) {\n  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = { container: true };\n\n  if (spacing != null) {\n    containerProps.spacing = getGridSpacing(spacing);\n  }\n  if (rowSpacing != null) {\n    containerProps.rowSpacing = getGridSpacing(rowSpacing);\n  }\n  if (columnSpacing != null) {\n    containerProps.columnSpacing = getGridSpacing(columnSpacing);\n  }\n  if (columns != null) {\n    containerProps.columns = getNumberOfColumns(columns);\n  }\n\n  return containerProps;\n}\n\nconst WidthGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const { container, spacing, rowSpacing, columnSpacing, columns, ...others } =\n    props;\n\n  const width = useWidth();\n\n  const containerProps = container\n    ? getContainerProps(\n        spacing === \"auto\" ? width : spacing,\n        rowSpacing === \"auto\" ? width : rowSpacing,\n        columnSpacing === \"auto\" ? width : columnSpacing,\n        columns,\n      )\n    : {};\n\n  return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n *\n * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs         | [0-600[       | 16              | 4                 |\n * | sm         | [600-960[     | 16              | 8                 |\n * | md         | [960-1270[     | 32              | 12                |\n * | lg         | [1270-1920[    | 32              | 12                |\n * | xl         | [1920-...[    | 32              | 12                |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const {\n    item,\n    container,\n    spacing = \"auto\",\n    rowSpacing,\n    columnSpacing,\n    columns,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvGrid\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  // Fixes MUI error when using spacings as objects and the grid is an item and container\n  // When set to \"auto\", the spacing changes depending on the screen's breakpoint\n  // The condition avoids using useWidth and re-rendering the component unnecessarily\n  if (\n    container &&\n    item &&\n    (spacing === \"auto\" || rowSpacing === \"auto\" || columnSpacing === \"auto\")\n  ) {\n    return (\n      <WidthGrid\n        ref={ref}\n        classes={classes}\n        item={item}\n        container={container}\n        spacing={spacing}\n        rowSpacing={rowSpacing}\n        columnSpacing={columnSpacing}\n        columns={columns}\n        {...others}\n      />\n    );\n  }\n\n  const containerProps = container\n    ? getContainerProps(spacing, rowSpacing, columnSpacing, columns)\n    : {};\n\n  return (\n    <MuiGrid\n      ref={ref}\n      classes={classes}\n      item={item}\n      {...containerProps}\n      {...others}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuHA,SAAS,eAAe,SAAiC;AACnD,MAAA;AAEA,MAAA,OAAO,YAAY,UAAU;AAC/B,QAAI,YAAY,QAAQ;AACR,oBAAA;AAAA,IAAA,OACT;AACL,oBAAc,mBAAmB,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAO,YAAY,UAAU;AACxB,kBAAA,OAAO,KAAK,OAAO,EAAE;AAAA,MACjC,CAAC,KAAK,OAAO;AACP,YAAA,EAAE,IAAI,mBAAmB,QAAQ,EAAE,CAAC,KAAK,QAAQ,EAAE;AAChD,eAAA;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IAAA;AAAA,EACH,WACS,YAAY,GAAG;AACV,kBAAA,EAAE,IAAI;EAAE,OACjB;AACS,kBAAA;AAAA,EAChB;AAEO,SAAA;AACT;AAEA,SAAS,mBAAmB,SAAiC;AACvD,MAAA;AAEJ,MAAI,YAAY,QAAQ;AACJ,sBAAA;AAAA,EAAA,OACb;AACa,sBAAA;AAAA,EACpB;AAEO,SAAA;AACT;AAEA,SAAS,kBACP,SACA,YACA,eACA,SACA;AACM,QAAA,iBAGF,EAAE,WAAW;AAEjB,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,eAAe,OAAO;AAAA,EACjD;AACA,MAAI,cAAc,MAAM;AACP,mBAAA,aAAa,eAAe,UAAU;AAAA,EACvD;AACA,MAAI,iBAAiB,MAAM;AACV,mBAAA,gBAAgB,eAAe,aAAa;AAAA,EAC7D;AACA,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,mBAAmB,OAAO;AAAA,EACrD;AAEO,SAAA;AACT;AAEA,MAAM,YAAY,WAAwC,CAAC,OAAO,QAAQ;AAClE,QAAA,EAAE,WAAW,SAAS,YAAY,eAAe,SAAS,GAAG,OACjE,IAAA;AAEF,QAAM,QAAQ;AAEd,QAAM,iBAAiB,YACnB;AAAA,IACE,YAAY,SAAS,QAAQ;AAAA,IAC7B,eAAe,SAAS,QAAQ;AAAA,IAChC,kBAAkB,SAAS,QAAQ;AAAA,IACnC;AAAA,MAEF;AAEJ,6BAAQ,SAAQ,EAAA,KAAW,GAAG,gBAAiB,GAAG,OAAQ,CAAA;AAC5D,CAAC;AA0BM,MAAM,SAAS,WAAwC,CAAC,OAAO,QAAQ;AACtE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAK1C,MACE,aACA,SACC,YAAY,UAAU,eAAe,UAAU,kBAAkB,SAClE;AAEE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AAEM,QAAA,iBAAiB,YACnB,kBAAkB,SAAS,YAAY,eAAe,OAAO,IAC7D;AAGF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"Grid.js","sources":["../../../src/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiGrid, { GridProps as MuiGridProps } from \"@mui/material/Grid\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useWidth } from \"../hooks/useWidth\";\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n  xs: 2,\n  sm: 2,\n  md: 4,\n  lg: 4,\n  xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport type HvGridDirection =\n  | \"row\"\n  | \"row-reverse\"\n  | \"column\"\n  | \"column-reverse\";\n\nexport type HvGridSpacing =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"auto\"\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10;\n\nexport interface HvGridProps extends Omit<MuiGridProps, \"classes\" | \"columns\"> {\n  /**\n   * If `true`, the component will have the flex *container* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  container?: boolean;\n  /**\n   * If `true`, the component will have the flex *item* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  item?: boolean;\n  /**\n   * Defines the space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   */\n  spacing?: HvGridSpacing | number;\n  /**\n   * Defines the vertical space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  rowSpacing?: HvGridSpacing | number;\n  /**\n   * Defines the horizontal space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  columnSpacing?: HvGridSpacing | number;\n  /**\n   * The number of columns.\n   * Defaults to a 12-column grid.\n   * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n   * @default 12\n   */\n  columns?: \"auto\" | MuiGridProps[\"columns\"];\n  /**\n   * Defines the `flex-direction` style property.\n   * It is applied for all screen sizes.\n   */\n  direction?: HvGridDirection;\n  /**\n   * Defines the `justify-content` style property.\n   * It is applied for all screen sizes.\n   */\n  justify?:\n    | \"flex-start\"\n    | \"center\"\n    | \"flex-end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for all the screen sizes with the lowest priority.\n   */\n  xs?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `sm` breakpoint and wider screens if not overridden.\n   */\n  sm?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `md` breakpoint and wider screens if not overridden.\n   */\n  md?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `lg` breakpoint and wider screens if not overridden.\n   */\n  lg?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `xl` breakpoint and wider screens.\n   */\n  xl?: number | boolean;\n  /**\n   * Defines the `flex-wrap` style property.\n   * It's applied for all screen sizes.\n   */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n  /**\n   * If `true`, it sets `min-width: 0` on the item.\n   * Refer to the limitations section of the documentation to better understand the use case.\n   */\n  zeroMinWidth?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n  let gridSpacing: MuiGridProps[\"spacing\"];\n\n  if (typeof spacing === \"string\") {\n    if (spacing === \"auto\") {\n      gridSpacing = BREAKPOINT_GUTTERS;\n    } else {\n      gridSpacing = BREAKPOINT_GUTTERS[spacing];\n    }\n  } else if (typeof spacing === \"object\") {\n    gridSpacing = Object.keys(spacing).reduce<Record<string, number>>(\n      (acc, bp) => {\n        acc[bp] = BREAKPOINT_GUTTERS[spacing[bp]] ?? spacing[bp];\n        return acc;\n      },\n      {},\n    );\n  } else if (spacing === 0) {\n    gridSpacing = { xs: 0 };\n  } else {\n    gridSpacing = spacing;\n  }\n\n  return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n  let numberOfColumns: MuiGridProps[\"columns\"];\n\n  if (columns === \"auto\") {\n    numberOfColumns = BREAKPOINT_COLUMNS;\n  } else {\n    numberOfColumns = columns;\n  }\n\n  return numberOfColumns;\n}\n\nfunction getContainerProps(\n  spacing: HvGridProps[\"spacing\"],\n  rowSpacing: HvGridProps[\"rowSpacing\"],\n  columnSpacing: HvGridProps[\"columnSpacing\"],\n  columns: HvGridProps[\"columns\"],\n) {\n  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = { container: true };\n\n  if (spacing != null) {\n    containerProps.spacing = getGridSpacing(spacing);\n  }\n  if (rowSpacing != null) {\n    containerProps.rowSpacing = getGridSpacing(rowSpacing);\n  }\n  if (columnSpacing != null) {\n    containerProps.columnSpacing = getGridSpacing(columnSpacing);\n  }\n  if (columns != null) {\n    containerProps.columns = getNumberOfColumns(columns);\n  }\n\n  return containerProps;\n}\n\nconst WidthGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const { container, spacing, rowSpacing, columnSpacing, columns, ...others } =\n    props;\n\n  const width = useWidth();\n\n  const containerProps = container\n    ? getContainerProps(\n        spacing === \"auto\" ? width : spacing,\n        rowSpacing === \"auto\" ? width : rowSpacing,\n        columnSpacing === \"auto\" ? width : columnSpacing,\n        columns,\n      )\n    : {};\n\n  return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n *\n * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs         | [0-600[       | 16              | 4                 |\n * | sm         | [600-960[     | 16              | 8                 |\n * | md         | [960-1270[     | 32              | 12                |\n * | lg         | [1270-1920[    | 32              | 12                |\n * | xl         | [1920-...[    | 32              | 12                |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<\n  // no-indent\n  HTMLDivElement,\n  HvGridProps\n>(function HvGrid(props, ref) {\n  const {\n    item,\n    container,\n    spacing = \"auto\",\n    rowSpacing,\n    columnSpacing,\n    columns,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvGrid\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  // Fixes MUI error when using spacings as objects and the grid is an item and container\n  // When set to \"auto\", the spacing changes depending on the screen's breakpoint\n  // The condition avoids using useWidth and re-rendering the component unnecessarily\n  if (\n    container &&\n    item &&\n    (spacing === \"auto\" || rowSpacing === \"auto\" || columnSpacing === \"auto\")\n  ) {\n    return (\n      <WidthGrid\n        ref={ref}\n        classes={classes}\n        item={item}\n        container={container}\n        spacing={spacing}\n        rowSpacing={rowSpacing}\n        columnSpacing={columnSpacing}\n        columns={columns}\n        {...others}\n      />\n    );\n  }\n\n  const containerProps = container\n    ? getContainerProps(spacing, rowSpacing, columnSpacing, columns)\n    : {};\n\n  return (\n    <MuiGrid\n      ref={ref}\n      classes={classes}\n      item={item}\n      {...containerProps}\n      {...others}\n    />\n  );\n});\n"],"names":["HvGrid"],"mappings":";;;;;;;AAcA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuHA,SAAS,eAAe,SAAiC;AACnD,MAAA;AAEA,MAAA,OAAO,YAAY,UAAU;AAC/B,QAAI,YAAY,QAAQ;AACR,oBAAA;AAAA,IAAA,OACT;AACL,oBAAc,mBAAmB,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAO,YAAY,UAAU;AACxB,kBAAA,OAAO,KAAK,OAAO,EAAE;AAAA,MACjC,CAAC,KAAK,OAAO;AACP,YAAA,EAAE,IAAI,mBAAmB,QAAQ,EAAE,CAAC,KAAK,QAAQ,EAAE;AAChD,eAAA;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IAAA;AAAA,EACH,WACS,YAAY,GAAG;AACV,kBAAA,EAAE,IAAI;EAAE,OACjB;AACS,kBAAA;AAAA,EAChB;AAEO,SAAA;AACT;AAEA,SAAS,mBAAmB,SAAiC;AACvD,MAAA;AAEJ,MAAI,YAAY,QAAQ;AACJ,sBAAA;AAAA,EAAA,OACb;AACa,sBAAA;AAAA,EACpB;AAEO,SAAA;AACT;AAEA,SAAS,kBACP,SACA,YACA,eACA,SACA;AACM,QAAA,iBAGF,EAAE,WAAW;AAEjB,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,eAAe,OAAO;AAAA,EACjD;AACA,MAAI,cAAc,MAAM;AACP,mBAAA,aAAa,eAAe,UAAU;AAAA,EACvD;AACA,MAAI,iBAAiB,MAAM;AACV,mBAAA,gBAAgB,eAAe,aAAa;AAAA,EAC7D;AACA,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,mBAAmB,OAAO;AAAA,EACrD;AAEO,SAAA;AACT;AAEA,MAAM,YAAY,WAAwC,CAAC,OAAO,QAAQ;AAClE,QAAA,EAAE,WAAW,SAAS,YAAY,eAAe,SAAS,GAAG,OACjE,IAAA;AAEF,QAAM,QAAQ;AAEd,QAAM,iBAAiB,YACnB;AAAA,IACE,YAAY,SAAS,QAAQ;AAAA,IAC7B,eAAe,SAAS,QAAQ;AAAA,IAChC,kBAAkB,SAAS,QAAQ;AAAA,IACnC;AAAA,MAEF;AAEJ,6BAAQ,SAAQ,EAAA,KAAW,GAAG,gBAAiB,GAAG,OAAQ,CAAA;AAC5D,CAAC;AA0BM,MAAM,SAAS,WAIpB,SAASA,QAAO,OAAO,KAAK;AACtB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAK1C,MACE,aACA,SACC,YAAY,UAAU,eAAe,UAAU,kBAAkB,SAClE;AAEE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AAEM,QAAA,iBAAiB,YACnB,kBAAkB,SAAS,YAAY,eAAe,OAAO,IAC7D;AAGF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/esm/Header/Actions/Actions.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Actions.styles.js";
 import { staticClasses } from "./Actions.styles.js";
-const HvHeaderActions = forwardRef((props, ref) => {
+const HvHeaderActions = forwardRef(function HvHeaderActions2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/esm/Header/Actions/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sources":["../../../../src/Header/Actions/Actions.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { staticClasses, useClasses } from \"./Actions.styles\";\n\nexport { staticClasses as headerActionsClasses };\n\nexport type HvHeaderActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderActionsProps extends HvBaseProps {\n  classes?: HvHeaderActionsClasses;\n}\n\nexport const HvHeaderActions = forwardRef<\n  React.ElementRef<\"div\">,\n  HvHeaderActionsProps\n>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    ...others\n  } = useDefaultProps(\"HvHeaderActions\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div ref={ref} className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;AAiBO,MAAM,kBAAkB,WAG7B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,SACH,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Actions.js","sources":["../../../../src/Header/Actions/Actions.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { staticClasses, useClasses } from \"./Actions.styles\";\n\nexport { staticClasses as headerActionsClasses };\n\nexport type HvHeaderActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderActionsProps extends HvBaseProps {\n  classes?: HvHeaderActionsClasses;\n}\n\nexport const HvHeaderActions = forwardRef<\n  React.ElementRef<\"div\">,\n  HvHeaderActionsProps\n>(function HvHeaderActions(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    ...others\n  } = useDefaultProps(\"HvHeaderActions\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div ref={ref} className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n});\n"],"names":["HvHeaderActions"],"mappings":";;;;;AAiBO,MAAM,kBAAkB,WAG7B,SAASA,iBAAgB,OAAO,KAAK;AAC/B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,SACH,CAAA;AAEJ,CAAC;"}

package/dist/esm/Header/Brand/Brand.js

@@ -4,7 +4,7 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Brand.styles.js";
 import { staticClasses } from "./Brand.styles.js";
 import { HvTypography } from "../../Typography/Typography.js";
-const HvHeaderBrand = forwardRef((props, ref) => {
+const HvHeaderBrand = forwardRef(function HvHeaderBrand2(props, ref) {
   const {
     classes: classesProp,
     logo,

package/dist/esm/Header/Brand/Brand.js.map

@@ -1 +1 @@
-{"version":3,"file":"Brand.js","sources":["../../../../src/Header/Brand/Brand.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./Brand.styles\";\n\nexport { staticClasses as headerBrandClasses };\n\nexport type HvHeaderBrandClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderBrandProps extends HvBaseProps {\n  logo?: React.ReactNode;\n  name?: string;\n  classes?: HvHeaderBrandClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeaderBrand = forwardRef<\n  React.ElementRef<\"div\">,\n  HvHeaderBrandProps\n>((props, ref) => {\n  const {\n    classes: classesProp,\n    logo,\n    name,\n    className,\n    ...others\n  } = useDefaultProps(\"HvHeaderBrand\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div ref={ref} className={cx(classes.root, className)} {...others}>\n      {logo}\n      {logo && name && <div className={classes.separator} />}\n      {name && (\n        <HvTypography className={classes.brandName} variant=\"label\">\n          {name}\n        </HvTypography>\n      )}\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,gBAAgB,WAG3B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,qBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,UAAA;AAAA,IAAA;AAAA,IACA,QAAQ,QAAQ,oBAAC,OAAI,EAAA,WAAW,QAAQ,WAAW;AAAA,IACnD,4BACE,cAAa,EAAA,WAAW,QAAQ,WAAW,SAAQ,SACjD,UACH,KAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Brand.js","sources":["../../../../src/Header/Brand/Brand.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./Brand.styles\";\n\nexport { staticClasses as headerBrandClasses };\n\nexport type HvHeaderBrandClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderBrandProps extends HvBaseProps {\n  logo?: React.ReactNode;\n  name?: string;\n  classes?: HvHeaderBrandClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeaderBrand = forwardRef<\n  React.ElementRef<\"div\">,\n  HvHeaderBrandProps\n>(function HvHeaderBrand(props, ref) {\n  const {\n    classes: classesProp,\n    logo,\n    name,\n    className,\n    ...others\n  } = useDefaultProps(\"HvHeaderBrand\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div ref={ref} className={cx(classes.root, className)} {...others}>\n      {logo}\n      {logo && name && <div className={classes.separator} />}\n      {name && (\n        <HvTypography className={classes.brandName} variant=\"label\">\n          {name}\n        </HvTypography>\n      )}\n    </div>\n  );\n});\n"],"names":["HvHeaderBrand"],"mappings":";;;;;;AAuBO,MAAM,gBAAgB,WAG3B,SAASA,eAAc,OAAO,KAAK;AAC7B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,qBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,UAAA;AAAA,IAAA;AAAA,IACA,QAAQ,QAAQ,oBAAC,OAAI,EAAA,WAAW,QAAQ,WAAW;AAAA,IACnD,4BACE,cAAa,EAAA,WAAW,QAAQ,WAAW,SAAQ,SACjD,UACH,KAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/esm/Header/Header.js

@@ -1,8 +1,9 @@
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Header.styles.js";
 import { staticClasses } from "./Header.styles.js";
-const HvHeader = (props) => {
+const HvHeader = forwardRef(function HvHeader2(props, ref) {
   const {
     className,
     classes: classesProp,
@@ -14,6 +15,7 @@ const HvHeader = (props) => {
   return /* @__PURE__ */ jsx(
     "header",
     {
+      ref,
       style: { position },
       className: cx(
         classes.root,
@@ -25,7 +27,7 @@ const HvHeader = (props) => {
       children: /* @__PURE__ */ jsx("div", { className: classes.header, children })
     }
   );
-};
+});
 export {
   HvHeader,
   staticClasses as headerClasses

package/dist/esm/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../src/Header/Header.tsx"],"sourcesContent":["import {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as headerClasses };\n\nexport type HvHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport type HvHeaderPosition =\n  | \"fixed\"\n  | \"absolute\"\n  | \"sticky\"\n  | \"static\"\n  | \"relative\";\n\nexport interface HvHeaderProps extends HvBaseProps {\n  /** The position of the header bar */\n  position?: HvHeaderPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvHeaderClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeader = (props: HvHeaderProps) => {\n  const {\n    className,\n    classes: classesProp,\n    children,\n    position = \"fixed\",\n    ...others\n  } = useDefaultProps(\"HvHeader\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <header\n      style={{ position }}\n      className={cx(\n        classes.root,\n        classes.backgroundColor,\n        { [classes.fixed]: position === \"fixed\" },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.header}>{children}</div>\n    </header>\n  );\n};\n"],"names":[],"mappings":";;;;AA6Ba,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,SAAS;AAAA,MAClB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,KAAK,GAAG,aAAa,QAAQ;AAAA,QACxC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,UAAS;AAAA,IAAA;AAAA,EAAA;AAGhD;"}
+{"version":3,"file":"Header.js","sources":["../../../src/Header/Header.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as headerClasses };\n\nexport type HvHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport type HvHeaderPosition =\n  | \"fixed\"\n  | \"absolute\"\n  | \"sticky\"\n  | \"static\"\n  | \"relative\";\n\nexport interface HvHeaderProps extends HvBaseProps {\n  /** The position of the header bar */\n  position?: HvHeaderPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvHeaderClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeader = forwardRef<\n  // no-indent\n  React.ComponentRef<\"header\">,\n  HvHeaderProps\n>(function HvHeader(props, ref) {\n  const {\n    className,\n    classes: classesProp,\n    children,\n    position = \"fixed\",\n    ...others\n  } = useDefaultProps(\"HvHeader\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <header\n      ref={ref}\n      style={{ position }}\n      className={cx(\n        classes.root,\n        classes.backgroundColor,\n        { [classes.fixed]: position === \"fixed\" },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.header}>{children}</div>\n    </header>\n  );\n});\n"],"names":["HvHeader"],"mappings":";;;;;AA8BO,MAAM,WAAW,WAItB,SAASA,UAAS,OAAO,KAAK;AACxB,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO,EAAE,SAAS;AAAA,MAClB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,KAAK,GAAG,aAAa,QAAQ;AAAA,QACxC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,UAAS;AAAA,IAAA;AAAA,EAAA;AAGhD,CAAC;"}

package/dist/esm/Header/Navigation/Navigation.js

@@ -7,7 +7,7 @@ import { useSelectionPath } from "./useSelectionPath.js";
 import { FocusProvider } from "./utils/FocusContext.js";
 import { SelectionContext } from "./utils/SelectionContext.js";
 import { HvHeaderMenuBar } from "./MenuBar/MenuBar.js";
-const HvHeaderNavigation = forwardRef((props, ref) => {
+const HvHeaderNavigation = forwardRef(function HvHeaderNavigation2(props, ref) {
   const {
     data,
     selected,

package/dist/esm/Header/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../src/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvHeaderMenuBar, HvHeaderMenuBarProps } from \"./MenuBar\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\nimport {\n  HvHeaderNavigationItemProp,\n  useSelectionPath,\n} from \"./useSelectionPath\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\n\nexport { staticClasses as headerNavigationClasses };\n\nexport type HvHeaderNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderNavigationProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  selected?: string;\n  onClick?: (\n    event: React.MouseEvent,\n    selection: HvHeaderNavigationItemProp,\n  ) => void;\n  classes?: HvHeaderNavigationClasses;\n  /**\n   * The number of levels to show: the first level (1) or the first and second level (2).\n   *\n   * Defaults to `2`.\n   * */\n  levels?: 1 | 2;\n}\n\nexport const HvHeaderNavigation = forwardRef<\n  React.ElementRef<\"nav\">,\n  HvHeaderNavigationProps\n>((props, ref) => {\n  const {\n    data,\n    selected,\n    onClick,\n    className,\n    classes: classesProp,\n    levels = 2,\n    ...others\n  } = useDefaultProps(\"HvHeaderNavigation\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useSelectionPath(data, selected);\n\n  const handleClick: HvHeaderMenuBarProps[\"onClick\"] = (event, selection) => {\n    event.preventDefault();\n\n    onClick?.(event, selection);\n  };\n\n  return (\n    <SelectionContext.Provider value={selectionPath}>\n      <FocusProvider>\n        <nav ref={ref} className={cx(classes.root, className)} {...others}>\n          <HvHeaderMenuBar\n            data={data}\n            type=\"menubar\"\n            onClick={handleClick}\n            levels={levels}\n            currentLevel={1}\n          />\n        </nav>\n      </FocusProvider>\n    </SelectionContext.Provider>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;AAqCO,MAAM,qBAAqB,WAGhC,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,gBAAgB,iBAAiB,MAAM,QAAQ;AAE/C,QAAA,cAA+C,CAAC,OAAO,cAAc;AACzE,UAAM,eAAe;AAErB,cAAU,OAAO,SAAS;AAAA,EAAA;AAG5B,6BACG,iBAAiB,UAAjB,EAA0B,OAAO,eAChC,8BAAC,eACC,EAAA,UAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACzD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,cAAc;AAAA,IAAA;AAAA,EAAA,GAElB,GACF,EACF,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Navigation.js","sources":["../../../../src/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvHeaderMenuBar, HvHeaderMenuBarProps } from \"./MenuBar\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\nimport {\n  HvHeaderNavigationItemProp,\n  useSelectionPath,\n} from \"./useSelectionPath\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\n\nexport { staticClasses as headerNavigationClasses };\n\nexport type HvHeaderNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderNavigationProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  selected?: string;\n  onClick?: (\n    event: React.MouseEvent,\n    selection: HvHeaderNavigationItemProp,\n  ) => void;\n  classes?: HvHeaderNavigationClasses;\n  /**\n   * The number of levels to show: the first level (1) or the first and second level (2).\n   *\n   * Defaults to `2`.\n   * */\n  levels?: 1 | 2;\n}\n\nexport const HvHeaderNavigation = forwardRef<\n  React.ElementRef<\"nav\">,\n  HvHeaderNavigationProps\n>(function HvHeaderNavigation(props, ref) {\n  const {\n    data,\n    selected,\n    onClick,\n    className,\n    classes: classesProp,\n    levels = 2,\n    ...others\n  } = useDefaultProps(\"HvHeaderNavigation\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useSelectionPath(data, selected);\n\n  const handleClick: HvHeaderMenuBarProps[\"onClick\"] = (event, selection) => {\n    event.preventDefault();\n\n    onClick?.(event, selection);\n  };\n\n  return (\n    <SelectionContext.Provider value={selectionPath}>\n      <FocusProvider>\n        <nav ref={ref} className={cx(classes.root, className)} {...others}>\n          <HvHeaderMenuBar\n            data={data}\n            type=\"menubar\"\n            onClick={handleClick}\n            levels={levels}\n            currentLevel={1}\n          />\n        </nav>\n      </FocusProvider>\n    </SelectionContext.Provider>\n  );\n});\n"],"names":["HvHeaderNavigation"],"mappings":";;;;;;;;;AAqCO,MAAM,qBAAqB,WAGhC,SAASA,oBAAmB,OAAO,KAAK;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,gBAAgB,iBAAiB,MAAM,QAAQ;AAE/C,QAAA,cAA+C,CAAC,OAAO,cAAc;AACzE,UAAM,eAAe;AAErB,cAAU,OAAO,SAAS;AAAA,EAAA;AAG5B,6BACG,iBAAiB,UAAjB,EAA0B,OAAO,eAChC,8BAAC,eACC,EAAA,UAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACzD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,cAAc;AAAA,IAAA;AAAA,EAAA,GAElB,GACF,EACF,CAAA;AAEJ,CAAC;"}

package/dist/esm/Input/Input.js

@@ -45,7 +45,7 @@ const changeInputValue = (input, value = "") => {
   setInputValue?.call(input, value);
   input?.dispatchEvent(event);
 };
-const HvInput = forwardRef((props, ref) => {
+const HvInput = forwardRef(function HvInput2(props, ref) {
   const {
     classes: classesProp,
     className,