@hitachivantara/uikit-react-core 5.27.5 → 5.27.7

package/dist/cjs/components/Dropdown/List/List.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.cjs","sources":["../../../../../src/components/Dropdown/List/List.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport BaseDropdownContext from \"@core/components/BaseDropdown/BaseDropdownContext\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { getSelected } from \"../utils\";\nimport { HvDropdownLabelsProps } from \"../types\";\n\nexport { staticClasses as dropdownListClasses };\n\nexport type HvDropdownListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvDropdownListClasses;\n  /**\n   * The list to be rendered.\n   */\n  values?: HvListValue[];\n  /**\n   * If true renders a multi select list.\n   */\n  multiSelect?: boolean;\n  /**\n   * If true renders the search component.\n   */\n  showSearch?: boolean;\n  /**\n   * A function to be executed whenever a item is selected in the list\n   * or the Apply button is activated (when `multiSelect` is `true`).\n   */\n  onChange: (\n    /** An array containing the selected values */\n    listValues: HvListValue[],\n    /** If `true` the selection if finally committed the dropdown header text should reflect the new selection */\n    commitChanges: boolean,\n    /** If `true` the dropdown should toggle it's current state */\n    toggle: boolean,\n    /** If `true` the dropdown will call onChange */\n    notifyChanges: boolean\n  ) => void;\n  /**\n   * A function to be executed whenever the Cancel button is activated.\n   */\n  onCancel: (event: MouseEvent) => void;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Max height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class.\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n}\n\n/**\n * The values property was being deeply cloned. That created a significant performance\n * hit when the values contained complex properties' values, like React Nodes.\n *\n * For minimizing the impact of removing the clone, a shallow clone of the array and its\n * objects is performed instead. That should have the same effect in the majority of the\n * cases, where the properties' values are primitive.\n */\nconst clone = (values: HvListValue[]) => values.map((value) => ({ ...value }));\n\n/**\n * Set all hidden's to false.\n */\nconst cleanHidden = (lst: HvListValue[]) =>\n  lst.map((item) => ({ ...item, isHidden: false }));\n\nconst valuesExist = (values: HvListValue[]) =>\n  !isNil(values) && values?.length > 0;\n\nexport const HvDropdownList = ({\n  id,\n  classes: classesProp,\n  values = [],\n  multiSelect = false,\n  showSearch = false,\n  onChange,\n  onCancel,\n  labels,\n  notifyChangesOnFirstRender = false,\n  hasTooltips = false,\n  singleSelectionToggle,\n  height: dropdownHeight,\n  maxHeight,\n  virtualized = false,\n  ...others\n}: HvDropdownListProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [list, setList] = useState<HvListValue[]>(clone(values));\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n  const { width, height } = useContext(BaseDropdownContext);\n\n  const newLabels = {\n    selectAll: labels?.selectAll,\n    selectionConjunction: labels?.multiSelectionConjunction,\n  };\n\n  /**\n   * Update states associated with select all.\n   */\n  const updateSelectAll = (listValues: HvListValue[]) => {\n    if (!listValues) return;\n    const nbrSelected = getSelected(listValues).length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === listValues.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  };\n\n  /**\n   * After the first render, call onChange if notifyChangesOnFirstRender.\n   */\n  useEffect(() => {\n    if (!valuesExist(values)) return;\n    setList(clone(values));\n    updateSelectAll(values);\n    if (notifyChangesOnFirstRender) {\n      onChange?.(values, false, false, true);\n    }\n  }, [values, notifyChangesOnFirstRender, onChange]);\n\n  /**\n   * Sets the filtered values to the state.\n   *\n   * @param {String} str - The value that is being looked.\n   */\n  const handleSearch = (str: string) => {\n    const results = list\n      ? list.filter(\n          ({\n            searchValue,\n            label,\n            value,\n          }: {\n            searchValue?: any;\n            label?: any;\n            value?: any;\n          }) => {\n            let stringValue = \"\";\n            if (\n              typeof searchValue === \"string\" ||\n              searchValue instanceof String\n            ) {\n              stringValue = searchValue.toLowerCase();\n            } else if (typeof label === \"string\" || label instanceof String) {\n              stringValue = label.toLowerCase();\n            } else if (typeof value === \"string\" || value instanceof String) {\n              stringValue = value.toLowerCase();\n            }\n\n            return stringValue.indexOf(str.toLowerCase()) >= 0;\n          }\n        )\n      : null;\n\n    if (!isNil(results)) {\n      const newList = list.map((elem) => {\n        const isResult = results.find((result) => result.label === elem.label);\n        return { ...elem, isHidden: !isResult };\n      });\n\n      setList(newList);\n      setSearchStr(str);\n    }\n    return str;\n  };\n\n  /**\n   * Create search element.\n   *\n   * @returns {*}\n   */\n  const renderSearch = () => (\n    <div className={classes.searchContainer}>\n      <HvInput\n        id={setId(id, \"search\")}\n        type=\"search\"\n        value={searchStr}\n        placeholder={labels?.searchPlaceholder}\n        aria-label={labels?.searchPlaceholder}\n        onChange={(event, str) => handleSearch(str)}\n      />\n    </div>\n  );\n\n  /**\n   * Select all the values inside the dropdown.\n   *\n   */\n  const handleSelectAll = () => {\n    const newList = list.map((elem) => ({ ...elem, selected: !anySelected }));\n    setList(newList);\n    updateSelectAll(newList);\n  };\n\n  /**\n   * Create selecteAll component.\n   *\n   * @returns {*}\n   */\n  const renderSelectAll = () => {\n    const selectAll = labels?.selectAll;\n    const multiSelectionConjunction = labels?.multiSelectionConjunction;\n    const nbrSelected = getSelected(list).length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${multiSelectionConjunction} ${list.length}`}\n          </>\n        ) : (\n          <>\n            <b>{selectAll}</b>\n            {` (${list.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          classes={{\n            container: classes.selection,\n          }}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  };\n\n  /**\n   * When selecting the state list is updated with the corresponding selection.\n   *\n   * @param listValues - elements selected.\n   */\n  const onSelection: HvListProps[\"onChange\"] = (listValues) => {\n    if (!multiSelect) {\n      onChange(cleanHidden(listValues), true, true, true);\n    } else {\n      updateSelectAll(listValues);\n      setList(clone(listValues));\n    }\n  };\n\n  /**\n   * Render action buttons.\n   */\n  const renderActions = () => {\n    const applyLabel = labels?.applyLabel;\n    const cancelLabel = labels?.cancelLabel;\n    return (\n      <HvActionBar id={setId(id, \"actions\")}>\n        <HvButton\n          id={setId(id, \"actions-apply\")}\n          onClick={() => onChange(cleanHidden(list), true, true, true)}\n          variant=\"primaryGhost\"\n        >\n          {applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"actions-cancel\")}\n          onClick={onCancel}\n          variant=\"primaryGhost\"\n        >\n          {cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    );\n  };\n\n  const showList = valuesExist(values);\n\n  return (\n    <div className={classes.rootList}>\n      <div className={classes.listBorderDown} />\n      <div className={classes.listContainer}>\n        {showSearch && renderSearch()}\n        {showList && multiSelect && renderSelectAll()}\n        {showList && (\n          <HvList\n            id={setId(id, \"list\")}\n            classes={{\n              root: cx(\n                classes.dropdownListContainer,\n                css({\n                  maxWidth: width,\n                  maxHeight:\n                    maxHeight ??\n                    `calc(${height}px - 32px - ${theme.space.xs} - ${theme.space.sm})`,\n                  overflow: \"auto\",\n                  padding: 5,\n                }),\n                dropdownHeight &&\n                  css({\n                    height: dropdownHeight,\n                  }),\n                virtualized &&\n                  css({\n                    maxWidth: \"inherit\",\n                    maxHeight: \"inherit\",\n                    overflow: \"inherit\",\n                    padding: 0,\n                  })\n              ),\n            }}\n            values={list}\n            multiSelect={multiSelect}\n            useSelector={multiSelect}\n            showSelectAll={false}\n            onChange={onSelection}\n            labels={newLabels}\n            hasTooltips={hasTooltips}\n            selectable\n            condensed\n            singleSelectionToggle={singleSelectionToggle}\n            height={dropdownHeight}\n            virtualized={virtualized}\n            {...others}\n          />\n        )}\n      </div>\n      {showList && multiSelect ? renderActions() : null}\n    </div>\n  );\n};\n"],"names":["clone","values","map","value","cleanHidden","lst","item","isHidden","valuesExist","isNil","length","HvDropdownList","id","classes","classesProp","multiSelect","showSearch","onChange","onCancel","labels","notifyChangesOnFirstRender","hasTooltips","singleSelectionToggle","height","dropdownHeight","maxHeight","virtualized","others","cx","css","useClasses","searchStr","setSearchStr","useState","list","setList","allSelected","setAllSelected","anySelected","setAnySelected","width","useContext","BaseDropdownContext","newLabels","selectAll","selectionConjunction","multiSelectionConjunction","updateSelectAll","listValues","nbrSelected","getSelected","hasSelection","allSelect","useEffect","handleSearch","str","results","filter","searchValue","label","stringValue","String","toLowerCase","indexOf","newList","elem","isResult","find","result","renderSearch","_jsx","className","searchContainer","children","HvInput","setId","type","placeholder","searchPlaceholder","event","handleSelectAll","selected","renderSelectAll","defaultLabel","HvTypography","component","_jsxs","_Fragment","selectAllContainer","HvCheckBox","container","selection","indeterminate","checked","onSelection","renderActions","applyLabel","cancelLabel","HvActionBar","HvButton","onClick","variant","showList","rootList","listBorderDown","listContainer","HvList","root","dropdownListContainer","maxWidth","theme","space","xs","sm","overflow","padding","useSelector","showSelectAll","selectable","condensed"],"mappings":"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"}
+{"version":3,"file":"List.cjs","sources":["../../../../../src/components/Dropdown/List/List.tsx"],"sourcesContent":["import { MouseEvent, useContext, useEffect, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport { HvInput } from \"@core/components/Input\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport BaseDropdownContext from \"@core/components/BaseDropdown/BaseDropdownContext\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { getSelected } from \"../utils\";\nimport { HvDropdownLabelsProps } from \"../types\";\n\nexport { staticClasses as dropdownListClasses };\n\nexport type HvDropdownListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes?: HvDropdownListClasses;\n  /**\n   * The list to be rendered.\n   */\n  values?: HvListValue[];\n  /**\n   * If true renders a multi select list.\n   */\n  multiSelect?: boolean;\n  /**\n   * If true renders the search component.\n   */\n  showSearch?: boolean;\n  /**\n   * A function to be executed whenever a item is selected in the list\n   * or the Apply button is activated (when `multiSelect` is `true`).\n   */\n  onChange: (\n    /** An array containing the selected values */\n    listValues: HvListValue[],\n    /** If `true` the selection if finally committed the dropdown header text should reflect the new selection */\n    commitChanges: boolean,\n    /** If `true` the dropdown should toggle it's current state */\n    toggle: boolean,\n    /** If `true` the dropdown will call onChange */\n    notifyChanges: boolean\n  ) => void;\n  /**\n   * A function to be executed whenever the Cancel button is activated.\n   */\n  onCancel: (event: MouseEvent) => void;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Max height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class.\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n}\n\n/**\n * The values property was being deeply cloned. That created a significant performance\n * hit when the values contained complex properties' values, like React Nodes.\n *\n * For minimizing the impact of removing the clone, a shallow clone of the array and its\n * objects is performed instead. That should have the same effect in the majority of the\n * cases, where the properties' values are primitive.\n */\nconst clone = (values: HvListValue[]) => values.map((value) => ({ ...value }));\n\n/**\n * Set all hidden's to false.\n */\nconst cleanHidden = (lst: HvListValue[]) =>\n  lst.map((item) => ({ ...item, isHidden: false }));\n\nconst valuesExist = (values: HvListValue[]) =>\n  !isNil(values) && values?.length > 0;\n\nexport const HvDropdownList = ({\n  id,\n  classes: classesProp,\n  values = [],\n  multiSelect = false,\n  showSearch = false,\n  onChange,\n  onCancel,\n  labels,\n  notifyChangesOnFirstRender = false,\n  hasTooltips = false,\n  singleSelectionToggle,\n  height: dropdownHeight,\n  maxHeight,\n  virtualized = false,\n  ...others\n}: HvDropdownListProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [list, setList] = useState<HvListValue[]>(clone(values));\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n  const { width, height } = useContext(BaseDropdownContext);\n\n  const newLabels = {\n    selectAll: labels?.selectAll,\n    selectionConjunction: labels?.multiSelectionConjunction,\n  };\n\n  /**\n   * Update states associated with select all.\n   */\n  const updateSelectAll = (listValues: HvListValue[]) => {\n    if (!listValues) return;\n    const nbrSelected = getSelected(listValues).length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === listValues.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  };\n\n  /**\n   * After the first render, call onChange if notifyChangesOnFirstRender.\n   */\n  useEffect(() => {\n    if (!valuesExist(values)) return;\n    setList(clone(values));\n    updateSelectAll(values);\n    if (notifyChangesOnFirstRender) {\n      onChange?.(values, false, false, true);\n    }\n  }, [values, notifyChangesOnFirstRender, onChange]);\n\n  /**\n   * Sets the filtered values to the state.\n   *\n   * @param {String} str - The value that is being looked.\n   */\n  const handleSearch = (str: string) => {\n    const results = list\n      ? list.filter(\n          ({\n            searchValue,\n            label,\n            value,\n          }: {\n            searchValue?: any;\n            label?: any;\n            value?: any;\n          }) => {\n            let stringValue = \"\";\n            if (\n              typeof searchValue === \"string\" ||\n              searchValue instanceof String\n            ) {\n              stringValue = searchValue.toLowerCase();\n            } else if (typeof label === \"string\" || label instanceof String) {\n              stringValue = label.toLowerCase();\n            } else if (typeof value === \"string\" || value instanceof String) {\n              stringValue = value.toLowerCase();\n            }\n\n            return stringValue.indexOf(str.toLowerCase()) >= 0;\n          }\n        )\n      : null;\n\n    if (!isNil(results)) {\n      const newList = list.map((elem) => {\n        const isResult = results.find((result) => result.label === elem.label);\n        return { ...elem, isHidden: !isResult };\n      });\n\n      setList(newList);\n      setSearchStr(str);\n    }\n    return str;\n  };\n\n  /**\n   * Create search element.\n   *\n   * @returns {*}\n   */\n  const renderSearch = () => (\n    <div className={classes.searchContainer}>\n      <HvInput\n        id={setId(id, \"search\")}\n        type=\"search\"\n        value={searchStr}\n        placeholder={labels?.searchPlaceholder}\n        aria-label={labels?.searchPlaceholder}\n        onChange={(event, str) => handleSearch(str)}\n      />\n    </div>\n  );\n\n  /**\n   * Select all the values inside the dropdown.\n   *\n   */\n  const handleSelectAll = () => {\n    const newList = list.map((elem) => ({ ...elem, selected: !anySelected }));\n    setList(newList);\n    updateSelectAll(newList);\n  };\n\n  /**\n   * Create selecteAll component.\n   *\n   * @returns {*}\n   */\n  const renderSelectAll = () => {\n    const selectAll = labels?.selectAll;\n    const multiSelectionConjunction = labels?.multiSelectionConjunction;\n    const nbrSelected = getSelected(list).length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${multiSelectionConjunction} ${list.length}`}\n          </>\n        ) : (\n          <>\n            <b>{selectAll}</b>\n            {` (${list.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          classes={{\n            container: classes.selection,\n          }}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  };\n\n  /**\n   * When selecting the state list is updated with the corresponding selection.\n   *\n   * @param listValues - elements selected.\n   */\n  const onSelection: HvListProps[\"onChange\"] = (listValues) => {\n    if (!multiSelect) {\n      onChange(cleanHidden(listValues), true, true, true);\n    } else {\n      updateSelectAll(listValues);\n      setList(clone(listValues));\n    }\n  };\n\n  /**\n   * Render action buttons.\n   */\n  const renderActions = () => {\n    const applyLabel = labels?.applyLabel;\n    const cancelLabel = labels?.cancelLabel;\n    return (\n      <HvActionBar id={setId(id, \"actions\")}>\n        <HvButton\n          id={setId(id, \"actions-apply\")}\n          onClick={() => onChange(cleanHidden(list), true, true, true)}\n          variant=\"primaryGhost\"\n        >\n          {applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"actions-cancel\")}\n          onClick={onCancel}\n          variant=\"primaryGhost\"\n        >\n          {cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    );\n  };\n\n  const showList = valuesExist(values);\n\n  return (\n    <div className={classes.rootList}>\n      <div className={classes.listBorderDown} />\n      <div className={classes.listContainer}>\n        {showSearch && renderSearch()}\n        {showList && multiSelect && renderSelectAll()}\n        {showList && (\n          <HvList\n            id={setId(id, \"list\")}\n            classes={{\n              root: cx(\n                classes.dropdownListContainer,\n                css({\n                  maxWidth: width,\n                  maxHeight:\n                    maxHeight ??\n                    `calc(${height}px - 32px - ${theme.space.xs} - ${theme.space.sm})`,\n                  overflow: \"auto\",\n                  padding: 4,\n                  margin: -4,\n                }),\n                dropdownHeight &&\n                  css({\n                    height: dropdownHeight,\n                  }),\n                virtualized &&\n                  css({\n                    maxWidth: \"inherit\",\n                    maxHeight: \"inherit\",\n                    overflow: \"inherit\",\n                    padding: 0,\n                  })\n              ),\n            }}\n            values={list}\n            multiSelect={multiSelect}\n            useSelector={multiSelect}\n            showSelectAll={false}\n            onChange={onSelection}\n            labels={newLabels}\n            hasTooltips={hasTooltips}\n            selectable\n            condensed\n            singleSelectionToggle={singleSelectionToggle}\n            height={dropdownHeight}\n            virtualized={virtualized}\n            {...others}\n          />\n        )}\n      </div>\n      {showList && multiSelect ? renderActions() : null}\n    </div>\n  );\n};\n"],"names":["clone","values","map","value","cleanHidden","lst","item","isHidden","valuesExist","isNil","length","HvDropdownList","id","classes","classesProp","multiSelect","showSearch","onChange","onCancel","labels","notifyChangesOnFirstRender","hasTooltips","singleSelectionToggle","height","dropdownHeight","maxHeight","virtualized","others","cx","css","useClasses","searchStr","setSearchStr","useState","list","setList","allSelected","setAllSelected","anySelected","setAnySelected","width","useContext","BaseDropdownContext","newLabels","selectAll","selectionConjunction","multiSelectionConjunction","updateSelectAll","listValues","nbrSelected","getSelected","hasSelection","allSelect","useEffect","handleSearch","str","results","filter","searchValue","label","stringValue","String","toLowerCase","indexOf","newList","elem","isResult","find","result","renderSearch","jsx","searchContainer","HvInput","setId","searchPlaceholder","event","handleSelectAll","selected","renderSelectAll","defaultLabel","HvTypography","jsxs","Fragment","selectAllContainer","HvCheckBox","container","selection","onSelection","renderActions","applyLabel","cancelLabel","HvActionBar","HvButton","showList","rootList","listBorderDown","listContainer","HvList","root","dropdownListContainer","maxWidth","theme","space","xs","sm","overflow","padding","margin"],"mappings":"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"}

