@hitachivantara/uikit-react-core 5.87.1 → 5.87.3

package/dist/esm/BulkActions/BulkActions.js

@@ -1,11 +1,11 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { CounterLabel } from "../utils/CounterLabel.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./BulkActions.styles.js";
 import { staticClasses } from "./BulkActions.styles.js";
 import { HvButton } from "../Button/Button.js";
-import { HvTypography } from "../Typography/Typography.js";
 import { HvCheckBox } from "../CheckBox/CheckBox.js";
 import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
 const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
@@ -20,7 +20,6 @@ const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
     actions,
     numTotal = 0,
     numSelected = 0,
-    selectAllLabel = "All",
     selectAllConjunctionLabel = "/",
     showSelectAllPages = false,
     semantic = true,
@@ -35,21 +34,6 @@ const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
   const { activeTheme } = useTheme();
   const anySelected = numSelected > 0;
   const isSemantic = semantic && anySelected;
-  const selectAllLabelComponent = /* @__PURE__ */ jsx(
-    HvTypography,
-    {
-      component: "span",
-      disabled: checkboxProps?.disabled,
-      variant: "body",
-      children: !anySelected ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: selectAllLabel }),
-        ` (${numTotal})`
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: numSelected }),
-        ` ${selectAllConjunctionLabel} ${numTotal}`
-      ] })
-    }
-  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -72,7 +56,14 @@ const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
               semantic: isSemantic,
               onChange: onSelectAll,
               indeterminate: numSelected > 0 && numSelected < numTotal,
-              label: selectAllLabelComponent,
+              label: /* @__PURE__ */ jsx(
+                CounterLabel,
+                {
+                  selected: numSelected,
+                  total: numTotal,
+                  conjunctionLabel: selectAllConjunctionLabel
+                }
+              ),
               ...checkboxProps
             }
           ),

package/dist/esm/BulkActions/BulkActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.js","sources":["../../../src/BulkActions/BulkActions.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionsGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"../CheckBox\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /** Custom label for select all checkbox */\n  selectAllLabel?: React.ReactNode;\n  /** Custom label for select all checkbox conjunction */\n  selectAllConjunctionLabel?: string;\n  /** Custom label for select all pages button */\n  selectAllPagesLabel?: React.ReactNode;\n  /** Whether select all pages element should be visible */\n  showSelectAllPages?: boolean;\n  /** The total number of elements */\n  numTotal?: number;\n  /** The number of elements currently selected */\n  numSelected?: number;\n  /** Function called when the \"select all\" Checkbox is toggled. */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /** Function called when the \"select all pages\" button is clicked toggled. */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /** Whether the bulk actions should use the semantic styles when there are selected elements. */\n  semantic?: boolean;\n  /** The renderable content inside the right actions slot, or an array of actions `{ id, label, icon, disabled, ... }` */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /** Whether actions should be all disabled */\n  actionsDisabled?: boolean;\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** Properties to be passed onto the checkbox component, the values of the object are equivalent to the HvCheckbox API. */\n  checkboxProps?: HvCheckBoxProps;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvBulkActionsProps\n>(function HvBulkActions(props, ref) {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { activeTheme } = useTheme();\n\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={\n                isSemantic\n                  ? (activeTheme?.bulkActions\n                      .actionButtonVariant as HvButtonVariant)\n                  : \"secondaryGhost\"\n              }\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        variant={\n          isSemantic\n            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n            : \"secondaryGhost\"\n        }\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        onAction={onAction}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n});\n"],"names":["HvBulkActions"],"mappings":";;;;;;;;;;AA8DO,MAAM,gBAAgB,WAG3B,SAASA,eAAc,OAAO,KAAK;AAC7B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,YAAY,IAAI,SAAS;AAEjC,QAAM,cAAc,cAAc;AAClC,QAAM,aAAa,YAAY;AAE/B,QAAM,0BACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,eAAe;AAAA,MACzB,SAAQ;AAAA,MAEP,UAAA,CAAC,cAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAe,gBAAA;AAAA,QAC7C,KAAK,QAAQ;AAAA,MAAA,EAAA,CAChB,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAY,aAAA;AAAA,QAC1C,IAAI,yBAAyB,IAAI,QAAQ;AAAA,MAAA,EAC5C,CAAA;AAAA,IAAA;AAAA,EAEJ;AAIA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,oBACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,QAAQ;AAAA,cACtB,WAAW,QAAQ;AAAA,cACnB,SAAS,cAAc;AAAA,cACvB,UAAU;AAAA,cACV,UAAU;AAAA,cACV,eAAe,cAAc,KAAK,cAAc;AAAA,cAChD,OAAO;AAAA,cACN,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACC,sBAAsB,eAAe,cAAc,YAEhD,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,CAAA;AAAA,YACjC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,IAAI,OAAO;AAAA,gBACrB,WAAW,QAAQ;AAAA,gBACnB,SACE,aACK,aAAa,YACX,sBACH;AAAA,gBAEN,SAAS;AAAA,gBAER,UAAA,uBAAuB,cAAc,QAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,UAChD,EACF,CAAA;AAAA,QAAA,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,SAAS;AAAA,YACvB,SAAS,EAAE,MAAM,QAAQ,QAAQ;AAAA,YACjC,SACE,aACK,aAAa,YAAY,sBAC1B;AAAA,YAEN;AAAA,YACA,UAAU,mBAAmB,gBAAgB;AAAA,YAC7C;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"BulkActions.js","sources":["../../../src/BulkActions/BulkActions.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionsGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"../CheckBox\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { CounterLabel } from \"../utils/CounterLabel\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /** Custom label for select all checkbox. @deprecated no longer used */\n  selectAllLabel?: React.ReactNode;\n  /** Custom label for select all checkbox conjunction */\n  selectAllConjunctionLabel?: string;\n  /** Custom label for select all pages button */\n  selectAllPagesLabel?: React.ReactNode;\n  /** Whether select all pages element should be visible */\n  showSelectAllPages?: boolean;\n  /** The total number of elements */\n  numTotal?: number;\n  /** The number of elements currently selected */\n  numSelected?: number;\n  /** Function called when the \"select all\" Checkbox is toggled. */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /** Function called when the \"select all pages\" button is clicked toggled. */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /** Whether the bulk actions should use the semantic styles when there are selected elements. */\n  semantic?: boolean;\n  /** The renderable content inside the right actions slot, or an array of actions `{ id, label, icon, disabled, ... }` */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /** Whether actions should be all disabled */\n  actionsDisabled?: boolean;\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** Properties to be passed onto the checkbox component, the values of the object are equivalent to the HvCheckbox API. */\n  checkboxProps?: HvCheckBoxProps;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvBulkActionsProps\n>(function HvBulkActions(props, ref) {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { activeTheme } = useTheme();\n\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={\n            <CounterLabel\n              selected={numSelected}\n              total={numTotal}\n              conjunctionLabel={selectAllConjunctionLabel}\n            />\n          }\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={\n                isSemantic\n                  ? (activeTheme?.bulkActions\n                      .actionButtonVariant as HvButtonVariant)\n                  : \"secondaryGhost\"\n              }\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        variant={\n          isSemantic\n            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n            : \"secondaryGhost\"\n        }\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        onAction={onAction}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n});\n"],"names":["HvBulkActions"],"mappings":";;;;;;;;;;AA8DO,MAAM,gBAAgB,WAG3B,SAASA,eAAc,OAAO,KAAK;AAC7B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,4BAA4B;AAAA,IAC5B,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,YAAY,IAAI,SAAS;AAEjC,QAAM,cAAc,cAAc;AAClC,QAAM,aAAa,YAAY;AAG7B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,oBACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,QAAQ;AAAA,cACtB,WAAW,QAAQ;AAAA,cACnB,SAAS,cAAc;AAAA,cACvB,UAAU;AAAA,cACV,UAAU;AAAA,cACV,eAAe,cAAc,KAAK,cAAc;AAAA,cAChD,OACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,UAAU;AAAA,kBACV,OAAO;AAAA,kBACP,kBAAkB;AAAA,gBAAA;AAAA,cACpB;AAAA,cAED,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACC,sBAAsB,eAAe,cAAc,YAEhD,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,CAAA;AAAA,YACjC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,IAAI,OAAO;AAAA,gBACrB,WAAW,QAAQ;AAAA,gBACnB,SACE,aACK,aAAa,YACX,sBACH;AAAA,gBAEN,SAAS;AAAA,gBAER,UAAA,uBAAuB,cAAc,QAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,UAChD,EACF,CAAA;AAAA,QAAA,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,SAAS;AAAA,YACvB,SAAS,EAAE,MAAM,QAAQ,QAAQ;AAAA,YACjC,SACE,aACK,aAAa,YAAY,sBAC1B;AAAA,YAEN;AAAA,YACA,UAAU,mBAAmB,gBAAgB;AAAA,YAC7C;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.js

