@hitachivantara/uikit-react-core 5.58.1 → 5.58.3

package/dist/esm/MultiButton/MultiButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import React, { cloneElement } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Category of button to use */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n  /** Button size. */\n  size?: HvButtonSize;\n  /** Add a split between buttons */\n  split?: boolean;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    size,\n    split,\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.vertical]: vertical,\n          [classes[variant]]: variant,\n          [classes.splitGroup]: split,\n          [classes.splitGroupDisabled]: split && disabled,\n        },\n        className\n      )}\n      {...others}\n    >\n      {React.Children.map(children, (child, index) => {\n        if (React.isValidElement(child)) {\n          const childIsSelected = !!child.props.selected;\n\n          return (\n            <>\n              {cloneElement(child as React.ReactElement, {\n                variant,\n                disabled: disabled || child.props.disabled,\n                size,\n                className: cx(child.props.className, classes.button, {\n                  [classes.firstButton]: index === 0,\n                  [classes.lastButton]:\n                    index === React.Children.count(children) - 1,\n                  [classes.selected]: childIsSelected,\n                }),\n              })}\n              {split && index < React.Children.count(children) - 1 && (\n                <div\n                  className={cx(classes.splitContainer, classes[variant], {\n                    [classes.splitDisabled]: disabled,\n                  })}\n                >\n                  <div className={cx(classes.split)} />\n                </div>\n              )}\n            </>\n          );\n        }\n      })}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AA2Ba,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,OAAO,CAAC,GAAG;AAAA,UACpB,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,kBAAkB,GAAG,SAAS;AAAA,QACzC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,yBAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AAC1C,YAAAA,eAAM,eAAe,KAAK,GAAG;AAC/B,gBAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AAEtC,iBAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAA,aAAa,OAA6B;AAAA,cACzC;AAAA,cACA,UAAU,YAAY,MAAM,MAAM;AAAA,cAClC;AAAA,cACA,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,gBACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,gBACjC,CAAC,QAAQ,UAAU,GACjB,UAAUA,eAAM,SAAS,MAAM,QAAQ,IAAI;AAAA,gBAC7C,CAAC,QAAQ,QAAQ,GAAG;AAAA,cAAA,CACrB;AAAA,YAAA,CACF;AAAA,YACA,SAAS,QAAQA,eAAM,SAAS,MAAM,QAAQ,IAAI,KACjD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,GAAG,QAAQ,gBAAgB,QAAQ,OAAO,GAAG;AAAA,kBACtD,CAAC,QAAQ,aAAa,GAAG;AAAA,gBAAA,CAC1B;AAAA,gBAED,8BAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,KAAK,GAAG;AAAA,cAAA;AAAA,YACrC;AAAA,UAEJ,EAAA,CAAA;AAAA,QAEJ;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Category of button to use */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n  /** Button size. */\n  size?: HvButtonSize;\n  /** Add a split between buttons */\n  split?: boolean;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    size,\n    split,\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.vertical]: vertical,\n          [classes[variant]]: variant,\n          [classes.splitGroup]: split,\n          [classes.splitGroupDisabled]: split && disabled,\n        },\n        className\n      )}\n      {...others}\n    >\n      {Children.map(children, (child, index) => {\n        if (isValidElement(child)) {\n          const childIsSelected = !!child.props.selected;\n\n          return (\n            <>\n              {cloneElement(child as React.ReactElement, {\n                variant,\n                disabled: disabled || child.props.disabled,\n                size,\n                className: cx(child.props.className, classes.button, {\n                  [classes.firstButton]: index === 0,\n                  [classes.lastButton]: index === Children.count(children) - 1,\n                  [classes.selected]: childIsSelected,\n                }),\n              })}\n              {split && index < Children.count(children) - 1 && (\n                <div\n                  className={cx(classes.splitContainer, classes[variant], {\n                    [classes.splitDisabled]: disabled,\n                  })}\n                >\n                  <div className={cx(classes.split)} />\n                </div>\n              )}\n            </>\n          );\n        }\n      })}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AA2Ba,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,OAAO,CAAC,GAAG;AAAA,UACpB,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,kBAAkB,GAAG,SAAS;AAAA,QACzC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAS,SAAA,IAAI,UAAU,CAAC,OAAO,UAAU;AACpC,YAAA,eAAe,KAAK,GAAG;AACzB,gBAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AAEtC,iBAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAA,aAAa,OAA6B;AAAA,cACzC;AAAA,cACA,UAAU,YAAY,MAAM,MAAM;AAAA,cAClC;AAAA,cACA,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,gBACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,gBACjC,CAAC,QAAQ,UAAU,GAAG,UAAU,SAAS,MAAM,QAAQ,IAAI;AAAA,gBAC3D,CAAC,QAAQ,QAAQ,GAAG;AAAA,cAAA,CACrB;AAAA,YAAA,CACF;AAAA,YACA,SAAS,QAAQ,SAAS,MAAM,QAAQ,IAAI,KAC3C;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,GAAG,QAAQ,gBAAgB,QAAQ,OAAO,GAAG;AAAA,kBACtD,CAAC,QAAQ,aAAa,GAAG;AAAA,gBAAA,CAC1B;AAAA,gBAED,8BAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,KAAK,GAAG;AAAA,cAAA;AAAA,YACrC;AAAA,UAEJ,EAAA,CAAA;AAAA,QAEJ;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/Pagination/Pagination.tsx"],"sourcesContent":["import { HTMLAttributes, useCallback, useEffect } from \"react\";\nimport Hidden from \"@mui/material/Hidden\";\nimport {\n  Start,\n  End,\n  Backwards,\n  Forwards,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvTypography } from \"../Typography\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport HvSelect, { Option } from \"./Select\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport { usePageInput, getSafePage, setColor } from \"./utils\";\nimport { HvIconButton } from \"../IconButton\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\nconst DEFAULT_LABELS = {\n  /** The show label. */\n  pageSizePrev: \"Show\",\n  /** Indicate the units of the page size selection. */\n  pageSizeEntryName: \"rows\",\n  /** Used for the aria-label of the selection of number of unit.s */\n  pageSizeSelectorDescription: \"Select how many to display\",\n  /** Separator of current page and total pages. */\n  pagesSeparator: \"/\",\n  /** Title of button `firstPage`. @deprecated Use `firstPage` instead. */\n  paginationFirstPageTitle: \"First page\",\n  /** Title of button `previousPage`. @deprecated Use `previousPage` instead. */\n  paginationPreviousPageTitle: \"Previous page\",\n  /** Title of button `nextPage`. @deprecated Use `nextPage` instead. */\n  paginationNextPageTitle: \"Next page\",\n  /** Title of button `lastPage`. @deprecated Use `lastPage` instead. */\n  paginationLastPageTitle: \"Last page\",\n  /** Aria-label passed to the page input. */\n  paginationInputLabel: \"Current page\",\n  /** Label of the first page button */\n  firstPage: \"First Page\",\n  /** Label of the previous page button */\n  previousPage: \"Previous Page\",\n  /** Label of the next page button */\n  nextPage: \"Next Page\",\n  /** Label of the last page button */\n  lastPage: \"Last Page\",\n};\n\nexport type HvPaginationLabels = Partial<typeof DEFAULT_LABELS>;\n\nexport interface HvPaginationProps extends HvBaseProps {\n  /** The number of pages the component has. */\n  pages?: number;\n  /** The currently selected page (0-indexed). */\n  page?: number;\n  /** Controls whether the left page size mechanism should be visible. */\n  showPageSizeOptions?: boolean;\n  /** The array of possible page sizes for the dropdown. */\n  pageSizeOptions?: number[];\n  /** The currently selected page size. */\n  pageSize?: number;\n  /** Controls whether the central page changing mechanism should be visible. */\n  showPageJump?: boolean;\n  /** Controls whether the previous/first page buttons are enabled. */\n  canPrevious?: boolean;\n  /** Controls whether the next/last page buttons are enabled. */\n  canNext?: boolean;\n  /** Function called when the page changes. */\n  onPageChange?: (page: number) => void;\n  /** Function called when the page size changes. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /** An object containing all the labels for the component. */\n  labels?: HvPaginationLabels;\n  /** Other props to show page component. */\n  showPageProps?: HTMLAttributes<HTMLDivElement>;\n  /** Other props to pagination component. */\n  navigationProps?: HTMLAttributes<HTMLDivElement>;\n  /** Extra properties passed to the input component representing the current pages. */\n  currentPageInputProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvPaginationClasses;\n}\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = (props: HvPaginationProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    pages = 1,\n    page = 0,\n    showPageSizeOptions = true,\n    pageSizeOptions = defaultPageSizeOptions,\n    pageSize = defaultPageSizeOptions[1],\n    showPageJump = true,\n    canPrevious = false,\n    canNext = false,\n    onPageChange,\n    onPageSizeChange,\n    labels: labelsProp,\n    showPageProps,\n    navigationProps,\n    currentPageInputProps,\n    ...others\n  } = useDefaultProps(\"HvPagination\", props);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const [pageInput, handleInputChange] = usePageInput(page);\n  const { classes, cx } = useClasses(classesProp);\n\n  const changePage = useCallback(\n    (newPage: number) => {\n      const safePage: number = getSafePage(newPage, page, pages);\n\n      onPageChange?.(safePage);\n      handleInputChange(null, safePage + 1);\n    },\n    [page, pages, onPageChange, handleInputChange]\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    if (pageInput !== page + 1) {\n      handleInputChange(null, page + 1);\n    }\n\n    // we only want to \"fix\" the input's display value when `page` property changed\n    // (either externally or when internally committed - onBlur or Enter),\n    // not while editing the input.\n    // breaking a rule of hooks isn't ideal and it's just a hack for fixing\n    // a bug preventing properly controlling of the `page` property.\n    // fixing it some other way would potentially introduce a breaking change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [handleInputChange, page]);\n\n  const renderPageJump = () => (\n    <div className={classes.pageJump}>\n      <HvInput\n        id={setId(id, \"currentPage\")}\n        labels={labels}\n        inputProps={{\n          \"aria-label\": labels?.paginationInputLabel,\n          // We really want the native number input\n          type: \"number\",\n        }}\n        classes={{\n          root: classes?.pageSizeInputContainer,\n          input: classes?.pageSizeInput,\n          inputRoot: classes?.pageSizeInputRoot,\n        }}\n        onChange={(event, value) => handleInputChange(event, Number(value))}\n        value={String(pageInput)}\n        onBlur={(evt, value) => changePage(Number(value) - 1)}\n        onKeyDown={(evt, value) =>\n          isKey(evt, \"Enter\") && changePage(Number(value) - 1)\n        }\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </div>\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <div className={classes.pageSizeOptions} {...showPageProps}>\n        {showPageSizeOptions && (\n          <>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes?.pageSizeTextContainer}\n              >\n                {labels?.pageSizePrev}\n              </HvTypography>\n            </Hidden>\n            <HvSelect\n              id={setId(id, \"pageSize\")}\n              disabled={pageSize === 0}\n              className={classes.pageSizeOptionsSelect}\n              aria-label={labels?.pageSizeSelectorDescription}\n              onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n              value={pageSize}\n              classes={{\n                header: classes.pageSizeHeader,\n                root: classes.pageSizeRoot,\n              }}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </HvSelect>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes.pageSizeTextContainer}\n              >\n                {labels?.pageSizeEntryName}\n              </HvTypography>\n            </Hidden>\n          </>\n        )}\n      </div>\n      <div className={classes.pageNavigator} {...navigationProps}>\n        <HvIconButton\n          id={setId(id, \"firstPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          title={labels?.firstPage || labels?.paginationFirstPageTitle}\n        >\n          <Start\n            role=\"none\"\n            className={classes.icon}\n            color={setColor(!canPrevious)}\n            iconSize=\"XS\"\n          />\n        </HvIconButton>\n        <HvIconButton\n          id={setId(id, \"previousPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          title={labels?.previousPage || labels?.paginationPreviousPageTitle}\n        >\n          <Backwards\n            role=\"none\"\n            className={classes.icon}\n            color={setColor(!canPrevious)}\n            iconSize=\"XS\"\n          />\n        </HvIconButton>\n        <div className={classes.pageInfo}>\n          {showPageJump ? (\n            renderPageJump()\n          ) : (\n            <HvTypography variant=\"caption2\" component=\"span\">{`${\n              page + 1\n            }`}</HvTypography>\n          )}\n          <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n          <HvTypography\n            component=\"span\"\n            id={setId(id, \"totalPages\")}\n            className={classes.totalPagesTextContainer}\n          >\n            {pages}\n          </HvTypography>\n        </div>\n        <HvIconButton\n          id={setId(id, \"nextPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          title={labels?.nextPage || labels?.paginationNextPageTitle}\n        >\n          <Forwards\n            role=\"none\"\n            className={classes.icon}\n            color={setColor(!canNext)}\n            iconSize=\"XS\"\n          />\n        </HvIconButton>\n        <HvIconButton\n          id={setId(id, \"lastPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          title={labels?.lastPage || labels?.paginationLastPageTitle}\n        >\n          <End\n            className={classes.icon}\n            color={setColor(!canNext)}\n            iconSize=\"XS\"\n          />\n        </HvIconButton>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/Pagination/Pagination.tsx"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\nimport Hidden from \"@mui/material/Hidden\";\nimport {\n  Start,\n  End,\n  Backwards,\n  Forwards,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvTypography } from \"../Typography\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport HvSelect, { Option } from \"./Select\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport { usePageInput, getSafePage, setColor } from \"./utils\";\nimport { HvIconButton } from \"../IconButton\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\nconst DEFAULT_LABELS = {\n  /** The show label. */\n  pageSizePrev: \"Show\",\n  /** Indicate the units of the page size selection. */\n  pageSizeEntryName: \"rows\",\n  /** Used for the aria-label of the selection of number of unit.s */\n  pageSizeSelectorDescription: \"Select how many to display\",\n  /** Separator of current page and total pages. */\n  pagesSeparator: \"/\",\n  /** Title of button `firstPage`. @deprecated Use `firstPage` instead. */\n  paginationFirstPageTitle: \"First page\",\n  /** Title of button `previousPage`. @deprecated Use `previousPage` instead. */\n  paginationPreviousPageTitle: \"Previous page\",\n  /** Title of button `nextPage`. @deprecated Use `nextPage` instead. */\n  paginationNextPageTitle: \"Next page\",\n  /** Title of button `lastPage`. @deprecated Use `lastPage` instead. */\n  paginationLastPageTitle: \"Last page\",\n  /** Aria-label passed to the page input. */\n  paginationInputLabel: \"Current page\",\n  /** Label of the first page button */\n  firstPage: \"First Page\",\n  /** Label of the previous page button */\n  previousPage: \"Previous Page\",\n  /** Label of the next page button */\n  nextPage: \"Next Page\",\n  /** Label of the last page button */\n  lastPage: \"Last Page\",\n};\n\nexport type HvPaginationLabels = Partial<typeof DEFAULT_LABELS>;\n\nexport interface HvPaginationProps extends HvBaseProps {\n  /** The number of pages the component has. */\n  pages?: number;\n  /** The currently selected page (0-indexed). */\n  page?: number;\n  /** Controls whether the left page size mechanism should be visible. */\n  showPageSizeOptions?: boolean;\n  /** The array of possible page sizes for the dropdown. */\n  pageSizeOptions?: number[];\n  /** The currently selected page size. */\n  pageSize?: number;\n  /** Controls whether the central page changing mechanism should be visible. */\n  showPageJump?: boolean;\n  /** Controls whether the previous/first page buttons are enabled. */\n  canPrevious?: boolean;\n  /** Controls whether the next/last page buttons are enabled. */\n  canNext?: boolean;\n  /** Function called when the page changes. */\n  onPageChange?: (page: number) => void;\n  /** Function called when the page size changes. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /** An object containing all the labels for the component. */\n  labels?: HvPaginationLabels;\n  /** Other props to show page component. */\n  showPageProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Other props to pagination component. */\n  navigationProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Extra properties passed to the input component representing the current pages. */\n  currentPageInputProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvPaginationClasses;\n}\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = (props: HvPaginationProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    pages = 1,\n    page = 0,\n    showPageSizeOptions = true,\n    pageSizeOptions = defaultPageSizeOptions,\n    pageSize = defaultPageSizeOptions[1],\n    showPageJump = true,\n    canPrevious = false,\n    canNext = false,\n    onPageChange,\n    onPageSizeChange,\n    labels: labelsProp,\n    showPageProps,\n    navigationProps,\n    currentPageInputProps,\n    ...others\n  } = useDefaultProps(\"HvPagination\", props);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const [pageInput, handleInputChange] = usePageInput(page);\n  const { classes, cx } = useClasses(classesProp);\n\n  const changePage = useCallback(\n    (newPage: number) => {\n      const safePage: number = getSafePage(newPage, page, pages);\n\n      onPageChange?.(safePage);\n      handleInputChange(null, safePage + 1);\n    },\n    [page, pages, onPageChange, handleInputChange]\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    if (pageInput !== page + 1) {\n      handleInputChange(null, page + 1);\n    }\n\n    // we only want to \"fix\" the input's display value when `page` property changed\n    // (either externally or when internally committed - onBlur or Enter),\n    // not while editing the input.\n    // breaking a rule of hooks isn't ideal and it's just a hack for fixing\n    // a bug preventing properly controlling of the `page` property.\n    // fixing it some other way would potentially introduce a breaking change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [handleInputChange, page]);\n\n  const renderPageJump = () => (\n    <div className={classes.pageJump}>\n      <HvInput\n        id={setId(id, \"currentPage\")}\n        labels={labels}\n        inputProps={{\n          \"aria-label\": labels?.paginationInputLabel,\n          // We really want the native number input\n          type: \"number\",\n        }}\n        classes={{\n          root: classes?.pageSizeInputContainer,\n          input: classes?.pageSizeInput,\n          inputRoot: classes?.pageSizeInputRoot,\n        }}\n        onChange={(event, value) => handleInputChange(event, Number(value))}\n        value={String(pageInput)}\n        onBlur={(evt, value) => changePage(Number(value) - 1)}\n        onKeyDown={(evt, value) =>\n          isKey(evt, \"Enter\") && changePage(Number(value) - 1)\n        }\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </div>\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <div className={classes.pageSizeOptions} {...showPageProps}>\n        {showPageSizeOptions && (\n          <>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes?.pageSizeTextContainer}\n              >\n                {labels?.pageSizePrev}\n              </HvTypography>\n            </Hidden>\n            <HvSelect\n              id={setId(id, \"pageSize\")}\n              disabled={pageSize === 0}\n              className={classes.pageSizeOptionsSelect}\n              aria-label={labels?.pageSizeSelectorDescription}\n              onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n              value={pageSize}\n              classes={{\n                header: classes.pageSizeHeader,\n                root: classes.pageSizeRoot,\n              }}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </HvSelect>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes.pageSizeTextContainer}\n              >\n                {labels?.pageSizeEntryName}\n              </HvTypography>\n            </Hidden>\n          </>\n        )}\n      </div>\n      <div className={classes.pageNavigator} {...navigationProps}>\n        <HvIconButton\n          id={setId(id, \"firstPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          title={labels?.firstPage || labels?.paginationFirstPageTitle}\n        >\n          <Start\n            role=\"none\"\n            className={classes.icon}\n            color={setColor(!canPrevious)}\n            iconSize=\"XS\"\n          />\n        </HvIconButton>\n        <HvIconButton\n          id={setId(id, \"previousPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          title={labels?.previousPage || labels?.paginationPreviousPageTitle}\n        >\n          <Backwards\n            role=\"none\"\n            className={classes.icon}\n            color={setColor(!canPrevious)}\n            iconSize=\"XS\"\n          />\n        </HvIconButton>\n        <div className={classes.pageInfo}>\n          {showPageJump ? (\n            renderPageJump()\n          ) : (\n            <HvTypography variant=\"caption2\" component=\"span\">{`${\n              page + 1\n            }`}</HvTypography>\n          )}\n          <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n          <HvTypography\n            component=\"span\"\n            id={setId(id, \"totalPages\")}\n            className={classes.totalPagesTextContainer}\n          >\n            {pages}\n          </HvTypography>\n        </div>\n        <HvIconButton\n          id={setId(id, \"nextPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          title={labels?.nextPage || labels?.paginationNextPageTitle}\n        >\n          <Forwards\n            role=\"none\"\n            className={classes.icon}\n            color={setColor(!canNext)}\n            iconSize=\"XS\"\n          />\n        </HvIconButton>\n        <HvIconButton\n          id={setId(id, \"lastPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          title={labels?.lastPage || labels?.paginationLastPageTitle}\n        >\n          <End\n            className={classes.icon}\n            color={setColor(!canNext)}\n            iconSize=\"XS\"\n          />\n        </HvIconButton>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.styles.js","sources":["../../../src/Pagination/Pagination.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { inputClasses } from \"../Input\";\nimport { createClasses } from \"../utils/classes\";\nimport { baseDropdownClasses } from \"../BaseDropdown\";\n\nconst hoverColor = theme.colors.atmo3;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvPagination\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    zIndex: 1,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"stretch\",\n    flexWrap: \"wrap\",\n    marginTop: theme.space.sm,\n    [`& $pageSizeInput`]: {\n      ...(theme.typography.caption2 as CSSProperties),\n      \"&:focus\": {\n        padding: 0,\n      },\n    },\n    [`& $pageSizeInputContainer`]: {\n      width: 24,\n      minWidth: 24,\n      maxWidth: theme.spacing(8),\n    },\n    [`&& $pageSizeInputRoot`]: {\n      backgroundColor: \"transparent\",\n      height: \"24px\",\n      \"&:focus, &:focus-within, &:hover\": {\n        backgroundColor: hoverColor,\n      },\n    },\n  },\n  /** Styles applied to the page size selector container. */\n  pageSizeOptions: {\n    display: \"flex\",\n    position: \"absolute\",\n    height: 24,\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    left: \"0\",\n  },\n  pageSizeHeader: {\n    height: 24,\n    display: \"flex\",\n    alignItems: \"center\",\n    [`& .${baseDropdownClasses.arrowContainer}`]: {\n      marginTop: -2,\n    },\n  },\n  pageSizeRoot: {\n    width: \"auto\",\n  },\n  /** Styles applied to the element that holds the labels for the page size selector */\n  pageSizeTextContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: \"24px\",\n    padding: \"8px 0\",\n    ...(theme.typography.caption2 as CSSProperties),\n  },\n  totalPagesTextContainer: {\n    ...(theme.typography.caption2 as CSSProperties),\n  },\n  /** Styles applied to the page size selector dropdown element. */\n  pageSizeOptionsSelect: {\n    display: \"inline-block\",\n    margin: `0px ${theme.space.xs}`,\n    width: \"auto\",\n\n    ...(theme.typography.caption2 as CSSProperties),\n  },\n  /** Styles applied to the page navigation container. */\n  pageNavigator: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"32px\",\n    gap: 8,\n  },\n  /** Styles applied to each navigation `HvButton` icon container. */\n  iconContainer: {\n    padding: 0,\n  },\n  /** Styles applied to each navigation icon. */\n  icon: {},\n  /** Styles applied to the central page information container. */\n  pageInfo: {\n    display: \"inline-block\",\n    whiteSpace: \"nowrap\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n  },\n  /** Styles applied to the page selector input container. */\n  pageJump: {\n    display: \"inline-block\",\n    marginRight: `4px`,\n    [`& .${inputClasses.inputRoot}`]: {\n      [`& $pageSizeInput`]: {\n        paddingLeft: `4px`,\n        paddingRight: `4px`,\n        margin: 0,\n        textAlign: \"center\",\n        borderRadius: theme.radii.base,\n        MozAppearance: \"textfield\",\n        \"&:focus\": {\n          backgroundColor: hoverColor,\n        },\n        \"&:hover\": {\n          cursor: \"pointer\",\n        },\n      },\n    },\n  },\n  /** Styles passed down to the page selector Input component as `input`. */\n  pageSizeInput: {},\n  /** Styles passed down to the page selector Input root. */\n  pageSizeInputRoot: {},\n  /** Styles passed down to the page selector Input component as `container`. */\n  pageSizeInputContainer: {},\n});\n"],"names":["baseDropdownClasses","inputClasses"],"mappings":";;;;;AAQA,MAAM,aAAa,MAAM,OAAO;AAEzB,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA;AAAA,EAEzE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW,MAAM,MAAM;AAAA,IACvB,CAAC,kBAAkB,GAAG;AAAA,MACpB,GAAI,MAAM,WAAW;AAAA,MACrB,WAAW;AAAA,QACT,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,2BAA2B,GAAG;AAAA,MAC7B,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU,MAAM,QAAQ,CAAC;AAAA,IAC3B;AAAA,IACA,CAAC,uBAAuB,GAAG;AAAA,MACzB,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,oCAAoC;AAAA,QAClC,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAEA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAMA,gBAAoB,cAAc,EAAE,GAAG;AAAA,MAC5C,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,OAAO;AAAA,EACT;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA,EACA,yBAAyB;AAAA,IACvB,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,QAAQ,OAAO,MAAM,MAAM,EAAE;AAAA,IAC7B,OAAO;AAAA,IAEP,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA;AAAA,EAEA,eAAe;AAAA,IACb,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,KAAK;AAAA,EACP;AAAA;AAAA,EAEA,eAAe;AAAA,IACb,SAAS;AAAA,EACX;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA;AAAA,EAEP,UAAU;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,aAAa;AAAA,IACb,CAAC,MAAMC,gBAAa,SAAS,EAAE,GAAG;AAAA,MAChC,CAAC,kBAAkB,GAAG;AAAA,QACpB,aAAa;AAAA,QACb,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,cAAc,MAAM,MAAM;AAAA,QAC1B,eAAe;AAAA,QACf,WAAW;AAAA,UACT,iBAAiB;AAAA,QACnB;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAEA,eAAe,CAAC;AAAA;AAAA,EAEhB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,wBAAwB,CAAC;AAC3B,CAAC;"}
+{"version":3,"file":"Pagination.styles.js","sources":["../../../src/Pagination/Pagination.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { inputClasses } from \"../Input\";\nimport { createClasses } from \"../utils/classes\";\nimport { baseDropdownClasses } from \"../BaseDropdown\";\n\nconst hoverColor = theme.colors.atmo3;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvPagination\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    zIndex: 1,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"stretch\",\n    flexWrap: \"wrap\",\n    marginTop: theme.space.sm,\n    [`& $pageSizeInput`]: {\n      ...(theme.typography.caption2 as React.CSSProperties),\n      \"&:focus\": {\n        padding: 0,\n      },\n    },\n    [`& $pageSizeInputContainer`]: {\n      width: 24,\n      minWidth: 24,\n      maxWidth: theme.spacing(8),\n    },\n    [`&& $pageSizeInputRoot`]: {\n      backgroundColor: \"transparent\",\n      height: \"24px\",\n      \"&:focus, &:focus-within, &:hover\": {\n        backgroundColor: hoverColor,\n      },\n    },\n  },\n  /** Styles applied to the page size selector container. */\n  pageSizeOptions: {\n    display: \"flex\",\n    position: \"absolute\",\n    height: 24,\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    left: \"0\",\n  },\n  pageSizeHeader: {\n    height: 24,\n    display: \"flex\",\n    alignItems: \"center\",\n    [`& .${baseDropdownClasses.arrowContainer}`]: {\n      marginTop: -2,\n    },\n  },\n  pageSizeRoot: {\n    width: \"auto\",\n  },\n  /** Styles applied to the element that holds the labels for the page size selector */\n  pageSizeTextContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: \"24px\",\n    padding: \"8px 0\",\n    ...(theme.typography.caption2 as React.CSSProperties),\n  },\n  totalPagesTextContainer: {\n    ...(theme.typography.caption2 as React.CSSProperties),\n  },\n  /** Styles applied to the page size selector dropdown element. */\n  pageSizeOptionsSelect: {\n    display: \"inline-block\",\n    margin: `0px ${theme.space.xs}`,\n    width: \"auto\",\n\n    ...(theme.typography.caption2 as React.CSSProperties),\n  },\n  /** Styles applied to the page navigation container. */\n  pageNavigator: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"32px\",\n    gap: 8,\n  },\n  /** Styles applied to each navigation `HvButton` icon container. */\n  iconContainer: {\n    padding: 0,\n  },\n  /** Styles applied to each navigation icon. */\n  icon: {},\n  /** Styles applied to the central page information container. */\n  pageInfo: {\n    display: \"inline-block\",\n    whiteSpace: \"nowrap\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n  },\n  /** Styles applied to the page selector input container. */\n  pageJump: {\n    display: \"inline-block\",\n    marginRight: `4px`,\n    [`& .${inputClasses.inputRoot}`]: {\n      [`& $pageSizeInput`]: {\n        paddingLeft: `4px`,\n        paddingRight: `4px`,\n        margin: 0,\n        textAlign: \"center\",\n        borderRadius: theme.radii.base,\n        MozAppearance: \"textfield\",\n        \"&:focus\": {\n          backgroundColor: hoverColor,\n        },\n        \"&:hover\": {\n          cursor: \"pointer\",\n        },\n      },\n    },\n  },\n  /** Styles passed down to the page selector Input component as `input`. */\n  pageSizeInput: {},\n  /** Styles passed down to the page selector Input root. */\n  pageSizeInputRoot: {},\n  /** Styles passed down to the page selector Input component as `container`. */\n  pageSizeInputContainer: {},\n});\n"],"names":["baseDropdownClasses","inputClasses"],"mappings":";;;;;AAMA,MAAM,aAAa,MAAM,OAAO;AAEzB,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA;AAAA,EAEzE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW,MAAM,MAAM;AAAA,IACvB,CAAC,kBAAkB,GAAG;AAAA,MACpB,GAAI,MAAM,WAAW;AAAA,MACrB,WAAW;AAAA,QACT,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,2BAA2B,GAAG;AAAA,MAC7B,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU,MAAM,QAAQ,CAAC;AAAA,IAC3B;AAAA,IACA,CAAC,uBAAuB,GAAG;AAAA,MACzB,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,oCAAoC;AAAA,QAClC,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAEA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAMA,gBAAoB,cAAc,EAAE,GAAG;AAAA,MAC5C,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,OAAO;AAAA,EACT;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA,EACA,yBAAyB;AAAA,IACvB,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,QAAQ,OAAO,MAAM,MAAM,EAAE;AAAA,IAC7B,OAAO;AAAA,IAEP,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA;AAAA,EAEA,eAAe;AAAA,IACb,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,KAAK;AAAA,EACP;AAAA;AAAA,EAEA,eAAe;AAAA,IACb,SAAS;AAAA,EACX;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA;AAAA,EAEP,UAAU;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,aAAa;AAAA,IACb,CAAC,MAAMC,gBAAa,SAAS,EAAE,GAAG;AAAA,MAChC,CAAC,kBAAkB,GAAG;AAAA,QACpB,aAAa;AAAA,QACb,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,cAAc,MAAM,MAAM;AAAA,QAC1B,eAAe;AAAA,QACf,WAAW;AAAA,UACT,iBAAiB;AAAA,QACnB;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAEA,eAAe,CAAC;AAAA;AAAA,EAEhB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,wBAAwB,CAAC;AAC3B,CAAC;"}