package/dist/cjs/components/EmptyState/EmptyState.cjs

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const styles = require("@mui/material/styles");
 const useMediaQuery = require("@mui/material/useMediaQuery");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useTheme = require("../../hooks/useTheme.cjs");
 const EmptyState_styles = require("./EmptyState.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
@@ -32,35 +32,25 @@ const HvEmptyState = (props) => {
   const onlyXs = useMediaQuery__default.default(muiTheme.breakpoints.only("xs"));
   const upSm = useMediaQuery__default.default(muiTheme.breakpoints.up("sm"));
   const messageOnly = !!(message && !(title || action));
-  const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-    variant,
-    className: style,
-    children: node
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: cx(classes.root, className),
-    ...others,
-    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: cx(classes.container, onlyXs && css({
-        flexDirection: "column",
-        alignItems: "center",
-        textAlign: "center"
-      }), {
-        [classes.containerMessageOnly]: messageOnly
-      }, onlyXs && messageOnly && css({
-        flexDirection: "row"
-      })),
-      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes.iconContainer,
-        children: icon
-      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: cx(classes.textContainer, upSm && css({
-          marginLeft: uikitStyles.theme.space.xs
-        })),
-        children: [renderNode(activeTheme == null ? void 0 : activeTheme.emptyState.titleVariant, title, classes.titleContainer), renderNode("body", message, classes.messageContainer), renderNode("body", action, classes.actionContainer)]
-      })]
-    })
-  });
+  const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant, className: style, children: node });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.container, onlyXs && css({
+    flexDirection: "column",
+    alignItems: "center",
+    textAlign: "center"
+  }), {
+    [classes.containerMessageOnly]: messageOnly
+  }, onlyXs && messageOnly && css({
+    flexDirection: "row"
+  })), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconContainer, children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.textContainer, upSm && css({
+      marginLeft: uikitStyles.theme.space.xs
+    })), children: [
+      renderNode(activeTheme == null ? void 0 : activeTheme.emptyState.titleVariant, title, classes.titleContainer),
+      renderNode("body", message, classes.messageContainer),
+      renderNode("body", action, classes.actionContainer)
+    ] })
+  ] }) });
 };
 exports.emptyStateClasses = EmptyState_styles.staticClasses;
 exports.HvEmptyState = HvEmptyState;