@@ -106,12 +106,6 @@ const HvCalendarHeader = (props) => {
           {
             type: "text",
             id: setId(id, "header-input"),
-            className: classes.headerDate,
-            classes: {
-              input: classes.input,
-              inputBorderContainer: classes.inputBorderContainer,
-              error: classes.invalidMessageStyling
-            },
             placeholder: localeFormat,
             value: inputValue,
             "aria-labelledby": label?.[0]?.id,

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n} from \"../../FormElement\";\nimport { HvInput, HvInputProps } from \"../../Input\";\nimport { HvTypography } from \"../../Typography\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\nimport type { HvSingleCalendarProps } from \"../SingleCalendar\";\nimport {\n  DEFAULT_LOCALE,\n  getFormattedDate,\n  getLocaleDateFormat,\n  getStringFromDate,\n  isDate,\n  isRange,\n  isSameDay,\n  parseDateString,\n} from \"../utils\";\nimport { staticClasses, useClasses } from \"./CalendarHeader.styles\";\n\nexport { staticClasses as calendarHeaderClasses };\n\nexport type HvCalendarHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport const HvCalendarHeader = (props: HvCalendarHeaderProps) => {\n  const {\n    id: idProp,\n    value: valueProp,\n    locale = DEFAULT_LOCALE,\n    classes: classesProp,\n    onChange,\n    showEndDate,\n    showDayOfWeek = false,\n    onFocus,\n    invalidDateLabel = \"Invalid Date\",\n  } = useDefaultProps(\"HvCalendarHeader\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const context = useContext(HvFormElementContext);\n  const { label } = useContext(HvFormElementDescriptorsContext);\n\n  const localValue = isRange(valueProp)\n    ? showEndDate\n      ? valueProp.endDate!\n      : valueProp.startDate\n    : valueProp;\n\n  const [dateValue, setDateValue] = useState(localValue);\n  const [editedValue, setEditedValue] = useState<string | null>(null);\n  const [displayValue, setDisplayValue] = useState(\"\");\n  const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n  const id = idProp ?? setId(context.id, \"calendarHeader\");\n\n  const inputValue = editedValue ?? displayValue;\n  const localeFormat = getLocaleDateFormat(locale);\n\n  const [isValidValue, setIsValidValue] = useState(\n    inputValue.length === 0 || (inputValue && isDate(new Date(inputValue))),\n  );\n\n  const validateInput = (incomingValid: any) =>\n    incomingValid === undefined || isDate(new Date(incomingValid));\n\n  useEffect(() => {\n    const valid = validateInput(localValue);\n    setIsValidValue(valid);\n    if (valid) {\n      if (!localValue) {\n        setDisplayValue(\"\");\n        setEditedValue(null);\n        setWeekdayDisplay(\"\");\n        return;\n      }\n      const weekday = new Intl.DateTimeFormat(locale, {\n        weekday: \"short\",\n      }).format(isDate(localValue) ? localValue : 0);\n      setDisplayValue(getFormattedDate(localValue, locale));\n      setEditedValue(null);\n      setWeekdayDisplay(weekday);\n    }\n  }, [localValue, locale]);\n\n  const handleNewDate = (event: any, date: string) => {\n    // attempt to format in locale data, or fallback to default\n    const localeParsedDate = parseDateString(date, locale);\n\n    const isValidInput = isDate(localeParsedDate);\n    const dateParsed = isValidInput ? localeParsedDate : new Date(date);\n    // prevent extra updates\n    if (!isSameDay(dateParsed, dateValue)) {\n      setDateValue(dateParsed);\n      onChange?.(event, dateParsed);\n    }\n\n    setIsValidValue(isValidInput);\n    if (isValidInput) {\n      setEditedValue(null);\n    }\n  };\n\n  const onBlurHandler: HvInputProps[\"onBlur\"] = (event) => {\n    if (editedValue == null) return;\n    if (editedValue === \"\") {\n      setIsValidValue(true);\n      setEditedValue(null);\n      return;\n    }\n    handleNewDate(event, editedValue);\n  };\n\n  const keyDownHandler: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (!isKey(event, \"Enter\") || editedValue == null || editedValue === \"\")\n      return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler: HvInputProps[\"onFocus\"] = (event) => {\n    if (!localValue) return;\n    const formattedDate =\n      isValidValue && isDate(localValue)\n        ? getStringFromDate(localValue, locale)\n        : editedValue;\n    setEditedValue(formattedDate);\n    onFocus?.(event, formattedDate);\n  };\n\n  const onChangeHandler: HvInputProps[\"onChange\"] = (event, val) => {\n    setEditedValue(val);\n  };\n\n  const isInvalid = !isValidValue && inputValue !== \"\";\n\n  // This component needs to be further refactored\n  // It's not possible to clear the date\n  // In a new major there's no need for all these classes\n  return (\n    <div\n      id={id}\n      className={cx(classes.root, {\n        [classes.invalid]: isInvalid,\n      })}\n    >\n      {showDayOfWeek && (\n        <HvTypography className={classes.headerDayOfWeek}>\n          {weekdayDisplay || \"\\u00A0\"}\n        </HvTypography>\n      )}\n      <HvInput\n        type=\"text\"\n        id={setId(id, \"header-input\")}\n        className={classes.headerDate}\n        classes={{\n          input: classes.input,\n          inputBorderContainer: classes.inputBorderContainer,\n          error: classes.invalidMessageStyling,\n        }}\n        placeholder={localeFormat}\n        value={inputValue}\n        aria-labelledby={label?.[0]?.id}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n        onChange={onChangeHandler}\n        onKeyDown={keyDownHandler}\n        status={isInvalid ? \"invalid\" : \"valid\"}\n        statusMessage={invalidDateLabel}\n      />\n    </div>\n  );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps\n  extends Pick<\n    HvSingleCalendarProps,\n    | \"id\"\n    | \"value\"\n    | \"locale\"\n    | \"onChange\"\n    | \"showEndDate\"\n    | \"showDayOfWeek\"\n    | \"invalidDateLabel\"\n  > {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarHeaderClasses;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    formattedDate: string | null,\n  ) => void;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CalendarHeader.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n} from \"../../FormElement\";\nimport { HvInput, HvInputProps } from \"../../Input\";\nimport { HvTypography } from \"../../Typography\";\nimport { isKey } from \"../../utils/keyboardUtils\";\nimport { setId } from \"../../utils/setId\";\nimport type { HvSingleCalendarProps } from \"../SingleCalendar\";\nimport {\n  DEFAULT_LOCALE,\n  getFormattedDate,\n  getLocaleDateFormat,\n  getStringFromDate,\n  isDate,\n  isRange,\n  isSameDay,\n  parseDateString,\n} from \"../utils\";\nimport { staticClasses, useClasses } from \"./CalendarHeader.styles\";\n\nexport { staticClasses as calendarHeaderClasses };\n\nexport type HvCalendarHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport const HvCalendarHeader = (props: HvCalendarHeaderProps) => {\n  const {\n    id: idProp,\n    value: valueProp,\n    locale = DEFAULT_LOCALE,\n    classes: classesProp,\n    onChange,\n    showEndDate,\n    showDayOfWeek = false,\n    onFocus,\n    invalidDateLabel = \"Invalid Date\",\n  } = useDefaultProps(\"HvCalendarHeader\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const context = useContext(HvFormElementContext);\n  const { label } = useContext(HvFormElementDescriptorsContext);\n\n  const localValue = isRange(valueProp)\n    ? showEndDate\n      ? valueProp.endDate!\n      : valueProp.startDate\n    : valueProp;\n\n  const [dateValue, setDateValue] = useState(localValue);\n  const [editedValue, setEditedValue] = useState<string | null>(null);\n  const [displayValue, setDisplayValue] = useState(\"\");\n  const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n  const id = idProp ?? setId(context.id, \"calendarHeader\");\n\n  const inputValue = editedValue ?? displayValue;\n  const localeFormat = getLocaleDateFormat(locale);\n\n  const [isValidValue, setIsValidValue] = useState(\n    inputValue.length === 0 || (inputValue && isDate(new Date(inputValue))),\n  );\n\n  const validateInput = (incomingValid: any) =>\n    incomingValid === undefined || isDate(new Date(incomingValid));\n\n  useEffect(() => {\n    const valid = validateInput(localValue);\n    setIsValidValue(valid);\n    if (valid) {\n      if (!localValue) {\n        setDisplayValue(\"\");\n        setEditedValue(null);\n        setWeekdayDisplay(\"\");\n        return;\n      }\n      const weekday = new Intl.DateTimeFormat(locale, {\n        weekday: \"short\",\n      }).format(isDate(localValue) ? localValue : 0);\n      setDisplayValue(getFormattedDate(localValue, locale));\n      setEditedValue(null);\n      setWeekdayDisplay(weekday);\n    }\n  }, [localValue, locale]);\n\n  const handleNewDate = (event: any, date: string) => {\n    // attempt to format in locale data, or fallback to default\n    const localeParsedDate = parseDateString(date, locale);\n\n    const isValidInput = isDate(localeParsedDate);\n    const dateParsed = isValidInput ? localeParsedDate : new Date(date);\n    // prevent extra updates\n    if (!isSameDay(dateParsed, dateValue)) {\n      setDateValue(dateParsed);\n      onChange?.(event, dateParsed);\n    }\n\n    setIsValidValue(isValidInput);\n    if (isValidInput) {\n      setEditedValue(null);\n    }\n  };\n\n  const onBlurHandler: HvInputProps[\"onBlur\"] = (event) => {\n    if (editedValue == null) return;\n    if (editedValue === \"\") {\n      setIsValidValue(true);\n      setEditedValue(null);\n      return;\n    }\n    handleNewDate(event, editedValue);\n  };\n\n  const keyDownHandler: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (!isKey(event, \"Enter\") || editedValue == null || editedValue === \"\")\n      return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler: HvInputProps[\"onFocus\"] = (event) => {\n    if (!localValue) return;\n    const formattedDate =\n      isValidValue && isDate(localValue)\n        ? getStringFromDate(localValue, locale)\n        : editedValue;\n    setEditedValue(formattedDate);\n    onFocus?.(event, formattedDate);\n  };\n\n  const onChangeHandler: HvInputProps[\"onChange\"] = (event, val) => {\n    setEditedValue(val);\n  };\n\n  const isInvalid = !isValidValue && inputValue !== \"\";\n\n  // This component needs to be further refactored\n  // It's not possible to clear the date\n  // In a new major there's no need for all these classes\n  return (\n    <div\n      id={id}\n      className={cx(classes.root, {\n        [classes.invalid]: isInvalid,\n      })}\n    >\n      {showDayOfWeek && (\n        <HvTypography className={classes.headerDayOfWeek}>\n          {weekdayDisplay || \"\\u00A0\"}\n        </HvTypography>\n      )}\n      <HvInput\n        type=\"text\"\n        id={setId(id, \"header-input\")}\n        placeholder={localeFormat}\n        value={inputValue}\n        aria-labelledby={label?.[0]?.id}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n        onChange={onChangeHandler}\n        onKeyDown={keyDownHandler}\n        status={isInvalid ? \"invalid\" : \"valid\"}\n        statusMessage={invalidDateLabel}\n      />\n    </div>\n  );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nexport interface HvCalendarHeaderProps\n  extends Pick<\n    HvSingleCalendarProps,\n    | \"id\"\n    | \"value\"\n    | \"locale\"\n    | \"onChange\"\n    | \"showEndDate\"\n    | \"showDayOfWeek\"\n    | \"invalidDateLabel\"\n  > {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvCalendarHeaderClasses;\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    formattedDate: string | null,\n  ) => void;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.styles.js

@@ -10,11 +10,7 @@ const { staticClasses, useClasses } = createClasses("HvCalendarHeader", {
   invalid: {},
   headerDayOfWeek: {
     color: theme.colors.secondary_80
-  },
-  headerDate: {},
-  input: {},
-  inputBorderContainer: {},
-  invalidMessageStyling: {}
+  }
 });
 export {
   staticClasses,

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.styles.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarHeader\", {\n  root: {\n    paddingBottom: theme.space.sm,\n\n    \"&$invalid\": {\n      paddingBottom: 0,\n    },\n  },\n  invalid: {},\n  headerDayOfWeek: {\n    color: theme.colors.secondary_80,\n  },\n  headerDate: {},\n  input: {},\n  inputBorderContainer: {},\n  invalidMessageStyling: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,eAAe,MAAM,MAAM;AAAA,IAE3B,aAAa;AAAA,MACX,eAAe;AAAA,IAAA;AAAA,EAEnB;AAAA,EACA,SAAS,CAAC;AAAA,EACV,iBAAiB;AAAA,IACf,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,YAAY,CAAC;AAAA,EACb,OAAO,CAAC;AAAA,EACR,sBAAsB,CAAC;AAAA,EACvB,uBAAuB,CAAA;AACzB,CAAC;"}
+{"version":3,"file":"CalendarHeader.styles.js","sources":["../../../../src/Calendar/CalendarHeader/CalendarHeader.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendarHeader\", {\n  root: {\n    paddingBottom: theme.space.sm,\n\n    \"&$invalid\": {\n      paddingBottom: 0,\n    },\n  },\n  invalid: {},\n  headerDayOfWeek: {\n    color: theme.colors.secondary_80,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,eAAe,MAAM,MAAM;AAAA,IAE3B,aAAa;AAAA,MACX,eAAe;AAAA,IAAA;AAAA,EAEnB;AAAA,EACA,SAAS,CAAC;AAAA,EACV,iBAAiB;AAAA,IACf,OAAO,MAAM,OAAO;AAAA,EAAA;AAExB,CAAC;"}

package/dist/esm/CheckBoxGroup/CheckBoxGroup.js

@@ -1,8 +1,9 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useMemo, Children, useCallback, cloneElement } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
+import { CounterLabel } from "../utils/CounterLabel.js";
 import { multiSelectionEventHandler } from "../utils/multiSelectionEventHandler.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./CheckBoxGroup.styles.js";
