@hitachivantara/uikit-react-core 5.61.0 → 5.62.1

package/dist/cjs/FileUploader/FileUploader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.cjs","sources":["../../../src/FileUploader/FileUploader.tsx"],"sourcesContent":["import { useLabels } from \"../hooks/useLabels\";\nimport { setId } from \"../utils/setId\";\nimport { HvBaseProps } from \"../types/generic\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvDropZone, HvDropZoneLabels } from \"./DropZone\";\nimport { HvFileData, HvFileRemovedEvent, HvFilesAddedEvent } from \"./File\";\nimport { HvFileList } from \"./FileList\";\n\nexport interface HvFileUploaderLabels extends HvDropZoneLabels {\n  /**\n   * Value of aria-label to apply to remove file button in FileList\n   * */\n  removeFileButtonLabel?: string;\n}\n\nexport interface HvFileUploaderProps extends HvBaseProps {\n  /**\n   * An object containing all the labels.\n   */\n  labels?: HvFileUploaderLabels;\n  /**\n   * The files to upload.\n   */\n  fileList?: HvFileData[];\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Max upload size\n   * */\n  maxFileSize?: number;\n  /**\n   * Files extensions accepted for upload.\n   */\n  acceptedFiles?: string[];\n  /**\n   * Callback fired when files are added.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n}\n\n// TODO: This component needs to adopt the Form element shape and deprecate its way of composing labels\n\nconst DEFAULT_LABELS: HvFileUploaderLabels = {\n  dropzone: \"Label\",\n  sizeWarning: \"Max. file size:\",\n  drag: \"Drop files here or\",\n  selectFiles: \"click to upload\",\n  dropFiles: \"Drop files here\",\n  fileSizeError: \"The file exceeds the maximum upload size\",\n  fileTypeError: \"File type not allowed for upload\",\n  removeFileButtonLabel: \"Remove File\",\n};\n\n/**\n * Lets the user choose one or more files from their device storage. Once chosen,\n * the files can be uploaded to a server or manipulated on the client side.\n *\n * Accepted file types follow the format of the html input accept attribute. Please check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file for more details.\n */\nexport const HvFileUploader = (props: HvFileUploaderProps) => {\n  const {\n    id,\n    className,\n    labels: labelsProp,\n    fileList,\n    multiple = true,\n    disabled = false,\n    hideLabels = false,\n    maxFileSize = Infinity,\n    inputProps = {},\n    acceptedFiles = [],\n    onFilesAdded,\n    onFileRemoved,\n    ...others\n  } = useDefaultProps(\"HvFileUploader\", props);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  return (\n    <div id={id} className={className} {...others}>\n      <HvDropZone\n        id={setId(id, \"dropzone\")}\n        labels={labels}\n        multiple={multiple}\n        disabled={disabled}\n        accept={acceptedFiles.join(\",\")}\n        maxFileSize={maxFileSize}\n        onFilesAdded={onFilesAdded}\n        inputProps={inputProps}\n        hideLabels={hideLabels}\n      />\n      <HvFileList\n        id={setId(id, \"filelist\")}\n        list={fileList}\n        onFileRemoved={onFileRemoved}\n        removeFileButtonLabel={labels?.removeFileButtonLabel}\n      />\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useLabels","jsxs","jsx","HvDropZone","setId","HvFileList"],"mappings":";;;;;;;;AA8DA,MAAM,iBAAuC;AAAA,EAC3C,UAAU;AAAA,EACV,aAAa;AAAA,EACb,MAAM;AAAA,EACN,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe;AAAA,EACf,eAAe;AAAA,EACf,uBAAuB;AACzB;AAQa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,cAAc;AAAA,IACd,aAAa,CAAC;AAAA,IACd,gBAAgB,CAAC;AAAA,IACjB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,kBAAkB,KAAK;AACrC,QAAA,SAASC,UAAAA,UAAU,gBAAgB,UAAU;AAEnD,SACGC,2BAAAA,KAAA,OAAA,EAAI,IAAQ,WAAuB,GAAG,QACrC,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,IAAIC,MAAAA,MAAM,IAAI,UAAU;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ,cAAc,KAAK,GAAG;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,IACAF,2BAAA;AAAA,MAACG,SAAA;AAAA,MAAA;AAAA,QACC,IAAID,MAAAA,MAAM,IAAI,UAAU;AAAA,QACxB,MAAM;AAAA,QACN;AAAA,QACA,uBAAuB,QAAQ;AAAA,MAAA;AAAA,IACjC;AAAA,EACF,EAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"FileUploader.cjs","sources":["../../../src/FileUploader/FileUploader.tsx"],"sourcesContent":["import { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { HvDropZone, HvDropZoneLabels } from \"./DropZone\";\nimport { HvFileData, HvFileRemovedEvent, HvFilesAddedEvent } from \"./File\";\nimport { HvFileList } from \"./FileList\";\n\nexport interface HvFileUploaderLabels extends HvDropZoneLabels {\n  /**\n   * Value of aria-label to apply to remove file button in FileList\n   * */\n  removeFileButtonLabel?: string;\n}\n\nexport interface HvFileUploaderProps extends HvBaseProps {\n  /**\n   * An object containing all the labels.\n   */\n  labels?: HvFileUploaderLabels;\n  /**\n   * The files to upload.\n   */\n  fileList?: HvFileData[];\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Max upload size\n   * */\n  maxFileSize?: number;\n  /**\n   * Files extensions accepted for upload.\n   */\n  acceptedFiles?: string[];\n  /**\n   * Callback fired when files are added.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n}\n\n// TODO: This component needs to adopt the Form element shape and deprecate its way of composing labels\n\nconst DEFAULT_LABELS: HvFileUploaderLabels = {\n  dropzone: \"Label\",\n  sizeWarning: \"Max. file size:\",\n  drag: \"Drop files here or\",\n  selectFiles: \"click to upload\",\n  dropFiles: \"Drop files here\",\n  fileSizeError: \"The file exceeds the maximum upload size\",\n  fileTypeError: \"File type not allowed for upload\",\n  removeFileButtonLabel: \"Remove File\",\n};\n\n/**\n * Lets the user choose one or more files from their device storage. Once chosen,\n * the files can be uploaded to a server or manipulated on the client side.\n *\n * Accepted file types follow the format of the html input accept attribute. Please check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file for more details.\n */\nexport const HvFileUploader = (props: HvFileUploaderProps) => {\n  const {\n    id,\n    className,\n    labels: labelsProp,\n    fileList,\n    multiple = true,\n    disabled = false,\n    hideLabels = false,\n    maxFileSize = Infinity,\n    inputProps = {},\n    acceptedFiles = [],\n    onFilesAdded,\n    onFileRemoved,\n    ...others\n  } = useDefaultProps(\"HvFileUploader\", props);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  return (\n    <div id={id} className={className} {...others}>\n      <HvDropZone\n        id={setId(id, \"dropzone\")}\n        labels={labels}\n        multiple={multiple}\n        disabled={disabled}\n        accept={acceptedFiles.join(\",\")}\n        maxFileSize={maxFileSize}\n        onFilesAdded={onFilesAdded}\n        inputProps={inputProps}\n        hideLabels={hideLabels}\n      />\n      <HvFileList\n        id={setId(id, \"filelist\")}\n        list={fileList}\n        onFileRemoved={onFileRemoved}\n        removeFileButtonLabel={labels?.removeFileButtonLabel}\n      />\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useLabels","jsxs","jsx","HvDropZone","setId","HvFileList"],"mappings":";;;;;;;;AA4DA,MAAM,iBAAuC;AAAA,EAC3C,UAAU;AAAA,EACV,aAAa;AAAA,EACb,MAAM;AAAA,EACN,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe;AAAA,EACf,eAAe;AAAA,EACf,uBAAuB;AACzB;AAQa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,cAAc;AAAA,IACd,aAAa,CAAC;AAAA,IACd,gBAAgB,CAAC;AAAA,IACjB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,kBAAkB,KAAK;AACrC,QAAA,SAASC,UAAAA,UAAU,gBAAgB,UAAU;AAEnD,SACGC,2BAAAA,KAAA,OAAA,EAAI,IAAQ,WAAuB,GAAG,QACrC,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,IAAIC,MAAAA,MAAM,IAAI,UAAU;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ,cAAc,KAAK,GAAG;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,IACAF,2BAAA;AAAA,MAACG,SAAA;AAAA,MAAA;AAAA,QACC,IAAID,MAAAA,MAAM,IAAI,UAAU;AAAA,QACxB,MAAM;AAAA,QACN;AAAA,QACA,uBAAuB,QAAQ;AAAA,MAAA;AAAA,IACjC;AAAA,EACF,EAAA,CAAA;AAEJ;;"}

package/dist/cjs/FileUploader/Preview/Preview.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Preview.cjs","sources":["../../../../src/FileUploader/Preview/Preview.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport { Preview } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\n\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./Preview.styles\";\n\nexport { staticClasses as fileUploaderPreviewClasses };\n\nexport type HvFileUploaderPreviewClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileUploaderPreviewProps\n  extends Omit<HvButtonProps, \"children\" | \"classes\"> {\n  /**\n   * Content that represents the preview of an uploaded file.\n   */\n  children: React.ReactElement;\n  /**\n   * Callback executed when the preview is unmounted.\n   *\n   * Should be used for cleaning up client-side image URLs created by `URL.createObjectURL()`.\n   */\n  onUnload?: () => void;\n  /**\n   * If `true`, doesn't show an overlay on top of the preview when hovering.\n   *\n   * Only applies when `onClick` is set.\n   */\n  disableOverlay?: boolean;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileUploaderPreviewClasses;\n}\n\n/**\n * The `HvFileUploaderPreview` component is available to facilitate the styling\n * of the button (when clickable) and the detection of image unloading.\n */\nexport const HvFileUploaderPreview = (props: HvFileUploaderPreviewProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disableOverlay = false,\n    onUnload,\n    onClick,\n    ...others\n  } = useDefaultProps(\"HvFileUploaderPreview\", props);\n  const { classes, cx, css } = useClasses(classesProp);\n\n  useEffect(() => {\n    return () => {\n      onUnload?.();\n    };\n  }, [onUnload]);\n\n  if (onClick) {\n    return (\n      <HvButton\n        icon\n        className={cx(classes.previewButton, className)}\n        onClick={onClick}\n        {...others}\n      >\n        {children}\n        {!disableOverlay && (\n          <div className={classes.overlay} aria-hidden=\"true\">\n            <Preview\n              className={css({\n                position: \"absolute\",\n                left: \"50%\",\n                top: \"50%\",\n                transform: \"translate(-50%, -50%)\",\n                display: \"none\",\n              })}\n            />\n          </div>\n        )}\n      </HvButton>\n    );\n  }\n\n  return children;\n};\n"],"names":["useDefaultProps","useClasses","useEffect","jsxs","HvButton","jsx","Preview"],"mappings":";;;;;;;;AA4Ca,MAAA,wBAAwB,CAAC,UAAsC;AACpE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,yBAAyB,KAAK;AAClD,QAAM,EAAE,SAAS,IAAI,IAAI,IAAIC,eAAAA,WAAW,WAAW;AAEnDC,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACA;IAAA;AAAA,EACb,GACC,CAAC,QAAQ,CAAC;AAEb,MAAI,SAAS;AAET,WAAAC,2BAAA;AAAA,MAACC,OAAA;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,QAC9C;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,CAAC,kBACCC,2BAAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,SAAS,eAAY,QAC3C,UAAAA,2BAAA;AAAA,YAACC,gBAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAI;AAAA,gBACb,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,KAAK;AAAA,gBACL,WAAW;AAAA,gBACX,SAAS;AAAA,cAAA,CACV;AAAA,YAAA;AAAA,UAAA,GAEL;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AAEO,SAAA;AACT;;;"}
+{"version":3,"file":"Preview.cjs","sources":["../../../../src/FileUploader/Preview/Preview.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { Preview } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { staticClasses, useClasses } from \"./Preview.styles\";\n\nexport { staticClasses as fileUploaderPreviewClasses };\n\nexport type HvFileUploaderPreviewClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileUploaderPreviewProps\n  extends Omit<HvButtonProps, \"children\" | \"classes\"> {\n  /**\n   * Content that represents the preview of an uploaded file.\n   */\n  children: React.ReactElement;\n  /**\n   * Callback executed when the preview is unmounted.\n   *\n   * Should be used for cleaning up client-side image URLs created by `URL.createObjectURL()`.\n   */\n  onUnload?: () => void;\n  /**\n   * If `true`, doesn't show an overlay on top of the preview when hovering.\n   *\n   * Only applies when `onClick` is set.\n   */\n  disableOverlay?: boolean;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileUploaderPreviewClasses;\n}\n\n/**\n * The `HvFileUploaderPreview` component is available to facilitate the styling\n * of the button (when clickable) and the detection of image unloading.\n */\nexport const HvFileUploaderPreview = (props: HvFileUploaderPreviewProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disableOverlay = false,\n    onUnload,\n    onClick,\n    ...others\n  } = useDefaultProps(\"HvFileUploaderPreview\", props);\n  const { classes, cx, css } = useClasses(classesProp);\n\n  useEffect(() => {\n    return () => {\n      onUnload?.();\n    };\n  }, [onUnload]);\n\n  if (onClick) {\n    return (\n      <HvButton\n        icon\n        className={cx(classes.previewButton, className)}\n        onClick={onClick}\n        {...others}\n      >\n        {children}\n        {!disableOverlay && (\n          <div className={classes.overlay} aria-hidden=\"true\">\n            <Preview\n              className={css({\n                position: \"absolute\",\n                left: \"50%\",\n                top: \"50%\",\n                transform: \"translate(-50%, -50%)\",\n                display: \"none\",\n              })}\n            />\n          </div>\n        )}\n      </HvButton>\n    );\n  }\n\n  return children;\n};\n"],"names":["useDefaultProps","useClasses","useEffect","jsxs","HvButton","jsx","Preview"],"mappings":";;;;;;;;AAwCa,MAAA,wBAAwB,CAAC,UAAsC;AACpE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,yBAAyB,KAAK;AAClD,QAAM,EAAE,SAAS,IAAI,IAAI,IAAIC,eAAAA,WAAW,WAAW;AAEnDC,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACA;IAAA;AAAA,EACb,GACC,CAAC,QAAQ,CAAC;AAEb,MAAI,SAAS;AAET,WAAAC,2BAAA;AAAA,MAACC,OAAA;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,QAC9C;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,CAAC,kBACCC,2BAAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,SAAS,eAAY,QAC3C,UAAAA,2BAAA;AAAA,YAACC,gBAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAI;AAAA,gBACb,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,KAAK;AAAA,gBACL,WAAW;AAAA,gBACX,SAAS;AAAA,cAAA,CACV;AAAA,YAAA;AAAA,UAAA,GAEL;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AAEO,SAAA;AACT;;;"}

