@hitachivantara/uikit-react-core 5.87.3 → 5.88.0

package/dist/esm/SelectionList/SelectionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionList.js","sources":["../../../src/SelectionList/SelectionList.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\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 { HvListContainer } from \"../ListContainer\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { multiSelectionEventHandler } from \"../utils/multiSelectionEventHandler\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./SelectionList.styles\";\n\nexport { staticClasses as selectionListClasses };\n\nexport type HvSelectionListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectionListProps\n  extends HvBaseProps<HTMLUListElement, \"onChange\"> {\n  /** The form element name. */\n  name?: string;\n  /**\n   * The value of the form element. It must be represented in the child list items.\n   *\n   * Can either be a single value (when multiple = false) or an\n   * array of values (when multiple = true).\n   *\n   * When defined the selection list state becomes controlled.\n   */\n  value?: any | any[];\n  /** When uncontrolled, defines the initial value. */\n  defaultValue?: any | 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  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. If `true` the state is propagated to the children list items. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\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?: string;\n  /** Indicates that the user may select more than one item from the current selectable list items. */\n  multiple?: boolean;\n  /** If `true`, selection can be toggled when single selection. */\n  singleSelectionToggle?: boolean;\n  /** Indicates whether the list orientation is horizontal or vertical. Defaults to vertical. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.MouseEvent, value: any) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSelectionListClasses;\n}\n\nconst getValueFromSelectedChildren = (\n  children: React.ReactNode,\n  multiple: boolean,\n) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.selected !== undefined;\n      const childIsSelected =\n        child && childIsControlled\n          ? child.props?.selected\n          : child.props?.defaultSelected;\n\n      return childIsSelected ? child?.props.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return multiple ? selectedValues : selectedValues?.[0];\n};\n\n/**\n * Allows the user to select one or more items from a list of choices.\n *\n * Although it supports multi-selection, DS recommends the use of a selection list\n * when it’s clear that the user can only select just one option from the range provided.\n */\nexport const HvSelectionList = forwardRef<\n  HTMLUListElement,\n  HvSelectionListProps\n>(function HvSelectionList(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    children,\n    name,\n    value: valueProp,\n    defaultValue,\n    required,\n    readOnly,\n    disabled,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    orientation = \"vertical\",\n    multiple = false,\n    singleSelectionToggle = false,\n    ...others\n  } = useDefaultProps(\"HvSelectionList\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const [value, setValue] = useControlled(\n    valueProp,\n    defaultValue !== undefined\n      ? defaultValue\n      : // when uncontrolled and no default value is given,\n        // extract the initial selected values from the children own state\n        () => getValueFromSelectedChildren(children, multiple),\n  );\n\n  const [validationState, setValidationState] = useControlled<HvFormStatus>(\n    status,\n    \"standBy\",\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [allValues, selectedState] = useMemo(() => {\n    const childValues: any[] = [];\n    const childSelectedState: boolean[] = [];\n\n    Children.toArray(children).forEach((child: any, i: number) => {\n      const childValue = child?.props?.value;\n      const childIsSelected = multiple\n        ? value.indexOf(childValue) !== -1\n        : value === childValue;\n\n      childValues[i] = childValue;\n      childSelectedState[i] = childIsSelected;\n    });\n\n    return [childValues, childSelectedState];\n  }, [children, multiple, value]);\n\n  const selectionAnchor = useRef(undefined);\n\n  const listRef = useRef<any>(null);\n  const listForkedRef = useForkRef(ref, listRef);\n\n  useEffect(() => {\n    const handleMeta = (event: KeyboardEvent) => {\n      const tempArray: any[] = [];\n      if (\n        (isKey(event, \"ArrowUp\") &&\n          event.shiftKey &&\n          listRef.current.contains(event.target)) ||\n        (isKey(event, \"ArrowDown\") &&\n          event.shiftKey &&\n          listRef.current.contains(event.target))\n      ) {\n        selectedState.forEach((isSelected, i) => {\n          if (i === (event.target as any).value - 1) {\n            if (!isSelected) {\n              tempArray.push(allValues[i]);\n            }\n          } else if (isSelected) {\n            tempArray.push(allValues[i]);\n          }\n        });\n        setValue(tempArray);\n      }\n    };\n    window.addEventListener(\"keyup\", handleMeta);\n\n    return () => {\n      window.removeEventListener(\"keyup\", handleMeta);\n    };\n  }, [allValues, selectedState, setValue]);\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnClick: (e: React.MouseEvent) => void,\n      evt: React.MouseEvent,\n    ) => {\n      childOnClick?.(evt);\n\n      if (!readOnly && !disabled) {\n        let newValue: any;\n        if (multiple) {\n          newValue = multiSelectionEventHandler(\n            evt,\n            index,\n            selectionAnchor,\n            allValues,\n            selectedState,\n            undefined,\n          );\n        } else {\n          newValue =\n            singleSelectionToggle && selectedState[index]\n              ? null\n              : allValues[index];\n        }\n\n        onChange?.(evt, 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    [\n      allValues,\n      disabled,\n      multiple,\n      onChange,\n      readOnly,\n      required,\n      selectedState,\n      setValidationState,\n      setValue,\n      singleSelectionToggle,\n      selectionAnchor,\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        role: \"option\",\n        selected: childIsSelected,\n        onClick: (evt) =>\n          onChildChangeInterceptor(i, child?.props?.onClick, evt),\n        disabled: disabled || child?.props?.disabled,\n      });\n    });\n  }, [children, disabled, onChildChangeInterceptor, selectedState]);\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  const listId = (label && setId(elementId, \"listbox\")) || \"\";\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      {description && (\n        <HvInfoMessage\n          id={setId(elementId, \"description\")}\n          className={classes.description}\n        >\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <HvListContainer\n        id={listId}\n        interactive\n        condensed\n        role=\"listbox\"\n        aria-multiselectable={multiple || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\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.listbox, {\n          [classes.vertical]: orientation === \"vertical\",\n          [classes.horizontal]: orientation === \"horizontal\",\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        ref={listForkedRef}\n        {...others}\n      >\n        {modifiedChildren}\n      </HvListContainer>\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"],"names":["HvSelectionList"],"mappings":";;;;;;;;;;;;;;;;AA4FA,MAAM,+BAA+B,CACnC,UACA,aACG;AACH,QAAM,iBAAiB,SAAS,QAAQ,QAAQ,EAC7C,IAAI,CAAC,UAAe;AACb,UAAA,oBAAoB,OAAO,OAAO,aAAa;AACrD,UAAM,kBACJ,SAAS,oBACL,MAAM,OAAO,WACb,MAAM,OAAO;AAEZ,WAAA,kBAAkB,OAAO,MAAM,QAAQ;AAAA,EAC/C,CAAA,EACA,OAAO,CAAC,MAAM,MAAM,MAAS;AAEzB,SAAA,WAAW,iBAAiB,iBAAiB,CAAC;AACvD;AAQO,MAAM,kBAAkB,WAG7B,SAASA,iBAAgB,OAAO,KAAK;AAC/B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,wBAAwB;AAAA,IACxB,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,YAAY,YAAY,EAAE;AAE1B,QAAA,CAAC,OAAO,QAAQ,IAAI;AAAA,IACxB;AAAA,IACA,iBAAiB,SACb;AAAA;AAAA;AAAA,MAGA,MAAM,6BAA6B,UAAU,QAAQ;AAAA;AAAA,EAC3D;AAEM,QAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,IACA;AAAA,EACF;AAEA,QAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AAEnE,QAAM,CAAC,WAAW,aAAa,IAAI,QAAQ,MAAM;AAC/C,UAAM,cAAqB,CAAC;AAC5B,UAAM,qBAAgC,CAAC;AAEvC,aAAS,QAAQ,QAAQ,EAAE,QAAQ,CAAC,OAAY,MAAc;AACtD,YAAA,aAAa,OAAO,OAAO;AACjC,YAAM,kBAAkB,WACpB,MAAM,QAAQ,UAAU,MAAM,KAC9B,UAAU;AAEd,kBAAY,CAAC,IAAI;AACjB,yBAAmB,CAAC,IAAI;AAAA,IAAA,CACzB;AAEM,WAAA,CAAC,aAAa,kBAAkB;AAAA,EACtC,GAAA,CAAC,UAAU,UAAU,KAAK,CAAC;AAExB,QAAA,kBAAkB,OAAO,MAAS;AAElC,QAAA,UAAU,OAAY,IAAI;AAC1B,QAAA,gBAAgB,WAAW,KAAK,OAAO;AAE7C,YAAU,MAAM;AACR,UAAA,aAAa,CAAC,UAAyB;AAC3C,YAAM,YAAmB,CAAC;AAEvB,UAAA,MAAM,OAAO,SAAS,KACrB,MAAM,YACN,QAAQ,QAAQ,SAAS,MAAM,MAAM,KACtC,MAAM,OAAO,WAAW,KACvB,MAAM,YACN,QAAQ,QAAQ,SAAS,MAAM,MAAM,GACvC;AACc,sBAAA,QAAQ,CAAC,YAAY,MAAM;AACvC,cAAI,MAAO,MAAM,OAAe,QAAQ,GAAG;AACzC,gBAAI,CAAC,YAAY;AACL,wBAAA,KAAK,UAAU,CAAC,CAAC;AAAA,YAAA;AAAA,qBAEpB,YAAY;AACX,sBAAA,KAAK,UAAU,CAAC,CAAC;AAAA,UAAA;AAAA,QAC7B,CACD;AACD,iBAAS,SAAS;AAAA,MAAA;AAAA,IAEtB;AACO,WAAA,iBAAiB,SAAS,UAAU;AAE3C,WAAO,MAAM;AACJ,aAAA,oBAAoB,SAAS,UAAU;AAAA,IAChD;AAAA,EACC,GAAA,CAAC,WAAW,eAAe,QAAQ,CAAC;AAEvC,QAAM,2BAA2B;AAAA,IAC/B,CACE,OACA,cACA,QACG;AACH,qBAAe,GAAG;AAEd,UAAA,CAAC,YAAY,CAAC,UAAU;AACtB,YAAA;AACJ,YAAI,UAAU;AACD,qBAAA;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QAAA,OACK;AACL,qBACE,yBAAyB,cAAc,KAAK,IACxC,OACA,UAAU,KAAK;AAAA,QAAA;AAGvB,mBAAW,KAAK,QAAQ;AAExB,iBAAS,MAAM;AAGT,cAAA,YAAY,SAAS,WAAW,GAAG;AACrC,+BAAmB,SAAS;AAAA,UAAA,OACvB;AACL,+BAAmB,OAAO;AAAA,UAAA;AAGrB,iBAAA;AAAA,QAAA,CACR;AAAA,MAAA;AAAA,IAEL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAEM,QAAA,mBAAmB,QAAQ,MAAM;AACrC,WAAO,SAAS,IAAI,UAAU,CAAC,OAAY,MAAc;AACjD,YAAA,kBAAkB,cAAc,CAAC;AAEvC,aAAO,aAAa,OAAO;AAAA,QACzB,MAAM;AAAA,QACN,UAAU;AAAA,QACV,SAAS,CAAC,QACR,yBAAyB,GAAG,OAAO,OAAO,SAAS,GAAG;AAAA,QACxD,UAAU,YAAY,OAAO,OAAO;AAAA,MAAA,CACrC;AAAA,IAAA,CACF;AAAA,KACA,CAAC,UAAU,UAAU,0BAA0B,aAAa,CAAC;AAM1D,QAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UAAa;AAE7B,QAAM,iBAAiB,eACnB,MAAM,WAAW,OAAO,IACxB;AAEJ,QAAM,SAAU,SAAS,MAAM,WAAW,SAAS,KAAM;AAGvD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MAEpC,UAAA;AAAA,QACC,SAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,YAAU;AAAA,YACV,IAAI,MAAM,WAAW,OAAO;AAAA,YAC5B;AAAA,YACA,WAAW,QAAQ;AAAA,UAAA;AAAA,QACrB;AAAA,QAED,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,WAAW,aAAa;AAAA,YAClC,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAGF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,aAAW;AAAA,YACX,WAAS;AAAA,YACT,MAAK;AAAA,YACL,wBAAsB,YAAY;AAAA,YAClC,cAAY;AAAA,YACZ,mBACE,CAAC,SAAS,MAAM,WAAW,OAAO,GAAG,cAAc,EAChD,KAAK,GAAG,EACR,UAAU;AAAA,YAEf,gBAAc,oBAAoB,YAAY,OAAO;AAAA,YACrD,qBACE,oBAAoB,YAAY,iBAAiB;AAAA,YAEnD,oBACE,CAAC,eAAe,MAAM,WAAW,aAAa,GAAG,eAAe,EAC7D,KAAK,GAAG,EACR,UAAU;AAAA,YAEf,WAAW,GAAG,QAAQ,SAAS;AAAA,cAC7B,CAAC,QAAQ,QAAQ,GAAG,gBAAgB;AAAA,cACpC,CAAC,QAAQ,UAAU,GAAG,gBAAgB;AAAA,cACtC,CAAC,QAAQ,OAAO,GAAG,oBAAoB;AAAA,YAAA,CACxC;AAAA,YACD,KAAK;AAAA,YACJ,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAEC,gBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,WAAW,OAAO;AAAA,YAC5B,eAAa;AAAA,YACb,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"SelectionList.js","sources":["../../../src/SelectionList/SelectionList.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\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 { HvListContainer } from \"../ListContainer\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { multiSelectionEventHandler } from \"../utils/multiSelectionEventHandler\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./SelectionList.styles\";\n\nexport { staticClasses as selectionListClasses };\n\nexport type HvSelectionListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectionListProps\n  extends HvBaseProps<HTMLUListElement, \"onChange\"> {\n  /** The form element name. */\n  name?: string;\n  /**\n   * The value of the form element. It must be represented in the child list items.\n   *\n   * Can either be a single value (when multiple = false) or an\n   * array of values (when multiple = true).\n   *\n   * When defined the selection list state becomes controlled.\n   */\n  value?: any | any[];\n  /** When uncontrolled, defines the initial value. */\n  defaultValue?: any | 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  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. If `true` the state is propagated to the children list items. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\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?: string;\n  /** Indicates that the user may select more than one item from the current selectable list items. */\n  multiple?: boolean;\n  /** If `true`, selection can be toggled when single selection. */\n  singleSelectionToggle?: boolean;\n  /** Indicates whether the list orientation is horizontal or vertical. Defaults to vertical. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.MouseEvent, value: any) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSelectionListClasses;\n}\n\nconst getValueFromSelectedChildren = (\n  children: React.ReactNode,\n  multiple: boolean,\n) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.selected !== undefined;\n      const childIsSelected =\n        child && childIsControlled\n          ? child.props?.selected\n          : child.props?.defaultSelected;\n\n      return childIsSelected ? child?.props.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return multiple ? selectedValues : selectedValues?.[0];\n};\n\n/**\n * Allows the user to select one or more items from a list of choices.\n *\n * Although it supports multi-selection, DS recommends the use of a selection list\n * when it’s clear that the user can only select just one option from the range provided.\n */\nexport const HvSelectionList = forwardRef<\n  HTMLUListElement,\n  HvSelectionListProps\n>(function HvSelectionList(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    children,\n    name,\n    value: valueProp,\n    defaultValue,\n    required,\n    readOnly,\n    disabled,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    orientation = \"vertical\",\n    multiple = false,\n    singleSelectionToggle = false,\n    ...others\n  } = useDefaultProps(\"HvSelectionList\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const [value, setValue] = useControlled(\n    valueProp,\n    defaultValue !== undefined\n      ? defaultValue\n      : // when uncontrolled and no default value is given,\n        // extract the initial selected values from the children own state\n        () => getValueFromSelectedChildren(children, multiple),\n  );\n\n  const [validationState, setValidationState] = useControlled<HvFormStatus>(\n    status,\n    \"standBy\",\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [allValues, selectedState] = useMemo(() => {\n    const childValues: any[] = [];\n    const childSelectedState: boolean[] = [];\n\n    Children.toArray(children).forEach((child: any, i: number) => {\n      const childValue = child?.props?.value;\n      const childIsSelected = multiple\n        ? value.indexOf(childValue) !== -1\n        : value === childValue;\n\n      childValues[i] = childValue;\n      childSelectedState[i] = childIsSelected;\n    });\n\n    return [childValues, childSelectedState];\n  }, [children, multiple, value]);\n\n  const selectionAnchor = useRef(undefined);\n\n  const listRef = useRef<any>(null);\n  const listForkedRef = useForkRef(ref, listRef);\n\n  useEffect(() => {\n    const handleMeta = (event: KeyboardEvent) => {\n      const tempArray: any[] = [];\n      if (\n        (isKey(event, \"ArrowUp\") &&\n          event.shiftKey &&\n          listRef.current.contains(event.target)) ||\n        (isKey(event, \"ArrowDown\") &&\n          event.shiftKey &&\n          listRef.current.contains(event.target))\n      ) {\n        selectedState.forEach((isSelected, i) => {\n          if (i === (event.target as any).value - 1) {\n            if (!isSelected) {\n              tempArray.push(allValues[i]);\n            }\n          } else if (isSelected) {\n            tempArray.push(allValues[i]);\n          }\n        });\n        setValue(tempArray);\n      }\n    };\n    window.addEventListener(\"keyup\", handleMeta);\n\n    return () => {\n      window.removeEventListener(\"keyup\", handleMeta);\n    };\n  }, [allValues, selectedState, setValue]);\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnClick: (e: React.MouseEvent) => void,\n      evt: React.MouseEvent,\n    ) => {\n      childOnClick?.(evt);\n\n      if (!readOnly && !disabled) {\n        let newValue: any;\n        if (multiple) {\n          newValue = multiSelectionEventHandler(\n            evt,\n            index,\n            selectionAnchor,\n            allValues,\n            selectedState,\n            undefined,\n          );\n        } else {\n          newValue =\n            singleSelectionToggle && selectedState[index]\n              ? null\n              : allValues[index];\n        }\n\n        onChange?.(evt, 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    [\n      allValues,\n      disabled,\n      multiple,\n      onChange,\n      readOnly,\n      required,\n      selectedState,\n      setValidationState,\n      setValue,\n      singleSelectionToggle,\n      selectionAnchor,\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        role: \"option\",\n        selected: childIsSelected,\n        onClick: (evt) =>\n          onChildChangeInterceptor(i, child?.props?.onClick, evt),\n        disabled: disabled || child?.props?.disabled,\n      });\n    });\n  }, [children, disabled, onChildChangeInterceptor, selectedState]);\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  const listId = (label && setId(elementId, \"listbox\")) || \"\";\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      {description && (\n        <HvInfoMessage\n          id={setId(elementId, \"description\")}\n          className={classes.description}\n        >\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <HvListContainer\n        id={listId}\n        interactive\n        condensed\n        role=\"listbox\"\n        aria-multiselectable={multiple || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\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.listbox, {\n          [classes.vertical]: orientation === \"vertical\",\n          [classes.horizontal]: orientation === \"horizontal\",\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        ref={listForkedRef}\n        {...others}\n      >\n        {modifiedChildren}\n      </HvListContainer>\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"],"names":["HvSelectionList"],"mappings":"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"}