@@ -48,7 +49,6 @@ const HvCheckBoxGroup = forwardRef(
       disabled,
       showSelectAll,
       orientation = "vertical",
-      selectAllLabel = "All",
       selectAllConjunctionLabel = "/",
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
@@ -165,13 +165,6 @@ const HvCheckBoxGroup = forwardRef(
         return newValue;
       });
     };
-    const selectAllLabelComponent = selectedCount === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("b", { children: selectAllLabel }),
-      ` (${Children.toArray(children).length})`
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("b", { children: selectedCount }),
-      ` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`
-    ] });
     const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
     const errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
     return /* @__PURE__ */ jsxs(
@@ -218,7 +211,14 @@ const HvCheckBoxGroup = forwardRef(
                   {
                     checked: selectAllState === "all",
                     indeterminate: selectAllState === "some",
-                    label: selectAllLabelComponent,
+                    label: /* @__PURE__ */ jsx(
+                      CounterLabel,
+                      {
+                        selected: selectedCount,
+                        total: Children.count(children),
+                        conjunctionLabel: selectAllConjunctionLabel
+                      }
+                    ),
                     disabled,
                     readOnly,
                     className: classes.selectAll,

package/dist/esm/CheckBoxGroup/CheckBoxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../CheckBox\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { multiSelectionEventHandler } from \"../utils/multiSelectionEventHandler\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./CheckBoxGroup.styles\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport { staticClasses as checkBoxGroupClasses };\n\nexport type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any[];\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\".\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = forwardRef<HTMLDivElement, HvCheckBoxGroupProps>(\n  function HvCheckBoxGroup(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      children,\n      name,\n      label,\n      description,\n      status,\n      statusMessage,\n      defaultValue,\n      value: valueProp,\n      required,\n      readOnly,\n      disabled,\n      showSelectAll,\n      orientation = \"vertical\",\n      selectAllLabel = \"All\",\n      selectAllConjunctionLabel = \"/\",\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      ...others\n    } = useDefaultProps(\"HvCheckBoxGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [value, setValue] = useControlled(\n      valueProp,\n      defaultValue !== undefined\n        ? defaultValue\n        : // When uncontrolled and no default value is given,\n          // extract the initial selected values from the children own state\n          () => getValueFromSelectedChildren(children),\n    );\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const selectionAnchor = useRef(undefined);\n\n    const [allValues, selectedState, selectedCount] = useMemo(() => {\n      const childValues: any[] = [];\n      const childSelectedState: boolean[] = [];\n      let childSelectedCounter = 0;\n\n      Children.toArray(children).forEach((child: any, i: number) => {\n        const childValue = child?.props?.value;\n        const childIsSelected = value.indexOf(childValue) !== -1;\n\n        childValues[i] = childValue;\n        childSelectedState[i] = childIsSelected;\n\n        if (childIsSelected) {\n          childSelectedCounter += 1;\n        }\n      });\n\n      return [childValues, childSelectedState, childSelectedCounter];\n    }, [children, value]);\n\n    const selectAllState = computeSelectAllState(\n      value.length,\n      selectedState.length,\n    );\n\n    const onChildChangeInterceptor = useCallback(\n      (\n        index: number,\n        childOnChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean,\n        ) => void,\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean,\n      ) => {\n        const newValue = multiSelectionEventHandler(\n          event,\n          index,\n          selectionAnchor,\n          allValues,\n          selectedState,\n          isChecked,\n        );\n\n        childOnChange?.(event, isChecked);\n\n        onChange?.(event, newValue);\n\n        setValue(() => {\n          // This will only run if uncontrolled\n\n          if (required && newValue.length === 0) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newValue;\n        });\n      },\n      [\n        allValues,\n        onChange,\n        required,\n        selectedState,\n        setValidationState,\n        setValue,\n      ],\n    );\n\n    const modifiedChildren = useMemo(() => {\n      return Children.map(children, (child: any, i: number) => {\n        const childIsSelected = selectedState[i];\n\n        return cloneElement(child, {\n          checked: childIsSelected,\n          name: child?.props?.name || name,\n          onChange: (\n            event: React.ChangeEvent<HTMLInputElement>,\n            isChecked: boolean,\n          ) =>\n            onChildChangeInterceptor(\n              i,\n              child?.props?.onChange,\n              event,\n              isChecked,\n            ),\n          disabled: disabled || child?.props?.disabled,\n          readOnly: readOnly || child?.props?.readOnly,\n        });\n      });\n    }, [\n      children,\n      disabled,\n      name,\n      onChildChangeInterceptor,\n      readOnly,\n      selectedState,\n    ]);\n\n    const handleSelectAll = (\n      event: React.ChangeEvent<HTMLInputElement>,\n      selectAllChecked: boolean,\n    ) => {\n      let newValue: any[];\n      if (selectAllState === \"some\") {\n        newValue = [];\n      } else if (selectAllChecked) {\n        newValue = [...allValues];\n      } else {\n        newValue = [];\n      }\n\n      onChange?.(event, newValue);\n\n      setValue(() => {\n        // This will only run if uncontrolled\n        if (required && newValue.length === 0) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newValue;\n      });\n    };\n\n    const selectAllLabelComponent =\n      selectedCount === 0 ? (\n        <>\n          <b>{selectAllLabel}</b>\n          {` (${Children.toArray(children).length})`}\n        </>\n      ) : (\n        <>\n          <b>{selectedCount}</b>\n          {` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`}\n        </>\n      );\n\n    // The error message area will only be created if:\n    //   - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            showGutter\n            id={setId(elementId, \"label\")}\n            label={label}\n            className={classes.label}\n          />\n        )}\n\n        {description && (\n          <HvInfoMessage id={setId(elementId, \"description\")}>\n            {description}\n          </HvInfoMessage>\n        )}\n\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n          }\n          aria-disabled={disabled ? true : undefined}\n          aria-invalid={validationState === \"invalid\" ? true : undefined}\n          aria-errormessage={\n            validationState === \"invalid\" ? errorMessageId : undefined\n          }\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          className={cx(classes.group, {\n            [classes.vertical]: orientation === \"vertical\",\n            [classes.horizontal]: orientation === \"horizontal\",\n            [classes.invalid]: validationState === \"invalid\",\n          })}\n          {...others}\n        >\n          {showSelectAll && (\n            <HvCheckBox\n              checked={selectAllState === \"all\"}\n              indeterminate={selectAllState === \"some\"}\n              label={selectAllLabelComponent}\n              disabled={disabled}\n              readOnly={readOnly}\n              className={classes.selectAll}\n              onChange={handleSelectAll}\n            />\n          )}\n          {modifiedChildren}\n        </div>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvCheckBoxGroup"],"mappings":"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"}
+{"version":3,"file":"CheckBoxGroup.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../CheckBox\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { CounterLabel } from \"../utils/CounterLabel\";\nimport { multiSelectionEventHandler } from \"../utils/multiSelectionEventHandler\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./CheckBoxGroup.styles\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport { staticClasses as checkBoxGroupClasses };\n\nexport type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any[];\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\". @deprecated no longer used\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = forwardRef<HTMLDivElement, HvCheckBoxGroupProps>(\n  function HvCheckBoxGroup(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      children,\n      name,\n      label,\n      description,\n      status,\n      statusMessage,\n      defaultValue,\n      value: valueProp,\n      required,\n      readOnly,\n      disabled,\n      showSelectAll,\n      orientation = \"vertical\",\n      selectAllConjunctionLabel = \"/\",\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      ...others\n    } = useDefaultProps(\"HvCheckBoxGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [value, setValue] = useControlled(\n      valueProp,\n      defaultValue !== undefined\n        ? defaultValue\n        : // When uncontrolled and no default value is given,\n          // extract the initial selected values from the children own state\n          () => getValueFromSelectedChildren(children),\n    );\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const selectionAnchor = useRef(undefined);\n\n    const [allValues, selectedState, selectedCount] = useMemo(() => {\n      const childValues: any[] = [];\n      const childSelectedState: boolean[] = [];\n      let childSelectedCounter = 0;\n\n      Children.toArray(children).forEach((child: any, i: number) => {\n        const childValue = child?.props?.value;\n        const childIsSelected = value.indexOf(childValue) !== -1;\n\n        childValues[i] = childValue;\n        childSelectedState[i] = childIsSelected;\n\n        if (childIsSelected) {\n          childSelectedCounter += 1;\n        }\n      });\n\n      return [childValues, childSelectedState, childSelectedCounter];\n    }, [children, value]);\n\n    const selectAllState = computeSelectAllState(\n      value.length,\n      selectedState.length,\n    );\n\n    const onChildChangeInterceptor = useCallback(\n      (\n        index: number,\n        childOnChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean,\n        ) => void,\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean,\n      ) => {\n        const newValue = multiSelectionEventHandler(\n          event,\n          index,\n          selectionAnchor,\n          allValues,\n          selectedState,\n          isChecked,\n        );\n\n        childOnChange?.(event, isChecked);\n\n        onChange?.(event, newValue);\n\n        setValue(() => {\n          // This will only run if uncontrolled\n\n          if (required && newValue.length === 0) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newValue;\n        });\n      },\n      [\n        allValues,\n        onChange,\n        required,\n        selectedState,\n        setValidationState,\n        setValue,\n      ],\n    );\n\n    const modifiedChildren = useMemo(() => {\n      return Children.map(children, (child: any, i: number) => {\n        const childIsSelected = selectedState[i];\n\n        return cloneElement(child, {\n          checked: childIsSelected,\n          name: child?.props?.name || name,\n          onChange: (\n            event: React.ChangeEvent<HTMLInputElement>,\n            isChecked: boolean,\n          ) =>\n            onChildChangeInterceptor(\n              i,\n              child?.props?.onChange,\n              event,\n              isChecked,\n            ),\n          disabled: disabled || child?.props?.disabled,\n          readOnly: readOnly || child?.props?.readOnly,\n        });\n      });\n    }, [\n      children,\n      disabled,\n      name,\n      onChildChangeInterceptor,\n      readOnly,\n      selectedState,\n    ]);\n\n    const handleSelectAll = (\n      event: React.ChangeEvent<HTMLInputElement>,\n      selectAllChecked: boolean,\n    ) => {\n      let newValue: any[];\n      if (selectAllState === \"some\") {\n        newValue = [];\n      } else if (selectAllChecked) {\n        newValue = [...allValues];\n      } else {\n        newValue = [];\n      }\n\n      onChange?.(event, newValue);\n\n      setValue(() => {\n        // This will only run if uncontrolled\n        if (required && newValue.length === 0) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newValue;\n      });\n    };\n\n    // The error message area will only be created if:\n    //   - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            showGutter\n            id={setId(elementId, \"label\")}\n            label={label}\n            className={classes.label}\n          />\n        )}\n\n        {description && (\n          <HvInfoMessage id={setId(elementId, \"description\")}>\n            {description}\n          </HvInfoMessage>\n        )}\n\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n          }\n          aria-disabled={disabled ? true : undefined}\n          aria-invalid={validationState === \"invalid\" ? true : undefined}\n          aria-errormessage={\n            validationState === \"invalid\" ? errorMessageId : undefined\n          }\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          className={cx(classes.group, {\n            [classes.vertical]: orientation === \"vertical\",\n            [classes.horizontal]: orientation === \"horizontal\",\n            [classes.invalid]: validationState === \"invalid\",\n          })}\n          {...others}\n        >\n          {showSelectAll && (\n            <HvCheckBox\n              checked={selectAllState === \"all\"}\n              indeterminate={selectAllState === \"some\"}\n              label={\n                <CounterLabel\n                  selected={selectedCount}\n                  total={Children.count(children)}\n                  conjunctionLabel={selectAllConjunctionLabel}\n                />\n              }\n              disabled={disabled}\n              readOnly={readOnly}\n              className={classes.selectAll}\n              onChange={handleSelectAll}\n            />\n          )}\n          {modifiedChildren}\n        </div>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvCheckBoxGroup"],"mappings":"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"}