package/dist/cjs/FileUploader/Preview/Preview.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Preview.styles.cjs","sources":["../../../../src/FileUploader/Preview/Preview.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvFileUploaderPreview\",\n  {\n    previewButton: {\n      position: \"relative\",\n      width: \"48px\",\n      height: \"48px\",\n      \"&:hover *\": {\n        display: \"flex\",\n      },\n    },\n    overlay: {\n      position: \"absolute\",\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0,\n      display: \"none\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      backgroundColor: theme.colors.primary_20,\n      opacity: \"1\",\n      borderRadius: theme.radii.base,\n    },\n  }\n);\n"],"names":["createClasses","theme"],"mappings":";;;;AAIa,MAAA,EAAE,eAAe,WAAA,IAAeA,QAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,eAAe;AAAA,MACb,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,aAAa;AAAA,QACX,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,iBAAiBC,YAAAA,MAAM,OAAO;AAAA,MAC9B,SAAS;AAAA,MACT,cAAcA,YAAAA,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AACF;;;"}
+{"version":3,"file":"Preview.styles.cjs","sources":["../../../../src/FileUploader/Preview/Preview.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvFileUploaderPreview\",\n  {\n    previewButton: {\n      position: \"relative\",\n      width: \"48px\",\n      height: \"48px\",\n      \"&:hover *\": {\n        display: \"flex\",\n      },\n    },\n    overlay: {\n      position: \"absolute\",\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0,\n      display: \"none\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      backgroundColor: theme.colors.primary_20,\n      opacity: \"1\",\n      borderRadius: theme.radii.base,\n    },\n  },\n);\n"],"names":["createClasses","theme"],"mappings":";;;;AAIa,MAAA,EAAE,eAAe,WAAA,IAAeA,QAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,eAAe;AAAA,MACb,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,aAAa;AAAA,QACX,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,iBAAiBC,YAAAA,MAAM,OAAO;AAAA,MAC9B,SAAS;AAAA,MACT,cAAcA,YAAAA,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AACF;;;"}

package/dist/cjs/FilterGroup/Counter/Counter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Counter.cjs","sources":["../../../../src/FilterGroup/Counter/Counter.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./Counter.styles\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"../types\";\n\nexport { staticClasses as filterGroupCounterClasses };\n\nexport type HvFilterGroupCounterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupCounterProps {\n  className?: string;\n  id?: string;\n  classes?: HvFilterGroupCounterClasses;\n}\n\nconst getExistingFiltersById = (\n  idx: number,\n  filterValues: HvFilterGroupValue,\n  filterOptions: HvFilterGroupFilters\n) => {\n  let total = 0;\n  filterValues[idx]?.forEach((fv) => {\n    if (filterOptions[idx]?.data.find((f) => f.id === fv)) {\n      total += 1;\n    }\n  });\n  return total;\n};\n\nexport const HvFilterGroupCounter = (props: HvFilterGroupCounterProps) => {\n  const {\n    className,\n    id,\n    classes: classesProp,\n  } = useDefaultProps(\"HvFilterGroupCounter\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const {\n    filterOptions,\n    filterValues = [],\n    appliedFilters = [],\n  } = useContext(HvFilterGroupContext);\n\n  const options =\n    id && filterOptions.find((option) => option.id === id)\n      ? ([\n          filterOptions.find((option) => option.id === id),\n        ] as HvFilterGroupFilters)\n      : filterOptions;\n  const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n  let groupsCounter = 0;\n  appliedFilters.forEach((fg, i) => {\n    groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);\n  });\n\n  const partialCounter = id\n    ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0\n    : groupsCounter;\n\n  const totalCounter = options.reduce(\n    (acc, option) => acc + option.data.length,\n    0\n  );\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {partialCounter > 0 ? (\n        <p className={classes.partialCounter}>{partialCounter}</p>\n      ) : (\n        partialCounter\n      )}\n      {` / ${totalCounter}`}\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useContext","HvFilterGroupContext","jsx"],"mappings":";;;;;;;AAkBA,MAAM,yBAAyB,CAC7B,KACA,cACA,kBACG;AACH,MAAI,QAAQ;AACZ,eAAa,GAAG,GAAG,QAAQ,CAAC,OAAO;AAC7B,QAAA,cAAc,GAAG,GAAG,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG;AAC5C,eAAA;AAAA,IACX;AAAA,EAAA,CACD;AACM,SAAA;AACT;AAEa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACPA,gBAAgB,gBAAA,wBAAwB,KAAK;AACjD,QAAM,EAAE,SAAS,GAAG,IAAIC,0BAAW,WAAW;AACxC,QAAA;AAAA,IACJ;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,iBAAiB,CAAC;AAAA,EAAA,IAChBC,MAAAA,WAAWC,mBAAAA,oBAAoB;AAE7B,QAAA,UACJ,MAAM,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE,IAChD;AAAA,IACC,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE;AAAA,EAEjD,IAAA;AACN,QAAM,YAAY,cAAc,UAAU,CAAC,WAAW,OAAO,OAAO,EAAE;AAEtE,MAAI,gBAAgB;AACL,iBAAA,QAAQ,CAAC,IAAI,MAAM;AACf,qBAAA,uBAAuB,GAAG,cAAc,aAAa;AAAA,EAAA,CACvE;AAED,QAAM,iBAAiB,KACnB,uBAAuB,WAAW,cAAc,aAAa,KAAK,IAClE;AAEJ,QAAM,eAAe,QAAQ;AAAA,IAC3B,CAAC,KAAK,WAAW,MAAM,OAAO,KAAK;AAAA,IACnC;AAAA,EAAA;AAGF,yCACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAA;AAAA,IAAA,iBAAiB,IACfC,+BAAA,KAAA,EAAE,WAAW,QAAQ,gBAAiB,0BAAe,IAEtD;AAAA,IAED,MAAM,YAAY;AAAA,EACrB,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"Counter.cjs","sources":["../../../../src/FilterGroup/Counter/Counter.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"../types\";\nimport { staticClasses, useClasses } from \"./Counter.styles\";\n\nexport { staticClasses as filterGroupCounterClasses };\n\nexport type HvFilterGroupCounterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupCounterProps {\n  className?: string;\n  id?: string;\n  classes?: HvFilterGroupCounterClasses;\n}\n\nconst getExistingFiltersById = (\n  idx: number,\n  filterValues: HvFilterGroupValue,\n  filterOptions: HvFilterGroupFilters,\n) => {\n  let total = 0;\n  filterValues[idx]?.forEach((fv) => {\n    if (filterOptions[idx]?.data.find((f) => f.id === fv)) {\n      total += 1;\n    }\n  });\n  return total;\n};\n\nexport const HvFilterGroupCounter = (props: HvFilterGroupCounterProps) => {\n  const {\n    className,\n    id,\n    classes: classesProp,\n  } = useDefaultProps(\"HvFilterGroupCounter\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const {\n    filterOptions,\n    filterValues = [],\n    appliedFilters = [],\n  } = useContext(HvFilterGroupContext);\n\n  const options =\n    id && filterOptions.find((option) => option.id === id)\n      ? ([\n          filterOptions.find((option) => option.id === id),\n        ] as HvFilterGroupFilters)\n      : filterOptions;\n  const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n  let groupsCounter = 0;\n  appliedFilters.forEach((fg, i) => {\n    groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);\n  });\n\n  const partialCounter = id\n    ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0\n    : groupsCounter;\n\n  const totalCounter = options.reduce(\n    (acc, option) => acc + option.data.length,\n    0,\n  );\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {partialCounter > 0 ? (\n        <p className={classes.partialCounter}>{partialCounter}</p>\n      ) : (\n        partialCounter\n      )}\n      {` / ${totalCounter}`}\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useContext","HvFilterGroupContext","jsx"],"mappings":";;;;;;;AAkBA,MAAM,yBAAyB,CAC7B,KACA,cACA,kBACG;AACH,MAAI,QAAQ;AACZ,eAAa,GAAG,GAAG,QAAQ,CAAC,OAAO;AAC7B,QAAA,cAAc,GAAG,GAAG,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG;AAC5C,eAAA;AAAA,IACX;AAAA,EAAA,CACD;AACM,SAAA;AACT;AAEa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACPA,gBAAgB,gBAAA,wBAAwB,KAAK;AACjD,QAAM,EAAE,SAAS,GAAG,IAAIC,0BAAW,WAAW;AACxC,QAAA;AAAA,IACJ;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,iBAAiB,CAAC;AAAA,EAAA,IAChBC,MAAAA,WAAWC,mBAAAA,oBAAoB;AAE7B,QAAA,UACJ,MAAM,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE,IAChD;AAAA,IACC,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE;AAAA,EAEjD,IAAA;AACN,QAAM,YAAY,cAAc,UAAU,CAAC,WAAW,OAAO,OAAO,EAAE;AAEtE,MAAI,gBAAgB;AACL,iBAAA,QAAQ,CAAC,IAAI,MAAM;AACf,qBAAA,uBAAuB,GAAG,cAAc,aAAa;AAAA,EAAA,CACvE;AAED,QAAM,iBAAiB,KACnB,uBAAuB,WAAW,cAAc,aAAa,KAAK,IAClE;AAEJ,QAAM,eAAe,QAAQ;AAAA,IAC3B,CAAC,KAAK,WAAW,MAAM,OAAO,KAAK;AAAA,IACnC;AAAA,EAAA;AAGF,yCACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAA;AAAA,IAAA,iBAAiB,IACfC,+BAAA,KAAA,EAAE,WAAW,QAAQ,gBAAiB,0BAAe,IAEtD;AAAA,IAED,MAAM,YAAY;AAAA,EACrB,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/FilterGroup/FilterContent/FilterContent.cjs

