@hitachivantara/uikit-react-core 5.33.0 → 5.34.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.
- package/dist/cjs/components/DropDownMenu/DropDownMenu.cjs.map +1 -1
- package/dist/cjs/components/DropDownMenu/DropDownMenu.styles.cjs +1 -1
- package/dist/cjs/components/DropDownMenu/DropDownMenu.styles.cjs.map +1 -1
- package/dist/esm/components/DropDownMenu/DropDownMenu.js.map +1 -1
- package/dist/esm/components/DropDownMenu/DropDownMenu.styles.js +1 -1
- package/dist/esm/components/DropDownMenu/DropDownMenu.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDownMenu.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\
|
|
1
|
+
{"version":3,"file":"DropDownMenu.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n HvBaseDropdown,\n HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\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 */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n const {\n id: idProp,\n classes: classesProp,\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 } = useDefaultProps(\"HvDropDownMenu\", props);\n\n const { classes, cx } = useClasses(classesProp);\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: ChangeEvent) => {\n // this will only run if uncontrolled\n setOpen(false);\n onToggle?.(event as any, false);\n };\n\n // If the ESCAPE key is pressed inside the list, the close handler must be called.\n const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Tab\")) {\n const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n if (node) setTimeout(() => node.focus(), 0);\n handleClose(event as any);\n }\n event.preventDefault();\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef\n ) => {\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 <HvBaseDropdown\n id={id}\n className={cx(classes.container, className)}\n classes={{\n root: classes.root,\n container: classes.baseContainer,\n }}\n expanded={open && !disabled}\n component={\n <HvButton\n icon\n variant={category}\n id={setId(id, \"icon-button\")}\n className={cx(classes.icon, { [classes.iconSelected]: open })}\n aria-expanded={open}\n disabled={disabled}\n aria-label=\"Dropdown menu\"\n aria-haspopup=\"menu\"\n >\n {icon || (\n <MoreOptionsVertical\n aria-hidden\n color={disabled ? \"secondary_60\" : undefined}\n />\n )}\n </HvButton>\n }\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 className={classes.menuListRoot}>\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: classes.menuList,\n }}\n />\n </HvPanel>\n </HvBaseDropdown>\n );\n};\n"],"names":["HvDropDownMenu","props","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","useDefaultProps","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKey","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","jsx","HvBaseDropdown","container","root","baseContainer","HvButton","iconSelected","MoreOptionsVertical","undefined","e","s","HvPanel","menuListRoot","HvList","item","menuList"],"mappings":"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"}
|
|
@@ -42,7 +42,7 @@ const {
|
|
|
42
42
|
fill: uikitStyles.theme.colors.secondary
|
|
43
43
|
},
|
|
44
44
|
borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0px 0px`,
|
|
45
|
-
border: `1px solid ${uikitStyles.theme.colors.
|
|
45
|
+
border: `1px solid ${uikitStyles.theme.colors.secondary}`
|
|
46
46
|
},
|
|
47
47
|
/** Styles applied to the list root. */
|
|
48
48
|
menuListRoot: {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDownMenu.styles.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n /** Styles applied to the container. */\n container: {\n width: 32,\n },\n /** Styles applied to the BaseDropdown container. */\n baseContainer: {},\n /** Styles applied to the root. */\n root: {\n display: \"inline-block\",\n width: \"auto\",\n \"&:focus-visible $icon\": {\n ...outlineStyles,\n },\n },\n /** Styles applied to the icon. */\n icon: {\n position: \"relative\",\n width: 32,\n height: 32,\n boxSizing: \"border-box\",\n padding: 0,\n borderRadius: theme.radii.base,\n border: \"1px solid transparent\",\n },\n /** Styles applied to the icon when selected. */\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: `1px solid ${theme.colors.
|
|
1
|
+
{"version":3,"file":"DropDownMenu.styles.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n /** Styles applied to the container. */\n container: {\n width: 32,\n },\n /** Styles applied to the BaseDropdown container. */\n baseContainer: {},\n /** Styles applied to the root. */\n root: {\n display: \"inline-block\",\n width: \"auto\",\n \"&:focus-visible $icon\": {\n ...outlineStyles,\n },\n },\n /** Styles applied to the icon. */\n icon: {\n position: \"relative\",\n width: 32,\n height: 32,\n boxSizing: \"border-box\",\n padding: 0,\n borderRadius: theme.radii.base,\n border: \"1px solid transparent\",\n },\n /** Styles applied to the icon when selected. */\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: `1px solid ${theme.colors.secondary}`,\n },\n /** Styles applied to the list root. */\n menuListRoot: {},\n /** Styles applied to the list. */\n menuList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","container","width","baseContainer","root","display","outlineStyles","icon","position","height","boxSizing","padding","borderRadius","theme","radii","base","border","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","menuListRoot","menuList"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTH,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAGI,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,YAAAA,MAAMC,MAAMC;AAAAA,IAC1BC,QAAQ;AAAA,EACV;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,YAAAA,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,YAAAA,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,YAAMC,MAAAA,MAAMC,IAAK,IAAGF,kBAAMC,MAAMC,IAAK;AAAA,IACtDC,QAAS,aAAYH,YAAMM,MAAAA,OAAOK,SAAU;AAAA,EAC9C;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\
|
|
1
|
+
{"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n HvBaseDropdown,\n HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\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 */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n const {\n id: idProp,\n classes: classesProp,\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 } = useDefaultProps(\"HvDropDownMenu\", props);\n\n const { classes, cx } = useClasses(classesProp);\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: ChangeEvent) => {\n // this will only run if uncontrolled\n setOpen(false);\n onToggle?.(event as any, false);\n };\n\n // If the ESCAPE key is pressed inside the list, the close handler must be called.\n const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Tab\")) {\n const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n if (node) setTimeout(() => node.focus(), 0);\n handleClose(event as any);\n }\n event.preventDefault();\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef\n ) => {\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 <HvBaseDropdown\n id={id}\n className={cx(classes.container, className)}\n classes={{\n root: classes.root,\n container: classes.baseContainer,\n }}\n expanded={open && !disabled}\n component={\n <HvButton\n icon\n variant={category}\n id={setId(id, \"icon-button\")}\n className={cx(classes.icon, { [classes.iconSelected]: open })}\n aria-expanded={open}\n disabled={disabled}\n aria-label=\"Dropdown menu\"\n aria-haspopup=\"menu\"\n >\n {icon || (\n <MoreOptionsVertical\n aria-hidden\n color={disabled ? \"secondary_60\" : undefined}\n />\n )}\n </HvButton>\n }\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 className={classes.menuListRoot}>\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: classes.menuList,\n }}\n />\n </HvPanel>\n </HvBaseDropdown>\n );\n};\n"],"names":["HvDropDownMenu","props","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","useDefaultProps","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKey","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","container","root","baseContainer","iconSelected","undefined","e","s","menuListRoot","item","menuList"],"mappings":"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"}
|
|
@@ -40,7 +40,7 @@ const {
|
|
|
40
40
|
fill: theme.colors.secondary
|
|
41
41
|
},
|
|
42
42
|
borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,
|
|
43
|
-
border: `1px solid ${theme.colors.
|
|
43
|
+
border: `1px solid ${theme.colors.secondary}`
|
|
44
44
|
},
|
|
45
45
|
/** Styles applied to the list root. */
|
|
46
46
|
menuListRoot: {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropDownMenu.styles.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n /** Styles applied to the container. */\n container: {\n width: 32,\n },\n /** Styles applied to the BaseDropdown container. */\n baseContainer: {},\n /** Styles applied to the root. */\n root: {\n display: \"inline-block\",\n width: \"auto\",\n \"&:focus-visible $icon\": {\n ...outlineStyles,\n },\n },\n /** Styles applied to the icon. */\n icon: {\n position: \"relative\",\n width: 32,\n height: 32,\n boxSizing: \"border-box\",\n padding: 0,\n borderRadius: theme.radii.base,\n border: \"1px solid transparent\",\n },\n /** Styles applied to the icon when selected. */\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: `1px solid ${theme.colors.
|
|
1
|
+
{"version":3,"file":"DropDownMenu.styles.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n /** Styles applied to the container. */\n container: {\n width: 32,\n },\n /** Styles applied to the BaseDropdown container. */\n baseContainer: {},\n /** Styles applied to the root. */\n root: {\n display: \"inline-block\",\n width: \"auto\",\n \"&:focus-visible $icon\": {\n ...outlineStyles,\n },\n },\n /** Styles applied to the icon. */\n icon: {\n position: \"relative\",\n width: 32,\n height: 32,\n boxSizing: \"border-box\",\n padding: 0,\n borderRadius: theme.radii.base,\n border: \"1px solid transparent\",\n },\n /** Styles applied to the icon when selected. */\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: `1px solid ${theme.colors.secondary}`,\n },\n /** Styles applied to the list root. */\n menuListRoot: {},\n /** Styles applied to the list. */\n menuList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","container","width","baseContainer","root","display","outlineStyles","icon","position","height","boxSizing","padding","borderRadius","theme","radii","base","border","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","menuListRoot","menuList"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTH,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAGI;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,MAAMC,MAAMC;AAAAA,IAC1BC,QAAQ;AAAA,EACV;AAAA;AAAA,EAEAC,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,MAAMC,MAAMC,IAAK,IAAGF,MAAMC,MAAMC,IAAK;AAAA,IACtDC,QAAS,aAAYH,MAAMM,OAAOK,SAAU;AAAA,EAC9C;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.34.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"access": "public",
|
|
65
65
|
"directory": "package"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "d0dde26c6eff55d855702074f70a1480e51693cd",
|
|
68
68
|
"main": "dist/cjs/index.cjs",
|
|
69
69
|
"exports": {
|
|
70
70
|
".": {
|