package/dist/esm/Slider/Slider.js

@@ -10,7 +10,7 @@ import { setId } from "../utils/setId.js";
 import { useClasses, sliderStyles } from "./Slider.styles.js";
 import { staticClasses } from "./Slider.styles.js";
 import { HvSliderInput } from "./SliderInput/SliderInput.js";
-import { calculateStepValue, createMark, isSingleSlider, knobsValuesToKnobsPositions, convertStatusToArray, generateDefaultKnobProperties, createTrackStyles, createKnobStyles, knobsPositionToScaledValue, knobsPositionsToKnobsValues, statusArrayToFormStatus, scaledValueToKnobsPositionValue, ensureValuesConsistency } from "./utils.js";
+import { calculateStepValue, createMark, isSingleSlider, knobsValuesToKnobsPositions, convertStatusToArray, generateDefaultKnobProperties, createTrackStyles, createKnobStyles, knobsPositionToScaledValue, knobsPositionsToKnobsValues, statusArrayToFormStatus, ensureValuesConsistency, scaledValueToKnobsPositionValue } from "./utils.js";
 import { validationStates } from "../FormElement/utils.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvLabel } from "../FormElement/Label/Label.js";

package/dist/esm/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/Slider/Slider.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport Slider, { SliderProps, SliderRef } from \"rc-slider\";\nimport Tooltip from \"rc-tooltip\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvLabel,\n  HvWarningText,\n  validationStates,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\nimport {\n  calculateStepValue,\n  convertStatusToArray,\n  createKnobStyles,\n  createMark,\n  createTrackStyles,\n  ensureValuesConsistency,\n  generateDefaultKnobProperties,\n  isSingleSlider,\n  knobsPositionsToKnobsValues,\n  knobsPositionToScaledValue,\n  knobsValuesToKnobsPositions,\n  scaledValueToKnobsPositionValue,\n  statusArrayToFormStatus,\n} from \"./utils\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onBlur\"> {\n  /** The slider name. */\n  name?: string;\n  /** The label of the slider. If not provided, an aria-label or aria-labelledby must be inputted via sliderProps. */\n  label?: React.ReactNode;\n  /** Indicates that the slider is disabled. */\n  disabled?: boolean;\n  /** Indicates that the slider is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user slider is required on the form element. */\n  required?: boolean;\n  /** Error message to render when the value is required. */\n  requiredMessage?: string;\n  /** If `true` the input that controls the slider is hidden. */\n  hideInput?: boolean;\n  /** Attributes applied to the slider element. */\n  sliderProps?: SliderProps;\n  /**\n   * The status of the slider 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 | HvFormStatus[];\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: React.ReactNode;\n  /** The values array to apply to the component */\n  values?: number[];\n  /** The default values array to apply to the component */\n  defaultValues?: (number | undefined)[];\n  /**\n   * The object used to set the knob properties,\n   * for every item in the array a new knob will be created.\n   */\n  knobProperties?: HvKnobProperty[];\n  /** The object used to set the mark properties individually. */\n  markProperties?: HvMarkProperty[];\n  /**\n   * The function executed before a change will occur in the slider.\n   * @deprecated It's always better to use onChange instead\n   */\n  onBeforeChange?: (value: number[]) => void;\n  /** The function executed while a change is occurring in the slider. */\n  onChange?: (value: number[]) => void;\n  /**\n   * The function executed after a change ocurred in the slider.\n   * @deprecated It's always better to use onChange instead\n   */\n  onAfterChange?: (value: number[]) => void;\n  /** The function executed after a blur ocurred in the slider. */\n  onBlur?: (\n    event: React.FocusEvent,\n    knobsValues: number[],\n    status?: HvFormStatus | HvFormStatus[],\n  ) => void;\n  /**\n   * The separation in points between marks.\n   * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n   */\n  markStep?: number;\n  /** How many subdivisions there are in the slider. */\n  divisionQuantity?: number;\n  /** The value of the first point in the slider from left to right. */\n  minPointValue?: number;\n  /** The value of the last point in the slider from left to right. */\n  maxPointValue?: number;\n  /** Error message to render when the value is higher than maxPointValue or lower than minPointValue. */\n  outOfRangeMessage?: string;\n  /** The max number of decimals if no format function is applied */\n  markDigits?: number;\n  /**\n   * A formatting function used to add format to the marks in the track,\n   * the function receives the mark text\n   */\n  formatMark?: (label: React.ReactNode) => React.ReactNode;\n  /**\n   * A formatting function used to add format to the tooltip in the track,\n   * the function receives the mark text\n   */\n  formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n  /** If `true` the knobs can't have the same value, if `false` knobs can have the same value. */\n  noOverlap?: boolean;\n  /** Attributes applied to the input element. */\n  inputProps?: HvInputProps[];\n  /** Attributes applied to the knob element. */\n  knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n  /** The classes object to be applied into the root object. */\n  classes?: HvSliderClasses;\n}\n\n/**\n * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n */\nexport const HvSlider = forwardRef<\n  // no-indent\n  SliderRef,\n  HvSliderProps\n>(function HvSlider(props, ref) {\n  const {\n    id,\n    className,\n    name,\n    label,\n    status,\n    statusMessage,\n    disabled,\n    classes: classesProp,\n    sliderProps,\n    knobProps,\n    inputProps,\n    requiredMessage = \"The value is required\",\n    outOfRangeMessage = \"The value is out of range\",\n    noOverlap = true,\n    hideInput,\n    required,\n    readOnly,\n    markProperties = [],\n    defaultValues = [undefined],\n    values: valuesProp = [],\n    knobProperties: knobPropertiesProp,\n    \"aria-errormessage\": ariaErrorMessage,\n    maxPointValue = 100,\n    minPointValue = 0,\n    divisionQuantity = 100,\n    markStep = 20,\n    markDigits = 0,\n    formatMark,\n    onChange,\n    onBlur,\n    onBeforeChange,\n    onAfterChange,\n    formatTooltip,\n    ...others\n  } = useDefaultProps(\"HvSlider\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  // Miscellaneous state\n  const hasLabel = label != null;\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  const elementId = useUniqueId(id);\n\n  const sliderInputId = setId(elementId, \"input\");\n\n  const stepValue = useMemo(\n    () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n    [divisionQuantity, maxPointValue, minPointValue],\n  );\n\n  const inverseStepValue = 1 / stepValue;\n\n  const marks = useMemo(\n    () =>\n      createMark(\n        markProperties,\n        markStep,\n        divisionQuantity,\n        minPointValue,\n        maxPointValue,\n        stepValue,\n        markDigits,\n        !!disabled,\n        formatMark,\n      ),\n    [\n      disabled,\n      divisionQuantity,\n      formatMark,\n      markDigits,\n      markProperties,\n      markStep,\n      minPointValue,\n      maxPointValue,\n      stepValue,\n    ],\n  );\n\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      // We always show an error when the value(s) are not between maxPointValue and minPointValue; and when required is true (set by user).\n      status === undefined);\n\n  const isSingle: boolean = useMemo(\n    () => isSingleSlider(valuesProp, defaultValues),\n    [defaultValues, valuesProp],\n  );\n\n  const value: number[] | undefined = useMemo(\n    () =>\n      valuesProp?.length > 0\n        ? knobsValuesToKnobsPositions(\n            valuesProp,\n            inverseStepValue,\n            minPointValue,\n          )\n        : undefined,\n    [inverseStepValue, minPointValue, valuesProp],\n  );\n\n  const defaultKnobsPositions: number[] = useMemo(\n    () =>\n      knobsValuesToKnobsPositions(\n        defaultValues,\n        inverseStepValue,\n        minPointValue,\n      ),\n    [defaultValues, inverseStepValue, minPointValue],\n  );\n\n  const [knobsPositions, setKnobsPositions] = useControlled(\n    value,\n    defaultKnobsPositions,\n  );\n\n  // Validation related state\n  const { arrayStatus, arrayDefaultStatus } = useMemo(\n    () => convertStatusToArray(knobsPositions.length, status),\n    [knobsPositions.length, status],\n  );\n\n  const [validationStatus, setValidationState] = useControlled(\n    arrayStatus,\n    arrayDefaultStatus,\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\",\n  );\n\n  const [isDraggingTrack, setIsDraggingTrack] = useState(false);\n\n  const knobProperties = generateDefaultKnobProperties(\n    knobsPositions.length,\n    disabled,\n    knobPropertiesProp,\n  );\n\n  const rangesCount = knobProperties.length - 1;\n\n  const trackStyles = createTrackStyles(knobProperties);\n\n  const knobStyles = createKnobStyles(knobProperties);\n\n  /**\n   * Generates an object which posses the current value and position of the knobs.\n   *\n   * @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n   * @returns {Object} - An object with the positions and values of the knobs.\n   * @memberof HvSlider\n   */\n  const generateKnobsPositionAndValues = useCallback(\n    (\n      knobsCurrentPosition: number[],\n    ): { knobsPosition: number[]; knobsValues: number[] } => {\n      const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n      const knobsValues: number[] = [];\n\n      let duplicatedValue: number | null = null;\n\n      const findDuplicated: number[] = newKnobsPosition.filter(\n        (item, index) => newKnobsPosition.indexOf(item) !== index,\n      );\n\n      if (noOverlap && findDuplicated.length > 0) {\n        [duplicatedValue] = findDuplicated;\n      }\n\n      newKnobsPosition.forEach((position, index, array) => {\n        const newArray: number[] = array;\n        let newPosition: number = position;\n\n        if (noOverlap && newPosition === duplicatedValue) {\n          const previousValue = knobsPositions[index];\n          if (previousValue !== newPosition) {\n            newPosition += newPosition > previousValue ? -1 : 1;\n            newArray[index] = newPosition;\n          }\n        }\n\n        knobsValues[index] = knobsPositionToScaledValue(\n          newPosition,\n          minPointValue,\n          stepValue,\n        );\n      });\n\n      return {\n        knobsPosition: newKnobsPosition,\n        knobsValues,\n      };\n    },\n    [knobsPositions, minPointValue, noOverlap, stepValue],\n  );\n\n  const performValidation = useCallback(() => {\n    let invalid = false;\n    let requiredMsg = false;\n\n    const mappedValues =\n      generateKnobsPositionAndValues(knobsPositions).knobsValues;\n\n    const newValidationState = mappedValues.map((knobValue) => {\n      if (required && (knobValue == null || Number.isNaN(knobValue))) {\n        invalid = true;\n        requiredMsg = true;\n        return validationStates.invalid;\n      }\n\n      if (knobValue < minPointValue || knobValue > maxPointValue) {\n        invalid = true;\n        return validationStates.invalid;\n      }\n\n      return validationStates.valid;\n    });\n\n    setValidationState([...newValidationState]);\n\n    if (invalid) {\n      setValidationMessage(requiredMsg ? requiredMessage : outOfRangeMessage);\n      return;\n    }\n\n    setValidationMessage(\"\");\n  }, [\n    generateKnobsPositionAndValues,\n    knobsPositions,\n    maxPointValue,\n    minPointValue,\n    outOfRangeMessage,\n    required,\n    requiredMessage,\n    setValidationMessage,\n    setValidationState,\n  ]);\n\n  useEffect(() => {\n    const stepVl = calculateStepValue(\n      maxPointValue,\n      minPointValue,\n      divisionQuantity,\n    );\n\n    const inverseStepVl = 1 / stepVl;\n\n    if (valuesProp?.length > 0) {\n      setKnobsPositions(\n        knobsValuesToKnobsPositions(\n          valuesProp.length > 0 ? valuesProp : defaultValues,\n          inverseStepVl,\n          minPointValue,\n        ),\n      );\n    }\n  }, [\n    defaultValues,\n    divisionQuantity,\n    maxPointValue,\n    minPointValue,\n    setKnobsPositions,\n    valuesProp,\n  ]);\n\n  useEffect(() => {\n    if (!isDirty.current) {\n      // Skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [knobsPositions, requiredMessage, performValidation]);\n\n  const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n    if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n      setIsDraggingTrack(true);\n    }\n  };\n\n  const onMouseUpHandler = () => {\n    setIsDraggingTrack(false);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n    performValidation();\n\n    onBlur?.(event, knobs.knobsValues, status);\n  };\n\n  /**\n   * Function executed while the knobs changes.\n   *\n   * executes the callback provided by the user with the values and position of the knobs,\n   * also lock the value of the knob in case one is fixed.\n   */\n  const onChangeHandler = (knobsPosition: number[]) => {\n    isDirty.current = true;\n\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    knobProperties.forEach((knobProperty, index) => {\n      if (knobProperty.fixed) {\n        knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n          defaultValues[index],\n          minPointValue,\n          inverseStepValue,\n        );\n      }\n    });\n\n    if (disabled || readOnly) return;\n    onChange?.(knobs.knobsValues);\n\n    setKnobsPositions(knobs.knobsPosition);\n  };\n\n  const onInputChangeHandler = (inputValues: number[], index: number) => {\n    let newKnobPositions = knobsValuesToKnobsPositions(\n      inputValues,\n      inverseStepValue,\n      minPointValue,\n    );\n\n    newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n    onChangeHandler(newKnobPositions);\n  };\n\n  /**\n   * Function executed before a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   */\n  const onBeforeChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onBeforeChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function executed after a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   */\n  const onAfterChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onAfterChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function used to create a custom knob for the slider.\n   *\n   * TODO: This should be isolated because is creating a sub component,\n   * but there were some problems regarding the underlying component losing\n   * references of the handlers disabling the focus.\n   */\n  const createKnob: SliderProps[\"handleRender\"] = (knobNode, params) => {\n    const { value: knobValue, dragging, index } = params;\n    const { style = {}, ...restProps } = knobNode.props;\n    const scaledKnobValue = knobsPositionToScaledValue(\n      knobValue,\n      minPointValue,\n      stepValue,\n    ).toFixed(markDigits);\n    if (dragging) {\n      style.backgroundColor = knobProperties[index]?.dragColor;\n    } else {\n      style.backgroundColor = knobProperties[index]?.color;\n    }\n\n    const isEmpty =\n      Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;\n    const handleId = setId(elementId, \"knob\");\n    const indexedHandleId = setId(handleId, index);\n\n    return (\n      <div\n        key={index}\n        className={cx({\n          [classes.handleContainer]: !!(!disabled && !isEmpty),\n          [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n          [classes.handleHiddenContainer]: isEmpty || readOnly,\n        })}\n      >\n        <Tooltip\n          prefixCls=\"rc-slider-tooltip\"\n          overlay={formatTooltip?.(scaledKnobValue) || scaledKnobValue}\n          visible={dragging}\n          placement=\"top\"\n          overlayClassName={classes.sliderTooltip}\n          getTooltipContainer={() => getElementById(indexedHandleId)!}\n        >\n          <div\n            id={indexedHandleId}\n            style={style}\n            className={classes.handle}\n            {...restProps}\n            aria-label={`${label}-knob-${index}`}\n            aria-valuenow={knobsPositionToScaledValue(\n              knobValue,\n              minPointValue,\n              stepValue,\n            )}\n            aria-valuemin={minPointValue}\n            aria-valuemax={maxPointValue}\n            {...knobProps?.[index]}\n          />\n        </Tooltip>\n      </div>\n    );\n  };\n\n  const knobsValuesArray = knobsPositionsToKnobsValues(\n    knobsPositions,\n    stepValue,\n    minPointValue,\n  );\n\n  const knobsValues = knobsValuesArray.map((v) =>\n    Number(v.toFixed(markDigits)),\n  );\n\n  return (\n    <HvFormElement\n      className={cx(\n        classes.root,\n        {\n          [classes.trackStandBy]:\n            !readOnly && !disabled && !isSingle && !isDraggingTrack,\n          [classes.trackDragging]:\n            !readOnly && !disabled && !isSingle && isDraggingTrack,\n          [classes.rootDisabled]: !!disabled,\n        },\n        className,\n      )}\n      id={id}\n      name={name}\n      status={statusArrayToFormStatus(validationStatus)}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      onMouseDown={onMouseDownHandler}\n      onMouseUp={onMouseUpHandler}\n      onBlur={onBlurHandler}\n      {...others}\n    >\n      {(hasLabel || !hideInput) && (\n        <div\n          className={cx(classes.labelContainer, {\n            [classes.labelIncluded]: hasLabel,\n            [classes.onlyInput]: !hasLabel,\n          })}\n        >\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              className={classes.label}\n              htmlFor={sliderInputId}\n              label={label}\n            />\n          )}\n\n          {!hideInput && (\n            <HvSliderInput\n              id={sliderInputId}\n              label={label}\n              values={knobsValues}\n              onChange={onInputChangeHandler}\n              status={validationStatus}\n              disabled={disabled}\n              readOnly={readOnly}\n              markDigits={markDigits}\n              inputProps={inputProps}\n            />\n          )}\n        </div>\n      )}\n\n      <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n        <Slider\n          ref={ref}\n          range={!isSingle}\n          handleRender={createKnob}\n          className={cx(classes.sliderRoot, {\n            [classes.rootRange]: !isSingle,\n          })}\n          min={0}\n          max={divisionQuantity}\n          step={1}\n          marks={marks}\n          dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n          onChange={(singleValue) =>\n            onChangeHandler(Array<number>().concat(singleValue))\n          }\n          onBeforeChange={(singleValue) =>\n            onBeforeChangeHandler(Array<number>().concat(singleValue))\n          }\n          onAfterChange={(singleValue) =>\n            onAfterChangeHandler(Array<number>().concat(singleValue))\n          }\n          value={\n            knobsPositions.length === 0\n              ? undefined\n              : isSingle\n                ? knobsPositions[0]\n                : [...knobsPositions]\n          }\n          allowCross={false}\n          disabled={disabled}\n          count={rangesCount}\n          railStyle={sliderStyles.rail}\n          handleStyle={knobStyles.knobInner}\n          trackStyle={trackStyles}\n          draggableTrack={!readOnly && !isSingle}\n          {...sliderProps}\n        />\n      </div>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          className={classes.error}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvSlider","knobsValues"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../src/Slider/Slider.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport Slider, { SliderProps, SliderRef } from \"rc-slider\";\nimport Tooltip from \"rc-tooltip\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvLabel,\n  HvWarningText,\n  validationStates,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\nimport {\n  calculateStepValue,\n  convertStatusToArray,\n  createKnobStyles,\n  createMark,\n  createTrackStyles,\n  ensureValuesConsistency,\n  generateDefaultKnobProperties,\n  isSingleSlider,\n  knobsPositionsToKnobsValues,\n  knobsPositionToScaledValue,\n  knobsValuesToKnobsPositions,\n  scaledValueToKnobsPositionValue,\n  statusArrayToFormStatus,\n} from \"./utils\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onBlur\"> {\n  /** The slider name. */\n  name?: string;\n  /** The label of the slider. If not provided, an aria-label or aria-labelledby must be inputted via sliderProps. */\n  label?: React.ReactNode;\n  /** Indicates that the slider is disabled. */\n  disabled?: boolean;\n  /** Indicates that the slider is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user slider is required on the form element. */\n  required?: boolean;\n  /** Error message to render when the value is required. */\n  requiredMessage?: string;\n  /** If `true` the input that controls the slider is hidden. */\n  hideInput?: boolean;\n  /** Attributes applied to the slider element. */\n  sliderProps?: SliderProps;\n  /**\n   * The status of the slider 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 | HvFormStatus[];\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: React.ReactNode;\n  /** The values array to apply to the component */\n  values?: number[];\n  /** The default values array to apply to the component */\n  defaultValues?: (number | undefined)[];\n  /**\n   * The object used to set the knob properties,\n   * for every item in the array a new knob will be created.\n   */\n  knobProperties?: HvKnobProperty[];\n  /** The object used to set the mark properties individually. */\n  markProperties?: HvMarkProperty[];\n  /**\n   * The function executed before a change will occur in the slider.\n   * @deprecated It's always better to use onChange instead\n   */\n  onBeforeChange?: (value: number[]) => void;\n  /** The function executed while a change is occurring in the slider. */\n  onChange?: (value: number[]) => void;\n  /**\n   * The function executed after a change ocurred in the slider.\n   * @deprecated It's always better to use onChange instead\n   */\n  onAfterChange?: (value: number[]) => void;\n  /** The function executed after a blur ocurred in the slider. */\n  onBlur?: (\n    event: React.FocusEvent,\n    knobsValues: number[],\n    status?: HvFormStatus | HvFormStatus[],\n  ) => void;\n  /**\n   * The separation in points between marks.\n   * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n   */\n  markStep?: number;\n  /** How many subdivisions there are in the slider. */\n  divisionQuantity?: number;\n  /** The value of the first point in the slider from left to right. */\n  minPointValue?: number;\n  /** The value of the last point in the slider from left to right. */\n  maxPointValue?: number;\n  /** Error message to render when the value is higher than maxPointValue or lower than minPointValue. */\n  outOfRangeMessage?: string;\n  /** The max number of decimals if no format function is applied */\n  markDigits?: number;\n  /**\n   * A formatting function used to add format to the marks in the track,\n   * the function receives the mark text\n   */\n  formatMark?: (label: React.ReactNode) => React.ReactNode;\n  /**\n   * A formatting function used to add format to the tooltip in the track,\n   * the function receives the mark text\n   */\n  formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n  /** If `true` the knobs can't have the same value, if `false` knobs can have the same value. */\n  noOverlap?: boolean;\n  /** Attributes applied to the input element. */\n  inputProps?: HvInputProps[];\n  /** Attributes applied to the knob element. */\n  knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n  /** The classes object to be applied into the root object. */\n  classes?: HvSliderClasses;\n}\n\n/**\n * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n */\nexport const HvSlider = forwardRef<\n  // no-indent\n  SliderRef,\n  HvSliderProps\n>(function HvSlider(props, ref) {\n  const {\n    id,\n    className,\n    name,\n    label,\n    status,\n    statusMessage,\n    disabled,\n    classes: classesProp,\n    sliderProps,\n    knobProps,\n    inputProps,\n    requiredMessage = \"The value is required\",\n    outOfRangeMessage = \"The value is out of range\",\n    noOverlap = true,\n    hideInput,\n    required,\n    readOnly,\n    markProperties = [],\n    defaultValues = [undefined],\n    values: valuesProp = [],\n    knobProperties: knobPropertiesProp,\n    \"aria-errormessage\": ariaErrorMessage,\n    maxPointValue = 100,\n    minPointValue = 0,\n    divisionQuantity = 100,\n    markStep = 20,\n    markDigits = 0,\n    formatMark,\n    onChange,\n    onBlur,\n    onBeforeChange,\n    onAfterChange,\n    formatTooltip,\n    ...others\n  } = useDefaultProps(\"HvSlider\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  // Miscellaneous state\n  const hasLabel = label != null;\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  const elementId = useUniqueId(id);\n\n  const sliderInputId = setId(elementId, \"input\");\n\n  const stepValue = useMemo(\n    () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n    [divisionQuantity, maxPointValue, minPointValue],\n  );\n\n  const inverseStepValue = 1 / stepValue;\n\n  const marks = useMemo(\n    () =>\n      createMark(\n        markProperties,\n        markStep,\n        divisionQuantity,\n        minPointValue,\n        maxPointValue,\n        stepValue,\n        markDigits,\n        !!disabled,\n        formatMark,\n      ),\n    [\n      disabled,\n      divisionQuantity,\n      formatMark,\n      markDigits,\n      markProperties,\n      markStep,\n      minPointValue,\n      maxPointValue,\n      stepValue,\n    ],\n  );\n\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      // We always show an error when the value(s) are not between maxPointValue and minPointValue; and when required is true (set by user).\n      status === undefined);\n\n  const isSingle: boolean = useMemo(\n    () => isSingleSlider(valuesProp, defaultValues),\n    [defaultValues, valuesProp],\n  );\n\n  const value: number[] | undefined = useMemo(\n    () =>\n      valuesProp?.length > 0\n        ? knobsValuesToKnobsPositions(\n            valuesProp,\n            inverseStepValue,\n            minPointValue,\n          )\n        : undefined,\n    [inverseStepValue, minPointValue, valuesProp],\n  );\n\n  const defaultKnobsPositions: number[] = useMemo(\n    () =>\n      knobsValuesToKnobsPositions(\n        defaultValues,\n        inverseStepValue,\n        minPointValue,\n      ),\n    [defaultValues, inverseStepValue, minPointValue],\n  );\n\n  const [knobsPositions, setKnobsPositions] = useControlled(\n    value,\n    defaultKnobsPositions,\n  );\n\n  // Validation related state\n  const { arrayStatus, arrayDefaultStatus } = useMemo(\n    () => convertStatusToArray(knobsPositions.length, status),\n    [knobsPositions.length, status],\n  );\n\n  const [validationStatus, setValidationState] = useControlled(\n    arrayStatus,\n    arrayDefaultStatus,\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\",\n  );\n\n  const [isDraggingTrack, setIsDraggingTrack] = useState(false);\n\n  const knobProperties = generateDefaultKnobProperties(\n    knobsPositions.length,\n    disabled,\n    knobPropertiesProp,\n  );\n\n  const rangesCount = knobProperties.length - 1;\n\n  const trackStyles = createTrackStyles(knobProperties);\n\n  const knobStyles = createKnobStyles(knobProperties);\n\n  /**\n   * Generates an object which posses the current value and position of the knobs.\n   *\n   * @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n   * @returns {Object} - An object with the positions and values of the knobs.\n   * @memberof HvSlider\n   */\n  const generateKnobsPositionAndValues = useCallback(\n    (\n      knobsCurrentPosition: number[],\n    ): { knobsPosition: number[]; knobsValues: number[] } => {\n      const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n      const knobsValues: number[] = [];\n\n      let duplicatedValue: number | null = null;\n\n      const findDuplicated: number[] = newKnobsPosition.filter(\n        (item, index) => newKnobsPosition.indexOf(item) !== index,\n      );\n\n      if (noOverlap && findDuplicated.length > 0) {\n        [duplicatedValue] = findDuplicated;\n      }\n\n      newKnobsPosition.forEach((position, index, array) => {\n        const newArray: number[] = array;\n        let newPosition: number = position;\n\n        if (noOverlap && newPosition === duplicatedValue) {\n          const previousValue = knobsPositions[index];\n          if (previousValue !== newPosition) {\n            newPosition += newPosition > previousValue ? -1 : 1;\n            newArray[index] = newPosition;\n          }\n        }\n\n        knobsValues[index] = knobsPositionToScaledValue(\n          newPosition,\n          minPointValue,\n          stepValue,\n        );\n      });\n\n      return {\n        knobsPosition: newKnobsPosition,\n        knobsValues,\n      };\n    },\n    [knobsPositions, minPointValue, noOverlap, stepValue],\n  );\n\n  const performValidation = useCallback(() => {\n    let invalid = false;\n    let requiredMsg = false;\n\n    const mappedValues =\n      generateKnobsPositionAndValues(knobsPositions).knobsValues;\n\n    const newValidationState = mappedValues.map((knobValue) => {\n      if (required && (knobValue == null || Number.isNaN(knobValue))) {\n        invalid = true;\n        requiredMsg = true;\n        return validationStates.invalid;\n      }\n\n      if (knobValue < minPointValue || knobValue > maxPointValue) {\n        invalid = true;\n        return validationStates.invalid;\n      }\n\n      return validationStates.valid;\n    });\n\n    setValidationState([...newValidationState]);\n\n    if (invalid) {\n      setValidationMessage(requiredMsg ? requiredMessage : outOfRangeMessage);\n      return;\n    }\n\n    setValidationMessage(\"\");\n  }, [\n    generateKnobsPositionAndValues,\n    knobsPositions,\n    maxPointValue,\n    minPointValue,\n    outOfRangeMessage,\n    required,\n    requiredMessage,\n    setValidationMessage,\n    setValidationState,\n  ]);\n\n  useEffect(() => {\n    const stepVl = calculateStepValue(\n      maxPointValue,\n      minPointValue,\n      divisionQuantity,\n    );\n\n    const inverseStepVl = 1 / stepVl;\n\n    if (valuesProp?.length > 0) {\n      setKnobsPositions(\n        knobsValuesToKnobsPositions(\n          valuesProp.length > 0 ? valuesProp : defaultValues,\n          inverseStepVl,\n          minPointValue,\n        ),\n      );\n    }\n  }, [\n    defaultValues,\n    divisionQuantity,\n    maxPointValue,\n    minPointValue,\n    setKnobsPositions,\n    valuesProp,\n  ]);\n\n  useEffect(() => {\n    if (!isDirty.current) {\n      // Skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [knobsPositions, requiredMessage, performValidation]);\n\n  const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n    if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n      setIsDraggingTrack(true);\n    }\n  };\n\n  const onMouseUpHandler = () => {\n    setIsDraggingTrack(false);\n  };\n\n  const onBlurHandler = (event: React.FocusEvent) => {\n    const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n    performValidation();\n\n    onBlur?.(event, knobs.knobsValues, status);\n  };\n\n  /**\n   * Function executed while the knobs changes.\n   *\n   * executes the callback provided by the user with the values and position of the knobs,\n   * also lock the value of the knob in case one is fixed.\n   */\n  const onChangeHandler = (knobsPosition: number[]) => {\n    isDirty.current = true;\n\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    knobProperties.forEach((knobProperty, index) => {\n      if (knobProperty.fixed) {\n        knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n          defaultValues[index],\n          minPointValue,\n          inverseStepValue,\n        );\n      }\n    });\n\n    if (disabled || readOnly) return;\n    onChange?.(knobs.knobsValues);\n\n    setKnobsPositions(knobs.knobsPosition);\n  };\n\n  const onInputChangeHandler = (inputValues: number[], index: number) => {\n    let newKnobPositions = knobsValuesToKnobsPositions(\n      inputValues,\n      inverseStepValue,\n      minPointValue,\n    );\n\n    newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n    onChangeHandler(newKnobPositions);\n  };\n\n  /**\n   * Function executed before a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   */\n  const onBeforeChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onBeforeChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function executed after a change.\n   *\n   * executes the callback provided by the user with the values and position of the knobs\n   */\n  const onAfterChangeHandler = (knobsPosition: number[]) => {\n    const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n    onAfterChange?.(knobs.knobsValues);\n  };\n\n  /**\n   * Function used to create a custom knob for the slider.\n   *\n   * TODO: This should be isolated because is creating a sub component,\n   * but there were some problems regarding the underlying component losing\n   * references of the handlers disabling the focus.\n   */\n  const createKnob: SliderProps[\"handleRender\"] = (knobNode, params) => {\n    const { value: knobValue, dragging, index } = params;\n    const { style = {}, ...restProps } = knobNode.props;\n    const scaledKnobValue = knobsPositionToScaledValue(\n      knobValue,\n      minPointValue,\n      stepValue,\n    ).toFixed(markDigits);\n    if (dragging) {\n      style.backgroundColor = knobProperties[index]?.dragColor;\n    } else {\n      style.backgroundColor = knobProperties[index]?.color;\n    }\n\n    const isEmpty =\n      Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;\n    const handleId = setId(elementId, \"knob\");\n    const indexedHandleId = setId(handleId, index);\n\n    return (\n      <div\n        key={index}\n        className={cx({\n          [classes.handleContainer]: !!(!disabled && !isEmpty),\n          [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n          [classes.handleHiddenContainer]: isEmpty || readOnly,\n        })}\n      >\n        <Tooltip\n          prefixCls=\"rc-slider-tooltip\"\n          overlay={formatTooltip?.(scaledKnobValue) || scaledKnobValue}\n          visible={dragging}\n          placement=\"top\"\n          overlayClassName={classes.sliderTooltip}\n          getTooltipContainer={() => getElementById(indexedHandleId)!}\n        >\n          <div\n            id={indexedHandleId}\n            style={style}\n            className={classes.handle}\n            {...restProps}\n            aria-label={`${label}-knob-${index}`}\n            aria-valuenow={knobsPositionToScaledValue(\n              knobValue,\n              minPointValue,\n              stepValue,\n            )}\n            aria-valuemin={minPointValue}\n            aria-valuemax={maxPointValue}\n            {...knobProps?.[index]}\n          />\n        </Tooltip>\n      </div>\n    );\n  };\n\n  const knobsValuesArray = knobsPositionsToKnobsValues(\n    knobsPositions,\n    stepValue,\n    minPointValue,\n  );\n\n  const knobsValues = knobsValuesArray.map((v) =>\n    Number(v.toFixed(markDigits)),\n  );\n\n  return (\n    <HvFormElement\n      className={cx(\n        classes.root,\n        {\n          [classes.trackStandBy]:\n            !readOnly && !disabled && !isSingle && !isDraggingTrack,\n          [classes.trackDragging]:\n            !readOnly && !disabled && !isSingle && isDraggingTrack,\n          [classes.rootDisabled]: !!disabled,\n        },\n        className,\n      )}\n      id={id}\n      name={name}\n      status={statusArrayToFormStatus(validationStatus)}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      onMouseDown={onMouseDownHandler}\n      onMouseUp={onMouseUpHandler}\n      onBlur={onBlurHandler}\n      {...others}\n    >\n      {(hasLabel || !hideInput) && (\n        <div\n          className={cx(classes.labelContainer, {\n            [classes.labelIncluded]: hasLabel,\n            [classes.onlyInput]: !hasLabel,\n          })}\n        >\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              className={classes.label}\n              htmlFor={sliderInputId}\n              label={label}\n            />\n          )}\n\n          {!hideInput && (\n            <HvSliderInput\n              id={sliderInputId}\n              label={label}\n              values={knobsValues}\n              onChange={onInputChangeHandler}\n              status={validationStatus}\n              disabled={disabled}\n              readOnly={readOnly}\n              markDigits={markDigits}\n              inputProps={inputProps}\n            />\n          )}\n        </div>\n      )}\n\n      <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n        <Slider\n          ref={ref}\n          range={!isSingle}\n          handleRender={createKnob}\n          className={cx(classes.sliderRoot, {\n            [classes.rootRange]: !isSingle,\n          })}\n          min={0}\n          max={divisionQuantity}\n          step={1}\n          marks={marks}\n          dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n          onChange={(singleValue) =>\n            onChangeHandler(Array<number>().concat(singleValue))\n          }\n          onBeforeChange={(singleValue) =>\n            onBeforeChangeHandler(Array<number>().concat(singleValue))\n          }\n          onAfterChange={(singleValue) =>\n            onAfterChangeHandler(Array<number>().concat(singleValue))\n          }\n          value={\n            knobsPositions.length === 0\n              ? undefined\n              : isSingle\n                ? knobsPositions[0]\n                : [...knobsPositions]\n          }\n          allowCross={false}\n          disabled={disabled}\n          count={rangesCount}\n          railStyle={sliderStyles.rail}\n          handleStyle={knobStyles.knobInner}\n          trackStyle={trackStyles}\n          draggableTrack={!readOnly && !isSingle}\n          {...sliderProps}\n        />\n      </div>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          className={classes.error}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvSlider","knobsValues"],"mappings":";;;;;;;;;;;;;;;;;AAmJO,MAAM,WAAW,WAItB,SAASA,UAAS,OAAO,KAAK;AACxB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB,CAAC;AAAA,IAClB,gBAAgB,CAAC,MAAS;AAAA,IAC1B,QAAQ,aAAa,CAAC;AAAA,IACtB,gBAAgB;AAAA,IAChB,qBAAqB;AAAA,IACrB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG9C,QAAM,WAAW,SAAS;AAGpB,QAAA,UAAU,OAAO,KAAK;AAEtB,QAAA,YAAY,YAAY,EAAE;AAE1B,QAAA,gBAAgB,MAAM,WAAW,OAAO;AAE9C,QAAM,YAAY;AAAA,IAChB,MAAM,mBAAmB,eAAe,eAAe,gBAAgB;AAAA,IACvE,CAAC,kBAAkB,eAAe,aAAa;AAAA,EACjD;AAEA,QAAM,mBAAmB,IAAI;AAE7B,QAAM,QAAQ;AAAA,IACZ,MACE;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,CAAC,CAAC;AAAA,MACF;AAAA,IACF;AAAA,IACF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB;AAAA,EAE1C,WAAW;AAEf,QAAM,WAAoB;AAAA,IACxB,MAAM,eAAe,YAAY,aAAa;AAAA,IAC9C,CAAC,eAAe,UAAU;AAAA,EAC5B;AAEA,QAAM,QAA8B;AAAA,IAClC,MACE,YAAY,SAAS,IACjB;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IAEF;AAAA,IACN,CAAC,kBAAkB,eAAe,UAAU;AAAA,EAC9C;AAEA,QAAM,wBAAkC;AAAA,IACtC,MACE;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACF,CAAC,eAAe,kBAAkB,aAAa;AAAA,EACjD;AAEM,QAAA,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,IACA;AAAA,EACF;AAGM,QAAA,EAAE,aAAa,mBAAA,IAAuB;AAAA,IAC1C,MAAM,qBAAqB,eAAe,QAAQ,MAAM;AAAA,IACxD,CAAC,eAAe,QAAQ,MAAM;AAAA,EAChC;AAEM,QAAA,CAAC,kBAAkB,kBAAkB,IAAI;AAAA,IAC7C;AAAA,IACA;AAAA,EACF;AAEM,QAAA,CAAC,mBAAmB,oBAAoB,IAAI;AAAA,IAChD;AAAA,IACA;AAAA,EACF;AAEA,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAE5D,QAAM,iBAAiB;AAAA,IACrB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,EACF;AAEM,QAAA,cAAc,eAAe,SAAS;AAEtC,QAAA,cAAc,kBAAkB,cAAc;AAE9C,QAAA,aAAa,iBAAiB,cAAc;AASlD,QAAM,iCAAiC;AAAA,IACrC,CACE,yBACuD;AACjD,YAAA,mBAA6B,qBAAqB,MAAM;AAC9D,YAAMC,eAAwB,CAAC;AAE/B,UAAI,kBAAiC;AAErC,YAAM,iBAA2B,iBAAiB;AAAA,QAChD,CAAC,MAAM,UAAU,iBAAiB,QAAQ,IAAI,MAAM;AAAA,MACtD;AAEI,UAAA,aAAa,eAAe,SAAS,GAAG;AAC1C,SAAC,eAAe,IAAI;AAAA,MAAA;AAGtB,uBAAiB,QAAQ,CAAC,UAAU,OAAO,UAAU;AACnD,cAAM,WAAqB;AAC3B,YAAI,cAAsB;AAEtB,YAAA,aAAa,gBAAgB,iBAAiB;AAC1C,gBAAA,gBAAgB,eAAe,KAAK;AAC1C,cAAI,kBAAkB,aAAa;AAClB,2BAAA,cAAc,gBAAgB,KAAK;AAClD,qBAAS,KAAK,IAAI;AAAA,UAAA;AAAA,QACpB;AAGFA,qBAAY,KAAK,IAAI;AAAA,UACnB;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MAAA,CACD;AAEM,aAAA;AAAA,QACL,eAAe;AAAA,QACf,aAAAA;AAAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,eAAe,WAAW,SAAS;AAAA,EACtD;AAEM,QAAA,oBAAoB,YAAY,MAAM;AAC1C,QAAI,UAAU;AACd,QAAI,cAAc;AAEZ,UAAA,eACJ,+BAA+B,cAAc,EAAE;AAEjD,UAAM,qBAAqB,aAAa,IAAI,CAAC,cAAc;AACzD,UAAI,aAAa,aAAa,QAAQ,OAAO,MAAM,SAAS,IAAI;AACpD,kBAAA;AACI,sBAAA;AACd,eAAO,iBAAiB;AAAA,MAAA;AAGtB,UAAA,YAAY,iBAAiB,YAAY,eAAe;AAChD,kBAAA;AACV,eAAO,iBAAiB;AAAA,MAAA;AAG1B,aAAO,iBAAiB;AAAA,IAAA,CACzB;AAEkB,uBAAA,CAAC,GAAG,kBAAkB,CAAC;AAE1C,QAAI,SAAS;AACU,2BAAA,cAAc,kBAAkB,iBAAiB;AACtE;AAAA,IAAA;AAGF,yBAAqB,EAAE;AAAA,EAAA,GACtB;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,YAAU,MAAM;AACd,UAAM,SAAS;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,gBAAgB,IAAI;AAEtB,QAAA,YAAY,SAAS,GAAG;AAC1B;AAAA,QACE;AAAA,UACE,WAAW,SAAS,IAAI,aAAa;AAAA,UACrC;AAAA,UACA;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EACF,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,YAAU,MAAM;AACV,QAAA,CAAC,QAAQ,SAAS;AAGpB;AAAA,IAAA;AAGgB,sBAAA;AAAA,EACjB,GAAA,CAAC,gBAAgB,iBAAiB,iBAAiB,CAAC;AAEjD,QAAA,qBAAqB,CAAC,UAA4C;AACtE,QAAK,MAAM,OAA0B,UAAU,SAAS,OAAO,GAAG;AAChE,yBAAmB,IAAI;AAAA,IAAA;AAAA,EAE3B;AAEA,QAAM,mBAAmB,MAAM;AAC7B,uBAAmB,KAAK;AAAA,EAC1B;AAEM,QAAA,gBAAgB,CAAC,UAA4B;AAC3C,UAAA,QAAQ,+BAA+B,cAAc;AAEzC,sBAAA;AAET,aAAA,OAAO,MAAM,aAAa,MAAM;AAAA,EAC3C;AAQM,QAAA,kBAAkB,CAAC,kBAA4B;AACnD,YAAQ,UAAU;AAEZ,UAAA,QAAQ,+BAA+B,aAAa;AAE3C,mBAAA,QAAQ,CAAC,cAAc,UAAU;AAC9C,UAAI,aAAa,OAAO;AAChB,cAAA,cAAc,KAAK,IAAI;AAAA,UAC3B,cAAc,KAAK;AAAA,UACnB;AAAA,UACA;AAAA,QACF;AAAA,MAAA;AAAA,IACF,CACD;AAED,QAAI,YAAY,SAAU;AAC1B,eAAW,MAAM,WAAW;AAE5B,sBAAkB,MAAM,aAAa;AAAA,EACvC;AAEM,QAAA,uBAAuB,CAAC,aAAuB,UAAkB;AACrE,QAAI,mBAAmB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEmB,uBAAA,wBAAwB,kBAAkB,KAAK;AAElE,oBAAgB,gBAAgB;AAAA,EAClC;AAOM,QAAA,wBAAwB,CAAC,kBAA4B;AACnD,UAAA,QAAQ,+BAA+B,aAAa;AAE1D,qBAAiB,MAAM,WAAW;AAAA,EACpC;AAOM,QAAA,uBAAuB,CAAC,kBAA4B;AAClD,UAAA,QAAQ,+BAA+B,aAAa;AAE1D,oBAAgB,MAAM,WAAW;AAAA,EACnC;AASM,QAAA,aAA0C,CAAC,UAAU,WAAW;AACpE,UAAM,EAAE,OAAO,WAAW,UAAU,MAAU,IAAA;AAC9C,UAAM,EAAE,QAAQ,IAAI,GAAG,cAAc,SAAS;AAC9C,UAAM,kBAAkB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IAAA,EACA,QAAQ,UAAU;AACpB,QAAI,UAAU;AACN,YAAA,kBAAkB,eAAe,KAAK,GAAG;AAAA,IAAA,OAC1C;AACC,YAAA,kBAAkB,eAAe,KAAK,GAAG;AAAA,IAAA;AAG3C,UAAA,UACJ,OAAO,MAAM,eAAe,KAAK,CAAC,KAAK,eAAe,KAAK,KAAK;AAC5D,UAAA,WAAW,MAAM,WAAW,MAAM;AAClC,UAAA,kBAAkB,MAAM,UAAU,KAAK;AAG3C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,GAAG;AAAA,UACZ,CAAC,QAAQ,eAAe,GAAG,CAAC,EAAE,CAAC,YAAY,CAAC;AAAA,UAC5C,CAAC,QAAQ,uBAAuB,GAAG,CAAC,EAAE,YAAY,CAAC;AAAA,UACnD,CAAC,QAAQ,qBAAqB,GAAG,WAAW;AAAA,QAAA,CAC7C;AAAA,QAED,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS,gBAAgB,eAAe,KAAK;AAAA,YAC7C,SAAS;AAAA,YACT,WAAU;AAAA,YACV,kBAAkB,QAAQ;AAAA,YAC1B,qBAAqB,MAAM,eAAe,eAAe;AAAA,YAEzD,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,gBACJ;AAAA,gBACA,WAAW,QAAQ;AAAA,gBAClB,GAAG;AAAA,gBACJ,cAAY,GAAG,KAAK,SAAS,KAAK;AAAA,gBAClC,iBAAe;AAAA,kBACb;AAAA,kBACA;AAAA,kBACA;AAAA,gBACF;AAAA,gBACA,iBAAe;AAAA,gBACf,iBAAe;AAAA,gBACd,GAAG,YAAY,KAAK;AAAA,cAAA;AAAA,YAAA;AAAA,UACvB;AAAA,QAAA;AAAA,MACF;AAAA,MA9BK;AAAA,IA+BP;AAAA,EAEJ;AAEA,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAAc,iBAAiB;AAAA,IAAI,CAAC,MACxC,OAAO,EAAE,QAAQ,UAAU,CAAC;AAAA,EAC9B;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,YAAY,GACnB,CAAC,YAAY,CAAC,YAAY,CAAC,YAAY,CAAC;AAAA,UAC1C,CAAC,QAAQ,aAAa,GACpB,CAAC,YAAY,CAAC,YAAY,CAAC,YAAY;AAAA,UACzC,CAAC,QAAQ,YAAY,GAAG,CAAC,CAAC;AAAA,QAC5B;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,wBAAwB,gBAAgB;AAAA,MAChD;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,WAAW;AAAA,MACX,QAAQ;AAAA,MACP,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,YAAY,CAAC,cACb;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,QAAQ,gBAAgB;AAAA,cACpC,CAAC,QAAQ,aAAa,GAAG;AAAA,cACzB,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,YAAA,CACvB;AAAA,YAEA,UAAA;AAAA,cACC,YAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI,MAAM,WAAW,OAAO;AAAA,kBAC5B,WAAW,QAAQ;AAAA,kBACnB,SAAS;AAAA,kBACT;AAAA,gBAAA;AAAA,cACF;AAAA,cAGD,CAAC,aACA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,kBACJ;AAAA,kBACA,QAAQ;AAAA,kBACR,UAAU;AAAA,kBACV,QAAQ;AAAA,kBACR;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAEJ;AAAA,QAGF,oBAAC,SAAI,WAAW,GAAG,QAAQ,YAAY,QAAQ,eAAe,GAC5D,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,OAAO,CAAC;AAAA,YACR,cAAc;AAAA,YACd,WAAW,GAAG,QAAQ,YAAY;AAAA,cAChC,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,YAAA,CACvB;AAAA,YACD,KAAK;AAAA,YACL,KAAK;AAAA,YACL,MAAM;AAAA,YACN;AAAA,YACA,UAAU,WAAW,aAAa,cAAc,aAAa;AAAA,YAC7D,UAAU,CAAC,gBACT,gBAAgB,QAAgB,OAAO,WAAW,CAAC;AAAA,YAErD,gBAAgB,CAAC,gBACf,sBAAsB,QAAgB,OAAO,WAAW,CAAC;AAAA,YAE3D,eAAe,CAAC,gBACd,qBAAqB,QAAgB,OAAO,WAAW,CAAC;AAAA,YAE1D,OACE,eAAe,WAAW,IACtB,SACA,WACE,eAAe,CAAC,IAChB,CAAC,GAAG,cAAc;AAAA,YAE1B,YAAY;AAAA,YACZ;AAAA,YACA,OAAO;AAAA,YACP,WAAW,aAAa;AAAA,YACxB,aAAa,WAAW;AAAA,YACxB,YAAY;AAAA,YACZ,gBAAgB,CAAC,YAAY,CAAC;AAAA,YAC7B,GAAG;AAAA,UAAA;AAAA,QAAA,GAER;AAAA,QAEC,gBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,WAAW,OAAO;AAAA,YAC5B,WAAW,QAAQ;AAAA,YACnB,eAAa;AAAA,YAEZ,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ;AAEJ,CAAC;"}