@@ -3,11 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useTheme = require("../../hooks/useTheme.cjs");
 const setId = require("../../utils/setId.cjs");
-const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const FilterContent_styles = require("./FilterContent.styles.cjs");
 const FilterGroupContext = require("../FilterGroupContext.cjs");
+const FilterContent_styles = require("./FilterContent.styles.cjs");
 const LeftPanel = require("../LeftPanel/LeftPanel.cjs");
 const RightPanel = require("../RightPanel/RightPanel.cjs");
 const Button = require("../../Button/Button.cjs");

package/dist/cjs/FilterGroup/FilterContent/FilterContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.cjs","sources":["../../../../src/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo, useRef, useState } from \"react\";\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { HvActionBar } from \"../../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../../BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"../../Button\";\nimport { HvFormStatus } from \"../../Forms\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvFilterGroupValue, HvFilterGroupHorizontalPlacement } from \"../types\";\nimport { staticClasses, useClasses } from \"./FilterContent.styles\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\nimport type { HvFilterGroupLabels } from \"../FilterGroup\";\n\nexport { staticClasses as filterGroupContentClasses };\n\nexport type HvFilterGroupContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupContentProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  description?: React.ReactNode;\n  status?: HvFormStatus;\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  labels?: HvFilterGroupLabels;\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  disablePortal?: boolean;\n  escapeWithReference?: boolean;\n  height?: string | number;\n  leftEmptyElement?: React.ReactNode;\n  rightEmptyElement?: React.ReactNode;\n  disabled?: boolean;\n  classes?: HvFilterGroupContentClasses;\n}\n\nexport const HvFilterGroupContent = forwardRef<\n  HTMLDivElement,\n  HvFilterGroupContentProps\n>((props, ref) => {\n  const {\n    id,\n    status,\n    disabled = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onCancel,\n    onClear,\n    labels,\n    horizontalPlacement = \"right\",\n    disablePortal = true,\n    escapeWithReference = true,\n    height,\n    leftEmptyElement,\n    rightEmptyElement,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvFilterGroupContent\", props);\n\n  const { classes } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const [filterGroupOpen, setFilterGroupOpen] = useState<boolean>(false);\n\n  const {\n    defaultValue,\n    filterValues,\n    rollbackFilters,\n    clearFilters,\n    applyFilters,\n    applyDisabled,\n  } = useContext(HvFilterGroupContext);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const onApplyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    applyFilters();\n    onChange?.(event, filterValues);\n    setFilterGroupOpen(false);\n  };\n\n  const onCancelHandler = (\n    event: React.MouseEvent<HTMLButtonElement> | Event\n  ) => {\n    rollbackFilters();\n    onCancel?.(event);\n    setFilterGroupOpen(false);\n  };\n\n  const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    clearFilters();\n    onClear?.(event);\n  };\n\n  const handleToggle = (event: Event, open: boolean) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (event === null) return;\n    setFilterGroupOpen(open);\n    if (!open) onCancelHandler?.(event);\n  };\n\n  const Header = useMemo(\n    () => (\n      <>\n        <Filters />\n        <HvTypography variant=\"label\">{labels?.placeholder}</HvTypography>\n      </>\n    ),\n    [labels?.placeholder]\n  );\n\n  return (\n    <HvBaseDropdown\n      ref={ref}\n      id={setId(id, \"dropdown\")}\n      role=\"combobox\"\n      classes={{\n        root: classes.dropdown,\n        panel: classes.panel,\n        selection: classes.baseDropdownSelection,\n        header: classes.header,\n      }}\n      disabled={disabled}\n      disablePortal={disablePortal}\n      variableWidth\n      placement={horizontalPlacement}\n      expanded={filterGroupOpen}\n      onToggle={handleToggle}\n      onClickOutside={onCancelHandler}\n      onContainerCreation={focusOnContainer}\n      placeholder={Header}\n      adornment={<HvFilterGroupCounter />}\n      popperProps={{\n        modifiers: [{ name: \"preventOverflow\", enabled: escapeWithReference }],\n      }}\n      aria-haspopup=\"dialog\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-invalid={status === \"invalid\" ? true : undefined}\n      aria-errormessage={status === \"invalid\" ? setId(id, \"error\") : undefined}\n      aria-describedby={\n        [description && setId(id, \"description\"), ariaDescribedBy]\n          .join(\" \")\n          .trim() || undefined\n      }\n      {...others}\n    >\n      <div ref={focusTarget} tabIndex={-1} />\n      <div className={classes.root} style={{ height }}>\n        <HvFilterGroupLeftPanel\n          id={id}\n          className={classes.leftSidePanel}\n          emptyElement={leftEmptyElement}\n        />\n        <HvFilterGroupRightPanel\n          id={id}\n          className={classes.rightSidePanel}\n          emptyElement={rightEmptyElement}\n          labels={labels}\n        />\n      </div>\n      <HvActionBar className={classes.actionBar}>\n        <HvButton\n          id={setId(id, \"clearFilters-button\")}\n          disabled={\n            defaultValue\n              ? defaultValue?.flat().length === filterValues?.flat().length\n              : filterValues?.flat().length === 0\n          }\n          variant=\"secondaryGhost\"\n          onClick={onClearHandler}\n        >\n          {labels?.clearLabel}\n        </HvButton>\n        <div aria-hidden=\"true\" className={classes.space}>\n          &nbsp;\n        </div>\n        <HvButton\n          id={setId(id, \"apply-button\")}\n          disabled={applyDisabled}\n          variant={\n            activeTheme?.filterGroup.applyButtonVariant as HvButtonVariant\n          }\n          onClick={onApplyHandler}\n          className={classes.applyButton}\n        >\n          {labels?.applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"cancel-button\")}\n          variant={\n            activeTheme?.filterGroup.cancelButtonVariant as HvButtonVariant\n          }\n          onClick={onCancelHandler}\n        >\n          {labels?.cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    </HvBaseDropdown>\n  );\n});\n"],"names":["forwardRef","useDefaultProps","useClasses","useTheme","useState","useContext","HvFilterGroupContext","useRef","useMemo","jsxs","Fragment","jsx","Filters","HvTypography","HvBaseDropdown","setId","HvFilterGroupCounter","HvFilterGroupLeftPanel","HvFilterGroupRightPanel","HvActionBar","HvButton"],"mappings":"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"}
+{"version":3,"file":"FilterContent.cjs","sources":["../../../../src/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo, useRef, useState } from \"react\";\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvActionBar } from \"../../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../../BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"../../Button\";\nimport { HvFormStatus } from \"../../Forms\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport type { HvFilterGroupLabels } from \"../FilterGroup\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\nimport { HvFilterGroupHorizontalPlacement, HvFilterGroupValue } from \"../types\";\nimport { staticClasses, useClasses } from \"./FilterContent.styles\";\n\nexport { staticClasses as filterGroupContentClasses };\n\nexport type HvFilterGroupContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupContentProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  description?: React.ReactNode;\n  status?: HvFormStatus;\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue,\n  ) => void;\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  labels?: HvFilterGroupLabels;\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  disablePortal?: boolean;\n  escapeWithReference?: boolean;\n  height?: string | number;\n  leftEmptyElement?: React.ReactNode;\n  rightEmptyElement?: React.ReactNode;\n  disabled?: boolean;\n  classes?: HvFilterGroupContentClasses;\n}\n\nexport const HvFilterGroupContent = forwardRef<\n  HTMLDivElement,\n  HvFilterGroupContentProps\n>((props, ref) => {\n  const {\n    id,\n    status,\n    disabled = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onCancel,\n    onClear,\n    labels,\n    horizontalPlacement = \"right\",\n    disablePortal = true,\n    escapeWithReference = true,\n    height,\n    leftEmptyElement,\n    rightEmptyElement,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvFilterGroupContent\", props);\n\n  const { classes } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const [filterGroupOpen, setFilterGroupOpen] = useState<boolean>(false);\n\n  const {\n    defaultValue,\n    filterValues,\n    rollbackFilters,\n    clearFilters,\n    applyFilters,\n    applyDisabled,\n  } = useContext(HvFilterGroupContext);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const onApplyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    applyFilters();\n    onChange?.(event, filterValues);\n    setFilterGroupOpen(false);\n  };\n\n  const onCancelHandler = (\n    event: React.MouseEvent<HTMLButtonElement> | Event,\n  ) => {\n    rollbackFilters();\n    onCancel?.(event);\n    setFilterGroupOpen(false);\n  };\n\n  const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    clearFilters();\n    onClear?.(event);\n  };\n\n  const handleToggle = (event: Event, open: boolean) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (event === null) return;\n    setFilterGroupOpen(open);\n    if (!open) onCancelHandler?.(event);\n  };\n\n  const Header = useMemo(\n    () => (\n      <>\n        <Filters />\n        <HvTypography variant=\"label\">{labels?.placeholder}</HvTypography>\n      </>\n    ),\n    [labels?.placeholder],\n  );\n\n  return (\n    <HvBaseDropdown\n      ref={ref}\n      id={setId(id, \"dropdown\")}\n      role=\"combobox\"\n      classes={{\n        root: classes.dropdown,\n        panel: classes.panel,\n        selection: classes.baseDropdownSelection,\n        header: classes.header,\n      }}\n      disabled={disabled}\n      disablePortal={disablePortal}\n      variableWidth\n      placement={horizontalPlacement}\n      expanded={filterGroupOpen}\n      onToggle={handleToggle}\n      onClickOutside={onCancelHandler}\n      onContainerCreation={focusOnContainer}\n      placeholder={Header}\n      adornment={<HvFilterGroupCounter />}\n      popperProps={{\n        modifiers: [{ name: \"preventOverflow\", enabled: escapeWithReference }],\n      }}\n      aria-haspopup=\"dialog\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-invalid={status === \"invalid\" ? true : undefined}\n      aria-errormessage={status === \"invalid\" ? setId(id, \"error\") : undefined}\n      aria-describedby={\n        [description && setId(id, \"description\"), ariaDescribedBy]\n          .join(\" \")\n          .trim() || undefined\n      }\n      {...others}\n    >\n      <div ref={focusTarget} tabIndex={-1} />\n      <div className={classes.root} style={{ height }}>\n        <HvFilterGroupLeftPanel\n          id={id}\n          className={classes.leftSidePanel}\n          emptyElement={leftEmptyElement}\n        />\n        <HvFilterGroupRightPanel\n          id={id}\n          className={classes.rightSidePanel}\n          emptyElement={rightEmptyElement}\n          labels={labels}\n        />\n      </div>\n      <HvActionBar className={classes.actionBar}>\n        <HvButton\n          id={setId(id, \"clearFilters-button\")}\n          disabled={\n            defaultValue\n              ? defaultValue?.flat().length === filterValues?.flat().length\n              : filterValues?.flat().length === 0\n          }\n          variant=\"secondaryGhost\"\n          onClick={onClearHandler}\n        >\n          {labels?.clearLabel}\n        </HvButton>\n        <div aria-hidden=\"true\" className={classes.space}>\n          &nbsp;\n        </div>\n        <HvButton\n          id={setId(id, \"apply-button\")}\n          disabled={applyDisabled}\n          variant={\n            activeTheme?.filterGroup.applyButtonVariant as HvButtonVariant\n          }\n          onClick={onApplyHandler}\n          className={classes.applyButton}\n        >\n          {labels?.applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"cancel-button\")}\n          variant={\n            activeTheme?.filterGroup.cancelButtonVariant as HvButtonVariant\n          }\n          onClick={onCancelHandler}\n        >\n          {labels?.cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    </HvBaseDropdown>\n  );\n});\n"],"names":["forwardRef","useDefaultProps","useClasses","useTheme","useState","useContext","HvFilterGroupContext","useRef","useMemo","jsxs","Fragment","jsx","Filters","HvTypography","HvBaseDropdown","setId","HvFilterGroupCounter","HvFilterGroupLeftPanel","HvFilterGroupRightPanel","HvActionBar","HvButton"],"mappings":";;;;;;;;;;;;;;;;;AA6CO,MAAM,uBAAuBA,MAAA,WAGlC,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,wBAAwB,KAAK;AAEjD,QAAM,EAAE,QAAA,IAAYC,qBAAA,WAAW,WAAW;AACpC,QAAA,EAAE,gBAAgBC,SAAAA;AAExB,QAAM,CAAC,iBAAiB,kBAAkB,IAAIC,eAAkB,KAAK;AAE/D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACEC,MAAAA,WAAWC,mBAAAA,oBAAoB;AAE7B,QAAA,cAAcC,aAAuB,IAAI;AAE/C,QAAM,mBAAmB,MAAM;AAC7B,gBAAY,SAAS;EAAM;AAGvB,QAAA,iBAAiB,CAAC,UAA+C;AACxD;AACb,eAAW,OAAO,YAAY;AAC9B,uBAAmB,KAAK;AAAA,EAAA;AAGpB,QAAA,kBAAkB,CACtB,UACG;AACa;AAChB,eAAW,KAAK;AAChB,uBAAmB,KAAK;AAAA,EAAA;AAGpB,QAAA,iBAAiB,CAAC,UAA+C;AACxD;AACb,cAAU,KAAK;AAAA,EAAA;AAGX,QAAA,eAAe,CAAC,OAAc,SAAkB;AAMpD,QAAI,UAAU;AAAM;AACpB,uBAAmB,IAAI;AACvB,QAAI,CAAC;AAAM,wBAAkB,KAAK;AAAA,EAAA;AAGpC,QAAM,SAASC,MAAA;AAAA,IACb,MAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,MAAAC,2BAAA,IAACC,gBAAQ,SAAA,EAAA;AAAA,MACRD,2BAAA,IAAAE,WAAA,cAAA,EAAa,SAAQ,SAAS,kBAAQ,aAAY;AAAA,IAAA,GACrD;AAAA,IAEF,CAAC,QAAQ,WAAW;AAAA,EAAA;AAIpB,SAAAJ,2BAAA;AAAA,IAACK,aAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,IAAIC,MAAAA,MAAM,IAAI,UAAU;AAAA,MACxB,MAAK;AAAA,MACL,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,OAAO,QAAQ;AAAA,QACf,WAAW,QAAQ;AAAA,QACnB,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,qBAAqB;AAAA,MACrB,aAAa;AAAA,MACb,0CAAYC,QAAqB,sBAAA,EAAA;AAAA,MACjC,aAAa;AAAA,QACX,WAAW,CAAC,EAAE,MAAM,mBAAmB,SAAS,qBAAqB;AAAA,MACvE;AAAA,MACA,iBAAc;AAAA,MACd,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,gBAAc,WAAW,YAAY,OAAO;AAAA,MAC5C,qBAAmB,WAAW,YAAYD,MAAAA,MAAM,IAAI,OAAO,IAAI;AAAA,MAC/D,oBACE,CAAC,eAAeA,YAAM,IAAI,aAAa,GAAG,eAAe,EACtD,KAAK,GAAG,EACR,UAAU;AAAA,MAEd,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAJ,2BAAA,IAAC,OAAI,EAAA,KAAK,aAAa,UAAU,IAAI;AAAA,QACrCF,gCAAC,SAAI,WAAW,QAAQ,MAAM,OAAO,EAAE,OACrC,GAAA,UAAA;AAAA,UAAAE,2BAAA;AAAA,YAACM,UAAA;AAAA,YAAA;AAAA,cACC;AAAA,cACA,WAAW,QAAQ;AAAA,cACnB,cAAc;AAAA,YAAA;AAAA,UAChB;AAAA,UACAN,2BAAA;AAAA,YAACO,WAAA;AAAA,YAAA;AAAA,cACC;AAAA,cACA,WAAW,QAAQ;AAAA,cACnB,cAAc;AAAA,cACd;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GACF;AAAA,QACCT,2BAAA,KAAAU,UAAA,aAAA,EAAY,WAAW,QAAQ,WAC9B,UAAA;AAAA,UAAAR,2BAAA;AAAA,YAACS,OAAA;AAAA,YAAA;AAAA,cACC,IAAIL,MAAAA,MAAM,IAAI,qBAAqB;AAAA,cACnC,UACE,eACI,cAAc,KAAA,EAAO,WAAW,cAAc,KAAA,EAAO,SACrD,cAAc,OAAO,WAAW;AAAA,cAEtC,SAAQ;AAAA,cACR,SAAS;AAAA,cAER,UAAQ,QAAA;AAAA,YAAA;AAAA,UACX;AAAA,yCACC,OAAI,EAAA,eAAY,QAAO,WAAW,QAAQ,OAAO,UAElD,KAAA;AAAA,UACAJ,2BAAA;AAAA,YAACS,OAAA;AAAA,YAAA;AAAA,cACC,IAAIL,MAAAA,MAAM,IAAI,cAAc;AAAA,cAC5B,UAAU;AAAA,cACV,SACE,aAAa,YAAY;AAAA,cAE3B,SAAS;AAAA,cACT,WAAW,QAAQ;AAAA,cAElB,UAAQ,QAAA;AAAA,YAAA;AAAA,UACX;AAAA,UACAJ,2BAAA;AAAA,YAACS,OAAA;AAAA,YAAA;AAAA,cACC,IAAIL,MAAAA,MAAM,IAAI,eAAe;AAAA,cAC7B,SACE,aAAa,YAAY;AAAA,cAE3B,SAAS;AAAA,cAER,UAAQ,QAAA;AAAA,YAAA;AAAA,UACX;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;;;"}