package/dist/esm/Pagination/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/Pagination/Select.tsx"],"sourcesContent":["import { SyntheticEvent, useState } from \"react\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvSelectionList, HvSelectionListProps } from \"../SelectionList\";\nimport { HvPanel } from \"../Panel\";\nimport { HvListItem, HvListItemProps } from \"../ListContainer\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { useClasses } from \"./Select.styles\";\n\nexport const Option = ({ ...props }: Partial<HvListItemProps>) => (\n  <HvListItem {...props} />\n);\n\nexport interface HvPaginationSelectProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  onChange: (event: React.SyntheticEvent, val: number) => void;\n  value: number;\n}\n\nconst HvSelect = (props: HvPaginationSelectProps) => {\n  const {\n    className,\n    classes: classesProp,\n    onChange,\n    disabled,\n    value,\n    children,\n    ...others\n  } = useDefaultProps(\"HvPaginationSelect\", props);\n  const { classes } = useClasses(classesProp);\n  const [open, setOpen] = useState(false);\n\n  const handleSelect: HvSelectionListProps[\"onChange\"] = (evt, val) => {\n    onChange?.(evt, val);\n    setOpen(false);\n  };\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (_evt, s) => {\n    setOpen(s);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  return (\n    <HvBaseDropdown\n      className={className}\n      classes={{\n        selection: classes.selection,\n        header: classes.header,\n        headerOpen: classes.headerOpen,\n        root: classes.root,\n      }}\n      expanded={open}\n      onToggle={handleToggle}\n      onContainerCreation={setFocusToContent}\n      placeholder={value}\n      disabled={disabled}\n      variableWidth\n      {...others}\n    >\n      <HvPanel>\n        <HvSelectionList value={value} onChange={handleSelect}>\n          {children}\n        </HvSelectionList>\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n\nexport default HvSelect;\n"],"names":[],"mappings":";;;;;;;;AAWa,MAAA,SAAS,CAAC,EAAE,GAAG,MAC1B,MAAA,oBAAC,YAAY,EAAA,GAAG,OAAO;AASzB,MAAM,WAAW,CAAC,UAAmC;AAC7C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEhC,QAAA,eAAiD,CAAC,KAAK,QAAQ;AACnE,eAAW,KAAK,GAAG;AACnB,YAAQ,KAAK;AAAA,EAAA;AAGT,QAAA,eAAgD,CAAC,MAAM,MAAM;AACjE,YAAQ,CAAC;AAAA,EAAA;AAGL,QAAA,oBAAgE,CACpE,iBACG;AACG,UAAA,YACJ,gBAAgB,OAAO,CAAC,GAAG,aAAa,qBAAqB,IAAI,CAAC,IAAI;AAC9D,cAAA,MAAM,CAAC,aAAa;AACxB,UAAA,SAAS,YAAY,GAAG;AAC1B,iBAAS,MAAM;AACR,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA;AAID,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,QACP,WAAW,QAAQ;AAAA,QACnB,QAAQ,QAAQ;AAAA,QAChB,YAAY,QAAQ;AAAA,QACpB,MAAM,QAAQ;AAAA,MAChB;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,qBAAqB;AAAA,MACrB,aAAa;AAAA,MACb;AAAA,MACA,eAAa;AAAA,MACZ,GAAG;AAAA,MAEJ,UAAA,oBAAC,WACC,UAAC,oBAAA,iBAAA,EAAgB,OAAc,UAAU,cACtC,UACH,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,MAAA,aAAe;"}
+{"version":3,"file":"Select.js","sources":["../../../src/Pagination/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvSelectionList, HvSelectionListProps } from \"../SelectionList\";\nimport { HvPanel } from \"../Panel\";\nimport { HvListItem, HvListItemProps } from \"../ListContainer\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { useClasses } from \"./Select.styles\";\n\nexport const Option = ({ ...props }: Partial<HvListItemProps>) => (\n  <HvListItem {...props} />\n);\n\nexport interface HvPaginationSelectProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  onChange: (event: React.SyntheticEvent, val: number) => void;\n  value: number;\n}\n\nconst HvSelect = (props: HvPaginationSelectProps) => {\n  const {\n    className,\n    classes: classesProp,\n    onChange,\n    disabled,\n    value,\n    children,\n    ...others\n  } = useDefaultProps(\"HvPaginationSelect\", props);\n  const { classes } = useClasses(classesProp);\n  const [open, setOpen] = useState(false);\n\n  const handleSelect: HvSelectionListProps[\"onChange\"] = (evt, val) => {\n    onChange?.(evt, val);\n    setOpen(false);\n  };\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (_evt, s) => {\n    setOpen(s);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  return (\n    <HvBaseDropdown\n      className={className}\n      classes={{\n        selection: classes.selection,\n        header: classes.header,\n        headerOpen: classes.headerOpen,\n        root: classes.root,\n      }}\n      expanded={open}\n      onToggle={handleToggle}\n      onContainerCreation={setFocusToContent}\n      placeholder={value}\n      disabled={disabled}\n      variableWidth\n      {...others}\n    >\n      <HvPanel>\n        <HvSelectionList value={value} onChange={handleSelect}>\n          {children}\n        </HvSelectionList>\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n\nexport default HvSelect;\n"],"names":[],"mappings":";;;;;;;;AAWa,MAAA,SAAS,CAAC,EAAE,GAAG,MAC1B,MAAA,oBAAC,YAAY,EAAA,GAAG,OAAO;AASzB,MAAM,WAAW,CAAC,UAAmC;AAC7C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEhC,QAAA,eAAiD,CAAC,KAAK,QAAQ;AACnE,eAAW,KAAK,GAAG;AACnB,YAAQ,KAAK;AAAA,EAAA;AAGT,QAAA,eAAgD,CAAC,MAAM,MAAM;AACjE,YAAQ,CAAC;AAAA,EAAA;AAGL,QAAA,oBAAgE,CACpE,iBACG;AACG,UAAA,YACJ,gBAAgB,OAAO,CAAC,GAAG,aAAa,qBAAqB,IAAI,CAAC,IAAI;AAC9D,cAAA,MAAM,CAAC,aAAa;AACxB,UAAA,SAAS,YAAY,GAAG;AAC1B,iBAAS,MAAM;AACR,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA;AAID,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,QACP,WAAW,QAAQ;AAAA,QACnB,QAAQ,QAAQ;AAAA,QAChB,YAAY,QAAQ;AAAA,QACpB,MAAM,QAAQ;AAAA,MAChB;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,qBAAqB;AAAA,MACrB,aAAa;AAAA,MACb;AAAA,MACA,eAAa;AAAA,MACZ,GAAG;AAAA,MAEJ,UAAA,oBAAC,WACC,UAAC,oBAAA,iBAAA,EAAgB,OAAc,UAAU,cACtC,UACH,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,MAAA,aAAe;"}

