@hitachivantara/uikit-react-core 5.32.0 → 5.33.0

package/dist/cjs/components/Accordion/Accordion.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
-const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");
 const setId = require("../../utils/setId.cjs");
 const Accordion_styles = require("./Accordion.styles.cjs");
@@ -31,7 +31,7 @@ const HvAccordion = (props) => {
   const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
   const handleAction = React.useCallback((event) => {
     if (!disabled) {
-      onChange == null ? void 0 : onChange(event, isOpen);
+      onChange?.(event, isOpen);
       setIsOpen(!isOpen);
       return true;
     }
@@ -66,15 +66,14 @@ const HvAccordion = (props) => {
   const accordionHeaderId = setId.setId(id, "button");
   const accordionContainer = setId.setId(id, "container");
   const accordionHeader = React.useMemo(() => {
-    const color = disabled && ["secondary_60"] || void 0;
+    const color = disabled ? "secondary_60" : void 0;
     const accordionButton = /* @__PURE__ */ jsxRuntime.jsxs(Typography.HvTypography, { id: accordionHeaderId, component: "div", role: "button", className: cx(classes.label, {
       [classes.disabled]: disabled
     }), disabled, tabIndex: 0, onKeyDown: handleKeyDown, onClick: handleClick, variant: labelVariant, "aria-expanded": isOpen, "aria-disabled": disabled, children: [
       isOpen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, { color }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { color }),
       label
     ] });
-    const result = headingLevel === void 0 ? accordionButton : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: `h${headingLevel}`, variant: labelVariant, children: accordionButton });
-    return result;
+    return headingLevel === void 0 ? accordionButton : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: `h${headingLevel}`, variant: labelVariant, children: accordionButton });
   }, [cx, classes, handleClick, handleKeyDown, label, accordionHeaderId, disabled, headingLevel, isOpen, labelVariant]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
     accordionHeader,

