npm - @hitachivantara/uikit-react-core - Versions diffs - 5.9.1 → 5.11.0 - Mend

@hitachivantara/uikit-react-core 5.9.1 → 5.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/dist/esm/components/DropDownMenu/DropDownMenu.js CHANGED Viewed

@@ -1,21 +1,22 @@
-import { clsx } from "clsx";
 import { useMemo } from "react";
 import { ClassNames } from "@emotion/react";
 import { theme } from "@hitachivantara/uikit-styles";
 import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
-import withId from "../../hocs/withId.js";
-import { StyledButton, StyledBaseDropDown, StyledPanel } from "./DropDownMenu.styles.js";
+import { styles } from "./DropDownMenu.styles.js";
 import dropDownMenuClasses from "./dropDownMenuClasses.js";
 import { jsx } from "@emotion/react/jsx-runtime";
+import useUniqueId from "../../hooks/useUniqueId.js";
 import { getPrevNextFocus } from "../../utils/focusableElementFinder.js";
+import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
+import { HvPanel } from "../Panel/Panel.js";
 import { HvList } from "../List/List.js";
 import { useControlled } from "../../hooks/useControlled.js";
 import { setId } from "../../utils/setId.js";
-import { outlineStyles } from "../../utils/focusUtils.js";
+import { HvButton } from "../Button/Button.js";
 import { isKeypress } from "../../utils/keyboardUtils/keyCheck.js";
 import { keyboardCodes } from "../../utils/keyboardUtils/keyboardCodes.js";
 const HvDropDownMenu = ({
-  id,
+  id: idProp,
   classes,
   className,
   icon,
@@ -32,6 +33,7 @@ const HvDropDownMenu = ({
   ...others
 }) => {
   const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));
+  const id = useUniqueId(idProp, "dropdown-menu");
   const focusNodes = getPrevNextFocus(setId(id, "icon-button"));
   const listId = setId(id, "list");
   const handleClose = (event) => {
@@ -51,19 +53,6 @@ const HvDropDownMenu = ({
     var _a;
     (_a = containerRef == null ? void 0 : containerRef.getElementsByTagName("li")[0]) == null ? void 0 : _a.focus();
   };
-  const headerComponent = /* @__PURE__ */ jsx(StyledButton, {
-    icon: true,
-    variant: category,
-    id: setId(id, "icon-button"),
-    className: clsx(dropDownMenuClasses.icon, classes == null ? void 0 : classes.icon, open && clsx(dropDownMenuClasses.iconSelected, classes == null ? void 0 : classes.iconSelected)),
-    "aria-expanded": open,
-    disabled,
-    "aria-label": "Dropdown menu",
-    $open: open,
-    children: icon || /* @__PURE__ */ jsx(MoreOptionsVertical, {
-      color: disabled ? "secondary_60" : void 0
-    })
-  });
   const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);
   const popperStyle = {
     style: {
@@ -76,21 +65,26 @@ const HvDropDownMenu = ({
     children: ({
       css,
       cx
-    }) => /* @__PURE__ */ jsx(StyledBaseDropDown, {
+    }) => /* @__PURE__ */ jsx(HvBaseDropdown, {
       id,
-      className: cx(dropDownMenuClasses.container, className, classes == null ? void 0 : classes.container),
+      className: cx(dropDownMenuClasses.container, css(styles.container), className, classes == null ? void 0 : classes.container),
       classes: {
-        root: cx(dropDownMenuClasses.root, css({
-          display: "inline-block",
-          width: "auto",
-          "&.focus-visible $icon": {
-            ...outlineStyles
-          }
-        }), classes == null ? void 0 : classes.root),
+        root: cx(dropDownMenuClasses.root, css(styles.root), classes == null ? void 0 : classes.root),
         container: cx(dropDownMenuClasses.baseContainer, classes == null ? void 0 : classes.baseContainer)
       },
       expanded: open && !disabled,
-      component: headerComponent,
+      component: /* @__PURE__ */ jsx(HvButton, {
+        icon: true,
+        variant: category,
+        id: setId(id, "icon-button"),
+        className: cx(dropDownMenuClasses.icon, open && dropDownMenuClasses.iconSelected, css(styles.icon), open && css(styles.iconSelected), classes == null ? void 0 : classes.icon, open && (classes == null ? void 0 : classes.iconSelected)),
+        "aria-expanded": open,
+        disabled,
+        "aria-label": "Dropdown menu",
+        children: icon || /* @__PURE__ */ jsx(MoreOptionsVertical, {
+          color: disabled ? "secondary_60" : void 0
+        })
+      }),
       "aria-haspopup": "menu",
       placement,
       variableWidth: true,
@@ -103,7 +97,8 @@ const HvDropDownMenu = ({
       onContainerCreation: setFocusToContent,
       popperProps: popperStyle,
       ...others,
-      children: /* @__PURE__ */ jsx(StyledPanel, {
+      children: /* @__PURE__ */ jsx(HvPanel, {
+        className: cx(dropDownMenuClasses.menuListRoot, css(styles.menuListRoot), classes == null ? void 0 : classes.menuListRoot),
         children: /* @__PURE__ */ jsx(HvList, {
           id: listId,
           values: dataList,
@@ -123,7 +118,7 @@ const HvDropDownMenu = ({
     })
   });
 };
-const HvDropDownMenu$1 = withId(HvDropDownMenu);
+const HvDropDownMenu$1 = HvDropDownMenu;
 export {
   HvDropDownMenu$1 as default
 };

package/dist/esm/components/DropDownMenu/DropDownMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useMemo } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types\";\nimport withId from \"@core/hocs/withId\";\nimport {\n isKeypress,\n keyboardCodes,\n outlineStyles,\n setId,\n getPrevNextFocus,\n} from \"@core/utils\";\n\nimport {\n HvBaseDropdownProps,\n HvButtonVariant,\n HvList,\n HvListValue,\n} from \"@core/components\";\nimport {\n StyledBaseDropDown,\n StyledButton,\n StyledPanel,\n} from \"./DropDownMenu.styles\";\nimport dropDownMenuClasses, {\n HvDropDownMenuClasses,\n} from \"./dropDownMenuClasses\";\n\nexport interface HvDropDownMenuProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n /** Icon. /\n icon?: React.ReactElement;\n /\n A list containing the elements to be rendered.\n \n - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - icon: The icon node to be rendered on the left.\n * - showNavIcon: If true renders the navigation icon on the right.\n /\n dataList: HvListValue[];\n /* Placement of the dropdown. /\n placement?: \"left\" \| \"right\";\n /* Disable the portal behavior. The children stay within it's parent DOM hierarchy. /\n disablePortal?: boolean;\n /* Function executed on toggle of the dropdown. Should receive the open status. /\n onToggle?: (event: Event, open: boolean) => void;\n /* Function executed in each onClick. Should received the clicked element. /\n onClick?: (\n event: React.ChangeEvent<HTMLLIElement>,\n value: HvListValue\n ) => void;\n /* Keep the Dropdown Menu opened after clicking one option /\n keepOpened?: boolean;\n /* Defines if the component is disabled. /\n disabled?: boolean;\n /* If true it should be displayed open. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* The variant to be used in the header. /\n category?: HvButtonVariant;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvDropDownMenuClasses;\n}\n\n/\n A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nconst HvDropDownMenu = ({\n id,\n classes,\n className,\n icon,\n placement = \"right\",\n dataList,\n disablePortal = false,\n onToggle,\n onClick,\n keepOpened = true,\n disabled = false,\n expanded,\n defaultExpanded = false,\n category = \"secondaryGhost\",\n ...others\n}: HvDropDownMenuProps) => {\n const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n const listId = setId(id, \"list\");\n\n const handleClose = (event) => {\n // this will only run if uncontrolled\n setOpen(false);\n onToggle?.(event, false);\n };\n\n // If the ESCAPE key is pressed inside the list, the close handler must be called.\n const handleKeyDown = (event) => {\n if (isKeypress(event, keyboardCodes.Tab)) {\n const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n if (node) setTimeout(() => node.focus(), 0);\n handleClose(event);\n }\n event.preventDefault();\n };\n\n const setFocusToContent = (containerRef) => {\n containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n };\n\n const headerComponent = (\n <StyledButton\n icon\n variant={category}\n id={setId(id, \"icon-button\")}\n className={clsx(\n dropDownMenuClasses.icon,\n classes?.icon,\n open && clsx(dropDownMenuClasses.iconSelected, classes?.iconSelected)\n )}\n aria-expanded={open}\n disabled={disabled}\n aria-label=\"Dropdown menu\"\n $open={open}\n >\n {icon \|\| (\n <MoreOptionsVertical color={disabled ? \"secondary_60\" : undefined} />\n )}\n </StyledButton>\n );\n\n const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n style: {\n zIndex: theme.zIndices.tooltip,\n width: \"auto\",\n position: \"relative\",\n },\n };\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <StyledBaseDropDown\n id={id}\n className={cx(\n dropDownMenuClasses.container,\n className,\n classes?.container\n )}\n classes={{\n root: cx(\n dropDownMenuClasses.root,\n css({\n display: \"inline-block\",\n width: \"auto\",\n \"&.focus-visible $icon\": {\n ...outlineStyles,\n },\n }),\n classes?.root\n ),\n container: cx(\n dropDownMenuClasses.baseContainer,\n classes?.baseContainer\n ),\n }}\n expanded={open && !disabled}\n component={headerComponent}\n aria-haspopup=\"menu\"\n placement={placement}\n variableWidth\n disablePortal={disablePortal}\n onToggle={(e, s) => {\n // this will only run if uncontrolled\n setOpen(s);\n onToggle?.(e, s);\n }}\n disabled={disabled}\n onContainerCreation={setFocusToContent}\n popperProps={popperStyle}\n {...others}\n >\n <StyledPanel>\n <HvList\n id={listId}\n values={dataList}\n selectable={false}\n condensed={condensed}\n onClick={(event, item) => {\n if (!keepOpened) handleClose(event);\n onClick?.(event, item);\n }}\n onKeyDown={handleKeyDown}\n classes={{\n root: cx(dropDownMenuClasses.menuList, classes?.menuList),\n }}\n />\n </StyledPanel>\n </StyledBaseDropDown>\n )}\n </ClassNames>\n );\n};\n\nexport default withId(HvDropDownMenu);\n"],"names":["HvDropDownMenu","id","classes","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","open","setOpen","useControlled","Boolean","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKeypress","keyboardCodes","Tab","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","headerComponent","StyledButton","variant","clsx","dropDownMenuClasses","iconSelected","$open","children","_jsx","MoreOptionsVertical","color","undefined","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","ClassNames","css","cx","StyledBaseDropDown","container","root","display","outlineStyles","baseContainer","component","variableWidth","e","s","onContainerCreation","popperProps","StyledPanel","HvList","values","selectable","item","onKeyDown","menuList","withId"],"mappings":"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"}
1	+ {"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { useControlled, useUniqueId } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types\";\nimport {\n isKeypress,\n keyboardCodes,\n setId,\n getPrevNextFocus,\n} from \"@core/utils\";\nimport {\n HvBaseDropdown,\n HvBaseDropdownProps,\n HvButton,\n HvButtonVariant,\n HvList,\n HvListValue,\n HvPanel,\n} from \"@core/components\";\nimport { styles } from \"./DropDownMenu.styles\";\nimport dropDownMenuClasses, {\n HvDropDownMenuClasses,\n} from \"./dropDownMenuClasses\";\n\nexport interface HvDropDownMenuProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n /** Icon. /\n icon?: React.ReactElement;\n /\n A list containing the elements to be rendered.\n \n - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - icon: The icon node to be rendered on the left.\n * - showNavIcon: If true renders the navigation icon on the right.\n /\n dataList: HvListValue[];\n /* Placement of the dropdown. /\n placement?: \"left\" \| \"right\";\n /* Disable the portal behavior. The children stay within it's parent DOM hierarchy. /\n disablePortal?: boolean;\n /* Function executed on toggle of the dropdown. Should receive the open status. /\n onToggle?: (event: Event, open: boolean) => void;\n /* Function executed in each onClick. Should received the clicked element. /\n onClick?: (\n event: React.ChangeEvent<HTMLLIElement>,\n value: HvListValue\n ) => void;\n /* Keep the Dropdown Menu opened after clicking one option /\n keepOpened?: boolean;\n /* Defines if the component is disabled. /\n disabled?: boolean;\n /* If true it should be displayed open. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* The variant to be used in the header. /\n category?: HvButtonVariant;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvDropDownMenuClasses;\n}\n\n/\n A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nconst HvDropDownMenu = ({\n id: idProp,\n classes,\n className,\n icon,\n placement = \"right\",\n dataList,\n disablePortal = false,\n onToggle,\n onClick,\n keepOpened = true,\n disabled = false,\n expanded,\n defaultExpanded = false,\n category = \"secondaryGhost\",\n ...others\n}: HvDropDownMenuProps) => {\n const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const id = useUniqueId(idProp, \"dropdown-menu\");\n const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n const listId = setId(id, \"list\");\n\n const handleClose = (event) => {\n // this will only run if uncontrolled\n setOpen(false);\n onToggle?.(event, false);\n };\n\n // If the ESCAPE key is pressed inside the list, the close handler must be called.\n const handleKeyDown = (event) => {\n if (isKeypress(event, keyboardCodes.Tab)) {\n const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n if (node) setTimeout(() => node.focus(), 0);\n handleClose(event);\n }\n event.preventDefault();\n };\n\n const setFocusToContent = (containerRef) => {\n containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n };\n\n const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n style: {\n zIndex: theme.zIndices.tooltip,\n width: \"auto\",\n position: \"relative\",\n },\n };\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <HvBaseDropdown\n id={id}\n className={cx(\n dropDownMenuClasses.container,\n css(styles.container),\n className,\n classes?.container\n )}\n classes={{\n root: cx(dropDownMenuClasses.root, css(styles.root), classes?.root),\n container: cx(\n dropDownMenuClasses.baseContainer,\n classes?.baseContainer\n ),\n }}\n expanded={open && !disabled}\n component={\n <HvButton\n icon\n variant={category}\n id={setId(id, \"icon-button\")}\n className={cx(\n dropDownMenuClasses.icon,\n open && dropDownMenuClasses.iconSelected,\n css(styles.icon),\n open && css(styles.iconSelected),\n classes?.icon,\n open && classes?.iconSelected\n )}\n aria-expanded={open}\n disabled={disabled}\n aria-label=\"Dropdown menu\"\n >\n {icon \|\| (\n <MoreOptionsVertical\n color={disabled ? \"secondary_60\" : undefined}\n />\n )}\n </HvButton>\n }\n aria-haspopup=\"menu\"\n placement={placement}\n variableWidth\n disablePortal={disablePortal}\n onToggle={(e, s) => {\n // this will only run if uncontrolled\n setOpen(s);\n onToggle?.(e, s);\n }}\n disabled={disabled}\n onContainerCreation={setFocusToContent}\n popperProps={popperStyle}\n {...others}\n >\n <HvPanel\n className={cx(\n dropDownMenuClasses.menuListRoot,\n css(styles.menuListRoot),\n classes?.menuListRoot\n )}\n >\n <HvList\n id={listId}\n values={dataList}\n selectable={false}\n condensed={condensed}\n onClick={(event, item) => {\n if (!keepOpened) handleClose(event);\n onClick?.(event, item);\n }}\n onKeyDown={handleKeyDown}\n classes={{\n root: cx(dropDownMenuClasses.menuList, classes?.menuList),\n }}\n />\n </HvPanel>\n </HvBaseDropdown>\n )}\n </ClassNames>\n );\n};\n\nexport default HvDropDownMenu;\n"],"names":["HvDropDownMenu","id","idProp","classes","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKeypress","keyboardCodes","Tab","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","ClassNames","children","css","cx","HvBaseDropdown","dropDownMenuClasses","container","styles","root","baseContainer","component","HvButton","variant","iconSelected","_jsx","MoreOptionsVertical","color","undefined","variableWidth","e","s","onContainerCreation","popperProps","HvPanel","menuListRoot","HvList","values","selectable","item","onKeyDown","menuList"],"mappings":"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"}

package/dist/esm/components/DropDownMenu/DropDownMenu.styles.js CHANGED Viewed

@@ -1,63 +1,26 @@
-import _styled from "@emotion/styled/base";
-import { transientOptions } from "../../utils/transientOptions.js";
 import { theme } from "@hitachivantara/uikit-styles";
-import { forwardRef } from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
-import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
-import { HvPanel } from "../Panel/Panel.js";
-import { HvButton } from "../Button/Button.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+import dropDownMenuClasses from "./dropDownMenuClasses.js";
+import { outlineStyles } from "../../utils/focusUtils.js";
+const styles = {
+  container: {
+    width: 32
+  },
+  root: {
+    display: "inline-block",
+    width: "auto",
+    [`&.focus-visible .${dropDownMenuClasses.icon}`]: {
+      ...outlineStyles
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledBaseDropDown = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(HvBaseDropdown, {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
-  target: "e13q7myz2"
-} : {
-  target: "e13q7myz2",
-  label: "StyledBaseDropDown"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1p2i2oq",
-  styles: "width:32px"
-} : {
-  name: "1p2i2oq",
-  styles: "width:32px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRHJvcERvd25NZW51L0Ryb3BEb3duTWVudS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWNrQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0Ryb3BEb3duTWVudS9Ecm9wRG93bk1lbnUuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHtcbiAgSHZCYXNlRHJvcGRvd24sXG4gIEh2QmFzZURyb3Bkb3duUHJvcHMsXG4gIEh2QnV0dG9uLFxuICBIdkJ1dHRvblByb3BzLFxuICBIdlBhbmVsLFxuICBIdlBhbmVsUHJvcHMsXG59IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IGZvcndhcmRSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IFBvbHltb3JwaGljUmVmIH0gZnJvbSBcIkBjb3JlL3R5cGVzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCYXNlRHJvcERvd24gPSBzdHlsZWQoKHByb3BzOiBIdkJhc2VEcm9wZG93blByb3BzKSA9PiAoXG4gIDxIdkJhc2VEcm9wZG93biB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIHdpZHRoOiAzMixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKFxuICBmb3J3YXJkUmVmKChwcm9wczogSHZCdXR0b25Qcm9wcywgcmVmPzogUG9seW1vcnBoaWNSZWY8XCJidXR0b25cIj4pID0+IHtcbiAgICByZXR1cm4gPEh2QnV0dG9uIHsuLi5wcm9wc30gcmVmPXtyZWZ9IC8+O1xuICB9KSxcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkb3BlbiB9OiB7ICRvcGVuOiBib29sZWFuIH0pID0+ICh7XG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gIGJveFNpemluZzogXCJjb250ZW50LWJveFwiLFxuICBwYWRkaW5nOiAwLFxuXG4gIGJvcmRlclJhZGl1czogdGhlbWUuZHJvcERvd25NZW51LmJvcmRlclJhZGl1cyxcbiAgYm9yZGVyOiB0aGVtZS5kcm9wRG93bk1lbnUuYm9yZGVyQ2xvc2VkLFxuXG4gIC4uLigkb3BlbiAmJiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgYm94U2hhZG93OiB0aGVtZS5jb2xvcnMuc2hhZG93LFxuXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICAgIH0sXG5cbiAgICBcIiYgc3ZnIC5jb2xvcjBcIjoge1xuICAgICAgZmlsbDogdGhlbWUuY29sb3JzLnNlY29uZGFyeSxcbiAgICB9LFxuXG4gICAgYm9yZGVyUmFkaXVzOiBgJHt0aGVtZS5yYWRpaS5iYXNlfSAke3RoZW1lLnJhZGlpLmJhc2V9IDBweCAwcHhgLFxuICAgIGJvcmRlcjogdGhlbWUuZHJvcERvd25NZW51LmJvcmRlck9wZW5lZCxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRQYW5lbCA9IHN0eWxlZCgocHJvcHM6IEh2UGFuZWxQcm9wcykgPT4gKFxuICA8SHZQYW5lbCB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIGJvcmRlcjogdGhlbWUuZHJvcERvd25NZW51LmJvcmRlck9wZW5lZCxcbiAgYm9yZGVyUmFkaXVzOiB0aGVtZS5kcm9wRG93bk1lbnUuYm9yZGVyUmFkaXVzLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledButton = /* @__PURE__ */ _styled(forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(HvButton, {
-    ...props,
-    ref
-  });
-}), process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e13q7myz1"
-}, transientOptions) : _extends({}, {
-  target: "e13q7myz1",
-  label: "StyledButton"
-}, transientOptions))(({
-  $open
-}) => ({
-  position: "relative",
-  boxSizing: "content-box",
-  padding: 0,
-  borderRadius: theme.dropDownMenu.borderRadius,
-  border: theme.dropDownMenu.borderClosed,
-  ...$open && {
+  },
+  icon: {
+    position: "relative",
+    width: 32,
+    boxSizing: "border-box",
+    padding: 0,
+    borderRadius: theme.dropDownMenu.borderRadius,
+    border: theme.dropDownMenu.borderClosed
+  },
+  iconSelected: {
     backgroundColor: theme.colors.atmo1,
     boxShadow: theme.colors.shadow,
     "&:hover": {
@@ -68,22 +31,13 @@ const StyledButton = /* @__PURE__ */ _styled(forwardRef((props, ref) => {
     },
     borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,
     border: theme.dropDownMenu.borderOpened
+  },
+  menuListRoot: {
+    border: theme.dropDownMenu.borderOpened,
+    borderRadius: theme.dropDownMenu.borderRadius
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRHJvcERvd25NZW51L0Ryb3BEb3duTWVudS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9CNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Ecm9wRG93bk1lbnUvRHJvcERvd25NZW51LnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7XG4gIEh2QmFzZURyb3Bkb3duLFxuICBIdkJhc2VEcm9wZG93blByb3BzLFxuICBIdkJ1dHRvbixcbiAgSHZCdXR0b25Qcm9wcyxcbiAgSHZQYW5lbCxcbiAgSHZQYW5lbFByb3BzLFxufSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBQb2x5bW9ycGhpY1JlZiB9IGZyb20gXCJAY29yZS90eXBlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFzZURyb3BEb3duID0gc3R5bGVkKChwcm9wczogSHZCYXNlRHJvcGRvd25Qcm9wcykgPT4gKFxuICA8SHZCYXNlRHJvcGRvd24gey4uLnByb3BzfSAvPlxuKSkoe1xuICB3aWR0aDogMzIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZChcbiAgZm9yd2FyZFJlZigocHJvcHM6IEh2QnV0dG9uUHJvcHMsIHJlZj86IFBvbHltb3JwaGljUmVmPFwiYnV0dG9uXCI+KSA9PiB7XG4gICAgcmV0dXJuIDxIdkJ1dHRvbiB7Li4ucHJvcHN9IHJlZj17cmVmfSAvPjtcbiAgfSksXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJG9wZW4gfTogeyAkb3BlbjogYm9vbGVhbiB9KSA9PiAoe1xuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBib3hTaXppbmc6IFwiY29udGVudC1ib3hcIixcbiAgcGFkZGluZzogMCxcblxuICBib3JkZXJSYWRpdXM6IHRoZW1lLmRyb3BEb3duTWVudS5ib3JkZXJSYWRpdXMsXG4gIGJvcmRlcjogdGhlbWUuZHJvcERvd25NZW51LmJvcmRlckNsb3NlZCxcblxuICAuLi4oJG9wZW4gJiYge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICAgIGJveFNoYWRvdzogdGhlbWUuY29sb3JzLnNoYWRvdyxcblxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgICB9LFxuXG4gICAgXCImIHN2ZyAuY29sb3IwXCI6IHtcbiAgICAgIGZpbGw6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgfSxcblxuICAgIGJvcmRlclJhZGl1czogYCR7dGhlbWUucmFkaWkuYmFzZX0gJHt0aGVtZS5yYWRpaS5iYXNlfSAwcHggMHB4YCxcbiAgICBib3JkZXI6IHRoZW1lLmRyb3BEb3duTWVudS5ib3JkZXJPcGVuZWQsXG4gIH0pLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUGFuZWwgPSBzdHlsZWQoKHByb3BzOiBIdlBhbmVsUHJvcHMpID0+IChcbiAgPEh2UGFuZWwgey4uLnByb3BzfSAvPlxuKSkoe1xuICBib3JkZXI6IHRoZW1lLmRyb3BEb3duTWVudS5ib3JkZXJPcGVuZWQsXG4gIGJvcmRlclJhZGl1czogdGhlbWUuZHJvcERvd25NZW51LmJvcmRlclJhZGl1cyxcbn0pO1xuIl19 */");
-const StyledPanel = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(HvPanel, {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
-  target: "e13q7myz0"
-} : {
-  target: "e13q7myz0",
-  label: "StyledPanel"
-})({
-  border: theme.dropDownMenu.borderOpened,
-  borderRadius: theme.dropDownMenu.borderRadius
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRHJvcERvd25NZW51L0Ryb3BEb3duTWVudS5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtEMkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Ecm9wRG93bk1lbnUvRHJvcERvd25NZW51LnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7XG4gIEh2QmFzZURyb3Bkb3duLFxuICBIdkJhc2VEcm9wZG93blByb3BzLFxuICBIdkJ1dHRvbixcbiAgSHZCdXR0b25Qcm9wcyxcbiAgSHZQYW5lbCxcbiAgSHZQYW5lbFByb3BzLFxufSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBQb2x5bW9ycGhpY1JlZiB9IGZyb20gXCJAY29yZS90eXBlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFzZURyb3BEb3duID0gc3R5bGVkKChwcm9wczogSHZCYXNlRHJvcGRvd25Qcm9wcykgPT4gKFxuICA8SHZCYXNlRHJvcGRvd24gey4uLnByb3BzfSAvPlxuKSkoe1xuICB3aWR0aDogMzIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZChcbiAgZm9yd2FyZFJlZigocHJvcHM6IEh2QnV0dG9uUHJvcHMsIHJlZj86IFBvbHltb3JwaGljUmVmPFwiYnV0dG9uXCI+KSA9PiB7XG4gICAgcmV0dXJuIDxIdkJ1dHRvbiB7Li4ucHJvcHN9IHJlZj17cmVmfSAvPjtcbiAgfSksXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJG9wZW4gfTogeyAkb3BlbjogYm9vbGVhbiB9KSA9PiAoe1xuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBib3hTaXppbmc6IFwiY29udGVudC1ib3hcIixcbiAgcGFkZGluZzogMCxcblxuICBib3JkZXJSYWRpdXM6IHRoZW1lLmRyb3BEb3duTWVudS5ib3JkZXJSYWRpdXMsXG4gIGJvcmRlcjogdGhlbWUuZHJvcERvd25NZW51LmJvcmRlckNsb3NlZCxcblxuICAuLi4oJG9wZW4gJiYge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICAgIGJveFNoYWRvdzogdGhlbWUuY29sb3JzLnNoYWRvdyxcblxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgICB9LFxuXG4gICAgXCImIHN2ZyAuY29sb3IwXCI6IHtcbiAgICAgIGZpbGw6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgfSxcblxuICAgIGJvcmRlclJhZGl1czogYCR7dGhlbWUucmFkaWkuYmFzZX0gJHt0aGVtZS5yYWRpaS5iYXNlfSAwcHggMHB4YCxcbiAgICBib3JkZXI6IHRoZW1lLmRyb3BEb3duTWVudS5ib3JkZXJPcGVuZWQsXG4gIH0pLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUGFuZWwgPSBzdHlsZWQoKHByb3BzOiBIdlBhbmVsUHJvcHMpID0+IChcbiAgPEh2UGFuZWwgey4uLnByb3BzfSAvPlxuKSkoe1xuICBib3JkZXI6IHRoZW1lLmRyb3BEb3duTWVudS5ib3JkZXJPcGVuZWQsXG4gIGJvcmRlclJhZGl1czogdGhlbWUuZHJvcERvd25NZW51LmJvcmRlclJhZGl1cyxcbn0pO1xuIl19 */");
+};
 export {
-  StyledBaseDropDown,
-  StyledButton,
-  StyledPanel
+  styles
 };
 //# sourceMappingURL=DropDownMenu.styles.js.map

package/dist/esm/components/DropDownMenu/DropDownMenu.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropDownMenu.styles.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import ~~styled~~ ~~from~~ ~~\"@emotion/styled\";\nimport {\n HvBaseDropdown,\n HvBaseDropdownProps,\n HvButton,\n HvButtonProps,\n HvPanel,\n HvPanelProps,\n~~} from \"@~~core~~/~~components~~\";\nimport { ~~transientOptions~~ } from \"@core/utils~~/transientOptions~~\";\nimport { ~~theme~~ } from \"@~~hitachivantara~~/~~uikit-styles~~\";\nimport { ~~forwardRef } from~~ \~~"react\";\nimport { PolymorphicRef~~ } from \"~~@core/types~~\";\n\nexport const ~~StyledBaseDropDown~~ = ~~styled((props:~~ ~~HvBaseDropdownProps)~~ => (\n ~~<HvBaseDropdown~~ {~~...props} />\n))({~~\n width: 32,\n}~~);\~~n~~\nexport~~ ~~const StyledButton = styled(~~\n ~~forwardRef((props~~: ~~HvButtonProps, ref?: PolymorphicRef<\~~"~~button~~\">) ~~=> {~~\n ~~return~~ ~~<HvButton~~ {~~...props~~} ~~ref=~~{~~ref~~} ~~/>;\~~n }),\n ~~transientOptions\n)(({ $open }~~: { ~~$open: boolean }) => ({~~\n position: \"relative\",\n boxSizing: \"~~content~~-box\",\n padding: 0,\n\n borderRadius: theme.dropDownMenu.borderRadius,\n border: theme.dropDownMenu.borderClosed,\n\n ~~...($open~~ && {\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n\n \"&:hover\": {\n backgroundColor: theme.colors.atmo1,\n },\n\n \"& svg .color0\": {\n fill: theme.colors.secondary,\n },\n\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n border: theme.dropDownMenu.borderOpened,\n }),\n~~}));\n\nexport const StyledPanel = styled((props~~: ~~HvPanelProps) => (\n <HvPanel~~ {~~...props} />\n))({~~\n border: theme.dropDownMenu.borderOpened,\n borderRadius: theme.dropDownMenu.borderRadius,\n});\n"],"names":["~~StyledBaseDropDown","_styled","props","HvBaseDropdown","process","env","NODE_ENV","target","label","name","~~styles","~~map~~","~~toString~~","~~_EMOTION_STRINGIFIED_CSS_ERROR__~~","~~StyledButton~~","~~forwardRef~~","~~ref~~","~~HvButton~~","~~_extends","transientOptions","$open","~~position","boxSizing","padding","borderRadius","theme","dropDownMenu","border","borderClosed","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","radii","base","borderOpened","~~StyledPanel~~"~~,"HvPanel"~~],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;AAcO~~,MAAMA,~~qBAAqBC,wBAAO,CAACC,8BACvCC,gBAAc~~;AAAA,~~EAAA~~,~~GAAKD~~;~~AAAK,CAAA,GAC1BE,QAAAC,IAAAC,aAAA,eAAA;~~AAAA,~~EAAAC~~,~~QAAA~~;AAAA,~~IAAA~~;AAAA,~~EAAAA~~,~~QAAA~~;AAAA,~~EAAAC~~,~~OAAA~~;AAAA,~~CAAA~~,~~EAACJ,QAAAC,IAAAC,aAAA,eAAA~~;AAAA,~~EAAAG~~,~~MAAA;AAAA~~,~~EAAAC~~,~~QAAA;AAAA~~,~~IAAA;AAAA~~,~~EAAAD,MAAA~~;AAAA,~~EAAAC~~,~~QAAA~~;~~AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAEA;AAEK,MAAMC,eAAeb,wBAC1Bc,WAAW,CAACb,OAAsBc,QAAmC;AACnE,6BAAQC,UAAQ;AAAA,IAAA,GAAKf;~~AAAAA,~~IAAOc~~;~~AAAAA,EAAAA,CAAY;AAC1C,CAAC,GAACZ,QAAAC,IAAAC,4BAAAY,SAAA,IAAA;~~AAAA,~~EAAAX,QAAA~~;AAAA,~~GACFY~~,~~gBAAgB,IAAAD,SAAA,IAAA~~;AAAA,~~EAAAX~~,~~QAAA~~;AAAA,~~EAAAC~~,~~OAAA;AAAA,GAAhBW,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEC;AAA0B,~~OAAO;AAAA,~~EACpCC~~,~~UAAU;AAAA,EACVC,~~WAAW;AAAA,~~EACXC~~,SAAS;AAAA,~~EAETC~~,cAAcC,MAAMC,aAAaF;AAAAA,~~EACjCG~~,QAAQF,MAAMC,aAAaE;AAAAA,~~EAE3B~~,~~GAAIR~~,~~SAAS~~;AAAA,~~IACXS~~,~~iBAAiBJ~~,~~MAAMK~~,OAAOC;AAAAA,IAC9BC,~~WAAWP~~,~~MAAMK~~,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,~~iBAAiBJ~~,~~MAAMK~~,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,~~MAAMT~~,~~MAAMK~~,OAAOK;AAAAA,IACrB;AAAA,~~IAEAX~~,cAAe,GAAEC,~~MAAMW~~,MAAMC,~~QAAQZ~~,~~MAAMW~~,MAAMC;AAAAA,~~IACjDV~~,QAAQF,MAAMC,~~aAAaY~~;AAAAA,EAC7B;~~AACF,IAAElC,QAAAC,IAAAC,aAAC,eAAA,KAAA,i8EAAA;AAEI,MAAMiC,cAActC,wBAAO,CAACC,8BAChCsC,SAAO;~~AAAA,~~EAAA~~,~~GAAKtC~~;~~AAAK,CAAA,GACnBE,QAAAC,IAAAC,aAAA,eAAA;~~AAAA,~~EAAAC~~,~~QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACDmB,~~QAAQF,MAAMC,~~aAAaY~~;AAAAA,~~EAC3Bd~~,cAAcC,MAAMC,aAAaF;~~AACnC~~,~~GAACpB,QAAAC,IAAAC,aAAC,eAAA,KAAA,i8EAAA~~;"}
1	+ {"version":3,"file":"DropDownMenu.styles.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport dropDownMenuClasses, {\n HvDropDownMenuClasses,\n} from \"./dropDownMenuClasses\";\n\nexport const styles: Partial<\n Record<keyof HvDropDownMenuClasses, CSSInterpolation>\n> = {\n container: {\n width: 32,\n },\n root: {\n display: \"inline-block\",\n width: \"auto\",\n [`&.focus-visible .${dropDownMenuClasses.icon}`]: {\n ...outlineStyles,\n },\n },\n icon: {\n position: \"relative\",\n width: 32,\n boxSizing: \"border-box\",\n padding: 0,\n borderRadius: theme.dropDownMenu.borderRadius,\n border: theme.dropDownMenu.borderClosed,\n },\n iconSelected: {\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n\n \"&:hover\": {\n backgroundColor: theme.colors.atmo1,\n },\n\n \"& svg .color0\": {\n fill: theme.colors.secondary,\n },\n\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n border: theme.dropDownMenu.borderOpened,\n },\n menuListRoot: {\n border: theme.dropDownMenu.borderOpened,\n borderRadius: theme.dropDownMenu.borderRadius,\n },\n};\n"],"names":["styles","container","width","root","display","dropDownMenuClasses","icon","outlineStyles","position","boxSizing","padding","borderRadius","theme","dropDownMenu","border","borderClosed","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","radii","base","borderOpened","menuListRoot"],"mappings":";;;AAOO,MAAMA,SAET;AAAA,EACFC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA,EACAC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTF,OAAO;AAAA,IACP,CAAE,oBAAmBG,oBAAoBC,MAAM,GAAG;AAAA,MAChD,GAAGC;AAAAA,IACL;AAAA,EACF;AAAA,EACAD,MAAM;AAAA,IACJE,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,MAAMC,aAAaF;AAAAA,IACjCG,QAAQF,MAAMC,aAAaE;AAAAA,EAC7B;AAAA,EACAC,cAAc;AAAA,IACZC,iBAAiBL,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,MAAMY,MAAMC,QAAQb,MAAMY,MAAMC;AAAAA,IACjDX,QAAQF,MAAMC,aAAaa;AAAAA,EAC7B;AAAA,EACAC,cAAc;AAAA,IACZb,QAAQF,MAAMC,aAAaa;AAAAA,IAC3Bf,cAAcC,MAAMC,aAAaF;AAAAA,EACnC;AACF;"}

package/dist/esm/components/DropDownMenu/dropDownMenuClasses.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { getClasses } from "../../utils/classes.js";
-const classKeys = ["root", "container", "baseContainer", "icon", "iconSelected", "menuList"];
+const classKeys = ["root", "container", "baseContainer", "icon", "iconSelected", "menuList", "menuListRoot"];
 const dropDownMenuClasses = getClasses(classKeys, "HvDropDownMenu");
 const dropDownMenuClasses$1 = dropDownMenuClasses;
 export {

package/dist/esm/components/DropDownMenu/dropDownMenuClasses.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropDownMenuClasses.js","sources":["../../../../src/components/DropDownMenu/dropDownMenuClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvDropDownMenuClasses {\n /** Styles applied to the root. /\n root?: string;\n /* Styles applied to the container. /\n container?: string;\n /* Styles applied to the BaseDropdown container. /\n baseContainer?: string;\n /* Styles applied to the icon. /\n icon?: string;\n /* Styles applied to the icon when selected. /\n iconSelected?: string;\n /* Styles applied to the list. */\n menuList?: string;\n}\n\nconst classKeys: (keyof HvDropDownMenuClasses)[] = [\n \"root\",\n \"container\",\n \"baseContainer\",\n \"icon\",\n \"iconSelected\",\n \"menuList\",\n];\n\nconst dropDownMenuClasses = getClasses(classKeys, \"HvDropDownMenu\");\n\nexport default dropDownMenuClasses;\n"],"names":["classKeys","dropDownMenuClasses","getClasses"],"mappings":";~~AAiBA~~,MAAMA,YAA6C,CACjD,QACA,aACA,iBACA,QACA,gBACA,~~UAAU~~;~~AAGZ~~,MAAMC,sBAAsBC,WAAWF,WAAW,gBAAgB;AAElE,MAAA,wBAAeC;"}
1	+ {"version":3,"file":"dropDownMenuClasses.js","sources":["../../../../src/components/DropDownMenu/dropDownMenuClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvDropDownMenuClasses {\n /** Styles applied to the root. /\n root?: string;\n /* Styles applied to the container. /\n container?: string;\n /* Styles applied to the BaseDropdown container. /\n baseContainer?: string;\n /* Styles applied to the icon. /\n icon?: string;\n /* Styles applied to the icon when selected. /\n iconSelected?: string;\n /* Styles applied to the list root. /\n menuListRoot?: string;\n /* Styles applied to the list. */\n menuList?: string;\n}\n\nconst classKeys: (keyof HvDropDownMenuClasses)[] = [\n \"root\",\n \"container\",\n \"baseContainer\",\n \"icon\",\n \"iconSelected\",\n \"menuList\",\n \"menuListRoot\",\n];\n\nconst dropDownMenuClasses = getClasses(classKeys, \"HvDropDownMenu\");\n\nexport default dropDownMenuClasses;\n"],"names":["classKeys","dropDownMenuClasses","getClasses"],"mappings":";AAmBA,MAAMA,YAA6C,CACjD,QACA,aACA,iBACA,QACA,gBACA,YACA,cAAc;AAGhB,MAAMC,sBAAsBC,WAAWF,WAAW,gBAAgB;AAElE,MAAA,wBAAeC;"}

package/dist/esm/components/FileUploader/DropZone/DropZone.js CHANGED Viewed

@@ -2,16 +2,16 @@ import { useState, useRef } from "react";
 import uniqueId from "lodash/uniqueId";
 import accept from "attr-accept";
 import { clsx } from "clsx";
-import withId from "../../../hocs/withId.js";
 import { convertUnits } from "../utils.js";
 import { StyledDropZoneLabelsGroup, StyledLabel, StyledInfoMessage, StyledDropZoneContainer, StyledInput, StyledDropArea, StyledDropAreaLabel, StyledDragText, StyledDropAreaIcon, StyledDropAreaLabels, StyledSelectedFilesText } from "./DropZone.styles.js";
 import dropZoneClasses from "./dropZoneClasses.js";
 import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import useUniqueId from "../../../hooks/useUniqueId.js";
 import { setId } from "../../../utils/setId.js";
 import { isKeypress } from "../../../utils/keyboardUtils/keyCheck.js";
 import { keyboardCodes } from "../../../utils/keyboardUtils/keyboardCodes.js";
-const HvDropZone = withId(({
-  id,
+const HvDropZone = ({
+  id: idProp,
   classes,
   labels,
   acceptedFiles,
@@ -22,6 +22,7 @@ const HvDropZone = withId(({
   disabled = false,
   onFilesAdded
 }) => {
+  const id = useUniqueId(idProp, "dropzone");
   const [dragState, setDrag] = useState(false);
   const inputRef = useRef(null);
   const leaveDropArea = () => {
@@ -158,7 +159,7 @@ const HvDropZone = withId(({
       })]
     })]
   });
-});
+};
 export {
   HvDropZone
 };

package/dist/esm/components/FileUploader/DropZone/DropZone.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropZone.js","sources":["../../../../../src/components/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport uniqueId from \"lodash/uniqueId\";\nimport accept from \"attr-accept\";\nimport { clsx } from \"clsx\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport withId from \"@core/hocs/withId\";\nimport { convertUnits } from \"../utils\";\nimport {\n StyledDragText,\n StyledDropArea,\n StyledDropAreaIcon,\n StyledDropAreaLabel,\n StyledDropAreaLabels,\n StyledDropZoneContainer,\n StyledDropZoneLabelsGroup,\n StyledInfoMessage,\n StyledInput,\n StyledLabel,\n StyledSelectedFilesText,\n} from \"./DropZone.styles\";\nimport dropZoneClasses, { HvDropZoneClasses } from \"./dropZoneClasses\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\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 = withId(\n ({\n id,\n classes,\n labels,\n acceptedFiles,\n maxFileSize,\n inputProps,\n hideLabels,\n multiple = true,\n disabled = false,\n onFilesAdded,\n }: HvDropZoneProps) => {\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 <StyledDropZoneLabelsGroup\n id={id}\n className={clsx(\n classes?.dropZoneLabelsGroup,\n dropZoneClasses.dropZoneLabelsGroup\n )}\n aria-label=\"File Dropzone\"\n >\n <StyledLabel\n id={setId(id, \"input-file-label\")}\n htmlFor={setId(id, \"input-file\")}\n label={labels?.dropzone}\n className={clsx(\n classes?.dropZoneLabel,\n dropZoneClasses.dropZoneLabel\n )}\n $disabled={disabled}\n />\n <StyledInfoMessage\n $disabled={disabled}\n id={setId(id, \"description\")}\n >\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 </StyledInfoMessage>\n </StyledDropZoneLabelsGroup>\n )}\n <StyledDropZoneContainer\n id={setId(id, \"button\")}\n className={clsx(\n classes?.dropZoneContainer,\n dropZoneClasses.dropZoneContainer,\n dragState && clsx(classes?.dragAction, dropZoneClasses.dragAction),\n disabled &&\n clsx(\n classes?.dropZoneContainerDisabled,\n dropZoneClasses.dropZoneContainerDisabled\n )\n )}\n $drag={dragState}\n $disabled={disabled}\n role=\"button\"\n tabIndex={0}\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 onKeyDown={(e) => {\n if (isKeypress(e, keyboardCodes.Enter) \|\| isKeypress(e, 32)) {\n inputRef.current?.click();\n }\n }}\n >\n <StyledInput\n id={setId(id, \"input-file\")}\n tabIndex={-1}\n className={clsx(classes?.inputArea, dropZoneClasses.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 ref={inputRef}\n accept={acceptedFiles.join(\",\")}\n {...inputProps}\n />\n <StyledDropArea\n className={clsx(classes?.dropArea, dropZoneClasses.dropArea)}\n >\n {dragState ? (\n <StyledDropAreaLabel\n className={clsx(\n classes?.dropZoneAreaLabels,\n dropZoneClasses.dropZoneAreaLabels\n )}\n >\n <StyledDragText\n className={clsx(classes?.dragText, dropZoneClasses.dragText)}\n >\n {labels?.dropFiles}\n </StyledDragText>\n </StyledDropAreaLabel>\n ) : (\n <>\n <StyledDropAreaIcon\n iconSize=\"M\"\n className={clsx(\n classes?.dropZoneAreaIcon,\n dropZoneClasses.dropZoneAreaIcon\n )}\n color={disabled ? \"secondary_60\" : \"secondary\"}\n />\n <StyledDropAreaLabels\n className={clsx(\n classes?.dropZoneAreaLabels,\n dropZoneClasses.dropZoneAreaLabels\n )}\n >\n <StyledDragText\n className={clsx(\n classes?.dragText,\n dropZoneClasses.dragText\n )}\n >\n {labels?.drag}\n <StyledSelectedFilesText\n className={clsx(\n classes?.selectFilesText,\n dropZoneClasses.selectFilesText\n )}\n >{`\\xa0${labels?.selectFiles}`}</StyledSelectedFilesText>\n </StyledDragText>\n </StyledDropAreaLabels>\n </>\n )}\n </StyledDropArea>\n </StyledDropZoneContainer>\n </>\n );\n }\n);\n"],"names":["HvDropZone","withId","id","classes","labels","acceptedFiles","maxFileSize","inputProps","hideLabels","multiple","disabled","onFilesAdded","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","StyledDropZoneLabelsGroup","className","clsx","dropZoneLabelsGroup","dropZoneClasses","_jsx","StyledLabel","setId","htmlFor","label","dropzone","dropZoneLabel","$disabled","_jsxs","StyledInfoMessage","Number","isInteger","sizeWarning","convertUnits","join","StyledDropZoneContainer","dropZoneContainer","dragAction","dropZoneContainerDisabled","$drag","role","tabIndex","onDragEnter","event","stopPropagation","preventDefault","onDragLeave","onDropCapture","onDragOver","onDrop","files","dataTransfer","onKeyDown","isKeypress","keyboardCodes","Enter","current","click","StyledInput","inputArea","title","drag","selectFiles","onClick","value","onChange","ref","StyledDropArea","dropArea","StyledDropAreaLabel","dropZoneAreaLabels","StyledDragText","dragText","dropFiles","StyledDropAreaIcon","iconSize","dropZoneAreaIcon","color","StyledDropAreaLabels","StyledSelectedFilesText","selectFilesText"],"mappings":"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"}
1	+ {"version":3,"file":"DropZone.js","sources":["../../../../../src/components/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport uniqueId from \"lodash/uniqueId\";\nimport accept from \"attr-accept\";\nimport { clsx } from \"clsx\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useUniqueId } from \"@core/hooks\";\nimport { convertUnits } from \"../utils\";\nimport {\n StyledDragText,\n StyledDropArea,\n StyledDropAreaIcon,\n StyledDropAreaLabel,\n StyledDropAreaLabels,\n StyledDropZoneContainer,\n StyledDropZoneLabelsGroup,\n StyledInfoMessage,\n StyledInput,\n StyledLabel,\n StyledSelectedFilesText,\n} from \"./DropZone.styles\";\nimport dropZoneClasses, { HvDropZoneClasses } from \"./dropZoneClasses\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\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,\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 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 <StyledDropZoneLabelsGroup\n id={id}\n className={clsx(\n classes?.dropZoneLabelsGroup,\n dropZoneClasses.dropZoneLabelsGroup\n )}\n aria-label=\"File Dropzone\"\n >\n <StyledLabel\n id={setId(id, \"input-file-label\")}\n htmlFor={setId(id, \"input-file\")}\n label={labels?.dropzone}\n className={clsx(\n classes?.dropZoneLabel,\n dropZoneClasses.dropZoneLabel\n )}\n $disabled={disabled}\n />\n <StyledInfoMessage $disabled={disabled} 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 </StyledInfoMessage>\n </StyledDropZoneLabelsGroup>\n )}\n <StyledDropZoneContainer\n id={setId(id, \"button\")}\n className={clsx(\n classes?.dropZoneContainer,\n dropZoneClasses.dropZoneContainer,\n dragState && clsx(classes?.dragAction, dropZoneClasses.dragAction),\n disabled &&\n clsx(\n classes?.dropZoneContainerDisabled,\n dropZoneClasses.dropZoneContainerDisabled\n )\n )}\n $drag={dragState}\n $disabled={disabled}\n role=\"button\"\n tabIndex={0}\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 onKeyDown={(e) => {\n if (isKeypress(e, keyboardCodes.Enter) \|\| isKeypress(e, 32)) {\n inputRef.current?.click();\n }\n }}\n >\n <StyledInput\n id={setId(id, \"input-file\")}\n tabIndex={-1}\n className={clsx(classes?.inputArea, dropZoneClasses.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 ref={inputRef}\n accept={acceptedFiles.join(\",\")}\n {...inputProps}\n />\n <StyledDropArea\n className={clsx(classes?.dropArea, dropZoneClasses.dropArea)}\n >\n {dragState ? (\n <StyledDropAreaLabel\n className={clsx(\n classes?.dropZoneAreaLabels,\n dropZoneClasses.dropZoneAreaLabels\n )}\n >\n <StyledDragText\n className={clsx(classes?.dragText, dropZoneClasses.dragText)}\n >\n {labels?.dropFiles}\n </StyledDragText>\n </StyledDropAreaLabel>\n ) : (\n <>\n <StyledDropAreaIcon\n iconSize=\"M\"\n className={clsx(\n classes?.dropZoneAreaIcon,\n dropZoneClasses.dropZoneAreaIcon\n )}\n color={disabled ? \"secondary_60\" : \"secondary\"}\n />\n <StyledDropAreaLabels\n className={clsx(\n classes?.dropZoneAreaLabels,\n dropZoneClasses.dropZoneAreaLabels\n )}\n >\n <StyledDragText\n className={clsx(classes?.dragText, dropZoneClasses.dragText)}\n >\n {labels?.drag}\n <StyledSelectedFilesText\n className={clsx(\n classes?.selectFilesText,\n dropZoneClasses.selectFilesText\n )}\n >{`\\xa0${labels?.selectFiles}`}</StyledSelectedFilesText>\n </StyledDragText>\n </StyledDropAreaLabels>\n </>\n )}\n </StyledDropArea>\n </StyledDropZoneContainer>\n </>\n );\n};\n"],"names":["HvDropZone","id","idProp","classes","labels","acceptedFiles","maxFileSize","inputProps","hideLabels","multiple","disabled","onFilesAdded","useUniqueId","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","StyledDropZoneLabelsGroup","className","clsx","dropZoneLabelsGroup","dropZoneClasses","_jsx","StyledLabel","setId","htmlFor","label","dropzone","dropZoneLabel","$disabled","_jsxs","StyledInfoMessage","Number","isInteger","sizeWarning","convertUnits","join","StyledDropZoneContainer","dropZoneContainer","dragAction","dropZoneContainerDisabled","$drag","role","tabIndex","onDragEnter","event","stopPropagation","preventDefault","onDragLeave","onDropCapture","onDragOver","onDrop","files","dataTransfer","onKeyDown","isKeypress","keyboardCodes","Enter","current","click","StyledInput","inputArea","title","drag","selectFiles","onClick","value","onChange","ref","StyledDropArea","dropArea","StyledDropAreaLabel","dropZoneAreaLabels","StyledDragText","dragText","dropFiles","StyledDropAreaIcon","iconSize","dropZoneAreaIcon","color","StyledDropAreaLabels","StyledSelectedFilesText","selectFilesText"],"mappings":"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"}