npm - @hitachivantara/uikit-react-core - Versions diffs - 5.26.3 → 5.26.5 - Mend

@hitachivantara/uikit-react-core 5.26.3 → 5.26.5

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 (50) hide show

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

@@ -21,7 +21,7 @@ import { HvTypography } from "../Typography/Typography.js";
 const HvBaseDropdown = (props) => {
   var _a;
   const {
-    id,
+    id: idProp,
     className,
     classes: classesProp,
     children,
@@ -37,13 +37,15 @@ const HvBaseDropdown = (props) => {
     required,
     disablePortal,
     variableWidth,
-    placement = "right",
+    placement: placementProp = "right",
+    "aria-expanded": ariaExpandedProp,
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp,
     popperProps = {},
     dropdownHeaderRef: dropdownHeaderRefProp,
     onToggle,
     onClickOutside,
     onContainerCreation,
-    "aria-expanded": ariaExpandedProp,
     ...others
   } = useDefaultProps("HvBaseDropdown", props);
   const {
@@ -61,8 +63,20 @@ const HvBaseDropdown = (props) => {
   const handleDropdownHeaderRef = useForkRef(setReferenceElement, handleDropdownHeaderRefProp);
   const ariaRole = role || (component == null ? "combobox" : void 0);
   const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
-  const elementId = useUniqueId(id, "hvbasedropdown");
-  const bottom = placement && `bottom-${placement === "right" ? "start" : "end"}`;
+  const id = useUniqueId(idProp, "hvbasedropdown");
+  const containerId = setId(id, "children-container");
+  const headerControlArias = {
+    "aria-required": required ?? void 0,
+    "aria-readonly": readOnly ?? void 0,
+    "aria-expanded": ariaExpanded,
+    "aria-owns": isOpen ? containerId : void 0,
+    "aria-controls": isOpen ? containerId : void 0
+  };
+  const headerAriaLabels = {
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp
+  };
+  const placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
   const extensionWidth = referenceElement ? referenceElement == null ? void 0 : referenceElement.offsetWidth : "inherit";
   const {
     modifiers: popperPropsModifiers = [],
@@ -144,7 +158,7 @@ const HvBaseDropdown = (props) => {
     styles: popperStyles,
     attributes
   } = usePopper(referenceElement, popperElement, {
-    placement: bottom,
+    placement,
     modifiers,
     onFirstUpdate,
     ...otherPopperProps
@@ -173,7 +187,8 @@ const HvBaseDropdown = (props) => {
   const headerComponent = (() => {
     if (component) {
       return React__default.cloneElement(component, {
-        ref: handleDropdownHeaderRef
+        ref: handleDropdownHeaderRef,
+        ...headerControlArias
       });
     }
     const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;
@@ -187,13 +202,10 @@ const HvBaseDropdown = (props) => {
         [classes.headerOpenDown]: isOpen && popperPlacement.includes("bottom")
       }),
       role: ariaRole === "combobox" ? "textbox" : void 0,
+      ...headerAriaLabels,
       style: disabled || readOnly ? {
         pointerEvents: "none"
       } : void 0,
-      "aria-label": others["aria-label"] ?? void 0,
-      "aria-labelledby": others["aria-labelledby"] ?? void 0,
-      "aria-required": required ?? void 0,
-      "aria-readonly": readOnly ?? void 0,
       tabIndex: disabled ? -1 : 0,
       ref: handleDropdownHeaderRef,
       ...dropdownHeaderProps,
@@ -239,7 +251,6 @@ const HvBaseDropdown = (props) => {
       }
     };
     const container = /* @__PURE__ */ jsx("div", {
-      role: "tooltip",
       ref: setPopperElement,
       className: classes.container,
       style: popperStyles.popper,
@@ -258,7 +269,7 @@ const HvBaseDropdown = (props) => {
           }), /* @__PURE__ */ jsx(BaseDropdownContext.Provider, {
             value: popperMaxSize,
             children: /* @__PURE__ */ jsx("div", {
-              id: setId(elementId, "children-container"),
+              id: containerId,
               className: cx(classes.panel, {
                 [classes.panelOpenedUp]: popperPlacement.includes("top"),
                 [classes.panelOpenedDown]: popperPlacement.includes("bottom")
@@ -285,12 +296,6 @@ const HvBaseDropdown = (props) => {
     className: classes.root,
     children: [/* @__PURE__ */ jsx("div", {
       id,
-      role: ariaRole,
-      "aria-expanded": ariaExpanded,
-      "aria-owns": isOpen ? setId(elementId, "children-container") : void 0,
-      "aria-controls": isOpen ? setId(elementId, "children-container") : void 0,
-      "aria-required": required ?? void 0,
-      "aria-readonly": readOnly ?? void 0,
       className: cx(classes.anchor, {
         [classes.rootDisabled]: disabled
       }, className),
@@ -298,6 +303,11 @@ const HvBaseDropdown = (props) => {
         onKeyDown: handleToggle,
         onClick: handleToggle
       },
+      ...ariaRole && {
+        role: ariaRole,
+        ...headerAriaLabels,
+        ...headerControlArias
+      },
       // Removes the element from the navigation sequence for keyboard focus
       tabIndex: -1,
       ...others,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseDropdown.js","sources":["../../../../src/components/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import React, {\n useMemo,\n useState,\n useCallback,\n KeyboardEventHandler,\n} from \"react\";\n\nimport { createPortal } from \"react-dom\";\n\nimport {\n ClickAwayListener,\n ClickAwayListenerProps,\n PopperPlacementType,\n PopperProps,\n} from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { usePopper } from \"react-popper\";\nimport { detectOverflow, ModifierArguments, Options } from \"@popperjs/core\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey, isOneOfKeys } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getFirstAndLastFocus } from \"@core/utils/focusableElementFinder\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n extends HvBaseProps<HTMLDivElement, \"placeholder\"> {\n /*\n The role of the element that triggers the popup.\n \n Defaults to \"combobox\" if `component` and the default\n * \"textbox\" header is used, undefined otherwise.\n /\n role?: string;\n /\n Header placeholder.\n /\n placeholder?: string \| React.ReactNode;\n /\n If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n /\n disabled?: boolean;\n /\n If `true` the dropdown will be in read only mode, unable to be interacted.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n /\n disablePortal?: boolean;\n /\n If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n /\n variableWidth?: boolean;\n /\n If `true` the dropdown starts opened if `false` it starts closed.\n /\n expanded?: boolean;\n /\n When uncontrolled, defines the initial expanded state.\n /\n defaultExpanded?: boolean;\n /\n An object containing props to be wired to the popper component.\n /\n popperProps?: Partial<PopperProps>;\n /\n Placement of the dropdown.\n /\n placement?: \"left\" \| \"right\";\n /\n Replacement for the header component.\n /\n component?: React.ReactNode;\n /\n Adornment to replace the default arrows.\n /\n adornment?: React.ReactNode;\n /\n When dropdown changes the expanded state.\n /\n onToggle?: (event: Event, open: boolean) => void;\n /\n When user click outside the open container.\n /\n onClickOutside?: (event: Event) => void;\n /\n Callback called when the dropdown is opened and ready,\n * commonly used to set focus to the content.\n /\n onContainerCreation?: (container: HTMLElement \| null) => void;\n /\n Attributes applied to the dropdown header element.\n /\n dropdownHeaderProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n /\n Pass a ref to the dropdown header element.\n /\n dropdownHeaderRef?: React.Ref<any>;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvBaseDropdownClasses;\n}\n\nexport const HvBaseDropdown = (props: HvBaseDropdownProps) => {\n const {\n id,\n className,\n classes: classesProp,\n children,\n role,\n placeholder,\n component,\n adornment,\n expanded,\n dropdownHeaderProps,\n defaultExpanded,\n disabled,\n readOnly,\n required,\n disablePortal,\n variableWidth,\n placement = \"right\",\n popperProps = {},\n dropdownHeaderRef: dropdownHeaderRefProp,\n onToggle,\n onClickOutside,\n onContainerCreation,\n \"aria-expanded\": ariaExpandedProp,\n ...others\n } = useDefaultProps(\"HvBaseDropdown\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { rootId } = useTheme();\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n const [referenceElement, setReferenceElement] = useState<HTMLElement \| null>(\n null\n );\n const [popperElement, setPopperElement] = useState<HTMLElement \| null>(null);\n const [popperMaxSize, setPopperMaxSize] = useState<{\n width?: number;\n height?: number;\n }>({});\n\n const handleDropdownHeaderRefProp = useForkRef(\n dropdownHeaderRefProp,\n dropdownHeaderProps?.ref\n );\n const handleDropdownHeaderRef = useForkRef(\n setReferenceElement,\n handleDropdownHeaderRefProp\n );\n\n const ariaRole = role \|\| (component == null ? \"combobox\" : undefined);\n\n const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n const elementId = useUniqueId(id, \"hvbasedropdown\");\n\n const bottom: PopperPlacementType =\n placement && `bottom-${placement === \"right\" ? \"start\" : \"end\"}`;\n\n const extensionWidth = referenceElement\n ? referenceElement?.offsetWidth\n : \"inherit\";\n\n const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n popperProps;\n\n const onFirstUpdate = useCallback(() => {\n if (onContainerCreation) onContainerCreation(popperElement);\n }, [onContainerCreation, popperElement]);\n\n const widthCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n []\n );\n\n const widthCalculatorEffect = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.elements.popper.style.width = `${\n (state.elements.reference as any).offsetWidth\n }px`;\n },\n []\n );\n\n const applyMaxSizeCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n // The `maxSize` modifier provides this data\n const { width, height } = state.modifiersData.maxSize;\n if (width !== popperMaxSize?.width \|\| height !== popperMaxSize?.height) {\n setPopperMaxSize({ width, height });\n }\n\n state.styles.popper = {\n ...state.styles.popper,\n maxWidth: `${width}px`,\n maxHeight: `${height}px`,\n };\n },\n [popperMaxSize]\n );\n\n const maxSizeCalculator = useCallback(\n ({ state, name, options }: ModifierArguments<Options>) => {\n const overflow = detectOverflow(state, options);\n\n const x = state.modifiersData.preventOverflow?.x \|\| 0;\n const y = state.modifiersData.preventOverflow?.y \|\| 0;\n\n const popperWidth = state.rects.popper.width;\n const popperHeight = state.rects.popper.height;\n\n const basePlacement = state.placement.split(\"-\")[0];\n\n const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n state.modifiersData[name] = {\n width: popperWidth - overflow[widthProp] - x,\n height: popperHeight - overflow[heightProp] - y,\n };\n },\n []\n );\n\n const modifiers: PopperProps[\"modifiers\"] = useMemo(\n () => [\n {\n name: \"variableWidth\",\n enabled: !variableWidth,\n phase: \"beforeWrite\",\n requires: [\"computeStyles\"],\n fn: widthCalculator,\n effect: widthCalculatorEffect,\n },\n {\n name: \"maxSize\",\n enabled: true,\n phase: \"main\",\n requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n fn: maxSizeCalculator,\n },\n {\n name: \"applyMaxSize\",\n enabled: true,\n phase: \"beforeWrite\",\n requires: [\"maxSize\"],\n fn: applyMaxSizeCalculator,\n },\n ...popperPropsModifiers,\n ],\n [\n maxSizeCalculator,\n applyMaxSizeCalculator,\n popperPropsModifiers,\n variableWidth,\n widthCalculator,\n widthCalculatorEffect,\n ]\n );\n\n const { styles: popperStyles, attributes } = usePopper(\n referenceElement,\n popperElement,\n {\n placement: bottom,\n modifiers,\n onFirstUpdate,\n ...otherPopperProps,\n }\n );\n\n const popperPlacement =\n attributes.popper?.[\"data-popper-placement\"] ?? \"bottom\";\n\n const handleToggle = useCallback(\n (event) => {\n if (event && !isKey(event, \"Tab\")) {\n event.preventDefault();\n }\n\n const notControlKey =\n !!event?.code &&\n !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n const ignoredCombinations =\n (isKey(event, \"Esc\") && !isOpen) \|\|\n (isKey(event, \"ArrowDown\") && isOpen) \|\|\n (isKey(event, \"Tab\") && !isOpen);\n\n if (disabled \|\| notControlKey \|\| ignoredCombinations) return;\n\n const newOpen = !isOpen;\n\n / If about to close focus on the header component. /\n const focusHeader = () => {\n if (!newOpen) {\n // Focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n referenceElement?.focus({ preventScroll: true });\n }\n\n return newOpen;\n };\n setIsOpen(focusHeader());\n\n onToggle?.(event, newOpen);\n },\n [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n );\n\n const headerComponent = (() => {\n if (component) {\n return React.cloneElement(component as React.ReactElement, {\n ref: handleDropdownHeaderRef,\n });\n }\n\n const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n return (\n <div\n id={setId(id, \"header\")}\n className={cx(classes.header, {\n [classes.headerDisabled]: disabled,\n [classes.headerReadOnly]: readOnly,\n [classes.headerOpen]: isOpen,\n [classes.headerOpenUp]: isOpen && popperPlacement.includes(\"top\"),\n [classes.headerOpenDown]:\n isOpen && popperPlacement.includes(\"bottom\"),\n })}\n role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n style={disabled \|\| readOnly ? { pointerEvents: \"none\" } : undefined}\n aria-label={others[\"aria-label\"] ?? undefined}\n aria-labelledby={others[\"aria-labelledby\"] ?? undefined}\n aria-required={required ?? undefined}\n aria-readonly={readOnly ?? undefined}\n // Removes the element from the navigation sequence for keyboard focus if disabled\n tabIndex={disabled ? -1 : 0}\n ref={handleDropdownHeaderRef}\n {...dropdownHeaderProps}\n >\n <div className={classes.selection}>\n {placeholder && typeof placeholder === \"string\" ? (\n <HvTypography\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n {placeholder}\n </HvTypography>\n ) : (\n placeholder\n )}\n </div>\n <div className={classes.arrowContainer}>\n {adornment \|\| (\n <ExpanderComponent\n iconSize=\"XS\"\n color={disabled ? theme.colors.secondary_60 : undefined}\n className={classes.arrow}\n />\n )}\n </div>\n </div>\n );\n })();\n\n const containerComponent = (() => {\n /\n Handle keyboard inside children container.\n /\n const handleContainerKeyDown: KeyboardEventHandler = (event) => {\n if (isKey(event, \"Esc\")) {\n handleToggle(event);\n }\n if (isKey(event, \"Tab\") && !event.shiftKey) {\n const focusList = getFirstAndLastFocus(popperElement);\n if (document.activeElement === focusList?.last) {\n event.preventDefault();\n focusList?.first?.focus();\n }\n }\n };\n\n const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n const isButtonClick = referenceElement?.contains(event.target as any);\n if (!isButtonClick) {\n onClickOutside?.(event);\n setIsOpen(false);\n onToggle?.(event, false);\n }\n };\n\n const container = (\n <div\n role=\"tooltip\"\n ref={setPopperElement}\n className={classes.container}\n style={popperStyles.popper}\n {...attributes.popper}\n >\n <ClickAwayListener onClickAway={handleOutside}>\n {/ eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div onKeyDown={handleContainerKeyDown}>\n {popperPlacement.includes(\"bottom\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(classes.inputExtensionOpen, {\n [classes.inputExtensionLeftPosition]:\n popperPlacement.includes(\"end\"),\n })}\n />\n )}\n <BaseDropdownContext.Provider value={popperMaxSize}>\n <div\n id={setId(elementId, \"children-container\")}\n className={cx(classes.panel, {\n [classes.panelOpenedUp]: popperPlacement.includes(\"top\"),\n [classes.panelOpenedDown]: popperPlacement.includes(\"bottom\"),\n })}\n >\n {children}\n </div>\n </BaseDropdownContext.Provider>\n {popperPlacement.includes(\"top\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(\n classes.inputExtensionOpen,\n classes.inputExtensionOpenShadow,\n {\n [classes.inputExtensionFloatRight]:\n popperPlacement.includes(\"end\"),\n [classes.inputExtensionFloatLeft]:\n popperPlacement.includes(\"start\"),\n }\n )}\n />\n )}\n </div>\n </ClickAwayListener>\n </div>\n );\n\n if (disablePortal) return container;\n\n return createPortal(\n container,\n document.getElementById(rootId \|\| \"\") \|\| document.body\n );\n })();\n\n return (\n <div className={classes.root}>\n <div\n id={id}\n role={ariaRole}\n aria-expanded={ariaExpanded}\n aria-owns={isOpen ? setId(elementId, \"children-container\") : undefined}\n aria-controls={\n isOpen ? setId(elementId, \"children-container\") : undefined\n }\n aria-required={required ?? undefined}\n aria-readonly={readOnly ?? undefined}\n className={cx(\n classes.anchor,\n { [classes.rootDisabled]: disabled },\n className\n )}\n {...(!readOnly && {\n onKeyDown: handleToggle,\n onClick: handleToggle,\n })}\n // Removes the element from the navigation sequence for keyboard focus\n tabIndex={-1}\n {...others}\n >\n {headerComponent}\n </div>\n {isOpen && containerComponent}\n </div>\n );\n};\n"],"names":["HvBaseDropdown","props","id","className","classes","classesProp","children","role","placeholder","component","adornment","expanded","dropdownHeaderProps","defaultExpanded","disabled","readOnly","required","disablePortal","variableWidth","placement","popperProps","dropdownHeaderRef","dropdownHeaderRefProp","onToggle","onClickOutside","onContainerCreation","ariaExpandedProp","others","useDefaultProps","cx","useClasses","rootId","useTheme","isOpen","setIsOpen","useControlled","Boolean","referenceElement","setReferenceElement","useState","popperElement","setPopperElement","popperMaxSize","setPopperMaxSize","handleDropdownHeaderRefProp","useForkRef","ref","handleDropdownHeaderRef","ariaRole","undefined","ariaExpanded","elementId","useUniqueId","bottom","extensionWidth","offsetWidth","modifiers","popperPropsModifiers","otherPopperProps","onFirstUpdate","useCallback","widthCalculator","state","styles","popper","width","rects","reference","widthCalculatorEffect","elements","style","applyMaxSizeCalculator","height","modifiersData","maxSize","maxWidth","maxHeight","maxSizeCalculator","name","options","overflow","detectOverflow","x","preventOverflow","y","popperWidth","popperHeight","basePlacement","split","widthProp","heightProp","useMemo","enabled","phase","requires","fn","effect","requiresIfExists","popperStyles","attributes","usePopper","popperPlacement","handleToggle","event","isKey","preventDefault","notControlKey","code","isOneOfKeys","ignoredCombinations","newOpen","focusHeader","focus","preventScroll","headerComponent","React","cloneElement","ExpanderComponent","DropUpXS","DropDownXS","setId","header","headerDisabled","headerReadOnly","headerOpen","headerOpenUp","includes","headerOpenDown","pointerEvents","tabIndex","_jsx","selection","HvTypography","selectionDisabled","variant","arrowContainer","iconSize","color","theme","colors","secondary_60","arrow","containerComponent","handleContainerKeyDown","shiftKey","focusList","getFirstAndLastFocus","document","activeElement","last","first","handleOutside","isButtonClick","contains","target","container","ClickAwayListener","onClickAway","onKeyDown","inputExtensionOpen","inputExtensionLeftPosition","BaseDropdownContext","Provider","value","panel","panelOpenedUp","panelOpenedDown","inputExtensionOpenShadow","inputExtensionFloatRight","inputExtensionFloatLeft","createPortal","getElementById","body","root","anchor","rootDisabled","onClick"],"mappings":"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"}
1	+ {"version":3,"file":"BaseDropdown.js","sources":["../../../../src/components/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import React, {\n useMemo,\n useState,\n useCallback,\n KeyboardEventHandler,\n AriaAttributes,\n} from \"react\";\n\nimport { createPortal } from \"react-dom\";\n\nimport {\n ClickAwayListener,\n ClickAwayListenerProps,\n PopperPlacementType,\n PopperProps,\n} from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { usePopper } from \"react-popper\";\nimport { detectOverflow, ModifierArguments, Options } from \"@popperjs/core\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey, isOneOfKeys } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getFirstAndLastFocus } from \"@core/utils/focusableElementFinder\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n extends HvBaseProps<HTMLDivElement, \"placeholder\"> {\n /*\n The role of the element that triggers the popup.\n \n Defaults to \"combobox\" if `component` and the default\n * \"textbox\" header is used, undefined otherwise.\n /\n role?: string;\n /\n Header placeholder.\n /\n placeholder?: string \| React.ReactNode;\n /\n If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n /\n disabled?: boolean;\n /\n If `true` the dropdown will be in read only mode, unable to be interacted.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n /\n disablePortal?: boolean;\n /\n If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n /\n variableWidth?: boolean;\n /\n If `true` the dropdown starts opened if `false` it starts closed.\n /\n expanded?: boolean;\n /\n When uncontrolled, defines the initial expanded state.\n /\n defaultExpanded?: boolean;\n /\n An object containing props to be wired to the popper component.\n /\n popperProps?: Partial<PopperProps>;\n /\n Placement of the dropdown.\n /\n placement?: \"left\" \| \"right\";\n /\n Replacement for the header component.\n /\n component?: React.ReactNode;\n /\n Adornment to replace the default arrows.\n /\n adornment?: React.ReactNode;\n /\n When dropdown changes the expanded state.\n /\n onToggle?: (event: Event, open: boolean) => void;\n /\n When user click outside the open container.\n /\n onClickOutside?: (event: Event) => void;\n /\n Callback called when the dropdown is opened and ready,\n * commonly used to set focus to the content.\n /\n onContainerCreation?: (container: HTMLElement \| null) => void;\n /\n Attributes applied to the dropdown header element.\n /\n dropdownHeaderProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n /\n Pass a ref to the dropdown header element.\n /\n dropdownHeaderRef?: React.Ref<any>;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvBaseDropdownClasses;\n}\n\nexport const HvBaseDropdown = (props: HvBaseDropdownProps) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n children,\n role,\n placeholder,\n component,\n adornment,\n expanded,\n dropdownHeaderProps,\n defaultExpanded,\n disabled,\n readOnly,\n required,\n disablePortal,\n variableWidth,\n placement: placementProp = \"right\",\n \"aria-expanded\": ariaExpandedProp,\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n popperProps = {},\n dropdownHeaderRef: dropdownHeaderRefProp,\n onToggle,\n onClickOutside,\n onContainerCreation,\n ...others\n } = useDefaultProps(\"HvBaseDropdown\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { rootId } = useTheme();\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n const [referenceElement, setReferenceElement] = useState<HTMLElement \| null>(\n null\n );\n const [popperElement, setPopperElement] = useState<HTMLElement \| null>(null);\n const [popperMaxSize, setPopperMaxSize] = useState<{\n width?: number;\n height?: number;\n }>({});\n\n const handleDropdownHeaderRefProp = useForkRef(\n dropdownHeaderRefProp,\n dropdownHeaderProps?.ref\n );\n const handleDropdownHeaderRef = useForkRef(\n setReferenceElement,\n handleDropdownHeaderRefProp\n );\n\n const ariaRole = role \|\| (component == null ? \"combobox\" : undefined);\n\n const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n const id = useUniqueId(idProp, \"hvbasedropdown\");\n const containerId = setId(id, \"children-container\");\n\n const headerControlArias = {\n \"aria-required\": required ?? undefined,\n \"aria-readonly\": readOnly ?? undefined,\n\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": isOpen ? containerId : undefined,\n \"aria-controls\": isOpen ? containerId : undefined,\n } satisfies AriaAttributes;\n\n const headerAriaLabels = {\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n } satisfies AriaAttributes;\n\n const placement: PopperPlacementType = `bottom-${\n placementProp === \"right\" ? \"start\" : \"end\"\n }`;\n\n const extensionWidth = referenceElement\n ? referenceElement?.offsetWidth\n : \"inherit\";\n\n const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n popperProps;\n\n const onFirstUpdate = useCallback(() => {\n if (onContainerCreation) onContainerCreation(popperElement);\n }, [onContainerCreation, popperElement]);\n\n const widthCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n []\n );\n\n const widthCalculatorEffect = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.elements.popper.style.width = `${\n (state.elements.reference as any).offsetWidth\n }px`;\n },\n []\n );\n\n const applyMaxSizeCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n // The `maxSize` modifier provides this data\n const { width, height } = state.modifiersData.maxSize;\n if (width !== popperMaxSize?.width \|\| height !== popperMaxSize?.height) {\n setPopperMaxSize({ width, height });\n }\n\n state.styles.popper = {\n ...state.styles.popper,\n maxWidth: `${width}px`,\n maxHeight: `${height}px`,\n };\n },\n [popperMaxSize]\n );\n\n const maxSizeCalculator = useCallback(\n ({ state, name, options }: ModifierArguments<Options>) => {\n const overflow = detectOverflow(state, options);\n\n const x = state.modifiersData.preventOverflow?.x \|\| 0;\n const y = state.modifiersData.preventOverflow?.y \|\| 0;\n\n const popperWidth = state.rects.popper.width;\n const popperHeight = state.rects.popper.height;\n\n const basePlacement = state.placement.split(\"-\")[0];\n\n const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n state.modifiersData[name] = {\n width: popperWidth - overflow[widthProp] - x,\n height: popperHeight - overflow[heightProp] - y,\n };\n },\n []\n );\n\n const modifiers: PopperProps[\"modifiers\"] = useMemo(\n () => [\n {\n name: \"variableWidth\",\n enabled: !variableWidth,\n phase: \"beforeWrite\",\n requires: [\"computeStyles\"],\n fn: widthCalculator,\n effect: widthCalculatorEffect,\n },\n {\n name: \"maxSize\",\n enabled: true,\n phase: \"main\",\n requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n fn: maxSizeCalculator,\n },\n {\n name: \"applyMaxSize\",\n enabled: true,\n phase: \"beforeWrite\",\n requires: [\"maxSize\"],\n fn: applyMaxSizeCalculator,\n },\n ...popperPropsModifiers,\n ],\n [\n maxSizeCalculator,\n applyMaxSizeCalculator,\n popperPropsModifiers,\n variableWidth,\n widthCalculator,\n widthCalculatorEffect,\n ]\n );\n\n const { styles: popperStyles, attributes } = usePopper(\n referenceElement,\n popperElement,\n {\n placement,\n modifiers,\n onFirstUpdate,\n ...otherPopperProps,\n }\n );\n\n const popperPlacement =\n attributes.popper?.[\"data-popper-placement\"] ?? \"bottom\";\n\n const handleToggle = useCallback(\n (event) => {\n if (event && !isKey(event, \"Tab\")) {\n event.preventDefault();\n }\n\n const notControlKey =\n !!event?.code &&\n !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n const ignoredCombinations =\n (isKey(event, \"Esc\") && !isOpen) \|\|\n (isKey(event, \"ArrowDown\") && isOpen) \|\|\n (isKey(event, \"Tab\") && !isOpen);\n\n if (disabled \|\| notControlKey \|\| ignoredCombinations) return;\n\n const newOpen = !isOpen;\n\n / If about to close focus on the header component. /\n const focusHeader = () => {\n if (!newOpen) {\n // Focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n referenceElement?.focus({ preventScroll: true });\n }\n\n return newOpen;\n };\n setIsOpen(focusHeader());\n\n onToggle?.(event, newOpen);\n },\n [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n );\n\n const headerComponent = (() => {\n if (component) {\n return React.cloneElement(component as React.ReactElement, {\n ref: handleDropdownHeaderRef,\n ...headerControlArias,\n });\n }\n\n const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n return (\n <div\n id={setId(id, \"header\")}\n className={cx(classes.header, {\n [classes.headerDisabled]: disabled,\n [classes.headerReadOnly]: readOnly,\n [classes.headerOpen]: isOpen,\n [classes.headerOpenUp]: isOpen && popperPlacement.includes(\"top\"),\n [classes.headerOpenDown]:\n isOpen && popperPlacement.includes(\"bottom\"),\n })}\n // TODO: review \"textbox\" role\n role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n {...headerAriaLabels}\n style={disabled \|\| readOnly ? { pointerEvents: \"none\" } : undefined}\n // Removes the element from the navigation sequence for keyboard focus if disabled\n tabIndex={disabled ? -1 : 0}\n ref={handleDropdownHeaderRef}\n {...dropdownHeaderProps}\n >\n <div className={classes.selection}>\n {placeholder && typeof placeholder === \"string\" ? (\n <HvTypography\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n {placeholder}\n </HvTypography>\n ) : (\n placeholder\n )}\n </div>\n <div className={classes.arrowContainer}>\n {adornment \|\| (\n <ExpanderComponent\n iconSize=\"XS\"\n color={disabled ? theme.colors.secondary_60 : undefined}\n className={classes.arrow}\n />\n )}\n </div>\n </div>\n );\n })();\n\n const containerComponent = (() => {\n /\n Handle keyboard inside children container.\n /\n const handleContainerKeyDown: KeyboardEventHandler = (event) => {\n if (isKey(event, \"Esc\")) {\n handleToggle(event);\n }\n if (isKey(event, \"Tab\") && !event.shiftKey) {\n const focusList = getFirstAndLastFocus(popperElement);\n if (document.activeElement === focusList?.last) {\n event.preventDefault();\n focusList?.first?.focus();\n }\n }\n };\n\n const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n const isButtonClick = referenceElement?.contains(event.target as any);\n if (!isButtonClick) {\n onClickOutside?.(event);\n setIsOpen(false);\n onToggle?.(event, false);\n }\n };\n\n const container = (\n <div\n ref={setPopperElement}\n className={classes.container}\n style={popperStyles.popper}\n {...attributes.popper}\n >\n <ClickAwayListener onClickAway={handleOutside}>\n {/ eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div onKeyDown={handleContainerKeyDown}>\n {popperPlacement.includes(\"bottom\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(classes.inputExtensionOpen, {\n [classes.inputExtensionLeftPosition]:\n popperPlacement.includes(\"end\"),\n })}\n />\n )}\n <BaseDropdownContext.Provider value={popperMaxSize}>\n <div\n id={containerId}\n className={cx(classes.panel, {\n [classes.panelOpenedUp]: popperPlacement.includes(\"top\"),\n [classes.panelOpenedDown]: popperPlacement.includes(\"bottom\"),\n })}\n >\n {children}\n </div>\n </BaseDropdownContext.Provider>\n {popperPlacement.includes(\"top\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(\n classes.inputExtensionOpen,\n classes.inputExtensionOpenShadow,\n {\n [classes.inputExtensionFloatRight]:\n popperPlacement.includes(\"end\"),\n [classes.inputExtensionFloatLeft]:\n popperPlacement.includes(\"start\"),\n }\n )}\n />\n )}\n </div>\n </ClickAwayListener>\n </div>\n );\n\n if (disablePortal) return container;\n\n return createPortal(\n container,\n document.getElementById(rootId \|\| \"\") \|\| document.body\n );\n })();\n\n return (\n <div className={classes.root}>\n <div\n id={id}\n className={cx(\n classes.anchor,\n { [classes.rootDisabled]: disabled },\n className\n )}\n {...(!readOnly && {\n onKeyDown: handleToggle,\n onClick: handleToggle,\n })}\n {...(ariaRole && {\n role: ariaRole,\n ...headerAriaLabels,\n ...headerControlArias,\n })}\n // Removes the element from the navigation sequence for keyboard focus\n tabIndex={-1}\n {...others}\n >\n {headerComponent}\n </div>\n {isOpen && containerComponent}\n </div>\n );\n};\n"],"names":["HvBaseDropdown","props","id","idProp","className","classes","classesProp","children","role","placeholder","component","adornment","expanded","dropdownHeaderProps","defaultExpanded","disabled","readOnly","required","disablePortal","variableWidth","placement","placementProp","ariaExpandedProp","ariaLabelProp","ariaLabelledByProp","popperProps","dropdownHeaderRef","dropdownHeaderRefProp","onToggle","onClickOutside","onContainerCreation","others","useDefaultProps","cx","useClasses","rootId","useTheme","isOpen","setIsOpen","useControlled","Boolean","referenceElement","setReferenceElement","useState","popperElement","setPopperElement","popperMaxSize","setPopperMaxSize","handleDropdownHeaderRefProp","useForkRef","ref","handleDropdownHeaderRef","ariaRole","undefined","ariaExpanded","useUniqueId","containerId","setId","headerControlArias","headerAriaLabels","extensionWidth","offsetWidth","modifiers","popperPropsModifiers","otherPopperProps","onFirstUpdate","useCallback","widthCalculator","state","styles","popper","width","rects","reference","widthCalculatorEffect","elements","style","applyMaxSizeCalculator","height","modifiersData","maxSize","maxWidth","maxHeight","maxSizeCalculator","name","options","overflow","detectOverflow","x","preventOverflow","y","popperWidth","popperHeight","basePlacement","split","widthProp","heightProp","useMemo","enabled","phase","requires","fn","effect","requiresIfExists","popperStyles","attributes","usePopper","popperPlacement","handleToggle","event","isKey","preventDefault","notControlKey","code","isOneOfKeys","ignoredCombinations","newOpen","focusHeader","focus","preventScroll","headerComponent","React","cloneElement","ExpanderComponent","DropUpXS","DropDownXS","header","headerDisabled","headerReadOnly","headerOpen","headerOpenUp","includes","headerOpenDown","pointerEvents","tabIndex","_jsx","selection","HvTypography","selectionDisabled","variant","arrowContainer","iconSize","color","theme","colors","secondary_60","arrow","containerComponent","handleContainerKeyDown","shiftKey","focusList","getFirstAndLastFocus","document","activeElement","last","first","handleOutside","isButtonClick","contains","target","container","ClickAwayListener","onClickAway","onKeyDown","inputExtensionOpen","inputExtensionLeftPosition","BaseDropdownContext","Provider","value","panel","panelOpenedUp","panelOpenedDown","inputExtensionOpenShadow","inputExtensionFloatRight","inputExtensionFloatLeft","createPortal","getElementById","body","root","anchor","rootDisabled","onClick"],"mappings":"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"}

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

@@ -10,6 +10,7 @@ import { staticClasses } from "./Carousel.styles.js";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvButton } from "../Button/Button.js";
 import { HvContainer } from "../Container/Container.js";
+import { HvTooltip } from "../Tooltip/Tooltip.js";
 import { HvTypography } from "../Typography/Typography.js";
 const clamp = (num, max, min = 0) => Math.min(Math.max(num, min), max);
 const HvCarousel = (props) => {
@@ -107,14 +108,13 @@ const HvCarousel = (props) => {
     }) : css({
       position: "absolute"
     })),
-    children: [actionsProp, showFullscreen && /* @__PURE__ */ jsx(HvButton, {
-      icon: true,
-      onClick: () => setIsFullscreen((curr) => !curr),
-      className: classes.closeButton,
-      children: isFullscreen ? /* @__PURE__ */ jsx(Close, {
-        "aria-label": "Close"
-      }) : /* @__PURE__ */ jsx(Fullscreen, {
-        "aria-label": "Fullscreen"
+    children: [actionsProp, showFullscreen && /* @__PURE__ */ jsx(HvTooltip, {
+      title: isFullscreen ? "Close" : "Fullscreen",
+      children: /* @__PURE__ */ jsx(HvButton, {
+        icon: true,
+        onClick: () => setIsFullscreen((curr) => !curr),
+        className: classes.closeButton,
+        children: isFullscreen ? /* @__PURE__ */ jsx(Close, {}) : /* @__PURE__ */ jsx(Fullscreen, {})
       })
     })]
   });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n Children,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\n\nimport {\n Backwards,\n Forwards,\n Close,\n Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvContainer } from \"@core/components/Container\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n extends HvBaseProps<HTMLDivElement, \"title\" \| \"onChange\"> {\n /** A Jss Object used to override or extend the styles applied. /\n classes?: HvCarouselClasses;\n /* Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio /\n height?: CSSProperties[\"height\"];\n /* Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio /\n thumbnailWidth?: CSSProperties[\"width\"];\n /* Title of the carousel /\n title?: React.ReactNode;\n /* Content slides to be displayed. @see `<HvCarouselSlide />` /\n children?: React.ReactNode;\n /* Custom content to render in the actions area /\n actions?: React.ReactNode;\n /* Whether Carousel is in \"xs mode\" - to use in embedded contexts /\n xs?: boolean;\n /* Whether to show dots instead of arrow pagination. Defaults to true under 5 elements /\n showDots?: boolean;\n /* Whether to show the counter on the top-right corner of the active slide /\n showCounter?: boolean;\n /* Whether to show the back/forwards buttons over the active slide /\n showSlideControls?: boolean;\n /* Whether to enable the fullscreen toggle button /\n showFullscreen?: boolean;\n /* Whether to hide the thumbnails. Hidden by default in \"xs\" mode /\n hideThumbnails?: boolean;\n controlsPosition?: \"top\" \| \"bottom\";\n thumbnailsPosition?: \"top\" \| \"bottom\";\n /* Carousel configuration options. @see https://www.embla-carousel.com/api/options/ /\n carouselOptions?: EmblaOptionsType;\n /* /\n renderThumbnail?: (index: number) => React.ReactNode;\n /* The callback fired when the active slide changes. /\n onChange?: (index: number) => void;\n}\n\n/\n A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n const {\n className,\n classes: classesProp,\n height: heightProp = \"auto\",\n thumbnailWidth = 90,\n title,\n children,\n actions: actionsProp,\n xs,\n showDots: showDotsProp,\n showCounter: showCounterProp,\n showSlideControls,\n showFullscreen: showFullscreenProp,\n hideThumbnails: hideThumbnailsProp,\n controlsPosition: controlsPositionProp,\n thumbnailsPosition: thumbnailsPositionProp,\n carouselOptions,\n renderThumbnail,\n onChange,\n ...others\n } = useDefaultProps(\"HvCarousel\", props);\n const { activeTheme } = useTheme();\n const { classes, css, cx } = useClasses(classesProp);\n const thumbnailsRef = useRef<HTMLDivElement>(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n\n const isDs3 = activeTheme?.name === \"ds3\";\n const actionsPosition = isDs3 ? \"header\" : \"controls\";\n const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n const [containerRef, controller] = useCarousel({\n align: \"start\",\n loop: true,\n ...carouselOptions,\n });\n\n const [selectedIndex, setSelectedIndex] = useState(\n carouselOptions?.startIndex ?? 0\n );\n\n const numSlides = Children.count(children);\n\n const handlePrevious = useCallback(() => {\n controller?.scrollPrev();\n }, [controller]);\n\n const handleNext = useCallback(() => {\n controller?.scrollNext();\n }, [controller]);\n\n const handleScroll = (index: number) => {\n controller?.scrollTo(index);\n };\n\n const handleSelect = useCallback(() => {\n if (!controller) return;\n\n const slideIndex = controller.selectedScrollSnap();\n setSelectedIndex(slideIndex);\n\n // scroll to thumbnail button\n thumbnailsRef.current\n ?.querySelectorAll(\"button\")\n ?.[slideIndex]?.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n });\n\n onChange?.(slideIndex);\n }, [controller, onChange]);\n\n useEffect(() => {\n if (!controller) return;\n\n controller.on(\"select\", handleSelect);\n\n return () => {\n controller.off(\"select\", handleSelect);\n };\n }, [controller, handleSelect]);\n\n useEffect(() => {\n if (!controller) return;\n\n controller.reInit();\n setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n }, [numSlides, controller]);\n\n const canPrev = controller?.canScrollPrev() ?? false;\n const canNext = controller?.canScrollNext() ?? false;\n const showTitle = !!title && (!xs \|\| isFullscreen);\n const showFullscreen = showFullscreenProp ?? xs;\n const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n const showCounter = xs;\n const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n const showThumbnails = !hideThumbnails && !!renderThumbnail;\n const showDots = showDotsProp ?? numSlides <= 5;\n\n const actions = (\n <div\n className={cx(\n classes.actions,\n actionsPosition === \"header\"\n ? css({ position: \"relative\", top: -40, height: 0 })\n : css({ position: \"absolute\" })\n )}\n >\n {actionsProp}\n {showFullscreen && (\n <HvButton\n icon\n onClick={() => setIsFullscreen((curr) => !curr)}\n className={classes.closeButton}\n >\n {isFullscreen ? (\n <Close aria-label=\"Close\" />\n ) : (\n <Fullscreen aria-label=\"Fullscreen\" />\n )}\n </HvButton>\n )}\n </div>\n );\n\n const controls = (\n <HvCarouselControls\n classes={classes}\n showDots={showDots}\n page={selectedIndex}\n pages={numSlides}\n canPrevious={canPrev}\n canNext={canNext}\n onPreviousClick={handlePrevious}\n onNextClick={handleNext}\n actions={actionsPosition === \"controls\" && actions}\n />\n );\n\n const thumbnails = showThumbnails && (\n <HvCarouselThumbnails\n classes={classes}\n ref={thumbnailsRef}\n page={selectedIndex}\n pages={numSlides}\n width={thumbnailWidth}\n onThumbnailClick={(evt, i) => handleScroll(i)}\n renderThumbnail={renderThumbnail}\n />\n );\n\n return (\n <HvContainer\n className={cx(classes.root, className, {\n [classes.xs]: xs,\n [classes.fullscreen]: isFullscreen,\n })}\n {...others}\n >\n {showTitle && (\n <HvTypography variant=\"title2\" className={classes.title}>\n {title}\n </HvTypography>\n )}\n\n {actionsPosition === \"header\" && actions}\n {thumbnailsPosition === \"top\" && thumbnails}\n {controlsPosition === \"top\" && controls}\n <div\n className={cx(classes.main, {\n [classes.mainXs]: xs,\n [classes.mainFullscreen]: isFullscreen,\n })}\n >\n {showCounter && (\n <div className={classes.counterContainer}>\n <span className={classes.counter}>\n {`${selectedIndex + 1}/${numSlides}`}\n </span>\n </div>\n )}\n\n {showSlideControls && (\n <div className={classes.slideControls}>\n <HvButton\n icon\n disabled={!canPrev}\n variant=\"secondary\"\n aria-label=\"Backwards\"\n onClick={handlePrevious}\n >\n <Backwards iconSize=\"XS\" />\n </HvButton>\n <HvButton\n icon\n disabled={!canNext}\n variant=\"secondary\"\n aria-label=\"Forwards\"\n onClick={handleNext}\n >\n <Forwards iconSize=\"XS\" />\n </HvButton>\n </div>\n )}\n\n <div\n ref={containerRef}\n style={{ height }}\n className={classes.slidesViewport}\n >\n <div className={classes.slidesContainer}>{children}</div>\n </div>\n </div>\n {controlsPosition === \"bottom\" && controls}\n {thumbnailsPosition === \"bottom\" && thumbnails}\n </HvContainer>\n );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","actionsProp","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","controlsPosition","controlsPositionProp","thumbnailsPosition","thumbnailsPositionProp","carouselOptions","renderThumbnail","onChange","others","useDefaultProps","activeTheme","useTheme","css","cx","useClasses","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","isDs3","name","actionsPosition","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","useCallback","scrollPrev","handleNext","scrollNext","handleScroll","index","scrollTo","handleSelect","slideIndex","selectedScrollSnap","current","querySelectorAll","scrollIntoView","behavior","block","useEffect","on","off","reInit","currentIndex","canPrev","canScrollPrev","canNext","canScrollNext","showTitle","showThumbnails","position","top","HvButton","icon","onClick","curr","closeButton","_jsx","Close","Fullscreen","controls","HvCarouselControls","page","pages","canPrevious","onPreviousClick","onNextClick","thumbnails","HvCarouselThumbnails","ref","width","onThumbnailClick","evt","i","HvContainer","root","fullscreen","HvTypography","variant","_jsxs","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","disabled","Backwards","iconSize","Forwards","style","slidesViewport","slidesContainer"],"mappings":"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"}
1	+ {"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n Children,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\n\nimport {\n Backwards,\n Forwards,\n Close,\n Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvContainer } from \"@core/components/Container\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n extends HvBaseProps<HTMLDivElement, \"title\" \| \"onChange\"> {\n /** A Jss Object used to override or extend the styles applied. /\n classes?: HvCarouselClasses;\n /* Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio /\n height?: CSSProperties[\"height\"];\n /* Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio /\n thumbnailWidth?: CSSProperties[\"width\"];\n /* Title of the carousel /\n title?: React.ReactNode;\n /* Content slides to be displayed. @see `<HvCarouselSlide />` /\n children?: React.ReactNode;\n /* Custom content to render in the actions area /\n actions?: React.ReactNode;\n /* Whether Carousel is in \"xs mode\" - to use in embedded contexts /\n xs?: boolean;\n /* Whether to show dots instead of arrow pagination. Defaults to true under 5 elements /\n showDots?: boolean;\n /* Whether to show the counter on the top-right corner of the active slide /\n showCounter?: boolean;\n /* Whether to show the back/forwards buttons over the active slide /\n showSlideControls?: boolean;\n /* Whether to enable the fullscreen toggle button /\n showFullscreen?: boolean;\n /* Whether to hide the thumbnails. Hidden by default in \"xs\" mode /\n hideThumbnails?: boolean;\n controlsPosition?: \"top\" \| \"bottom\";\n thumbnailsPosition?: \"top\" \| \"bottom\";\n /* Carousel configuration options. @see https://www.embla-carousel.com/api/options/ /\n carouselOptions?: EmblaOptionsType;\n /* /\n renderThumbnail?: (index: number) => React.ReactNode;\n /* The callback fired when the active slide changes. /\n onChange?: (index: number) => void;\n}\n\n/\n A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n const {\n className,\n classes: classesProp,\n height: heightProp = \"auto\",\n thumbnailWidth = 90,\n title,\n children,\n actions: actionsProp,\n xs,\n showDots: showDotsProp,\n showCounter: showCounterProp,\n showSlideControls,\n showFullscreen: showFullscreenProp,\n hideThumbnails: hideThumbnailsProp,\n controlsPosition: controlsPositionProp,\n thumbnailsPosition: thumbnailsPositionProp,\n carouselOptions,\n renderThumbnail,\n onChange,\n ...others\n } = useDefaultProps(\"HvCarousel\", props);\n const { activeTheme } = useTheme();\n const { classes, css, cx } = useClasses(classesProp);\n const thumbnailsRef = useRef<HTMLDivElement>(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n\n const isDs3 = activeTheme?.name === \"ds3\";\n const actionsPosition = isDs3 ? \"header\" : \"controls\";\n const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n const [containerRef, controller] = useCarousel({\n align: \"start\",\n loop: true,\n ...carouselOptions,\n });\n\n const [selectedIndex, setSelectedIndex] = useState(\n carouselOptions?.startIndex ?? 0\n );\n\n const numSlides = Children.count(children);\n\n const handlePrevious = useCallback(() => {\n controller?.scrollPrev();\n }, [controller]);\n\n const handleNext = useCallback(() => {\n controller?.scrollNext();\n }, [controller]);\n\n const handleScroll = (index: number) => {\n controller?.scrollTo(index);\n };\n\n const handleSelect = useCallback(() => {\n if (!controller) return;\n\n const slideIndex = controller.selectedScrollSnap();\n setSelectedIndex(slideIndex);\n\n // scroll to thumbnail button\n thumbnailsRef.current\n ?.querySelectorAll(\"button\")\n ?.[slideIndex]?.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n });\n\n onChange?.(slideIndex);\n }, [controller, onChange]);\n\n useEffect(() => {\n if (!controller) return;\n\n controller.on(\"select\", handleSelect);\n\n return () => {\n controller.off(\"select\", handleSelect);\n };\n }, [controller, handleSelect]);\n\n useEffect(() => {\n if (!controller) return;\n\n controller.reInit();\n setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n }, [numSlides, controller]);\n\n const canPrev = controller?.canScrollPrev() ?? false;\n const canNext = controller?.canScrollNext() ?? false;\n const showTitle = !!title && (!xs \|\| isFullscreen);\n const showFullscreen = showFullscreenProp ?? xs;\n const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n const showCounter = xs;\n const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n const showThumbnails = !hideThumbnails && !!renderThumbnail;\n const showDots = showDotsProp ?? numSlides <= 5;\n\n const actions = (\n <div\n className={cx(\n classes.actions,\n actionsPosition === \"header\"\n ? css({ position: \"relative\", top: -40, height: 0 })\n : css({ position: \"absolute\" })\n )}\n >\n {actionsProp}\n {showFullscreen && (\n <HvTooltip title={isFullscreen ? \"Close\" : \"Fullscreen\"}>\n <HvButton\n icon\n onClick={() => setIsFullscreen((curr) => !curr)}\n className={classes.closeButton}\n >\n {isFullscreen ? <Close /> : <Fullscreen />}\n </HvButton>\n </HvTooltip>\n )}\n </div>\n );\n\n const controls = (\n <HvCarouselControls\n classes={classes}\n showDots={showDots}\n page={selectedIndex}\n pages={numSlides}\n canPrevious={canPrev}\n canNext={canNext}\n onPreviousClick={handlePrevious}\n onNextClick={handleNext}\n actions={actionsPosition === \"controls\" && actions}\n />\n );\n\n const thumbnails = showThumbnails && (\n <HvCarouselThumbnails\n classes={classes}\n ref={thumbnailsRef}\n page={selectedIndex}\n pages={numSlides}\n width={thumbnailWidth}\n onThumbnailClick={(evt, i) => handleScroll(i)}\n renderThumbnail={renderThumbnail}\n />\n );\n\n return (\n <HvContainer\n className={cx(classes.root, className, {\n [classes.xs]: xs,\n [classes.fullscreen]: isFullscreen,\n })}\n {...others}\n >\n {showTitle && (\n <HvTypography variant=\"title2\" className={classes.title}>\n {title}\n </HvTypography>\n )}\n\n {actionsPosition === \"header\" && actions}\n {thumbnailsPosition === \"top\" && thumbnails}\n {controlsPosition === \"top\" && controls}\n <div\n className={cx(classes.main, {\n [classes.mainXs]: xs,\n [classes.mainFullscreen]: isFullscreen,\n })}\n >\n {showCounter && (\n <div className={classes.counterContainer}>\n <span className={classes.counter}>\n {`${selectedIndex + 1}/${numSlides}`}\n </span>\n </div>\n )}\n\n {showSlideControls && (\n <div className={classes.slideControls}>\n <HvButton\n icon\n disabled={!canPrev}\n variant=\"secondary\"\n aria-label=\"Backwards\"\n onClick={handlePrevious}\n >\n <Backwards iconSize=\"XS\" />\n </HvButton>\n <HvButton\n icon\n disabled={!canNext}\n variant=\"secondary\"\n aria-label=\"Forwards\"\n onClick={handleNext}\n >\n <Forwards iconSize=\"XS\" />\n </HvButton>\n </div>\n )}\n\n <div\n ref={containerRef}\n style={{ height }}\n className={classes.slidesViewport}\n >\n <div className={classes.slidesContainer}>{children}</div>\n </div>\n </div>\n {controlsPosition === \"bottom\" && controls}\n {thumbnailsPosition === \"bottom\" && thumbnails}\n </HvContainer>\n );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","actionsProp","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","controlsPosition","controlsPositionProp","thumbnailsPosition","thumbnailsPositionProp","carouselOptions","renderThumbnail","onChange","others","useDefaultProps","activeTheme","useTheme","css","cx","useClasses","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","isDs3","name","actionsPosition","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","useCallback","scrollPrev","handleNext","scrollNext","handleScroll","index","scrollTo","handleSelect","slideIndex","selectedScrollSnap","current","querySelectorAll","scrollIntoView","behavior","block","useEffect","on","off","reInit","currentIndex","canPrev","canScrollPrev","canNext","canScrollNext","showTitle","showThumbnails","position","top","HvTooltip","HvButton","icon","onClick","curr","closeButton","_jsx","Close","Fullscreen","controls","HvCarouselControls","page","pages","canPrevious","onPreviousClick","onNextClick","thumbnails","HvCarouselThumbnails","ref","width","onThumbnailClick","evt","i","HvContainer","root","fullscreen","HvTypography","variant","_jsxs","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","disabled","Backwards","iconSize","Forwards","style","slidesViewport","slidesContainer"],"mappings":";;;;;;;;;;;;;;AA+BA,MAAMA,QAAQA,CAACC,KAAaC,KAAaC,MAAM,MAC7CC,KAAKD,IAAIC,KAAKF,IAAID,KAAKE,GAAG,GAAGD,GAAG;AA8CrBG,MAAAA,aAAaA,CAACC,UAA2B;AAC9C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC,QAAQC,aAAa;AAAA,IACrBC,iBAAiB;AAAA,IACjBC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,UAAUC;AAAAA,IACVC,aAAaC;AAAAA,IACbC;AAAAA,IACAC,gBAAgBC;AAAAA,IAChBC,gBAAgBC;AAAAA,IAChBC,kBAAkBC;AAAAA,IAClBC,oBAAoBC;AAAAA,IACpBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,cAAc7B,KAAK;AACjC,QAAA;AAAA,IAAE8B;AAAAA,MAAgBC,SAAS;AAC3B,QAAA;AAAA,IAAE7B;AAAAA,IAAS8B;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAW/B,WAAW;AAC7CgC,QAAAA,gBAAgBC,OAAuB,IAAI;AACjD,QAAM,CAACC,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,SAAQV,2CAAaW,UAAS;AAC9BC,QAAAA,kBAAkBF,QAAQ,WAAW;AACrCnB,QAAAA,mBAAmBC,yBAAyBkB,QAAQ,WAAW;AACrE,QAAMjB,qBAAqBC,0BAA0B;AAErD,QAAM,CAACmB,cAAcC,UAAU,IAAIC,YAAY;AAAA,IAC7CC,OAAO;AAAA,IACPC,MAAM;AAAA,IACN,GAAGtB;AAAAA,EAAAA,CACJ;AAED,QAAM,CAACuB,eAAeC,gBAAgB,IAAIV,UACxCd,mDAAiByB,eAAc,CACjC;AAEMC,QAAAA,YAAYC,SAASC,MAAM7C,QAAQ;AAEnC8C,QAAAA,iBAAiBC,YAAY,MAAM;AACvCX,6CAAYY;AAAAA,EAAW,GACtB,CAACZ,UAAU,CAAC;AAETa,QAAAA,aAAaF,YAAY,MAAM;AACnCX,6CAAYc;AAAAA,EAAW,GACtB,CAACd,UAAU,CAAC;AAETe,QAAAA,eAAeA,CAACC,UAAkB;AACtChB,6CAAYiB,SAASD;AAAAA,EAAK;AAGtBE,QAAAA,eAAeP,YAAY,MAAM;;AACrC,QAAI,CAACX;AAAY;AAEXmB,UAAAA,aAAanB,WAAWoB;AAC9Bf,qBAAiBc,UAAU;AAG3B5B,oCAAc8B,YAAd9B,mBACI+B,iBAAiB,cADrB/B,mBAEK4B,gBAFL5B,mBAEkBgC,eAAe;AAAA,MAC7BC,UAAU;AAAA,MACVC,OAAO;AAAA,IAAA;AAGX1C,yCAAWoC;AAAAA,EAAU,GACpB,CAACnB,YAAYjB,QAAQ,CAAC;AAEzB2C,YAAU,MAAM;AACd,QAAI,CAAC1B;AAAY;AAEN2B,eAAAA,GAAG,UAAUT,YAAY;AAEpC,WAAO,MAAM;AACAU,iBAAAA,IAAI,UAAUV,YAAY;AAAA,IAAA;AAAA,EACvC,GACC,CAAClB,YAAYkB,YAAY,CAAC;AAE7BQ,YAAU,MAAM;AACd,QAAI,CAAC1B;AAAY;AAEjBA,eAAW6B,OAAO;AAClBxB,qBAAkByB,CAAiBhF,iBAAAA,MAAMgF,cAAcvB,WAAW,CAAC,CAAC;AAAA,EAAA,GACnE,CAACA,WAAWP,UAAU,CAAC;AAEpB+B,QAAAA,WAAU/B,yCAAYgC,oBAAmB;AACzCC,QAAAA,WAAUjC,yCAAYkC,oBAAmB;AAC/C,QAAMC,YAAY,CAAC,CAACxE,UAAU,CAACI,MAAM0B;AACrC,QAAMpB,iBAAiBC,sBAAsBP;AACvCP,QAAAA,SAASiC,eAAe,SAAShC,cAAc;AACrD,QAAMS,cAAcH;AACdQ,QAAAA,iBAAiBC,uBAAuBT,MAAM,CAAC0B;AACrD,QAAM2C,iBAAiB,CAAC7D,kBAAkB,CAAC,CAACO;AACtCd,QAAAA,WAAWC,gBAAgBsC,aAAa;AAExC1C,QAAAA,+BACJ,OAAA;AAAA,IACER,WAAWgC,GACT/B,QAAQO,SACRiC,oBAAoB,WAChBV,IAAI;AAAA,MAAEiD,UAAU;AAAA,MAAYC,KAAK;AAAA,MAAK9E,QAAQ;AAAA,IAAG,CAAA,IACjD4B,IAAI;AAAA,MAAEiD,UAAU;AAAA,IAAA,CAAY,CAClC;AAAA,IAAEzE,WAEDE,aACAO,sCACEkE,WAAS;AAAA,MAAC5E,OAAO8B,eAAe,UAAU;AAAA,MAAa7B,8BACrD4E,UAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,SAASA,MAAMhD,gBAAiBiD,CAAAA,SAAS,CAACA,IAAI;AAAA,QAC9CtF,WAAWC,QAAQsF;AAAAA,QAAYhF,UAE9B6B,eAAeoD,oBAACC,OAAO,CAAA,CAAA,IAAID,oBAACE,YAAY,EAAA;AAAA,MAAA,CACjC;AAAA,IAAA,CACD,CACZ;AAAA,EAAA,CACE;AAGDC,QAAAA,+BACHC,oBAAkB;AAAA,IACjB3F;AAAAA,IACAU;AAAAA,IACAkF,MAAM9C;AAAAA,IACN+C,OAAO5C;AAAAA,IACP6C,aAAarB;AAAAA,IACbE;AAAAA,IACAoB,iBAAiB3C;AAAAA,IACjB4C,aAAazC;AAAAA,IACbhD,SAASiC,oBAAoB,cAAcjC;AAAAA,EAAAA,CAC5C;AAGG0F,QAAAA,aAAanB,kBACjBS,oBAACW,sBAAoB;AAAA,IACnBlG;AAAAA,IACAmG,KAAKlE;AAAAA,IACL2D,MAAM9C;AAAAA,IACN+C,OAAO5C;AAAAA,IACPmD,OAAOhG;AAAAA,IACPiG,kBAAkBA,CAACC,KAAKC,MAAM9C,aAAa8C,CAAC;AAAA,IAC5C/E;AAAAA,EAAAA,CACD;AAGH,8BACGgF,aAAW;AAAA,IACVzG,WAAWgC,GAAG/B,QAAQyG,MAAM1G,WAAW;AAAA,MACrC,CAACC,QAAQS,EAAE,GAAGA;AAAAA,MACd,CAACT,QAAQ0G,UAAU,GAAGvE;AAAAA,IAAAA,CACvB;AAAA,IAAE,GACCT;AAAAA,IAAMpB,UAETuE,CAAAA,aACCU,oBAACoB,cAAY;AAAA,MAACC,SAAQ;AAAA,MAAS7G,WAAWC,QAAQK;AAAAA,MAAMC,UACrDD;AAAAA,IACW,CAAA,GAGfmC,oBAAoB,YAAYjC,SAChCc,uBAAuB,SAAS4E,YAChC9E,qBAAqB,SAASuE,UAC/BmB,qBAAA,OAAA;AAAA,MACE9G,WAAWgC,GAAG/B,QAAQ8G,MAAM;AAAA,QAC1B,CAAC9G,QAAQ+G,MAAM,GAAGtG;AAAAA,QAClB,CAACT,QAAQgH,cAAc,GAAG7E;AAAAA,MAAAA,CAC3B;AAAA,MAAE7B,UAAA,CAEFM,eACC2E,oBAAA,OAAA;AAAA,QAAKxF,WAAWC,QAAQiH;AAAAA,QAAiB3G,8BACvC,QAAA;AAAA,UAAMP,WAAWC,QAAQkH;AAAAA,UAAQ5G,UAC7B,GAAEwC,gBAAgB,KAAKG;AAAAA,QAAAA,CACrB;AAAA,MAAA,CACH,GAGNnC,qBACC+F,qBAAA,OAAA;AAAA,QAAK9G,WAAWC,QAAQmH;AAAAA,QAAc7G,UAAA,CACpCiF,oBAACL,UAAQ;AAAA,UACPC,MAAI;AAAA,UACJiC,UAAU,CAAC3C;AAAAA,UACXmC,SAAQ;AAAA,UACR,cAAW;AAAA,UACXxB,SAAShC;AAAAA,UAAe9C,8BAEvB+G,WAAS;AAAA,YAACC,UAAS;AAAA,UAAA,CAAM;AAAA,QAAA,CAClB,GACV/B,oBAACL,UAAQ;AAAA,UACPC,MAAI;AAAA,UACJiC,UAAU,CAACzC;AAAAA,UACXiC,SAAQ;AAAA,UACR,cAAW;AAAA,UACXxB,SAAS7B;AAAAA,UAAWjD,8BAEnBiH,UAAQ;AAAA,YAACD,UAAS;AAAA,UAAA,CAAM;AAAA,QAAA,CACjB,CAAC;AAAA,MAAA,CACR,GAGP/B,oBAAA,OAAA;AAAA,QACEY,KAAK1D;AAAAA,QACL+E,OAAO;AAAA,UAAEtH;AAAAA,QAAO;AAAA,QAChBH,WAAWC,QAAQyH;AAAAA,QAAenH,8BAElC,OAAA;AAAA,UAAKP,WAAWC,QAAQ0H;AAAAA,UAAgBpH;AAAAA,QAAAA,CAAgB;AAAA,MAAA,CACrD,CAAC;AAAA,IAAA,CACH,GACJa,qBAAqB,YAAYuE,UACjCrE,uBAAuB,YAAY4E,UAAU;AAAA,EAAA,CACnC;AAEjB;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Container.js","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiContainer, {\n ContainerProps as MuiContainerProps,\n} from \"@mui/material/Container\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Container.styles\";\n\nexport { staticClasses as containerClasses };\n\nexport type HvContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvContainerProps\n extends Omit<MuiContainerProps, \"classes\">,\n HvBaseProps {\n /*\n The component used for the root node.\n * Either a string to use a DOM element or a component.\n /\n component?: React.ElementType;\n /\n Determine the max-width of the container.\n * The container width grows with the size of the screen.\n * Set to `false` to disable `maxWidth`.\n /\n maxWidth?: \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| false;\n /* If `true`, the left and right padding is removed. /\n disableGutters?: boolean;\n /\n Set the max-width to match the min-width of the current breakpoint.\n * This is useful if you'd prefer to design for a fixed set of sizes\n * instead of trying to accommodate a fully fluid viewport.\n * It's fluid by default.\n /\n fixed?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvContainerClasses;\n}\n\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n (props, ref) => {\n const {\n maxWidth = false,\n classes: classesProp,\n className,\n fixed,\n disableGutters,\n ...others\n } = useDefaultProps(\"HvContainer\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const muiTheme = useTheme();\n\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const gutters = upMd\n ? {\n // Increases specificity\n [`&.${staticClasses.root}`]: {\n paddingLeft: theme.spacing(4),\n paddingRight: theme.spacing(4),\n },\n }\n : {\n // Increases specificity\n [`&.${staticClasses.root}`]: {\n paddingLeft: theme.space.sm,\n paddingRight: theme.space.sm,\n },\n };\n\n return (\n <MuiContainer\n className={cx({ [css(gutters)]: !disableGutters }, className)}\n classes={{\n root: classes.root,\n disableGutters: classes.disableGutters,\n fixed: classes.fixed,\n maxWidthXs: classes.maxWidthXs,\n maxWidthSm: classes.maxWidthSm,\n maxWidthMd: classes.maxWidthMd,\n maxWidthLg: classes.maxWidthLg,\n maxWidthXl: classes.maxWidthXl,\n }}\n ref={ref}\n maxWidth={maxWidth}\n fixed={fixed}\n disableGutters={disableGutters}\n {...others}\n />\n );\n }\n);\n"],"names":["HvContainer","forwardRef","props","ref","maxWidth","classes","classesProp","className","fixed","disableGutters","others","useDefaultProps","cx","css","useClasses","muiTheme","useTheme","upMd","useMediaQuery","breakpoints","up","gutters","staticClasses","root","paddingLeft","theme","spacing","paddingRight","space","sm","MuiContainer","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"],"mappings":";;;;;;;;~~AA+CO~~,MAAMA,cAAcC,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,WAAW;AAAA,IACXC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,eAAeT,KAAK;AAElC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWR,WAAW;AAEnD,QAAMS,WAAWC;AAEjB,QAAMC,OAAOC,cAAcH,SAASI,YAAYC,GAAG,IAAI,CAAC;AAExD,QAAMC,UAAUJ,OACZ;AAAA;AAAA,IAEE,CAAE,KAAIK,cAAcC,MAAM,GAAG;AAAA,MAC3BC,aAAaC,MAAMC,QAAQ,CAAC;AAAA,MAC5BC,cAAcF,MAAMC,QAAQ,CAAC;AAAA,IAC/B;AAAA,EAAA,IAEF;AAAA;AAAA,IAEE,CAAE,KAAIJ,cAAcC,MAAM,GAAG;AAAA,MAC3BC,aAAaC,MAAMG,MAAMC;AAAAA,MACzBF,cAAcF,MAAMG,MAAMC;AAAAA,IAC5B;AAAA,EAAA;AAGN,6BACGC,cAAY;AAAA,IACXvB,WAAWK,GAAG;AAAA,MAAE,CAACC,IAAIQ,OAAO,CAAC,GAAG,CAACZ;AAAAA,OAAkBF,SAAS;AAAA,IAC5DF,SAAS;AAAA,MACPkB,MAAMlB,QAAQkB;AAAAA,MACdd,gBAAgBJ,QAAQI;AAAAA,MACxBD,OAAOH,QAAQG;AAAAA,MACfuB,YAAY1B,QAAQ0B;AAAAA,MACpBC,YAAY3B,QAAQ2B;AAAAA,MACpBC,YAAY5B,QAAQ4B;AAAAA,MACpBC,YAAY7B,QAAQ6B;AAAAA,MACpBC,YAAY9B,QAAQ8B;AAAAA,IACtB;AAAA,IACAhC;AAAAA,IACAC;AAAAA,IACAI;AAAAA,IACAC;AAAAA,IAA+B,GAC3BC;AAAAA,EAAAA,CACL;AAEL,CACF;"}
1	+ {"version":3,"file":"Container.js","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiContainer, {\n ContainerProps as MuiContainerProps,\n} from \"@mui/material/Container\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Container.styles\";\n\nexport { staticClasses as containerClasses };\n\nexport type HvContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvContainerProps\n extends Omit<MuiContainerProps, \"classes\">,\n HvBaseProps {\n /*\n The component used for the root node.\n * Either a string to use a DOM element or a component.\n /\n component?: React.ElementType;\n /\n Determine the max-width of the container.\n * The container width grows with the size of the screen.\n * Set to `false` to disable `maxWidth`.\n /\n maxWidth?: \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| false;\n /* If `true`, the left and right padding is removed. /\n disableGutters?: boolean;\n /\n Set the max-width to match the min-width of the current breakpoint.\n * This is useful if you'd prefer to design for a fixed set of sizes\n * instead of trying to accommodate a fully fluid viewport.\n * It's fluid by default.\n /\n fixed?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvContainerClasses;\n}\n\n/* The container enables you to center your content horizontally and bound it to a specific breakpoint. */\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n (props, ref) => {\n const {\n maxWidth = false,\n classes: classesProp,\n className,\n fixed,\n disableGutters,\n ...others\n } = useDefaultProps(\"HvContainer\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const muiTheme = useTheme();\n\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const gutters = upMd\n ? {\n // Increases specificity\n [`&.${staticClasses.root}`]: {\n paddingLeft: theme.spacing(4),\n paddingRight: theme.spacing(4),\n },\n }\n : {\n // Increases specificity\n [`&.${staticClasses.root}`]: {\n paddingLeft: theme.space.sm,\n paddingRight: theme.space.sm,\n },\n };\n\n return (\n <MuiContainer\n className={cx({ [css(gutters)]: !disableGutters }, className)}\n classes={{\n root: classes.root,\n disableGutters: classes.disableGutters,\n fixed: classes.fixed,\n maxWidthXs: classes.maxWidthXs,\n maxWidthSm: classes.maxWidthSm,\n maxWidthMd: classes.maxWidthMd,\n maxWidthLg: classes.maxWidthLg,\n maxWidthXl: classes.maxWidthXl,\n }}\n ref={ref}\n maxWidth={maxWidth}\n fixed={fixed}\n disableGutters={disableGutters}\n {...others}\n />\n );\n }\n);\n"],"names":["HvContainer","forwardRef","props","ref","maxWidth","classes","classesProp","className","fixed","disableGutters","others","useDefaultProps","cx","css","useClasses","muiTheme","useTheme","upMd","useMediaQuery","breakpoints","up","gutters","staticClasses","root","paddingLeft","theme","spacing","paddingRight","space","sm","MuiContainer","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"],"mappings":";;;;;;;;AAgDO,MAAMA,cAAcC,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,WAAW;AAAA,IACXC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,eAAeT,KAAK;AAElC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWR,WAAW;AAEnD,QAAMS,WAAWC;AAEjB,QAAMC,OAAOC,cAAcH,SAASI,YAAYC,GAAG,IAAI,CAAC;AAExD,QAAMC,UAAUJ,OACZ;AAAA;AAAA,IAEE,CAAE,KAAIK,cAAcC,MAAM,GAAG;AAAA,MAC3BC,aAAaC,MAAMC,QAAQ,CAAC;AAAA,MAC5BC,cAAcF,MAAMC,QAAQ,CAAC;AAAA,IAC/B;AAAA,EAAA,IAEF;AAAA;AAAA,IAEE,CAAE,KAAIJ,cAAcC,MAAM,GAAG;AAAA,MAC3BC,aAAaC,MAAMG,MAAMC;AAAAA,MACzBF,cAAcF,MAAMG,MAAMC;AAAAA,IAC5B;AAAA,EAAA;AAGN,6BACGC,cAAY;AAAA,IACXvB,WAAWK,GAAG;AAAA,MAAE,CAACC,IAAIQ,OAAO,CAAC,GAAG,CAACZ;AAAAA,OAAkBF,SAAS;AAAA,IAC5DF,SAAS;AAAA,MACPkB,MAAMlB,QAAQkB;AAAAA,MACdd,gBAAgBJ,QAAQI;AAAAA,MACxBD,OAAOH,QAAQG;AAAAA,MACfuB,YAAY1B,QAAQ0B;AAAAA,MACpBC,YAAY3B,QAAQ2B;AAAAA,MACpBC,YAAY5B,QAAQ4B;AAAAA,MACpBC,YAAY7B,QAAQ6B;AAAAA,MACpBC,YAAY9B,QAAQ8B;AAAAA,IACtB;AAAA,IACAhC;AAAAA,IACAC;AAAAA,IACAI;AAAAA,IACAC;AAAAA,IAA+B,GAC3BC;AAAAA,EAAAA,CACL;AAEL,CACF;"}

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

@@ -258,6 +258,7 @@ const HvDropdown = (props) => {
         notifyChangesOnFirstRender,
         hasTooltips,
         singleSelectionToggle,
+        "aria-label": ariaLabel,
         "aria-labelledby": hasLabel ? setId(elementId, "label") : void 0,
         height,
         maxHeight,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { PopperProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n HvBaseDropdown,\n HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n isInvalid,\n HvInfoMessage,\n HvWarningText,\n HvFormElement,\n HvLabel,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /*\n Class names to be applied.\n /\n className?: string;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvDropdownClasses;\n /\n Id to be applied to the form element root node.\n /\n id?: string;\n /\n The form element name.\n /\n name?: string;\n /\n The label of the form element.\n \n The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n /\n label?: any;\n /\n @ignore\n /\n \"aria-label\"?: string;\n /\n @ignore\n /\n \"aria-labelledby\"?: string;\n /\n Provide additional descriptive text for the form element.\n /\n description?: any;\n /\n @ignore\n /\n \"aria-describedby\"?: string;\n /\n The placeholder value when nothing is selected.\n /\n placeholder?: string;\n\n /\n Indicates that the form element is disabled.\n /\n disabled?: boolean;\n /\n Indicates that the form element is in read only mode.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n The status of the form element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n \n When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n /\n status?: HvDropdownStatus;\n /\n The error message to show when the validation status is \"invalid\".\n \n Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n /\n statusMessage?: any;\n /\n Identifies the element that provides an error message for the dropdown.\n \n Will only be used when the validation status is invalid.\n /\n \"aria-errormessage\"?: string;\n\n /\n The callback fired when the value changes.\n /\n onChange?: (selected: HvListValue \| HvListValue[] \| undefined) => void;\n\n /\n The list to be rendered by the dropdown.\n /\n values?: HvListValue[];\n /\n If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n /\n multiSelect?: boolean;\n /\n If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n /\n showSearch?: boolean;\n /\n If `true` the dropdown starts opened if `false` it starts closed.\n /\n expanded?: boolean;\n /\n When uncontrolled, defines the initial expanded state.\n /\n defaultExpanded?: boolean;\n /\n If 'true' the dropdown will notify on the first render.\n /\n notifyChangesOnFirstRender?: boolean;\n /\n An object containing all the labels for the dropdown.\n /\n labels?: HvDropdownLabelsProps;\n /\n If `true` the dropdown will show tooltips when user mouseenter text in list\n /\n hasTooltips?: boolean;\n /\n Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n /\n disablePortal?: boolean;\n /\n If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n /\n variableWidth?: boolean;\n /\n If `true`, selection can be toggled when single selection.\n /\n singleSelectionToggle?: boolean;\n /\n Placement of the dropdown.\n /\n placement?: \"left\" \| \"right\";\n /\n An object containing props to be wired to the popper component.\n /\n popperProps?: Partial<PopperProps>;\n\n /\n Callback called when the user cancels the changes.\n \n Called when the cancel button is used and when the user clicks outside the open container.\n \n @param {object} event The event source of the callback.\n /\n onCancel?: (event: Event) => void;\n /\n Callback called when dropdown changes the expanded state.\n \n @param {object} event The event source of the callback.\n * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n /\n onToggle?: (event: Event, open: boolean) => void;\n /\n Callback called when the user clicks outside the open container.\n \n @param {object} event The event source of the callback.\n /\n onClickOutside?: (event: Event) => void;\n /\n @ignore\n /\n onFocus?: React.FocusEventHandler<any>;\n /\n @ignore\n /\n onBlur?: React.FocusEventHandler<any>;\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. 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 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 Extra props passed to the dropdown.\n /\n baseDropdownProps?: HvBaseDropdownProps;\n /\n Extra props passed to the list.\n /\n listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n select: undefined,\n selectAll: \"All\",\n cancelLabel: \"Cancel\",\n applyLabel: \"Apply\",\n searchPlaceholder: \"Search\",\n multiSelectionConjunction: \"/\",\n};\n\n/\n A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n /\nexport const HvDropdown = (props: HvDropdownProps) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n\n required = false,\n disabled = false,\n readOnly = false,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n\n placeholder = \"Select...\",\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n onCancel,\n onToggle,\n onClickOutside,\n\n onFocus,\n onBlur,\n\n values,\n multiSelect = false,\n showSearch = false,\n expanded,\n defaultExpanded = false,\n notifyChangesOnFirstRender = false,\n labels: labelsProp,\n hasTooltips = false,\n disablePortal = false,\n singleSelectionToggle = true,\n placement,\n variableWidth = false,\n popperProps = {},\n height,\n maxHeight,\n virtualized = false,\n baseDropdownProps = {},\n listProps = {},\n ...others\n } = useDefaultProps(\"HvDropdown\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const elementId = useUniqueId(id, \"hvdropdown\");\n\n const [validationState, setValidationState] = useControlled(\n status,\n \"standBy\"\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const [selectionLabel, setSelectionLabel] = useState(\n getSelectionLabel(labels, placeholder, multiSelect, values)\n );\n const [internalValues, setInternalValues] = useState(values);\n\n useEffect(() => {\n setInternalValues(values);\n }, [values]);\n\n useEffect(() => {\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, values)\n );\n }, [labels, multiSelect, placeholder, values]);\n\n if (virtualized && !height && process.env.NODE_ENV !== \"production\") {\n // eslint-disable-next-line no-console\n console.error(\n \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n );\n }\n\n const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n onToggle?.(event, open);\n\n setIsOpen(open);\n\n if (!open) {\n // also run built-in validation when closing without changes\n // as the user \"touched\" the input\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required) {\n const hasSelection = getSelected(internalValues).length > 0;\n\n if (!hasSelection) {\n return \"invalid\";\n }\n }\n\n return \"valid\";\n });\n }\n };\n\n /* Applies the selected values to the state /\n const handleSelection: HvDropdownListProps[\"onChange\"] = (\n listValues,\n commitChanges,\n toggle,\n notifyChanges = true\n ) => {\n const selected = getSelected(listValues);\n\n if (commitChanges) {\n setInternalValues(listValues);\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, listValues)\n );\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && selected.length === 0) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n }\n if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n if (toggle) {\n handleToggle(undefined as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n }\n };\n\n /\n Handles the `Cancel` action. Both single and ranged modes are handled here.\n */\n const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n onCancel?.(evt as any);\n\n handleToggle(evt as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n };\n\n const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n onClickOutside?.(evt);\n onCancel?.(evt);\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef\n ) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n return;\n }\n const listItems =\n containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n listItems.every((listItem) => {\n if (listItem.tabIndex >= 0) {\n listItem.focus();\n return false;\n }\n return true;\n });\n };\n\n const buildHeaderLabel = () => {\n const hasSelection = getSelected(internalValues).length > 0;\n return labels?.select \|\| !multiSelect ? (\n <HvTypography\n component=\"div\"\n variant=\"body\"\n className={cx(\n classes.placeholder,\n {\n [classes.selectionDisabled]: disabled,\n },\n !(isOpen \|\| hasSelection) &&\n css({ color: theme.dropdown.placeholderColor })\n )}\n >\n {selectionLabel.selected}\n </HvTypography>\n ) : (\n <HvTypography\n component=\"div\"\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n <b>{selectionLabel.selected}</b>\n {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n </HvTypography>\n );\n };\n\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n className={cx(\n classes.root,\n disabled && css({ color: theme.dropdown.disabledColor }),\n className\n )}\n {...others}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n id={setId(id, \"dropdown\")}\n classes={{\n root: cx(\n classes.dropdown,\n readOnly &&\n css({\n [`& .${staticClasses.dropdownHeader}`]: {\n border: theme.dropdown.readOnlyBorder,\n backgroundColor: theme.dropdown.readOnlyBackgroundColor,\n },\n })\n ),\n arrow: classes.arrow,\n header: cx(classes.dropdownHeader, {\n [classes.dropdownHeaderInvalid]: isStateInvalid,\n }),\n headerOpen: classes.dropdownHeaderOpen,\n }}\n expanded={isOpen}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n disablePortal={disablePortal}\n placement={placement}\n popperProps={popperProps}\n placeholder={buildHeaderLabel()}\n onToggle={handleToggle}\n onClickOutside={handleClickOutside}\n onContainerCreation={setFocusToContent}\n role=\"combobox\"\n variableWidth={variableWidth}\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n onFocus={onFocus}\n onBlur={onBlur}\n dropdownHeaderRef={dropdownHeaderRef}\n {...baseDropdownProps}\n >\n <HvDropdownList\n id={setId(elementId, \"values\")}\n classes={{\n rootList: classes.rootList,\n dropdownListContainer: classes.dropdownListContainer,\n }}\n values={internalValues}\n multiSelect={multiSelect}\n showSearch={showSearch}\n onChange={handleSelection}\n onCancel={handleCancel}\n labels={labels}\n notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n hasTooltips={hasTooltips}\n singleSelectionToggle={singleSelectionToggle}\n aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n height={height}\n maxHeight={maxHeight}\n virtualized={virtualized}\n {...listProps}\n />\n </HvBaseDropdown>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","props","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","placeholder","onChange","status","statusMessage","ariaErrorMessage","onCancel","onToggle","onClickOutside","onFocus","onBlur","values","multiSelect","showSearch","expanded","defaultExpanded","notifyChangesOnFirstRender","labels","labelsProp","hasTooltips","disablePortal","singleSelectionToggle","placement","variableWidth","popperProps","height","maxHeight","virtualized","baseDropdownProps","listProps","others","useDefaultProps","cx","css","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","useState","getSelectionLabel","internalValues","setInternalValues","useEffect","process","env","NODE_ENV","console","error","dropdownHeaderRef","useRef","handleToggle","event","open","hasSelection","getSelected","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","current","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","HvTypography","component","variant","selectionDisabled","color","theme","dropdown","placeholderColor","children","_jsxs","_jsx","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","HvFormElement","root","disabledColor","labelContainer","HvLabel","HvInfoMessage","HvBaseDropdown","staticClasses","dropdownHeader","border","readOnlyBorder","backgroundColor","readOnlyBackgroundColor","arrow","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","onContainerCreation","role","join","trim","HvDropdownList","rootList","dropdownListContainer","HvWarningText","disableBorder"],"mappings":"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"}
1	+ {"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { PopperProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n HvBaseDropdown,\n HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n isInvalid,\n HvInfoMessage,\n HvWarningText,\n HvFormElement,\n HvLabel,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /*\n Class names to be applied.\n /\n className?: string;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvDropdownClasses;\n /\n Id to be applied to the form element root node.\n /\n id?: string;\n /\n The form element name.\n /\n name?: string;\n /\n The label of the form element.\n \n The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n /\n label?: any;\n /\n @ignore\n /\n \"aria-label\"?: string;\n /\n @ignore\n /\n \"aria-labelledby\"?: string;\n /\n Provide additional descriptive text for the form element.\n /\n description?: any;\n /\n @ignore\n /\n \"aria-describedby\"?: string;\n /\n The placeholder value when nothing is selected.\n /\n placeholder?: string;\n\n /\n Indicates that the form element is disabled.\n /\n disabled?: boolean;\n /\n Indicates that the form element is in read only mode.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n The status of the form element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n \n When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n /\n status?: HvDropdownStatus;\n /\n The error message to show when the validation status is \"invalid\".\n \n Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n /\n statusMessage?: any;\n /\n Identifies the element that provides an error message for the dropdown.\n \n Will only be used when the validation status is invalid.\n /\n \"aria-errormessage\"?: string;\n\n /\n The callback fired when the value changes.\n /\n onChange?: (selected: HvListValue \| HvListValue[] \| undefined) => void;\n\n /\n The list to be rendered by the dropdown.\n /\n values?: HvListValue[];\n /\n If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n /\n multiSelect?: boolean;\n /\n If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n /\n showSearch?: boolean;\n /\n If `true` the dropdown starts opened if `false` it starts closed.\n /\n expanded?: boolean;\n /\n When uncontrolled, defines the initial expanded state.\n /\n defaultExpanded?: boolean;\n /\n If 'true' the dropdown will notify on the first render.\n /\n notifyChangesOnFirstRender?: boolean;\n /\n An object containing all the labels for the dropdown.\n /\n labels?: HvDropdownLabelsProps;\n /\n If `true` the dropdown will show tooltips when user mouseenter text in list\n /\n hasTooltips?: boolean;\n /\n Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n /\n disablePortal?: boolean;\n /\n If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n /\n variableWidth?: boolean;\n /\n If `true`, selection can be toggled when single selection.\n /\n singleSelectionToggle?: boolean;\n /\n Placement of the dropdown.\n /\n placement?: \"left\" \| \"right\";\n /\n An object containing props to be wired to the popper component.\n /\n popperProps?: Partial<PopperProps>;\n\n /\n Callback called when the user cancels the changes.\n \n Called when the cancel button is used and when the user clicks outside the open container.\n \n @param {object} event The event source of the callback.\n /\n onCancel?: (event: Event) => void;\n /\n Callback called when dropdown changes the expanded state.\n \n @param {object} event The event source of the callback.\n * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n /\n onToggle?: (event: Event, open: boolean) => void;\n /\n Callback called when the user clicks outside the open container.\n \n @param {object} event The event source of the callback.\n /\n onClickOutside?: (event: Event) => void;\n /\n @ignore\n /\n onFocus?: React.FocusEventHandler<any>;\n /\n @ignore\n /\n onBlur?: React.FocusEventHandler<any>;\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. 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 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 Extra props passed to the dropdown.\n /\n baseDropdownProps?: HvBaseDropdownProps;\n /\n Extra props passed to the list.\n /\n listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n select: undefined,\n selectAll: \"All\",\n cancelLabel: \"Cancel\",\n applyLabel: \"Apply\",\n searchPlaceholder: \"Search\",\n multiSelectionConjunction: \"/\",\n};\n\n/\n A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n /\nexport const HvDropdown = (props: HvDropdownProps) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n\n required = false,\n disabled = false,\n readOnly = false,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n\n placeholder = \"Select...\",\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n onCancel,\n onToggle,\n onClickOutside,\n\n onFocus,\n onBlur,\n\n values,\n multiSelect = false,\n showSearch = false,\n expanded,\n defaultExpanded = false,\n notifyChangesOnFirstRender = false,\n labels: labelsProp,\n hasTooltips = false,\n disablePortal = false,\n singleSelectionToggle = true,\n placement,\n variableWidth = false,\n popperProps = {},\n height,\n maxHeight,\n virtualized = false,\n baseDropdownProps = {},\n listProps = {},\n ...others\n } = useDefaultProps(\"HvDropdown\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const elementId = useUniqueId(id, \"hvdropdown\");\n\n const [validationState, setValidationState] = useControlled(\n status,\n \"standBy\"\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const [selectionLabel, setSelectionLabel] = useState(\n getSelectionLabel(labels, placeholder, multiSelect, values)\n );\n const [internalValues, setInternalValues] = useState(values);\n\n useEffect(() => {\n setInternalValues(values);\n }, [values]);\n\n useEffect(() => {\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, values)\n );\n }, [labels, multiSelect, placeholder, values]);\n\n if (virtualized && !height && process.env.NODE_ENV !== \"production\") {\n // eslint-disable-next-line no-console\n console.error(\n \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n );\n }\n\n const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n onToggle?.(event, open);\n\n setIsOpen(open);\n\n if (!open) {\n // also run built-in validation when closing without changes\n // as the user \"touched\" the input\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required) {\n const hasSelection = getSelected(internalValues).length > 0;\n\n if (!hasSelection) {\n return \"invalid\";\n }\n }\n\n return \"valid\";\n });\n }\n };\n\n /* Applies the selected values to the state /\n const handleSelection: HvDropdownListProps[\"onChange\"] = (\n listValues,\n commitChanges,\n toggle,\n notifyChanges = true\n ) => {\n const selected = getSelected(listValues);\n\n if (commitChanges) {\n setInternalValues(listValues);\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, listValues)\n );\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && selected.length === 0) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n }\n if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n if (toggle) {\n handleToggle(undefined as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n }\n };\n\n /\n Handles the `Cancel` action. Both single and ranged modes are handled here.\n */\n const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n onCancel?.(evt as any);\n\n handleToggle(evt as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n };\n\n const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n onClickOutside?.(evt);\n onCancel?.(evt);\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef\n ) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n return;\n }\n const listItems =\n containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n listItems.every((listItem) => {\n if (listItem.tabIndex >= 0) {\n listItem.focus();\n return false;\n }\n return true;\n });\n };\n\n const buildHeaderLabel = () => {\n const hasSelection = getSelected(internalValues).length > 0;\n return labels?.select \|\| !multiSelect ? (\n <HvTypography\n component=\"div\"\n variant=\"body\"\n className={cx(\n classes.placeholder,\n {\n [classes.selectionDisabled]: disabled,\n },\n !(isOpen \|\| hasSelection) &&\n css({ color: theme.dropdown.placeholderColor })\n )}\n >\n {selectionLabel.selected}\n </HvTypography>\n ) : (\n <HvTypography\n component=\"div\"\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n <b>{selectionLabel.selected}</b>\n {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n </HvTypography>\n );\n };\n\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n className={cx(\n classes.root,\n disabled && css({ color: theme.dropdown.disabledColor }),\n className\n )}\n {...others}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n id={setId(id, \"dropdown\")}\n classes={{\n root: cx(\n classes.dropdown,\n readOnly &&\n css({\n [`& .${staticClasses.dropdownHeader}`]: {\n border: theme.dropdown.readOnlyBorder,\n backgroundColor: theme.dropdown.readOnlyBackgroundColor,\n },\n })\n ),\n arrow: classes.arrow,\n header: cx(classes.dropdownHeader, {\n [classes.dropdownHeaderInvalid]: isStateInvalid,\n }),\n headerOpen: classes.dropdownHeaderOpen,\n }}\n expanded={isOpen}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n disablePortal={disablePortal}\n placement={placement}\n popperProps={popperProps}\n placeholder={buildHeaderLabel()}\n onToggle={handleToggle}\n onClickOutside={handleClickOutside}\n onContainerCreation={setFocusToContent}\n role=\"combobox\"\n variableWidth={variableWidth}\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n onFocus={onFocus}\n onBlur={onBlur}\n dropdownHeaderRef={dropdownHeaderRef}\n {...baseDropdownProps}\n >\n <HvDropdownList\n id={setId(elementId, \"values\")}\n classes={{\n rootList: classes.rootList,\n dropdownListContainer: classes.dropdownListContainer,\n }}\n values={internalValues}\n multiSelect={multiSelect}\n showSearch={showSearch}\n onChange={handleSelection}\n onCancel={handleCancel}\n labels={labels}\n notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n hasTooltips={hasTooltips}\n singleSelectionToggle={singleSelectionToggle}\n aria-label={ariaLabel}\n aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n height={height}\n maxHeight={maxHeight}\n virtualized={virtualized}\n {...listProps}\n />\n </HvBaseDropdown>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","props","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","placeholder","onChange","status","statusMessage","ariaErrorMessage","onCancel","onToggle","onClickOutside","onFocus","onBlur","values","multiSelect","showSearch","expanded","defaultExpanded","notifyChangesOnFirstRender","labels","labelsProp","hasTooltips","disablePortal","singleSelectionToggle","placement","variableWidth","popperProps","height","maxHeight","virtualized","baseDropdownProps","listProps","others","useDefaultProps","cx","css","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","useState","getSelectionLabel","internalValues","setInternalValues","useEffect","process","env","NODE_ENV","console","error","dropdownHeaderRef","useRef","handleToggle","event","open","hasSelection","getSelected","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","current","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","HvTypography","component","variant","selectionDisabled","color","theme","dropdown","placeholderColor","children","_jsxs","_jsx","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","HvFormElement","root","disabledColor","labelContainer","HvLabel","HvInfoMessage","HvBaseDropdown","staticClasses","dropdownHeader","border","readOnlyBorder","backgroundColor","readOnlyBackgroundColor","arrow","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","onContainerCreation","role","join","trim","HvDropdownList","rootList","dropdownListContainer","HvWarningText","disableBorder"],"mappings":"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"}

package/dist/esm/components/Dropdown/List/List.js CHANGED Viewed

@@ -109,6 +109,7 @@ const HvDropdownList = ({
       type: "search",
       value: searchStr,
       placeholder: labels == null ? void 0 : labels.searchPlaceholder,
+      "aria-label": labels == null ? void 0 : labels.searchPlaceholder,
       onChange: (event, str) => handleSearch(str)
     })
   });