package/dist/cjs/components/EmptyState/EmptyState.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.cjs","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { useTheme as useHvTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./EmptyState.styles\";\n\nexport { staticClasses as emptyStateClasses };\n\nexport type HvEmptyStateClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvEmptyStateProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Icon to be presented. */\n  icon: React.ReactNode;\n  /** The title to be shown. */\n  title?: string | React.ReactNode;\n  /** The message to be shown. */\n  message?: string | React.ReactNode;\n  /** The action message to be shown. */\n  action?: string | React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvEmptyStateClasses;\n}\n\n/**\n * Empty states communicate that there’s no information, data or values to display in a given context.\n */\nexport const HvEmptyState = (props: HvEmptyStateProps) => {\n  const {\n    action,\n    icon,\n    title,\n    message,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvEmptyState\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme } = useHvTheme();\n\n  const muiTheme = useTheme();\n\n  const onlyXs = useMediaQuery(muiTheme.breakpoints.only(\"xs\"));\n  const upSm = useMediaQuery(muiTheme.breakpoints.up(\"sm\"));\n\n  const messageOnly = !!(message && !(title || action));\n\n  const renderNode = (\n    variant?: HvTypographyProps[\"variant\"],\n    node?: React.ReactNode,\n    style?: string\n  ) =>\n    node && (\n      <HvTypography variant={variant} className={style}>\n        {node}\n      </HvTypography>\n    );\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <div\n        className={cx(\n          classes.container,\n          onlyXs &&\n            css({\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              textAlign: \"center\",\n            }),\n          {\n            [classes.containerMessageOnly]: messageOnly,\n          },\n          onlyXs && messageOnly && css({ flexDirection: \"row\" })\n        )}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div\n          className={cx(\n            classes.textContainer,\n            upSm && css({ marginLeft: theme.space.xs })\n          )}\n        >\n          {renderNode(\n            activeTheme?.emptyState.titleVariant,\n            title,\n            classes.titleContainer\n          )}\n          {renderNode(\"body\", message, classes.messageContainer)}\n          {renderNode(\"body\", action, classes.actionContainer)}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["HvEmptyState","props","action","icon","title","message","classes","classesProp","className","others","useDefaultProps","cx","css","useClasses","activeTheme","useHvTheme","muiTheme","useTheme","onlyXs","useMediaQuery","breakpoints","only","upSm","up","messageOnly","renderNode","variant","node","style","HvTypography","children","root","container","flexDirection","alignItems","textAlign","containerMessageOnly","_jsx","iconContainer","_jsxs","textContainer","marginLeft","theme","space","xs","emptyState","titleVariant","titleContainer","messageContainer","actionContainer"],"mappings":";;;;;;;;;;;;AAoCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBT,KAAK;AAEnC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,kBAAAA,WAAWN,WAAW;AAE7C,QAAA;AAAA,IAAEO;AAAAA,MAAgBC,SAAW,SAAA;AAEnC,QAAMC,WAAWC,OAAAA;AAEjB,QAAMC,SAASC,uBAAAA,QAAcH,SAASI,YAAYC,KAAK,IAAI,CAAC;AAC5D,QAAMC,OAAOH,uBAAAA,QAAcH,SAASI,YAAYG,GAAG,IAAI,CAAC;AAExD,QAAMC,cAAc,CAAC,EAAEnB,WAAW,EAAED,SAASF;AAE7C,QAAMuB,aAAaA,CACjBC,SACAC,MACAC,UAEAD,uCACGE,yBAAY;AAAA,IAACH;AAAAA,IAAkBlB,WAAWoB;AAAAA,IAAME,UAC9CH;AAAAA,EAAAA,CACW;AAGlB,wCACE,OAAA;AAAA,IAAKnB,WAAWG,GAAGL,QAAQyB,MAAMvB,SAAS;AAAA,IAAE,GAAKC;AAAAA,IAAMqB,0CACrD,OAAA;AAAA,MACEtB,WAAWG,GACTL,QAAQ0B,WACRd,UACEN,IAAI;AAAA,QACFqB,eAAe;AAAA,QACfC,YAAY;AAAA,QACZC,WAAW;AAAA,MAAA,CACZ,GACH;AAAA,QACE,CAAC7B,QAAQ8B,oBAAoB,GAAGZ;AAAAA,MAAAA,GAElCN,UAAUM,eAAeZ,IAAI;AAAA,QAAEqB,eAAe;AAAA,MAAA,CAAO,CACvD;AAAA,MAAEH,WAEFO,2BAAAA,IAAA,OAAA;AAAA,QAAK7B,WAAWF,QAAQgC;AAAAA,QAAcR,UAAE3B;AAAAA,MAAAA,CAAU,GAClDoC,2BAAAA,KAAA,OAAA;AAAA,QACE/B,WAAWG,GACTL,QAAQkC,eACRlB,QAAQV,IAAI;AAAA,UAAE6B,YAAYC,YAAAA,MAAMC,MAAMC;AAAAA,QAAAA,CAAI,CAC5C;AAAA,QAAEd,WAEDL,WACCX,2CAAa+B,WAAWC,cACxB1C,OACAE,QAAQyC,cACV,GACCtB,WAAW,QAAQpB,SAASC,QAAQ0C,gBAAgB,GACpDvB,WAAW,QAAQvB,QAAQI,QAAQ2C,eAAe,CAAC;AAAA,MAAA,CACjD,CAAC;AAAA,IAAA,CACH;AAAA,EAAA,CACF;AAET;;;"}
+{"version":3,"file":"EmptyState.cjs","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { useTheme as useHvTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./EmptyState.styles\";\n\nexport { staticClasses as emptyStateClasses };\n\nexport type HvEmptyStateClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvEmptyStateProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Icon to be presented. */\n  icon: React.ReactNode;\n  /** The title to be shown. */\n  title?: string | React.ReactNode;\n  /** The message to be shown. */\n  message?: string | React.ReactNode;\n  /** The action message to be shown. */\n  action?: string | React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvEmptyStateClasses;\n}\n\n/**\n * Empty states communicate that there’s no information, data or values to display in a given context.\n */\nexport const HvEmptyState = (props: HvEmptyStateProps) => {\n  const {\n    action,\n    icon,\n    title,\n    message,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvEmptyState\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { activeTheme } = useHvTheme();\n\n  const muiTheme = useTheme();\n\n  const onlyXs = useMediaQuery(muiTheme.breakpoints.only(\"xs\"));\n  const upSm = useMediaQuery(muiTheme.breakpoints.up(\"sm\"));\n\n  const messageOnly = !!(message && !(title || action));\n\n  const renderNode = (\n    variant?: HvTypographyProps[\"variant\"],\n    node?: React.ReactNode,\n    style?: string\n  ) =>\n    node && (\n      <HvTypography variant={variant} className={style}>\n        {node}\n      </HvTypography>\n    );\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <div\n        className={cx(\n          classes.container,\n          onlyXs &&\n            css({\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              textAlign: \"center\",\n            }),\n          {\n            [classes.containerMessageOnly]: messageOnly,\n          },\n          onlyXs && messageOnly && css({ flexDirection: \"row\" })\n        )}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div\n          className={cx(\n            classes.textContainer,\n            upSm && css({ marginLeft: theme.space.xs })\n          )}\n        >\n          {renderNode(\n            activeTheme?.emptyState.titleVariant,\n            title,\n            classes.titleContainer\n          )}\n          {renderNode(\"body\", message, classes.messageContainer)}\n          {renderNode(\"body\", action, classes.actionContainer)}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["HvEmptyState","props","action","icon","title","message","classes","classesProp","className","others","useDefaultProps","cx","css","useClasses","activeTheme","useHvTheme","muiTheme","useTheme","onlyXs","useMediaQuery","breakpoints","only","upSm","up","messageOnly","renderNode","variant","node","style","jsx","HvTypography","root","container","flexDirection","alignItems","textAlign","containerMessageOnly","iconContainer","textContainer","marginLeft","theme","space","xs","emptyState","titleVariant","titleContainer","messageContainer","actionContainer"],"mappings":";;;;;;;;;;;;AAoCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBT,KAAK;AAEnC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,kBAAAA,WAAWN,WAAW;AAE7C,QAAA;AAAA,IAAEO;AAAAA,MAAgBC,SAAW,SAAA;AAEnC,QAAMC,WAAWC,OAAAA;AAEjB,QAAMC,SAASC,uBAAAA,QAAcH,SAASI,YAAYC,KAAK,IAAI,CAAC;AAC5D,QAAMC,OAAOH,uBAAAA,QAAcH,SAASI,YAAYG,GAAG,IAAI,CAAC;AAExD,QAAMC,cAAc,CAAC,EAAEnB,WAAW,EAAED,SAASF;AAEvCuB,QAAAA,aAAaA,CACjBC,SACAC,MACAC,UAEAD,QACEE,2BAAA,IAACC,WAAa,cAAA,EAAA,SAAkB,WAAWF,OACxCD,UACH,KAAA,CAAA;AAGJ,wCACG,OAAI,EAAA,WAAWhB,GAAGL,QAAQyB,MAAMvB,SAAS,GAAG,GAAIC,QAC/C,0CAAC,OACC,EAAA,WAAWE,GACTL,QAAQ0B,WACRd,UACEN,IAAI;AAAA,IACFqB,eAAe;AAAA,IACfC,YAAY;AAAA,IACZC,WAAW;AAAA,EAAA,CACZ,GACH;AAAA,IACE,CAAC7B,QAAQ8B,oBAAoB,GAAGZ;AAAAA,EAAAA,GAElCN,UAAUM,eAAeZ,IAAI;AAAA,IAAEqB,eAAe;AAAA,EAAA,CAAO,CACvD,GAEA,UAAA;AAAA,IAAAJ,2BAAA,IAAC,OAAI,EAAA,WAAWvB,QAAQ+B,eAAgBlC,UAAK,MAAA;AAAA,oCAC5C,OACC,EAAA,WAAWQ,GACTL,QAAQgC,eACRhB,QAAQV,IAAI;AAAA,MAAE2B,YAAYC,YAAAA,MAAMC,MAAMC;AAAAA,IAAAA,CAAI,CAC5C,GAECjB,UAAAA;AAAAA,MAAAA,WACCX,2CAAa6B,WAAWC,cACxBxC,OACAE,QAAQuC,cACV;AAAA,MACCpB,WAAW,QAAQpB,SAASC,QAAQwC,gBAAgB;AAAA,MACpDrB,WAAW,QAAQvB,QAAQI,QAAQyC,eAAe;AAAA,IAAA,GACrD;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;"}

package/dist/cjs/components/FileUploader/DropZone/DropZone.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const uniqueId = require("lodash/uniqueId");
 const accept = require("attr-accept");
@@ -8,7 +9,6 @@ const useUniqueId = require("../../../hooks/useUniqueId.cjs");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const utils = require("../utils.cjs");
 const DropZone_styles = require("./DropZone.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Label = require("../../Forms/Label/Label.cjs");
 const InfoMessage = require("../../Forms/InfoMessage/InfoMessage.cjs");
 const Typography = require("../../Typography/Typography.cjs");
@@ -62,101 +62,61 @@ const HvDropZone = ({
     });
     onFilesAdded == null ? void 0 : onFilesAdded(newFiles);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [!hideLabels && /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      id,
-      className: classes.dropZoneLabelsGroup,
-      children: [/* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
-        id: setId.setId(id, "input-file-label"),
-        htmlFor: setId.setId(id, "input-file"),
-        label: labels == null ? void 0 : labels.dropzone,
-        className: classes.dropZoneLabel
-      }), /* @__PURE__ */ jsxRuntime.jsxs(InfoMessage.HvInfoMessage, {
-        id: setId.setId(id, "description"),
-        children: [Number.isInteger(maxFileSize) && `${labels == null ? void 0 : labels.sizeWarning} ${utils.convertUnits(maxFileSize)}`, (labels == null ? void 0 : labels.acceptedFiles) && labels.acceptedFiles, !(labels == null ? void 0 : labels.acceptedFiles) && acceptedFiles.length > 0 && ` (${acceptedFiles.join(", ")})`]
-      })]
-    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      id: setId.setId(id, "input-file-container"),
-      className: cx(classes.dropZoneContainer, {
-        [classes.dragAction]: dragState,
-        [classes.dropZoneContainerDisabled]: disabled
-      }),
-      children: [/* @__PURE__ */ jsxRuntime.jsx("input", {
-        id: setId.setId(id, "input-file"),
-        className: classes.inputArea,
-        type: "file",
-        multiple,
-        disabled,
-        title: !disabled ? `${labels == null ? void 0 : labels.drag} ${labels == null ? void 0 : labels.selectFiles}` : "",
-        onClick: () => {
-          if (inputRef.current) {
-            inputRef.current.value = "";
-          }
-        },
-        onChange: () => {
-          var _a;
-          if (!disabled && ((_a = inputRef.current) == null ? void 0 : _a.files)) {
-            onChangeHandler(inputRef.current.files);
-          }
-        },
-        onDragEnter: (event) => {
-          if (!disabled) {
-            enterDropArea();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !hideLabels && /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: classes.dropZoneLabelsGroup, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, { id: setId.setId(id, "input-file-label"), htmlFor: setId.setId(id, "input-file"), label: labels == null ? void 0 : labels.dropzone, className: classes.dropZoneLabel }),
+      /* @__PURE__ */ jsxRuntime.jsxs(InfoMessage.HvInfoMessage, { id: setId.setId(id, "description"), children: [
+        Number.isInteger(maxFileSize) && `${labels == null ? void 0 : labels.sizeWarning} ${utils.convertUnits(maxFileSize)}`,
+        (labels == null ? void 0 : labels.acceptedFiles) && labels.acceptedFiles,
+        !(labels == null ? void 0 : labels.acceptedFiles) && acceptedFiles.length > 0 && ` (${acceptedFiles.join(", ")})`
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { id: setId.setId(id, "input-file-container"), className: cx(classes.dropZoneContainer, {
+      [classes.dragAction]: dragState,
+      [classes.dropZoneContainerDisabled]: disabled
+    }), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { id: setId.setId(id, "input-file"), className: classes.inputArea, type: "file", multiple, disabled, title: !disabled ? `${labels == null ? void 0 : labels.drag} ${labels == null ? void 0 : labels.selectFiles}` : "", onClick: () => {
+        if (inputRef.current) {
+          inputRef.current.value = "";
+        }
+      }, onChange: () => {
+        var _a;
+        if (!disabled && ((_a = inputRef.current) == null ? void 0 : _a.files)) {
+          onChangeHandler(inputRef.current.files);
+        }
+      }, onDragEnter: (event) => {
+        if (!disabled) {
+          enterDropArea();
+          event.stopPropagation();
+          event.preventDefault();
+        }
+      }, onDragLeave: leaveDropArea, onDropCapture: leaveDropArea, onDragOver: (event) => {
+        if (!disabled) {
+          enterDropArea();
+          event.stopPropagation();
+          event.preventDefault();
+        }
+      }, onDrop: (event) => {
+        if (!disabled) {
+          const {
+            files
+          } = event.dataTransfer;
+          if (multiple === true || files.length === 1) {
             event.stopPropagation();
             event.preventDefault();
+            onChangeHandler(files);
           }
-        },
-        onDragLeave: leaveDropArea,
-        onDropCapture: leaveDropArea,
-        onDragOver: (event) => {
-          if (!disabled) {
-            enterDropArea();
-            event.stopPropagation();
-            event.preventDefault();
-          }
-        },
-        onDrop: (event) => {
-          if (!disabled) {
-            const {
-              files
-            } = event.dataTransfer;
-            if (multiple === true || files.length === 1) {
-              event.stopPropagation();
-              event.preventDefault();
-              onChangeHandler(files);
-            }
-          }
-        },
-        ref: inputRef,
-        accept: acceptedFiles.join(","),
-        ...inputProps
-      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes == null ? void 0 : classes.dropArea,
-        children: dragState ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: classes.dropZoneAreaLabels,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-            className: classes.dragText,
-            children: labels == null ? void 0 : labels.dropFiles
-          })
-        }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Doc, {
-            iconSize: "M",
-            className: classes.dropZoneAreaIcon,
-            color: disabled ? "secondary_60" : "secondary"
-          }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-            className: classes.dropZoneAreaLabels,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(Typography.HvTypography, {
-              className: classes.dragText,
-              children: [labels == null ? void 0 : labels.drag, /* @__PURE__ */ jsxRuntime.jsx("span", {
-                className: classes.selectFilesText,
-                children: ` ${labels == null ? void 0 : labels.selectFiles}`
-              })]
-            })
-          })]
-        })
-      })]
-    })]
-  });
+        }
+      }, ref: inputRef, accept: acceptedFiles.join(","), ...inputProps }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes == null ? void 0 : classes.dropArea, children: dragState ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.dragText, children: labels == null ? void 0 : labels.dropFiles }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Doc, { iconSize: "M", className: classes.dropZoneAreaIcon, color: disabled ? "secondary_60" : "secondary" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsxRuntime.jsxs(Typography.HvTypography, { className: classes.dragText, children: [
+          labels == null ? void 0 : labels.drag,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.selectFilesText, children: ` ${labels == null ? void 0 : labels.selectFiles}` })
+        ] }) })
+      ] }) })
+    ] })
+  ] });
 };
 exports.dropZoneClasses = DropZone_styles.staticClasses;
 exports.HvDropZone = HvDropZone;

