@hitachivantara/uikit-react-core 5.44.3 → 5.44.5

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

@@ -31,7 +31,7 @@ const HvFilterGroupCounter = (props) => {
   ] : filterOptions;
   const optionIdx = filterOptions.findIndex((option) => option.id === id);
   let groupsCounter = 0;
-  appliedFilters.filter((elem) => elem !== void 0).forEach((fg, i) => {
+  appliedFilters.forEach((fg, i) => {
     groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);
   });
   const partialCounter = id ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0 : groupsCounter;

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

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

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

@@ -79,10 +79,7 @@ const HvFilterGroupRightPanel = ({
         newFilterValues[activeGroup] = [];
       }
     } else {
-      newFilterValues[activeGroup] = [
-        ...filterValues[activeGroup],
-        ...activeGroupOptions
-      ];
+      newFilterValues[activeGroup] = [...activeGroupOptions];
     }
     setFilterValues(newFilterValues);
   }, [

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

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

package/dist/cjs/TimePicker/TimePicker.cjs

@@ -21,7 +21,7 @@ const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
 const toTime = (value) => {
   if (!value)
-    return void 0;
+    return value;
   const { hours, minutes, seconds } = value;
   return new date.Time(hours, minutes, seconds);
 };

package/dist/cjs/TimePicker/TimePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.cjs","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo, forwardRef } from \"react\";\n\nimport { Time } from \"@internationalized/date\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"../Forms\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n  if (!value) return undefined;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\"\n  > {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id: idProp,\n      name,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      label,\n\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n      hoursPlaceholder = \"hh\",\n      minutesPlaceholder = \"mm\",\n      secondsPlaceholder = \"ss\",\n\n      value: valueProp,\n      defaultValue: defaultValueProp,\n\n      timeFormat,\n      showSeconds,\n      disableExpand,\n      locale = \"en\",\n\n      onToggle,\n      onChange,\n\n      // misc properties:\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      ...others\n    } = useDefaultProps(\"HvTimePicker\", props);\n\n    const id = useUniqueId(idProp, \"hvtimepicker\");\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const timeFieldRef = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const stateProps: TimeFieldStateOptions = {\n      value: toTime(valueProp),\n      defaultValue: toTime(defaultValueProp),\n      label,\n      locale,\n      isRequired: required,\n      isReadOnly: readOnly,\n      isDisabled: disabled,\n      granularity: \"second\",\n      hourCycle: getFormat(timeFormat),\n      onChange: (value) => {\n        const { hour: hours, minute: minutes, second: seconds } = value;\n        onChange?.({ hours, minutes, seconds });\n      },\n    };\n    const state = useTimeFieldState(stateProps);\n    const { labelProps, fieldProps, descriptionProps } = useTimeField(\n      {\n        ...stateProps,\n        id,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n      },\n      state,\n      timeFieldRef\n    );\n\n    const [open, setOpen] = useState(false);\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n    const [validationState] = useControlled(status, \"standBy\");\n\n    const placeholders = useMemo(\n      () => ({\n        hour: hoursPlaceholder,\n        minute: minutesPlaceholder,\n        second: secondsPlaceholder,\n      }),\n      [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = validationState === \"invalid\";\n    const errorMessageId = isStateInvalid\n      ? canShowError\n        ? setId(id, \"error\")\n        : ariaErrorMessage\n      : undefined;\n\n    return (\n      <HvFormElement\n        name={name}\n        required={required}\n        disabled={disabled}\n        status={validationState}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(label || description) && (\n          <div className={classes.labelContainer}>\n            {label && (\n              <HvLabel\n                label={label}\n                className={classes.label}\n                {...labelProps}\n              />\n            )}\n            {description && (\n              <HvInfoMessage\n                className={classes.description}\n                {...descriptionProps}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          variableWidth\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={\n            placeholder && !state.value ? (\n              placeholder\n            ) : (\n              <Placeholder\n                ref={timeFieldRef}\n                name={name}\n                state={state}\n                placeholders={placeholders}\n                className={cx(classes.placeholder, {\n                  [classes.placeholderDisabled]: disabled,\n                })}\n                {...fieldProps}\n              />\n            )\n          }\n          classes={{\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            panel: classes.dropdownPanel,\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          placement=\"right\"\n          adornment={\n            <TimeIcon\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.icon}\n            />\n          }\n          expanded={open}\n          onToggle={(evt, newOpen) => {\n            if (disableExpand) return;\n            setOpen(newOpen);\n            onToggle?.(evt, newOpen);\n          }}\n          onContainerCreation={(containerRef) => {\n            containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={fieldProps[\"aria-labelledby\"]}\n          aria-describedby={fieldProps[\"aria-describedby\"]}\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          disablePortal={disablePortal}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          {...otherDropdownProps}\n        >\n          <div ref={timeFieldRef} className={classes.timePopperContainer}>\n            {state.segments.map((segment, i) => (\n              <Unit\n                key={i}\n                state={state}\n                segment={segment}\n                placeholder={placeholders[segment.type]}\n                onAdd={() => state.increment(segment.type)}\n                onSub={() => state.decrement(segment.type)}\n                onChange={(evt, val) => {\n                  state.setSegment(segment.type, Number(val));\n                }}\n              />\n            ))}\n          </div>\n        </HvBaseDropdown>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(id, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["Time","forwardRef","useDefaultProps","useUniqueId","useClasses","useRef","useForkRef","useTimeFieldState","useTimeField","useState","useControlled","useMemo","setId","jsxs","HvFormElement","jsx","HvLabel","HvInfoMessage","HvBaseDropdown","Placeholder","TimeIcon","Unit","HvWarningText"],"mappings":"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"}
+{"version":3,"file":"TimePicker.cjs","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo, forwardRef } from \"react\";\n\nimport { Time } from \"@internationalized/date\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"../Forms\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue | null) => {\n  if (!value) return value;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\"\n  > {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue | null;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue | null;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id: idProp,\n      name,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      label,\n\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n      hoursPlaceholder = \"hh\",\n      minutesPlaceholder = \"mm\",\n      secondsPlaceholder = \"ss\",\n\n      value: valueProp,\n      defaultValue: defaultValueProp,\n\n      timeFormat,\n      showSeconds,\n      disableExpand,\n      locale = \"en\",\n\n      onToggle,\n      onChange,\n\n      // misc properties:\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      ...others\n    } = useDefaultProps(\"HvTimePicker\", props);\n\n    const id = useUniqueId(idProp, \"hvtimepicker\");\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const timeFieldRef = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const stateProps: TimeFieldStateOptions = {\n      value: toTime(valueProp),\n      defaultValue: toTime(defaultValueProp),\n      label,\n      locale,\n      isRequired: required,\n      isReadOnly: readOnly,\n      isDisabled: disabled,\n      granularity: \"second\",\n      hourCycle: getFormat(timeFormat),\n      onChange: (value) => {\n        const { hour: hours, minute: minutes, second: seconds } = value;\n        onChange?.({ hours, minutes, seconds });\n      },\n    };\n    const state = useTimeFieldState(stateProps);\n    const { labelProps, fieldProps, descriptionProps } = useTimeField(\n      {\n        ...stateProps,\n        id,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n      },\n      state,\n      timeFieldRef\n    );\n\n    const [open, setOpen] = useState(false);\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n    const [validationState] = useControlled(status, \"standBy\");\n\n    const placeholders = useMemo(\n      () => ({\n        hour: hoursPlaceholder,\n        minute: minutesPlaceholder,\n        second: secondsPlaceholder,\n      }),\n      [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = validationState === \"invalid\";\n    const errorMessageId = isStateInvalid\n      ? canShowError\n        ? setId(id, \"error\")\n        : ariaErrorMessage\n      : undefined;\n\n    return (\n      <HvFormElement\n        name={name}\n        required={required}\n        disabled={disabled}\n        status={validationState}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(label || description) && (\n          <div className={classes.labelContainer}>\n            {label && (\n              <HvLabel\n                label={label}\n                className={classes.label}\n                {...labelProps}\n              />\n            )}\n            {description && (\n              <HvInfoMessage\n                className={classes.description}\n                {...descriptionProps}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          variableWidth\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={\n            placeholder && !state.value ? (\n              placeholder\n            ) : (\n              <Placeholder\n                ref={timeFieldRef}\n                name={name}\n                state={state}\n                placeholders={placeholders}\n                className={cx(classes.placeholder, {\n                  [classes.placeholderDisabled]: disabled,\n                })}\n                {...fieldProps}\n              />\n            )\n          }\n          classes={{\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            panel: classes.dropdownPanel,\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          placement=\"right\"\n          adornment={\n            <TimeIcon\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.icon}\n            />\n          }\n          expanded={open}\n          onToggle={(evt, newOpen) => {\n            if (disableExpand) return;\n            setOpen(newOpen);\n            onToggle?.(evt, newOpen);\n          }}\n          onContainerCreation={(containerRef) => {\n            containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={fieldProps[\"aria-labelledby\"]}\n          aria-describedby={fieldProps[\"aria-describedby\"]}\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          disablePortal={disablePortal}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          {...otherDropdownProps}\n        >\n          <div ref={timeFieldRef} className={classes.timePopperContainer}>\n            {state.segments.map((segment, i) => (\n              <Unit\n                key={i}\n                state={state}\n                segment={segment}\n                placeholder={placeholders[segment.type]}\n                onAdd={() => state.increment(segment.type)}\n                onSub={() => state.decrement(segment.type)}\n                onChange={(evt, val) => {\n                  state.setSegment(segment.type, Number(val));\n                }}\n              />\n            ))}\n          </div>\n        </HvBaseDropdown>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(id, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["Time","forwardRef","useDefaultProps","useUniqueId","useClasses","useRef","useForkRef","useTimeFieldState","useTimeField","useState","useControlled","useMemo","setId","jsxs","HvFormElement","jsx","HvLabel","HvInfoMessage","HvBaseDropdown","Placeholder","TimeIcon","Unit","HvWarningText"],"mappings":"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"}

package/dist/esm/FilterGroup/Counter/Counter.js

@@ -30,7 +30,7 @@ const HvFilterGroupCounter = (props) => {
   ] : filterOptions;
   const optionIdx = filterOptions.findIndex((option) => option.id === id);
   let groupsCounter = 0;
-  appliedFilters.filter((elem) => elem !== void 0).forEach((fg, i) => {
+  appliedFilters.forEach((fg, i) => {
     groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);
   });
   const partialCounter = id ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0 : groupsCounter;

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

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

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

@@ -76,10 +76,7 @@ const HvFilterGroupRightPanel = ({
         newFilterValues[activeGroup] = [];
       }
     } else {
-      newFilterValues[activeGroup] = [
-        ...filterValues[activeGroup],
-        ...activeGroupOptions
-      ];
+      newFilterValues[activeGroup] = [...activeGroupOptions];
     }
     setFilterValues(newFilterValues);
   }, [

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

@@ -1 +1 @@
-{"version":3,"file":"RightPanel.js","sources":["../../../../src/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\n\nimport cloneDeep from \"lodash/cloneDeep\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps } from \"../../List\";\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\n\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const activeGroupOptions = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data\n        .filter((option) =>\n          option.name.toLowerCase().includes(searchStr.toLowerCase())\n        )\n        .map((option) => option.id) || [],\n    [filterOptions, activeGroup, searchStr]\n  );\n\n  const activeFilterValues = useMemo(\n    () =>\n      filterValues[activeGroup]?.filter((value) =>\n        activeGroupOptions.includes(value)\n      ) || [],\n    [filterValues, activeGroupOptions, activeGroup]\n  );\n\n  const listValues = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data.map((option) => ({\n        ...option,\n        label: option.name,\n        selected: filterValues[activeGroup]?.includes(option.id),\n        isHidden:\n          option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n      })) || [],\n    [filterOptions, filterValues, activeGroup, searchStr]\n  );\n\n  const updateSelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === activeGroupOptions.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  }, [activeFilterValues, activeGroupOptions]);\n\n  useEffect(() => {\n    updateSelectAll();\n  }, [activeFilterValues, updateSelectAll]);\n\n  useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n  const onChangeHandler: HvListProps[\"onChange\"] = (values) => {\n    const newFilterValues = filterOptions.map((_, i) =>\n      activeGroup === i\n        ? values.filter((v) => v.selected).map((v) => v.id)\n        : [...(filterValues[i] || [])]\n    );\n    setFilterValues(newFilterValues as any);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = cloneDeep(filterValues);\n\n    if (anySelected) {\n      if (searchStr !== \"\") {\n        newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(\n          (value) => !activeGroupOptions.includes(value)\n        );\n      } else {\n        newFilterValues[activeGroup] = [];\n      }\n    } else {\n      newFilterValues[activeGroup] = [\n        ...filterValues[activeGroup],\n        ...activeGroupOptions,\n      ];\n    }\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    activeGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n    searchStr,\n  ]);\n\n  /**\n   * Create selectAll component.\n   *\n   * @returns {*}\n   */\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${activeGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${activeGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  }, [\n    activeFilterValues?.length,\n    activeGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n    classes?.selectAllContainer,\n    classes?.selectAll,\n  ]);\n\n  return (\n    <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n      {listValues.length > 0 ? (\n        <>\n          <HvInput\n            id={setId(id, \"search\")}\n            classes={{\n              root: classes.search,\n            }}\n            type=\"search\"\n            placeholder={labels?.searchBoxPlaceholder}\n            value={searchStr}\n            onChange={(_, str) => setSearchStr(str)}\n          />\n          <SelectAll />\n          <HvList\n            key={activeGroup}\n            id={setId(id, \"list\")}\n            values={listValues}\n            className={classes.list}\n            multiSelect\n            useSelector\n            showSelectAll={false}\n            onChange={onChangeHandler}\n            selectable\n            condensed\n            hasTooltips\n          />\n        </>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RightPanel.js","sources":["../../../../src/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\n\nimport cloneDeep from \"lodash/cloneDeep\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps } from \"../../List\";\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\n\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const activeGroupOptions = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data\n        .filter((option) =>\n          option.name.toLowerCase().includes(searchStr.toLowerCase())\n        )\n        .map((option) => option.id) || [],\n    [filterOptions, activeGroup, searchStr]\n  );\n\n  const activeFilterValues = useMemo(\n    () =>\n      filterValues[activeGroup]?.filter((value) =>\n        activeGroupOptions.includes(value)\n      ) || [],\n    [filterValues, activeGroupOptions, activeGroup]\n  );\n\n  const listValues = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data.map((option) => ({\n        ...option,\n        label: option.name,\n        selected: filterValues[activeGroup]?.includes(option.id),\n        isHidden:\n          option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n      })) || [],\n    [filterOptions, filterValues, activeGroup, searchStr]\n  );\n\n  const updateSelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === activeGroupOptions.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  }, [activeFilterValues, activeGroupOptions]);\n\n  useEffect(() => {\n    updateSelectAll();\n  }, [activeFilterValues, updateSelectAll]);\n\n  useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n  const onChangeHandler: HvListProps[\"onChange\"] = (values) => {\n    const newFilterValues = filterOptions.map((_, i) =>\n      activeGroup === i\n        ? values.filter((v) => v.selected).map((v) => v.id)\n        : [...(filterValues[i] || [])]\n    );\n    setFilterValues(newFilterValues as any);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = cloneDeep(filterValues);\n\n    if (anySelected) {\n      if (searchStr !== \"\") {\n        newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(\n          (value) => !activeGroupOptions.includes(value)\n        );\n      } else {\n        newFilterValues[activeGroup] = [];\n      }\n    } else {\n      newFilterValues[activeGroup] = [...activeGroupOptions];\n    }\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    activeGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n    searchStr,\n  ]);\n\n  /**\n   * Create selectAll component.\n   *\n   * @returns {*}\n   */\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${activeGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${activeGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  }, [\n    activeFilterValues?.length,\n    activeGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n    classes?.selectAllContainer,\n    classes?.selectAll,\n  ]);\n\n  return (\n    <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n      {listValues.length > 0 ? (\n        <>\n          <HvInput\n            id={setId(id, \"search\")}\n            classes={{\n              root: classes.search,\n            }}\n            type=\"search\"\n            placeholder={labels?.searchBoxPlaceholder}\n            value={searchStr}\n            onChange={(_, str) => setSearchStr(str)}\n          />\n          <SelectAll />\n          <HvList\n            key={activeGroup}\n            id={setId(id, \"list\")}\n            values={listValues}\n            className={classes.list}\n            multiSelect\n            useSelector\n            showSelectAll={false}\n            onChange={onChangeHandler}\n            selectable\n            condensed\n            hasTooltips\n          />\n        </>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA+BO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AACX,MAAoC;AAClC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAC1C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,EAAE;AACrD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAC7D,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAEvD,QAAA;AAAA,IACJ;AAAA,IACA,eAAe,CAAC;AAAA,IAChB;AAAA,IACA;AAAA,EAAA,IACE,WAAW,oBAAoB;AAEnC,QAAM,qBAAqB;AAAA,IACzB,MACE,cAAc,WAAW,GAAG,KACzB;AAAA,MAAO,CAAC,WACP,OAAO,KAAK,YAAc,EAAA,SAAS,UAAU,aAAa;AAAA,MAE3D,IAAI,CAAC,WAAW,OAAO,EAAE,KAAK,CAAC;AAAA,IACpC,CAAC,eAAe,aAAa,SAAS;AAAA,EAAA;AAGxC,QAAM,qBAAqB;AAAA,IACzB,MACE,aAAa,WAAW,GAAG;AAAA,MAAO,CAAC,UACjC,mBAAmB,SAAS,KAAK;AAAA,IAAA,KAC9B,CAAC;AAAA,IACR,CAAC,cAAc,oBAAoB,WAAW;AAAA,EAAA;AAGhD,QAAM,aAAa;AAAA,IACjB,MACE,cAAc,WAAW,GAAG,KAAK,IAAI,CAAC,YAAY;AAAA,MAChD,GAAG;AAAA,MACH,OAAO,OAAO;AAAA,MACd,UAAU,aAAa,WAAW,GAAG,SAAS,OAAO,EAAE;AAAA,MACvD,UACE,OAAO,KAAK,YAAA,EAAc,QAAQ,UAAU,YAAa,CAAA,IAAI;AAAA,IACjE,EAAE,KAAK,CAAC;AAAA,IACV,CAAC,eAAe,cAAc,aAAa,SAAS;AAAA,EAAA;AAGhD,QAAA,kBAAkB,YAAY,MAAM;AACxC,UAAM,cAAc,oBAAoB;AACxC,UAAM,eAAe,cAAc;AAC7B,UAAA,YAAY,gBAAgB,mBAAmB;AAErD,mBAAe,YAAY;AAC3B,mBAAe,gBAAgB,SAAS;AAAA,EAAA,GACvC,CAAC,oBAAoB,kBAAkB,CAAC;AAE3C,YAAU,MAAM;AACE;EAAA,GACf,CAAC,oBAAoB,eAAe,CAAC;AAExC,YAAU,MAAM,aAAa,EAAE,GAAG,CAAC,WAAW,CAAC;AAEzC,QAAA,kBAA2C,CAAC,WAAW;AAC3D,UAAM,kBAAkB,cAAc;AAAA,MAAI,CAAC,GAAG,MAC5C,gBAAgB,IACZ,OAAO,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAChD,CAAC,GAAI,aAAa,CAAC,KAAK,EAAG;AAAA,IAAA;AAEjC,oBAAgB,eAAsB;AAAA,EAAA;AAGlC,QAAA,kBAAkB,YAAY,MAAM;AAClC,UAAA,kBAAkB,UAAU,YAAY;AAE9C,QAAI,aAAa;AACf,UAAI,cAAc,IAAI;AACpB,wBAAgB,WAAW,IAAI,aAAa,WAAW,GAAG;AAAA,UACxD,CAAC,UAAU,CAAC,mBAAmB,SAAS,KAAK;AAAA,QAAA;AAAA,MAC/C,OACK;AACW,wBAAA,WAAW,IAAI;MACjC;AAAA,IAAA,OACK;AACL,sBAAgB,WAAW,IAAI,CAAC,GAAG,kBAAkB;AAAA,IACvD;AAEA,oBAAgB,eAAe;AAAA,EAAA,GAC9B;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAOK,QAAA,YAAY,YAAY,MAAM;AAClC,UAAM,cAAc,oBAAoB;AAExC,UAAM,eACH,oBAAA,cAAA,EAAa,WAAU,QACrB,UAAA,cAAc,IAEX,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,oBAAC,OAAG,UAAY,YAAA,CAAA;AAAA,MACf,IAAI,QAAQ,yBAAyB,IAAI,mBAAmB,MAAM;AAAA,IAAA,EAAA,CACrE,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAC,oBAAA,KAAA,EAAG,kBAAQ,UAAU,CAAA;AAAA,MACrB,KAAK,mBAAmB,MAAM;AAAA,IAAA,EACjC,CAAA,EAEJ,CAAA;AAGF,WACG,oBAAA,OAAA,EAAI,WAAW,QAAQ,oBACtB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,YAAY;AAAA,QAC1B,OAAO;AAAA,QACP,UAAU,MAAM,gBAAgB;AAAA,QAChC,WAAW,QAAQ;AAAA,QACnB,eAAe,eAAe,CAAC;AAAA,QAC/B,SAAS;AAAA,MAAA;AAAA,IAEb,EAAA,CAAA;AAAA,EAAA,GAED;AAAA,IACD,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,EAAA,CACV;AAGC,SAAA,oBAAC,SAAQ,EAAA,IAAI,MAAM,IAAI,YAAY,GAAG,WACnC,UAAA,WAAW,SAAS,IAEjB,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,QAAQ;AAAA,QACtB,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,QAChB;AAAA,QACA,MAAK;AAAA,QACL,aAAa,QAAQ;AAAA,QACrB,OAAO;AAAA,QACP,UAAU,CAAC,GAAG,QAAQ,aAAa,GAAG;AAAA,MAAA;AAAA,IACxC;AAAA,wBACC,WAAU,EAAA;AAAA,IACX;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,IAAI,MAAM,IAAI,MAAM;AAAA,QACpB,QAAQ;AAAA,QACR,WAAW,QAAQ;AAAA,QACnB,aAAW;AAAA,QACX,aAAW;AAAA,QACX,eAAe;AAAA,QACf,UAAU;AAAA,QACV,YAAU;AAAA,QACV,WAAS;AAAA,QACT,aAAW;AAAA,MAAA;AAAA,MAVN;AAAA,IAWP;AAAA,EAAA,GACF,IAEA,aAEJ,CAAA;AAEJ;"}

package/dist/esm/TimePicker/TimePicker.js

@@ -20,7 +20,7 @@ import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
 import { HvWarningText } from "../Forms/WarningText/WarningText.js";
 const toTime = (value) => {
   if (!value)
-    return void 0;
+    return value;
   const { hours, minutes, seconds } = value;
   return new Time$1(hours, minutes, seconds);
 };

package/dist/esm/TimePicker/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo, forwardRef } from \"react\";\n\nimport { Time } from \"@internationalized/date\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"../Forms\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n  if (!value) return undefined;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\"\n  > {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id: idProp,\n      name,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      label,\n\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n      hoursPlaceholder = \"hh\",\n      minutesPlaceholder = \"mm\",\n      secondsPlaceholder = \"ss\",\n\n      value: valueProp,\n      defaultValue: defaultValueProp,\n\n      timeFormat,\n      showSeconds,\n      disableExpand,\n      locale = \"en\",\n\n      onToggle,\n      onChange,\n\n      // misc properties:\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      ...others\n    } = useDefaultProps(\"HvTimePicker\", props);\n\n    const id = useUniqueId(idProp, \"hvtimepicker\");\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const timeFieldRef = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const stateProps: TimeFieldStateOptions = {\n      value: toTime(valueProp),\n      defaultValue: toTime(defaultValueProp),\n      label,\n      locale,\n      isRequired: required,\n      isReadOnly: readOnly,\n      isDisabled: disabled,\n      granularity: \"second\",\n      hourCycle: getFormat(timeFormat),\n      onChange: (value) => {\n        const { hour: hours, minute: minutes, second: seconds } = value;\n        onChange?.({ hours, minutes, seconds });\n      },\n    };\n    const state = useTimeFieldState(stateProps);\n    const { labelProps, fieldProps, descriptionProps } = useTimeField(\n      {\n        ...stateProps,\n        id,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n      },\n      state,\n      timeFieldRef\n    );\n\n    const [open, setOpen] = useState(false);\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n    const [validationState] = useControlled(status, \"standBy\");\n\n    const placeholders = useMemo(\n      () => ({\n        hour: hoursPlaceholder,\n        minute: minutesPlaceholder,\n        second: secondsPlaceholder,\n      }),\n      [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = validationState === \"invalid\";\n    const errorMessageId = isStateInvalid\n      ? canShowError\n        ? setId(id, \"error\")\n        : ariaErrorMessage\n      : undefined;\n\n    return (\n      <HvFormElement\n        name={name}\n        required={required}\n        disabled={disabled}\n        status={validationState}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(label || description) && (\n          <div className={classes.labelContainer}>\n            {label && (\n              <HvLabel\n                label={label}\n                className={classes.label}\n                {...labelProps}\n              />\n            )}\n            {description && (\n              <HvInfoMessage\n                className={classes.description}\n                {...descriptionProps}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          variableWidth\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={\n            placeholder && !state.value ? (\n              placeholder\n            ) : (\n              <Placeholder\n                ref={timeFieldRef}\n                name={name}\n                state={state}\n                placeholders={placeholders}\n                className={cx(classes.placeholder, {\n                  [classes.placeholderDisabled]: disabled,\n                })}\n                {...fieldProps}\n              />\n            )\n          }\n          classes={{\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            panel: classes.dropdownPanel,\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          placement=\"right\"\n          adornment={\n            <TimeIcon\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.icon}\n            />\n          }\n          expanded={open}\n          onToggle={(evt, newOpen) => {\n            if (disableExpand) return;\n            setOpen(newOpen);\n            onToggle?.(evt, newOpen);\n          }}\n          onContainerCreation={(containerRef) => {\n            containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={fieldProps[\"aria-labelledby\"]}\n          aria-describedby={fieldProps[\"aria-describedby\"]}\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          disablePortal={disablePortal}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          {...otherDropdownProps}\n        >\n          <div ref={timeFieldRef} className={classes.timePopperContainer}>\n            {state.segments.map((segment, i) => (\n              <Unit\n                key={i}\n                state={state}\n                segment={segment}\n                placeholder={placeholders[segment.type]}\n                onAdd={() => state.increment(segment.type)}\n                onSub={() => state.decrement(segment.type)}\n                onChange={(evt, val) => {\n                  state.setSegment(segment.type, Number(val));\n                }}\n              />\n            ))}\n          </div>\n        </HvBaseDropdown>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(id, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["Time","TimeIcon"],"mappings":"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"}
+{"version":3,"file":"TimePicker.js","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo, forwardRef } from \"react\";\n\nimport { Time } from \"@internationalized/date\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"../Forms\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue | null) => {\n  if (!value) return value;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\"\n  > {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue | null;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue | null;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id: idProp,\n      name,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      label,\n\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n      hoursPlaceholder = \"hh\",\n      minutesPlaceholder = \"mm\",\n      secondsPlaceholder = \"ss\",\n\n      value: valueProp,\n      defaultValue: defaultValueProp,\n\n      timeFormat,\n      showSeconds,\n      disableExpand,\n      locale = \"en\",\n\n      onToggle,\n      onChange,\n\n      // misc properties:\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      ...others\n    } = useDefaultProps(\"HvTimePicker\", props);\n\n    const id = useUniqueId(idProp, \"hvtimepicker\");\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const timeFieldRef = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const stateProps: TimeFieldStateOptions = {\n      value: toTime(valueProp),\n      defaultValue: toTime(defaultValueProp),\n      label,\n      locale,\n      isRequired: required,\n      isReadOnly: readOnly,\n      isDisabled: disabled,\n      granularity: \"second\",\n      hourCycle: getFormat(timeFormat),\n      onChange: (value) => {\n        const { hour: hours, minute: minutes, second: seconds } = value;\n        onChange?.({ hours, minutes, seconds });\n      },\n    };\n    const state = useTimeFieldState(stateProps);\n    const { labelProps, fieldProps, descriptionProps } = useTimeField(\n      {\n        ...stateProps,\n        id,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n      },\n      state,\n      timeFieldRef\n    );\n\n    const [open, setOpen] = useState(false);\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n    const [validationState] = useControlled(status, \"standBy\");\n\n    const placeholders = useMemo(\n      () => ({\n        hour: hoursPlaceholder,\n        minute: minutesPlaceholder,\n        second: secondsPlaceholder,\n      }),\n      [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = validationState === \"invalid\";\n    const errorMessageId = isStateInvalid\n      ? canShowError\n        ? setId(id, \"error\")\n        : ariaErrorMessage\n      : undefined;\n\n    return (\n      <HvFormElement\n        name={name}\n        required={required}\n        disabled={disabled}\n        status={validationState}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(label || description) && (\n          <div className={classes.labelContainer}>\n            {label && (\n              <HvLabel\n                label={label}\n                className={classes.label}\n                {...labelProps}\n              />\n            )}\n            {description && (\n              <HvInfoMessage\n                className={classes.description}\n                {...descriptionProps}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          variableWidth\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={\n            placeholder && !state.value ? (\n              placeholder\n            ) : (\n              <Placeholder\n                ref={timeFieldRef}\n                name={name}\n                state={state}\n                placeholders={placeholders}\n                className={cx(classes.placeholder, {\n                  [classes.placeholderDisabled]: disabled,\n                })}\n                {...fieldProps}\n              />\n            )\n          }\n          classes={{\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            panel: classes.dropdownPanel,\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          placement=\"right\"\n          adornment={\n            <TimeIcon\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.icon}\n            />\n          }\n          expanded={open}\n          onToggle={(evt, newOpen) => {\n            if (disableExpand) return;\n            setOpen(newOpen);\n            onToggle?.(evt, newOpen);\n          }}\n          onContainerCreation={(containerRef) => {\n            containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={fieldProps[\"aria-labelledby\"]}\n          aria-describedby={fieldProps[\"aria-describedby\"]}\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          disablePortal={disablePortal}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          {...otherDropdownProps}\n        >\n          <div ref={timeFieldRef} className={classes.timePopperContainer}>\n            {state.segments.map((segment, i) => (\n              <Unit\n                key={i}\n                state={state}\n                segment={segment}\n                placeholder={placeholders[segment.type]}\n                onAdd={() => state.increment(segment.type)}\n                onSub={() => state.decrement(segment.type)}\n                onChange={(evt, val) => {\n                  state.setSegment(segment.type, Number(val));\n                }}\n              />\n            ))}\n          </div>\n        </HvBaseDropdown>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(id, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["Time","TimeIcon"],"mappings":"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"}

package/dist/types/index.d.ts

@@ -6695,9 +6695,9 @@ export declare interface HvTimePickerProps extends Omit<HvFormElementProps, "cla
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvTimePickerClasses;
     /** Current value of the element when _controlled_. Follows the 24-hour format. */
-    value?: HvTimePickerValue;
+    value?: HvTimePickerValue | null;
     /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */
-    defaultValue?: HvTimePickerValue;
+    defaultValue?: HvTimePickerValue | null;
     /** The placeholder value when no time is selected. */
     placeholder?: string;
     /** The placeholder of the hours input. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.44.3",
+  "version": "5.44.5",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -63,7 +63,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "5cf0119ea66c034bda2108043eb3c6b09ab4b7ff",
+  "gitHead": "8153821e78191996ec145cc6095e9073ad6028d0",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {