@hitachivantara/uikit-react-core 5.62.0 → 5.62.2

package/dist/esm/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvIconButton } from \"../IconButton\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\"> {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { rootId } = useTheme();\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n  return (\n    <MuiDialog\n      container={getElementById(rootId)}\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => {\n        // `disableBackdropClick` property was removed in MUI5\n        // and we want to maintain that functionality\n        if (disableBackdropClick) return;\n\n        onClose?.(event, reason);\n      }}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: classes.background,\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            },\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvIconButton\n        title={buttonTitle}\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        onClick={(event) => onClose?.(event, undefined)}\n      >\n        <Close role=\"none\" />\n      </HvIconButton>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAiDa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,WAAW;AAEb,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC;AAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS,EAAE,WAAW,IAAI,EAAE,UAAU,WAAA,CAAY,EAAE;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,WAAW;AAGtB,YAAA;AAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM;AAAA,YACJ,IAAI,EAAE,UAAU,YAAY;AAAA,YAC5B,QAAQ;AAAA,YACR,WAAW,GAAG,QAAQ,WAAW,QAAQ,OAAO,CAAC;AAAA,YACjD;AAAA,cACE,CAAC,QAAQ,UAAU,GAAG;AAAA,YACxB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,cAAU;AAAA,MACT,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,UAAU,UAAU,OAAO,MAAS;AAAA,YAE9C,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAO,CAAA;AAAA,UAAA;AAAA,QACrB;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,UACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvIconButton } from \"../IconButton\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\"> {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { rootId } = useTheme();\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n  return (\n    <MuiDialog\n      container={getElementById(rootId)}\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => {\n        // `disableBackdropClick` property was removed in MUI5\n        // and we want to maintain that functionality\n        if (disableBackdropClick) return;\n\n        onClose?.(event, reason);\n      }}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: classes.background,\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            },\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvIconButton\n        title={buttonTitle}\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        onClick={(event) => onClose?.(event, undefined)}\n      >\n        <Close />\n      </HvIconButton>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAiDa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,WAAW;AAEb,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC;AAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS,EAAE,WAAW,IAAI,EAAE,UAAU,WAAA,CAAY,EAAE;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,WAAW;AAGtB,YAAA;AAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM;AAAA,YACJ,IAAI,EAAE,UAAU,YAAY;AAAA,YAC5B,QAAQ;AAAA,YACR,WAAW,GAAG,QAAQ,WAAW,QAAQ,OAAO,CAAC;AAAA,YACjD;AAAA,cACE,CAAC,QAAQ,UAAU,GAAG;AAAA,YACxB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,cAAU;AAAA,MACT,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,UAAU,UAAU,OAAO,MAAS;AAAA,YAE9C,8BAAC,OAAM,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,UACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Drawer/Drawer.js

@@ -63,7 +63,7 @@ const HvDrawer = (props) => {
             className: classes.closeButton,
             onClick: onClose,
             title: buttonTitle,
-            children: /* @__PURE__ */ jsx(Close, { role: "none" })
+            children: /* @__PURE__ */ jsx(Close, {})
           }
         ),
         children