package/dist/cjs/components/Accordion/Accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n} from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvTypographyVariants,\n  HvTypography,\n} from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The accordion label button.\n   */\n  label?: string;\n  /**\n   * The function that will be executed whenever the accordion toggles it will receive the state of the accordion\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /**\n   * Whether the accordion is open or not, if this property is defined the accordion must be fully controlled.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be passed onto container holding the accordion children.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Heading Level to apply to accordion button if ´undefined´ the button won't have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Is the accordion disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Typography variant for the label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvAccordionClasses;\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = (props: HvAccordionProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        setIsOpen(!isOpen);\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isOpen, setIsOpen]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const accordionHeaderId = setId(id, \"button\");\n  const accordionContainer = setId(id, \"container\");\n  const accordionHeader = useMemo(() => {\n    const color = (disabled && [\"secondary_60\"]) || undefined;\n\n    const accordionButton = (\n      <HvTypography\n        id={accordionHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n      >\n        {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n        {label}\n      </HvTypography>\n    );\n    const result =\n      headingLevel === undefined ? (\n        accordionButton\n      ) : (\n        <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n          {accordionButton}\n        </HvTypography>\n      );\n    return result;\n  }, [\n    cx,\n    classes,\n    handleClick,\n    handleKeyDown,\n    label,\n    accordionHeaderId,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        id={accordionContainer}\n        role=\"region\"\n        aria-labelledby={accordionHeaderId}\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["HvAccordion","props","id","className","classes","classesProp","disabled","label","onChange","children","expanded","headingLevel","defaultExpanded","containerProps","labelVariant","others","useDefaultProps","cx","useClasses","isOpen","setIsOpen","useControlled","Boolean","handleAction","useCallback","event","handleClick","preventDefault","stopPropagation","handleKeyDown","isEventHandled","key","altKey","ctrlKey","metaKey","currentTarget","target","accordionHeaderId","setId","accordionContainer","accordionHeader","useMemo","color","undefined","accordionButton","jsxs","HvTypography","DropUpXS","jsx","DropDownXS","result","root","container","hidden"],"mappings":";;;;;;;;;;AAwEaA,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,kBAAkB;AAAA,IAClBC;AAAAA,IACAC,eAAe;AAAA,IACf,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,eAAef,KAAK;AAElC,QAAA;AAAA,IAAEG;AAAAA,IAASa;AAAAA,EAAAA,IAAOC,iBAAAA,WAAWb,WAAW;AAExC,QAAA,CAACc,QAAQC,SAAS,IAAIC,cAAAA,cAAcX,UAAUY,QAAQV,eAAe,CAAC;AAEtEW,QAAAA,eAAeC,kBACnB,CAACC,UAA0B;AACzB,QAAI,CAACnB,UAAU;AACbE,2CAAWiB,OAAON;AAClBC,gBAAU,CAACD,MAAM;AACV,aAAA;AAAA,IACT;AACO,WAAA;AAAA,KAET,CAACb,UAAUE,UAAUW,QAAQC,SAAS,CACxC;AAEMM,QAAAA,cAAcF,kBAClB,CAACC,UAA0B;AACzBF,iBAAaE,KAAK;AAClBA,UAAME,eAAe;AACrBF,UAAMG,gBAAgB;AAAA,EAAA,GAExB,CAACL,YAAY,CACf;AAEMM,QAAAA,gBAAgBL,kBACpB,CAACC,UAA+C;AAC9C,QAAIK,iBAAiB;AACf,UAAA;AAAA,MAAEC;AAAAA,IAAQN,IAAAA;AAGdA,QAAAA,MAAMO,UACNP,MAAMQ,WACNR,MAAMS,WACNT,MAAMU,kBAAkBV,MAAMW,QAC9B;AACA;AAAA,IACF;AACA,YAAQL,KAAG;AAAA,MACT,KAAK;AAAA,MACL,KAAK;AACHD,yBAAiBP,aAAaE,KAAK;AACnC;AAAA,MACF;AACE;AAAA,IACJ;AAEA,QAAIK,gBAAgB;AAClBL,YAAME,eAAe;AACrBF,YAAMG,gBAAgB;AAAA,IACxB;AAAA,EAAA,GAEF,CAACL,YAAY,CACf;AAEMc,QAAAA,oBAAoBC,MAAAA,MAAMpC,IAAI,QAAQ;AACtCqC,QAAAA,qBAAqBD,MAAAA,MAAMpC,IAAI,WAAW;AAC1CsC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AACpC,UAAMC,QAASpC,YAAY,CAAC,cAAc,KAAMqC;AAEhD,UAAMC,kBACJC,2BAAA,KAACC,WACC,cAAA,EAAA,IAAIT,mBACJ,WAAU,OACV,MAAK,UACL,WAAWpB,GAAGb,QAAQG,OAAO;AAAA,MAAE,CAACH,QAAQE,QAAQ,GAAGA;AAAAA,IAAAA,CAAU,GAC7D,UACA,UAAU,GACV,WAAWuB,eACX,SAASH,aACT,SAASZ,cACT,iBAAeK,QACf,iBAAeb,UAEda,UAAAA;AAAAA,MAAAA,wCAAU4B,gBAAS,UAAA,EAAA,MAAA,CAAgB,IAAGC,+BAACC,gBAAAA,cAAW,OAAgB;AAAA,MAClE1C;AAAAA,IACH,EAAA,CAAA;AAEF,UAAM2C,SACJvC,iBAAiBgC,SACfC,kBAECI,2BAAAA,IAAAF,WAAAA,cAAA,EAAa,WAAY,IAAGnC,YAAa,IAAG,SAASG,cACnD8B,UACH,gBAAA,CAAA;AAEGM,WAAAA;AAAAA,EACN,GAAA,CACDjC,IACAb,SACAsB,aACAG,eACAtB,OACA8B,mBACA/B,UACAK,cACAQ,QACAL,YAAY,CACb;AAGC,SAAA+B,gCAAC,OAAI,EAAA,IAAQ,WAAW5B,GAAGb,QAAQ+C,MAAMhD,SAAS,GAAOY,GAAAA,QACtDyB,UAAAA;AAAAA,IAAAA;AAAAA,IACDQ,2BAAAA,IAAC,OACC,EAAA,IAAIT,oBACJ,MAAK,UACL,mBAAiBF,mBACjB,WAAWpB,GAAGb,QAAQgD,WAAW;AAAA,MAAE,CAAChD,QAAQiD,MAAM,GAAG,CAAClC;AAAAA,IAAAA,CAAQ,GAC9D,QAAQ,CAACA,QACLN,GAAAA,gBAEHJ,SACH,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n} from \"react\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvTypographyVariants,\n  HvTypography,\n} from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The accordion label button.\n   */\n  label?: string;\n  /**\n   * The function that will be executed whenever the accordion toggles it will receive the state of the accordion\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /**\n   * Whether the accordion is open or not, if this property is defined the accordion must be fully controlled.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be passed onto container holding the accordion children.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Heading Level to apply to accordion button if ´undefined´ the button won't have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Is the accordion disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Typography variant for the label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvAccordionClasses;\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = (props: HvAccordionProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        setIsOpen(!isOpen);\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isOpen, setIsOpen]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const accordionHeaderId = setId(id, \"button\");\n  const accordionContainer = setId(id, \"container\");\n  const accordionHeader = useMemo(() => {\n    const color = disabled ? \"secondary_60\" : undefined;\n\n    const accordionButton = (\n      <HvTypography\n        id={accordionHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n      >\n        {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n        {label}\n      </HvTypography>\n    );\n\n    return headingLevel === undefined ? (\n      accordionButton\n    ) : (\n      <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n        {accordionButton}\n      </HvTypography>\n    );\n  }, [\n    cx,\n    classes,\n    handleClick,\n    handleKeyDown,\n    label,\n    accordionHeaderId,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        id={accordionContainer}\n        role=\"region\"\n        aria-labelledby={accordionHeaderId}\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["HvAccordion","props","id","className","classes","classesProp","disabled","label","onChange","children","expanded","headingLevel","defaultExpanded","containerProps","labelVariant","others","useDefaultProps","cx","useClasses","isOpen","setIsOpen","useControlled","Boolean","handleAction","useCallback","event","handleClick","preventDefault","stopPropagation","handleKeyDown","isEventHandled","key","altKey","ctrlKey","metaKey","currentTarget","target","accordionHeaderId","setId","accordionContainer","accordionHeader","useMemo","color","undefined","accordionButton","jsxs","HvTypography","DropUpXS","jsx","DropDownXS","root","container","hidden"],"mappings":";;;;;;;;;;AAyEaA,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,kBAAkB;AAAA,IAClBC;AAAAA,IACAC,eAAe;AAAA,IACf,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,eAAef,KAAK;AAElC,QAAA;AAAA,IAAEG;AAAAA,IAASa;AAAAA,EAAAA,IAAOC,iBAAAA,WAAWb,WAAW;AAExC,QAAA,CAACc,QAAQC,SAAS,IAAIC,cAAAA,cAAcX,UAAUY,QAAQV,eAAe,CAAC;AAEtEW,QAAAA,eAAeC,kBACnB,CAACC,UAA0B;AACzB,QAAI,CAACnB,UAAU;AACbE,iBAAWiB,OAAON,MAAM;AACxBC,gBAAU,CAACD,MAAM;AACV,aAAA;AAAA,IACT;AACO,WAAA;AAAA,KAET,CAACb,UAAUE,UAAUW,QAAQC,SAAS,CACxC;AAEMM,QAAAA,cAAcF,kBAClB,CAACC,UAA0B;AACzBF,iBAAaE,KAAK;AAClBA,UAAME,eAAe;AACrBF,UAAMG,gBAAgB;AAAA,EAAA,GAExB,CAACL,YAAY,CACf;AAEMM,QAAAA,gBAAgBL,kBACpB,CAACC,UAA+C;AAC9C,QAAIK,iBAAiB;AACf,UAAA;AAAA,MAAEC;AAAAA,IAAQN,IAAAA;AAGdA,QAAAA,MAAMO,UACNP,MAAMQ,WACNR,MAAMS,WACNT,MAAMU,kBAAkBV,MAAMW,QAC9B;AACA;AAAA,IACF;AACA,YAAQL,KAAG;AAAA,MACT,KAAK;AAAA,MACL,KAAK;AACHD,yBAAiBP,aAAaE,KAAK;AACnC;AAAA,MACF;AACE;AAAA,IACJ;AAEA,QAAIK,gBAAgB;AAClBL,YAAME,eAAe;AACrBF,YAAMG,gBAAgB;AAAA,IACxB;AAAA,EAAA,GAEF,CAACL,YAAY,CACf;AAEMc,QAAAA,oBAAoBC,MAAAA,MAAMpC,IAAI,QAAQ;AACtCqC,QAAAA,qBAAqBD,MAAAA,MAAMpC,IAAI,WAAW;AAC1CsC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC9BC,UAAAA,QAAQpC,WAAW,iBAAiBqC;AAE1C,UAAMC,kBACJC,2BAAA,KAACC,WACC,cAAA,EAAA,IAAIT,mBACJ,WAAU,OACV,MAAK,UACL,WAAWpB,GAAGb,QAAQG,OAAO;AAAA,MAAE,CAACH,QAAQE,QAAQ,GAAGA;AAAAA,IAAAA,CAAU,GAC7D,UACA,UAAU,GACV,WAAWuB,eACX,SAASH,aACT,SAASZ,cACT,iBAAeK,QACf,iBAAeb,UAEda,UAAAA;AAAAA,MAAAA,wCAAU4B,gBAAS,UAAA,EAAA,MAAA,CAAgB,IAAGC,+BAACC,gBAAAA,cAAW,OAAgB;AAAA,MAClE1C;AAAAA,IACH,EAAA,CAAA;AAGKI,WAAAA,iBAAiBgC,SACtBC,kBAECI,2BAAA,IAAAF,WAAA,cAAA,EAAa,WAAY,IAAGnC,YAAa,IAAG,SAASG,cACnD8B,UACH,gBAAA,CAAA;AAAA,EAED,GAAA,CACD3B,IACAb,SACAsB,aACAG,eACAtB,OACA8B,mBACA/B,UACAK,cACAQ,QACAL,YAAY,CACb;AAGC,SAAA+B,gCAAC,OAAI,EAAA,IAAQ,WAAW5B,GAAGb,QAAQ8C,MAAM/C,SAAS,GAAOY,GAAAA,QACtDyB,UAAAA;AAAAA,IAAAA;AAAAA,IACDQ,2BAAAA,IAAC,OACC,EAAA,IAAIT,oBACJ,MAAK,UACL,mBAAiBF,mBACjB,WAAWpB,GAAGb,QAAQ+C,WAAW;AAAA,MAAE,CAAC/C,QAAQgD,MAAM,GAAG,CAACjC;AAAAA,IAAAA,CAAQ,GAC9D,QAAQ,CAACA,QACLN,GAAAA,gBAEHJ,SACH,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/components/ActionsGeneric/ActionsGeneric.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
-const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const hexToRgbA = require("../../utils/hexToRgbA.cjs");
 const setId = require("../../utils/setId.cjs");
 const useTheme = require("../../hooks/useTheme.cjs");
@@ -42,14 +42,14 @@ const HvActionsGeneric = (props) => {
       ...other
     } = action;
     const actionId = setId.setId(id, idx, "action", action.id);
-    const renderedIcon = React.isValidElement(icon) ? icon : icon == null ? void 0 : icon({
+    const renderedIcon = React.isValidElement(icon) ? icon : icon?.({
       isDisabled: disabled
     });
     return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { id: actionId, variant: category, className: cx(css({
       "&:hover": {
-        backgroundColor: hexToRgbA.hexToRgbA((colors == null ? void 0 : colors.base_light) || uikitStyles.theme.colors.base_light, 0.3)
+        backgroundColor: hexToRgbA.hexToRgbA(colors?.base_light || uikitStyles.theme.colors.base_light, 0.3)
       }
-    }), classes.button), disabled: actDisabled ?? disabled, onClick: (event) => actionsCallback == null ? void 0 : actionsCallback(event, id || "", action), startIcon: renderedIcon, ...other, children: label }, actionId || idx);
+    }), classes.button), disabled: actDisabled ?? disabled, onClick: (event) => actionsCallback?.(event, id || "", action), startIcon: renderedIcon, ...other, children: label }, actionId || idx);
   };
   const renderActionsGrid = () => {
     const actsVisible = actions.slice(0, maxVisibleActions);
@@ -62,7 +62,7 @@ const HvActionsGeneric = (props) => {
         root: classes.dropDownMenu,
         icon: classes.dropDownMenuButton,
         iconSelected: classes.dropDownMenuButtonSelected
-      }, icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, { color: iconColor }), placement: "left", onClick: (event, action) => actionsCallback == null ? void 0 : actionsCallback(event, id || "", action), dataList: actsDropdown, keepOpened: false, disablePortal: false })
+      }, icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, { color: iconColor }), placement: "left", onClick: (event, action) => actionsCallback?.(event, id || "", action), dataList: actsDropdown, keepOpened: false, disablePortal: false })
     ] });
   };
   const actionOverflow = actions.length > maxVisibleActions;

package/dist/cjs/components/ActionsGeneric/ActionsGeneric.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsGeneric.cjs","sources":["../../../../src/components/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import React, { isValidElement } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvDropDownMenu } from \"@core/components/DropDownMenu\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  id: string;\n  label: string;\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  disabled?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /** Button category. */\n  category?: HvButtonVariant;\n  /**  Whether actions should be all disabled */\n  disabled?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an Array of actions `{id, label, icon, disabled}` */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /**  The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = (props: HvActionsGenericProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\",\n    disabled = false,\n    actions = [],\n    actionsCallback,\n    maxVisibleActions = Infinity,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { colors } = useTheme();\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const { disabled: actDisabled, id: actId, icon, label, ...other } = action;\n    const actionId = setId(id, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    return (\n      <HvButton\n        id={actionId}\n        key={actionId || idx}\n        variant={category}\n        className={cx(\n          css({\n            \"&:hover\": {\n              backgroundColor: hexToRgbA(\n                colors?.base_light || theme.colors.base_light,\n                0.3\n              ),\n            },\n          }),\n          classes.button\n        )}\n        disabled={actDisabled ?? disabled}\n        onClick={(event) => actionsCallback?.(event, id || \"\", action)}\n        startIcon={renderedIcon}\n        {...other}\n      >\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = category === \"semantic\";\n    const iconColor =\n      (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(id, \"menu\")}\n          disabled={disabled}\n          category={category}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) =>\n            actionsCallback?.(event, id || \"\", action as HvActionGeneric)\n          }\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n};\n"],"names":["HvActionsGeneric","props","id","classes","classesProp","className","category","disabled","actions","actionsCallback","maxVisibleActions","Infinity","others","useDefaultProps","cx","css","useClasses","colors","useTheme","Array","isArray","isValidElement","renderButton","action","idx","actDisabled","actId","icon","label","other","actionId","setId","renderedIcon","isDisabled","jsx","HvButton","backgroundColor","hexToRgbA","base_light","theme","button","event","renderActionsGrid","actsVisible","slice","actsDropdown","semantic","iconColor","undefined","map","HvDropDownMenu","root","dropDownMenu","dropDownMenuButton","iconSelected","dropDownMenuButtonSelected","MoreOptionsVertical","actionOverflow","length","actionContainer"],"mappings":"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"}
+{"version":3,"file":"ActionsGeneric.cjs","sources":["../../../../src/components/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import React, { isValidElement } from \"react\";\n\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvDropDownMenu } from \"@core/components/DropDownMenu\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  id: string;\n  label: string;\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  disabled?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /** Button category. */\n  category?: HvButtonVariant;\n  /**  Whether actions should be all disabled */\n  disabled?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an Array of actions `{id, label, icon, disabled}` */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /**  The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = (props: HvActionsGenericProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\",\n    disabled = false,\n    actions = [],\n    actionsCallback,\n    maxVisibleActions = Infinity,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { colors } = useTheme();\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const { disabled: actDisabled, id: actId, icon, label, ...other } = action;\n    const actionId = setId(id, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    return (\n      <HvButton\n        id={actionId}\n        key={actionId || idx}\n        variant={category}\n        className={cx(\n          css({\n            \"&:hover\": {\n              backgroundColor: hexToRgbA(\n                colors?.base_light || theme.colors.base_light,\n                0.3\n              ),\n            },\n          }),\n          classes.button\n        )}\n        disabled={actDisabled ?? disabled}\n        onClick={(event) => actionsCallback?.(event, id || \"\", action)}\n        startIcon={renderedIcon}\n        {...other}\n      >\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = category === \"semantic\";\n    const iconColor =\n      (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(id, \"menu\")}\n          disabled={disabled}\n          category={category}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) =>\n            actionsCallback?.(event, id || \"\", action as HvActionGeneric)\n          }\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n};\n"],"names":["HvActionsGeneric","props","id","classes","classesProp","className","category","disabled","actions","actionsCallback","maxVisibleActions","Infinity","others","useDefaultProps","cx","css","useClasses","colors","useTheme","Array","isArray","isValidElement","renderButton","action","idx","actDisabled","actId","icon","label","other","actionId","setId","renderedIcon","isDisabled","jsx","HvButton","backgroundColor","hexToRgbA","base_light","theme","button","event","renderActionsGrid","actsVisible","slice","actsDropdown","semantic","iconColor","undefined","map","HvDropDownMenu","root","dropDownMenu","dropDownMenuButton","iconSelected","dropDownMenuButtonSelected","MoreOptionsVertical","actionOverflow","length","actionContainer"],"mappings":"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"}

package/dist/cjs/components/AppSwitcher/Action/Action.cjs

@@ -33,7 +33,7 @@ const HvAppSwitcherAction = ({
     url,
     target
   } = application;
-  const color = disabled ? uikitStyles.theme.colors.secondary_60 : uikitStyles.getColor(application == null ? void 0 : application.color, uikitStyles.theme.colors.secondary);
+  const color = disabled ? uikitStyles.theme.colors.secondary_60 : uikitStyles.getColor(application?.color, uikitStyles.theme.colors.secondary);
   const [validIconUrl, setValidIconUrl] = React.useState(true);
   const renderApplicationIcon = () => {
     if (iconElement) {
@@ -54,7 +54,7 @@ const HvAppSwitcherAction = ({
       event.preventDefault();
       return;
     }
-    onClickCallback == null ? void 0 : onClickCallback(event, {
+    onClickCallback?.(event, {
       ...application,
       isSelected
     });

package/dist/cjs/components/AppSwitcher/Action/Action.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Action.cjs","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport { theme, getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"@core/components/Avatar\";\nimport { HvListItem } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TitleWithTooltip from \"../TitleWithTooltip\";\nimport { useClasses, staticClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = disabled\n    ? theme.colors.secondary_60\n    : getColor(application?.color, theme.colors.secondary);\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback]\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id, \"hvAction-description\");\n\n  const renderApplication = useCallback(\n    (children: React.ReactNode) => {\n      const typographyProps = {\n        className: classes.typography,\n        onClick: handleOnClick,\n        style: { borderColor: color },\n        \"aria-label\": name,\n        ...(description && { \"aria-describedby\": descriptionElementId }),\n      };\n\n      if (isLink) {\n        return (\n          <HvTypography\n            component=\"a\"\n            href={url}\n            target={target || \"_top\"}\n            {...typographyProps}\n          >\n            {children}\n          </HvTypography>\n        );\n      }\n\n      return (\n        <HvTypography component=\"button\" {...typographyProps}>\n          {children}\n        </HvTypography>\n      );\n    },\n    [\n      classes.typography,\n      color,\n      description,\n      descriptionElementId,\n      handleOnClick,\n      isLink,\n      name,\n      target,\n      url,\n    ]\n  );\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className\n      )}\n    >\n      {/* As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n       In substitution is used the aria-label with the \"title\" value */}\n      {renderApplication(\n        <>\n          <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n          <TitleWithTooltip title={name} className={classes.title} />\n\n          {description && (\n            <HvTooltip\n              disableFocusListener\n              disableTouchListener\n              title={<HvTypography>{description}</HvTypography>}\n            >\n              <div>\n                <Info\n                  className={classes.iconInfo}\n                  role=\"img\"\n                  aria-label={description}\n                  id={descriptionElementId}\n                />\n              </div>\n            </HvTooltip>\n          )}\n        </>\n      )}\n    </HvListItem>\n  );\n};\n"],"names":["HvAppSwitcherAction","id","className","classes","classesProp","application","onClickCallback","isSelectedCallback","cx","useClasses","name","description","disabled","iconElement","iconUrl","url","target","color","theme","colors","secondary_60","getColor","secondary","validIconUrl","setValidIconUrl","useState","renderApplicationIcon","jsx","brokenTitle","split","initials","substring","HvAvatar","isSelected","handleOnClick","useCallback","event","preventDefault","isLink","descriptionElementId","useUniqueId","renderApplication","children","typographyProps","typography","onClick","style","borderColor","HvTypography","HvListItem","root","selected","jsxs","Fragment","icon","TitleWithTooltip","title","HvTooltip","Info","iconInfo"],"mappings":";;;;;;;;;;;;;AAyDO,MAAMA,sBAAsBA,CAAC;AAAA,EAClCC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC,kBAAkBA,MAAM;AAAA,EAAC;AAAA,EACzBC,qBAAqBA,MAAM;AACH,MAAM;AACxB,QAAA;AAAA,IAAEJ;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,cAAAA,WAAWL,WAAW;AAExC,QAAA;AAAA,IAAEM;AAAAA,IAAMC;AAAAA,IAAaC;AAAAA,IAAUC;AAAAA,IAAaC;AAAAA,IAASC;AAAAA,IAAKC;AAAAA,EAC9DX,IAAAA;AAEIY,QAAAA,QAAQL,WACVM,YAAAA,MAAMC,OAAOC,eACbC,qBAAShB,2CAAaY,OAAOC,YAAAA,MAAMC,OAAOG,SAAS;AAEvD,QAAM,CAACC,cAAcC,eAAe,IAAIC,eAAkB,IAAI;AAE9D,QAAMC,wBAAwBA,MAAM;AAClC,QAAIb,aAAa;AACRA,aAAAA;AAAAA,IACT;AAEA,QAAIC,WAAWS,cAAc;AAEzB,aAAAI,2BAAA,IAAC,SACC,WAAWxB,QAAQW,SACnB,KAAKA,SACL,SAAS,MAAM;AACbU,wBAAgB,KAAK;AAAA,MAAA,GAEvB,KAAKb,YACL,CAAA;AAAA,IAEN;AAEMiB,UAAAA,cAAclB,KAAKmB,MAAM,GAAG;AAClC,UAAMC,WACJF,YAAY,CAAC,EAAEG,UAAU,GAAG,CAAC,KAC5BH,YAAY,CAAC,IAAIA,YAAY,CAAC,EAAEG,UAAU,GAAG,CAAC,IAAI;AAGnD,WAAAJ,2BAAA,IAACK,OAAS,UAAA,EAAA,MAAK,MAAK,iBAAiBf,OAAO,SAAQ,UAAS,eAAW,MACrEa,UACH,SAAA,CAAA;AAAA,EAAA;AAIEG,QAAAA,aAAa1B,mBAAmBF,WAAW;AAK3C6B,QAAAA,gBAAgBC,kBACpB,CAACC,UAA4B;AAC3B,QAAIxB,UAAU;AACZwB,YAAMC,eAAe;AACrB;AAAA,IACF;AAEA/B,uDAAkB8B,OAAO;AAAA,MAAE,GAAG/B;AAAAA,MAAa4B;AAAAA,IAAAA;AAAAA,KAE7C,CAAC5B,aAAaO,UAAUqB,YAAY3B,eAAe,CACrD;AAEA,QAAMgC,SAASvB,OAAO;AAChBwB,QAAAA,uBAAuBC,YAAAA,YAAYvC,IAAI,sBAAsB;AAE7DwC,QAAAA,oBAAoBN,kBACxB,CAACO,aAA8B;AAC7B,UAAMC,kBAAkB;AAAA,MACtBzC,WAAWC,QAAQyC;AAAAA,MACnBC,SAASX;AAAAA,MACTY,OAAO;AAAA,QAAEC,aAAa9B;AAAAA,MAAM;AAAA,MAC5B,cAAcP;AAAAA,MACd,GAAIC,eAAe;AAAA,QAAE,oBAAoB4B;AAAAA,MAAqB;AAAA,IAAA;AAGhE,QAAID,QAAQ;AAER,aAAAX,2BAAA,IAACqB,WACC,cAAA,EAAA,WAAU,KACV,MAAMjC,KACN,QAAQC,UAAU,QACd2B,GAAAA,iBAEHD,SACH,CAAA;AAAA,IAEJ;AAEA,0CACGM,WAAa,cAAA,EAAA,WAAU,UAAaL,GAAAA,iBAClCD,SACH,CAAA;AAAA,EAGJ,GAAA,CACEvC,QAAQyC,YACR3B,OACAN,aACA4B,sBACAL,eACAI,QACA5B,MACAM,QACAD,GAAG,CAEP;AAEA,SACGY,2BAAAA,IAAAsB,SAAAA,YAAA,EACC,IACA,aAAW,MACX,UAAU,GACV,UAAUhB,YACV,UACA,WAAWzB,GACTL,QAAQ+C,MACR;AAAA,IAAE,CAAC/C,QAAQS,QAAQ,GAAGA;AAAAA,IAAU,CAACT,QAAQgD,QAAQ,GAAGlB;AAAAA,EAAAA,GACpD/B,SACF,GAICuC,UAAAA,kBAEGW,2BAAAA,KAAAC,WAAAA,UAAA,EAAA,UAAA;AAAA,IAAA1B,+BAAC,OAAI,EAAA,WAAWxB,QAAQmD,MAAO5B,mCAAwB;AAAA,mCAEtD6B,iBAAiB,SAAA,EAAA,OAAO7C,MAAM,WAAWP,QAAQqD,OAAM;AAAA,IAEvD7C,eACEgB,2BAAA,IAAA8B,QAAA,WAAA,EACC,sBAAoB,MACpB,sBAAoB,MACpB,OAAO9B,2BAAA,IAACqB,WAAcrC,cAAAA,EAAAA,UAAAA,YAAY,CAAA,GAElC,UAAAgB,2BAAA,IAAC,SACC,UAACA,2BAAAA,IAAA+B,gBAAAA,MAAA,EACC,WAAWvD,QAAQwD,UACnB,MAAK,OACL,cAAYhD,aACZ,IAAI4B,qBAAqB,CAAA,EAE7B,CAAA,GACF;AAAA,EAAA,EAEJ,CAAA,CACF,EACF,CAAA;AAEJ;;;"}
+{"version":3,"file":"Action.cjs","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport { theme, getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"@core/components/Avatar\";\nimport { HvListItem } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TitleWithTooltip from \"../TitleWithTooltip\";\nimport { useClasses, staticClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = disabled\n    ? theme.colors.secondary_60\n    : getColor(application?.color, theme.colors.secondary);\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback]\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id, \"hvAction-description\");\n\n  const renderApplication = useCallback(\n    (children: React.ReactNode) => {\n      const typographyProps = {\n        className: classes.typography,\n        onClick: handleOnClick,\n        style: { borderColor: color },\n        \"aria-label\": name,\n        ...(description && { \"aria-describedby\": descriptionElementId }),\n      };\n\n      if (isLink) {\n        return (\n          <HvTypography\n            component=\"a\"\n            href={url}\n            target={target || \"_top\"}\n            {...typographyProps}\n          >\n            {children}\n          </HvTypography>\n        );\n      }\n\n      return (\n        <HvTypography component=\"button\" {...typographyProps}>\n          {children}\n        </HvTypography>\n      );\n    },\n    [\n      classes.typography,\n      color,\n      description,\n      descriptionElementId,\n      handleOnClick,\n      isLink,\n      name,\n      target,\n      url,\n    ]\n  );\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className\n      )}\n    >\n      {/* As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n       In substitution is used the aria-label with the \"title\" value */}\n      {renderApplication(\n        <>\n          <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n          <TitleWithTooltip title={name} className={classes.title} />\n\n          {description && (\n            <HvTooltip\n              disableFocusListener\n              disableTouchListener\n              title={<HvTypography>{description}</HvTypography>}\n            >\n              <div>\n                <Info\n                  className={classes.iconInfo}\n                  role=\"img\"\n                  aria-label={description}\n                  id={descriptionElementId}\n                />\n              </div>\n            </HvTooltip>\n          )}\n        </>\n      )}\n    </HvListItem>\n  );\n};\n"],"names":["HvAppSwitcherAction","id","className","classes","classesProp","application","onClickCallback","isSelectedCallback","cx","useClasses","name","description","disabled","iconElement","iconUrl","url","target","color","theme","colors","secondary_60","getColor","secondary","validIconUrl","setValidIconUrl","useState","renderApplicationIcon","jsx","brokenTitle","split","initials","substring","HvAvatar","isSelected","handleOnClick","useCallback","event","preventDefault","isLink","descriptionElementId","useUniqueId","renderApplication","children","typographyProps","typography","onClick","style","borderColor","HvTypography","HvListItem","root","selected","jsxs","Fragment","icon","TitleWithTooltip","title","HvTooltip","Info","iconInfo"],"mappings":"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"}

package/dist/cjs/components/AppSwitcher/AppSwitcher.cjs

@@ -27,7 +27,7 @@ const HvAppSwitcher = (props) => {
     classes,
     cx
   } = AppSwitcher_styles.useClasses(classesProp);
-  const panelActions = React.useMemo(() => applications && (applications == null ? void 0 : applications.map((application) => {
+  const panelActions = React.useMemo(() => applications && applications?.map((application) => {
     if (application.name) {
       return /* @__PURE__ */ jsxRuntime.jsx(Action.HvAppSwitcherAction, { application, onClickCallback: onActionClickedCallback, isSelectedCallback: isActionSelectedCallback, classes: {
         root: classes.item,
@@ -40,7 +40,7 @@ const HvAppSwitcher = (props) => {
       } }, application.id || `${application.name}_${application.url}`);
     }
     return void 0;
-  })), [applications, classes, isActionSelectedCallback, onActionClickedCallback]);
+  }), [applications, classes, isActionSelectedCallback, onActionClickedCallback]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: cx(classes.root, classes[layout], {
     [classes.open]: !!isOpen,
     [classes.closed]: isOpen === false

package/dist/cjs/components/AppSwitcher/AppSwitcher.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppSwitcher.cjs","sources":["../../../../src/components/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { useClasses, staticClasses } from \"./AppSwitcher.styles\";\nimport TitleWithTooltip from \"./TitleWithTooltip\";\n\nexport { staticClasses as appSwitcherClasses };\n\nexport type HvAppSwitcherClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n  /** Number of columns to render. One, two, or whatever fits the component's width. */\n  layout?: \"single\" | \"dual\" | \"fluid\";\n  /** Title to be displayed on the header of the component. */\n  title?: string;\n  /** The list of applications to be used to render the actions on the component. */\n  applications?: HvAppSwitcherActionApplication[];\n  /** Triggered when an action is clicked. */\n  onActionClickedCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isActionSelectedCallback?: (\n    application: HvAppSwitcherActionApplication\n  ) => boolean;\n  /** Element to be added to the header container, if none is provided a label with the title will be added. */\n  header?: React.ReactNode;\n  /** Element to be added to the footer container. */\n  footer?: React.ReactNode;\n  /**\n   * Flag stating if the panel is opened or closed.\n   *\n   * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n   */\n  isOpen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = (props: HvAppSwitcherProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    layout = \"single\",\n    title,\n    applications,\n    onActionClickedCallback = () => {},\n    isActionSelectedCallback = () => false,\n    header,\n    footer,\n    isOpen,\n  } = useDefaultProps(\"HvAppSwitcher\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const panelActions = useMemo(\n    () =>\n      applications &&\n      applications?.map((application) => {\n        if (application.name) {\n          return (\n            <HvAppSwitcherAction\n              key={application.id || `${application.name}_${application.url}`}\n              application={application}\n              onClickCallback={onActionClickedCallback}\n              isSelectedCallback={isActionSelectedCallback}\n              classes={{\n                root: classes.item,\n                selected: classes.itemSelected,\n                disabled: classes.itemDisabled,\n                typography: classes.itemTrigger,\n                icon: classes.itemIcon,\n                title: classes.itemTitle,\n                iconInfo: classes.itemInfoIcon,\n              }}\n            />\n          );\n        }\n\n        return undefined;\n      }),\n    [applications, classes, isActionSelectedCallback, onActionClickedCallback]\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        classes[layout],\n        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n        className\n      )}\n    >\n      {(header && (\n        <HvTypography component=\"div\" variant=\"label\" className={classes.title}>\n          {header}\n        </HvTypography>\n      )) ||\n        (title && <TitleWithTooltip className={classes.title} title={title} />)}\n      <HvListContainer disableGutters className={classes.actionsContainer}>\n        {panelActions}\n      </HvListContainer>\n      {footer && (\n        <HvTypography\n          component=\"div\"\n          variant=\"label\"\n          className={classes.footerContainer}\n        >\n          {footer}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":["HvAppSwitcher","props","id","className","classes","classesProp","layout","title","applications","onActionClickedCallback","isActionSelectedCallback","header","footer","isOpen","useDefaultProps","cx","useClasses","panelActions","useMemo","map","application","name","HvAppSwitcherAction","root","item","selected","itemSelected","disabled","itemDisabled","typography","itemTrigger","icon","itemIcon","itemTitle","iconInfo","itemInfoIcon","url","undefined","jsxs","open","closed","HvTypography","jsx","TitleWithTooltip","HvListContainer","actionsContainer","footerContainer"],"mappings":";;;;;;;;;;AA8CaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,SAAS;AAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,0BAA0BA,MAAM;AAAA,IAAC;AAAA,IACjCC,2BAA2BA,MAAM;AAAA,IACjCC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,gBAAgB,gBAAA,iBAAiBb,KAAK;AACpC,QAAA;AAAA,IAAEG;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWX,WAAW;AAE9C,QAAMY,eAAeC,MAAAA,QACnB,MACEV,iBACAA,6CAAcW,IAAKC,CAAgB,gBAAA;AACjC,QAAIA,YAAYC,MAAM;AACpB,4CACGC,OAEC,qBAAA,EAAA,aACA,iBAAiBb,yBACjB,oBAAoBC,0BACpB,SAAS;AAAA,QACPa,MAAMnB,QAAQoB;AAAAA,QACdC,UAAUrB,QAAQsB;AAAAA,QAClBC,UAAUvB,QAAQwB;AAAAA,QAClBC,YAAYzB,QAAQ0B;AAAAA,QACpBC,MAAM3B,QAAQ4B;AAAAA,QACdzB,OAAOH,QAAQ6B;AAAAA,QACfC,UAAU9B,QAAQ+B;AAAAA,MACpB,EAAA,GAZKf,YAAYlB,MAAO,GAAEkB,YAAYC,IAAK,IAAGD,YAAYgB,GAAI,EAa9D;AAAA,IAEN;AAEOC,WAAAA;AAAAA,EAAAA,KAEX,CAAC7B,cAAcJ,SAASM,0BAA0BD,uBAAuB,CAC3E;AAGE,SAAA6B,gCAAC,SACC,IACA,WAAWvB,GACTX,QAAQmB,MACRnB,QAAQE,MAAM,GACd;AAAA,IAAE,CAACF,QAAQmC,IAAI,GAAG,CAAC,CAAC1B;AAAAA,IAAQ,CAACT,QAAQoC,MAAM,GAAG3B,WAAW;AAAA,EAAA,GACzDV,SACF,GAEEQ,UAAAA;AAAAA,IAAAA,yCACC8B,WAAa,cAAA,EAAA,WAAU,OAAM,SAAQ,SAAQ,WAAWrC,QAAQG,OAC9DI,UAAAA,OACH,CAAA,KAECJ,SAASmC,+BAACC,iBAAAA,WAAiB,WAAWvC,QAAQG,OAAO,OAAiB;AAAA,mCACxEqC,cAAAA,iBAAgB,EAAA,gBAAc,MAAC,WAAWxC,QAAQyC,kBAChD5B,UACH,cAAA;AAAA,IACCL,UACE8B,2BAAAA,IAAAD,WAAAA,cAAA,EACC,WAAU,OACV,SAAQ,SACR,WAAWrC,QAAQ0C,iBAElBlC,UACH,OAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"AppSwitcher.cjs","sources":["../../../../src/components/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { useClasses, staticClasses } from \"./AppSwitcher.styles\";\nimport TitleWithTooltip from \"./TitleWithTooltip\";\n\nexport { staticClasses as appSwitcherClasses };\n\nexport type HvAppSwitcherClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n  /** Number of columns to render. One, two, or whatever fits the component's width. */\n  layout?: \"single\" | \"dual\" | \"fluid\";\n  /** Title to be displayed on the header of the component. */\n  title?: string;\n  /** The list of applications to be used to render the actions on the component. */\n  applications?: HvAppSwitcherActionApplication[];\n  /** Triggered when an action is clicked. */\n  onActionClickedCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isActionSelectedCallback?: (\n    application: HvAppSwitcherActionApplication\n  ) => boolean;\n  /** Element to be added to the header container, if none is provided a label with the title will be added. */\n  header?: React.ReactNode;\n  /** Element to be added to the footer container. */\n  footer?: React.ReactNode;\n  /**\n   * Flag stating if the panel is opened or closed.\n   *\n   * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n   */\n  isOpen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = (props: HvAppSwitcherProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    layout = \"single\",\n    title,\n    applications,\n    onActionClickedCallback = () => {},\n    isActionSelectedCallback = () => false,\n    header,\n    footer,\n    isOpen,\n  } = useDefaultProps(\"HvAppSwitcher\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const panelActions = useMemo(\n    () =>\n      applications &&\n      applications?.map((application) => {\n        if (application.name) {\n          return (\n            <HvAppSwitcherAction\n              key={application.id || `${application.name}_${application.url}`}\n              application={application}\n              onClickCallback={onActionClickedCallback}\n              isSelectedCallback={isActionSelectedCallback}\n              classes={{\n                root: classes.item,\n                selected: classes.itemSelected,\n                disabled: classes.itemDisabled,\n                typography: classes.itemTrigger,\n                icon: classes.itemIcon,\n                title: classes.itemTitle,\n                iconInfo: classes.itemInfoIcon,\n              }}\n            />\n          );\n        }\n\n        return undefined;\n      }),\n    [applications, classes, isActionSelectedCallback, onActionClickedCallback]\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        classes[layout],\n        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n        className\n      )}\n    >\n      {(header && (\n        <HvTypography component=\"div\" variant=\"label\" className={classes.title}>\n          {header}\n        </HvTypography>\n      )) ||\n        (title && <TitleWithTooltip className={classes.title} title={title} />)}\n      <HvListContainer disableGutters className={classes.actionsContainer}>\n        {panelActions}\n      </HvListContainer>\n      {footer && (\n        <HvTypography\n          component=\"div\"\n          variant=\"label\"\n          className={classes.footerContainer}\n        >\n          {footer}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":["HvAppSwitcher","props","id","className","classes","classesProp","layout","title","applications","onActionClickedCallback","isActionSelectedCallback","header","footer","isOpen","useDefaultProps","cx","useClasses","panelActions","useMemo","map","application","name","HvAppSwitcherAction","root","item","selected","itemSelected","disabled","itemDisabled","typography","itemTrigger","icon","itemIcon","itemTitle","iconInfo","itemInfoIcon","url","undefined","jsxs","open","closed","HvTypography","jsx","TitleWithTooltip","HvListContainer","actionsContainer","footerContainer"],"mappings":";;;;;;;;;;AA8CaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,SAAS;AAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,0BAA0BA,MAAM;AAAA,IAAC;AAAA,IACjCC,2BAA2BA,MAAM;AAAA,IACjCC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,gBAAgB,gBAAA,iBAAiBb,KAAK;AACpC,QAAA;AAAA,IAAEG;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,mBAAAA,WAAWX,WAAW;AAE9C,QAAMY,eAAeC,MAAAA,QACnB,MACEV,gBACAA,cAAcW,IAAKC,CAAgB,gBAAA;AACjC,QAAIA,YAAYC,MAAM;AACpB,4CACGC,OAEC,qBAAA,EAAA,aACA,iBAAiBb,yBACjB,oBAAoBC,0BACpB,SAAS;AAAA,QACPa,MAAMnB,QAAQoB;AAAAA,QACdC,UAAUrB,QAAQsB;AAAAA,QAClBC,UAAUvB,QAAQwB;AAAAA,QAClBC,YAAYzB,QAAQ0B;AAAAA,QACpBC,MAAM3B,QAAQ4B;AAAAA,QACdzB,OAAOH,QAAQ6B;AAAAA,QACfC,UAAU9B,QAAQ+B;AAAAA,MACpB,EAAA,GAZKf,YAAYlB,MAAO,GAAEkB,YAAYC,IAAK,IAAGD,YAAYgB,GAAI,EAa9D;AAAA,IAEN;AAEOC,WAAAA;AAAAA,EAAAA,CACR,GACH,CAAC7B,cAAcJ,SAASM,0BAA0BD,uBAAuB,CAC3E;AAGE,SAAA6B,gCAAC,SACC,IACA,WAAWvB,GACTX,QAAQmB,MACRnB,QAAQE,MAAM,GACd;AAAA,IAAE,CAACF,QAAQmC,IAAI,GAAG,CAAC,CAAC1B;AAAAA,IAAQ,CAACT,QAAQoC,MAAM,GAAG3B,WAAW;AAAA,EAAA,GACzDV,SACF,GAEEQ,UAAAA;AAAAA,IAAAA,yCACC8B,WAAa,cAAA,EAAA,WAAU,OAAM,SAAQ,SAAQ,WAAWrC,QAAQG,OAC9DI,UAAAA,OACH,CAAA,KAECJ,SAASmC,+BAACC,iBAAAA,WAAiB,WAAWvC,QAAQG,OAAO,OAAiB;AAAA,mCACxEqC,cAAAA,iBAAgB,EAAA,gBAAc,MAAC,WAAWxC,QAAQyC,kBAChD5B,UACH,cAAA;AAAA,IACCL,UACE8B,2BAAAA,IAAAD,WAAAA,cAAA,EACC,WAAU,OACV,SAAQ,SACR,WAAWrC,QAAQ0C,iBAElBlC,UACH,OAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/components/Avatar/Avatar.cjs

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
-const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const MuiAvatar = require("@mui/material/Avatar");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useImageLoaded = require("../../hooks/useImageLoaded.cjs");
 const sizes = require("../../utils/sizes.cjs");
 const Avatar_styles = require("./Avatar.styles.cjs");

package/dist/cjs/components/Avatar/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes, forwardRef } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useImageLoaded } from \"@core/hooks/useImageLoaded\";\nimport { decreaseSize } from \"@core/utils/sizes\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** The component used for the root node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Sets one of the standard sizes of the icons */\n  size?: HvAvatarSize;\n  /** A color representing the foreground color of the avatar's letters or the generic User icon fallback. */\n  color?: HvColorAny;\n  /** A String representing the background color of the avatar. */\n  backgroundColor?: HvColorAny;\n  /** The `src` attribute for the `img` element. */\n  src?: string;\n  /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */\n  srcSet?: string;\n  /** The `sizes` attribute for the `img` element. */\n  sizes?: string;\n  /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */\n  alt?: string;\n  /**\n   * Attributes applied to the `img` element if the component is used to display an image.\n   * It can be used to listen for the loading error event.\n   */\n  imgProps?: HTMLAttributes<HTMLImageElement>;\n  /** A string representing the type of avatar to display, circular or square. */\n  variant?: HvAvatarVariant;\n  /** A string representing the color of the avatar border that represents its status. */\n  status?: string;\n  /** A string representing the color of the avatar badge. */\n  badge?: string;\n  /** Attributes applied to the avatar element. */\n  avatarProps?: MuiAvatarProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarClasses;\n}\n\n/**\n * Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = forwardRef<any, HvAvatarProps>((props, ref) => {\n  const {\n    className,\n    style,\n    classes: classesProp,\n    children: childrenProp,\n    component = \"div\",\n    size = \"sm\",\n    backgroundColor = \"secondary\",\n    color = \"atmo1\",\n    src,\n    srcSet,\n    sizes,\n    alt,\n    imgProps,\n    status,\n    badge,\n    variant = \"circular\",\n    avatarProps,\n    ...others\n  } = useDefaultProps(\"HvAvatar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  let children: React.ReactNode;\n\n  // Use a hook instead of onError on the img element to support server-side rendering.\n  const imageLoaded = useImageLoaded(src, srcSet);\n  const hasImg = src || srcSet;\n  const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n  if (hasImgNotFailing) {\n    children = (\n      <img\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        className={classes.img}\n        {...imgProps}\n      />\n    );\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  } else if (hasImg && alt) {\n    [children] = alt;\n  } else {\n    children = (\n      <User\n        color={color}\n        iconSize={decreaseSize(size)}\n        className={classes.fallback}\n      />\n    );\n  }\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n  };\n\n  if (component != null && typeof component !== \"string\") {\n    // override border-radius with custom components\n    inlineStyle.borderRadius = \"50%\";\n  }\n\n  if (!hasImgNotFailing) {\n    inlineStyle.backgroundColor = getColor(\n      backgroundColor,\n      theme.colors.secondary\n    );\n    inlineStyle.color = getColor(color, theme.colors.atmo1);\n  }\n\n  const statusInlineStyle: CSSProperties = {};\n  if (status) {\n    // set the status border. we're using the boxShadow property to set the border\n    // to be inside the container and not on its edge.\n    const statusColor = getColor(status, theme.colors.positive);\n    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n  }\n\n  const badgeColor = getColor(badge || \"\", theme.colors.positive);\n\n  return (\n    <div ref={ref} className={classes.container} {...others}>\n      <div\n        className={cx(classes.status, classes[variant], classes[size])}\n        style={statusInlineStyle}\n      >\n        {badge && (\n          <div\n            className={classes.badge}\n            style={{ backgroundColor: badgeColor }}\n          />\n        )}\n        <MuiAvatar\n          component={component}\n          // Consider not using the root and className classes in this component\n          className={cx(classes.root, classes.avatar, classes[size], className)}\n          style={inlineStyle}\n          variant={variant}\n          size={size}\n          {...avatarProps}\n        >\n          {children}\n        </MuiAvatar>\n      </div>\n    </div>\n  );\n});\n"],"names":["HvAvatar","forwardRef","props","ref","className","style","classes","classesProp","children","childrenProp","component","size","backgroundColor","color","src","srcSet","sizes","alt","imgProps","status","badge","variant","avatarProps","others","useDefaultProps","cx","useClasses","imageLoaded","useImageLoaded","hasImg","hasImgNotFailing","jsx","img","User","decreaseSize","fallback","inlineStyle","borderRadius","getColor","theme","colors","secondary","atmo1","statusInlineStyle","statusColor","positive","boxShadow","badgeColor","container","jsxs","MuiAvatar","root","avatar"],"mappings":";;;;;;;;;;;;;AA+DO,MAAMA,WAAWC,MAAAA,WAA+B,CAACC,OAAOC,QAAQ;AAC/D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,UAAUC;AAAAA,IACVC,YAAY;AAAA,IACZC,OAAO;AAAA,IACPC,kBAAkB;AAAA,IAClBC,QAAQ;AAAA,IACRC;AAAAA,IACAC;AAAAA,IAAAA,OACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYtB,KAAK;AAC/B,QAAA;AAAA,IAAEI;AAAAA,IAASmB;AAAAA,EAAAA,IAAOC,cAAAA,WAAWnB,WAAW;AAE1CC,MAAAA;AAGEmB,QAAAA,cAAcC,eAAAA,eAAed,KAAKC,MAAM;AAC9C,QAAMc,SAASf,OAAOC;AAChBe,QAAAA,mBAAmBD,UAAUF,gBAAgB;AAEnD,MAAIG,kBAAkB;AAElB,eAAAC,2BAAAA,IAAC,OACC,EAAA,KACA,KACA,eACAf,SACA,WAAWV,QAAQ0B,KACfd,GAAAA,SAEP,CAAA;AAAA,EAAA,WACQT,gBAAgB,MAAM;AACpBA,eAAAA;AAAAA,EAAAA,WACFoB,UAAUZ,KAAK;AACxB,KAACT,QAAQ,IAAIS;AAAAA,EAAAA,OACR;AAEH,eAAAc,2BAAA,IAACE,wBACC,OACA,UAAUC,mBAAavB,IAAI,GAC3B,WAAWL,QAAQ6B,SAEtB,CAAA;AAAA,EACH;AAEA,QAAMC,cAA6B;AAAA,IACjC,GAAG/B;AAAAA,EAAAA;AAGL,MAAIK,aAAa,QAAQ,OAAOA,cAAc,UAAU;AAEtD0B,gBAAYC,eAAe;AAAA,EAC7B;AAEA,MAAI,CAACP,kBAAkB;AACrBM,gBAAYxB,kBAAkB0B,qBAC5B1B,iBACA2B,YAAAA,MAAMC,OAAOC,SACf;AACAL,gBAAYvB,QAAQyB,qBAASzB,OAAO0B,YAAAA,MAAMC,OAAOE,KAAK;AAAA,EACxD;AAEA,QAAMC,oBAAmC,CAAA;AACzC,MAAIxB,QAAQ;AAGV,UAAMyB,cAAcN,YAAAA,SAASnB,QAAQoB,YAAAA,MAAMC,OAAOK,QAAQ;AACxCC,sBAAAA,YAAa,yBAAwBF,WAAY;AAAA,EACrE;AAEA,QAAMG,aAAaT,YAAAA,SAASlB,SAAS,IAAImB,kBAAMC,OAAOK,QAAQ;AAG5D,SAAAd,+BAAC,SAAI,KAAU,WAAWzB,QAAQ0C,WAAW,GAAIzB,QAC/C,UAAA0B,2BAAAA,KAAC,OACC,EAAA,WAAWxB,GAAGnB,QAAQa,QAAQb,QAAQe,OAAO,GAAGf,QAAQK,IAAI,CAAC,GAC7D,OAAOgC,mBAENvB,UAAAA;AAAAA,IAAAA,SACEW,2BAAA,IAAA,OAAA,EACC,WAAWzB,QAAQc,OACnB,OAAO;AAAA,MAAER,iBAAiBmC;AAAAA,IAAAA,GAE7B;AAAA,IACDhB,2BAAA;AAAA,MAACmB,mBAAA;AAAA,MAAA;AAAA,QACC;AAAA,QAEA,WAAWzB,GAAGnB,QAAQ6C,MAAM7C,QAAQ8C,QAAQ9C,QAAQK,IAAI,GAAGP,SAAS;AAAA,QACpE,OAAOgC;AAAAA,QACP;AAAA,QACA;AAAA,QACA,GAAId;AAAAA,QAEHd;AAAAA,MAAAA;AAAAA,IACH;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;;;"}
+{"version":3,"file":"Avatar.cjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes, forwardRef } from \"react\";\n\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useImageLoaded } from \"@core/hooks/useImageLoaded\";\nimport { decreaseSize } from \"@core/utils/sizes\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** The component used for the root node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Sets one of the standard sizes of the icons */\n  size?: HvAvatarSize;\n  /** A color representing the foreground color of the avatar's letters or the generic User icon fallback. */\n  color?: HvColorAny;\n  /** A String representing the background color of the avatar. */\n  backgroundColor?: HvColorAny;\n  /** The `src` attribute for the `img` element. */\n  src?: string;\n  /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */\n  srcSet?: string;\n  /** The `sizes` attribute for the `img` element. */\n  sizes?: string;\n  /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */\n  alt?: string;\n  /**\n   * Attributes applied to the `img` element if the component is used to display an image.\n   * It can be used to listen for the loading error event.\n   */\n  imgProps?: HTMLAttributes<HTMLImageElement>;\n  /** A string representing the type of avatar to display, circular or square. */\n  variant?: HvAvatarVariant;\n  /** A string representing the color of the avatar border that represents its status. */\n  status?: string;\n  /** A string representing the color of the avatar badge. */\n  badge?: string;\n  /** Attributes applied to the avatar element. */\n  avatarProps?: MuiAvatarProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarClasses;\n}\n\n/**\n * Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = forwardRef<any, HvAvatarProps>((props, ref) => {\n  const {\n    className,\n    style,\n    classes: classesProp,\n    children: childrenProp,\n    component = \"div\",\n    size = \"sm\",\n    backgroundColor = \"secondary\",\n    color = \"atmo1\",\n    src,\n    srcSet,\n    sizes,\n    alt,\n    imgProps,\n    status,\n    badge,\n    variant = \"circular\",\n    avatarProps,\n    ...others\n  } = useDefaultProps(\"HvAvatar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  let children: React.ReactNode;\n\n  // Use a hook instead of onError on the img element to support server-side rendering.\n  const imageLoaded = useImageLoaded(src, srcSet);\n  const hasImg = src || srcSet;\n  const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n  if (hasImgNotFailing) {\n    children = (\n      <img\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        className={classes.img}\n        {...imgProps}\n      />\n    );\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  } else if (hasImg && alt) {\n    [children] = alt;\n  } else {\n    children = (\n      <User\n        color={color}\n        iconSize={decreaseSize(size)}\n        className={classes.fallback}\n      />\n    );\n  }\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n  };\n\n  if (component != null && typeof component !== \"string\") {\n    // override border-radius with custom components\n    inlineStyle.borderRadius = \"50%\";\n  }\n\n  if (!hasImgNotFailing) {\n    inlineStyle.backgroundColor = getColor(\n      backgroundColor,\n      theme.colors.secondary\n    );\n    inlineStyle.color = getColor(color, theme.colors.atmo1);\n  }\n\n  const statusInlineStyle: CSSProperties = {};\n  if (status) {\n    // set the status border. we're using the boxShadow property to set the border\n    // to be inside the container and not on its edge.\n    const statusColor = getColor(status, theme.colors.positive);\n    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n  }\n\n  const badgeColor = getColor(badge || \"\", theme.colors.positive);\n\n  return (\n    <div ref={ref} className={classes.container} {...others}>\n      <div\n        className={cx(classes.status, classes[variant], classes[size])}\n        style={statusInlineStyle}\n      >\n        {badge && (\n          <div\n            className={classes.badge}\n            style={{ backgroundColor: badgeColor }}\n          />\n        )}\n        <MuiAvatar\n          component={component}\n          // Consider not using the root and className classes in this component\n          className={cx(classes.root, classes.avatar, classes[size], className)}\n          style={inlineStyle}\n          variant={variant}\n          size={size}\n          {...avatarProps}\n        >\n          {children}\n        </MuiAvatar>\n      </div>\n    </div>\n  );\n});\n"],"names":["HvAvatar","forwardRef","props","ref","className","style","classes","classesProp","children","childrenProp","component","size","backgroundColor","color","src","srcSet","sizes","alt","imgProps","status","badge","variant","avatarProps","others","useDefaultProps","cx","useClasses","imageLoaded","useImageLoaded","hasImg","hasImgNotFailing","jsx","img","User","decreaseSize","fallback","inlineStyle","borderRadius","getColor","theme","colors","secondary","atmo1","statusInlineStyle","statusColor","positive","boxShadow","badgeColor","container","jsxs","MuiAvatar","root","avatar"],"mappings":";;;;;;;;;;;;;AAgEO,MAAMA,WAAWC,MAAAA,WAA+B,CAACC,OAAOC,QAAQ;AAC/D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,UAAUC;AAAAA,IACVC,YAAY;AAAA,IACZC,OAAO;AAAA,IACPC,kBAAkB;AAAA,IAClBC,QAAQ;AAAA,IACRC;AAAAA,IACAC;AAAAA,IAAAA,OACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYtB,KAAK;AAC/B,QAAA;AAAA,IAAEI;AAAAA,IAASmB;AAAAA,EAAAA,IAAOC,cAAAA,WAAWnB,WAAW;AAE1CC,MAAAA;AAGEmB,QAAAA,cAAcC,eAAAA,eAAed,KAAKC,MAAM;AAC9C,QAAMc,SAASf,OAAOC;AAChBe,QAAAA,mBAAmBD,UAAUF,gBAAgB;AAEnD,MAAIG,kBAAkB;AAElB,eAAAC,2BAAAA,IAAC,OACC,EAAA,KACA,KACA,eACAf,SACA,WAAWV,QAAQ0B,KACfd,GAAAA,SAEP,CAAA;AAAA,EAAA,WACQT,gBAAgB,MAAM;AACpBA,eAAAA;AAAAA,EAAAA,WACFoB,UAAUZ,KAAK;AACxB,KAACT,QAAQ,IAAIS;AAAAA,EAAAA,OACR;AAEH,eAAAc,2BAAA,IAACE,wBACC,OACA,UAAUC,mBAAavB,IAAI,GAC3B,WAAWL,QAAQ6B,SAEtB,CAAA;AAAA,EACH;AAEA,QAAMC,cAA6B;AAAA,IACjC,GAAG/B;AAAAA,EAAAA;AAGL,MAAIK,aAAa,QAAQ,OAAOA,cAAc,UAAU;AAEtD0B,gBAAYC,eAAe;AAAA,EAC7B;AAEA,MAAI,CAACP,kBAAkB;AACrBM,gBAAYxB,kBAAkB0B,qBAC5B1B,iBACA2B,YAAAA,MAAMC,OAAOC,SACf;AACAL,gBAAYvB,QAAQyB,qBAASzB,OAAO0B,YAAAA,MAAMC,OAAOE,KAAK;AAAA,EACxD;AAEA,QAAMC,oBAAmC,CAAA;AACzC,MAAIxB,QAAQ;AAGV,UAAMyB,cAAcN,YAAAA,SAASnB,QAAQoB,YAAAA,MAAMC,OAAOK,QAAQ;AACxCC,sBAAAA,YAAa,yBAAwBF,WAAY;AAAA,EACrE;AAEA,QAAMG,aAAaT,YAAAA,SAASlB,SAAS,IAAImB,kBAAMC,OAAOK,QAAQ;AAG5D,SAAAd,+BAAC,SAAI,KAAU,WAAWzB,QAAQ0C,WAAW,GAAIzB,QAC/C,UAAA0B,2BAAAA,KAAC,OACC,EAAA,WAAWxB,GAAGnB,QAAQa,QAAQb,QAAQe,OAAO,GAAGf,QAAQK,IAAI,CAAC,GAC7D,OAAOgC,mBAENvB,UAAAA;AAAAA,IAAAA,SACEW,2BAAA,IAAA,OAAA,EACC,WAAWzB,QAAQc,OACnB,OAAO;AAAA,MAAER,iBAAiBmC;AAAAA,IAAAA,GAE7B;AAAA,IACDhB,2BAAA;AAAA,MAACmB,mBAAA;AAAA,MAAA;AAAA,QACC;AAAA,QAEA,WAAWzB,GAAGnB,QAAQ6C,MAAM7C,QAAQ8C,QAAQ9C,QAAQK,IAAI,GAAGP,SAAS;AAAA,QACpE,OAAOgC;AAAAA,QACP;AAAA,QACA;AAAA,QACA,GAAId;AAAAA,QAEHd;AAAAA,MAAAA;AAAAA,IACH;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;;;"}