package/dist/cjs/FilterGroup/FilterGroup.cjs

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
+const useControlled = require("../hooks/useControlled.cjs");
+const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const useLabels = require("../hooks/useLabels.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
-const useControlled = require("../hooks/useControlled.cjs");
 const setId = require("../utils/setId.cjs");
-const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const FilterGroup_styles = require("./FilterGroup.styles.cjs");
 const FilterGroupContext = require("./FilterGroupContext.cjs");
 const FilterContent = require("./FilterContent/FilterContent.cjs");

package/dist/cjs/FilterGroup/FilterGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterGroup.cjs","sources":["../../../src/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { staticClasses, useClasses } from \"./FilterGroup.styles\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport {\n  HvFilterGroupFilters,\n  HvFilterGroupHorizontalPlacement,\n  HvFilterGroupValue,\n} from \"./types\";\n\nexport { staticClasses as filterGroupClasses };\n\nexport type HvFilterGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**  Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS = {\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Clear button label. */\n  clearLabel: \"Clear Filters\",\n  /** Placeholder label. */\n  placeholder: \"Filters\",\n  /** SearchBox placeholder label. */\n  searchBoxPlaceholder: \"Search\",\n  /** Select All placeholder label. */\n  selectAll: \"All\",\n  /** Multi selection conjunction placeholder label. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvFilterGroupLabels = Partial<typeof DEFAULT_LABELS>;\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = forwardRef<HTMLDivElement, HvFilterGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      id,\n      name,\n      required = false,\n      disabled = false,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      labels: labelsProp,\n      defaultValue,\n      value,\n      filters,\n      horizontalPlacement = \"right\",\n      disablePortal = true,\n      escapeWithReference = true,\n      height = 350,\n      filterContentProps,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvFilterGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const hasLabel = label != null;\n\n    const hasDescription = description != null;\n\n    // Error message area will only be needed if the status is being controlled\n    // or if required is true\n    const canShowError = status !== undefined || required;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={value}\n        status={status}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvFilterGroupProvider\n          defaultValue={defaultValue}\n          value={value}\n          filters={filters}\n        >\n          <HvFilterGroupContent\n            ref={ref}\n            id={elementId}\n            disabled={disabled}\n            disablePortal={disablePortal}\n            variableWidth\n            placement={horizontalPlacement}\n            escapeWithReference={escapeWithReference}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            status={status}\n            onChange={onChange}\n            onCancel={onCancel}\n            onClear={onClear}\n            labels={labels}\n            height={height}\n            {...filterContentProps}\n          />\n          {canShowError && (\n            <HvWarningText\n              id={setId(elementId, \"error\")}\n              disableBorder\n              className={classes.error}\n            >\n              {validationMessage}\n            </HvWarningText>\n          )}\n        </HvFilterGroupProvider>\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useControlled","useUniqueId","useLabels","jsxs","HvFormElement","jsx","HvLabel","setId","HvInfoMessage","HvFilterGroupProvider","HvFilterGroupContent","HvWarningText"],"mappings":"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"}
+{"version":3,"file":"FilterGroup.cjs","sources":["../../../src/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { staticClasses, useClasses } from \"./FilterGroup.styles\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport {\n  HvFilterGroupFilters,\n  HvFilterGroupHorizontalPlacement,\n  HvFilterGroupValue,\n} from \"./types\";\n\nexport { staticClasses as filterGroupClasses };\n\nexport type HvFilterGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**  Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue,\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS = {\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Clear button label. */\n  clearLabel: \"Clear Filters\",\n  /** Placeholder label. */\n  placeholder: \"Filters\",\n  /** SearchBox placeholder label. */\n  searchBoxPlaceholder: \"Search\",\n  /** Select All placeholder label. */\n  selectAll: \"All\",\n  /** Multi selection conjunction placeholder label. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvFilterGroupLabels = Partial<typeof DEFAULT_LABELS>;\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = forwardRef<HTMLDivElement, HvFilterGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      id,\n      name,\n      required = false,\n      disabled = false,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      labels: labelsProp,\n      defaultValue,\n      value,\n      filters,\n      horizontalPlacement = \"right\",\n      disablePortal = true,\n      escapeWithReference = true,\n      height = 350,\n      filterContentProps,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvFilterGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const hasLabel = label != null;\n\n    const hasDescription = description != null;\n\n    // Error message area will only be needed if the status is being controlled\n    // or if required is true\n    const canShowError = status !== undefined || required;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={value}\n        status={status}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvFilterGroupProvider\n          defaultValue={defaultValue}\n          value={value}\n          filters={filters}\n        >\n          <HvFilterGroupContent\n            ref={ref}\n            id={elementId}\n            disabled={disabled}\n            disablePortal={disablePortal}\n            variableWidth\n            placement={horizontalPlacement}\n            escapeWithReference={escapeWithReference}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            status={status}\n            onChange={onChange}\n            onCancel={onCancel}\n            onClear={onClear}\n            labels={labels}\n            height={height}\n            {...filterContentProps}\n          />\n          {canShowError && (\n            <HvWarningText\n              id={setId(elementId, \"error\")}\n              disableBorder\n              className={classes.error}\n            >\n              {validationMessage}\n            </HvWarningText>\n          )}\n        </HvFilterGroupProvider>\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useControlled","useUniqueId","useLabels","jsxs","HvFormElement","jsx","HvLabel","setId","HvInfoMessage","HvFilterGroupProvider","HvFilterGroupContent","HvWarningText"],"mappings":"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"}