package/dist/esm/Dropdown/Dropdown.js

@@ -6,6 +6,7 @@ import { useControlled } from "../hooks/useControlled.js";
 import { useLabels } from "../hooks/useLabels.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { fixedForwardRef } from "../types/generic.js";
+import { CounterLabel } from "../utils/CounterLabel.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./Dropdown.styles.js";
 import { staticClasses } from "./Dropdown.styles.js";
@@ -21,7 +22,7 @@ import { HvTypography } from "../Typography/Typography.js";
 const DEFAULT_LABELS = {
   /** Label for overwrite the default header behavior. */
   select: void 0,
-  /** Label used for the All checkbox action. */
+  /** Label used for the All checkbox action. @deprecated unused */
   selectAll: "All",
   /** Cancel button label. */
   cancelLabel: "Cancel",
@@ -182,18 +183,15 @@ const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
         }),
         children: selectionLabel.selected
       }
-    ) : /* @__PURE__ */ jsxs(
-      HvTypography,
+    ) : /* @__PURE__ */ jsx(
+      CounterLabel,
       {
-        component: "div",
+        selected: selectionLabel.selected,
+        total: selectionLabel.total,
+        conjunctionLabel: labels.multiSelectionConjunction,
         className: cx(classes.placeholder, {
           [classes.selectionDisabled]: disabled
-        }),
-        variant: "body",
-        children: [
-          /* @__PURE__ */ jsx("b", { children: selectionLabel.selected }),
-          ` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`
-        ]
+        })
       }
     );
   };