package/dist/esm/SnackbarProvider/SnackbarProvider.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useMemo } from "react";
-import { SnackbarContent, useSnackbar, SnackbarProvider } from "notistack";
+import { useCallback, forwardRef, useMemo } from "react";
+import { useSnackbar, SnackbarProvider, SnackbarContent } from "notistack";
 import { useClasses } from "./SnackbarProvider.styles.js";
 import { staticClasses } from "./SnackbarProvider.styles.js";
 import { HvSnackbarContent } from "../Snackbar/SnackbarContent/SnackbarContent.js";

package/dist/esm/Table/TableBody/TableBody.js

@@ -9,7 +9,7 @@ import { staticClasses } from "./TableBody.styles.js";
 import { HvFocus } from "../../Focus/Focus.js";
 const tableSectionContext = {
   type: "body",
-  filterClassName: "_grid"
+  filterClassName: "_trgrid"
 };
 const defaultComponent = "tbody";
 const HvTableBody = forwardRef(
@@ -35,22 +35,21 @@ const HvTableBody = forwardRef(
         role: Component === defaultComponent ? null : "rowgroup",
         ...others,
         children: withNavigation ? Children.map(children, (element) => {
-          if (isValidElement(element)) {
-            return /* @__PURE__ */ jsx(
-              HvFocus,
-              {
-                id: `my-id-${element.key}`,
-                rootRef: bodyRef,
-                strategy: "grid",
-                filterClass: tableSectionContext.filterClassName,
-                navigationJump: 1,
-                focusDisabled: false,
-                selected: element.props.selected,
-                children: element
-              },
-              `row-${element.key}`
-            );
-          }
+          if (!isValidElement(element)) return void 0;
+          return /* @__PURE__ */ jsx(
+            HvFocus,
+            {
+              id: `my-id-${element.key}`,
+              rootRef: bodyRef,
+              strategy: "grid",
+              filterClass: tableSectionContext.filterClassName,
+              navigationJump: 1,
+              focusDisabled: false,
+              selected: element.props.selected,
+              children: element
+            },
+            `row-${element.key}`
+          );
         }) : children
       }
     ) });