package/dist/cjs/components/FileUploader/DropZone/DropZone.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropZone.cjs","sources":["../../../../../src/components/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\n\nimport uniqueId from \"lodash/uniqueId\";\n\nimport accept from \"attr-accept\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\nimport { HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { convertUnits } from \"../utils\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\n\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropZoneLabels {\n  /**\n   * Extensions of the accepted file types\n   */\n  acceptedFiles?: string;\n  /**\n   * Dropzone area label.\n   */\n  dropzone?: string;\n  /**\n   * Size file warning label.\n   */\n  sizeWarning?: string;\n  /**\n   * Size file warning label.\n   */\n  drag?: string;\n  /**\n   * Size file warning label.\n   */\n  selectFiles?: string;\n  /**\n   * Theming sheet used to style components\n   * */\n  dropFiles?: string;\n  /**\n   * Message to display when file size is greater than allowed\n   * */\n  fileSizeError?: string;\n  /**\n   * Message to display when file type is greater than allowed\n   * */\n  fileTypeError?: string;\n}\n\nexport interface HvDropZoneProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Labels to present in FileUploader.\n   */\n  labels?: HvDropZoneLabels;\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Files extensions accepted for upload.\n   */\n  acceptedFiles: string[];\n  /**\n   * Max upload size\n   * */\n  maxFileSize: number;\n  /**\n   * Function responsible for processing files added to the drop zone.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvDropZoneClasses;\n}\n\nexport const HvDropZone = ({\n  id: idProp,\n  classes: classesProp,\n  labels,\n  acceptedFiles,\n  maxFileSize,\n  inputProps,\n  hideLabels,\n  multiple = true,\n  disabled = false,\n  onFilesAdded,\n}: HvDropZoneProps) => {\n  const id = useUniqueId(idProp, \"dropzone\");\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [dragState, setDrag] = useState<boolean>(false);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const leaveDropArea = () => {\n    setDrag(false);\n  };\n\n  const enterDropArea = () => {\n    setDrag(true);\n  };\n\n  const onChangeHandler = (filesList: FileList) => {\n    const filesToProcess = Object.keys(filesList).map((e) => filesList[e]);\n\n    const newFiles: HvFileData[] = [];\n\n    filesToProcess.forEach((file: File) => {\n      const newFile: HvFileData = file;\n\n      const isSizeAllowed = file.size <= maxFileSize;\n      const isFileAccepted =\n        !acceptedFiles.length ||\n        acceptedFiles.indexOf(file.type.split(\"/\")[1]) > -1 ||\n        acceptedFiles.some((acceptExtension) =>\n          accept({ name: file.name, type: file.type }, acceptExtension)\n        );\n\n      if (!isFileAccepted) {\n        newFile.errorMessage = labels?.fileTypeError;\n        newFile.status = \"fail\";\n      } else if (!isSizeAllowed) {\n        newFile.errorMessage = labels?.fileSizeError;\n        newFile.status = \"fail\";\n      }\n\n      newFile.id = uniqueId(\"uploaded-file-data-\");\n      newFiles.push(newFile);\n    });\n\n    onFilesAdded?.(newFiles);\n  };\n\n  return (\n    <>\n      {!hideLabels && (\n        <div id={id} className={classes.dropZoneLabelsGroup}>\n          <HvLabel\n            id={setId(id, \"input-file-label\")}\n            htmlFor={setId(id, \"input-file\")}\n            label={labels?.dropzone}\n            className={classes.dropZoneLabel}\n          />\n          <HvInfoMessage id={setId(id, \"description\")}>\n            {Number.isInteger(maxFileSize) &&\n              `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n            {labels?.acceptedFiles && labels.acceptedFiles}\n            {!labels?.acceptedFiles &&\n              acceptedFiles.length > 0 &&\n              `\\u00A0(${acceptedFiles.join(\", \")})`}\n          </HvInfoMessage>\n        </div>\n      )}\n      <div\n        id={setId(id, \"input-file-container\")}\n        className={cx(classes.dropZoneContainer, {\n          [classes.dragAction]: dragState,\n          [classes.dropZoneContainerDisabled]: disabled,\n        })}\n      >\n        <input\n          id={setId(id, \"input-file\")}\n          className={classes.inputArea}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n          onClick={() => {\n            if (inputRef.current) {\n              inputRef.current.value = \"\";\n            }\n          }}\n          onChange={() => {\n            if (!disabled && inputRef.current?.files) {\n              onChangeHandler(inputRef.current.files);\n            }\n          }}\n          onDragEnter={(event) => {\n            if (!disabled) {\n              enterDropArea();\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onDragLeave={leaveDropArea}\n          onDropCapture={leaveDropArea}\n          onDragOver={(event) => {\n            if (!disabled) {\n              enterDropArea();\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onDrop={(event) => {\n            if (!disabled) {\n              const { files } = event.dataTransfer;\n              if (multiple === true || files.length === 1) {\n                event.stopPropagation();\n                event.preventDefault();\n                onChangeHandler(files);\n              }\n            }\n          }}\n          ref={inputRef}\n          accept={acceptedFiles.join(\",\")}\n          {...inputProps}\n        />\n        <div className={classes?.dropArea}>\n          {dragState ? (\n            <div className={classes.dropZoneAreaLabels}>\n              <HvTypography className={classes.dragText}>\n                {labels?.dropFiles}\n              </HvTypography>\n            </div>\n          ) : (\n            <>\n              <Doc\n                iconSize=\"M\"\n                className={classes.dropZoneAreaIcon}\n                color={disabled ? \"secondary_60\" : \"secondary\"}\n              />\n              <div className={classes.dropZoneAreaLabels}>\n                <HvTypography className={classes.dragText}>\n                  {labels?.drag}\n                  <span\n                    className={classes.selectFilesText}\n                  >{`\\xa0${labels?.selectFiles}`}</span>\n                </HvTypography>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["HvDropZone","id","idProp","classes","classesProp","labels","acceptedFiles","maxFileSize","inputProps","hideLabels","multiple","disabled","onFilesAdded","useUniqueId","cx","useClasses","dragState","setDrag","useState","inputRef","useRef","leaveDropArea","enterDropArea","onChangeHandler","filesList","filesToProcess","Object","keys","map","e","newFiles","forEach","file","newFile","isSizeAllowed","size","isFileAccepted","length","indexOf","type","split","some","acceptExtension","accept","name","errorMessage","fileTypeError","status","fileSizeError","uniqueId","push","_Fragment","children","className","dropZoneLabelsGroup","_jsx","HvLabel","setId","htmlFor","label","dropzone","dropZoneLabel","_jsxs","HvInfoMessage","Number","isInteger","sizeWarning","convertUnits","join","dropZoneContainer","dragAction","dropZoneContainerDisabled","inputArea","title","drag","selectFiles","onClick","current","value","onChange","files","onDragEnter","event","stopPropagation","preventDefault","onDragLeave","onDropCapture","onDragOver","onDrop","dataTransfer","ref","dropArea","dropZoneAreaLabels","HvTypography","dragText","dropFiles","Doc","iconSize","dropZoneAreaIcon","color","selectFilesText"],"mappings":"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"}
+{"version":3,"file":"DropZone.cjs","sources":["../../../../../src/components/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\n\nimport uniqueId from \"lodash/uniqueId\";\n\nimport accept from \"attr-accept\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\nimport { HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { convertUnits } from \"../utils\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\n\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropZoneLabels {\n  /**\n   * Extensions of the accepted file types\n   */\n  acceptedFiles?: string;\n  /**\n   * Dropzone area label.\n   */\n  dropzone?: string;\n  /**\n   * Size file warning label.\n   */\n  sizeWarning?: string;\n  /**\n   * Size file warning label.\n   */\n  drag?: string;\n  /**\n   * Size file warning label.\n   */\n  selectFiles?: string;\n  /**\n   * Theming sheet used to style components\n   * */\n  dropFiles?: string;\n  /**\n   * Message to display when file size is greater than allowed\n   * */\n  fileSizeError?: string;\n  /**\n   * Message to display when file type is greater than allowed\n   * */\n  fileTypeError?: string;\n}\n\nexport interface HvDropZoneProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Labels to present in FileUploader.\n   */\n  labels?: HvDropZoneLabels;\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Files extensions accepted for upload.\n   */\n  acceptedFiles: string[];\n  /**\n   * Max upload size\n   * */\n  maxFileSize: number;\n  /**\n   * Function responsible for processing files added to the drop zone.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvDropZoneClasses;\n}\n\nexport const HvDropZone = ({\n  id: idProp,\n  classes: classesProp,\n  labels,\n  acceptedFiles,\n  maxFileSize,\n  inputProps,\n  hideLabels,\n  multiple = true,\n  disabled = false,\n  onFilesAdded,\n}: HvDropZoneProps) => {\n  const id = useUniqueId(idProp, \"dropzone\");\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [dragState, setDrag] = useState<boolean>(false);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const leaveDropArea = () => {\n    setDrag(false);\n  };\n\n  const enterDropArea = () => {\n    setDrag(true);\n  };\n\n  const onChangeHandler = (filesList: FileList) => {\n    const filesToProcess = Object.keys(filesList).map((e) => filesList[e]);\n\n    const newFiles: HvFileData[] = [];\n\n    filesToProcess.forEach((file: File) => {\n      const newFile: HvFileData = file;\n\n      const isSizeAllowed = file.size <= maxFileSize;\n      const isFileAccepted =\n        !acceptedFiles.length ||\n        acceptedFiles.indexOf(file.type.split(\"/\")[1]) > -1 ||\n        acceptedFiles.some((acceptExtension) =>\n          accept({ name: file.name, type: file.type }, acceptExtension)\n        );\n\n      if (!isFileAccepted) {\n        newFile.errorMessage = labels?.fileTypeError;\n        newFile.status = \"fail\";\n      } else if (!isSizeAllowed) {\n        newFile.errorMessage = labels?.fileSizeError;\n        newFile.status = \"fail\";\n      }\n\n      newFile.id = uniqueId(\"uploaded-file-data-\");\n      newFiles.push(newFile);\n    });\n\n    onFilesAdded?.(newFiles);\n  };\n\n  return (\n    <>\n      {!hideLabels && (\n        <div id={id} className={classes.dropZoneLabelsGroup}>\n          <HvLabel\n            id={setId(id, \"input-file-label\")}\n            htmlFor={setId(id, \"input-file\")}\n            label={labels?.dropzone}\n            className={classes.dropZoneLabel}\n          />\n          <HvInfoMessage id={setId(id, \"description\")}>\n            {Number.isInteger(maxFileSize) &&\n              `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n            {labels?.acceptedFiles && labels.acceptedFiles}\n            {!labels?.acceptedFiles &&\n              acceptedFiles.length > 0 &&\n              `\\u00A0(${acceptedFiles.join(\", \")})`}\n          </HvInfoMessage>\n        </div>\n      )}\n      <div\n        id={setId(id, \"input-file-container\")}\n        className={cx(classes.dropZoneContainer, {\n          [classes.dragAction]: dragState,\n          [classes.dropZoneContainerDisabled]: disabled,\n        })}\n      >\n        <input\n          id={setId(id, \"input-file\")}\n          className={classes.inputArea}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n          onClick={() => {\n            if (inputRef.current) {\n              inputRef.current.value = \"\";\n            }\n          }}\n          onChange={() => {\n            if (!disabled && inputRef.current?.files) {\n              onChangeHandler(inputRef.current.files);\n            }\n          }}\n          onDragEnter={(event) => {\n            if (!disabled) {\n              enterDropArea();\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onDragLeave={leaveDropArea}\n          onDropCapture={leaveDropArea}\n          onDragOver={(event) => {\n            if (!disabled) {\n              enterDropArea();\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onDrop={(event) => {\n            if (!disabled) {\n              const { files } = event.dataTransfer;\n              if (multiple === true || files.length === 1) {\n                event.stopPropagation();\n                event.preventDefault();\n                onChangeHandler(files);\n              }\n            }\n          }}\n          ref={inputRef}\n          accept={acceptedFiles.join(\",\")}\n          {...inputProps}\n        />\n        <div className={classes?.dropArea}>\n          {dragState ? (\n            <div className={classes.dropZoneAreaLabels}>\n              <HvTypography className={classes.dragText}>\n                {labels?.dropFiles}\n              </HvTypography>\n            </div>\n          ) : (\n            <>\n              <Doc\n                iconSize=\"M\"\n                className={classes.dropZoneAreaIcon}\n                color={disabled ? \"secondary_60\" : \"secondary\"}\n              />\n              <div className={classes.dropZoneAreaLabels}>\n                <HvTypography className={classes.dragText}>\n                  {labels?.drag}\n                  <span\n                    className={classes.selectFilesText}\n                  >{`\\xa0${labels?.selectFiles}`}</span>\n                </HvTypography>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["HvDropZone","id","idProp","classes","classesProp","labels","acceptedFiles","maxFileSize","inputProps","hideLabels","multiple","disabled","onFilesAdded","useUniqueId","cx","useClasses","dragState","setDrag","useState","inputRef","useRef","leaveDropArea","enterDropArea","onChangeHandler","filesList","filesToProcess","Object","keys","map","e","newFiles","forEach","file","newFile","isSizeAllowed","size","isFileAccepted","length","indexOf","type","split","some","acceptExtension","accept","name","errorMessage","fileTypeError","status","fileSizeError","uniqueId","push","jsxs","Fragment","dropZoneLabelsGroup","jsx","HvLabel","setId","dropzone","dropZoneLabel","HvInfoMessage","Number","isInteger","sizeWarning","convertUnits","join","dropZoneContainer","dragAction","dropZoneContainerDisabled","inputArea","drag","selectFiles","current","value","files","event","stopPropagation","preventDefault","dataTransfer","dropArea","dropZoneAreaLabels","HvTypography","dragText","dropFiles","Doc","dropZoneAreaIcon","selectFilesText"],"mappings":"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"}

package/dist/cjs/components/FileUploader/File/File.cjs

@@ -1,46 +1,33 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const setId = require("../../../utils/setId.cjs");
 const css = require("@emotion/css");
 const utils = require("../utils.cjs");
 const File_styles = require("./File.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ProgressBar = require("../../ProgressBar/ProgressBar.cjs");
 const Button = require("../../Button/Button.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const getStatusIcon = (classes, status) => {
   switch (status) {
     case "success":
-      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Success, {
-        className: classes == null ? void 0 : classes.icon,
-        color: "positive"
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Success, { className: classes == null ? void 0 : classes.icon, color: "positive" });
     case "fail":
-      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Fail, {
-        className: classes == null ? void 0 : classes.icon,
-        color: "negative"
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Fail, { className: classes == null ? void 0 : classes.icon, color: "negative" });
     default:
-      return /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes == null ? void 0 : classes.icon
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes == null ? void 0 : classes.icon });
   }
 };
 const getProgressText = (data, classes) => {
   const hasFailed = data.status === "fail";
   const inProgress = data.status === "progress";
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [data.progress || data.size || data.errorMessage ? ` | ` : null, inProgress && data.progress != null && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-      variant: "label",
-      children: `${utils.convertUnits(data.progress)} / `
-    }), !hasFailed && data.size && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-      children: `${utils.convertUnits(data.size)}`
-    }), hasFailed && data.errorMessage && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-      className: classes == null ? void 0 : classes.fail,
-      children: data.errorMessage
-    })]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    data.progress || data.size || data.errorMessage ? ` | ` : null,
+    inProgress && data.progress != null && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "label", children: `${utils.convertUnits(data.progress)} / ` }),
+    !hasFailed && data.size && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { children: `${utils.convertUnits(data.size)}` }),
+    hasFailed && data.errorMessage && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes == null ? void 0 : classes.fail, children: data.errorMessage })
+  ] });
 };
 const getProgressBarWith = ({
   size,
@@ -64,36 +51,17 @@ const HvFile = ({
   const progressText = getProgressText(data, classes);
   const statusIcon = getStatusIcon(classes, data.status);
   const currentProgress = getProgressBarWith(data);
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", {
-    className: classes.root,
-    children: [!hasError && inProgress && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar.HvProgressBar, {
-      classes: {
-        root: classes.progressbar,
-        progressBarContainer: css.cx(classes.progressbarContainer, classes.progressbarBack)
-      },
-      value: currentProgress,
-      hideLabel: true
-    }), statusIcon, /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-      className: classes.nameText,
-      variant: "label",
-      children: data.name
-    }), /* @__PURE__ */ jsxRuntime.jsx("span", {
-      className: classes.progressTextContainer,
-      children: progressText
-    }), data.preview && /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: classes.previewContainer,
-      children: data.preview
-    }), /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-      id: setId.setId(id, "remove-button"),
-      "aria-label": removeFileButtonLabel,
-      className: classes.removeButton,
-      onClick: () => onFileRemoved == null ? void 0 : onFileRemoved(data),
-      icon: true,
-      children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {
-        iconSize: "XS"
-      })
-    })]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: classes.root, children: [
+    !hasError && inProgress && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar.HvProgressBar, { classes: {
+      root: classes.progressbar,
+      progressBarContainer: css.cx(classes.progressbarContainer, classes.progressbarBack)
+    }, value: currentProgress, hideLabel: true }),
+    statusIcon,
+    /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.nameText, variant: "label", children: data.name }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.progressTextContainer, children: progressText }),
+    data.preview && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.previewContainer, children: data.preview }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { id: setId.setId(id, "remove-button"), "aria-label": removeFileButtonLabel, className: classes.removeButton, onClick: () => onFileRemoved == null ? void 0 : onFileRemoved(data), icon: true, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { iconSize: "XS" }) })
+  ] });
 };
 exports.fileClasses = File_styles.staticClasses;
 exports.HvFile = HvFile;