package/dist/esm/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListValue } from \"../List\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { getSelected, getSelectionLabel } from \"./utils\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDropdownStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvDropdownProps<\n  // TODO: make default `false` in v6\n  Multiple extends boolean = boolean,\n  OptionValue extends HvListValue = HvListValue,\n> extends Omit<HvFormElementProps, \"value\" | \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"placement\"\n      | \"popperProps\"\n      | \"disablePortal\"\n      | \"variableWidth\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n    > {\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDropdownStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (\n    selected: Multiple extends true ? OptionValue[] : OptionValue | undefined,\n  ) => void;\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: OptionValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: Multiple;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabels;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n  /**\n   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: Partial<HvDropdownListProps>;\n}\n\nconst DEFAULT_LABELS = {\n  /** Label for overwrite the default header behavior. */\n  select: undefined as string | undefined,\n  /** Label used for the All checkbox action. */\n  selectAll: \"All\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** The label used in the middle of the multiSelection count. */\n  searchPlaceholder: \"Search\",\n  /** The label used in search. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvDropdownLabels = Partial<typeof DEFAULT_LABELS>;\n/** @deprecated use `HvDropdownLabels` instead */\nexport type HvDropdownLabelsProps = HvDropdownLabels;\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = fixedForwardRef(function HvDropdown<\n  Multiple extends boolean = false,\n  OptionValue extends HvListValue = HvListValue,\n>(\n  props: HvDropdownProps<Multiple, OptionValue>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    classes: classesProp,\n    className,\n\n    id,\n    name,\n\n    required,\n    disabled,\n    readOnly,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n\n    placeholder = \"Select...\",\n\n    onChange,\n\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    onCancel,\n    onToggle,\n    onClickOutside,\n\n    onFocus,\n    onBlur,\n\n    values,\n    multiSelect = false,\n    showSearch,\n    expanded,\n    defaultExpanded,\n    notifyChangesOnFirstRender,\n    labels: labelsProp,\n    hasTooltips,\n    disablePortal,\n    singleSelectionToggle = true,\n    placement,\n    variableWidth,\n    popperProps = {},\n    height,\n    maxHeight,\n    virtualized,\n    baseDropdownProps = {},\n    listProps = {},\n    ...others\n  } = useDefaultProps(\"HvDropdown\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id);\n\n  const [validationState, setValidationState] = useControlled<HvFormStatus>(\n    status,\n    \"standBy\",\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [selectionLabel, setSelectionLabel] = useState(\n    getSelectionLabel(labels, placeholder, multiSelect, values),\n  );\n\n  const [internalValues, setInternalValues] = useState(values);\n\n  // Hack - Keeping track of internal values for validation purposes since useState is async\n  const internalValuesRef = useRef(values);\n\n  useEffect(() => {\n    setInternalValues(values);\n    internalValuesRef.current = values;\n  }, [values]);\n\n  useEffect(() => {\n    setSelectionLabel(\n      getSelectionLabel(labels, placeholder, multiSelect, values),\n    );\n  }, [labels, multiSelect, placeholder, values]);\n\n  if (import.meta.env.DEV && virtualized && !height) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"Dropdown/List in virtualized mode requires a height. Please define it.\",\n    );\n  }\n\n  const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n  const {\n    ref: refProp,\n    dropdownHeaderRef: dropdownHeaderRefProp,\n    ...otherBaseDropdownProps\n  } = baseDropdownProps;\n  const headerForkedRef = useForkRef(dropdownHeaderRefProp, dropdownHeaderRef);\n\n  const dropdownForkedRef = useForkRef(ref, refProp);\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n    onToggle?.(event, open);\n\n    setIsOpen(open);\n\n    if (!open) {\n      // also run built-in validation when closing without changes\n      // as the user \"touched\" the input\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required) {\n          const hasSelection =\n            getSelected(internalValuesRef.current).length > 0;\n\n          if (!hasSelection) {\n            return \"invalid\";\n          }\n        }\n\n        return \"valid\";\n      });\n    }\n  };\n\n  /** Applies the selected values to the state */\n  const handleSelection: HvDropdownListProps[\"onChange\"] = (\n    listValues,\n    commitChanges,\n    toggle,\n    notifyChanges = true,\n  ) => {\n    const selected = getSelected(listValues);\n\n    if (commitChanges) {\n      setInternalValues(listValues as any);\n      internalValuesRef.current = listValues as any;\n\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, listValues),\n      );\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && selected.length === 0) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n    }\n    if (notifyChanges) {\n      onChange?.((multiSelect ? selected : selected[0]) as any);\n    }\n    if (toggle) {\n      handleToggle(undefined as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    }\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n    onCancel?.(evt as any);\n\n    handleToggle(evt as any, false);\n\n    // focus-ring won't be visible even if using the keyboard:\n    // https://github.com/WICG/focus-visible/issues/88\n    dropdownHeaderRef.current?.focus({ preventScroll: true });\n  };\n\n  const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n    onClickOutside?.(evt);\n    onCancel?.(evt);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef,\n  ) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n      return;\n    }\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  const buildHeaderLabel = () => {\n    const hasSelection = getSelected(internalValues).length > 0;\n    return labels?.select || !multiSelect ? (\n      <HvTypography\n        component=\"div\"\n        variant=\"body\"\n        className={cx(classes.placeholder, {\n          [classes.selectionDisabled]: disabled,\n          [classes.placeholderClosed]: !(isOpen || hasSelection),\n        })}\n      >\n        {selectionLabel.selected}\n      </HvTypography>\n    ) : (\n      <HvTypography\n        component=\"div\"\n        className={cx(classes.placeholder, {\n          [classes.selectionDisabled]: disabled,\n        })}\n        variant=\"body\"\n      >\n        <b>{selectionLabel.selected}</b>\n        {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n      </HvTypography>\n    );\n  };\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n        },\n        className,\n      )}\n      {...others}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              showGutter\n              id={setId(elementId, \"label\")}\n              label={label}\n              className={classes.label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseDropdown\n        ref={dropdownForkedRef}\n        id={setId(id, \"dropdown\")}\n        classes={{\n          root: cx(classes.dropdown, {\n            [classes.readOnly]: readOnly,\n          }),\n          arrow: classes.arrow,\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        expanded={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        disablePortal={disablePortal}\n        placement={placement}\n        popperProps={popperProps}\n        placeholder={buildHeaderLabel()}\n        onToggle={handleToggle}\n        onClickOutside={handleClickOutside}\n        onContainerCreation={setFocusToContent}\n        role=\"combobox\"\n        variableWidth={variableWidth}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        onFocus={onFocus}\n        onBlur={onBlur}\n        dropdownHeaderRef={headerForkedRef}\n        {...otherBaseDropdownProps}\n      >\n        <HvDropdownList\n          id={setId(elementId, \"values\")}\n          classes={{\n            rootList: classes.rootList,\n            dropdownListContainer: classes.dropdownListContainer,\n          }}\n          values={internalValues}\n          multiSelect={multiSelect}\n          showSearch={showSearch}\n          onChange={handleSelection}\n          onCancel={handleCancel}\n          labels={labels}\n          notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n          hasTooltips={hasTooltips}\n          singleSelectionToggle={singleSelectionToggle}\n          aria-label={ariaLabel}\n          aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n          height={height}\n          maxHeight={maxHeight}\n          virtualized={virtualized}\n          {...listProps}\n        />\n      </HvBaseDropdown>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvDropdown"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListValue } from \"../List\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { CounterLabel } from \"../utils/CounterLabel\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { getSelected, getSelectionLabel } from \"./utils\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDropdownStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvDropdownProps<\n  // TODO: make default `false` in v6\n  Multiple extends boolean = boolean,\n  OptionValue extends HvListValue = HvListValue,\n> extends Omit<HvFormElementProps, \"value\" | \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"placement\"\n      | \"popperProps\"\n      | \"disablePortal\"\n      | \"variableWidth\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n    > {\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDropdownStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (\n    selected: Multiple extends true ? OptionValue[] : OptionValue | undefined,\n  ) => void;\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: OptionValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: Multiple;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabels;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n  /**\n   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: Partial<HvDropdownListProps>;\n}\n\nconst DEFAULT_LABELS = {\n  /** Label for overwrite the default header behavior. */\n  select: undefined as string | undefined,\n  /** Label used for the All checkbox action. @deprecated unused */\n  selectAll: \"All\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** The label used in the middle of the multiSelection count. */\n  searchPlaceholder: \"Search\",\n  /** The label used in search. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvDropdownLabels = Partial<typeof DEFAULT_LABELS>;\n/** @deprecated use `HvDropdownLabels` instead */\nexport type HvDropdownLabelsProps = HvDropdownLabels;\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = fixedForwardRef(function HvDropdown<\n  Multiple extends boolean = false,\n  OptionValue extends HvListValue = HvListValue,\n>(\n  props: HvDropdownProps<Multiple, OptionValue>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    classes: classesProp,\n    className,\n\n    id,\n    name,\n\n    required,\n    disabled,\n    readOnly,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n\n    placeholder = \"Select...\",\n\n    onChange,\n\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    onCancel,\n    onToggle,\n    onClickOutside,\n\n    onFocus,\n    onBlur,\n\n    values,\n    multiSelect = false,\n    showSearch,\n    expanded,\n    defaultExpanded,\n    notifyChangesOnFirstRender,\n    labels: labelsProp,\n    hasTooltips,\n    disablePortal,\n    singleSelectionToggle = true,\n    placement,\n    variableWidth,\n    popperProps = {},\n    height,\n    maxHeight,\n    virtualized,\n    baseDropdownProps = {},\n    listProps = {},\n    ...others\n  } = useDefaultProps(\"HvDropdown\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id);\n\n  const [validationState, setValidationState] = useControlled<HvFormStatus>(\n    status,\n    \"standBy\",\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [selectionLabel, setSelectionLabel] = useState(\n    getSelectionLabel(labels, placeholder, multiSelect, values),\n  );\n\n  const [internalValues, setInternalValues] = useState(values);\n\n  // Hack - Keeping track of internal values for validation purposes since useState is async\n  const internalValuesRef = useRef(values);\n\n  useEffect(() => {\n    setInternalValues(values);\n    internalValuesRef.current = values;\n  }, [values]);\n\n  useEffect(() => {\n    setSelectionLabel(\n      getSelectionLabel(labels, placeholder, multiSelect, values),\n    );\n  }, [labels, multiSelect, placeholder, values]);\n\n  if (import.meta.env.DEV && virtualized && !height) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"Dropdown/List in virtualized mode requires a height. Please define it.\",\n    );\n  }\n\n  const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n  const {\n    ref: refProp,\n    dropdownHeaderRef: dropdownHeaderRefProp,\n    ...otherBaseDropdownProps\n  } = baseDropdownProps;\n  const headerForkedRef = useForkRef(dropdownHeaderRefProp, dropdownHeaderRef);\n\n  const dropdownForkedRef = useForkRef(ref, refProp);\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n    onToggle?.(event, open);\n\n    setIsOpen(open);\n\n    if (!open) {\n      // also run built-in validation when closing without changes\n      // as the user \"touched\" the input\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required) {\n          const hasSelection =\n            getSelected(internalValuesRef.current).length > 0;\n\n          if (!hasSelection) {\n            return \"invalid\";\n          }\n        }\n\n        return \"valid\";\n      });\n    }\n  };\n\n  /** Applies the selected values to the state */\n  const handleSelection: HvDropdownListProps[\"onChange\"] = (\n    listValues,\n    commitChanges,\n    toggle,\n    notifyChanges = true,\n  ) => {\n    const selected = getSelected(listValues);\n\n    if (commitChanges) {\n      setInternalValues(listValues as any);\n      internalValuesRef.current = listValues as any;\n\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, listValues),\n      );\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && selected.length === 0) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n    }\n    if (notifyChanges) {\n      onChange?.((multiSelect ? selected : selected[0]) as any);\n    }\n    if (toggle) {\n      handleToggle(undefined as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    }\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n    onCancel?.(evt as any);\n\n    handleToggle(evt as any, false);\n\n    // focus-ring won't be visible even if using the keyboard:\n    // https://github.com/WICG/focus-visible/issues/88\n    dropdownHeaderRef.current?.focus({ preventScroll: true });\n  };\n\n  const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n    onClickOutside?.(evt);\n    onCancel?.(evt);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef,\n  ) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n      return;\n    }\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  const buildHeaderLabel = () => {\n    const hasSelection = getSelected(internalValues).length > 0;\n    return labels?.select || !multiSelect ? (\n      <HvTypography\n        component=\"div\"\n        variant=\"body\"\n        className={cx(classes.placeholder, {\n          [classes.selectionDisabled]: disabled,\n          [classes.placeholderClosed]: !(isOpen || hasSelection),\n        })}\n      >\n        {selectionLabel.selected}\n      </HvTypography>\n    ) : (\n      <CounterLabel\n        selected={selectionLabel.selected}\n        total={selectionLabel.total}\n        conjunctionLabel={labels.multiSelectionConjunction}\n        className={cx(classes.placeholder, {\n          [classes.selectionDisabled]: disabled,\n        })}\n      />\n    );\n  };\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n        },\n        className,\n      )}\n      {...others}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              showGutter\n              id={setId(elementId, \"label\")}\n              label={label}\n              className={classes.label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseDropdown\n        ref={dropdownForkedRef}\n        id={setId(id, \"dropdown\")}\n        classes={{\n          root: cx(classes.dropdown, {\n            [classes.readOnly]: readOnly,\n          }),\n          arrow: classes.arrow,\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        expanded={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        disablePortal={disablePortal}\n        placement={placement}\n        popperProps={popperProps}\n        placeholder={buildHeaderLabel()}\n        onToggle={handleToggle}\n        onClickOutside={handleClickOutside}\n        onContainerCreation={setFocusToContent}\n        role=\"combobox\"\n        variableWidth={variableWidth}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        onFocus={onFocus}\n        onBlur={onBlur}\n        dropdownHeaderRef={headerForkedRef}\n        {...otherBaseDropdownProps}\n      >\n        <HvDropdownList\n          id={setId(elementId, \"values\")}\n          classes={{\n            rootList: classes.rootList,\n            dropdownListContainer: classes.dropdownListContainer,\n          }}\n          values={internalValues}\n          multiSelect={multiSelect}\n          showSearch={showSearch}\n          onChange={handleSelection}\n          onCancel={handleCancel}\n          labels={labels}\n          notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n          hasTooltips={hasTooltips}\n          singleSelectionToggle={singleSelectionToggle}\n          aria-label={ariaLabel}\n          aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n          height={height}\n          maxHeight={maxHeight}\n          virtualized={virtualized}\n          {...listProps}\n        />\n      </HvBaseDropdown>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvDropdown"],"mappings":"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"}