package/dist/esm/Table/TableBody/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","sources":["../../../../src/Table/TableBody/TableBody.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useRef,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFocus } from \"../../Focus\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport TableContext from \"../TableContext\";\nimport {\n  TableSectionContext,\n  TableSectionContextValue,\n} from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableBody.styles\";\n\nexport { staticClasses as tableBodyClasses };\n\nexport type HvTableBodyClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableBodyProps\n  extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to tbody.\n   */\n  component?: React.ElementType;\n  /** Sets whether or not there should be arrow navigation between the table rows */\n  withNavigation?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableBodyClasses;\n}\n\nconst tableSectionContext = {\n  type: \"body\",\n  filterClassName: \"_grid\",\n} satisfies TableSectionContextValue;\n\nconst defaultComponent = \"tbody\";\n\n/**\n * HvTableBody acts as a `tbody` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles\n */\nexport const HvTableBody = forwardRef<HTMLElement, HvTableBodyProps>(\n  function HvTableBody(props, externalRef) {\n    const {\n      classes: classesProp,\n      className,\n      component,\n      children,\n      withNavigation = false,\n      ...others\n    } = useDefaultProps(\"HvTableBody\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const tableContext = useContext(TableContext);\n\n    const bodyRef = useRef(null);\n\n    const handleRef = useForkRef(externalRef, bodyRef);\n\n    const Component =\n      component || tableContext?.components?.TBody || defaultComponent;\n\n    return (\n      <TableSectionContext.Provider value={tableSectionContext}>\n        <Component\n          className={cx(classes.root, className)}\n          ref={handleRef}\n          role={Component === defaultComponent ? null : \"rowgroup\"}\n          {...others}\n        >\n          {withNavigation\n            ? Children.map(children, (element) => {\n                if (isValidElement(element)) {\n                  return (\n                    <HvFocus\n                      id={`my-id-${element.key}`}\n                      rootRef={bodyRef}\n                      key={`row-${element.key}`}\n                      strategy=\"grid\"\n                      filterClass={tableSectionContext.filterClassName}\n                      navigationJump={1}\n                      focusDisabled={false}\n                      selected={element.props.selected}\n                    >\n                      {element}\n                    </HvFocus>\n                  );\n                }\n              })\n            : children}\n        </Component>\n      </TableSectionContext.Provider>\n    );\n  },\n);\n"],"names":["HvTableBody"],"mappings":";;;;;;;;;AA2CA,MAAM,sBAAsB;AAAA,EAC1B,MAAM;AAAA,EACN,iBAAiB;AACnB;AAEA,MAAM,mBAAmB;AAMlB,MAAM,cAAc;AAAA,EACzB,SAASA,aAAY,OAAO,aAAa;AACjC,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AAEtC,UAAA,UAAU,OAAO,IAAI;AAErB,UAAA,YAAY,WAAW,aAAa,OAAO;AAEjD,UAAM,YACJ,aAAa,cAAc,YAAY,SAAS;AAElD,WACG,oBAAA,oBAAoB,UAApB,EAA6B,OAAO,qBACnC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,QAEH,UACG,iBAAA,SAAS,IAAI,UAAU,CAAC,YAAY;AAC9B,cAAA,eAAe,OAAO,GAAG;AAEzB,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,SAAS,QAAQ,GAAG;AAAA,gBACxB,SAAS;AAAA,gBAET,UAAS;AAAA,gBACT,aAAa,oBAAoB;AAAA,gBACjC,gBAAgB;AAAA,gBAChB,eAAe;AAAA,gBACf,UAAU,QAAQ,MAAM;AAAA,gBAEvB,UAAA;AAAA,cAAA;AAAA,cAPI,OAAO,QAAQ,GAAG;AAAA,YAQzB;AAAA,UAAA;AAAA,QAEJ,CACD,IACD;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"TableBody.js","sources":["../../../../src/Table/TableBody/TableBody.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useRef,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFocus } from \"../../Focus\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport TableContext from \"../TableContext\";\nimport {\n  TableSectionContext,\n  TableSectionContextValue,\n} from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableBody.styles\";\n\nexport { staticClasses as tableBodyClasses };\n\nexport type HvTableBodyClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableBodyProps\n  extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to tbody.\n   */\n  component?: React.ElementType;\n  /** Sets whether or not there should be arrow navigation between the table rows */\n  withNavigation?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableBodyClasses;\n}\n\nconst tableSectionContext = {\n  type: \"body\",\n  filterClassName: \"_trgrid\",\n} satisfies TableSectionContextValue;\n\nconst defaultComponent = \"tbody\";\n\n/**\n * HvTableBody acts as a `tbody` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles\n */\nexport const HvTableBody = forwardRef<HTMLElement, HvTableBodyProps>(\n  function HvTableBody(props, externalRef) {\n    const {\n      classes: classesProp,\n      className,\n      component,\n      children,\n      withNavigation = false,\n      ...others\n    } = useDefaultProps(\"HvTableBody\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const tableContext = useContext(TableContext);\n\n    const bodyRef = useRef(null);\n\n    const handleRef = useForkRef(externalRef, bodyRef);\n\n    const Component =\n      component || tableContext?.components?.TBody || defaultComponent;\n\n    return (\n      <TableSectionContext.Provider value={tableSectionContext}>\n        <Component\n          className={cx(classes.root, className)}\n          ref={handleRef}\n          role={Component === defaultComponent ? null : \"rowgroup\"}\n          {...others}\n        >\n          {withNavigation\n            ? Children.map(children, (element) => {\n                if (!isValidElement(element)) return undefined;\n                return (\n                  <HvFocus\n                    id={`my-id-${element.key}`}\n                    rootRef={bodyRef}\n                    key={`row-${element.key}`}\n                    strategy=\"grid\"\n                    filterClass={tableSectionContext.filterClassName}\n                    navigationJump={1}\n                    focusDisabled={false}\n                    selected={element.props.selected}\n                  >\n                    {element}\n                  </HvFocus>\n                );\n              })\n            : children}\n        </Component>\n      </TableSectionContext.Provider>\n    );\n  },\n);\n"],"names":["HvTableBody"],"mappings":";;;;;;;;;AA2CA,MAAM,sBAAsB;AAAA,EAC1B,MAAM;AAAA,EACN,iBAAiB;AACnB;AAEA,MAAM,mBAAmB;AAMlB,MAAM,cAAc;AAAA,EACzB,SAASA,aAAY,OAAO,aAAa;AACjC,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AAEtC,UAAA,UAAU,OAAO,IAAI;AAErB,UAAA,YAAY,WAAW,aAAa,OAAO;AAEjD,UAAM,YACJ,aAAa,cAAc,YAAY,SAAS;AAElD,WACG,oBAAA,oBAAoB,UAApB,EAA6B,OAAO,qBACnC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,QAEH,UACG,iBAAA,SAAS,IAAI,UAAU,CAAC,YAAY;AAClC,cAAI,CAAC,eAAe,OAAO,EAAU,QAAA;AAEnC,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,SAAS,QAAQ,GAAG;AAAA,cACxB,SAAS;AAAA,cAET,UAAS;AAAA,cACT,aAAa,oBAAoB;AAAA,cACjC,gBAAgB;AAAA,cAChB,eAAe;AAAA,cACf,UAAU,QAAQ,MAAM;AAAA,cAEvB,UAAA;AAAA,YAAA;AAAA,YAPI,OAAO,QAAQ,GAAG;AAAA,UAQzB;AAAA,QAAA,CAEH,IACD;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,EAAA;AAGN;"}