package/dist/cjs/components/Banner/BannerContent/BannerContent.cjs

@@ -34,7 +34,7 @@ const HvBannerContent = React.forwardRef((props, ref) => {
     root: classes.root,
     message: classes.message,
     action: classes.action
-  }, className: cx(classes == null ? void 0 : classes.baseVariant, classes == null ? void 0 : classes[variant]), message: /* @__PURE__ */ jsxRuntime.jsx(MessageContainer.HvMessageContainer, { id, icon, ...effectiveActionsPosition === "inline" && {
+  }, className: cx(classes?.baseVariant, classes?.[variant]), message: /* @__PURE__ */ jsxRuntime.jsx(MessageContainer.HvMessageContainer, { id, icon, ...effectiveActionsPosition === "inline" && {
     actionsOnMessage: actions,
     actionsOnMessageCallback: actionsCallback
   }, message: content }), action: /* @__PURE__ */ jsxRuntime.jsx(ActionContainer.HvActionContainer, { id, onClose, ...effectiveActionsPosition === "bottom-right" && {

package/dist/cjs/components/Banner/BannerContent/BannerContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContent.cjs","sources":["../../../../../src/components/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { iconVariant } from \"@core/utils/iconVariant\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvActionGeneric } from \"@core/components/ActionsGeneric\";\n\nimport { HvBannerActionPosition, HvBannerVariant } from \"../types\";\nimport { HvActionContainer, HvActionContainerProps } from \"./ActionContainer\";\nimport { HvMessageContainer } from \"./MessageContainer\";\nimport { useClasses, staticClasses } from \"./BannerContent.styles\";\n\nexport { staticClasses as bannerContentClasses };\n\nexport type HvBannerContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\">,\n    HvBaseProps {\n  /** The message to display. */\n  content?: string;\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** onClose function. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display on the right side. */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** The props to pass down to the Action Container. */\n  actionProps?: HvActionContainerProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      showIcon = false,\n      customIcon,\n      variant = \"default\",\n      onClose,\n      actions,\n      actionsCallback,\n      actionsPosition = \"auto\",\n      content,\n      actionProps,\n      ...others\n    } = props;\n    const { classes, cx } = useClasses(classesProp);\n    const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n\n    // default to inline\n    // this might try to be more intelligent in the future,\n    // taking into account the content length, available space,\n    // number of actions, etc..\n    const effectiveActionsPosition =\n      actionsPosition === \"auto\" ? \"inline\" : actionsPosition;\n\n    return (\n      <div className={classes.outContainer}>\n        <SnackbarContent\n          ref={ref}\n          id={id}\n          classes={{\n            root: classes.root,\n            message: classes.message,\n            action: classes.action,\n          }}\n          className={cx(classes?.baseVariant, classes?.[variant])}\n          message={\n            <HvMessageContainer\n              id={id}\n              icon={icon}\n              {...(effectiveActionsPosition === \"inline\" && {\n                actionsOnMessage: actions,\n                actionsOnMessageCallback: actionsCallback,\n              })}\n              message={content}\n            />\n          }\n          action={\n            <HvActionContainer\n              id={id}\n              onClose={onClose}\n              {...(effectiveActionsPosition === \"bottom-right\" && {\n                action: actions,\n                actionCallback: actionsCallback,\n              })}\n              {...actionProps}\n            />\n          }\n          {...others}\n        />\n      </div>\n    );\n  }\n);\n"],"names":["HvBannerContent","forwardRef","props","ref","id","classes","classesProp","showIcon","customIcon","variant","onClose","actions","actionsCallback","actionsPosition","content","actionProps","others","cx","useClasses","icon","iconVariant","effectiveActionsPosition","jsx","outContainer","SnackbarContent","root","message","action","baseVariant","HvMessageContainer","actionsOnMessage","actionsOnMessageCallback","HvActionContainer","actionCallback"],"mappings":";;;;;;;;;;;AAiDO,MAAMA,kBAAkBC,MAAAA,WAC7B,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC,WAAW;AAAA,IACXC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,kBAAkB;AAAA,IAClBC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EACDd,IAAAA;AACE,QAAA;AAAA,IAAEG;AAAAA,IAASY;AAAAA,EAAAA,IAAOC,qBAAAA,WAAWZ,WAAW;AAC9C,QAAMa,OAAOX,cAAeD,YAAYa,YAAAA,YAAYX,SAAS,WAAW;AAMlEY,QAAAA,2BACJR,oBAAoB,SAAS,WAAWA;AAGxC,SAAAS,2BAAA,IAAC,SAAI,WAAWjB,QAAQkB,cACtB,UAACD,2BAAAA,IAAAE,yBAAAA,SAAA,EACC,KACA,IACA,SAAS;AAAA,IACPC,MAAMpB,QAAQoB;AAAAA,IACdC,SAASrB,QAAQqB;AAAAA,IACjBC,QAAQtB,QAAQsB;AAAAA,EAAAA,GAElB,WAAWV,GAAGZ,mCAASuB,aAAavB,mCAAUI,QAAQ,GACtD,wCACGoB,iBACC,oBAAA,EAAA,IACA,SACKR,6BAA6B,YAAY;AAAA,IAC5CS,kBAAkBnB;AAAAA,IAClBoB,0BAA0BnB;AAAAA,EAC5B,GACA,SAASE,SACT,GAEJ,QACGQ,2BAAA,IAAAU,mCAAA,EACC,IACA,SACA,GAAKX,6BAA6B,kBAAkB;AAAA,IAClDM,QAAQhB;AAAAA,IACRsB,gBAAgBrB;AAAAA,EAAAA,GAElB,GAAIG,YAAAA,IAGJC,GAAAA,OAAO,CAAA,EAEf,CAAA;AAEJ,CACF;;;"}
+{"version":3,"file":"BannerContent.cjs","sources":["../../../../../src/components/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { iconVariant } from \"@core/utils/iconVariant\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvActionGeneric } from \"@core/components/ActionsGeneric\";\n\nimport { HvBannerActionPosition, HvBannerVariant } from \"../types\";\nimport { HvActionContainer, HvActionContainerProps } from \"./ActionContainer\";\nimport { HvMessageContainer } from \"./MessageContainer\";\nimport { useClasses, staticClasses } from \"./BannerContent.styles\";\n\nexport { staticClasses as bannerContentClasses };\n\nexport type HvBannerContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\">,\n    HvBaseProps {\n  /** The message to display. */\n  content?: string;\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** onClose function. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display on the right side. */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** The props to pass down to the Action Container. */\n  actionProps?: HvActionContainerProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      showIcon = false,\n      customIcon,\n      variant = \"default\",\n      onClose,\n      actions,\n      actionsCallback,\n      actionsPosition = \"auto\",\n      content,\n      actionProps,\n      ...others\n    } = props;\n    const { classes, cx } = useClasses(classesProp);\n    const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n\n    // default to inline\n    // this might try to be more intelligent in the future,\n    // taking into account the content length, available space,\n    // number of actions, etc..\n    const effectiveActionsPosition =\n      actionsPosition === \"auto\" ? \"inline\" : actionsPosition;\n\n    return (\n      <div className={classes.outContainer}>\n        <SnackbarContent\n          ref={ref}\n          id={id}\n          classes={{\n            root: classes.root,\n            message: classes.message,\n            action: classes.action,\n          }}\n          className={cx(classes?.baseVariant, classes?.[variant])}\n          message={\n            <HvMessageContainer\n              id={id}\n              icon={icon}\n              {...(effectiveActionsPosition === \"inline\" && {\n                actionsOnMessage: actions,\n                actionsOnMessageCallback: actionsCallback,\n              })}\n              message={content}\n            />\n          }\n          action={\n            <HvActionContainer\n              id={id}\n              onClose={onClose}\n              {...(effectiveActionsPosition === \"bottom-right\" && {\n                action: actions,\n                actionCallback: actionsCallback,\n              })}\n              {...actionProps}\n            />\n          }\n          {...others}\n        />\n      </div>\n    );\n  }\n);\n"],"names":["HvBannerContent","forwardRef","props","ref","id","classes","classesProp","showIcon","customIcon","variant","onClose","actions","actionsCallback","actionsPosition","content","actionProps","others","cx","useClasses","icon","iconVariant","effectiveActionsPosition","jsx","outContainer","SnackbarContent","root","message","action","baseVariant","HvMessageContainer","actionsOnMessage","actionsOnMessageCallback","HvActionContainer","actionCallback"],"mappings":";;;;;;;;;;;AAiDO,MAAMA,kBAAkBC,MAAAA,WAC7B,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC,WAAW;AAAA,IACXC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,kBAAkB;AAAA,IAClBC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EACDd,IAAAA;AACE,QAAA;AAAA,IAAEG;AAAAA,IAASY;AAAAA,EAAAA,IAAOC,qBAAAA,WAAWZ,WAAW;AAC9C,QAAMa,OAAOX,cAAeD,YAAYa,YAAAA,YAAYX,SAAS,WAAW;AAMlEY,QAAAA,2BACJR,oBAAoB,SAAS,WAAWA;AAGxC,SAAAS,2BAAA,IAAC,SAAI,WAAWjB,QAAQkB,cACtB,UAACD,2BAAAA,IAAAE,yBAAAA,SAAA,EACC,KACA,IACA,SAAS;AAAA,IACPC,MAAMpB,QAAQoB;AAAAA,IACdC,SAASrB,QAAQqB;AAAAA,IACjBC,QAAQtB,QAAQsB;AAAAA,EAAAA,GAElB,WAAWV,GAAGZ,SAASuB,aAAavB,UAAUI,OAAO,CAAC,GACtD,wCACGoB,iBACC,oBAAA,EAAA,IACA,SACKR,6BAA6B,YAAY;AAAA,IAC5CS,kBAAkBnB;AAAAA,IAClBoB,0BAA0BnB;AAAAA,EAC5B,GACA,SAASE,SACT,GAEJ,QACGQ,2BAAA,IAAAU,mCAAA,EACC,IACA,SACA,GAAKX,6BAA6B,kBAAkB;AAAA,IAClDM,QAAQhB;AAAAA,IACRsB,gBAAgBrB;AAAAA,EAAAA,GAElB,GAAIG,YAAAA,IAGJC,GAAAA,OAAO,CAAA,EAEf,CAAA;AAEJ,CACF;;;"}

package/dist/cjs/components/BaseCheckBox/BaseCheckBox.cjs

@@ -54,15 +54,15 @@ const HvBaseCheckBox = React.forwardRef((props, ref) => {
     if (readOnly) {
       return;
     }
-    onChange == null ? void 0 : onChange(event, event.target.checked, value);
+    onChange?.(event, event.target.checked, value);
   }, [onChange, readOnly, value]);
   const onBlurCallback = React.useCallback((event) => {
     setFocusVisible(false);
-    onBlur == null ? void 0 : onBlur(event);
+    onBlur?.(event);
   }, [onBlur]);
   const onFocusVisibleCallback = React.useCallback((event) => {
     setFocusVisible(true);
-    onFocusVisible == null ? void 0 : onFocusVisible(event);
+    onFocusVisible?.(event);
   }, [onFocusVisible]);
   return /* @__PURE__ */ jsxRuntime.jsx(MuiCheckbox__default.default, { ref, id, name, value, className: cx(classes.root, {
     [classes.disabled]: disabled,

package/dist/cjs/components/BaseCheckBox/BaseCheckBox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.cjs","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\n\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport {\n  CheckboxCheck as CheckboxCheckIcon,\n  CheckboxPartial as CheckboxPartialIcon,\n  Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = (\n  options: {\n    disabled: boolean;\n    semantic: boolean;\n  },\n  classes: HvBaseCheckBoxClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  // Default colors: [\"atmo1\",\"secondary\"]\n  return {\n    checkbox: <CheckboxIcon color={color} className={classes.icon} />,\n    checkboxPartial: (\n      <CheckboxPartialIcon color={color} className={classes.icon} />\n    ),\n    checkboxChecked: (\n      <CheckboxCheckIcon color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = forwardRef<\n  HTMLButtonElement,\n  HvBaseCheckBoxProps\n>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    name,\n    inputProps,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    checked,\n    indeterminate,\n    defaultChecked,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    ...others\n  } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible]\n  );\n\n  return (\n    <MuiCheckbox\n      ref={ref}\n      id={id}\n      name={name}\n      value={value}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },\n        className\n      )}\n      icon={icons.checkbox}\n      indeterminateIcon={icons.checkboxPartial}\n      checkedIcon={icons.checkboxChecked}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      disableRipple\n      {...others}\n    />\n  );\n});\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","checkbox","jsx","CheckboxIcon","icon","checkboxPartial","CheckboxPartialIcon","checkboxChecked","CheckboxCheckIcon","HvBaseCheckBox","forwardRef","props","ref","id","classesProp","className","name","inputProps","onChange","onFocusVisible","onBlur","checked","indeterminate","defaultChecked","value","required","readOnly","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","icons","onChangeCallback","useCallback","event","target","onBlurCallback","onFocusVisibleCallback","MuiCheckbox","root"],"mappings":";;;;;;;;;;AA+FA,MAAMA,mBAAmBA,CACvBC,SAIAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,cAAc,WAAW,KACvCE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,aAAa,YAAY,KACvCE;AAGK,SAAA;AAAA,IACLE,UAAWC,2BAAA,IAAAC,0BAAA,EAAa,OAAc,WAAWR,QAAQS,MAAQ;AAAA,IACjEC,iBACGH,2BAAA,IAAAI,iCAAA,EAAoB,OAAc,WAAWX,QAAQS,MACvD;AAAA,IACDG,iBACGL,2BAAAA,IAAAM,gBAAAA,eAAA,EAAkB,OAAOR,cAAc,WAAWL,QAAQS,MAAK;AAAA,EAAA;AAGtE;AAQO,MAAMK,iBAAiBC,MAAAA,WAG5B,CAACC,OAAOC,QAAQ;AACV,QAAA;AAAA,IACJC;AAAAA,IACAlB,SAASmB;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACX9B,WAAW;AAAA,IACXC,WAAW;AAAA,IACX,GAAG8B;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,kBAAkBjB,KAAK;AAErC,QAAA;AAAA,IAAEhB;AAAAA,IAASkC;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWhB,WAAW;AAE9C,QAAM,CAACiB,cAAcC,eAAe,IAAIC,eAAkB,KAAK;AAE/D,QAAMC,QAAQzC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDwC,QAAAA,mBAAmBC,kBACvB,CAACC,UAA+C;AAC9C,QAAIX,UAAU;AACZ;AAAA,IACF;AAEAR,yCAAWmB,OAAOA,MAAMC,OAAOjB,SAASG;AAAAA,EAE1C,GAAA,CAACN,UAAUQ,UAAUF,KAAK,CAC5B;AAEMe,QAAAA,iBAAiBH,kBACrB,CAACC,UAA+C;AAC9CL,oBAAgB,KAAK;AACrBZ,qCAASiB;AAAAA,EAAK,GAEhB,CAACjB,MAAM,CACT;AAEMoB,QAAAA,yBAAyBJ,kBAC7B,CAACC,UAAiC;AAChCL,oBAAgB,IAAI;AACpBb,qDAAiBkB;AAAAA,EAAK,GAExB,CAAClB,cAAc,CACjB;AAGE,SAAAjB,+BAACuC,qBAAAA,WACC,KACA,IACA,MACA,OACA,WAAWZ,GACTlC,QAAQ+C,MACR;AAAA,IAAE,CAAC/C,QAAQC,QAAQ,GAAGA;AAAAA,IAAU,CAACD,QAAQoC,YAAY,GAAGA;AAAAA,EAAAA,GACxDhB,SACF,GACA,MAAMmB,MAAMjC,UACZ,mBAAmBiC,MAAM7B,iBACzB,aAAa6B,MAAM3B,iBACnB,UACA,UACA,UACA,SACA,gBACA,eACA,YACA,UAAU4B,kBACV,gBAAgBK,wBAChB,QAAQD,gBACR,OAAM,WACN,eAAa,MACb,GAAIZ,OACJ,CAAA;AAEN,CAAC;;;"}
+{"version":3,"file":"BaseCheckBox.cjs","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\n\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport {\n  CheckboxCheck as CheckboxCheckIcon,\n  CheckboxPartial as CheckboxPartialIcon,\n  Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = (\n  options: {\n    disabled: boolean;\n    semantic: boolean;\n  },\n  classes: HvBaseCheckBoxClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  // Default colors: [\"atmo1\",\"secondary\"]\n  return {\n    checkbox: <CheckboxIcon color={color} className={classes.icon} />,\n    checkboxPartial: (\n      <CheckboxPartialIcon color={color} className={classes.icon} />\n    ),\n    checkboxChecked: (\n      <CheckboxCheckIcon color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = forwardRef<\n  HTMLButtonElement,\n  HvBaseCheckBoxProps\n>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    name,\n    inputProps,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    checked,\n    indeterminate,\n    defaultChecked,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    ...others\n  } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible]\n  );\n\n  return (\n    <MuiCheckbox\n      ref={ref}\n      id={id}\n      name={name}\n      value={value}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },\n        className\n      )}\n      icon={icons.checkbox}\n      indeterminateIcon={icons.checkboxPartial}\n      checkedIcon={icons.checkboxChecked}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      disableRipple\n      {...others}\n    />\n  );\n});\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","checkbox","jsx","CheckboxIcon","icon","checkboxPartial","CheckboxPartialIcon","checkboxChecked","CheckboxCheckIcon","HvBaseCheckBox","forwardRef","props","ref","id","classesProp","className","name","inputProps","onChange","onFocusVisible","onBlur","checked","indeterminate","defaultChecked","value","required","readOnly","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","icons","onChangeCallback","useCallback","event","target","onBlurCallback","onFocusVisibleCallback","MuiCheckbox","root"],"mappings":";;;;;;;;;;AA+FA,MAAMA,mBAAmBA,CACvBC,SAIAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,cAAc,WAAW,KACvCE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,aAAa,YAAY,KACvCE;AAGK,SAAA;AAAA,IACLE,UAAWC,2BAAA,IAAAC,0BAAA,EAAa,OAAc,WAAWR,QAAQS,MAAQ;AAAA,IACjEC,iBACGH,2BAAA,IAAAI,iCAAA,EAAoB,OAAc,WAAWX,QAAQS,MACvD;AAAA,IACDG,iBACGL,2BAAAA,IAAAM,gBAAAA,eAAA,EAAkB,OAAOR,cAAc,WAAWL,QAAQS,MAAK;AAAA,EAAA;AAGtE;AAQO,MAAMK,iBAAiBC,MAAAA,WAG5B,CAACC,OAAOC,QAAQ;AACV,QAAA;AAAA,IACJC;AAAAA,IACAlB,SAASmB;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACX9B,WAAW;AAAA,IACXC,WAAW;AAAA,IACX,GAAG8B;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,kBAAkBjB,KAAK;AAErC,QAAA;AAAA,IAAEhB;AAAAA,IAASkC;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWhB,WAAW;AAE9C,QAAM,CAACiB,cAAcC,eAAe,IAAIC,eAAkB,KAAK;AAE/D,QAAMC,QAAQzC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDwC,QAAAA,mBAAmBC,kBACvB,CAACC,UAA+C;AAC9C,QAAIX,UAAU;AACZ;AAAA,IACF;AAEAR,eAAWmB,OAAOA,MAAMC,OAAOjB,SAASG,KAAK;AAAA,EAE/C,GAAA,CAACN,UAAUQ,UAAUF,KAAK,CAC5B;AAEMe,QAAAA,iBAAiBH,kBACrB,CAACC,UAA+C;AAC9CL,oBAAgB,KAAK;AACrBZ,aAASiB,KAAK;AAAA,EAAA,GAEhB,CAACjB,MAAM,CACT;AAEMoB,QAAAA,yBAAyBJ,kBAC7B,CAACC,UAAiC;AAChCL,oBAAgB,IAAI;AACpBb,qBAAiBkB,KAAK;AAAA,EAAA,GAExB,CAAClB,cAAc,CACjB;AAGE,SAAAjB,+BAACuC,qBAAAA,WACC,KACA,IACA,MACA,OACA,WAAWZ,GACTlC,QAAQ+C,MACR;AAAA,IAAE,CAAC/C,QAAQC,QAAQ,GAAGA;AAAAA,IAAU,CAACD,QAAQoC,YAAY,GAAGA;AAAAA,EAAAA,GACxDhB,SACF,GACA,MAAMmB,MAAMjC,UACZ,mBAAmBiC,MAAM7B,iBACzB,aAAa6B,MAAM3B,iBACnB,UACA,UACA,UACA,SACA,gBACA,eACA,YACA,UAAU4B,kBACV,gBAAgBK,wBAChB,QAAQD,gBACR,OAAM,WACN,eAAa,MACb,GAAIZ,OACJ,CAAA;AAEN,CAAC;;;"}

package/dist/cjs/components/BaseDropdown/BaseDropdown.cjs

@@ -21,7 +21,6 @@ const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
 const HvBaseDropdown = React.forwardRef((props, ref) => {
-  var _a;
   const {
     id: idProp,
     className,
@@ -61,7 +60,7 @@ const HvBaseDropdown = React.forwardRef((props, ref) => {
   const [referenceElement, setReferenceElement] = React.useState(null);
   const [popperElement, setPopperElement] = React.useState(null);
   const [popperMaxSize, setPopperMaxSize] = React.useState({});
-  const handleDropdownHeaderRefProp = useForkRef.useForkRef(dropdownHeaderRefProp, dropdownHeaderProps == null ? void 0 : dropdownHeaderProps.ref);
+  const handleDropdownHeaderRefProp = useForkRef.useForkRef(dropdownHeaderRefProp, dropdownHeaderProps?.ref);
   const handleDropdownHeaderRef = useForkRef.useForkRef(setReferenceElement, handleDropdownHeaderRefProp);
   const ariaRole = role || (component == null ? "combobox" : void 0);
   const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
@@ -79,13 +78,13 @@ const HvBaseDropdown = React.forwardRef((props, ref) => {
     "aria-labelledby": ariaLabelledByProp
   };
   const placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
-  const extensionWidth = referenceElement ? referenceElement == null ? void 0 : referenceElement.offsetWidth : "inherit";
+  const extensionWidth = referenceElement ? referenceElement?.offsetWidth : "inherit";
   const {
     modifiers: popperPropsModifiers = [],
     ...otherPopperProps
   } = popperProps;
   const onFirstUpdate = React.useCallback(() => {
-    onContainerCreation == null ? void 0 : onContainerCreation(popperElement);
+    onContainerCreation?.(popperElement);
   }, [onContainerCreation, popperElement]);
   const widthCalculator = React.useCallback(({
     state
@@ -104,7 +103,7 @@ const HvBaseDropdown = React.forwardRef((props, ref) => {
       width,
       height
     } = state.modifiersData.maxSize;
-    if (width !== (popperMaxSize == null ? void 0 : popperMaxSize.width) || height !== (popperMaxSize == null ? void 0 : popperMaxSize.height)) {
+    if (width !== popperMaxSize?.width || height !== popperMaxSize?.height) {
       setPopperMaxSize({
         width,
         height
@@ -121,10 +120,9 @@ const HvBaseDropdown = React.forwardRef((props, ref) => {
     name,
     options
   }) => {
-    var _a2, _b;
     const overflow = core.detectOverflow(state, options);
-    const x = ((_a2 = state.modifiersData.preventOverflow) == null ? void 0 : _a2.x) || 0;
-    const y = ((_b = state.modifiersData.preventOverflow) == null ? void 0 : _b.y) || 0;
+    const x = state.modifiersData.preventOverflow?.x || 0;
+    const y = state.modifiersData.preventOverflow?.y || 0;
     const popperWidth = state.rects.popper.width;
     const popperHeight = state.rects.popper.height;
     const basePlacement = state.placement.split("-")[0];
@@ -164,25 +162,25 @@ const HvBaseDropdown = React.forwardRef((props, ref) => {
     onFirstUpdate,
     ...otherPopperProps
   });
-  const popperPlacement = ((_a = attributes.popper) == null ? void 0 : _a["data-popper-placement"]) ?? "bottom";
+  const popperPlacement = attributes.popper?.["data-popper-placement"] ?? "bottom";
   const handleToggle = React.useCallback((event) => {
     if (event && !keyboardUtils.isKey(event, "Tab")) {
       event.preventDefault();
     }
-    const notControlKey = !!(event == null ? void 0 : event.code) && !keyboardUtils.isOneOfKeys(event, ["Tab", "Enter", "Esc", "ArrowDown", "Space"]);
+    const notControlKey = !!event?.code && !keyboardUtils.isOneOfKeys(event, ["Tab", "Enter", "Esc", "ArrowDown", "Space"]);
     const ignoredCombinations = keyboardUtils.isKey(event, "Esc") && !isOpen || keyboardUtils.isKey(event, "ArrowDown") && isOpen || keyboardUtils.isKey(event, "Tab") && !isOpen;
     if (disabled || notControlKey || ignoredCombinations)
       return;
     const newOpen = !isOpen;
     setIsOpen(() => {
       if (!newOpen) {
-        referenceElement == null ? void 0 : referenceElement.focus({
+        referenceElement?.focus({
           preventScroll: true
         });
       }
       return newOpen;
     });
-    onToggle == null ? void 0 : onToggle(event, newOpen);
+    onToggle?.(event, newOpen);
   }, [isOpen, disabled, setIsOpen, onToggle, referenceElement]);
   const ExpanderComponent = isOpen ? uikitReactIcons.DropUpXS : uikitReactIcons.DropDownXS;
   const defaultHeaderElement = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -218,24 +216,23 @@ const HvBaseDropdown = React.forwardRef((props, ref) => {
   }) : defaultHeaderElement;
   const containerComponent = (() => {
     const handleContainerKeyDown = (event) => {
-      var _a2;
       if (keyboardUtils.isKey(event, "Esc")) {
         handleToggle(event);
       }
       if (keyboardUtils.isKey(event, "Tab") && !event.shiftKey) {
         const focusList = focusableElementFinder.getFirstAndLastFocus(popperElement);
-        if (document.activeElement === (focusList == null ? void 0 : focusList.last)) {
+        if (document.activeElement === focusList?.last) {
           event.preventDefault();
-          (_a2 = focusList == null ? void 0 : focusList.first) == null ? void 0 : _a2.focus();
+          focusList?.first?.focus();
         }
       }
     };
     const handleOutside = (event) => {
-      const isButtonClick = referenceElement == null ? void 0 : referenceElement.contains(event.target);
+      const isButtonClick = referenceElement?.contains(event.target);
       if (!isButtonClick) {
-        onClickOutside == null ? void 0 : onClickOutside(event);
+        onClickOutside?.(event);
         setIsOpen(false);
-        onToggle == null ? void 0 : onToggle(event, false);
+        onToggle?.(event, false);
       }
     };
     const container = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setPopperElement, className: classes.container, style: popperStyles.popper, ...attributes.popper, children: /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: handleOutside, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { onKeyDown: handleContainerKeyDown, children: [