package/dist/esm/FilterGroup/RightPanel/RightPanel.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useContext, useMemo, useCallback, useEffect } from "react";
+import { CounterLabel } from "../../utils/CounterLabel.js";
 import { setId } from "../../utils/setId.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { useClasses } from "./RightPanel.styles.js";
 import { staticClasses } from "./RightPanel.styles.js";
-import { HvTypography } from "../../Typography/Typography.js";
 import { HvCheckBox } from "../../CheckBox/CheckBox.js";
 import { HvPanel } from "../../Panel/Panel.js";
 import { HvInput } from "../../Input/Input.js";
@@ -94,19 +94,18 @@ const HvFilterGroupRightPanel = ({
     searchStr
   ]);
   const SelectAll = useCallback(() => {
-    const nbrSelected = activeFilterValues?.length;
-    const defaultLabel = /* @__PURE__ */ jsx(HvTypography, { component: "span", children: nbrSelected > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("b", { children: nbrSelected }),
-      ` ${labels?.multiSelectionConjunction} ${allActiveGroupOptions.length}`
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("b", { children: labels?.selectAll }),
-      ` (${allActiveGroupOptions.length})`
-    ] }) });
     return /* @__PURE__ */ jsx("div", { className: classes.selectAllContainer, children: /* @__PURE__ */ jsx(
       HvCheckBox,
       {
         id: setId(id, "select-all"),
-        label: defaultLabel,
+        label: /* @__PURE__ */ jsx(
+          CounterLabel,
+          {
+            selected: activeFilterValues?.length,
+            total: allActiveGroupOptions.length,
+            conjunctionLabel: labels?.multiSelectionConjunction
+          }
+        ),
         onChange: () => handleSelectAll(),
         className: classes.selectAll,
         indeterminate: anySelected && !allSelected,

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

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