package/dist/esm/Radio/Radio.js

@@ -40,7 +40,7 @@ const HvRadio = forwardRef(
       ...others
     } = useDefaultProps("HvRadio", props);
     const { classes, cx } = useClasses(classesProp);
-    const elementId = useUniqueId(id, "hvradio");
+    const elementId = useUniqueId(id);
     const [focusVisible, setFocusVisible] = useState(false);
     const onFocusVisibleCallback = useCallback(
       (evt) => {

package/dist/esm/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/Radio/Radio.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\n\nimport { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseRadio } from \"../BaseRadio\";\nimport {\n  HvWarningText,\n  HvLabelProps,\n  isInvalid,\n  HvFormElement,\n  HvLabel,\n} from \"../Forms\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Radio.styles\";\n\nexport { staticClasses as radioClasses };\n\nexport type HvRadioClasses = ExtractNames<typeof useClasses>;\n\nexport type HvRadioStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\"> {\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvRadioClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that user input is required on the form element.\n   *\n   * If a single radio button in a group has the required attribute, a radio button in\n   * that group must be check, though it doesn't have to be the one with the attribute is applied.\n   *\n   * For that reason, the component doesn't make any uncontrolled changes to its validation status.\n   * That should ideally be managed in the context of a radio button group.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   */\n  status?: HvRadioStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the radio button.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /** @ignore */\n  ref?: MuiRadioProps[\"ref\"];\n  /** @ignore */\n  component?: MuiRadioProps[\"component\"];\n}\n\n/**\n * A Radio Button is a mechanism that allows user to select just an option from a group of options.\n *\n * It should used in a Radio Button Group to present the user with a range of options from\n * which the user <b>may select just one option</b> to complete their task.\n *\n * Individual use of radio buttons, at least uncontrolled, is unadvised as React state management doesn't\n * respond to the browser's native management of radio inputs checked state.\n */\nexport const HvRadio = forwardRef<HTMLButtonElement, HvRadioProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      labelProps,\n      checked,\n      defaultChecked = false,\n      onChange,\n      status = \"standBy\",\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n      semantic = false,\n      inputProps,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvRadio\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id, \"hvradio\");\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const onFocusVisibleCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible]\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur]\n    );\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked)\n    );\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n        setIsChecked(newChecked);\n\n        onChange?.(evt, newChecked, value);\n      },\n      [onChange, setIsChecked, value]\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled\n    const canShowError =\n      ariaErrorMessage == null &&\n      status !== undefined &&\n      statusMessage !== undefined;\n\n    const hasLabel = label != null;\n\n    const isStateInvalid = isInvalid(status);\n\n    let errorMessageId: string | undefined;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    const radio = (\n      <HvBaseRadio\n        ref={ref}\n        id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        className={cx(classes.radio, {\n          [classes.invalidRadio]: isStateInvalid,\n        })}\n        disabled={disabled}\n        readOnly={readOnly}\n        onChange={onLocalChange}\n        value={value}\n        checked={isChecked}\n        semantic={semantic}\n        inputProps={{\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-describedby\": ariaDescribedBy,\n          ...inputProps,\n        }}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={status || \"standBy\"}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {hasLabel ? (\n          <div\n            className={cx(classes.container, {\n              [classes.disabled]: disabled,\n              [classes.focusVisible]: !!(focusVisible && label),\n              [classes.invalidContainer]: isStateInvalid,\n            })}\n          >\n            {radio}\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n              {...labelProps}\n            />\n          </div>\n        ) : (\n          radio\n        )}\n        {canShowError && (\n          <HvWarningText id={setId(elementId, \"error\")} disableBorder>\n            {statusMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Radio.js","sources":["../../../src/Radio/Radio.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\n\nimport { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseRadio } from \"../BaseRadio\";\nimport {\n  HvWarningText,\n  HvLabelProps,\n  isInvalid,\n  HvFormElement,\n  HvLabel,\n} from \"../Forms\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Radio.styles\";\n\nexport { staticClasses as radioClasses };\n\nexport type HvRadioClasses = ExtractNames<typeof useClasses>;\n\nexport type HvRadioStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\"> {\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvRadioClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that user input is required on the form element.\n   *\n   * If a single radio button in a group has the required attribute, a radio button in\n   * that group must be check, though it doesn't have to be the one with the attribute is applied.\n   *\n   * For that reason, the component doesn't make any uncontrolled changes to its validation status.\n   * That should ideally be managed in the context of a radio button group.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   */\n  status?: HvRadioStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the radio button.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /** @ignore */\n  ref?: MuiRadioProps[\"ref\"];\n  /** @ignore */\n  component?: MuiRadioProps[\"component\"];\n}\n\n/**\n * A Radio Button is a mechanism that allows user to select just an option from a group of options.\n *\n * It should used in a Radio Button Group to present the user with a range of options from\n * which the user <b>may select just one option</b> to complete their task.\n *\n * Individual use of radio buttons, at least uncontrolled, is unadvised as React state management doesn't\n * respond to the browser's native management of radio inputs checked state.\n */\nexport const HvRadio = forwardRef<HTMLButtonElement, HvRadioProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      labelProps,\n      checked,\n      defaultChecked = false,\n      onChange,\n      status = \"standBy\",\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n      semantic = false,\n      inputProps,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvRadio\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const onFocusVisibleCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible]\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur]\n    );\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked)\n    );\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n        setIsChecked(newChecked);\n\n        onChange?.(evt, newChecked, value);\n      },\n      [onChange, setIsChecked, value]\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled\n    const canShowError =\n      ariaErrorMessage == null &&\n      status !== undefined &&\n      statusMessage !== undefined;\n\n    const hasLabel = label != null;\n\n    const isStateInvalid = isInvalid(status);\n\n    let errorMessageId: string | undefined;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    const radio = (\n      <HvBaseRadio\n        ref={ref}\n        id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        className={cx(classes.radio, {\n          [classes.invalidRadio]: isStateInvalid,\n        })}\n        disabled={disabled}\n        readOnly={readOnly}\n        onChange={onLocalChange}\n        value={value}\n        checked={isChecked}\n        semantic={semantic}\n        inputProps={{\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-describedby\": ariaDescribedBy,\n          ...inputProps,\n        }}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={status || \"standBy\"}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {hasLabel ? (\n          <div\n            className={cx(classes.container, {\n              [classes.disabled]: disabled,\n              [classes.focusVisible]: !!(focusVisible && label),\n              [classes.invalidContainer]: isStateInvalid,\n            })}\n          >\n            {radio}\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n              {...labelProps}\n            />\n          </div>\n        ) : (\n          radio\n        )}\n        {canShowError && (\n          <HvWarningText id={setId(elementId, \"error\")} disableBorder>\n            {statusMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/RadioGroup/RadioGroup.js

@@ -49,7 +49,7 @@ const HvRadioGroup = forwardRef(
       ...others
     } = useDefaultProps("HvRadioGroup", props);
     const { classes, cx } = useClasses(classesProp);
-    const elementId = useUniqueId(id, "hvradiogroup");
+    const elementId = useUniqueId(id);
     const [value, setValue] = useControlled(
       valueProp,
       defaultValue !== void 0 ? defaultValue : (

package/dist/esm/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n  Children,\n  useMemo,\n  useCallback,\n  cloneElement,\n  forwardRef,\n} from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./RadioGroup.styles\";\n\nexport { staticClasses as radioGroupClasses };\n\nexport type HvRadioGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRadioGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children radio buttons, unless they already have one (which they shouldn't).\n   */\n  name?: string;\n  /**\n   * The value of the form element, represented in one of the child radio buttons values.\n   *\n   * When defined the radio button group state becomes controlled.\n   */\n  value?: any;\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   * If `true` the state is propagated to the children radio buttons' input element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;\n  /**\n   * Indicates whether the radio buttons group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvRadioGroupClasses;\n}\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const childrenArray = Children.toArray(children);\n  const childrenCount = childrenArray.length;\n  for (let i = 0; i !== childrenCount; i += 1) {\n    const child: any = childrenArray[i];\n\n    const childIsControlled = child?.props?.checked !== undefined;\n    const childIsSelected = childIsControlled\n      ? child?.props?.checked\n      : child?.props?.defaultChecked;\n\n    if (childIsSelected) {\n      return child?.props?.value;\n    }\n  }\n\n  return null;\n};\n\n/**\n * A group of radio buttons.\n *\n * A radio group is a type of selection list that can only have a single entry checked at any one time.\n */\nexport const HvRadioGroup = forwardRef<HTMLDivElement, HvRadioGroupProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      children,\n      name,\n      value: valueProp,\n      defaultValue,\n      label,\n      description,\n      status,\n      statusMessage,\n      required = false,\n      readOnly = false,\n      disabled = false,\n      orientation = \"vertical\",\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      ...others\n    } = useDefaultProps(\"HvRadioGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id, \"hvradiogroup\");\n\n    const [value, setValue] = useControlled(\n      valueProp,\n      defaultValue !== undefined\n        ? defaultValue\n        : // When uncontrolled and no default value is given,\n          // extract the initial selected values from the children own state\n          () => getValueFromSelectedChildren(children)\n    );\n\n    const onChildChangeInterceptor = useCallback(\n      (\n        childOnChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          checked: boolean,\n          value: any\n        ) => void,\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean,\n        newValue: any\n      ) => {\n        childOnChange?.(event, isChecked, newValue);\n\n        onChange?.(event, newValue);\n\n        setValue(newValue);\n      },\n      [onChange, setValue]\n    );\n\n    const modifiedChildren = useMemo(() => {\n      return Children.map(children, (child: any) => {\n        const childValue = child?.props?.value ?? \"on\";\n\n        const childIsSelected = childValue === value;\n\n        return cloneElement(child, {\n          checked: childIsSelected,\n          name: child?.props?.name || name || elementId,\n          onChange: (\n            event: React.ChangeEvent<HTMLInputElement>,\n            isChecked: boolean,\n            newValue: any\n          ) =>\n            onChildChangeInterceptor(\n              child?.props?.onChange,\n              event,\n              isChecked,\n              newValue\n            ),\n          inputProps: {\n            ...child?.props?.inputProps,\n            // Set the required attribute directly in the input\n            // the radio form element context shouldn't be aware so the\n            // label doesn't show redundant asterisk\n            required,\n          },\n          disabled: disabled || child?.props?.disabled,\n          readOnly: readOnly || child?.props?.readOnly,\n        });\n      });\n    }, [\n      children,\n      disabled,\n      elementId,\n      name,\n      onChildChangeInterceptor,\n      readOnly,\n      required,\n      value,\n    ]);\n\n    // The error message area will only be created if:\n    //   - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={status || \"standBy\"}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            label={label}\n            className={classes.label}\n          />\n        )}\n\n        {description && (\n          <HvInfoMessage id={setId(elementId, \"description\")}>\n            {description}\n          </HvInfoMessage>\n        )}\n\n        <div\n          ref={ref}\n          role=\"radiogroup\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n          }\n          aria-invalid={status === \"invalid\" ? true : undefined}\n          aria-errormessage={status === \"invalid\" ? errorMessageId : undefined}\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          className={cx(classes.group, {\n            [classes.vertical]: orientation === \"vertical\",\n            [classes.horizontal]: orientation === \"horizontal\",\n            [classes.invalid]: status === \"invalid\",\n          })}\n          {...others}\n        >\n          {modifiedChildren}\n        </div>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {statusMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n  Children,\n  useMemo,\n  useCallback,\n  cloneElement,\n  forwardRef,\n} from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./RadioGroup.styles\";\n\nexport { staticClasses as radioGroupClasses };\n\nexport type HvRadioGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRadioGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children radio buttons, unless they already have one (which they shouldn't).\n   */\n  name?: string;\n  /**\n   * The value of the form element, represented in one of the child radio buttons values.\n   *\n   * When defined the radio button group state becomes controlled.\n   */\n  value?: any;\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children radio buttons.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   * If `true` the state is propagated to the children radio buttons' input element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;\n  /**\n   * Indicates whether the radio buttons group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvRadioGroupClasses;\n}\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const childrenArray = Children.toArray(children);\n  const childrenCount = childrenArray.length;\n  for (let i = 0; i !== childrenCount; i += 1) {\n    const child: any = childrenArray[i];\n\n    const childIsControlled = child?.props?.checked !== undefined;\n    const childIsSelected = childIsControlled\n      ? child?.props?.checked\n      : child?.props?.defaultChecked;\n\n    if (childIsSelected) {\n      return child?.props?.value;\n    }\n  }\n\n  return null;\n};\n\n/**\n * A group of radio buttons.\n *\n * A radio group is a type of selection list that can only have a single entry checked at any one time.\n */\nexport const HvRadioGroup = forwardRef<HTMLDivElement, HvRadioGroupProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      children,\n      name,\n      value: valueProp,\n      defaultValue,\n      label,\n      description,\n      status,\n      statusMessage,\n      required = false,\n      readOnly = false,\n      disabled = false,\n      orientation = \"vertical\",\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      ...others\n    } = useDefaultProps(\"HvRadioGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const [value, setValue] = useControlled(\n      valueProp,\n      defaultValue !== undefined\n        ? defaultValue\n        : // When uncontrolled and no default value is given,\n          // extract the initial selected values from the children own state\n          () => getValueFromSelectedChildren(children)\n    );\n\n    const onChildChangeInterceptor = useCallback(\n      (\n        childOnChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          checked: boolean,\n          value: any\n        ) => void,\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean,\n        newValue: any\n      ) => {\n        childOnChange?.(event, isChecked, newValue);\n\n        onChange?.(event, newValue);\n\n        setValue(newValue);\n      },\n      [onChange, setValue]\n    );\n\n    const modifiedChildren = useMemo(() => {\n      return Children.map(children, (child: any) => {\n        const childValue = child?.props?.value ?? \"on\";\n\n        const childIsSelected = childValue === value;\n\n        return cloneElement(child, {\n          checked: childIsSelected,\n          name: child?.props?.name || name || elementId,\n          onChange: (\n            event: React.ChangeEvent<HTMLInputElement>,\n            isChecked: boolean,\n            newValue: any\n          ) =>\n            onChildChangeInterceptor(\n              child?.props?.onChange,\n              event,\n              isChecked,\n              newValue\n            ),\n          inputProps: {\n            ...child?.props?.inputProps,\n            // Set the required attribute directly in the input\n            // the radio form element context shouldn't be aware so the\n            // label doesn't show redundant asterisk\n            required,\n          },\n          disabled: disabled || child?.props?.disabled,\n          readOnly: readOnly || child?.props?.readOnly,\n        });\n      });\n    }, [\n      children,\n      disabled,\n      elementId,\n      name,\n      onChildChangeInterceptor,\n      readOnly,\n      required,\n      value,\n    ]);\n\n    // The error message area will only be created if:\n    //   - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={status || \"standBy\"}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            label={label}\n            className={classes.label}\n          />\n        )}\n\n        {description && (\n          <HvInfoMessage id={setId(elementId, \"description\")}>\n            {description}\n          </HvInfoMessage>\n        )}\n\n        <div\n          ref={ref}\n          role=\"radiogroup\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n          }\n          aria-invalid={status === \"invalid\" ? true : undefined}\n          aria-errormessage={status === \"invalid\" ? errorMessageId : undefined}\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          className={cx(classes.group, {\n            [classes.vertical]: orientation === \"vertical\",\n            [classes.horizontal]: orientation === \"horizontal\",\n            [classes.invalid]: status === \"invalid\",\n          })}\n          {...others}\n        >\n          {modifiedChildren}\n        </div>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {statusMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/ScrollTo/Horizontal/ScrollToHorizontal.js

@@ -38,7 +38,7 @@ const HvScrollToHorizontal = (props) => {
   const downSm = useMediaQuery(muiTheme.breakpoints.down("sm"));
   const upMd = useMediaQuery(muiTheme.breakpoints.up("md"));
   const { activeTheme } = useTheme$1();
-  const elementId = useUniqueId(id, "hvHorizontalScrollto");
+  const elementId = useUniqueId(id);
   const [selectedIndex, setScrollTo, elements] = useScrollTo(
     defaultSelectedIndex,
     scrollElementId,

package/dist/esm/ScrollTo/Horizontal/ScrollToHorizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../src/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToHorizontalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToHorizontalOption[];\n  /**\n   * Should the active element be reflected in the URL.\n   *\n   * @default true\n   *\n   * @deprecated Use `navigationMode` instead.\n   * */\n  href?: boolean;\n  /**\n   * The navigation mode to be used when the user clicks on a tab element.\n   * - `push` will add a new entry to the history stack.\n   * - `replace` will replace the current entry on the history stack.\n   * - `none` will not add any entry to the history stack.\n   *\n   * Defaults to `push`, unless the deprecated `href` prop is set to `false`, in which case it defaults to `none`.\n   *\n   * When set to `none`, then each element will render a button instead of a link.\n   *\n   * @default \"push\"\n   */\n  navigationMode?: \"push\" | \"replace\" | \"none\";\n  /**\n   * When set to `true`, the generated links will be relative (e.g. `#section`).\n   * Relative URLs take into account not only the current location, but also the base URL if it is set (i.e. a `<base>` tag).\n   * This can lead to unexpected behavior.\n   *\n   * When set to `false`, the links will be generated from the current location's full URL (e.g. `http://example.com/hello/world?value=123#section`).\n   *\n   * @default false\n   */\n  relativeLinks?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Horizontal scroll to. */\n  position?: HvScrollToHorizontalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (\n    event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (\n    event: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    navigationMode = href ? \"push\" : \"none\",\n    relativeLinks = false,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"top\",\n    ...others\n  } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const muiTheme = useMuiTheme();\n\n  const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const { activeTheme } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n  const [selectedIndex, setScrollTo, elements] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    navigationMode,\n    relativeLinks,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition);\n    });\n  }, [options, tooltipPosition]);\n\n  const NotSelected = useCallback(() => {\n    return (\n      <div className={classes.notSelectedRoot}>\n        <div className={classes.notSelected} />\n      </div>\n    );\n  }, [classes.notSelectedRoot, classes.notSelected]);\n\n  const Selected = useCallback(() => {\n    return (\n      <CurrentStep\n        height={activeTheme?.scrollTo.dotSelectedSize}\n        width={activeTheme?.scrollTo.dotSelectedSize}\n        className={classes.selected}\n      />\n    );\n  }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n  const tabs = elements.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvHorizontalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          if (navigationMode !== \"none\") {\n            event.preventDefault();\n          }\n\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            if (navigationMode !== \"none\") {\n              event.preventDefault();\n            }\n\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        href={navigationMode !== \"none\" ? option.href : undefined}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n      >\n        <p>{option.label}</p>\n        {selected ? <Selected /> : <NotSelected />}\n      </HvHorizontalScrollListItem>\n    );\n  });\n\n  return (\n    <ol\n      className={cx(\n        css({\n          width:\n            position === \"fixed\" && (upMd || downSm)\n              ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n              : \"100%\",\n          marginTop: 0,\n          marginBottom: 0,\n          marginRight:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          marginLeft:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n        }),\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n        },\n        className\n      )}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["useMuiTheme","useTheme"],"mappings":"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"}
+{"version":3,"file":"ScrollToHorizontal.js","sources":["../../../../src/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToHorizontalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToHorizontalOption[];\n  /**\n   * Should the active element be reflected in the URL.\n   *\n   * @default true\n   *\n   * @deprecated Use `navigationMode` instead.\n   * */\n  href?: boolean;\n  /**\n   * The navigation mode to be used when the user clicks on a tab element.\n   * - `push` will add a new entry to the history stack.\n   * - `replace` will replace the current entry on the history stack.\n   * - `none` will not add any entry to the history stack.\n   *\n   * Defaults to `push`, unless the deprecated `href` prop is set to `false`, in which case it defaults to `none`.\n   *\n   * When set to `none`, then each element will render a button instead of a link.\n   *\n   * @default \"push\"\n   */\n  navigationMode?: \"push\" | \"replace\" | \"none\";\n  /**\n   * When set to `true`, the generated links will be relative (e.g. `#section`).\n   * Relative URLs take into account not only the current location, but also the base URL if it is set (i.e. a `<base>` tag).\n   * This can lead to unexpected behavior.\n   *\n   * When set to `false`, the links will be generated from the current location's full URL (e.g. `http://example.com/hello/world?value=123#section`).\n   *\n   * @default false\n   */\n  relativeLinks?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Horizontal scroll to. */\n  position?: HvScrollToHorizontalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (\n    event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (\n    event: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    navigationMode = href ? \"push\" : \"none\",\n    relativeLinks = false,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"top\",\n    ...others\n  } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const muiTheme = useMuiTheme();\n\n  const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const { activeTheme } = useTheme();\n\n  const elementId = useUniqueId(id);\n\n  const [selectedIndex, setScrollTo, elements] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    navigationMode,\n    relativeLinks,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition);\n    });\n  }, [options, tooltipPosition]);\n\n  const NotSelected = useCallback(() => {\n    return (\n      <div className={classes.notSelectedRoot}>\n        <div className={classes.notSelected} />\n      </div>\n    );\n  }, [classes.notSelectedRoot, classes.notSelected]);\n\n  const Selected = useCallback(() => {\n    return (\n      <CurrentStep\n        height={activeTheme?.scrollTo.dotSelectedSize}\n        width={activeTheme?.scrollTo.dotSelectedSize}\n        className={classes.selected}\n      />\n    );\n  }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n  const tabs = elements.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvHorizontalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          if (navigationMode !== \"none\") {\n            event.preventDefault();\n          }\n\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            if (navigationMode !== \"none\") {\n              event.preventDefault();\n            }\n\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        href={navigationMode !== \"none\" ? option.href : undefined}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n      >\n        <p>{option.label}</p>\n        {selected ? <Selected /> : <NotSelected />}\n      </HvHorizontalScrollListItem>\n    );\n  });\n\n  return (\n    <ol\n      className={cx(\n        css({\n          width:\n            position === \"fixed\" && (upMd || downSm)\n              ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n              : \"100%\",\n          marginTop: 0,\n          marginBottom: 0,\n          marginRight:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          marginLeft:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n        }),\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n        },\n        className\n      )}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["useMuiTheme","useTheme"],"mappings":";;;;;;;;;;;;;;;;AAiHa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA,uBAAuB;AAAA,IACvB;AAAA,IACA,OAAO;AAAA,IACP,iBAAiB,OAAO,SAAS;AAAA,IACjC,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,GAAG;AAAA,EAAA,IACD,gBAAgB,wBAAwB,KAAK;AAEjD,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AACnD,QAAM,WAAWA;AAEjB,QAAM,SAAS,cAAc,SAAS,YAAY,KAAK,IAAI,CAAC;AAC5D,QAAM,OAAO,cAAc,SAAS,YAAY,GAAG,IAAI,CAAC;AAElD,QAAA,EAAE,gBAAgBC;AAElB,QAAA,YAAY,YAAY,EAAE;AAEhC,QAAM,CAAC,eAAe,aAAa,QAAQ,IAAI;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,kBAAkB,CACtB,OAGA,OACA,UACG;AACH,UAAM,eAAe;AAErB,UAAM,kBAAkB,MAAM;AAC5B,iBAAW,OAAO,KAAK;AAAA,IAAA;AAGb,gBAAA,OAAO,OAAO,OAAO,eAAe;AAAA,EAAA;AAG5C,QAAA,kBAAkB,QAAQ,MAAM;AAC7B,WAAA,QAAQ,IAAI,CAAC,WAAW;AAC7B,aAAO,YAAY,OAAO,OAAO,OAAO,eAAe;AAAA,IAAA,CACxD;AAAA,EAAA,GACA,CAAC,SAAS,eAAe,CAAC;AAEvB,QAAA,cAAc,YAAY,MAAM;AAElC,WAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,iBACtB,8BAAC,OAAI,EAAA,WAAW,QAAQ,YAAa,CAAA,EACvC,CAAA;AAAA,KAED,CAAC,QAAQ,iBAAiB,QAAQ,WAAW,CAAC;AAE3C,QAAA,WAAW,YAAY,MAAM;AAE/B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ,aAAa,SAAS;AAAA,QAC9B,OAAO,aAAa,SAAS;AAAA,QAC7B,WAAW,QAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EACrB,GAED,CAAC,QAAQ,UAAU,aAAa,SAAS,eAAe,CAAC;AAE5D,QAAM,OAAO,SAAS,IAAI,CAAC,QAAQ,UAAU;AAC3C,UAAM,WAAW,kBAAkB;AAC7B,UAAA,iBAAiB,gBAAgB,KAAK;AAG1C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,WAAW,QAAQ,KAAK,EAAE;AAAA,QACpC,SAAS,CAAC,UAAU;AAClB,cAAI,mBAAmB,QAAQ;AAC7B,kBAAM,eAAe;AAAA,UACvB;AAEgB,0BAAA,OAAO,OAAO,OAAO,KAAK;AAC1C,oBAAU,OAAO,KAAK;AAAA,QACxB;AAAA,QACA,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,OAAO,OAAO,MAAM,MAAM;AAClC,gBAAI,mBAAmB,QAAQ;AAC7B,oBAAM,eAAe;AAAA,YACvB;AAEgB,4BAAA,OAAO,OAAO,OAAO,KAAK;AAC1C,sBAAU,OAAO,KAAK;AAAA,UACxB;AAAA,QACF;AAAA,QACA,MAAM,mBAAmB,SAAS,OAAO,OAAO;AAAA,QAChD;AAAA,QACA;AAAA,QAGA,UAAA;AAAA,UAAC,oBAAA,KAAA,EAAG,iBAAO,MAAM,CAAA;AAAA,UAChB,WAAW,oBAAC,UAAS,CAAA,CAAA,wBAAM,aAAY,EAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAHnC,OAAO,OAAO,OAAO;AAAA,IAAA;AAAA,EAI5B,CAEH;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,IAAI;AAAA,UACF,OACE,aAAa,YAAY,QAAQ,UAC7B,iBAAiB,MAAM,QAAQ,OAAO,IAAI,CAAC,CAAC,MAC5C;AAAA,UACN,WAAW;AAAA,UACX,cAAc;AAAA,UACd,aACE,aAAa,YAAY,QAAQ,UAC7B,MAAM,QAAQ,OAAO,IAAI,CAAC,IAC1B;AAAA,UACN,YACE,aAAa,YAAY,QAAQ,UAC7B,MAAM,QAAQ,OAAO,IAAI,CAAC,IAC1B;AAAA,QAAA,CACP;AAAA,QACD,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,cAAc,GAAG,aAAa;AAAA,UACvC,CAAC,QAAQ,aAAa,GAAG,aAAa;AAAA,QACxC;AAAA,QACA;AAAA,MACF;AAAA,MACA,IAAI;AAAA,MACH,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/ScrollTo/Vertical/ScrollToVertical.js

@@ -28,7 +28,7 @@ const HvScrollToVertical = (props) => {
     ...others
   } = useDefaultProps("HvScrollToVertical", props);
   const { classes, cx } = useClasses(classesProp);
-  const elementId = useUniqueId(id, "hvVerticalScrollto");
+  const elementId = useUniqueId(id);
   const [selectedIndex, setScrollTo, elements] = useScrollTo(
     defaultSelectedIndex,
     scrollElementId,

package/dist/esm/ScrollTo/Vertical/ScrollToVertical.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.js","sources":["../../../../src/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\n\nimport {\n  staticClasses,\n  useClasses,\n  calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport {\n  HvScrollToTooltipPositions,\n  HvScrollToOption,\n  HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToOption[];\n  /**\n   * Should the active element be reflected in the URL.\n   *\n   * @default true\n   *\n   * @deprecated Use `navigationMode` instead.\n   * */\n  href?: boolean;\n  /**\n   * The navigation mode to be used when the user clicks on a tab element.\n   * - `push` will add a new entry to the history stack.\n   * - `replace` will replace the current entry on the history stack.\n   * - `none` will not add any entry to the history stack.\n   *\n   * Defaults to `push`, unless the deprecated `href` prop is set to `false`, in which case it defaults to `none`.\n   *\n   * When set to `none`, then each element will render a button instead of a link.\n   *\n   * @default \"push\"\n   */\n  navigationMode?: \"push\" | \"replace\" | \"none\";\n  /**\n   * When set to `true`, the generated links will be relative (e.g. `#section`).\n   * Relative URLs take into account not only the current location, but also the base URL if it is set (i.e. a `<base>` tag).\n   * This can lead to unexpected behavior.\n   *\n   * When set to `false`, the links will be generated from the current location's full URL (e.g. `http://example.com/hello/world?value=123#section`).\n   *\n   * @default false\n   */\n  relativeLinks?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (\n    event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (\n    event: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    navigationMode = href ? \"push\" : \"none\",\n    relativeLinks = false,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"left\",\n    style,\n    ...others\n  } = useDefaultProps(\"HvScrollToVertical\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo, elements] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    navigationMode,\n    relativeLinks,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tabs = elements.map((option, index) => (\n    <HvVerticalScrollListItem\n      id={setId(elementId, `item-${index}`)}\n      onClick={(event) => {\n        if (navigationMode !== \"none\") {\n          event.preventDefault();\n        }\n\n        handleSelection(event, option.value, index);\n        onClick?.(event, index);\n      }}\n      onKeyDown={(event) => {\n        if (isKey(event, \"Enter\") === true) {\n          if (navigationMode !== \"none\") {\n            event.preventDefault();\n          }\n\n          handleSelection(event, option.value, index);\n          onEnter?.(event, index);\n        }\n      }}\n      href={navigationMode !== \"none\" ? option.href : undefined}\n      tooltipPlacement={tooltipPosition}\n      selected={selectedIndex === index}\n      key={option.key || option.label}\n      label={option.label}\n    />\n  ));\n\n  const positionOffset = calculateOffset(options.length);\n\n  return (\n    <ol\n      className={cx(\n        classes.root,\n        {\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.positionAbsolute]: position === \"absolute\",\n        },\n        className\n      )}\n      style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAwGa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA,uBAAuB;AAAA,IACvB;AAAA,IACA,OAAO;AAAA,IACP,iBAAiB,OAAO,SAAS;AAAA,IACjC,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,YAAY,YAAY,IAAI,oBAAoB;AAEtD,QAAM,CAAC,eAAe,aAAa,QAAQ,IAAI;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,kBAAkB,CACtB,OAGA,OACA,UACG;AACH,UAAM,eAAe;AAErB,UAAM,kBAAkB,MAAM;AAC5B,iBAAW,OAAO,KAAK;AAAA,IAAA;AAGb,gBAAA,OAAO,OAAO,OAAO,eAAe;AAAA,EAAA;AAGlD,QAAM,OAAO,SAAS,IAAI,CAAC,QAAQ,UACjC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,MAAM,WAAW,QAAQ,KAAK,EAAE;AAAA,MACpC,SAAS,CAAC,UAAU;AAClB,YAAI,mBAAmB,QAAQ;AAC7B,gBAAM,eAAe;AAAA,QACvB;AAEgB,wBAAA,OAAO,OAAO,OAAO,KAAK;AAC1C,kBAAU,OAAO,KAAK;AAAA,MACxB;AAAA,MACA,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,OAAO,OAAO,MAAM,MAAM;AAClC,cAAI,mBAAmB,QAAQ;AAC7B,kBAAM,eAAe;AAAA,UACvB;AAEgB,0BAAA,OAAO,OAAO,OAAO,KAAK;AAC1C,oBAAU,OAAO,KAAK;AAAA,QACxB;AAAA,MACF;AAAA,MACA,MAAM,mBAAmB,SAAS,OAAO,OAAO;AAAA,MAChD,kBAAkB;AAAA,MAClB,UAAU,kBAAkB;AAAA,MAE5B,OAAO,OAAO;AAAA,IAAA;AAAA,IADT,OAAO,OAAO,OAAO;AAAA,EAAA,CAG7B;AAEK,QAAA,iBAAiB,gBAAgB,QAAQ,MAAM;AAGnD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,aAAa,GAAG,aAAa;AAAA,UACtC,CAAC,QAAQ,gBAAgB,GAAG,aAAa;AAAA,QAC3C;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,KAAK,cAAc,cAAc,OAAO,GAAG,MAAM;AAAA,MAC1D,IAAI;AAAA,MACH,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"ScrollToVertical.js","sources":["../../../../src/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\n\nimport {\n  staticClasses,\n  useClasses,\n  calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport {\n  HvScrollToTooltipPositions,\n  HvScrollToOption,\n  HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToOption[];\n  /**\n   * Should the active element be reflected in the URL.\n   *\n   * @default true\n   *\n   * @deprecated Use `navigationMode` instead.\n   * */\n  href?: boolean;\n  /**\n   * The navigation mode to be used when the user clicks on a tab element.\n   * - `push` will add a new entry to the history stack.\n   * - `replace` will replace the current entry on the history stack.\n   * - `none` will not add any entry to the history stack.\n   *\n   * Defaults to `push`, unless the deprecated `href` prop is set to `false`, in which case it defaults to `none`.\n   *\n   * When set to `none`, then each element will render a button instead of a link.\n   *\n   * @default \"push\"\n   */\n  navigationMode?: \"push\" | \"replace\" | \"none\";\n  /**\n   * When set to `true`, the generated links will be relative (e.g. `#section`).\n   * Relative URLs take into account not only the current location, but also the base URL if it is set (i.e. a `<base>` tag).\n   * This can lead to unexpected behavior.\n   *\n   * When set to `false`, the links will be generated from the current location's full URL (e.g. `http://example.com/hello/world?value=123#section`).\n   *\n   * @default false\n   */\n  relativeLinks?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (\n    event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (\n    event: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    index: number\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    navigationMode = href ? \"push\" : \"none\",\n    relativeLinks = false,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"left\",\n    style,\n    ...others\n  } = useDefaultProps(\"HvScrollToVertical\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const [selectedIndex, setScrollTo, elements] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    navigationMode,\n    relativeLinks,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement | HTMLAnchorElement>\n      | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tabs = elements.map((option, index) => (\n    <HvVerticalScrollListItem\n      id={setId(elementId, `item-${index}`)}\n      onClick={(event) => {\n        if (navigationMode !== \"none\") {\n          event.preventDefault();\n        }\n\n        handleSelection(event, option.value, index);\n        onClick?.(event, index);\n      }}\n      onKeyDown={(event) => {\n        if (isKey(event, \"Enter\") === true) {\n          if (navigationMode !== \"none\") {\n            event.preventDefault();\n          }\n\n          handleSelection(event, option.value, index);\n          onEnter?.(event, index);\n        }\n      }}\n      href={navigationMode !== \"none\" ? option.href : undefined}\n      tooltipPlacement={tooltipPosition}\n      selected={selectedIndex === index}\n      key={option.key || option.label}\n      label={option.label}\n    />\n  ));\n\n  const positionOffset = calculateOffset(options.length);\n\n  return (\n    <ol\n      className={cx(\n        classes.root,\n        {\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.positionAbsolute]: position === \"absolute\",\n        },\n        className\n      )}\n      style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAwGa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA,uBAAuB;AAAA,IACvB;AAAA,IACA,OAAO;AAAA,IACP,iBAAiB,OAAO,SAAS;AAAA,IACjC,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,YAAY,YAAY,EAAE;AAEhC,QAAM,CAAC,eAAe,aAAa,QAAQ,IAAI;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,kBAAkB,CACtB,OAGA,OACA,UACG;AACH,UAAM,eAAe;AAErB,UAAM,kBAAkB,MAAM;AAC5B,iBAAW,OAAO,KAAK;AAAA,IAAA;AAGb,gBAAA,OAAO,OAAO,OAAO,eAAe;AAAA,EAAA;AAGlD,QAAM,OAAO,SAAS,IAAI,CAAC,QAAQ,UACjC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,MAAM,WAAW,QAAQ,KAAK,EAAE;AAAA,MACpC,SAAS,CAAC,UAAU;AAClB,YAAI,mBAAmB,QAAQ;AAC7B,gBAAM,eAAe;AAAA,QACvB;AAEgB,wBAAA,OAAO,OAAO,OAAO,KAAK;AAC1C,kBAAU,OAAO,KAAK;AAAA,MACxB;AAAA,MACA,WAAW,CAAC,UAAU;AACpB,YAAI,MAAM,OAAO,OAAO,MAAM,MAAM;AAClC,cAAI,mBAAmB,QAAQ;AAC7B,kBAAM,eAAe;AAAA,UACvB;AAEgB,0BAAA,OAAO,OAAO,OAAO,KAAK;AAC1C,oBAAU,OAAO,KAAK;AAAA,QACxB;AAAA,MACF;AAAA,MACA,MAAM,mBAAmB,SAAS,OAAO,OAAO;AAAA,MAChD,kBAAkB;AAAA,MAClB,UAAU,kBAAkB;AAAA,MAE5B,OAAO,OAAO;AAAA,IAAA;AAAA,IADT,OAAO,OAAO,OAAO;AAAA,EAAA,CAG7B;AAEK,QAAA,iBAAiB,gBAAgB,QAAQ,MAAM;AAGnD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,aAAa,GAAG,aAAa;AAAA,UACtC,CAAC,QAAQ,gBAAgB,GAAG,aAAa;AAAA,QAC3C;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,KAAK,cAAc,cAAc,OAAO,GAAG,MAAM;AAAA,MAC1D,IAAI;AAAA,MACH,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Section/Section.js

@@ -31,7 +31,7 @@ const HvSection = forwardRef(
       expanded,
       Boolean(defaultExpanded)
     );
-    const elementId = useUniqueId(id, "hvSection");
+    const elementId = useUniqueId(id);
     const contentId = setId(elementId, "content");
     const showContent = expandable ? !!isOpen : true;
     return /* @__PURE__ */ jsxs(

package/dist/esm/Section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","sources":["../../../src/Section/Section.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\n\nimport { staticClasses, useClasses } from \"./Section.styles\";\n\nexport { staticClasses as sectionClasses };\n\nexport type HvSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSectionProps\n  extends Omit<HvBaseProps<HTMLDivElement>, \"title\"> {\n  /** The title of the section */\n  title?: React.ReactNode;\n  /** Whether or not the section is expandable.  */\n  expandable?: boolean;\n  /** Whether the section is open or not, if this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** Section actions */\n  actions?: React.ReactNode;\n  /** Section onExpand callback */\n  onToggle?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    open: boolean\n  ) => void;\n  /** Props to be passed to the expand button */\n  expandButtonProps?: HvButtonProps;\n  /** Determines whether or not the header has a shadow on the bottom border. */\n  raisedHeader?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvSectionClasses;\n  /** Content container ref. */\n  contentRef?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Sections allow grouping information on a page under the same topic.\n */\nexport const HvSection = forwardRef<HTMLDivElement, HvSectionProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      title,\n      expandable,\n      expanded,\n      defaultExpanded = true,\n      actions,\n      onToggle,\n      expandButtonProps,\n      raisedHeader,\n      contentRef,\n      children,\n      ...others\n    } = useDefaultProps(\"HvSection\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n\n    const elementId = useUniqueId(id, \"hvSection\");\n    const contentId = setId(elementId, \"content\");\n\n    const showContent = expandable ? !!isOpen : true;\n\n    return (\n      <div\n        ref={ref}\n        id={elementId}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(title || actions || expandable) && (\n          <div\n            className={cx(classes.header, {\n              [classes.raisedHeader]: raisedHeader && isOpen,\n            })}\n          >\n            {expandable && (\n              <HvButton\n                icon\n                onClick={(event) => {\n                  setIsOpen((o) => !o);\n                  onToggle?.(event, !isOpen);\n                }}\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                aria-label={isOpen ? \"Collapse\" : \"Expand\"}\n                {...expandButtonProps}\n              >\n                {isOpen ? <Up /> : <Down />}\n              </HvButton>\n            )}\n            {title}\n            <div className={classes.actions}>{actions}</div>\n          </div>\n        )}\n        <div\n          ref={contentRef}\n          id={contentId}\n          hidden={!isOpen}\n          className={cx(classes.content, {\n            [classes.hidden]: !showContent,\n            [classes.spaceTop]: !(title || actions || expandable),\n          })}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;AA+CO,MAAM,YAAY;AAAA,EACvB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,CAAC,QAAQ,SAAS,IAAI;AAAA,MAC1B;AAAA,MACA,QAAQ,eAAe;AAAA,IAAA;AAGnB,UAAA,YAAY,YAAY,IAAI,WAAW;AACvC,UAAA,YAAY,MAAM,WAAW,SAAS;AAE5C,UAAM,cAAc,aAAa,CAAC,CAAC,SAAS;AAG1C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,QAEF,UAAA;AAAA,WAAA,SAAS,WAAW,eACpB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,QAAQ;AAAA,gBAC5B,CAAC,QAAQ,YAAY,GAAG,gBAAgB;AAAA,cAAA,CACzC;AAAA,cAEA,UAAA;AAAA,gBACC,cAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAI;AAAA,oBACJ,SAAS,CAAC,UAAU;AACR,gCAAA,CAAC,MAAM,CAAC,CAAC;AACR,iCAAA,OAAO,CAAC,MAAM;AAAA,oBAC3B;AAAA,oBACA,iBAAe;AAAA,oBACf,iBAAe;AAAA,oBACf,cAAY,SAAS,aAAa;AAAA,oBACjC,GAAG;AAAA,oBAEH,UAAS,SAAA,oBAAC,IAAG,CAAA,CAAA,wBAAM,MAAK,EAAA;AAAA,kBAAA;AAAA,gBAC3B;AAAA,gBAED;AAAA,gBACA,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5C;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,IAAI;AAAA,cACJ,QAAQ,CAAC;AAAA,cACT,WAAW,GAAG,QAAQ,SAAS;AAAA,gBAC7B,CAAC,QAAQ,MAAM,GAAG,CAAC;AAAA,gBACnB,CAAC,QAAQ,QAAQ,GAAG,EAAE,SAAS,WAAW;AAAA,cAAA,CAC3C;AAAA,cAEA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"Section.js","sources":["../../../src/Section/Section.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\n\nimport { staticClasses, useClasses } from \"./Section.styles\";\n\nexport { staticClasses as sectionClasses };\n\nexport type HvSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSectionProps\n  extends Omit<HvBaseProps<HTMLDivElement>, \"title\"> {\n  /** The title of the section */\n  title?: React.ReactNode;\n  /** Whether or not the section is expandable.  */\n  expandable?: boolean;\n  /** Whether the section is open or not, if this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** Section actions */\n  actions?: React.ReactNode;\n  /** Section onExpand callback */\n  onToggle?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    open: boolean\n  ) => void;\n  /** Props to be passed to the expand button */\n  expandButtonProps?: HvButtonProps;\n  /** Determines whether or not the header has a shadow on the bottom border. */\n  raisedHeader?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvSectionClasses;\n  /** Content container ref. */\n  contentRef?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Sections allow grouping information on a page under the same topic.\n */\nexport const HvSection = forwardRef<HTMLDivElement, HvSectionProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      title,\n      expandable,\n      expanded,\n      defaultExpanded = true,\n      actions,\n      onToggle,\n      expandButtonProps,\n      raisedHeader,\n      contentRef,\n      children,\n      ...others\n    } = useDefaultProps(\"HvSection\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n\n    const elementId = useUniqueId(id);\n    const contentId = setId(elementId, \"content\");\n\n    const showContent = expandable ? !!isOpen : true;\n\n    return (\n      <div\n        ref={ref}\n        id={elementId}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(title || actions || expandable) && (\n          <div\n            className={cx(classes.header, {\n              [classes.raisedHeader]: raisedHeader && isOpen,\n            })}\n          >\n            {expandable && (\n              <HvButton\n                icon\n                onClick={(event) => {\n                  setIsOpen((o) => !o);\n                  onToggle?.(event, !isOpen);\n                }}\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                aria-label={isOpen ? \"Collapse\" : \"Expand\"}\n                {...expandButtonProps}\n              >\n                {isOpen ? <Up /> : <Down />}\n              </HvButton>\n            )}\n            {title}\n            <div className={classes.actions}>{actions}</div>\n          </div>\n        )}\n        <div\n          ref={contentRef}\n          id={contentId}\n          hidden={!isOpen}\n          className={cx(classes.content, {\n            [classes.hidden]: !showContent,\n            [classes.spaceTop]: !(title || actions || expandable),\n          })}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;AA+CO,MAAM,YAAY;AAAA,EACvB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,CAAC,QAAQ,SAAS,IAAI;AAAA,MAC1B;AAAA,MACA,QAAQ,eAAe;AAAA,IAAA;AAGnB,UAAA,YAAY,YAAY,EAAE;AAC1B,UAAA,YAAY,MAAM,WAAW,SAAS;AAE5C,UAAM,cAAc,aAAa,CAAC,CAAC,SAAS;AAG1C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,QAEF,UAAA;AAAA,WAAA,SAAS,WAAW,eACpB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,QAAQ;AAAA,gBAC5B,CAAC,QAAQ,YAAY,GAAG,gBAAgB;AAAA,cAAA,CACzC;AAAA,cAEA,UAAA;AAAA,gBACC,cAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAI;AAAA,oBACJ,SAAS,CAAC,UAAU;AACR,gCAAA,CAAC,MAAM,CAAC,CAAC;AACR,iCAAA,OAAO,CAAC,MAAM;AAAA,oBAC3B;AAAA,oBACA,iBAAe;AAAA,oBACf,iBAAe;AAAA,oBACf,cAAY,SAAS,aAAa;AAAA,oBACjC,GAAG;AAAA,oBAEH,UAAS,SAAA,oBAAC,IAAG,CAAA,CAAA,wBAAM,MAAK,EAAA;AAAA,kBAAA;AAAA,gBAC3B;AAAA,gBAED;AAAA,gBACA,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5C;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,IAAI;AAAA,cACJ,QAAQ,CAAC;AAAA,cACT,WAAW,GAAG,QAAQ,SAAS;AAAA,gBAC7B,CAAC,QAAQ,MAAM,GAAG,CAAC;AAAA,gBACnB,CAAC,QAAQ,QAAQ,GAAG,EAAE,SAAS,WAAW;AAAA,cAAA,CAC3C;AAAA,cAEA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/esm/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/Select/Select.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport React, { useRef, useState } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport clsx from \"clsx\";\n\nimport {\n  SelectProvider,\n  UseSelectParameters,\n  useSelect,\n} from \"@mui/base/useSelect\";\nimport { useControlled, useForkRef } from \"@mui/material/utils\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { SelectOption } from \"@mui/base/useOption\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { staticClasses, useClasses } from \"./Select.styles\";\nimport { setId } from \"../utils/setId\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvPanel } from \"../Panel\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvSelectButton } from \"./SelectButton\";\n\nfunction defaultRenderValue<Value>(\n  options: SelectOption<Value> | SelectOption<Value>[] | null\n) {\n  if (Array.isArray(options)) {\n    if (options.length === 0) return null;\n    return <>{options.map((o) => o.label).join(\", \")}</>;\n  }\n\n  return options?.label ?? null;\n}\n\nconst mergeIds = (...ids: clsx.ClassValue[]) => clsx(ids) || undefined;\n\nexport { staticClasses as selectClasses };\n\nexport type HvSelectClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectProps<\n  OptionValue extends {},\n  Multiple extends boolean = false\n> extends Omit<HvFormElementProps, \"value\" | \"defaultValue\" | \"onChange\">,\n    Pick<\n      UseSelectParameters<OptionValue, Multiple>,\n      | \"name\"\n      | \"required\"\n      | \"disabled\"\n      | \"multiple\"\n      | \"open\"\n      | \"defaultOpen\"\n      | \"value\"\n      | \"defaultValue\"\n      | \"buttonRef\"\n      | \"options\"\n      | \"getSerializedValue\"\n      | \"onChange\"\n      | \"onOpenChange\"\n    > {\n  classes?: HvSelectClasses;\n  placeholder?: React.ReactNode;\n  autoComplete?: string;\n  /** Whether the width of the select panel can vary independently. */\n  variableWidth?: boolean;\n}\n\n/**\n * The `HvSelect` component is a form control element that allows selection from a list of options.\n *\n * It aims to be aligned with the native HTML `<select>` and `<option>` APIs and be easily integrated with forms.\n *\n * @example\n * <HvSelect name=\"pets\">\n *   <HvOption value=\"dog\">Dog</HvOption>\n *   <HvOption value=\"cat\">Cat</HvOption>\n * </HvSelect>\n * */\nexport const HvSelect = fixedForwardRef(function HvSelect<\n  OptionValue extends {},\n  Multiple extends boolean\n>(\n  props: HvSelectProps<OptionValue, Multiple>,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const {\n    children,\n    classes: classesProp,\n    className,\n    id: idProp,\n    name,\n    required,\n    disabled: disabledProp,\n    readOnly,\n    label,\n    open: openProp,\n    defaultOpen,\n    multiple,\n    autoComplete,\n    options: optionsProp,\n    variableWidth,\n    value: valueProp,\n    defaultValue,\n    placeholder,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    getSerializedValue,\n    onClick,\n    onChange,\n    onOpenChange,\n    ...others\n  } = useDefaultProps(\"HvSelect\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const [placement, setPlacement] = useState<Placement>(\"bottom-start\");\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const handleButtonRef = useForkRef(ref, buttonRef);\n\n  const {\n    contextValue,\n    disabled,\n    getButtonProps,\n    getListboxProps,\n    getHiddenInputProps,\n    getOptionMetadata,\n    value,\n    open,\n  } = useSelect<OptionValue, Multiple>({\n    componentName: \"HvSelect\",\n    name,\n    required,\n    disabled: disabledProp,\n    multiple,\n    open: openProp,\n    defaultOpen,\n    value: valueProp,\n    defaultValue,\n    options: optionsProp,\n    buttonRef: handleButtonRef,\n    getSerializedValue,\n    onChange,\n    onOpenChange: handleOpenChange,\n  });\n\n  const id = useUniqueId(idProp);\n  const labelId = useUniqueId(setId(idProp, \"label\"));\n  const descriptionId = useUniqueId(setId(idProp, \"description\"));\n  const errorMessageId = useUniqueId(setId(idProp, \"error\"));\n\n  const [validationMessage] = useControlled({\n    name: \"HvSelect.statusMessage\",\n    controlled: statusMessage,\n    default: \"Required\",\n  });\n  const [validationState, setValidationState] = useControlled<HvFormStatus>({\n    name: \"HvSelect.status\",\n    controlled: status,\n    default: \"standBy\",\n  });\n\n  function handleOpenChange(newOpen: boolean) {\n    if (!newOpen) {\n      const hasValue = multiple ? (value as OptionValue[]).length > 0 : !!value;\n      setValidationState(required && !hasValue ? \"invalid\" : \"valid\");\n    }\n    onOpenChange?.(newOpen);\n  }\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isInvalid = validationState === \"invalid\";\n\n  const actualValue = multiple\n    ? (value as OptionValue[])\n        .map((v) => getOptionMetadata(v))\n        .filter((v): v is SelectOption<OptionValue> => v !== undefined)\n    : getOptionMetadata(value as OptionValue) ?? null;\n\n  const isOpen = open && !!children;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      className={cx(classes.root, className, {\n        [classes.disabled]: disabled,\n        [classes.readOnly]: readOnly,\n      })}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel\n              id={labelId}\n              htmlFor={id}\n              label={label}\n              className={classes.label}\n            />\n          )}\n          {description && (\n            <HvInfoMessage id={descriptionId} className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      <HvSelectButton\n        id={id}\n        open={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cx(classes.select, {\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        placement={placement}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeIds(label && labelId, ariaLabelledBy)}\n        aria-invalid={isInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={mergeIds(\n          description && descriptionId,\n          ariaDescribedBy\n        )}\n        {...getButtonProps()}\n      >\n        {defaultRenderValue(actualValue) ?? placeholder}\n      </HvSelectButton>\n      <Popper\n        open={isOpen}\n        keepMounted\n        disablePortal\n        anchorEl={buttonRef.current}\n        className={classes.popper}\n        placement={placement}\n        modifiers={[\n          {\n            enabled: true,\n            phase: \"main\",\n            fn: ({ state }) => setPlacement(state.placement),\n          },\n        ]}\n      >\n        <HvPanel\n          style={{\n            width: variableWidth\n              ? \"auto\"\n              : (buttonRef.current?.clientWidth || 0) + 2,\n          }}\n          className={cx(classes.panel, className, {\n            [classes.panelOpenedUp]: placement.includes(\"top\"),\n            [classes.panelOpenedDown]: placement.includes(\"bottom\"),\n          })}\n        >\n          <SelectProvider value={contextValue}>\n            <HvListContainer condensed selectable {...getListboxProps()}>\n              {children}\n            </HvListContainer>\n          </SelectProvider>\n        </HvPanel>\n      </Popper>\n\n      <input {...getHiddenInputProps()} autoComplete={autoComplete} />\n\n      {canShowError && (\n        <HvWarningText\n          id={errorMessageId}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvSelect"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,SAAS,mBACP,SACA;AACI,MAAA,MAAM,QAAQ,OAAO,GAAG;AAC1B,QAAI,QAAQ,WAAW;AAAU,aAAA;AAC1B,WAAA,oBAAA,UAAA,EAAG,UAAQ,QAAA,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,CAAA;AAAA,EACnD;AAEA,SAAO,SAAS,SAAS;AAC3B;AAEA,MAAM,WAAW,IAAI,QAA2B,KAAK,GAAG,KAAK;AA4CtD,MAAM,WAAW,gBAAgB,SAASA,UAI/C,OACA,KACA;AACM,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAoB,cAAc;AAE9D,QAAA,YAAY,OAA0B,IAAI;AAC1C,QAAA,kBAAkB,WAAW,KAAK,SAAS;AAE3C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,UAAiC;AAAA,IACnC,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAAA,CACf;AAEK,QAAA,KAAK,YAAY,MAAM;AAC7B,QAAM,UAAU,YAAY,MAAM,QAAQ,OAAO,CAAC;AAClD,QAAM,gBAAgB,YAAY,MAAM,QAAQ,aAAa,CAAC;AAC9D,QAAM,iBAAiB,YAAY,MAAM,QAAQ,OAAO,CAAC;AAEnD,QAAA,CAAC,iBAAiB,IAAI,cAAc;AAAA,IACxC,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS;AAAA,EAAA,CACV;AACD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,cAA4B;AAAA,IACxE,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAAS;AAAA,EAAA,CACV;AAED,WAAS,iBAAiB,SAAkB;AAC1C,QAAI,CAAC,SAAS;AACZ,YAAM,WAAW,WAAY,MAAwB,SAAS,IAAI,CAAC,CAAC;AACpE,yBAAmB,YAAY,CAAC,WAAW,YAAY,OAAO;AAAA,IAChE;AACA,mBAAe,OAAO;AAAA,EACxB;AAMM,QAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UAAa;AAE7B,QAAM,YAAY,oBAAoB;AAEtC,QAAM,cAAc,WACf,MACE,IAAI,CAAC,MAAM,kBAAkB,CAAC,CAAC,EAC/B,OAAO,CAAC,MAAsC,MAAM,MAAS,IAChE,kBAAkB,KAAoB,KAAK;AAEzC,QAAA,SAAS,QAAQ,CAAC,CAAC;AAGvB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,MAAA,CACrB;AAAA,MACA,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,SAAS,gBACT,qBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA;AAAA,UACC,SAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,SAAS;AAAA,cACT;AAAA,cACA,WAAW,QAAQ;AAAA,YAAA;AAAA,UACrB;AAAA,UAED,mCACE,eAAc,EAAA,IAAI,eAAe,WAAW,QAAQ,aAClD,UACH,YAAA,CAAA;AAAA,QAAA,GAEJ;AAAA,QAGF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA,WAAW,GAAG,QAAQ,QAAQ;AAAA,cAC5B,CAAC,QAAQ,OAAO,GAAG,oBAAoB;AAAA,YAAA,CACxC;AAAA,YACD;AAAA,YACA,cAAY;AAAA,YACZ,mBAAiB,SAAS,SAAS,SAAS,cAAc;AAAA,YAC1D,gBAAc,YAAY,OAAO;AAAA,YACjC,qBAAmB;AAAA,YACnB,oBAAkB;AAAA,cAChB,eAAe;AAAA,cACf;AAAA,YACF;AAAA,YACC,GAAG,eAAe;AAAA,YAElB,UAAA,mBAAmB,WAAW,KAAK;AAAA,UAAA;AAAA,QACtC;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,aAAW;AAAA,YACX,eAAa;AAAA,YACb,UAAU,UAAU;AAAA,YACpB,WAAW,QAAQ;AAAA,YACnB;AAAA,YACA,WAAW;AAAA,cACT;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA,gBACP,IAAI,CAAC,EAAE,YAAY,aAAa,MAAM,SAAS;AAAA,cACjD;AAAA,YACF;AAAA,YAEA,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,kBACL,OAAO,gBACH,UACC,UAAU,SAAS,eAAe,KAAK;AAAA,gBAC9C;AAAA,gBACA,WAAW,GAAG,QAAQ,OAAO,WAAW;AAAA,kBACtC,CAAC,QAAQ,aAAa,GAAG,UAAU,SAAS,KAAK;AAAA,kBACjD,CAAC,QAAQ,eAAe,GAAG,UAAU,SAAS,QAAQ;AAAA,gBAAA,CACvD;AAAA,gBAED,UAAC,oBAAA,gBAAA,EAAe,OAAO,cACrB,8BAAC,iBAAgB,EAAA,WAAS,MAAC,YAAU,MAAE,GAAG,mBACvC,SACH,CAAA,GACF;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,QAEC,oBAAA,SAAA,EAAO,GAAG,uBAAuB,aAA4B,CAAA;AAAA,QAE7D,gBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,eAAa;AAAA,YACb,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"Select.js","sources":["../../../src/Select/Select.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport { useRef, useState } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport clsx from \"clsx\";\n\nimport {\n  SelectProvider,\n  UseSelectParameters,\n  useSelect,\n} from \"@mui/base/useSelect\";\nimport { useControlled, useForkRef } from \"@mui/material/utils\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { SelectOption } from \"@mui/base/useOption\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { staticClasses, useClasses } from \"./Select.styles\";\nimport { setId } from \"../utils/setId\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvPanel } from \"../Panel\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvSelectButton } from \"./SelectButton\";\n\nfunction defaultRenderValue<Value>(\n  options: SelectOption<Value> | SelectOption<Value>[] | null\n) {\n  if (Array.isArray(options)) {\n    if (options.length === 0) return null;\n    return <>{options.map((o) => o.label).join(\", \")}</>;\n  }\n\n  return options?.label ?? null;\n}\n\nconst mergeIds = (...ids: clsx.ClassValue[]) => clsx(ids) || undefined;\n\nexport { staticClasses as selectClasses };\n\nexport type HvSelectClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectProps<\n  OptionValue extends {},\n  Multiple extends boolean = false\n> extends Omit<HvFormElementProps, \"value\" | \"defaultValue\" | \"onChange\">,\n    Pick<\n      UseSelectParameters<OptionValue, Multiple>,\n      | \"name\"\n      | \"required\"\n      | \"disabled\"\n      | \"multiple\"\n      | \"open\"\n      | \"defaultOpen\"\n      | \"value\"\n      | \"defaultValue\"\n      | \"buttonRef\"\n      | \"options\"\n      | \"getSerializedValue\"\n      | \"onChange\"\n      | \"onOpenChange\"\n    > {\n  classes?: HvSelectClasses;\n  placeholder?: React.ReactNode;\n  autoComplete?: string;\n  /** Whether the width of the select panel can vary independently. */\n  variableWidth?: boolean;\n}\n\n/**\n * The `HvSelect` component is a form control element that allows selection from a list of options.\n *\n * It aims to be aligned with the native HTML `<select>` and `<option>` APIs and be easily integrated with forms.\n *\n * @example\n * <HvSelect name=\"pets\">\n *   <HvOption value=\"dog\">Dog</HvOption>\n *   <HvOption value=\"cat\">Cat</HvOption>\n * </HvSelect>\n * */\nexport const HvSelect = fixedForwardRef(function HvSelect<\n  OptionValue extends {},\n  Multiple extends boolean\n>(\n  props: HvSelectProps<OptionValue, Multiple>,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const {\n    children,\n    classes: classesProp,\n    className,\n    id: idProp,\n    name,\n    required,\n    disabled: disabledProp,\n    readOnly,\n    label,\n    open: openProp,\n    defaultOpen,\n    multiple,\n    autoComplete,\n    options: optionsProp,\n    variableWidth,\n    value: valueProp,\n    defaultValue,\n    placeholder,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    getSerializedValue,\n    onClick,\n    onChange,\n    onOpenChange,\n    ...others\n  } = useDefaultProps(\"HvSelect\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const [placement, setPlacement] = useState<Placement>(\"bottom-start\");\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const handleButtonRef = useForkRef(ref, buttonRef);\n\n  const {\n    contextValue,\n    disabled,\n    getButtonProps,\n    getListboxProps,\n    getHiddenInputProps,\n    getOptionMetadata,\n    value,\n    open,\n  } = useSelect<OptionValue, Multiple>({\n    componentName: \"HvSelect\",\n    name,\n    required,\n    disabled: disabledProp,\n    multiple,\n    open: openProp,\n    defaultOpen,\n    value: valueProp,\n    defaultValue,\n    options: optionsProp,\n    buttonRef: handleButtonRef,\n    getSerializedValue,\n    onChange,\n    onOpenChange: handleOpenChange,\n  });\n\n  const id = useUniqueId(idProp);\n  const labelId = useUniqueId(setId(idProp, \"label\"));\n  const descriptionId = useUniqueId(setId(idProp, \"description\"));\n  const errorMessageId = useUniqueId(setId(idProp, \"error\"));\n\n  const [validationMessage] = useControlled({\n    name: \"HvSelect.statusMessage\",\n    controlled: statusMessage,\n    default: \"Required\",\n  });\n  const [validationState, setValidationState] = useControlled<HvFormStatus>({\n    name: \"HvSelect.status\",\n    controlled: status,\n    default: \"standBy\",\n  });\n\n  function handleOpenChange(newOpen: boolean) {\n    if (!newOpen) {\n      const hasValue = multiple ? (value as OptionValue[]).length > 0 : !!value;\n      setValidationState(required && !hasValue ? \"invalid\" : \"valid\");\n    }\n    onOpenChange?.(newOpen);\n  }\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isInvalid = validationState === \"invalid\";\n\n  const actualValue = multiple\n    ? (value as OptionValue[])\n        .map((v) => getOptionMetadata(v))\n        .filter((v): v is SelectOption<OptionValue> => v !== undefined)\n    : getOptionMetadata(value as OptionValue) ?? null;\n\n  const isOpen = open && !!children;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      className={cx(classes.root, className, {\n        [classes.disabled]: disabled,\n        [classes.readOnly]: readOnly,\n      })}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel\n              id={labelId}\n              htmlFor={id}\n              label={label}\n              className={classes.label}\n            />\n          )}\n          {description && (\n            <HvInfoMessage id={descriptionId} className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      <HvSelectButton\n        id={id}\n        open={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cx(classes.select, {\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        placement={placement}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeIds(label && labelId, ariaLabelledBy)}\n        aria-invalid={isInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={mergeIds(\n          description && descriptionId,\n          ariaDescribedBy\n        )}\n        {...getButtonProps()}\n      >\n        {defaultRenderValue(actualValue) ?? placeholder}\n      </HvSelectButton>\n      <Popper\n        open={isOpen}\n        keepMounted\n        disablePortal\n        anchorEl={buttonRef.current}\n        className={classes.popper}\n        placement={placement}\n        modifiers={[\n          {\n            enabled: true,\n            phase: \"main\",\n            fn: ({ state }) => setPlacement(state.placement),\n          },\n        ]}\n      >\n        <HvPanel\n          style={{\n            width: variableWidth\n              ? \"auto\"\n              : (buttonRef.current?.clientWidth || 0) + 2,\n          }}\n          className={cx(classes.panel, className, {\n            [classes.panelOpenedUp]: placement.includes(\"top\"),\n            [classes.panelOpenedDown]: placement.includes(\"bottom\"),\n          })}\n        >\n          <SelectProvider value={contextValue}>\n            <HvListContainer condensed selectable {...getListboxProps()}>\n              {children}\n            </HvListContainer>\n          </SelectProvider>\n        </HvPanel>\n      </Popper>\n\n      <input {...getHiddenInputProps()} autoComplete={autoComplete} />\n\n      {canShowError && (\n        <HvWarningText\n          id={errorMessageId}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvSelect"],"mappings":"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"}

package/dist/esm/SelectionList/SelectionList.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import React__default, { forwardRef, useMemo, useRef, useEffect, useCallback } from "react";
+import { forwardRef, useMemo, Children, useRef, useEffect, useCallback, cloneElement } from "react";
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
@@ -15,7 +15,7 @@ import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvWarningText } from "../Forms/WarningText/WarningText.js";
 const getValueFromSelectedChildren = (children, multiple) => {
-  const selectedValues = React__default.Children.toArray(children).map((child) => {
+  const selectedValues = Children.toArray(children).map((child) => {
     const childIsControlled = child?.props?.selected !== void 0;
     const childIsSelected = child && childIsControlled ? child.props?.selected : child.props?.defaultSelected;
     return childIsSelected ? child?.props.value : void 0;
@@ -49,7 +49,7 @@ const HvSelectionList = forwardRef((props, ref) => {
     ...others
   } = useDefaultProps("HvSelectionList", props);
   const { classes, cx } = useClasses(classesProp);
-  const elementId = useUniqueId(id, "hvselectionlist");
+  const elementId = useUniqueId(id);
   const [value, setValue] = useControlled(
     valueProp,
     defaultValue !== void 0 ? defaultValue : (
@@ -66,7 +66,7 @@ const HvSelectionList = forwardRef((props, ref) => {
   const [allValues, selectedState] = useMemo(() => {
     const childValues = [];
     const childSelectedState = [];
-    React__default.Children.toArray(children).forEach((child, i) => {
+    Children.toArray(children).forEach((child, i) => {
       const childValue = child?.props?.value;
       const childIsSelected = multiple ? value.indexOf(childValue) !== -1 : value === childValue;
       childValues[i] = childValue;
@@ -141,9 +141,9 @@ const HvSelectionList = forwardRef((props, ref) => {
     ]
   );
   const modifiedChildren = useMemo(() => {
-    return React__default.Children.map(children, (child, i) => {
+    return Children.map(children, (child, i) => {
       const childIsSelected = selectedState[i];
-      return React__default.cloneElement(child, {
+      return cloneElement(child, {
         role: "option",
         selected: childIsSelected,
         onClick: (evt) => onChildChangeInterceptor(i, child?.props?.onClick, evt),