package/dist/esm/TableSection/TableSection.styles.js

@@ -1,17 +1,17 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { staticClasses as staticClasses$1 } from "../Table/TableContainer/TableContainer.styles.js";
-import "../Table/TableContainer/TableContainer.js";
-import { staticClasses as staticClasses$2 } from "../Table/TableHeader/TableHeader.styles.js";
-import "../Table/TableHeader/TableHeader.js";
-import { staticClasses as staticClasses$3 } from "../Table/TableRow/TableRow.styles.js";
-import "../Table/TableRow/TableRow.js";
-import { staticClasses as staticClasses$4 } from "../Table/TableCell/TableCell.styles.js";
-import "../Table/TableCell/TableCell.js";
-import { staticClasses as staticClasses$5 } from "../BulkActions/BulkActions.styles.js";
-import "../BulkActions/BulkActions.js";
-import { staticClasses as staticClasses$6 } from "../Pagination/Pagination.styles.js";
+import { staticClasses as staticClasses$1 } from "../Pagination/Pagination.styles.js";
 import "../Pagination/Pagination.js";
+import { staticClasses as staticClasses$2 } from "../BulkActions/BulkActions.styles.js";
+import "../BulkActions/BulkActions.js";
+import { staticClasses as staticClasses$3 } from "../Table/TableCell/TableCell.styles.js";
+import "../Table/TableCell/TableCell.js";
+import { staticClasses as staticClasses$4 } from "../Table/TableRow/TableRow.styles.js";
+import "../Table/TableRow/TableRow.js";
+import { staticClasses as staticClasses$5 } from "../Table/TableHeader/TableHeader.styles.js";
+import "../Table/TableHeader/TableHeader.js";
+import { staticClasses as staticClasses$6 } from "../Table/TableContainer/TableContainer.styles.js";
+import "../Table/TableContainer/TableContainer.js";
 const { staticClasses, useClasses } = createClasses("HvTableSection", {
   root: {},
   header: {
@@ -36,43 +36,43 @@ const { staticClasses, useClasses } = createClasses("HvTableSection", {
       borderBottomLeftRadius: "inherit",
       borderBottomRightRadius: "inherit"
     },
-    [`& .${staticClasses$1.root}`]: {
+    [`& .${staticClasses$6.root}`]: {
       paddingBottom: 0,
       borderTopLeftRadius: "inherit",
       borderTopRightRadius: "inherit"
     },
-    [`& .${staticClasses$2.head}`]: {
+    [`& .${staticClasses$5.head}`]: {
       backgroundColor: theme.colors.atmo2,
       borderBottomColor: theme.colors.atmo3,
-      [`&.${staticClasses$2.variantCheckbox}`]: {
+      [`&.${staticClasses$5.variantCheckbox}`]: {
         borderRight: "none"
       },
-      [`&.${staticClasses$2.variantActions}`]: {
+      [`&.${staticClasses$5.variantActions}`]: {
         borderLeft: "none"
       }
     },
     // Remove border for the last table row
-    [`& .${staticClasses$3.root}`]: {
+    [`& .${staticClasses$4.root}`]: {
       "&:last-child": {
-        [`& .${staticClasses$4.root}`]: { borderBottom: "none" }
+        [`& .${staticClasses$3.root}`]: { borderBottom: "none" }
       }
     },
-    [`& .${staticClasses$4.root}`]: {
+    [`& .${staticClasses$3.root}`]: {
       borderBottomColor: theme.colors.atmo3
     },
-    [`& .${staticClasses$4.variantCheckbox}`]: {
+    [`& .${staticClasses$3.variantCheckbox}`]: {
       borderRight: "none"
     },
-    [`& .${staticClasses$4.variantActions}`]: {
+    [`& .${staticClasses$3.variantActions}`]: {
       borderLeft: "none"
     },
-    [`& .${staticClasses$5.root}`]: {
+    [`& .${staticClasses$2.root}`]: {
       marginBottom: 0,
       border: "none",
       borderBottom: `1px solid ${theme.colors.atmo3}`,
       padding: theme.spacing("xs", "sm")
     },
-    [`& .${staticClasses$6.root}`]: {
+    [`& .${staticClasses$1.root}`]: {
       margin: 0,
       backgroundColor: theme.colors.atmo2,
       padding: theme.space.xs,
@@ -80,10 +80,10 @@ const { staticClasses, useClasses } = createClasses("HvTableSection", {
       borderBottomLeftRadius: "inherit",
       borderBottomRightRadius: "inherit"
     },
-    [`& .${staticClasses$6.pageSizeOptions}`]: {
+    [`& .${staticClasses$1.pageSizeOptions}`]: {
       left: theme.space.sm
     },
-    [`& .${staticClasses$6.pageSizeHeader}`]: {
+    [`& .${staticClasses$1.pageSizeHeader}`]: {
       border: "none",
       "&:hover": {
         border: "none"

package/dist/esm/Tag/Tag.js

@@ -109,7 +109,7 @@ const HvTag = forwardRef(function HvTag2(props, ref) {
             children: label
           }
         ),
-        onDelete && deleteIcon
+        onDelete && !disabled && deleteIcon
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { cloneElement, forwardRef, isValidElement } from \"react\";\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonBase, HvButtonBaseProps } from \"../ButtonBase\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvTypography } from \"../Typography\";\nimport { isDeleteKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<\n    HvButtonBaseProps,\n    \"type\" | \"color\" | \"classes\" | \"onClick\" | \"onToggle\"\n  > {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** The color variant of the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: React.EventHandler<any>;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the [MUI Chip](https://mui.com/material-ui/react-chip/) component\n */\nexport const HvTag = forwardRef<\n  // no-indent\n  HTMLElement,\n  HvTagProps\n>(function HvTag(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    component,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon: deleteIconProp,\n    onDelete,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected),\n  );\n\n  const handleDeleteClick = (event: React.MouseEvent) => {\n    // Stop the event from bubbling up to the tag\n    event.stopPropagation();\n    onDelete?.(event);\n  };\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && theme.alpha(getColor(color, \"cat1\")!, 0.2)) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete || selectable);\n\n  const CheckboxIcon = isSelected ? CheckboxCheck : Checkbox;\n\n  const deleteIcon =\n    deleteIconProp && isValidElement(deleteIconProp) ? (\n      cloneElement<any>(deleteIconProp, {\n        className: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n        onClick: handleDeleteClick,\n      })\n    ) : (\n      <CloseXS\n        size=\"XS\"\n        onClick={handleDeleteClick}\n        className={cx(classes.deleteIcon, classes.button, classes.tagButton)}\n        {...deleteButtonProps}\n      />\n    );\n\n  return (\n    <HvButtonBase\n      ref={ref as any}\n      component={isClickable ? HvButtonBase : \"div\"}\n      disabled={disabled}\n      data-color={color}\n      style={mergeStyles(style, {\n        \"--bgColor\": backgroundColor,\n      })}\n      className={cx(classes.root, classes.chipRoot, className, {\n        [classes.disabled]: disabled,\n        [classes.selected]: isSelected,\n        [classes.clickable]: isClickable && !disabled,\n        [classes.categorical]: type === \"categorical\",\n        [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n        [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n      })}\n      onKeyUp={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n        // Ignore events from children.\n        if (event.currentTarget === event.target && isDeleteKey(event)) {\n          onDelete?.(event);\n        }\n\n        onKeyUp?.(event);\n      }}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      selected={isClickable && isSelected}\n      {...others}\n    >\n      {selectable && type === \"semantic\" && (\n        <CheckboxIcon\n          className={classes.icon}\n          color={(disabled && [\"atmo3\", \"secondary_60\"]) || undefined}\n          size=\"XS\"\n        />\n      )}\n      <HvTypography\n        noWrap\n        variant=\"caption2\"\n        component=\"span\"\n        className={classes.label}\n      >\n        {label}\n      </HvTypography>\n      {onDelete && deleteIcon}\n    </HvButtonBase>\n  );\n});\n"],"names":["HvTag"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { cloneElement, forwardRef, isValidElement } from \"react\";\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonBase, HvButtonBaseProps } from \"../ButtonBase\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvTypography } from \"../Typography\";\nimport { isDeleteKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<\n    HvButtonBaseProps,\n    \"type\" | \"color\" | \"classes\" | \"onClick\" | \"onToggle\"\n  > {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** The color variant of the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: React.EventHandler<any>;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products.\n */\nexport const HvTag = forwardRef<\n  // no-indent\n  HTMLElement,\n  HvTagProps\n>(function HvTag(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    component,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon: deleteIconProp,\n    onDelete,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected),\n  );\n\n  const handleDeleteClick = (event: React.MouseEvent) => {\n    // Stop the event from bubbling up to the tag\n    event.stopPropagation();\n    onDelete?.(event);\n  };\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && theme.alpha(getColor(color, \"cat1\")!, 0.2)) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete || selectable);\n\n  const CheckboxIcon = isSelected ? CheckboxCheck : Checkbox;\n\n  const deleteIcon =\n    deleteIconProp && isValidElement(deleteIconProp) ? (\n      cloneElement<any>(deleteIconProp, {\n        className: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n        onClick: handleDeleteClick,\n      })\n    ) : (\n      <CloseXS\n        size=\"XS\"\n        onClick={handleDeleteClick}\n        className={cx(classes.deleteIcon, classes.button, classes.tagButton)}\n        {...deleteButtonProps}\n      />\n    );\n\n  return (\n    <HvButtonBase\n      ref={ref as any}\n      component={isClickable ? HvButtonBase : \"div\"}\n      disabled={disabled}\n      data-color={color}\n      style={mergeStyles(style, {\n        \"--bgColor\": backgroundColor,\n      })}\n      className={cx(classes.root, classes.chipRoot, className, {\n        [classes.disabled]: disabled,\n        [classes.selected]: isSelected,\n        [classes.clickable]: isClickable && !disabled,\n        [classes.categorical]: type === \"categorical\",\n        [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n        [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n      })}\n      onKeyUp={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n        // Ignore events from children.\n        if (event.currentTarget === event.target && isDeleteKey(event)) {\n          onDelete?.(event);\n        }\n\n        onKeyUp?.(event);\n      }}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      selected={isClickable && isSelected}\n      {...others}\n    >\n      {selectable && type === \"semantic\" && (\n        <CheckboxIcon\n          className={classes.icon}\n          color={(disabled && [\"atmo3\", \"secondary_60\"]) || undefined}\n          size=\"XS\"\n        />\n      )}\n      <HvTypography\n        noWrap\n        variant=\"caption2\"\n        component=\"span\"\n        className={classes.label}\n      >\n        {label}\n      </HvTypography>\n      {onDelete && !disabled && deleteIcon}\n    </HvButtonBase>\n  );\n});\n"],"names":["HvTag"],"mappings":"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"}