package/dist/cjs/FilterGroup/FilterGroupContext.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
-const helpers = require("../utils/helpers.cjs");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const helpers = require("../utils/helpers.cjs");
 const useSavedState = require("../utils/useSavedState.cjs");
 const HvFilterGroupContext = React.createContext({
   activeGroup: 0,

package/dist/cjs/FilterGroup/FilterGroupContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterGroupContext.cjs","sources":["../../../src/FilterGroup/FilterGroupContext.tsx"],"sourcesContent":["import {\n  Dispatch,\n  SetStateAction,\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { isEqual } from \"../utils/helpers\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"./types\";\n\ninterface HvFilterGroupContextValue {\n  activeGroup: number;\n  setActiveGroup: Dispatch<SetStateAction<number>>;\n  filterOptions: HvFilterGroupFilters;\n  setFilterValues: (value?: HvFilterGroupValue, save?: boolean) => void;\n  rollbackFilters: () => void;\n  clearFilters: () => void;\n  applyFilters: () => void;\n  applyDisabled: boolean;\n  appliedFilters?: HvFilterGroupValue;\n  defaultValue?: HvFilterGroupValue;\n  filterValues?: HvFilterGroupValue;\n}\n\nexport const HvFilterGroupContext = createContext<HvFilterGroupContextValue>({\n  activeGroup: 0,\n  setActiveGroup: () => {},\n  filterOptions: [],\n  setFilterValues: () => {},\n  rollbackFilters: () => {},\n  clearFilters: () => {},\n  applyFilters: () => {},\n  applyDisabled: false,\n  filterValues: [],\n  appliedFilters: undefined,\n  defaultValue: undefined,\n});\n\nconst groups = (filters: HvFilterGroupFilters) => filters.map(() => []);\n\ninterface HvFilterGroupProviderProps {\n  children: React.ReactNode;\n  filters: HvFilterGroupFilters;\n  defaultValue?: HvFilterGroupValue;\n  value?: HvFilterGroupValue;\n}\n\nexport const HvFilterGroupProvider = (props: HvFilterGroupProviderProps) => {\n  const { defaultValue, value, filters, children } = useDefaultProps(\n    \"HvFilterGroupProvider\",\n    props\n  );\n\n  const [group, setActiveGroup] = useState<number>(0);\n  const [filterValues, setFilterValues, rollbackFilters, appliedFilters] =\n    useSavedState<HvFilterGroupValue>(value || groups(filters));\n  const [applyDisabled, setApplyDisabled] = useState<boolean>(false);\n\n  useEffect(() => {\n    setFilterValues(value, true);\n  }, [value, setFilterValues]);\n\n  useEffect(() => {\n    setApplyDisabled(isEqual(filterValues, appliedFilters));\n  }, [filterValues, appliedFilters]);\n\n  const clearFilters = useCallback(() => {\n    setFilterValues(defaultValue || groups(filters));\n  }, [filters, setFilterValues, defaultValue]);\n\n  const applyFilters = useCallback(() => {\n    setFilterValues(filterValues, true);\n  }, [filterValues, setFilterValues]);\n\n  const contextValue: HvFilterGroupContextValue = useMemo(\n    () => ({\n      activeGroup: group,\n      setActiveGroup,\n      filterOptions: filters,\n      filterValues,\n      setFilterValues,\n      appliedFilters,\n      rollbackFilters,\n      clearFilters,\n      applyFilters,\n      applyDisabled,\n      defaultValue,\n    }),\n    [\n      appliedFilters,\n      applyDisabled,\n      applyFilters,\n      clearFilters,\n      filterValues,\n      filters,\n      group,\n      rollbackFilters,\n      setFilterValues,\n      defaultValue,\n    ]\n  );\n\n  return (\n    <HvFilterGroupContext.Provider value={contextValue}>\n      {children}\n    </HvFilterGroupContext.Provider>\n  );\n};\n"],"names":["createContext","useDefaultProps","useState","useSavedState","useEffect","isEqual","useCallback","useMemo"],"mappings":";;;;;;;AA6BO,MAAM,uBAAuBA,MAAAA,cAAyC;AAAA,EAC3E,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,eAAe,CAAC;AAAA,EAChB,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,eAAe;AAAA,EACf,cAAc,CAAC;AAAA,EACf,gBAAgB;AAAA,EAChB,cAAc;AAChB,CAAC;AAED,MAAM,SAAS,CAAC,YAAkC,QAAQ,IAAI,MAAM,CAAE,CAAA;AASzD,MAAA,wBAAwB,CAAC,UAAsC;AAC1E,QAAM,EAAE,cAAc,OAAO,SAAS,SAAa,IAAAC,gBAAA;AAAA,IACjD;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,CAAC,OAAO,cAAc,IAAIC,eAAiB,CAAC;AAC5C,QAAA,CAAC,cAAc,iBAAiB,iBAAiB,cAAc,IACnEC,cAAkC,cAAA,SAAS,OAAO,OAAO,CAAC;AAC5D,QAAM,CAAC,eAAe,gBAAgB,IAAID,eAAkB,KAAK;AAEjEE,QAAAA,UAAU,MAAM;AACd,oBAAgB,OAAO,IAAI;AAAA,EAAA,GAC1B,CAAC,OAAO,eAAe,CAAC;AAE3BA,QAAAA,UAAU,MAAM;AACG,qBAAAC,QAAA,QAAQ,cAAc,cAAc,CAAC;AAAA,EAAA,GACrD,CAAC,cAAc,cAAc,CAAC;AAE3B,QAAA,eAAeC,MAAAA,YAAY,MAAM;AACrB,oBAAA,gBAAgB,OAAO,OAAO,CAAC;AAAA,EAC9C,GAAA,CAAC,SAAS,iBAAiB,YAAY,CAAC;AAErC,QAAA,eAAeA,MAAAA,YAAY,MAAM;AACrC,oBAAgB,cAAc,IAAI;AAAA,EAAA,GACjC,CAAC,cAAc,eAAe,CAAC;AAElC,QAAM,eAA0CC,MAAA;AAAA,IAC9C,OAAO;AAAA,MACL,aAAa;AAAA,MACb;AAAA,MACA,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,wCACG,qBAAqB,UAArB,EAA8B,OAAO,cACnC,SACH,CAAA;AAEJ;;;"}
+{"version":3,"file":"FilterGroupContext.cjs","sources":["../../../src/FilterGroup/FilterGroupContext.tsx"],"sourcesContent":["import {\n  createContext,\n  Dispatch,\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { isEqual } from \"../utils/helpers\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"./types\";\n\ninterface HvFilterGroupContextValue {\n  activeGroup: number;\n  setActiveGroup: Dispatch<SetStateAction<number>>;\n  filterOptions: HvFilterGroupFilters;\n  setFilterValues: (value?: HvFilterGroupValue, save?: boolean) => void;\n  rollbackFilters: () => void;\n  clearFilters: () => void;\n  applyFilters: () => void;\n  applyDisabled: boolean;\n  appliedFilters?: HvFilterGroupValue;\n  defaultValue?: HvFilterGroupValue;\n  filterValues?: HvFilterGroupValue;\n}\n\nexport const HvFilterGroupContext = createContext<HvFilterGroupContextValue>({\n  activeGroup: 0,\n  setActiveGroup: () => {},\n  filterOptions: [],\n  setFilterValues: () => {},\n  rollbackFilters: () => {},\n  clearFilters: () => {},\n  applyFilters: () => {},\n  applyDisabled: false,\n  filterValues: [],\n  appliedFilters: undefined,\n  defaultValue: undefined,\n});\n\nconst groups = (filters: HvFilterGroupFilters) => filters.map(() => []);\n\ninterface HvFilterGroupProviderProps {\n  children: React.ReactNode;\n  filters: HvFilterGroupFilters;\n  defaultValue?: HvFilterGroupValue;\n  value?: HvFilterGroupValue;\n}\n\nexport const HvFilterGroupProvider = (props: HvFilterGroupProviderProps) => {\n  const { defaultValue, value, filters, children } = useDefaultProps(\n    \"HvFilterGroupProvider\",\n    props,\n  );\n\n  const [group, setActiveGroup] = useState<number>(0);\n  const [filterValues, setFilterValues, rollbackFilters, appliedFilters] =\n    useSavedState<HvFilterGroupValue>(value || groups(filters));\n  const [applyDisabled, setApplyDisabled] = useState<boolean>(false);\n\n  useEffect(() => {\n    setFilterValues(value, true);\n  }, [value, setFilterValues]);\n\n  useEffect(() => {\n    setApplyDisabled(isEqual(filterValues, appliedFilters));\n  }, [filterValues, appliedFilters]);\n\n  const clearFilters = useCallback(() => {\n    setFilterValues(defaultValue || groups(filters));\n  }, [filters, setFilterValues, defaultValue]);\n\n  const applyFilters = useCallback(() => {\n    setFilterValues(filterValues, true);\n  }, [filterValues, setFilterValues]);\n\n  const contextValue: HvFilterGroupContextValue = useMemo(\n    () => ({\n      activeGroup: group,\n      setActiveGroup,\n      filterOptions: filters,\n      filterValues,\n      setFilterValues,\n      appliedFilters,\n      rollbackFilters,\n      clearFilters,\n      applyFilters,\n      applyDisabled,\n      defaultValue,\n    }),\n    [\n      appliedFilters,\n      applyDisabled,\n      applyFilters,\n      clearFilters,\n      filterValues,\n      filters,\n      group,\n      rollbackFilters,\n      setFilterValues,\n      defaultValue,\n    ],\n  );\n\n  return (\n    <HvFilterGroupContext.Provider value={contextValue}>\n      {children}\n    </HvFilterGroupContext.Provider>\n  );\n};\n"],"names":["createContext","useDefaultProps","useState","useSavedState","useEffect","isEqual","useCallback","useMemo"],"mappings":";;;;;;;AA6BO,MAAM,uBAAuBA,MAAAA,cAAyC;AAAA,EAC3E,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,eAAe,CAAC;AAAA,EAChB,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,eAAe;AAAA,EACf,cAAc,CAAC;AAAA,EACf,gBAAgB;AAAA,EAChB,cAAc;AAChB,CAAC;AAED,MAAM,SAAS,CAAC,YAAkC,QAAQ,IAAI,MAAM,CAAE,CAAA;AASzD,MAAA,wBAAwB,CAAC,UAAsC;AAC1E,QAAM,EAAE,cAAc,OAAO,SAAS,SAAa,IAAAC,gBAAA;AAAA,IACjD;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,CAAC,OAAO,cAAc,IAAIC,eAAiB,CAAC;AAC5C,QAAA,CAAC,cAAc,iBAAiB,iBAAiB,cAAc,IACnEC,cAAkC,cAAA,SAAS,OAAO,OAAO,CAAC;AAC5D,QAAM,CAAC,eAAe,gBAAgB,IAAID,eAAkB,KAAK;AAEjEE,QAAAA,UAAU,MAAM;AACd,oBAAgB,OAAO,IAAI;AAAA,EAAA,GAC1B,CAAC,OAAO,eAAe,CAAC;AAE3BA,QAAAA,UAAU,MAAM;AACG,qBAAAC,QAAA,QAAQ,cAAc,cAAc,CAAC;AAAA,EAAA,GACrD,CAAC,cAAc,cAAc,CAAC;AAE3B,QAAA,eAAeC,MAAAA,YAAY,MAAM;AACrB,oBAAA,gBAAgB,OAAO,OAAO,CAAC;AAAA,EAC9C,GAAA,CAAC,SAAS,iBAAiB,YAAY,CAAC;AAErC,QAAA,eAAeA,MAAAA,YAAY,MAAM;AACrC,oBAAgB,cAAc,IAAI;AAAA,EAAA,GACjC,CAAC,cAAc,eAAe,CAAC;AAElC,QAAM,eAA0CC,MAAA;AAAA,IAC9C,OAAO;AAAA,MACL,aAAa;AAAA,MACb;AAAA,MACA,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,wCACG,qBAAqB,UAArB,EAA8B,OAAO,cACnC,SACH,CAAA;AAEJ;;;"}

package/dist/cjs/FilterGroup/RightPanel/RightPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightPanel.cjs","sources":["../../../../src/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps } from \"../../List\";\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const { all: allActiveGroupOptions, enabled: enabledActiveGroupOptions } =\n    useMemo(() => {\n      const filteredOptions = filterOptions[activeGroup]?.data.filter(\n        (option) => option.name.toLowerCase().includes(searchStr.toLowerCase())\n      );\n\n      return {\n        all: filteredOptions.map((option) => option.id) || [],\n        enabled:\n          filteredOptions\n            .filter((option) => !option.disabled)\n            .map((option) => option.id) || [],\n      };\n    }, [filterOptions, activeGroup, searchStr]);\n\n  const activeFilterValues = useMemo(\n    () =>\n      filterValues[activeGroup]?.filter((value) =>\n        allActiveGroupOptions.includes(value)\n      ) || [],\n    [filterValues, allActiveGroupOptions, activeGroup]\n  );\n\n  const listValues = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data.map((option) => ({\n        ...option,\n        label: option.name,\n        selected: filterValues[activeGroup]?.includes(option.id),\n        isHidden:\n          option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n      })) || [],\n    [filterOptions, filterValues, activeGroup, searchStr]\n  );\n\n  const updateSelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === allActiveGroupOptions.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  }, [activeFilterValues, allActiveGroupOptions]);\n\n  useEffect(() => {\n    updateSelectAll();\n  }, [activeFilterValues, updateSelectAll]);\n\n  useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n  const onChangeHandler: HvListProps[\"onChange\"] = (values) => {\n    const newFilterValues = filterOptions.map((_, i) =>\n      activeGroup === i\n        ? values.filter((v) => v.selected).map((v) => v.id)\n        : [...(filterValues[i] || [])]\n    );\n    setFilterValues(newFilterValues as any);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = structuredClone(filterValues);\n\n    if (anySelected) {\n      if (searchStr !== \"\") {\n        newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(\n          (value) => !enabledActiveGroupOptions.includes(value)\n        );\n      } else {\n        newFilterValues[activeGroup] = [];\n      }\n    } else {\n      const currentOptions = newFilterValues[activeGroup] || [];\n      newFilterValues[activeGroup] = [\n        ...currentOptions,\n        ...enabledActiveGroupOptions,\n      ];\n    }\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    enabledActiveGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n    searchStr,\n  ]);\n\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${allActiveGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${allActiveGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  }, [\n    activeFilterValues?.length,\n    allActiveGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n    classes?.selectAllContainer,\n    classes?.selectAll,\n  ]);\n\n  return (\n    <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n      {listValues.length > 0 ? (\n        <>\n          <HvInput\n            id={setId(id, \"search\")}\n            classes={{\n              root: classes.search,\n            }}\n            type=\"search\"\n            placeholder={labels?.searchBoxPlaceholder}\n            value={searchStr}\n            onChange={(_, str) => setSearchStr(str)}\n          />\n          <SelectAll />\n          <HvList\n            key={activeGroup}\n            id={setId(id, \"list\")}\n            values={listValues}\n            className={classes.list}\n            multiSelect\n            useSelector\n            showSelectAll={false}\n            onChange={onChangeHandler}\n            selectable\n            condensed\n            hasTooltips\n          />\n        </>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":["useClasses","useState","useContext","HvFilterGroupContext","useMemo","useCallback","useEffect","jsx","HvTypography","jsxs","Fragment","HvCheckBox","setId","HvPanel","HvInput","HvList"],"mappings":"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"}
+{"version":3,"file":"RightPanel.cjs","sources":["../../../../src/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps } from \"../../List\";\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const { all: allActiveGroupOptions, enabled: enabledActiveGroupOptions } =\n    useMemo(() => {\n      const filteredOptions = filterOptions[activeGroup]?.data.filter(\n        (option) => option.name.toLowerCase().includes(searchStr.toLowerCase()),\n      );\n\n      return {\n        all: filteredOptions.map((option) => option.id) || [],\n        enabled:\n          filteredOptions\n            .filter((option) => !option.disabled)\n            .map((option) => option.id) || [],\n      };\n    }, [filterOptions, activeGroup, searchStr]);\n\n  const activeFilterValues = useMemo(\n    () =>\n      filterValues[activeGroup]?.filter((value) =>\n        allActiveGroupOptions.includes(value),\n      ) || [],\n    [filterValues, allActiveGroupOptions, activeGroup],\n  );\n\n  const listValues = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data.map((option) => ({\n        ...option,\n        label: option.name,\n        selected: filterValues[activeGroup]?.includes(option.id),\n        isHidden:\n          option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n      })) || [],\n    [filterOptions, filterValues, activeGroup, searchStr],\n  );\n\n  const updateSelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === allActiveGroupOptions.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  }, [activeFilterValues, allActiveGroupOptions]);\n\n  useEffect(() => {\n    updateSelectAll();\n  }, [activeFilterValues, updateSelectAll]);\n\n  useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n  const onChangeHandler: HvListProps[\"onChange\"] = (values) => {\n    const newFilterValues = filterOptions.map((_, i) =>\n      activeGroup === i\n        ? values.filter((v) => v.selected).map((v) => v.id)\n        : [...(filterValues[i] || [])],\n    );\n    setFilterValues(newFilterValues as any);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = structuredClone(filterValues);\n\n    if (anySelected) {\n      if (searchStr !== \"\") {\n        newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(\n          (value) => !enabledActiveGroupOptions.includes(value),\n        );\n      } else {\n        newFilterValues[activeGroup] = [];\n      }\n    } else {\n      const currentOptions = newFilterValues[activeGroup] || [];\n      newFilterValues[activeGroup] = [\n        ...currentOptions,\n        ...enabledActiveGroupOptions,\n      ];\n    }\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    enabledActiveGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n    searchStr,\n  ]);\n\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${allActiveGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${allActiveGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  }, [\n    activeFilterValues?.length,\n    allActiveGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n    classes?.selectAllContainer,\n    classes?.selectAll,\n  ]);\n\n  return (\n    <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n      {listValues.length > 0 ? (\n        <>\n          <HvInput\n            id={setId(id, \"search\")}\n            classes={{\n              root: classes.search,\n            }}\n            type=\"search\"\n            placeholder={labels?.searchBoxPlaceholder}\n            value={searchStr}\n            onChange={(_, str) => setSearchStr(str)}\n          />\n          <SelectAll />\n          <HvList\n            key={activeGroup}\n            id={setId(id, \"list\")}\n            values={listValues}\n            className={classes.list}\n            multiSelect\n            useSelector\n            showSelectAll={false}\n            onChange={onChangeHandler}\n            selectable\n            condensed\n            hasTooltips\n          />\n        </>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":["useClasses","useState","useContext","HvFilterGroupContext","useMemo","useCallback","useEffect","jsx","HvTypography","jsxs","Fragment","HvCheckBox","setId","HvPanel","HvInput","HvList"],"mappings":"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"}

package/dist/cjs/Focus/Focus.cjs

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
-const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const browser = require("../utils/browser.cjs");
 const ConditionalWrapper = require("../utils/ConditionalWrapper.cjs");
-const utils = require("./utils.cjs");
+const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const Focus_styles = require("./Focus.styles.cjs");
+const utils = require("./utils.cjs");
 const HvFocus = ({
   classes: classesProp,
   children,

package/dist/cjs/Focus/Focus.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Focus.cjs","sources":["../../../src/Focus/Focus.tsx"],"sourcesContent":["import { cloneElement, useState } from \"react\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { isBrowser } from \"../utils/browser\";\nimport { ConditionalWrapper } from \"../utils/ConditionalWrapper\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { getFocusableChildren, setFocusTo } from \"./utils\";\nimport { staticClasses, useClasses } from \"./Focus.styles\";\n\nexport { staticClasses as focusClasses };\nexport type HvFocusClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFocusStrategies = \"listbox\" | \"menu\" | \"card\" | \"grid\";\n\nexport interface HvFocusProps extends HvBaseProps<HTMLElement, \"children\"> {\n  children: React.ReactElement;\n  /** Extra configuration for the child element. */\n  configuration?: {\n    tabIndex?: number;\n  };\n  /** Indicates that the disabled class should be applied. */\n  disabledClass?: boolean;\n  /** Whether the focus is selected. */\n  selected?: boolean;\n  /** Whether the focus is disabled. */\n  disabled?: boolean;\n  /** The reference to the root element to hold all Focus' context. */\n  rootRef?: React.RefObject<HTMLElement>;\n  /** Show focus when click element. v */\n  focusOnClick?: boolean;\n  /** Show focus when click element. v */\n  focusDisabled?: boolean;\n  /** Focus and navigation strategy to be used. v */\n  strategy?: HvFocusStrategies;\n  /** Uses an absolute positioned div as a focus. v */\n  useFalseFocus?: boolean;\n  /** Narrows the results of the focus to only theses class v */\n  filterClass?: string;\n  /** How much the navigation will skip when using the arrows. v */\n  navigationJump?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFocusClasses;\n}\n\nexport const HvFocus = ({\n  classes: classesProp,\n  children,\n  configuration = {},\n  disabledClass = false,\n  selected = false,\n  disabled = false,\n  rootRef = undefined,\n  focusOnClick = false,\n  focusDisabled = true,\n  strategy = \"listbox\",\n  useFalseFocus = false,\n  filterClass,\n  navigationJump = 4,\n}: HvFocusProps) => {\n  const [showFocus, setShowFocus] = useState<boolean>(false);\n  const [childFocus, setChildFocus] = useState<any>();\n  const [hasRunConfig, setHasRunConfig] = useState(false);\n  const { classes, cx } = useClasses(classesProp);\n\n  const getFocuses = () => {\n    const focuses = rootRef?.current\n      ? Array.from(\n          rootRef.current.getElementsByClassName(\n            filterClass || staticClasses.root || \"root\"\n          )\n        )\n      : [];\n    return focuses;\n  };\n\n  const setTabIndex = (el, tabIndex = 0) => {\n    if (!el) return;\n    const elChildFocus = getFocusableChildren(el)[0];\n    if (elChildFocus) {\n      el.tabIndex = -1;\n      elChildFocus.tabIndex = tabIndex;\n    } else {\n      el.tabIndex = tabIndex;\n    }\n  };\n\n  const setSelectedTabIndex = () => {\n    const focuses = getFocuses();\n    const firstSelected = focuses.find((focus) =>\n      focus.classList.contains(classes.selected || \"selected\")\n    );\n\n    if (!firstSelected) return;\n    focuses.forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(firstSelected, 0);\n  };\n\n  const clearTabSiblings = (el) => {\n    getFocuses().forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(el, 0);\n  };\n\n  const onFocusStrategy = (evt) => {\n    if (strategy === \"listbox\") {\n      clearTabSiblings(evt.currentTarget);\n    }\n  };\n\n  const onBlurStrategy = () => {\n    if (\n      strategy === \"listbox\" &&\n      rootRef &&\n      rootRef.current &&\n      !rootRef.current.contains(document.activeElement)\n    ) {\n      setTimeout(() => {\n        setSelectedTabIndex();\n      }, 10);\n    }\n  };\n\n  const config = (el) => {\n    const { tabIndex } = configuration;\n    if (!el || hasRunConfig) return;\n    if (strategy === \"card\") {\n      setChildFocus(children);\n      return;\n    }\n\n    if (strategy === \"grid\") {\n      return;\n    }\n\n    const focusableChildren = getFocusableChildren(el);\n    if (focusableChildren.length) {\n      focusableChildren.forEach((child) => setTabIndex(child, -1));\n      setChildFocus(focusableChildren[0]);\n    }\n\n    if (tabIndex != null) setTabIndex(el, tabIndex);\n    setHasRunConfig(true);\n  };\n\n  const addFocusClass = (evt) => {\n    if (!useFalseFocus) {\n      // evt.currentTarget.classList.add(classes.focused);\n      classes.focused\n        .split(\" \")\n        .forEach((c) => evt.currentTarget.classList.add(c));\n      // add global class HvIsFocused as a marker\n      // not to be styled directly, only as helper in specific css queries\n      evt.currentTarget.classList.add(\"HvIsFocused\");\n      classes?.focus\n        ?.split(\" \")\n        .forEach((c) => evt.currentTarget.classList.add(c));\n    }\n  };\n\n  const removeFocusClass = () => {\n    if (!useFalseFocus) {\n      getFocuses().forEach((element) => {\n        // element.classList.remove(classes.focused);\n        classes.focused.split(\" \").forEach((c) => element.classList.remove(c));\n        // remove the global class HvIsFocused\n        element.classList.remove(\"HvIsFocused\");\n        classes?.focus?.split(\" \").forEach((c) => element.classList.remove(c));\n      });\n    }\n  };\n\n  const onFocus = (evt) => {\n    addFocusClass(evt);\n    setShowFocus(true);\n    // give focus to child element if any focusable\n\n    if (childFocus && childFocus.focus) childFocus.focus();\n    onFocusStrategy(evt);\n  };\n\n  const onBlur = () => {\n    setShowFocus(false);\n    removeFocusClass();\n    onBlurStrategy();\n  };\n\n  const onMouseDown = (evt) => {\n    const hasCard = !!evt.currentTarget?.querySelector(\".HvIsCardGridElement\");\n    if (strategy === \"grid\" && hasCard) return;\n\n    setFocusTo(evt.currentTarget);\n    setTabIndex(evt.currentTarget, 0);\n    // remove focus outline unless explicitly enabled\n    if (!focusOnClick) {\n      // TODO this piece of code works only because onMouseDown is happening after the focus event\n      // There is nothing in here that guarantees the order of these events, so it may present a problem in the future\n      removeFocusClass();\n      setShowFocus(false);\n    }\n  };\n\n  const focusAndUpdateIndex = (nextFocus, previousFocus, focusesList) => {\n    if (focusesList?.includes(previousFocus)) {\n      setTabIndex(previousFocus, -1);\n    }\n    setTabIndex(nextFocus, 0);\n    setFocusTo(nextFocus);\n  };\n\n  const getEnabledKeys = (currentFocusIndex, jump, listSize) => ({\n    right:\n      (currentFocusIndex + 1) % jump === 0 ||\n      currentFocusIndex + 1 > listSize - 1,\n    left: currentFocusIndex % jump === 0,\n    up: currentFocusIndex - jump < 0,\n    down:\n      currentFocusIndex + jump > listSize ||\n      currentFocusIndex + jump > listSize - 1,\n  });\n\n  const onGridKeyDownHandler = (\n    evt,\n    focuses,\n    focusesList,\n    currentFocusIndex,\n    jump\n  ) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    // except for Enter and SpaceBar\n    if (!isOneOfKeys(evt, [\"Enter\", \"Space\"])) {\n      evt.preventDefault();\n      evt.stopPropagation();\n    }\n\n    const blockedKeys = getEnabledKeys(\n      currentFocusIndex,\n      jump,\n      focusesList.length\n    );\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        if (isBrowser(\"firefox\")) {\n          evt.target.click();\n        } else {\n          evt.currentTarget.click();\n        }\n        break;\n      case \"ArrowUp\":\n        if (!blockedKeys.up) {\n          focusAndUpdateIndex(\n            focuses.jump || focuses.last,\n            evt.current,\n            focusesList\n          );\n        }\n        break;\n      case \"ArrowDown\":\n        if (!blockedKeys.down) {\n          focusAndUpdateIndex(\n            focuses.fall || focuses.first,\n            evt.current,\n            focusesList\n          );\n        }\n        break;\n      case \"ArrowLeft\":\n        if (!blockedKeys.left) {\n          focusAndUpdateIndex(\n            focuses.previous || focuses.last,\n            evt.current,\n            focusesList\n          );\n        }\n        break;\n      case \"ArrowRight\":\n        if (!blockedKeys.right) {\n          focusAndUpdateIndex(\n            focuses.next || focuses.first,\n            evt.current,\n            focusesList\n          );\n        }\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onVerticalArrangementHandler = (evt, focuses, focusesList) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        evt.target.click();\n        break;\n      case \"ArrowUp\":\n        focusAndUpdateIndex(\n          focuses.previous || focuses.last,\n          evt.current,\n          focusesList\n        );\n        break;\n      case \"ArrowDown\":\n        focusAndUpdateIndex(\n          focuses.next || focuses.first,\n          evt.current,\n          focusesList\n        );\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onSingleHandler = (evt) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\"Space\", \"Enter\"]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    evt.currentTarget.click();\n  };\n\n  const onKeyDown = (evt) => {\n    if (rootRef?.current == null) {\n      // operating outside of a composite widget\n      // nothing to manage, just style and trigger clicks\n      onSingleHandler(evt);\n      return;\n    }\n\n    // TODO keep the smart default, but allow to explicitly override if disabled elements should be focusable\n    const isDisabledFocusable = strategy === \"menu\";\n    const focusesList = getFocuses().filter(\n      (el) =>\n        isDisabledFocusable ||\n        !el.classList.contains(classes?.disabled as string)\n    );\n\n    const currentFocus = focusesList.indexOf(evt.currentTarget);\n\n    const focuses = {\n      first: focusesList[0],\n      last: focusesList[focusesList.length - 1],\n      previous: focusesList[currentFocus - 1],\n      next: focusesList[currentFocus + 1],\n      fall: focusesList[currentFocus + navigationJump],\n      jump: focusesList[currentFocus - navigationJump],\n    };\n\n    if (strategy === \"grid\") {\n      onGridKeyDownHandler(\n        evt,\n        focuses,\n        focusesList,\n        currentFocus,\n        navigationJump\n      );\n      return;\n    }\n\n    // TODO add property for specifying the composite widget orientation\n    // TODO implement handler for horizontal orientation\n    onVerticalArrangementHandler(evt, focuses, focusesList);\n  };\n\n  const onKeyUp = (evt) => {\n    if (isBrowser(\"firefox\")) evt.preventDefault();\n  };\n\n  if (disabled) return children;\n\n  const focusWrapper = (childrenToWrap) => (\n    <div className={classes.externalReference}>\n      {childrenToWrap}\n      {showFocus && <div className={classes.falseFocus} />}\n    </div>\n  );\n\n  return (\n    <ConditionalWrapper condition={useFalseFocus} wrapper={focusWrapper}>\n      {cloneElement(children, {\n        className: cx(\n          [classes.root, filterClass],\n          {\n            [classes.selected]: selected,\n            [classes.disabled]: disabledClass,\n            [classes.focusDisabled]: focusDisabled,\n          },\n          children.props.className\n        ),\n        ref: config,\n        onFocus,\n        onBlur,\n        onMouseDown,\n        onKeyDown,\n        onKeyUp,\n        selected,\n      })}\n    </ConditionalWrapper>\n  );\n};\n"],"names":["useState","useClasses","staticClasses","getFocusableChildren","setFocusTo","isOneOfKeys","isKey","isBrowser","jsx","ConditionalWrapper"],"mappings":"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"}
+{"version":3,"file":"Focus.cjs","sources":["../../../src/Focus/Focus.tsx"],"sourcesContent":["import { cloneElement, useState } from \"react\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { isBrowser } from \"../utils/browser\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { ConditionalWrapper } from \"../utils/ConditionalWrapper\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Focus.styles\";\nimport { getFocusableChildren, setFocusTo } from \"./utils\";\n\nexport { staticClasses as focusClasses };\nexport type HvFocusClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFocusStrategies = \"listbox\" | \"menu\" | \"card\" | \"grid\";\n\nexport interface HvFocusProps extends HvBaseProps<HTMLElement, \"children\"> {\n  children: React.ReactElement;\n  /** Extra configuration for the child element. */\n  configuration?: {\n    tabIndex?: number;\n  };\n  /** Indicates that the disabled class should be applied. */\n  disabledClass?: boolean;\n  /** Whether the focus is selected. */\n  selected?: boolean;\n  /** Whether the focus is disabled. */\n  disabled?: boolean;\n  /** The reference to the root element to hold all Focus' context. */\n  rootRef?: React.RefObject<HTMLElement>;\n  /** Show focus when click element. v */\n  focusOnClick?: boolean;\n  /** Show focus when click element. v */\n  focusDisabled?: boolean;\n  /** Focus and navigation strategy to be used. v */\n  strategy?: HvFocusStrategies;\n  /** Uses an absolute positioned div as a focus. v */\n  useFalseFocus?: boolean;\n  /** Narrows the results of the focus to only theses class v */\n  filterClass?: string;\n  /** How much the navigation will skip when using the arrows. v */\n  navigationJump?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFocusClasses;\n}\n\nexport const HvFocus = ({\n  classes: classesProp,\n  children,\n  configuration = {},\n  disabledClass = false,\n  selected = false,\n  disabled = false,\n  rootRef = undefined,\n  focusOnClick = false,\n  focusDisabled = true,\n  strategy = \"listbox\",\n  useFalseFocus = false,\n  filterClass,\n  navigationJump = 4,\n}: HvFocusProps) => {\n  const [showFocus, setShowFocus] = useState<boolean>(false);\n  const [childFocus, setChildFocus] = useState<any>();\n  const [hasRunConfig, setHasRunConfig] = useState(false);\n  const { classes, cx } = useClasses(classesProp);\n\n  const getFocuses = () => {\n    const focuses = rootRef?.current\n      ? Array.from(\n          rootRef.current.getElementsByClassName(\n            filterClass || staticClasses.root || \"root\",\n          ),\n        )\n      : [];\n    return focuses;\n  };\n\n  const setTabIndex = (el, tabIndex = 0) => {\n    if (!el) return;\n    const elChildFocus = getFocusableChildren(el)[0];\n    if (elChildFocus) {\n      el.tabIndex = -1;\n      elChildFocus.tabIndex = tabIndex;\n    } else {\n      el.tabIndex = tabIndex;\n    }\n  };\n\n  const setSelectedTabIndex = () => {\n    const focuses = getFocuses();\n    const firstSelected = focuses.find((focus) =>\n      focus.classList.contains(classes.selected || \"selected\"),\n    );\n\n    if (!firstSelected) return;\n    focuses.forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(firstSelected, 0);\n  };\n\n  const clearTabSiblings = (el) => {\n    getFocuses().forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(el, 0);\n  };\n\n  const onFocusStrategy = (evt) => {\n    if (strategy === \"listbox\") {\n      clearTabSiblings(evt.currentTarget);\n    }\n  };\n\n  const onBlurStrategy = () => {\n    if (\n      strategy === \"listbox\" &&\n      rootRef &&\n      rootRef.current &&\n      !rootRef.current.contains(document.activeElement)\n    ) {\n      setTimeout(() => {\n        setSelectedTabIndex();\n      }, 10);\n    }\n  };\n\n  const config = (el) => {\n    const { tabIndex } = configuration;\n    if (!el || hasRunConfig) return;\n    if (strategy === \"card\") {\n      setChildFocus(children);\n      return;\n    }\n\n    if (strategy === \"grid\") {\n      return;\n    }\n\n    const focusableChildren = getFocusableChildren(el);\n    if (focusableChildren.length) {\n      focusableChildren.forEach((child) => setTabIndex(child, -1));\n      setChildFocus(focusableChildren[0]);\n    }\n\n    if (tabIndex != null) setTabIndex(el, tabIndex);\n    setHasRunConfig(true);\n  };\n\n  const addFocusClass = (evt) => {\n    if (!useFalseFocus) {\n      // evt.currentTarget.classList.add(classes.focused);\n      classes.focused\n        .split(\" \")\n        .forEach((c) => evt.currentTarget.classList.add(c));\n      // add global class HvIsFocused as a marker\n      // not to be styled directly, only as helper in specific css queries\n      evt.currentTarget.classList.add(\"HvIsFocused\");\n      classes?.focus\n        ?.split(\" \")\n        .forEach((c) => evt.currentTarget.classList.add(c));\n    }\n  };\n\n  const removeFocusClass = () => {\n    if (!useFalseFocus) {\n      getFocuses().forEach((element) => {\n        // element.classList.remove(classes.focused);\n        classes.focused.split(\" \").forEach((c) => element.classList.remove(c));\n        // remove the global class HvIsFocused\n        element.classList.remove(\"HvIsFocused\");\n        classes?.focus?.split(\" \").forEach((c) => element.classList.remove(c));\n      });\n    }\n  };\n\n  const onFocus = (evt) => {\n    addFocusClass(evt);\n    setShowFocus(true);\n    // give focus to child element if any focusable\n\n    if (childFocus && childFocus.focus) childFocus.focus();\n    onFocusStrategy(evt);\n  };\n\n  const onBlur = () => {\n    setShowFocus(false);\n    removeFocusClass();\n    onBlurStrategy();\n  };\n\n  const onMouseDown = (evt) => {\n    const hasCard = !!evt.currentTarget?.querySelector(\".HvIsCardGridElement\");\n    if (strategy === \"grid\" && hasCard) return;\n\n    setFocusTo(evt.currentTarget);\n    setTabIndex(evt.currentTarget, 0);\n    // remove focus outline unless explicitly enabled\n    if (!focusOnClick) {\n      // TODO this piece of code works only because onMouseDown is happening after the focus event\n      // There is nothing in here that guarantees the order of these events, so it may present a problem in the future\n      removeFocusClass();\n      setShowFocus(false);\n    }\n  };\n\n  const focusAndUpdateIndex = (nextFocus, previousFocus, focusesList) => {\n    if (focusesList?.includes(previousFocus)) {\n      setTabIndex(previousFocus, -1);\n    }\n    setTabIndex(nextFocus, 0);\n    setFocusTo(nextFocus);\n  };\n\n  const getEnabledKeys = (currentFocusIndex, jump, listSize) => ({\n    right:\n      (currentFocusIndex + 1) % jump === 0 ||\n      currentFocusIndex + 1 > listSize - 1,\n    left: currentFocusIndex % jump === 0,\n    up: currentFocusIndex - jump < 0,\n    down:\n      currentFocusIndex + jump > listSize ||\n      currentFocusIndex + jump > listSize - 1,\n  });\n\n  const onGridKeyDownHandler = (\n    evt,\n    focuses,\n    focusesList,\n    currentFocusIndex,\n    jump,\n  ) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    // except for Enter and SpaceBar\n    if (!isOneOfKeys(evt, [\"Enter\", \"Space\"])) {\n      evt.preventDefault();\n      evt.stopPropagation();\n    }\n\n    const blockedKeys = getEnabledKeys(\n      currentFocusIndex,\n      jump,\n      focusesList.length,\n    );\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        if (isBrowser(\"firefox\")) {\n          evt.target.click();\n        } else {\n          evt.currentTarget.click();\n        }\n        break;\n      case \"ArrowUp\":\n        if (!blockedKeys.up) {\n          focusAndUpdateIndex(\n            focuses.jump || focuses.last,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"ArrowDown\":\n        if (!blockedKeys.down) {\n          focusAndUpdateIndex(\n            focuses.fall || focuses.first,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"ArrowLeft\":\n        if (!blockedKeys.left) {\n          focusAndUpdateIndex(\n            focuses.previous || focuses.last,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"ArrowRight\":\n        if (!blockedKeys.right) {\n          focusAndUpdateIndex(\n            focuses.next || focuses.first,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onVerticalArrangementHandler = (evt, focuses, focusesList) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        evt.target.click();\n        break;\n      case \"ArrowUp\":\n        focusAndUpdateIndex(\n          focuses.previous || focuses.last,\n          evt.current,\n          focusesList,\n        );\n        break;\n      case \"ArrowDown\":\n        focusAndUpdateIndex(\n          focuses.next || focuses.first,\n          evt.current,\n          focusesList,\n        );\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onSingleHandler = (evt) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\"Space\", \"Enter\"]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    evt.currentTarget.click();\n  };\n\n  const onKeyDown = (evt) => {\n    if (rootRef?.current == null) {\n      // operating outside of a composite widget\n      // nothing to manage, just style and trigger clicks\n      onSingleHandler(evt);\n      return;\n    }\n\n    // TODO keep the smart default, but allow to explicitly override if disabled elements should be focusable\n    const isDisabledFocusable = strategy === \"menu\";\n    const focusesList = getFocuses().filter(\n      (el) =>\n        isDisabledFocusable ||\n        !el.classList.contains(classes?.disabled as string),\n    );\n\n    const currentFocus = focusesList.indexOf(evt.currentTarget);\n\n    const focuses = {\n      first: focusesList[0],\n      last: focusesList[focusesList.length - 1],\n      previous: focusesList[currentFocus - 1],\n      next: focusesList[currentFocus + 1],\n      fall: focusesList[currentFocus + navigationJump],\n      jump: focusesList[currentFocus - navigationJump],\n    };\n\n    if (strategy === \"grid\") {\n      onGridKeyDownHandler(\n        evt,\n        focuses,\n        focusesList,\n        currentFocus,\n        navigationJump,\n      );\n      return;\n    }\n\n    // TODO add property for specifying the composite widget orientation\n    // TODO implement handler for horizontal orientation\n    onVerticalArrangementHandler(evt, focuses, focusesList);\n  };\n\n  const onKeyUp = (evt) => {\n    if (isBrowser(\"firefox\")) evt.preventDefault();\n  };\n\n  if (disabled) return children;\n\n  const focusWrapper = (childrenToWrap) => (\n    <div className={classes.externalReference}>\n      {childrenToWrap}\n      {showFocus && <div className={classes.falseFocus} />}\n    </div>\n  );\n\n  return (\n    <ConditionalWrapper condition={useFalseFocus} wrapper={focusWrapper}>\n      {cloneElement(children, {\n        className: cx(\n          [classes.root, filterClass],\n          {\n            [classes.selected]: selected,\n            [classes.disabled]: disabledClass,\n            [classes.focusDisabled]: focusDisabled,\n          },\n          children.props.className,\n        ),\n        ref: config,\n        onFocus,\n        onBlur,\n        onMouseDown,\n        onKeyDown,\n        onKeyUp,\n        selected,\n      })}\n    </ConditionalWrapper>\n  );\n};\n"],"names":["useState","useClasses","staticClasses","getFocusableChildren","setFocusTo","isOneOfKeys","isKey","isBrowser","jsx","ConditionalWrapper"],"mappings":"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"}

package/dist/cjs/Focus/Focus.styles.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const focusUtils = require("../utils/focusUtils.cjs");
 const classes = require("../utils/classes.cjs");
+const focusUtils = require("../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = classes.createClasses("HvFocus", {
   root: {},
   selected: {},

package/dist/cjs/Focus/Focus.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Focus.styles.cjs","sources":["../../../src/Focus/Focus.styles.tsx"],"sourcesContent":["import { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFocus\", {\n  root: {},\n  selected: {},\n  disabled: {},\n  focusDisabled: {\n    outline: \"none\",\n    \"& *:focus\": {\n      outline: \"none\",\n    },\n    \"& *\": {\n      outline: \"none !important\",\n    },\n  },\n  focused: {\n    ...outlineStyles,\n    \"@media (-webkit-min-device-pixel-ratio:0)\": {\n      ...outlineStyles,\n    },\n  },\n  externalReference: {\n    position: \"relative\",\n  },\n  falseFocus: {\n    width: \"98%\",\n    height: \"98%\",\n    position: \"absolute\",\n    zIndex: \"1\",\n    ...outlineStyles,\n    \"@media (-webkit-min-device-pixel-ratio:0)\": {\n      ...outlineStyles,\n    },\n    top: 0,\n    left: \"0.5%\",\n    backgroundColor: \"transparent\",\n    pointerEvents: \"none\",\n  },\n  focus: {},\n});\n"],"names":["createClasses","outlineStyles"],"mappings":";;;;AAGO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,WAAW;AAAA,EACpE,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,IACT,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,GAAGC,WAAA;AAAA,IACH,6CAA6C;AAAA,MAC3C,GAAGA,WAAA;AAAA,IACL;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,GAAGA,WAAA;AAAA,IACH,6CAA6C;AAAA,MAC3C,GAAGA,WAAA;AAAA,IACL;AAAA,IACA,KAAK;AAAA,IACL,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,CAAC;AACV,CAAC;;;"}
+{"version":3,"file":"Focus.styles.cjs","sources":["../../../src/Focus/Focus.styles.tsx"],"sourcesContent":["import { createClasses } from \"../utils/classes\";\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFocus\", {\n  root: {},\n  selected: {},\n  disabled: {},\n  focusDisabled: {\n    outline: \"none\",\n    \"& *:focus\": {\n      outline: \"none\",\n    },\n    \"& *\": {\n      outline: \"none !important\",\n    },\n  },\n  focused: {\n    ...outlineStyles,\n    \"@media (-webkit-min-device-pixel-ratio:0)\": {\n      ...outlineStyles,\n    },\n  },\n  externalReference: {\n    position: \"relative\",\n  },\n  falseFocus: {\n    width: \"98%\",\n    height: \"98%\",\n    position: \"absolute\",\n    zIndex: \"1\",\n    ...outlineStyles,\n    \"@media (-webkit-min-device-pixel-ratio:0)\": {\n      ...outlineStyles,\n    },\n    top: 0,\n    left: \"0.5%\",\n    backgroundColor: \"transparent\",\n    pointerEvents: \"none\",\n  },\n  focus: {},\n});\n"],"names":["createClasses","outlineStyles"],"mappings":";;;;AAGO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,WAAW;AAAA,EACpE,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,IACT,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,GAAGC,WAAA;AAAA,IACH,6CAA6C;AAAA,MAC3C,GAAGA,WAAA;AAAA,IACL;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,GAAGA,WAAA;AAAA,IACH,6CAA6C;AAAA,MAC3C,GAAGA,WAAA;AAAA,IACL;AAAA,IACA,KAAK;AAAA,IACL,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,CAAC;AACV,CAAC;;;"}

package/dist/cjs/Footer/Footer.cjs.map

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

package/dist/cjs/Forms/Adornment/Adornment.cjs.map

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

package/dist/cjs/Forms/Adornment/Adornment.styles.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const focusUtils = require("../../utils/focusUtils.cjs");
 const classes = require("../../utils/classes.cjs");
+const focusUtils = require("../../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = classes.createClasses("HvAdornment", {
   root: {},
   icon: { width: 32, height: 32 },

package/dist/cjs/Forms/Adornment/Adornment.styles.cjs.map

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

package/dist/cjs/Forms/CharCounter/CharCounter.cjs.map

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

package/dist/cjs/Forms/FormElement/FormElement.cjs

@@ -4,11 +4,11 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
-const FormUtils = require("./utils/FormUtils.cjs");
 const FormElementContext = require("./context/FormElementContext.cjs");
-const FormElementValueContext = require("./context/FormElementValueContext.cjs");
 const FormElementDescriptorsContext = require("./context/FormElementDescriptorsContext.cjs");
+const FormElementValueContext = require("./context/FormElementValueContext.cjs");
 const FormElement_styles = require("./FormElement.styles.cjs");
+const FormUtils = require("./utils/FormUtils.cjs");
 const HvFormElement = (props) => {
   const {
     classes: classesProp,