package/dist/esm/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/Drawer/Drawer.tsx"],"sourcesContent":["import MuiDrawer, { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvIconButton } from \"../IconButton\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps extends Omit<MuiDrawerProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\",\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer is open.\n   * @deprecated Use `hideBackdrop` instead.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    hideBackdrop,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleOnClose: MuiDrawerProps[\"onClose\"] = (\n    event: React.SyntheticEvent,\n    reason,\n  ) => {\n    if (reason === \"backdropClick\" && disableBackdropClick) return;\n\n    onClose?.(event, reason);\n  };\n\n  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      classes={{\n        paper: classes.paper,\n      }}\n      hideBackdrop={shouldHideBackdrop}\n      {...(!shouldHideBackdrop && {\n        slotProps: {\n          backdrop: {\n            classes: {\n              root: classes.background,\n            },\n            onClick: (event) => {\n              if (disableBackdropClick) return;\n              onClose?.(event, \"backdropClick\");\n            },\n          },\n        },\n      })}\n      onClose={handleOnClose}\n      {...others}\n    >\n      <HvIconButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        onClick={onClose}\n        title={buttonTitle}\n      >\n        <Close role=\"none\" />\n      </HvIconButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAuEa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,cAAc;AAAA,IACd,eAAe;AAAA,IACf;AAAA,IACA,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,gBAA2C,CAC/C,OACA,WACG;AACH,QAAI,WAAW,mBAAmB;AAAsB;AAExD,cAAU,OAAO,MAAM;AAAA,EAAA;AAGnB,QAAA,qBAAqB,gBAAgB,CAAC;AAG1C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,cAAc;AAAA,MACb,GAAI,CAAC,sBAAsB;AAAA,QAC1B,WAAW;AAAA,UACT,UAAU;AAAA,YACR,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA,SAAS,CAAC,UAAU;AACd,kBAAA;AAAsB;AAC1B,wBAAU,OAAO,eAAe;AAAA,YAClC;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,YACT,OAAO;AAAA,YAEP,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAO,CAAA;AAAA,UAAA;AAAA,QACrB;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Drawer.js","sources":["../../../src/Drawer/Drawer.tsx"],"sourcesContent":["import MuiDrawer, { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvIconButton } from \"../IconButton\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps extends Omit<MuiDrawerProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\",\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer is open.\n   * @deprecated Use `hideBackdrop` instead.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    hideBackdrop,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleOnClose: MuiDrawerProps[\"onClose\"] = (\n    event: React.SyntheticEvent,\n    reason,\n  ) => {\n    if (reason === \"backdropClick\" && disableBackdropClick) return;\n\n    onClose?.(event, reason);\n  };\n\n  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      classes={{\n        paper: classes.paper,\n      }}\n      hideBackdrop={shouldHideBackdrop}\n      {...(!shouldHideBackdrop && {\n        slotProps: {\n          backdrop: {\n            classes: {\n              root: classes.background,\n            },\n            onClick: (event) => {\n              if (disableBackdropClick) return;\n              onClose?.(event, \"backdropClick\");\n            },\n          },\n        },\n      })}\n      onClose={handleOnClose}\n      {...others}\n    >\n      <HvIconButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        onClick={onClose}\n        title={buttonTitle}\n      >\n        <Close />\n      </HvIconButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAuEa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,cAAc;AAAA,IACd,eAAe;AAAA,IACf;AAAA,IACA,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,gBAA2C,CAC/C,OACA,WACG;AACH,QAAI,WAAW,mBAAmB;AAAsB;AAExD,cAAU,OAAO,MAAM;AAAA,EAAA;AAGnB,QAAA,qBAAqB,gBAAgB,CAAC;AAG1C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,cAAc;AAAA,MACb,GAAI,CAAC,sBAAsB;AAAA,QAC1B,WAAW;AAAA,UACT,UAAU;AAAA,YACR,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA,SAAS,CAAC,UAAU;AACd,kBAAA;AAAsB;AAC1B,wBAAU,OAAO,eAAe;AAAA,YAClC;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,YACT,OAAO;AAAA,YAEP,8BAAC,OAAM,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/FileUploader/File/File.js

@@ -1,13 +1,12 @@
 import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import { Close, Fail, Success } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { setId } from "../../utils/setId.js";
 import { convertUnits } from "../utils.js";
 import { useClasses } from "./File.styles.js";
 import { staticClasses } from "./File.styles.js";
 import { HvProgressBar } from "../../ProgressBar/ProgressBar.js";
-import { HvButton } from "../../Button/Button.js";
 import { HvTypography } from "../../Typography/Typography.js";
+import { HvIconButton } from "../../IconButton/IconButton.js";
 const getStatusIcon = (classes, status) => {
   switch (status) {
     case "success":
@@ -34,7 +33,6 @@ const getProgressBarWith = ({ size, progress }) => {
 };
 const HvFile = (props) => {
   const {
-    id,
     classes: classesProp,
     data,
     onFileRemoved,
@@ -66,13 +64,11 @@ const HvFile = (props) => {
     /* @__PURE__ */ jsx("span", { className: classes.progressTextContainer, children: progressText }),
     data.preview && /* @__PURE__ */ jsx("div", { className: classes.previewContainer, children: data.preview }),
     /* @__PURE__ */ jsx(
-      HvButton,
+      HvIconButton,
       {
-        id: setId(id, "remove-button"),
-        "aria-label": removeFileButtonLabel,
+        title: removeFileButtonLabel,
         className: classes.removeButton,
         onClick: () => onFileRemoved?.(data),
-        icon: true,
         children: /* @__PURE__ */ jsx(Close, { iconSize: "XS" })
       }
     )

package/dist/esm/FileUploader/File/File.js.map

@@ -1 +1 @@
-{"version":3,"file":"File.js","sources":["../../../../src/FileUploader/File/File.tsx"],"sourcesContent":["import { Close, Fail, Success } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvProgressBar } from \"../../ProgressBar\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./File.styles\";\n\nexport { staticClasses as fileClasses };\n\nexport type HvFileClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileData extends Omit<File, \"name\" | \"size\"> {\n  /**\n   * The file id.\n   */\n  id?: string;\n  /**\n   * The file name.\n   */\n  name?: string;\n  /**\n   * The upload status.\n   */\n  status?: \"progress\" | \"success\" | \"fail\";\n  /**\n   * The file size in bytes.\n   */\n  size?: number;\n  /**\n   * Upload progress in bytes.\n   */\n  progress?: number;\n  /**\n   * Optional node representing a preview of the uploaded file.\n   */\n  preview?: React.ReactNode;\n  /**\n   * Error message when the upload failed.\n   */\n  errorMessage?: string;\n}\n\nexport type HvFilesAddedEvent = (files: HvFileData[]) => void;\n\nexport type HvFileRemovedEvent = (file: HvFileData) => void;\n\nexport type HvFileProps = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * File information to be displayed.\n   */\n  data: HvFileData;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in file list.\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileClasses;\n};\n\nconst getStatusIcon = (\n  classes?: HvFileClasses,\n  status?: HvFileData[\"status\"],\n) => {\n  switch (status) {\n    case \"success\":\n      return <Success className={classes?.icon} color=\"positive\" />;\n    case \"fail\":\n      return <Fail className={classes?.icon} color=\"negative\" />;\n    default:\n      return <div className={classes?.icon} />;\n  }\n};\n\nconst getProgressText = (data: HvFileData, classes?: HvFileClasses) => {\n  const hasFailed = data.status === \"fail\";\n  const inProgress = data.status === \"progress\";\n\n  return (\n    <>\n      {data.progress || data.size || data.errorMessage ? `\\xa0|\\xa0` : null}\n\n      {inProgress && data.progress != null && (\n        <HvTypography variant=\"label\">\n          {`${convertUnits(data.progress)}\\xa0/\\xa0`}\n        </HvTypography>\n      )}\n\n      {!hasFailed && data.size && (\n        <HvTypography>{`${convertUnits(data.size)}`}</HvTypography>\n      )}\n\n      {hasFailed && data.errorMessage && (\n        <HvTypography className={classes?.fail}>\n          {data.errorMessage}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst getProgressBarWith = ({ size, progress }: HvFileData) => {\n  const width =\n    progress != null && size != null ? Math.round((progress * 100) / size) : 0;\n\n  return width;\n};\n\nexport const HvFile = (props: HvFileProps) => {\n  const {\n    id,\n    classes: classesProp,\n    data,\n    onFileRemoved,\n    removeFileButtonLabel,\n  } = useDefaultProps(\"HvFile\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const hasError = data.status === \"fail\";\n\n  const inProgress = data.status === \"progress\";\n\n  const progressText = getProgressText(data, classes);\n\n  const statusIcon = getStatusIcon(classes, data.status);\n\n  const currentProgress = getProgressBarWith(data);\n\n  return (\n    <li className={classes.root}>\n      {!hasError && inProgress && (\n        <HvProgressBar\n          classes={{\n            root: classes.progressbar,\n            progressBarContainer: cx(\n              classes.progressbarContainer,\n              classes.progressbarBack,\n            ),\n          }}\n          value={currentProgress}\n          hideLabel\n        />\n      )}\n\n      {statusIcon}\n\n      <HvTypography className={classes.nameText} variant=\"label\">\n        {data.name}\n      </HvTypography>\n\n      <span className={classes.progressTextContainer}>{progressText}</span>\n\n      {data.preview && (\n        <div className={classes.previewContainer}>{data.preview}</div>\n      )}\n\n      <HvButton\n        id={setId(id, \"remove-button\")}\n        aria-label={removeFileButtonLabel}\n        className={classes.removeButton}\n        onClick={() => onFileRemoved?.(data)}\n        icon\n      >\n        <Close iconSize=\"XS\" />\n      </HvButton>\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAyEA,MAAM,gBAAgB,CACpB,SACA,WACG;AACH,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,iCAAQ,SAAQ,EAAA,WAAW,SAAS,MAAM,OAAM,WAAW,CAAA;AAAA,IAC7D,KAAK;AACH,iCAAQ,MAAK,EAAA,WAAW,SAAS,MAAM,OAAM,WAAW,CAAA;AAAA,IAC1D;AACE,aAAQ,oBAAA,OAAA,EAAI,WAAW,SAAS,KAAM,CAAA;AAAA,EAC1C;AACF;AAEA,MAAM,kBAAkB,CAAC,MAAkB,YAA4B;AAC/D,QAAA,YAAY,KAAK,WAAW;AAC5B,QAAA,aAAa,KAAK,WAAW;AAEnC,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,KAAK,YAAY,KAAK,QAAQ,KAAK,eAAe,QAAc;AAAA,IAEhE,cAAc,KAAK,YAAY,QAC7B,oBAAA,cAAA,EAAa,SAAQ,SACnB,UAAG,GAAA,aAAa,KAAK,QAAQ,CAAC,OACjC;AAAA,IAGD,CAAC,aAAa,KAAK,QAClB,oBAAC,cAAc,EAAA,UAAA,GAAG,aAAa,KAAK,IAAI,CAAC,GAAG,CAAA;AAAA,IAG7C,aAAa,KAAK,gBACjB,oBAAC,gBAAa,WAAW,SAAS,MAC/B,UAAA,KAAK,aACR,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAEA,MAAM,qBAAqB,CAAC,EAAE,MAAM,eAA2B;AACvD,QAAA,QACJ,YAAY,QAAQ,QAAQ,OAAO,KAAK,MAAO,WAAW,MAAO,IAAI,IAAI;AAEpE,SAAA;AACT;AAEa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,UAAU,KAAK;AACnC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,WAAW,KAAK,WAAW;AAE3B,QAAA,aAAa,KAAK,WAAW;AAE7B,QAAA,eAAe,gBAAgB,MAAM,OAAO;AAElD,QAAM,aAAa,cAAc,SAAS,KAAK,MAAM;AAE/C,QAAA,kBAAkB,mBAAmB,IAAI;AAE/C,SACG,qBAAA,MAAA,EAAG,WAAW,QAAQ,MACpB,UAAA;AAAA,IAAA,CAAC,YAAY,cACZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,sBAAsB;AAAA,YACpB,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACP,WAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAGD;AAAA,IAED,oBAAC,gBAAa,WAAW,QAAQ,UAAU,SAAQ,SAChD,eAAK,KACR,CAAA;AAAA,IAEC,oBAAA,QAAA,EAAK,WAAW,QAAQ,uBAAwB,UAAa,cAAA;AAAA,IAE7D,KAAK,WACH,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBAAmB,eAAK,QAAQ,CAAA;AAAA,IAG1D;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,eAAe;AAAA,QAC7B,cAAY;AAAA,QACZ,WAAW,QAAQ;AAAA,QACnB,SAAS,MAAM,gBAAgB,IAAI;AAAA,QACnC,MAAI;AAAA,QAEJ,UAAA,oBAAC,OAAM,EAAA,UAAS,KAAK,CAAA;AAAA,MAAA;AAAA,IACvB;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"File.js","sources":["../../../../src/FileUploader/File/File.tsx"],"sourcesContent":["import { Close, Fail, Success } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvIconButton } from \"../../IconButton\";\nimport { HvProgressBar } from \"../../ProgressBar\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./File.styles\";\n\nexport { staticClasses as fileClasses };\n\nexport type HvFileClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileData extends Omit<File, \"name\" | \"size\"> {\n  /**\n   * The file id.\n   */\n  id?: string;\n  /**\n   * The file name.\n   */\n  name?: string;\n  /**\n   * The upload status.\n   */\n  status?: \"progress\" | \"success\" | \"fail\";\n  /**\n   * The file size in bytes.\n   */\n  size?: number;\n  /**\n   * Upload progress in bytes.\n   */\n  progress?: number;\n  /**\n   * Optional node representing a preview of the uploaded file.\n   */\n  preview?: React.ReactNode;\n  /**\n   * Error message when the upload failed.\n   */\n  errorMessage?: string;\n}\n\nexport type HvFilesAddedEvent = (files: HvFileData[]) => void;\n\nexport type HvFileRemovedEvent = (file: HvFileData) => void;\n\nexport type HvFileProps = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * File information to be displayed.\n   */\n  data: HvFileData;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in file list.\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileClasses;\n};\n\nconst getStatusIcon = (\n  classes?: HvFileClasses,\n  status?: HvFileData[\"status\"],\n) => {\n  switch (status) {\n    case \"success\":\n      return <Success className={classes?.icon} color=\"positive\" />;\n    case \"fail\":\n      return <Fail className={classes?.icon} color=\"negative\" />;\n    default:\n      return <div className={classes?.icon} />;\n  }\n};\n\nconst getProgressText = (data: HvFileData, classes?: HvFileClasses) => {\n  const hasFailed = data.status === \"fail\";\n  const inProgress = data.status === \"progress\";\n\n  return (\n    <>\n      {data.progress || data.size || data.errorMessage ? `\\xa0|\\xa0` : null}\n\n      {inProgress && data.progress != null && (\n        <HvTypography variant=\"label\">\n          {`${convertUnits(data.progress)}\\xa0/\\xa0`}\n        </HvTypography>\n      )}\n\n      {!hasFailed && data.size && (\n        <HvTypography>{`${convertUnits(data.size)}`}</HvTypography>\n      )}\n\n      {hasFailed && data.errorMessage && (\n        <HvTypography className={classes?.fail}>\n          {data.errorMessage}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst getProgressBarWith = ({ size, progress }: HvFileData) => {\n  const width =\n    progress != null && size != null ? Math.round((progress * 100) / size) : 0;\n\n  return width;\n};\n\nexport const HvFile = (props: HvFileProps) => {\n  const {\n    classes: classesProp,\n    data,\n    onFileRemoved,\n    removeFileButtonLabel,\n  } = useDefaultProps(\"HvFile\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const hasError = data.status === \"fail\";\n\n  const inProgress = data.status === \"progress\";\n\n  const progressText = getProgressText(data, classes);\n\n  const statusIcon = getStatusIcon(classes, data.status);\n\n  const currentProgress = getProgressBarWith(data);\n\n  return (\n    <li className={classes.root}>\n      {!hasError && inProgress && (\n        <HvProgressBar\n          classes={{\n            root: classes.progressbar,\n            progressBarContainer: cx(\n              classes.progressbarContainer,\n              classes.progressbarBack,\n            ),\n          }}\n          value={currentProgress}\n          hideLabel\n        />\n      )}\n\n      {statusIcon}\n\n      <HvTypography className={classes.nameText} variant=\"label\">\n        {data.name}\n      </HvTypography>\n\n      <span className={classes.progressTextContainer}>{progressText}</span>\n\n      {data.preview && (\n        <div className={classes.previewContainer}>{data.preview}</div>\n      )}\n\n      <HvIconButton\n        title={removeFileButtonLabel}\n        className={classes.removeButton}\n        onClick={() => onFileRemoved?.(data)}\n      >\n        <Close iconSize=\"XS\" />\n      </HvIconButton>\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAwEA,MAAM,gBAAgB,CACpB,SACA,WACG;AACH,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,iCAAQ,SAAQ,EAAA,WAAW,SAAS,MAAM,OAAM,WAAW,CAAA;AAAA,IAC7D,KAAK;AACH,iCAAQ,MAAK,EAAA,WAAW,SAAS,MAAM,OAAM,WAAW,CAAA;AAAA,IAC1D;AACE,aAAQ,oBAAA,OAAA,EAAI,WAAW,SAAS,KAAM,CAAA;AAAA,EAC1C;AACF;AAEA,MAAM,kBAAkB,CAAC,MAAkB,YAA4B;AAC/D,QAAA,YAAY,KAAK,WAAW;AAC5B,QAAA,aAAa,KAAK,WAAW;AAEnC,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,KAAK,YAAY,KAAK,QAAQ,KAAK,eAAe,QAAc;AAAA,IAEhE,cAAc,KAAK,YAAY,QAC7B,oBAAA,cAAA,EAAa,SAAQ,SACnB,UAAG,GAAA,aAAa,KAAK,QAAQ,CAAC,OACjC;AAAA,IAGD,CAAC,aAAa,KAAK,QAClB,oBAAC,cAAc,EAAA,UAAA,GAAG,aAAa,KAAK,IAAI,CAAC,GAAG,CAAA;AAAA,IAG7C,aAAa,KAAK,gBACjB,oBAAC,gBAAa,WAAW,SAAS,MAC/B,UAAA,KAAK,aACR,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAEA,MAAM,qBAAqB,CAAC,EAAE,MAAM,eAA2B;AACvD,QAAA,QACJ,YAAY,QAAQ,QAAQ,OAAO,KAAK,MAAO,WAAW,MAAO,IAAI,IAAI;AAEpE,SAAA;AACT;AAEa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,UAAU,KAAK;AACnC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,WAAW,KAAK,WAAW;AAE3B,QAAA,aAAa,KAAK,WAAW;AAE7B,QAAA,eAAe,gBAAgB,MAAM,OAAO;AAElD,QAAM,aAAa,cAAc,SAAS,KAAK,MAAM;AAE/C,QAAA,kBAAkB,mBAAmB,IAAI;AAE/C,SACG,qBAAA,MAAA,EAAG,WAAW,QAAQ,MACpB,UAAA;AAAA,IAAA,CAAC,YAAY,cACZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,sBAAsB;AAAA,YACpB,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACP,WAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAGD;AAAA,IAED,oBAAC,gBAAa,WAAW,QAAQ,UAAU,SAAQ,SAChD,eAAK,KACR,CAAA;AAAA,IAEC,oBAAA,QAAA,EAAK,WAAW,QAAQ,uBAAwB,UAAa,cAAA;AAAA,IAE7D,KAAK,WACH,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBAAmB,eAAK,QAAQ,CAAA;AAAA,IAG1D;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,WAAW,QAAQ;AAAA,QACnB,SAAS,MAAM,gBAAgB,IAAI;AAAA,QAEnC,UAAA,oBAAC,OAAM,EAAA,UAAS,KAAK,CAAA;AAAA,MAAA;AAAA,IACvB;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/FileUploader/FileList/FileList.js

@@ -1,6 +1,5 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { setId } from "../../utils/setId.js";
 import { useClasses } from "./FileList.styles.js";
 import { staticClasses } from "./FileList.styles.js";
@@ -14,7 +13,6 @@ const HvFileList = (props) => {
     onFileRemoved
   } = useDefaultProps("HvFileList", props);
   const { classes } = useClasses(classesProp);
-  const elementId = useUniqueId(id);
   const hasFiles = list.length > 0;
   if (!hasFiles)
     return null;
@@ -22,7 +20,6 @@ const HvFileList = (props) => {
     HvFile,
     {
       classes: { root: classes?.listItem },
-      id: setId(elementId, "values"),
       data,
       onFileRemoved,
       removeFileButtonLabel

package/dist/esm/FileUploader/FileList/FileList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileList.js","sources":["../../../../src/FileUploader/FileList/FileList.tsx"],"sourcesContent":["import { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFile, HvFileData, HvFileRemovedEvent } from \"../File\";\nimport { staticClasses, useClasses } from \"./FileList.styles\";\n\nexport { staticClasses as fileListClasses };\n\nexport type HvFileListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The files to upload.\n   */\n  list?: HvFileData[];\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in FileList\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileListClasses;\n}\n\nexport const HvFileList = (props: HvFileListProps) => {\n  const {\n    id,\n    classes: classesProp,\n    list = [],\n    removeFileButtonLabel,\n    onFileRemoved,\n  } = useDefaultProps(\"HvFileList\", props);\n  const { classes } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const hasFiles = list.length > 0;\n  if (!hasFiles) return null;\n\n  return (\n    <ul id={setId(id, \"list\")} className={classes.list}>\n      {list.map((data) => (\n        <HvFile\n          key={data.id}\n          classes={{ root: classes?.listItem }}\n          id={setId(elementId, \"values\")}\n          data={data}\n          onFileRemoved={onFileRemoved}\n          removeFileButtonLabel={removeFileButtonLabel}\n        />\n      ))}\n    </ul>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAkCa,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,OAAO,CAAC;AAAA,IACR;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,YAAY,YAAY,EAAE;AAE1B,QAAA,WAAW,KAAK,SAAS;AAC/B,MAAI,CAAC;AAAiB,WAAA;AAEtB,SACG,oBAAA,MAAA,EAAG,IAAI,MAAM,IAAI,MAAM,GAAG,WAAW,QAAQ,MAC3C,UAAK,KAAA,IAAI,CAAC,SACT;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,SAAS,EAAE,MAAM,SAAS,SAAS;AAAA,MACnC,IAAI,MAAM,WAAW,QAAQ;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IALK,KAAK;AAAA,EAOb,CAAA,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"FileList.js","sources":["../../../../src/FileUploader/FileList/FileList.tsx"],"sourcesContent":["import { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFile, HvFileData, HvFileRemovedEvent } from \"../File\";\nimport { staticClasses, useClasses } from \"./FileList.styles\";\n\nexport { staticClasses as fileListClasses };\n\nexport type HvFileListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The files to upload.\n   */\n  list?: HvFileData[];\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in FileList\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileListClasses;\n}\n\nexport const HvFileList = (props: HvFileListProps) => {\n  const {\n    id,\n    classes: classesProp,\n    list = [],\n    removeFileButtonLabel,\n    onFileRemoved,\n  } = useDefaultProps(\"HvFileList\", props);\n  const { classes } = useClasses(classesProp);\n\n  const hasFiles = list.length > 0;\n  if (!hasFiles) return null;\n\n  return (\n    <ul id={setId(id, \"list\")} className={classes.list}>\n      {list.map((data) => (\n        <HvFile\n          key={data.id}\n          classes={{ root: classes?.listItem }}\n          data={data}\n          onFileRemoved={onFileRemoved}\n          removeFileButtonLabel={removeFileButtonLabel}\n        />\n      ))}\n    </ul>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAiCa,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,OAAO,CAAC;AAAA,IACR;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,WAAW,KAAK,SAAS;AAC/B,MAAI,CAAC;AAAiB,WAAA;AAEtB,SACG,oBAAA,MAAA,EAAG,IAAI,MAAM,IAAI,MAAM,GAAG,WAAW,QAAQ,MAC3C,UAAK,KAAA,IAAI,CAAC,SACT;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,SAAS,EAAE,MAAM,SAAS,SAAS;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAJK,KAAK;AAAA,EAMb,CAAA,EACH,CAAA;AAEJ;"}

package/dist/esm/InlineEditor/InlineEditor.js

@@ -94,7 +94,6 @@ const HvInlineEditor = (props) => {
         Edit,
         {
           color: "secondary_60",
-          role: "none",
           className: cx(classes.icon, {
             [classes.iconVisible]: showIcon
           })

package/dist/esm/InlineEditor/InlineEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport {\n  HvTypography,\n  HvTypographyProps,\n  HvTypographyVariants,\n} from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInlineEditorProps\n  extends HvBaseProps<HTMLDivElement, \"onBlur\" | \"onChange\"> {\n  /** The value of the form element. */\n  value?: string;\n  /** Whether the Edit icon should always be visible */\n  showIcon?: boolean;\n  /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n  component?: React.ElementType;\n  /** Variant of the HvTypography to display */\n  variant?: HvTypographyVariants;\n  /** Called when the input is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    value: string,\n  ) => void;\n  /** Called when the input value changes. */\n  onChange?: (event: React.SyntheticEvent, value: string) => void;\n  /** Props passed to the HvButton component */\n  buttonProps?: HvButtonProps;\n  /** Props passed to the HvTypography text component */\n  typographyProps?: HvTypographyProps;\n  /** Whether the editor is disabled or not. */\n  disabled?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvInlineEditorClasses;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n}\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = (props: HvInlineEditorProps) => {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue,\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event as any);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"secondary_60\"\n              role=\"none\"\n              className={cx(classes.icon, {\n                [classes.iconVisible]: showIcon,\n              })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          disabled={disabled}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            noWrap\n            className={cx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n        </HvButton>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport {\n  HvTypography,\n  HvTypographyProps,\n  HvTypographyVariants,\n} from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInlineEditorProps\n  extends HvBaseProps<HTMLDivElement, \"onBlur\" | \"onChange\"> {\n  /** The value of the form element. */\n  value?: string;\n  /** Whether the Edit icon should always be visible */\n  showIcon?: boolean;\n  /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n  component?: React.ElementType;\n  /** Variant of the HvTypography to display */\n  variant?: HvTypographyVariants;\n  /** Called when the input is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    value: string,\n  ) => void;\n  /** Called when the input value changes. */\n  onChange?: (event: React.SyntheticEvent, value: string) => void;\n  /** Props passed to the HvButton component */\n  buttonProps?: HvButtonProps;\n  /** Props passed to the HvTypography text component */\n  typographyProps?: HvTypographyProps;\n  /** Whether the editor is disabled or not. */\n  disabled?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvInlineEditorClasses;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n}\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = (props: HvInlineEditorProps) => {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue,\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event as any);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"secondary_60\"\n              className={cx(classes.icon, {\n                [classes.iconVisible]: showIcon,\n              })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          disabled={disabled}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            noWrap\n            className={cx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n        </HvButton>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAuDa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW,iBAAiB;AAAA,IAC5B,UAAU;AAAA,IACV,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAC9C,QAAM,CAAC,OAAO,QAAQ,IAAI,cAAc,WAAW,YAAY;AAC/D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,WAAW;AACX,QAAA,EAAE,gBAAgB;AAExB,QAAM,mBAAmB,aAAa,WAAW,OAAO,KAAK,CAAA;AACvD,QAAA,EAAE,WAAe,IAAA;AAEvB,kBAAgB,MAAM;AACpB,UAAM,QAAQ,SAAS;AACvB,QAAI,YAAY,OAAO;AACrB,YAAM,MAAM;AACZ,YAAM,OAAO;AAAA,IACf;AAAA,EAAA,GACC,CAAC,QAAQ,CAAC;AAEb,QAAM,cAAc,MAAM;AACxB,gBAAY,IAAI;AAChB,mBAAe,KAAK;AAAA,EAAA;AAGhB,QAAA,aAAqC,CAAC,UAAU;AACpD,gBAAY,KAAK;AAEjB,UAAM,WAAW,SAAS;AAC1B,aAAS,QAAQ;AACjB,aAAS,OAAO,QAAQ;AAAA,EAAA;AAGpB,QAAA,gBAA2C,CAAC,UAAU;AACtD,QAAA,MAAM,OAAO,KAAK,GAAG;AACvB,kBAAY,KAAK;AACjB,eAAS,WAAW;AAAA,IACtB;AACA,gBAAY,KAAY;AAAA,EAAA;AAGpB,QAAA,eAAyC,CAAC,OAAO,QAAQ;AAC7D,aAAS,GAAG;AACZ,eAAW,OAAO,GAAG;AAAA,EAAA;AAIrB,SAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAY,YAAA,CAAC,WACZ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,OAAO,QAAQ;AAAA,QACf,sBAAsB,QAAQ;AAAA,MAChC;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,UACL,GAAG;AAAA,UACH,QAAQ,mBAAmB,UAAU,aAAa;AAAA,QACpD;AAAA,MACF;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACV,GAAG;AAAA,IAAA;AAAA,EAAA,IAGN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,oBAAoB;AAAA,MACpB,SACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,WAAW,GAAG,QAAQ,MAAM;AAAA,YAC1B,CAAC,QAAQ,WAAW,GAAG;AAAA,UAAA,CACxB;AAAA,QAAA;AAAA,MACH;AAAA,MAEF,WAAW,GAAG,QAAQ,QAAQ;AAAA,QAC5B,CAAC,QAAQ,SAAS,GAAG,SAAS,YAAsB,EAAE,KAAK;AAAA,MAAA,CAC5D;AAAA,MACD,SAAS;AAAA,MACT;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,QAAM;AAAA,UACN,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,OAAO;AAAA,UAC1D,GAAG;AAAA,UAEH,UAAS,SAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}

package/dist/esm/Pagination/Pagination.js

@@ -155,7 +155,6 @@ const HvPagination = (props) => {
           children: /* @__PURE__ */ jsx(
             Start,
             {
-              role: "none",
               className: classes.icon,
               color: setColor(!canPrevious),
               iconSize: "XS"
@@ -174,7 +173,6 @@ const HvPagination = (props) => {
           children: /* @__PURE__ */ jsx(
             Backwards,
             {
-              role: "none",
               className: classes.icon,
               color: setColor(!canPrevious),
               iconSize: "XS"
@@ -206,7 +204,6 @@ const HvPagination = (props) => {
           children: /* @__PURE__ */ jsx(
             Forwards,
             {
-              role: "none",
               className: classes.icon,
               color: setColor(!canNext),
               iconSize: "XS"

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

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

package/dist/esm/QueryBuilder/Rule/Rule.js

@@ -92,7 +92,7 @@ const Rule = (props) => {
               dialog: labels.rule.delete
             }),
             disabled: readOnly,
-            children: /* @__PURE__ */ jsx(Delete, { role: "none" })
+            children: /* @__PURE__ */ jsx(Delete, {})
           }
         ) })
       ]

package/dist/esm/QueryBuilder/Rule/Rule.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.js","sources":["../../../../src/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport { Delete } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvGrid } from \"../../Grid\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvIconButton } from \"../../IconButton\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useQueryBuilderContext } from \"../Context\";\nimport { Attribute } from \"./Attribute\";\nimport { Operator } from \"./Operator\";\nimport { staticClasses, useClasses } from \"./Rule.styles\";\nimport { Value } from \"./Value\";\n\nexport { staticClasses as queryBuilderRuleClasses };\n\nexport type HvQueryBuilderRuleClasses = ExtractNames<typeof useClasses>;\n\nexport interface RuleProps {\n  id: React.Key;\n  combinator: string;\n  attribute?: string;\n  operator?: string;\n  value?: any;\n  disabled?: boolean;\n  isInvalid: boolean;\n  classes?: HvQueryBuilderRuleClasses;\n}\n\nexport const Rule = (props: RuleProps) => {\n  const {\n    id,\n    combinator,\n    attribute,\n    operator,\n    value,\n    disabled,\n    isInvalid,\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilderRule\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    askAction,\n    dispatchAction,\n    attributes,\n    operators,\n    labels,\n    readOnly,\n    disableConfirmation,\n  } = useQueryBuilderContext();\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const availableOperators = useMemo(() => {\n    const attributeSpec =\n      attribute != null && attributes ? attributes[attribute] : null;\n    if (attributeSpec != null) {\n      const typeOperators = operators[attributeSpec.type];\n      if (typeOperators != null) {\n        return typeOperators.reduce(\n          (count, item) =>\n            count + (item.combinators.includes(combinator) ? 1 : 0),\n          0,\n        );\n      }\n    }\n\n    return -1;\n  }, [attribute, attributes, combinator, operators]);\n\n  return (\n    <HvGrid\n      container\n      className={cx(classes.root, { [classes.isMdDown]: isMdDown })}\n      spacing={0}\n    >\n      <HvGrid item xs={12} md={3}>\n        <Attribute\n          attribute={attribute}\n          id={id}\n          disabled={disabled}\n          isInvalid={isInvalid}\n        />\n      </HvGrid>\n      {attribute != null && availableOperators > 0 && (\n        <HvGrid item xs={12} md={3}>\n          <Operator\n            id={id}\n            combinator={combinator}\n            attribute={attribute}\n            operator={operator}\n          />\n        </HvGrid>\n      )}\n      {attribute != null && (operator != null || availableOperators === 0) && (\n        <HvGrid item xs={12} md>\n          <Value\n            attribute={attribute}\n            id={id}\n            operator={operator}\n            value={value}\n          />\n        </HvGrid>\n      )}\n      <HvGrid item className={classes.actionsContainer}>\n        <HvIconButton\n          placement=\"bottom\"\n          title={labels.rule.delete.tooltip || labels.rule.delete.ariaLabel}\n          onClick={() =>\n            disableConfirmation\n              ? dispatchAction({ type: \"remove-node\", id })\n              : askAction({\n                  actions: [{ type: \"remove-node\", id }],\n                  dialog: labels.rule.delete,\n                })\n          }\n          disabled={readOnly}\n        >\n          <Delete role=\"none\" />\n        </HvIconButton>\n      </HvGrid>\n    </HvGrid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA8Ba,MAAA,OAAO,CAAC,UAAqB;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,uBAAuB;AAE3B,QAAM,QAAQ;AAEd,QAAM,WAAW,cAAc,MAAM,YAAY,KAAK,IAAI,CAAC;AAErD,QAAA,qBAAqB,QAAQ,MAAM;AACvC,UAAM,gBACJ,aAAa,QAAQ,aAAa,WAAW,SAAS,IAAI;AAC5D,QAAI,iBAAiB,MAAM;AACnB,YAAA,gBAAgB,UAAU,cAAc,IAAI;AAClD,UAAI,iBAAiB,MAAM;AACzB,eAAO,cAAc;AAAA,UACnB,CAAC,OAAO,SACN,SAAS,KAAK,YAAY,SAAS,UAAU,IAAI,IAAI;AAAA,UACvD;AAAA,QAAA;AAAA,MAEJ;AAAA,IACF;AAEO,WAAA;AAAA,KACN,CAAC,WAAW,YAAY,YAAY,SAAS,CAAC;AAG/C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAS;AAAA,MACT,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,MAC5D,SAAS;AAAA,MAET,UAAA;AAAA,QAAA,oBAAC,UAAO,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QACC,aAAa,QAAQ,qBAAqB,KACzC,oBAAC,QAAO,EAAA,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QAED,aAAa,SAAS,YAAY,QAAQ,uBAAuB,MAC/D,oBAAA,QAAA,EAAO,MAAI,MAAC,IAAI,IAAI,IAAE,MACrB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,4BAED,QAAO,EAAA,MAAI,MAAC,WAAW,QAAQ,kBAC9B,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,OAAO,KAAK,OAAO,WAAW,OAAO,KAAK,OAAO;AAAA,YACxD,SAAS,MACP,sBACI,eAAe,EAAE,MAAM,eAAe,IAAI,IAC1C,UAAU;AAAA,cACR,SAAS,CAAC,EAAE,MAAM,eAAe,IAAI;AAAA,cACrC,QAAQ,OAAO,KAAK;AAAA,YAAA,CACrB;AAAA,YAEP,UAAU;AAAA,YAEV,UAAA,oBAAC,QAAO,EAAA,MAAK,OAAO,CAAA;AAAA,UAAA;AAAA,QAAA,GAExB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Rule.js","sources":["../../../../src/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport { Delete } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvGrid } from \"../../Grid\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvIconButton } from \"../../IconButton\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useQueryBuilderContext } from \"../Context\";\nimport { Attribute } from \"./Attribute\";\nimport { Operator } from \"./Operator\";\nimport { staticClasses, useClasses } from \"./Rule.styles\";\nimport { Value } from \"./Value\";\n\nexport { staticClasses as queryBuilderRuleClasses };\n\nexport type HvQueryBuilderRuleClasses = ExtractNames<typeof useClasses>;\n\nexport interface RuleProps {\n  id: React.Key;\n  combinator: string;\n  attribute?: string;\n  operator?: string;\n  value?: any;\n  disabled?: boolean;\n  isInvalid: boolean;\n  classes?: HvQueryBuilderRuleClasses;\n}\n\nexport const Rule = (props: RuleProps) => {\n  const {\n    id,\n    combinator,\n    attribute,\n    operator,\n    value,\n    disabled,\n    isInvalid,\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilderRule\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    askAction,\n    dispatchAction,\n    attributes,\n    operators,\n    labels,\n    readOnly,\n    disableConfirmation,\n  } = useQueryBuilderContext();\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const availableOperators = useMemo(() => {\n    const attributeSpec =\n      attribute != null && attributes ? attributes[attribute] : null;\n    if (attributeSpec != null) {\n      const typeOperators = operators[attributeSpec.type];\n      if (typeOperators != null) {\n        return typeOperators.reduce(\n          (count, item) =>\n            count + (item.combinators.includes(combinator) ? 1 : 0),\n          0,\n        );\n      }\n    }\n\n    return -1;\n  }, [attribute, attributes, combinator, operators]);\n\n  return (\n    <HvGrid\n      container\n      className={cx(classes.root, { [classes.isMdDown]: isMdDown })}\n      spacing={0}\n    >\n      <HvGrid item xs={12} md={3}>\n        <Attribute\n          attribute={attribute}\n          id={id}\n          disabled={disabled}\n          isInvalid={isInvalid}\n        />\n      </HvGrid>\n      {attribute != null && availableOperators > 0 && (\n        <HvGrid item xs={12} md={3}>\n          <Operator\n            id={id}\n            combinator={combinator}\n            attribute={attribute}\n            operator={operator}\n          />\n        </HvGrid>\n      )}\n      {attribute != null && (operator != null || availableOperators === 0) && (\n        <HvGrid item xs={12} md>\n          <Value\n            attribute={attribute}\n            id={id}\n            operator={operator}\n            value={value}\n          />\n        </HvGrid>\n      )}\n      <HvGrid item className={classes.actionsContainer}>\n        <HvIconButton\n          placement=\"bottom\"\n          title={labels.rule.delete.tooltip || labels.rule.delete.ariaLabel}\n          onClick={() =>\n            disableConfirmation\n              ? dispatchAction({ type: \"remove-node\", id })\n              : askAction({\n                  actions: [{ type: \"remove-node\", id }],\n                  dialog: labels.rule.delete,\n                })\n          }\n          disabled={readOnly}\n        >\n          <Delete />\n        </HvIconButton>\n      </HvGrid>\n    </HvGrid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA8Ba,MAAA,OAAO,CAAC,UAAqB;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,uBAAuB;AAE3B,QAAM,QAAQ;AAEd,QAAM,WAAW,cAAc,MAAM,YAAY,KAAK,IAAI,CAAC;AAErD,QAAA,qBAAqB,QAAQ,MAAM;AACvC,UAAM,gBACJ,aAAa,QAAQ,aAAa,WAAW,SAAS,IAAI;AAC5D,QAAI,iBAAiB,MAAM;AACnB,YAAA,gBAAgB,UAAU,cAAc,IAAI;AAClD,UAAI,iBAAiB,MAAM;AACzB,eAAO,cAAc;AAAA,UACnB,CAAC,OAAO,SACN,SAAS,KAAK,YAAY,SAAS,UAAU,IAAI,IAAI;AAAA,UACvD;AAAA,QAAA;AAAA,MAEJ;AAAA,IACF;AAEO,WAAA;AAAA,KACN,CAAC,WAAW,YAAY,YAAY,SAAS,CAAC;AAG/C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAS;AAAA,MACT,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,MAC5D,SAAS;AAAA,MAET,UAAA;AAAA,QAAA,oBAAC,UAAO,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QACC,aAAa,QAAQ,qBAAqB,KACzC,oBAAC,QAAO,EAAA,MAAI,MAAC,IAAI,IAAI,IAAI,GACvB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QAED,aAAa,SAAS,YAAY,QAAQ,uBAAuB,MAC/D,oBAAA,QAAA,EAAO,MAAI,MAAC,IAAI,IAAI,IAAE,MACrB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,4BAED,QAAO,EAAA,MAAI,MAAC,WAAW,QAAQ,kBAC9B,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,OAAO,KAAK,OAAO,WAAW,OAAO,KAAK,OAAO;AAAA,YACxD,SAAS,MACP,sBACI,eAAe,EAAE,MAAM,eAAe,IAAI,IAC1C,UAAU;AAAA,cACR,SAAS,CAAC,EAAE,MAAM,eAAe,IAAI;AAAA,cACrC,QAAQ,OAAO,KAAK;AAAA,YAAA,CACrB;AAAA,YAEP,UAAU;AAAA,YAEV,8BAAC,QAAO,EAAA;AAAA,UAAA;AAAA,QAAA,GAEZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/QueryBuilder/Rule/Value/Value.js

@@ -20,7 +20,7 @@ const Value = ({
   value: valueProp
 }) => {
   const { attributes, initialTouched, renderers, emptyRenderer } = useQueryBuilderContext();
-  const attrType = attribute && attributes ? attributes[attribute].type : void 0;
+  const attrType = attributes?.[attribute]?.type;
   if (emptyRenderer?.find((op) => op === operator)) {
     return /* @__PURE__ */ jsx(EmptyValue, { id });
   }

package/dist/esm/QueryBuilder/Rule/Value/Value.js.map

@@ -1 +1 @@
-{"version":3,"file":"Value.js","sources":["../../../../../src/QueryBuilder/Rule/Value/Value.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { useQueryBuilderContext } from \"../../Context\";\nimport {\n  defaultRendererKey,\n  HvQueryBuilderRendererProps,\n  ValueRenderer,\n} from \"../../types\";\nimport { BooleanValue } from \"./BooleanValue\";\nimport { DateTimeValue } from \"./DateTimeValue\";\nimport { EmptyValue } from \"./EmptyValue\";\nimport { NumericValue } from \"./NumericValue\";\nimport { TextValue } from \"./TextValue\";\n\nexport interface ValueProps {\n  id: React.Key;\n  attribute: string;\n  operator?: string;\n  value?: any;\n}\n\nconst getRenderer = (renderer: ValueRenderer, operator?: string) =>\n  // 1. Custom renderer\n  (typeof renderer === \"function\" && renderer) ||\n  // 2. Custom operator renderer\n  (typeof renderer === \"object\" && operator && renderer[operator]) ||\n  // 3. Custom DEFAULT renderer\n  (typeof renderer === \"object\" && renderer[defaultRendererKey]);\n\nexport const Value = ({\n  id,\n  attribute,\n  operator,\n  value: valueProp,\n}: ValueProps) => {\n  const { attributes, initialTouched, renderers, emptyRenderer } =\n    useQueryBuilderContext();\n\n  const attrType =\n    attribute && attributes ? attributes[attribute].type : undefined;\n\n  // Empty value renderer\n  if (emptyRenderer?.find((op) => op === operator)) {\n    return <EmptyValue id={id} />;\n  }\n\n  // Custom renderer\n  if (attrType && renderers?.[attrType]) {\n    // Renderer to be used by order:\n    // 1. Custom attribute renderer\n    // 2. Custom attribute-operator renderer\n    // 3. Custom attribute-DEFAULT renderer\n    // 4. Custom master DEFAULT renderer\n    // 5. Custom master DEFAULT-operator renderer\n    // 6. Custom master DEFAULT-DEFAULT renderer\n    const Renderer: React.FC<HvQueryBuilderRendererProps> | undefined =\n      getRenderer(renderers[attrType], operator) ||\n      getRenderer(renderers[defaultRendererKey], operator) ||\n      undefined;\n\n    if (Renderer) {\n      return (\n        <Renderer\n          id={id}\n          attribute={attribute}\n          operator={operator}\n          value={valueProp}\n        />\n      );\n    }\n  }\n\n  // Built-in attributes\n  switch (attrType) {\n    case \"boolean\": {\n      return <BooleanValue id={id} value={!!valueProp} />;\n    }\n    case \"numeric\": {\n      return (\n        <NumericValue\n          id={id}\n          operator={operator}\n          value={valueProp}\n          initialTouched={initialTouched}\n        />\n      );\n    }\n    case \"dateandtime\": {\n      return (\n        <DateTimeValue\n          id={id}\n          operator={operator}\n          value={valueProp}\n          initialTouched={initialTouched}\n        />\n      );\n    }\n    case \"text\":\n    case \"textarea\":\n    default:\n      return (\n        <TextValue id={id} value={valueProp} initialTouched={initialTouched} />\n      );\n  }\n};\n\nexport default memo(Value);\n"],"names":[],"mappings":";;;;;;;;;AAqBA,MAAM,cAAc,CAAC,UAAyB;AAAA;AAAA,EAE3C,OAAO,aAAa,cAAc;AAAA,EAElC,OAAO,aAAa,YAAY,YAAY,SAAS,QAAQ;AAAA,EAE7D,OAAO,aAAa,YAAY,SAAS,kBAAkB;AAAA;AAEvD,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,MAAkB;AAChB,QAAM,EAAE,YAAY,gBAAgB,WAAW,cAAA,IAC7C;AAEF,QAAM,WACJ,aAAa,aAAa,WAAW,SAAS,EAAE,OAAO;AAGzD,MAAI,eAAe,KAAK,CAAC,OAAO,OAAO,QAAQ,GAAG;AACzC,WAAA,oBAAC,cAAW,GAAQ,CAAA;AAAA,EAC7B;AAGI,MAAA,YAAY,YAAY,QAAQ,GAAG;AAQrC,UAAM,WACJ,YAAY,UAAU,QAAQ,GAAG,QAAQ,KACzC,YAAY,UAAU,kBAAkB,GAAG,QAAQ,KACnD;AAEF,QAAI,UAAU;AAEV,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAGb;AAAA,EACF;AAGA,UAAQ,UAAU;AAAA,IAChB,KAAK,WAAW;AACd,iCAAQ,cAAa,EAAA,IAAQ,OAAO,CAAC,CAAC,UAAW,CAAA;AAAA,IACnD;AAAA,IACA,KAAK,WAAW;AAEZ,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAAA,IACA,KAAK,eAAe;AAEhB,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aACG,oBAAA,WAAA,EAAU,IAAQ,OAAO,WAAW,eAAgC,CAAA;AAAA,EAE3E;AACF;AAEe,KAAK,KAAK;"}
+{"version":3,"file":"Value.js","sources":["../../../../../src/QueryBuilder/Rule/Value/Value.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { useQueryBuilderContext } from \"../../Context\";\nimport {\n  defaultRendererKey,\n  HvQueryBuilderRendererProps,\n  ValueRenderer,\n} from \"../../types\";\nimport { BooleanValue } from \"./BooleanValue\";\nimport { DateTimeValue } from \"./DateTimeValue\";\nimport { EmptyValue } from \"./EmptyValue\";\nimport { NumericValue } from \"./NumericValue\";\nimport { TextValue } from \"./TextValue\";\n\nexport interface ValueProps {\n  id: React.Key;\n  attribute: string;\n  operator?: string;\n  value?: any;\n}\n\nconst getRenderer = (renderer: ValueRenderer, operator?: string) =>\n  // 1. Custom renderer\n  (typeof renderer === \"function\" && renderer) ||\n  // 2. Custom operator renderer\n  (typeof renderer === \"object\" && operator && renderer[operator]) ||\n  // 3. Custom DEFAULT renderer\n  (typeof renderer === \"object\" && renderer[defaultRendererKey]);\n\nexport const Value = ({\n  id,\n  attribute,\n  operator,\n  value: valueProp,\n}: ValueProps) => {\n  const { attributes, initialTouched, renderers, emptyRenderer } =\n    useQueryBuilderContext();\n\n  const attrType = attributes?.[attribute]?.type;\n\n  // Empty value renderer\n  if (emptyRenderer?.find((op) => op === operator)) {\n    return <EmptyValue id={id} />;\n  }\n\n  // Custom renderer\n  if (attrType && renderers?.[attrType]) {\n    // Renderer to be used by order:\n    // 1. Custom attribute renderer\n    // 2. Custom attribute-operator renderer\n    // 3. Custom attribute-DEFAULT renderer\n    // 4. Custom master DEFAULT renderer\n    // 5. Custom master DEFAULT-operator renderer\n    // 6. Custom master DEFAULT-DEFAULT renderer\n    const Renderer: React.FC<HvQueryBuilderRendererProps> | undefined =\n      getRenderer(renderers[attrType], operator) ||\n      getRenderer(renderers[defaultRendererKey], operator) ||\n      undefined;\n\n    if (Renderer) {\n      return (\n        <Renderer\n          id={id}\n          attribute={attribute}\n          operator={operator}\n          value={valueProp}\n        />\n      );\n    }\n  }\n\n  // Built-in attributes\n  switch (attrType) {\n    case \"boolean\": {\n      return <BooleanValue id={id} value={!!valueProp} />;\n    }\n    case \"numeric\": {\n      return (\n        <NumericValue\n          id={id}\n          operator={operator}\n          value={valueProp}\n          initialTouched={initialTouched}\n        />\n      );\n    }\n    case \"dateandtime\": {\n      return (\n        <DateTimeValue\n          id={id}\n          operator={operator}\n          value={valueProp}\n          initialTouched={initialTouched}\n        />\n      );\n    }\n    case \"text\":\n    case \"textarea\":\n    default:\n      return (\n        <TextValue id={id} value={valueProp} initialTouched={initialTouched} />\n      );\n  }\n};\n\nexport default memo(Value);\n"],"names":[],"mappings":";;;;;;;;;AAqBA,MAAM,cAAc,CAAC,UAAyB;AAAA;AAAA,EAE3C,OAAO,aAAa,cAAc;AAAA,EAElC,OAAO,aAAa,YAAY,YAAY,SAAS,QAAQ;AAAA,EAE7D,OAAO,aAAa,YAAY,SAAS,kBAAkB;AAAA;AAEvD,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,MAAkB;AAChB,QAAM,EAAE,YAAY,gBAAgB,WAAW,cAAA,IAC7C;AAEI,QAAA,WAAW,aAAa,SAAS,GAAG;AAG1C,MAAI,eAAe,KAAK,CAAC,OAAO,OAAO,QAAQ,GAAG;AACzC,WAAA,oBAAC,cAAW,GAAQ,CAAA;AAAA,EAC7B;AAGI,MAAA,YAAY,YAAY,QAAQ,GAAG;AAQrC,UAAM,WACJ,YAAY,UAAU,QAAQ,GAAG,QAAQ,KACzC,YAAY,UAAU,kBAAkB,GAAG,QAAQ,KACnD;AAEF,QAAI,UAAU;AAEV,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAGb;AAAA,EACF;AAGA,UAAQ,UAAU;AAAA,IAChB,KAAK,WAAW;AACd,iCAAQ,cAAa,EAAA,IAAQ,OAAO,CAAC,CAAC,UAAW,CAAA;AAAA,IACnD;AAAA,IACA,KAAK,WAAW;AAEZ,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAAA,IACA,KAAK,eAAe;AAEhB,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aACG,oBAAA,WAAA,EAAU,IAAQ,OAAO,WAAW,eAAgC,CAAA;AAAA,EAE3E;AACF;AAEe,KAAK,KAAK;"}

package/dist/esm/QueryBuilder/RuleGroup/RuleGroup.js

@@ -104,7 +104,6 @@ const RuleGroup = ({
             children: /* @__PURE__ */ jsx(
               Delete,
               {
-                role: "none",
                 className: cx({ [classes.topRemoveButtonDisabled]: readOnly })
               }
             )

package/dist/esm/QueryBuilder/RuleGroup/RuleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuleGroup.js","sources":["../../../../src/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { HvEmptyState } from \"../../EmptyState\";\nimport { HvIconButton } from \"../../IconButton\";\nimport { HvMultiButton } from \"../../MultiButton\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useQueryBuilderContext } from \"../Context\";\nimport { useClasses } from \"../QueryBuilder.styles\";\nimport { Rule } from \"../Rule\";\nimport { HvQueryBuilderQueryCombinator, Query } from \"../types\";\n\nexport interface RuleGroupProps {\n  id: React.Key;\n  level?: number;\n  combinator?: string;\n  rules?: Query[\"rules\"];\n  classes?: ExtractNames<typeof useClasses>;\n}\n\nexport const RuleGroup = ({\n  level = 0,\n  id,\n  combinator = \"and\",\n  rules = [],\n  classes: classesProp,\n}: RuleGroupProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    dispatchAction,\n    askAction,\n    maxDepth,\n    combinators,\n    labels,\n    readOnly,\n    disableConfirmation,\n  } = useQueryBuilderContext();\n\n  const normalizedMaxDepth = maxDepth - 1;\n\n  const actionButtons = (\n    <>\n      <div className={classes.buttonBackground}>\n        <HvButton\n          variant=\"secondarySubtle\"\n          onClick={() => {\n            dispatchAction({ type: \"add-rule\", id });\n          }}\n          disabled={readOnly}\n          startIcon={<Add />}\n        >\n          {level === 0 && labels.query?.addRule?.label != null\n            ? labels.query?.addRule?.label\n            : labels.group.addRule.label}\n        </HvButton>\n      </div>\n      {level <= normalizedMaxDepth && (\n        <div className={classes.buttonBackground}>\n          <HvButton\n            variant=\"secondarySubtle\"\n            onClick={() => {\n              dispatchAction({ type: \"add-group\", id });\n            }}\n            disabled={readOnly}\n            startIcon={<Add />}\n          >\n            {level === 0 && labels.query?.addGroup?.label != null\n              ? labels.query?.addGroup?.label\n              : labels.group.addGroup.label}\n          </HvButton>\n        </div>\n      )}\n    </>\n  );\n\n  const onClickCombinator = useCallback(\n    (item: HvQueryBuilderQueryCombinator) => {\n      dispatchAction({\n        type: \"set-combinator\",\n        id,\n        combinator: item.operand,\n      });\n    },\n    [dispatchAction, id],\n  );\n\n  return (\n    <div\n      className={cx(classes.root, {\n        [classes.topGroup]: level === 0,\n        [classes.subGroup]: level > 0,\n      })}\n    >\n      <HvMultiButton\n        className={cx(classes.combinator, classes.topCombinator)}\n        disabled={readOnly}\n        aria-disabled={readOnly}\n      >\n        {combinators?.map((item) => (\n          <HvButton\n            key={item.operand}\n            className={classes.combinatorButton}\n            selected={item.operand === combinator}\n            onClick={() => item.operand && onClickCombinator(item)}\n            disabled={readOnly}\n            size=\"xs\"\n          >\n            {item.label}\n          </HvButton>\n        ))}\n      </HvMultiButton>\n      <div className={cx(classes.buttonBackground, classes.topRemoveButton)}>\n        <HvIconButton\n          className={classes.removeButton}\n          onClick={() =>\n            disableConfirmation\n              ? dispatchAction({ type: \"remove-node\", id })\n              : askAction({\n                  actions: [{ type: \"remove-node\", id }],\n                  dialog:\n                    level === 0 && labels.query?.delete != null\n                      ? labels.query.delete\n                      : labels.group.delete,\n                })\n          }\n          title={\n            (level === 0 && labels.query?.delete?.tooltip) ||\n            labels.group.delete.tooltip ||\n            (level === 0 && labels.query?.delete?.ariaLabel) ||\n            labels.group.delete.ariaLabel\n          }\n          disabled={readOnly}\n        >\n          <Delete\n            role=\"none\"\n            className={cx({ [classes.topRemoveButtonDisabled]: readOnly })}\n          />\n        </HvIconButton>\n      </div>\n      {rules?.length > 0 && (\n        <div\n          className={cx(classes.rulesContainer, {\n            [classes.subRulesContainer]: level > 0,\n            [classes.topRulesContainer]: level === 0,\n          })}\n        >\n          {rules.map((rule, index) => {\n            if (\"combinator\" in rule) {\n              return (\n                <RuleGroup\n                  key={rule.id}\n                  level={level + 1}\n                  {...rule}\n                  id={rule.id}\n                  classes={classes}\n                />\n              );\n            }\n\n            const isInvalid =\n              combinator === \"and\" &&\n              rules.some((r, i) => {\n                if (\"attribute\" in r) {\n                  if (\n                    r.attribute === rule.attribute &&\n                    r.id !== rule.id &&\n                    i < index\n                  ) {\n                    return true;\n                  }\n                }\n                return false;\n              });\n\n            return (\n              <Rule\n                key={rule.id}\n                {...rule}\n                isInvalid={isInvalid}\n                id={rule.id}\n                combinator={combinator}\n              />\n            );\n          })}\n        </div>\n      )}\n      {rules?.length === 0 && (\n        <HvEmptyState\n          title={labels.empty?.title}\n          message={\n            <>\n              <HvTypography\n                link\n                component=\"button\"\n                onClick={() => {\n                  dispatchAction({ type: \"add-rule\", id });\n                }}\n                className={classes.createConditionButton}\n                disabled={readOnly}\n                aria-disabled={readOnly}\n              >\n                {`${labels.empty?.createCondition}`}\n              </HvTypography>\n              {level <= normalizedMaxDepth && (\n                <>\n                  {`${labels.empty?.spacer}`}\n                  <HvTypography\n                    link\n                    component=\"button\"\n                    onClick={() => {\n                      dispatchAction({ type: \"add-group\", id });\n                    }}\n                    className={classes.createGroupButton}\n                    disabled={readOnly}\n                    aria-disabled={readOnly}\n                  >\n                    {`${labels.empty?.createGroup}`}\n                  </HvTypography>\n                </>\n              )}\n            </>\n          }\n          icon={<Info />}\n        />\n      )}\n      <div\n        className={cx(\n          classes.actionButtonContainer,\n          classes.topActionButtonContainer,\n        )}\n      >\n        {actionButtons}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RuleGroup.js","sources":["../../../../src/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { HvEmptyState } from \"../../EmptyState\";\nimport { HvIconButton } from \"../../IconButton\";\nimport { HvMultiButton } from \"../../MultiButton\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useQueryBuilderContext } from \"../Context\";\nimport { useClasses } from \"../QueryBuilder.styles\";\nimport { Rule } from \"../Rule\";\nimport { HvQueryBuilderQueryCombinator, Query } from \"../types\";\n\nexport interface RuleGroupProps {\n  id: React.Key;\n  level?: number;\n  combinator?: string;\n  rules?: Query[\"rules\"];\n  classes?: ExtractNames<typeof useClasses>;\n}\n\nexport const RuleGroup = ({\n  level = 0,\n  id,\n  combinator = \"and\",\n  rules = [],\n  classes: classesProp,\n}: RuleGroupProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    dispatchAction,\n    askAction,\n    maxDepth,\n    combinators,\n    labels,\n    readOnly,\n    disableConfirmation,\n  } = useQueryBuilderContext();\n\n  const normalizedMaxDepth = maxDepth - 1;\n\n  const actionButtons = (\n    <>\n      <div className={classes.buttonBackground}>\n        <HvButton\n          variant=\"secondarySubtle\"\n          onClick={() => {\n            dispatchAction({ type: \"add-rule\", id });\n          }}\n          disabled={readOnly}\n          startIcon={<Add />}\n        >\n          {level === 0 && labels.query?.addRule?.label != null\n            ? labels.query?.addRule?.label\n            : labels.group.addRule.label}\n        </HvButton>\n      </div>\n      {level <= normalizedMaxDepth && (\n        <div className={classes.buttonBackground}>\n          <HvButton\n            variant=\"secondarySubtle\"\n            onClick={() => {\n              dispatchAction({ type: \"add-group\", id });\n            }}\n            disabled={readOnly}\n            startIcon={<Add />}\n          >\n            {level === 0 && labels.query?.addGroup?.label != null\n              ? labels.query?.addGroup?.label\n              : labels.group.addGroup.label}\n          </HvButton>\n        </div>\n      )}\n    </>\n  );\n\n  const onClickCombinator = useCallback(\n    (item: HvQueryBuilderQueryCombinator) => {\n      dispatchAction({\n        type: \"set-combinator\",\n        id,\n        combinator: item.operand,\n      });\n    },\n    [dispatchAction, id],\n  );\n\n  return (\n    <div\n      className={cx(classes.root, {\n        [classes.topGroup]: level === 0,\n        [classes.subGroup]: level > 0,\n      })}\n    >\n      <HvMultiButton\n        className={cx(classes.combinator, classes.topCombinator)}\n        disabled={readOnly}\n        aria-disabled={readOnly}\n      >\n        {combinators?.map((item) => (\n          <HvButton\n            key={item.operand}\n            className={classes.combinatorButton}\n            selected={item.operand === combinator}\n            onClick={() => item.operand && onClickCombinator(item)}\n            disabled={readOnly}\n            size=\"xs\"\n          >\n            {item.label}\n          </HvButton>\n        ))}\n      </HvMultiButton>\n      <div className={cx(classes.buttonBackground, classes.topRemoveButton)}>\n        <HvIconButton\n          className={classes.removeButton}\n          onClick={() =>\n            disableConfirmation\n              ? dispatchAction({ type: \"remove-node\", id })\n              : askAction({\n                  actions: [{ type: \"remove-node\", id }],\n                  dialog:\n                    level === 0 && labels.query?.delete != null\n                      ? labels.query.delete\n                      : labels.group.delete,\n                })\n          }\n          title={\n            (level === 0 && labels.query?.delete?.tooltip) ||\n            labels.group.delete.tooltip ||\n            (level === 0 && labels.query?.delete?.ariaLabel) ||\n            labels.group.delete.ariaLabel\n          }\n          disabled={readOnly}\n        >\n          <Delete\n            className={cx({ [classes.topRemoveButtonDisabled]: readOnly })}\n          />\n        </HvIconButton>\n      </div>\n      {rules?.length > 0 && (\n        <div\n          className={cx(classes.rulesContainer, {\n            [classes.subRulesContainer]: level > 0,\n            [classes.topRulesContainer]: level === 0,\n          })}\n        >\n          {rules.map((rule, index) => {\n            if (\"combinator\" in rule) {\n              return (\n                <RuleGroup\n                  key={rule.id}\n                  level={level + 1}\n                  {...rule}\n                  id={rule.id}\n                  classes={classes}\n                />\n              );\n            }\n\n            const isInvalid =\n              combinator === \"and\" &&\n              rules.some((r, i) => {\n                if (\"attribute\" in r) {\n                  if (\n                    r.attribute === rule.attribute &&\n                    r.id !== rule.id &&\n                    i < index\n                  ) {\n                    return true;\n                  }\n                }\n                return false;\n              });\n\n            return (\n              <Rule\n                key={rule.id}\n                {...rule}\n                isInvalid={isInvalid}\n                id={rule.id}\n                combinator={combinator}\n              />\n            );\n          })}\n        </div>\n      )}\n      {rules?.length === 0 && (\n        <HvEmptyState\n          title={labels.empty?.title}\n          message={\n            <>\n              <HvTypography\n                link\n                component=\"button\"\n                onClick={() => {\n                  dispatchAction({ type: \"add-rule\", id });\n                }}\n                className={classes.createConditionButton}\n                disabled={readOnly}\n                aria-disabled={readOnly}\n              >\n                {`${labels.empty?.createCondition}`}\n              </HvTypography>\n              {level <= normalizedMaxDepth && (\n                <>\n                  {`${labels.empty?.spacer}`}\n                  <HvTypography\n                    link\n                    component=\"button\"\n                    onClick={() => {\n                      dispatchAction({ type: \"add-group\", id });\n                    }}\n                    className={classes.createGroupButton}\n                    disabled={readOnly}\n                    aria-disabled={readOnly}\n                  >\n                    {`${labels.empty?.createGroup}`}\n                  </HvTypography>\n                </>\n              )}\n            </>\n          }\n          icon={<Info />}\n        />\n      )}\n      <div\n        className={cx(\n          classes.actionButtonContainer,\n          classes.topActionButtonContainer,\n        )}\n      >\n        {actionButtons}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Tag/Tag.js

@@ -41,7 +41,6 @@ const HvTag = forwardRef((props, ref) => {
   const defaultDeleteIcon = /* @__PURE__ */ jsx(
     CloseXS,
     {
-      role: "none",
       className: cx(classes.button, classes.tagButton),
       iconSize: "XS",
       ...deleteButtonProps

package/dist/esm/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor?: HvColorAny, colors?: any) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = forwardRef<HTMLDivElement, HvTagProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected),\n  );\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      role=\"none\"\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n  const avatarIcon = isSelected ? (\n    <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n  ) : (\n    <Checkbox color={colorOverride} iconSize=\"XS\" />\n  );\n\n  return (\n    <Chip\n      ref={ref}\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={(event) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      aria-pressed={isSelected}\n      {...(selectable &&\n        type === \"semantic\" && {\n          avatar: avatarIcon,\n        })}\n      {...others}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;AA0DA,MAAM,sBAAsB,CAAC,aAA0B,WAAiB;AACtE,SAAQ,eAAe,SAAS,WAAW,KAAM,eAAe,QAAQ;AAC1E;AAUO,MAAM,QAAQ,WAAuC,CAAC,OAAO,QAAQ;AACpE,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,yBAAyB;AAAA,IACzB,oBAAoB,CAAC;AAAA,IACrB,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAC5B,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAE7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGzB,QAAM,oBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,6BACJ,SAAS,gBAAgB,oBAAoB,OAAO,MAAM,IAAI;AAE1D,QAAA,kBACH,SAAS,cAAc,SAAS,OAAO,YAAY,KACnD,SAAS,iBAAiB,GAAG,0BAA0B,QACxD;AAEF,QAAM,cAAc,CAAC,EAAE,WAAW,aAAa,CAAC;AAEhD,QAAM,iBAAiB,IAAI;AAAA,IACzB,WAAW;AAAA,MACT,WAAW,aAAa,0BAA0B;AAAA,IACpD;AAAA,EAAA,CACD;AAED,QAAM,gBAAiB,YAAY,CAAC,SAAS,cAAc,KAAM;AAEjE,QAAM,aAAa,aAChB,oBAAA,eAAA,EAAc,OAAO,eAAe,UAAS,KAAK,CAAA,IAElD,oBAAA,UAAA,EAAS,OAAO,eAAe,UAAS,KAAK,CAAA;AAI9C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,EAAE,CAAC,cAAc,GAAG,YAAA,GAAe,SAAS;AAAA,MAC1D,OAAO;AAAA,QACL,GAAI,WAAW,OAAO,EAAE,gBAAgB;AAAA,QACxC,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,UAAU;AAAA,UACvC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,SAAS,GAAG;AAAA,UACrB,CAAC,QAAQ,WAAW,GAAG,SAAS;AAAA,UAChC,CAAC,QAAQ,gBAAgB,GAAG,SAAS,iBAAiB,CAAC;AAAA,UACvD,CAAC,QAAQ,mBAAmB,GAAG,SAAS,iBAAiB;AAAA,QAAA,CAC1D;AAAA,QACD,OAAO,QAAQ;AAAA,QACf,YAAY,GAAG,QAAQ,YAAY;AAAA,UACjC,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAAA,CAC/B;AAAA,MACH;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,UAAU,WAAW,SAAY;AAAA,MACjC,SAAS,CAAC,UAAU;AACd,YAAA;AAAU;AACV,YAAA;AAAY,wBAAc,CAAC,UAAU;AAC/B,kBAAA,OAAO,CAAC,UAAU;AAAA,MAC9B;AAAA,MACA,gBAAc;AAAA,MACb,GAAI,cACH,SAAS,cAAc;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MACD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor?: HvColorAny, colors?: any) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = forwardRef<HTMLDivElement, HvTagProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected),\n  );\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n  const avatarIcon = isSelected ? (\n    <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n  ) : (\n    <Checkbox color={colorOverride} iconSize=\"XS\" />\n  );\n\n  return (\n    <Chip\n      ref={ref}\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={(event) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      aria-pressed={isSelected}\n      {...(selectable &&\n        type === \"semantic\" && {\n          avatar: avatarIcon,\n        })}\n      {...others}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;AA0DA,MAAM,sBAAsB,CAAC,aAA0B,WAAiB;AACtE,SAAQ,eAAe,SAAS,WAAW,KAAM,eAAe,QAAQ;AAC1E;AAUO,MAAM,QAAQ,WAAuC,CAAC,OAAO,QAAQ;AACpE,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,yBAAyB;AAAA,IACzB,oBAAoB,CAAC;AAAA,IACrB,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAC5B,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAE7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGzB,QAAM,oBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,6BACJ,SAAS,gBAAgB,oBAAoB,OAAO,MAAM,IAAI;AAE1D,QAAA,kBACH,SAAS,cAAc,SAAS,OAAO,YAAY,KACnD,SAAS,iBAAiB,GAAG,0BAA0B,QACxD;AAEF,QAAM,cAAc,CAAC,EAAE,WAAW,aAAa,CAAC;AAEhD,QAAM,iBAAiB,IAAI;AAAA,IACzB,WAAW;AAAA,MACT,WAAW,aAAa,0BAA0B;AAAA,IACpD;AAAA,EAAA,CACD;AAED,QAAM,gBAAiB,YAAY,CAAC,SAAS,cAAc,KAAM;AAEjE,QAAM,aAAa,aAChB,oBAAA,eAAA,EAAc,OAAO,eAAe,UAAS,KAAK,CAAA,IAElD,oBAAA,UAAA,EAAS,OAAO,eAAe,UAAS,KAAK,CAAA;AAI9C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,EAAE,CAAC,cAAc,GAAG,YAAA,GAAe,SAAS;AAAA,MAC1D,OAAO;AAAA,QACL,GAAI,WAAW,OAAO,EAAE,gBAAgB;AAAA,QACxC,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,UAAU;AAAA,UACvC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,SAAS,GAAG;AAAA,UACrB,CAAC,QAAQ,WAAW,GAAG,SAAS;AAAA,UAChC,CAAC,QAAQ,gBAAgB,GAAG,SAAS,iBAAiB,CAAC;AAAA,UACvD,CAAC,QAAQ,mBAAmB,GAAG,SAAS,iBAAiB;AAAA,QAAA,CAC1D;AAAA,QACD,OAAO,QAAQ;AAAA,QACf,YAAY,GAAG,QAAQ,YAAY;AAAA,UACjC,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAAA,CAC/B;AAAA,MACH;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,UAAU,WAAW,SAAY;AAAA,MACjC,SAAS,CAAC,UAAU;AACd,YAAA;AAAU;AACV,YAAA;AAAY,wBAAc,CAAC,UAAU;AAC/B,kBAAA,OAAO,CAAC,UAAU;AAAA,MAC9B;AAAA,MACA,gBAAc;AAAA,MACb,GAAI,cACH,SAAS,cAAc;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MACD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/esm/TreeView/TreeView.js

@@ -21,8 +21,8 @@ const HvTreeView = fixedForwardRef(function HvTreeView2(props, ref) {
     selected,
     defaultSelected,
     disableSelection,
-    defaultCollapseIcon = /* @__PURE__ */ jsx(DropDownXS, { role: "none" }),
-    defaultExpandIcon = /* @__PURE__ */ jsx(DropRightXS, { role: "none" }),
+    defaultCollapseIcon = /* @__PURE__ */ jsx(DropDownXS, {}),
+    defaultExpandIcon = /* @__PURE__ */ jsx(DropRightXS, {}),
     defaultEndIcon,
     defaultParentIcon,
     onNodeSelect,

package/dist/esm/TreeView/TreeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.js","sources":["../../../src/TreeView/TreeView.tsx"],"sourcesContent":["import { useSlotProps } from \"@mui/base/utils\";\nimport { DropDownXS, DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { fixedForwardRef, HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n  DEFAULT_TREE_VIEW_PLUGINS,\n  DefaultTreeViewPluginParameters,\n} from \"./internals/hooks/plugins\";\nimport { useTreeView } from \"./internals/hooks/useTreeView\";\nimport { TreeViewProvider } from \"./internals/TreeViewProvider\";\nimport { staticClasses, useClasses } from \"./TreeView.styles\";\n\nexport { staticClasses as treeView2Classes }; // TODO: remove old `treeViewClasses`\n\nexport type HvTreeViewClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeViewProps<Multiple extends boolean | undefined>\n  extends HvBaseProps<HTMLUListElement>,\n    DefaultTreeViewPluginParameters<Multiple> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvTreeViewClasses;\n  /** Tree View children. Usually a `HvTreeItem` instance, or a custom variation of it */\n  children?: React.ReactNode;\n}\n\n/**\n * A Tree View displays hierarchical structures.\n * It also facilitates the exploration of categorical levels and their content.\n *\n * Tree structures are built through composing the `HvTreeItem` component,\n * or a custom variation of it.\n *\n * It is based on MUI's [TreeView](https://mui.com/x/react-tree-view) component.\n *\n * @example\n * ```tsx\n * <HvTreeView>\n *   <HvTreeItem nodeId=\"1\" label=\"File1\" />\n * </HvTreeView>\n * ```\n */\nexport const HvTreeView = fixedForwardRef(function HvTreeView<\n  Multiple extends boolean | undefined,\n>(props: HvTreeViewProps<Multiple>, ref: React.Ref<HTMLUListElement>) {\n  const {\n    id,\n    children,\n    classes: classesProp,\n    className,\n\n    disabledItemsFocusable,\n    multiSelect,\n    expanded,\n    defaultExpanded,\n    selected,\n    defaultSelected,\n    disableSelection,\n    defaultCollapseIcon = <DropDownXS role=\"none\" />,\n    defaultExpandIcon = <DropRightXS role=\"none\" />,\n    defaultEndIcon,\n    defaultParentIcon,\n    onNodeSelect,\n    onNodeToggle,\n    onNodeFocus,\n    ...others\n  } = useDefaultProps(\"HvTreeView\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { getRootProps, contextValue } = useTreeView({\n    disabledItemsFocusable,\n    expanded,\n    defaultExpanded,\n    onNodeToggle,\n    onNodeFocus,\n    disableSelection,\n    defaultSelected,\n    selected,\n    multiSelect,\n    onNodeSelect: onNodeSelect as HvTreeViewProps<any>[\"onNodeSelect\"],\n    id,\n    defaultCollapseIcon,\n    defaultEndIcon,\n    defaultExpandIcon,\n    defaultParentIcon,\n    plugins: DEFAULT_TREE_VIEW_PLUGINS,\n    rootRef: ref,\n  });\n\n  const rootProps = useSlotProps({\n    elementType: \"ul\",\n    externalSlotProps: {},\n    externalForwardedProps: others,\n    className: classes.root,\n    getSlotProps: getRootProps,\n    ownerState: props,\n  });\n\n  return (\n    <TreeViewProvider value={contextValue}>\n      <ul className={cx(classes.root, className)} {...rootProps} {...others}>\n        {children}\n      </ul>\n    </TreeViewProvider>\n  );\n});\n"],"names":["HvTreeView"],"mappings":";;;;;;;;;;AA2CO,MAAM,aAAa,gBAAgB,SAASA,YAEjD,OAAkC,KAAkC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB,oBAAC,YAAW,EAAA,MAAK,OAAO,CAAA;AAAA,IAC9C,oBAAoB,oBAAC,aAAY,EAAA,MAAK,OAAO,CAAA;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,cAAc,aAAa,IAAI,YAAY;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,EAAA,CACV;AAED,QAAM,YAAY,aAAa;AAAA,IAC7B,aAAa;AAAA,IACb,mBAAmB,CAAC;AAAA,IACpB,wBAAwB;AAAA,IACxB,WAAW,QAAQ;AAAA,IACnB,cAAc;AAAA,IACd,YAAY;AAAA,EAAA,CACb;AAED,6BACG,kBAAiB,EAAA,OAAO,cACvB,UAAA,oBAAC,QAAG,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,WAAY,GAAG,QAC5D,UACH,EACF,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"TreeView.js","sources":["../../../src/TreeView/TreeView.tsx"],"sourcesContent":["import { useSlotProps } from \"@mui/base/utils\";\nimport { DropDownXS, DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { fixedForwardRef, HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n  DEFAULT_TREE_VIEW_PLUGINS,\n  DefaultTreeViewPluginParameters,\n} from \"./internals/hooks/plugins\";\nimport { useTreeView } from \"./internals/hooks/useTreeView\";\nimport { TreeViewProvider } from \"./internals/TreeViewProvider\";\nimport { staticClasses, useClasses } from \"./TreeView.styles\";\n\nexport { staticClasses as treeView2Classes }; // TODO: remove old `treeViewClasses`\n\nexport type HvTreeViewClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeViewProps<Multiple extends boolean | undefined>\n  extends HvBaseProps<HTMLUListElement>,\n    DefaultTreeViewPluginParameters<Multiple> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvTreeViewClasses;\n  /** Tree View children. Usually a `HvTreeItem` instance, or a custom variation of it */\n  children?: React.ReactNode;\n}\n\n/**\n * A Tree View displays hierarchical structures.\n * It also facilitates the exploration of categorical levels and their content.\n *\n * Tree structures are built through composing the `HvTreeItem` component,\n * or a custom variation of it.\n *\n * It is based on MUI's [TreeView](https://mui.com/x/react-tree-view) component.\n *\n * @example\n * ```tsx\n * <HvTreeView>\n *   <HvTreeItem nodeId=\"1\" label=\"File1\" />\n * </HvTreeView>\n * ```\n */\nexport const HvTreeView = fixedForwardRef(function HvTreeView<\n  Multiple extends boolean | undefined,\n>(props: HvTreeViewProps<Multiple>, ref: React.Ref<HTMLUListElement>) {\n  const {\n    id,\n    children,\n    classes: classesProp,\n    className,\n\n    disabledItemsFocusable,\n    multiSelect,\n    expanded,\n    defaultExpanded,\n    selected,\n    defaultSelected,\n    disableSelection,\n    defaultCollapseIcon = <DropDownXS />,\n    defaultExpandIcon = <DropRightXS />,\n    defaultEndIcon,\n    defaultParentIcon,\n    onNodeSelect,\n    onNodeToggle,\n    onNodeFocus,\n    ...others\n  } = useDefaultProps(\"HvTreeView\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { getRootProps, contextValue } = useTreeView({\n    disabledItemsFocusable,\n    expanded,\n    defaultExpanded,\n    onNodeToggle,\n    onNodeFocus,\n    disableSelection,\n    defaultSelected,\n    selected,\n    multiSelect,\n    onNodeSelect: onNodeSelect as HvTreeViewProps<any>[\"onNodeSelect\"],\n    id,\n    defaultCollapseIcon,\n    defaultEndIcon,\n    defaultExpandIcon,\n    defaultParentIcon,\n    plugins: DEFAULT_TREE_VIEW_PLUGINS,\n    rootRef: ref,\n  });\n\n  const rootProps = useSlotProps({\n    elementType: \"ul\",\n    externalSlotProps: {},\n    externalForwardedProps: others,\n    className: classes.root,\n    getSlotProps: getRootProps,\n    ownerState: props,\n  });\n\n  return (\n    <TreeViewProvider value={contextValue}>\n      <ul className={cx(classes.root, className)} {...rootProps} {...others}>\n        {children}\n      </ul>\n    </TreeViewProvider>\n  );\n});\n"],"names":["HvTreeView"],"mappings":";;;;;;;;;;AA2CO,MAAM,aAAa,gBAAgB,SAASA,YAEjD,OAAkC,KAAkC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,0CAAuB,YAAW,EAAA;AAAA,IAClC,wCAAqB,aAAY,EAAA;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,cAAc,aAAa,IAAI,YAAY;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,EAAA,CACV;AAED,QAAM,YAAY,aAAa;AAAA,IAC7B,aAAa;AAAA,IACb,mBAAmB,CAAC;AAAA,IACpB,wBAAwB;AAAA,IACxB,WAAW,QAAQ;AAAA,IACnB,cAAc;AAAA,IACd,YAAY;AAAA,EAAA,CACb;AAED,6BACG,kBAAiB,EAAA,OAAO,cACvB,UAAA,oBAAC,QAAG,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,WAAY,GAAG,QAC5D,UACH,EACF,CAAA;AAEJ,CAAC;"}