package/dist/cjs/components/FileUploader/File/File.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"File.cjs","sources":["../../../../../src/components/FileUploader/File/File.tsx"],"sourcesContent":["import { Close, Fail, Success } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvProgressBar } from \"@core/components/ProgressBar\";\nimport { cx } from \"@emotion/css\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./File.styles\";\n\nexport { staticClasses as fileClasses };\n\nexport type HvFileClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileData extends Omit<File, \"name\" | \"size\"> {\n  /**\n   * The file id.\n   */\n  id?: string;\n  /**\n   * The file name.\n   */\n  name?: string;\n  /**\n   * The upload status.\n   */\n  status?: \"progress\" | \"success\" | \"fail\";\n  /**\n   * The file size in bytes.\n   */\n  size?: number;\n  /**\n   * Upload progress in bytes.\n   */\n  progress?: number;\n  /**\n   * Optional node representing a preview of the uploaded file.\n   */\n  preview?: React.ReactNode;\n  /**\n   * Error message when the upload failed.\n   */\n  errorMessage?: string;\n}\n\nexport type HvFilesAddedEvent = (files: HvFileData[]) => void;\n\nexport type HvFileRemovedEvent = (file: HvFileData) => void;\n\nexport type HvFileProps = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * File information to be displayed.\n   */\n  data: HvFileData;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in file list.\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileClasses;\n};\n\nconst getStatusIcon = (\n  classes?: HvFileClasses,\n  status?: HvFileData[\"status\"]\n) => {\n  switch (status) {\n    case \"success\":\n      return <Success className={classes?.icon} color=\"positive\" />;\n    case \"fail\":\n      return <Fail className={classes?.icon} color=\"negative\" />;\n    default:\n      return <div className={classes?.icon} />;\n  }\n};\n\nconst getProgressText = (data: HvFileData, classes?: HvFileClasses) => {\n  const hasFailed = data.status === \"fail\";\n  const inProgress = data.status === \"progress\";\n\n  return (\n    <>\n      {data.progress || data.size || data.errorMessage ? `\\xa0|\\xa0` : null}\n\n      {inProgress && data.progress != null && (\n        <HvTypography variant=\"label\">\n          {`${convertUnits(data.progress)}\\xa0/\\xa0`}\n        </HvTypography>\n      )}\n\n      {!hasFailed && data.size && (\n        <HvTypography>{`${convertUnits(data.size)}`}</HvTypography>\n      )}\n\n      {hasFailed && data.errorMessage && (\n        <HvTypography className={classes?.fail}>\n          {data.errorMessage}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst getProgressBarWith = ({ size, progress }: HvFileData) => {\n  const width =\n    progress != null && size != null ? Math.round((progress * 100) / size) : 0;\n\n  return width;\n};\n\nexport const HvFile = ({\n  id,\n  classes: classesProp,\n  data,\n  onFileRemoved,\n  removeFileButtonLabel,\n}: HvFileProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const hasError = data.status === \"fail\";\n\n  const inProgress = data.status === \"progress\";\n\n  const progressText = getProgressText(data, classes);\n\n  const statusIcon = getStatusIcon(classes, data.status);\n\n  const currentProgress = getProgressBarWith(data);\n\n  return (\n    <li className={classes.root}>\n      {!hasError && inProgress && (\n        <HvProgressBar\n          classes={{\n            root: classes.progressbar,\n            progressBarContainer: cx(\n              classes.progressbarContainer,\n              classes.progressbarBack\n            ),\n          }}\n          value={currentProgress}\n          hideLabel\n        />\n      )}\n\n      {statusIcon}\n\n      <HvTypography className={classes.nameText} variant=\"label\">\n        {data.name}\n      </HvTypography>\n\n      <span className={classes.progressTextContainer}>{progressText}</span>\n\n      {data.preview && (\n        <div className={classes.previewContainer}>{data.preview}</div>\n      )}\n\n      <HvButton\n        id={setId(id, \"remove-button\")}\n        aria-label={removeFileButtonLabel}\n        className={classes.removeButton}\n        onClick={() => onFileRemoved?.(data)}\n        icon\n      >\n        <Close iconSize=\"XS\" />\n      </HvButton>\n    </li>\n  );\n};\n"],"names":["getStatusIcon","classes","status","Success","className","icon","color","Fail","getProgressText","data","hasFailed","inProgress","_Fragment","children","progress","size","errorMessage","HvTypography","variant","convertUnits","fail","getProgressBarWith","width","Math","round","HvFile","id","classesProp","onFileRemoved","removeFileButtonLabel","useClasses","hasError","progressText","statusIcon","currentProgress","root","HvProgressBar","progressbar","progressBarContainer","cx","progressbarContainer","progressbarBack","value","hideLabel","_jsx","nameText","name","progressTextContainer","preview","previewContainer","HvButton","setId","removeButton","onClick","Close","iconSize"],"mappings":"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"}
+{"version":3,"file":"File.cjs","sources":["../../../../../src/components/FileUploader/File/File.tsx"],"sourcesContent":["import { Close, Fail, Success } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"@core/utils/setId\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvProgressBar } from \"@core/components/ProgressBar\";\nimport { cx } from \"@emotion/css\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./File.styles\";\n\nexport { staticClasses as fileClasses };\n\nexport type HvFileClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileData extends Omit<File, \"name\" | \"size\"> {\n  /**\n   * The file id.\n   */\n  id?: string;\n  /**\n   * The file name.\n   */\n  name?: string;\n  /**\n   * The upload status.\n   */\n  status?: \"progress\" | \"success\" | \"fail\";\n  /**\n   * The file size in bytes.\n   */\n  size?: number;\n  /**\n   * Upload progress in bytes.\n   */\n  progress?: number;\n  /**\n   * Optional node representing a preview of the uploaded file.\n   */\n  preview?: React.ReactNode;\n  /**\n   * Error message when the upload failed.\n   */\n  errorMessage?: string;\n}\n\nexport type HvFilesAddedEvent = (files: HvFileData[]) => void;\n\nexport type HvFileRemovedEvent = (file: HvFileData) => void;\n\nexport type HvFileProps = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * File information to be displayed.\n   */\n  data: HvFileData;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in file list.\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileClasses;\n};\n\nconst getStatusIcon = (\n  classes?: HvFileClasses,\n  status?: HvFileData[\"status\"]\n) => {\n  switch (status) {\n    case \"success\":\n      return <Success className={classes?.icon} color=\"positive\" />;\n    case \"fail\":\n      return <Fail className={classes?.icon} color=\"negative\" />;\n    default:\n      return <div className={classes?.icon} />;\n  }\n};\n\nconst getProgressText = (data: HvFileData, classes?: HvFileClasses) => {\n  const hasFailed = data.status === \"fail\";\n  const inProgress = data.status === \"progress\";\n\n  return (\n    <>\n      {data.progress || data.size || data.errorMessage ? `\\xa0|\\xa0` : null}\n\n      {inProgress && data.progress != null && (\n        <HvTypography variant=\"label\">\n          {`${convertUnits(data.progress)}\\xa0/\\xa0`}\n        </HvTypography>\n      )}\n\n      {!hasFailed && data.size && (\n        <HvTypography>{`${convertUnits(data.size)}`}</HvTypography>\n      )}\n\n      {hasFailed && data.errorMessage && (\n        <HvTypography className={classes?.fail}>\n          {data.errorMessage}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst getProgressBarWith = ({ size, progress }: HvFileData) => {\n  const width =\n    progress != null && size != null ? Math.round((progress * 100) / size) : 0;\n\n  return width;\n};\n\nexport const HvFile = ({\n  id,\n  classes: classesProp,\n  data,\n  onFileRemoved,\n  removeFileButtonLabel,\n}: HvFileProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const hasError = data.status === \"fail\";\n\n  const inProgress = data.status === \"progress\";\n\n  const progressText = getProgressText(data, classes);\n\n  const statusIcon = getStatusIcon(classes, data.status);\n\n  const currentProgress = getProgressBarWith(data);\n\n  return (\n    <li className={classes.root}>\n      {!hasError && inProgress && (\n        <HvProgressBar\n          classes={{\n            root: classes.progressbar,\n            progressBarContainer: cx(\n              classes.progressbarContainer,\n              classes.progressbarBack\n            ),\n          }}\n          value={currentProgress}\n          hideLabel\n        />\n      )}\n\n      {statusIcon}\n\n      <HvTypography className={classes.nameText} variant=\"label\">\n        {data.name}\n      </HvTypography>\n\n      <span className={classes.progressTextContainer}>{progressText}</span>\n\n      {data.preview && (\n        <div className={classes.previewContainer}>{data.preview}</div>\n      )}\n\n      <HvButton\n        id={setId(id, \"remove-button\")}\n        aria-label={removeFileButtonLabel}\n        className={classes.removeButton}\n        onClick={() => onFileRemoved?.(data)}\n        icon\n      >\n        <Close iconSize=\"XS\" />\n      </HvButton>\n    </li>\n  );\n};\n"],"names":["getStatusIcon","classes","status","Success","icon","Fail","jsx","getProgressText","data","hasFailed","inProgress","progress","size","errorMessage","HvTypography","convertUnits","fail","getProgressBarWith","width","Math","round","HvFile","id","classesProp","onFileRemoved","removeFileButtonLabel","useClasses","hasError","progressText","statusIcon","currentProgress","jsxs","root","HvProgressBar","progressbar","progressBarContainer","cx","progressbarContainer","progressbarBack","nameText","name","progressTextContainer","preview","previewContainer","HvButton","setId","removeButton","Close"],"mappings":"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"}