npm - @hitachivantara/uikit-react-core - Versions diffs - 5.26.0 → 5.26.2 - Mend

@hitachivantara/uikit-react-core 5.26.0 → 5.26.2

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

package/dist/cjs/components/BaseDropdown/BaseDropdown.cjs CHANGED Viewed

@@ -176,8 +176,7 @@ const HvBaseDropdown = (props) => {
   const headerComponent = (() => {
     if (component) {
       return React__default.default.cloneElement(component, {
-        ref: handleDropdownHeaderRef,
-        "aria-controls": isOpen ? setId.setId(elementId, "children-container") : void 0
+        ref: handleDropdownHeaderRef
       });
     }
     const ExpanderComponent = isOpen ? uikitReactIcons.DropUpXS : uikitReactIcons.DropDownXS;
@@ -194,7 +193,6 @@ const HvBaseDropdown = (props) => {
       style: disabled || readOnly ? {
         pointerEvents: "none"
       } : void 0,
-      "aria-controls": isOpen ? setId.setId(elementId, "children-container") : void 0,
       "aria-label": others["aria-label"] ?? void 0,
       "aria-labelledby": others["aria-labelledby"] ?? void 0,
       "aria-required": required ?? void 0,
@@ -293,6 +291,7 @@ const HvBaseDropdown = (props) => {
       role: ariaRole,
       "aria-expanded": ariaExpanded,
       "aria-owns": isOpen ? setId.setId(elementId, "children-container") : void 0,
+      "aria-controls": isOpen ? setId.setId(elementId, "children-container") : void 0,
       "aria-required": required ?? void 0,
       "aria-readonly": readOnly ?? void 0,
       className: cx(classes.anchor, {

package/dist/cjs/components/BaseDropdown/BaseDropdown.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseDropdown.cjs","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 \"aria-controls\": isOpen\n ? setId(elementId, \"children-container\")\n : undefined,\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-controls={\n isOpen ? setId(elementId, \"children-container\") : undefined\n }\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-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","setId","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":";;;;;;;;;;;;;;;;;;;;;;;AAkIaA,MAAAA,iBAAiBA,CAACC,UAA+B;;AACtD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZC,cAAc,CAAC;AAAA,IACfC,mBAAmBC;AAAAA,IACnBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,iBAAiBC;AAAAA,IACjB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,kBAAkB3B,KAAK;AACrC,QAAA;AAAA,IAAEG;AAAAA,IAASyB;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWzB,WAAW;AAExC,QAAA;AAAA,IAAE0B;AAAAA,MAAWC,SAAS,SAAA;AAEtB,QAAA,CAACC,QAAQC,SAAS,IAAIC,cAAAA,cAAcxB,UAAUyB,QAAQvB,eAAe,CAAC;AAE5E,QAAM,CAACwB,kBAAkBC,mBAAmB,IAAIC,eAC9C,IACF;AACA,QAAM,CAACC,eAAeC,gBAAgB,IAAIF,eAA6B,IAAI;AAC3E,QAAM,CAACG,eAAeC,gBAAgB,IAAIJ,MAAAA,SAGvC,CAAE,CAAA;AAEL,QAAMK,8BAA8BC,WAAAA,WAClCvB,uBACAV,2DAAqBkC,GACvB;AACMC,QAAAA,0BAA0BF,WAAAA,WAC9BP,qBACAM,2BACF;AAEA,QAAMI,WAAWzC,SAASE,aAAa,OAAO,aAAawC;AAE3D,QAAMC,eAAexB,qBAAqBsB,WAAW,CAAC,CAACf,SAASgB;AAE1DE,QAAAA,YAAYC,YAAAA,YAAYlD,IAAI,gBAAgB;AAElD,QAAMmD,SACJlC,aAAc,UAASA,cAAc,UAAU,UAAU;AAErDmC,QAAAA,iBAAiBjB,mBACnBA,qDAAkBkB,cAClB;AAEE,QAAA;AAAA,IAAEC,WAAWC,uBAAuB,CAAE;AAAA,IAAE,GAAGC;AAAAA,EAC/CtC,IAAAA;AAEIuC,QAAAA,gBAAgBC,MAAAA,YAAY,MAAM;AAClCnC,QAAAA;AAAqBA,0BAAoBe,aAAa;AAAA,EAAA,GACzD,CAACf,qBAAqBe,aAAa,CAAC;AAEjCqB,QAAAA,kBAAkBD,MAAAA,YACtB,CAAC;AAAA,IAAEE;AAAAA,EAAAA,MAAwC;AACzCA,UAAMC,OAAOC,OAAOC,QAAS,GAAEH,MAAMI,MAAMC,UAAUF;AAAAA,EACvD,GACA,CACF,CAAA;AAEMG,QAAAA,wBAAwBR,MAAAA,YAC5B,CAAC;AAAA,IAAEE;AAAAA,EAAAA,MAAwC;AACzCA,UAAMO,SAASL,OAAOM,MAAML,QAAS,GAClCH,MAAMO,SAASF,UAAkBZ;AAAAA,EAEtC,GACA,CACF,CAAA;AAEMgB,QAAAA,yBAAyBX,MAAAA,YAC7B,CAAC;AAAA,IAAEE;AAAAA,EAAAA,MAAwC;AAEnC,UAAA;AAAA,MAAEG;AAAAA,MAAOO;AAAAA,IAAAA,IAAWV,MAAMW,cAAcC;AAC9C,QAAIT,WAAUvB,+CAAeuB,UAASO,YAAW9B,+CAAe8B,SAAQ;AACrD,uBAAA;AAAA,QAAEP;AAAAA,QAAOO;AAAAA,MAAAA,CAAQ;AAAA,IACpC;AAEAV,UAAMC,OAAOC,SAAS;AAAA,MACpB,GAAGF,MAAMC,OAAOC;AAAAA,MAChBW,UAAW,GAAEV;AAAAA,MACbW,WAAY,GAAEJ;AAAAA,IAAAA;AAAAA,EAChB,GAEF,CAAC9B,aAAa,CAChB;AAEMmC,QAAAA,oBAAoBjB,MAAAA,YACxB,CAAC;AAAA,IAAEE;AAAAA,IAAOgB;AAAAA,IAAMC;AAAAA,EAAAA,MAA0C;;AAClDC,UAAAA,WAAWC,KAAAA,eAAenB,OAAOiB,OAAO;AAE9C,UAAMG,MAAIpB,MAAAA,MAAMW,cAAcU,oBAApBrB,gBAAAA,IAAqCoB,MAAK;AACpD,UAAME,MAAItB,WAAMW,cAAcU,oBAApBrB,mBAAqCsB,MAAK;AAE9CC,UAAAA,cAAcvB,MAAMI,MAAMF,OAAOC;AACjCqB,UAAAA,eAAexB,MAAMI,MAAMF,OAAOQ;AAExC,UAAMe,gBAAgBzB,MAAM3C,UAAUqE,MAAM,GAAG,EAAE,CAAC;AAE5CC,UAAAA,YAAYF,kBAAkB,SAAS,SAAS;AAChDG,UAAAA,aAAaH,kBAAkB,QAAQ,QAAQ;AAE/Cd,UAAAA,cAAcK,IAAI,IAAI;AAAA,MAC1Bb,OAAOoB,cAAcL,SAASS,SAAS,IAAIP;AAAAA,MAC3CV,QAAQc,eAAeN,SAASU,UAAU,IAAIN;AAAAA,IAAAA;AAAAA,EAElD,GACA,CACF,CAAA;AAEM5B,QAAAA,YAAsCmC,MAC1C,QAAA,MAAM,CACJ;AAAA,IACEb,MAAM;AAAA,IACNc,SAAS,CAAC1E;AAAAA,IACV2E,OAAO;AAAA,IACPC,UAAU,CAAC,eAAe;AAAA,IAC1BC,IAAIlC;AAAAA,IACJmC,QAAQ5B;AAAAA,EAAAA,GAEV;AAAA,IACEU,MAAM;AAAA,IACNc,SAAS;AAAA,IACTC,OAAO;AAAA,IACPI,kBAAkB,CAAC,UAAU,mBAAmB,MAAM;AAAA,IACtDF,IAAIlB;AAAAA,EAAAA,GAEN;AAAA,IACEC,MAAM;AAAA,IACNc,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,UAAU,CAAC,SAAS;AAAA,IACpBC,IAAIxB;AAAAA,EAAAA,GAEN,GAAGd,oBAAoB,GAEzB,CACEoB,mBACAN,wBACAd,sBACAvC,eACA2C,iBACAO,qBAAqB,CAEzB;AAEM,QAAA;AAAA,IAAEL,QAAQmC;AAAAA,IAAcC;AAAAA,EAAAA,IAAeC,YAC3C/D,UAAAA,kBACAG,eACA;AAAA,IACErB,WAAWkC;AAAAA,IACXG;AAAAA,IACAG;AAAAA,IACA,GAAGD;AAAAA,EAAAA,CAEP;AAEA,QAAM2C,oBACJF,gBAAWnC,WAAXmC,mBAAoB,6BAA4B;AAE5CG,QAAAA,eAAe1C,kBAClB2C,CAAU,UAAA;AACT,QAAIA,SAAS,CAACC,cAAAA,MAAMD,OAAO,KAAK,GAAG;AACjCA,YAAME,eAAe;AAAA,IACvB;AAEA,UAAMC,gBACJ,CAAC,EAACH,+BAAOI,SACT,CAACC,cAAAA,YAAYL,OAAO,CAAC,OAAO,SAAS,OAAO,aAAa,OAAO,CAAC;AAEnE,UAAMM,sBACHL,cAAAA,MAAMD,OAAO,KAAK,KAAK,CAACtE,UACxBuE,cAAAA,MAAMD,OAAO,WAAW,KAAKtE,UAC7BuE,cAAAA,MAAMD,OAAO,KAAK,KAAK,CAACtE;AAE3B,QAAInB,YAAY4F,iBAAiBG;AAAqB;AAEtD,UAAMC,UAAU,CAAC7E;AAGjB,UAAM8E,cAAcA,MAAM;AACxB,UAAI,CAACD,SAAS;AAGZzE,6DAAkB2E,MAAM;AAAA,UAAEC,eAAe;AAAA,QAAA;AAAA,MAC3C;AAEOH,aAAAA;AAAAA,IAAAA;AAET5E,cAAU6E,aAAa;AAEvBxF,yCAAWgF,OAAOO;AAAAA,EAAO,GAE3B,CAAC7E,QAAQnB,UAAUoB,WAAWX,UAAUc,gBAAgB,CAC1D;AAEA,QAAM6E,mBAAmB,MAAM;AAC7B,QAAIzG,WAAW;AACN0G,aAAAA,eAAAA,QAAMC,aAAa3G,WAAiC;AAAA,QACzDqC,KAAKC;AAAAA,QACL,iBAAiBd,SACboF,MAAMlE,MAAAA,WAAW,oBAAoB,IACrCF;AAAAA,MAAAA,CACL;AAAA,IACH;AAEMqE,UAAAA,oBAAoBrF,SAASsF,gBAAWC,WAAAA;AAE9C,2CACE,OAAA;AAAA,MACEtH,IAAImH,MAAAA,MAAMnH,IAAI,QAAQ;AAAA,MACtBC,WAAW0B,GAAGzB,QAAQqH,QAAQ;AAAA,QAC5B,CAACrH,QAAQsH,cAAc,GAAG5G;AAAAA,QAC1B,CAACV,QAAQuH,cAAc,GAAG5G;AAAAA,QAC1B,CAACX,QAAQwH,UAAU,GAAG3F;AAAAA,QACtB,CAAC7B,QAAQyH,YAAY,GAAG5F,UAAUoE,gBAAgByB,SAAS,KAAK;AAAA,QAChE,CAAC1H,QAAQ2H,cAAc,GACrB9F,UAAUoE,gBAAgByB,SAAS,QAAQ;AAAA,MAAA,CAC9C;AAAA,MACDvH,MAAMyC,aAAa,aAAa,YAAYC;AAAAA,MAC5CqB,OAAOxD,YAAYC,WAAW;AAAA,QAAEiH,eAAe;AAAA,MAAW/E,IAAAA;AAAAA,MAC1D,iBACEhB,SAASoF,MAAMlE,MAAAA,WAAW,oBAAoB,IAAIF;AAAAA,MAEpD,cAAYtB,OAAO,YAAY,KAAKsB;AAAAA,MACpC,mBAAiBtB,OAAO,iBAAiB,KAAKsB;AAAAA,MAC9C,iBAAejC,YAAYiC;AAAAA,MAC3B,iBAAelC,YAAYkC;AAAAA,MAE3BgF,UAAUnH,WAAW,KAAK;AAAA,MAC1BgC,KAAKC;AAAAA,MAAwB,GACzBnC;AAAAA,MAAmBN,WAEvB4H,2BAAAA,IAAA,OAAA;AAAA,QAAK/H,WAAWC,QAAQ+H;AAAAA,QAAU7H,UAC/BE,eAAe,OAAOA,gBAAgB,0CACpC4H,WAAAA,cAAY;AAAA,UACXjI,WAAW0B,GAAGzB,QAAQI,aAAa;AAAA,YACjC,CAACJ,QAAQiI,iBAAiB,GAAGvH;AAAAA,UAAAA,CAC9B;AAAA,UACDwH,SAAQ;AAAA,UAAMhI,UAEbE;AAAAA,QACW,CAAA,IAEdA;AAAAA,MAAAA,CAEC,GACL0H,2BAAAA,IAAA,OAAA;AAAA,QAAK/H,WAAWC,QAAQmI;AAAAA,QAAejI,UACpCI,aACCwH,2BAAAA,IAACZ,mBAAiB;AAAA,UAChBkB,UAAS;AAAA,UACTC,OAAO3H,WAAW4H,YAAAA,MAAMC,OAAOC,eAAe3F;AAAAA,UAC9C9C,WAAWC,QAAQyI;AAAAA,QAAAA,CACpB;AAAA,MAAA,CAEA,CAAC;AAAA,IAAA,CACH;AAAA,EAAA;AAIT,QAAMC,sBAAsB,MAAM;AAIhC,UAAMC,yBAAgDxC,CAAU,UAAA;;AAC1DC,UAAAA,cAAAA,MAAMD,OAAO,KAAK,GAAG;AACvBD,qBAAaC,KAAK;AAAA,MACpB;AACA,UAAIC,cAAAA,MAAMD,OAAO,KAAK,KAAK,CAACA,MAAMyC,UAAU;AACpCC,cAAAA,YAAYC,4CAAqB1G,aAAa;AAChD2G,YAAAA,SAASC,mBAAkBH,uCAAWI,OAAM;AAC9C9C,gBAAME,eAAe;AACrBwC,WAAAA,MAAAA,uCAAWK,UAAXL,gBAAAA,IAAkBjC;AAAAA,QACpB;AAAA,MACF;AAAA,IAAA;AAGF,UAAMuC,gBAAwDhD,CAAU,UAAA;AACtE,YAAMiD,gBAAgBnH,qDAAkBoH,SAASlD,MAAMmD;AACvD,UAAI,CAACF,eAAe;AAClBhI,yDAAiB+E;AACjBrE,kBAAU,KAAK;AACfX,6CAAWgF,OAAO;AAAA,MACpB;AAAA,IAAA;AAGIoD,UAAAA,2CACJ,OAAA;AAAA,MACEpJ,MAAK;AAAA,MACLuC,KAAKL;AAAAA,MACLtC,WAAWC,QAAQuJ;AAAAA,MACnBrF,OAAO4B,aAAalC;AAAAA,MAAO,GACvBmC,WAAWnC;AAAAA,MAAM1D,yCAEpBsJ,4BAAiB;AAAA,QAACC,aAAaN;AAAAA,QAAcjJ,0CAE5C,OAAA;AAAA,UAAKwJ,WAAWf;AAAAA,UAAuBzI,UAAA,CACpC+F,gBAAgByB,SAAS,QAAQ,oCAChC,OAAA;AAAA,YACExD,OAAO;AAAA,cAAEL,OAAOX;AAAAA,YAAe;AAAA,YAC/BnD,WAAW0B,GAAGzB,QAAQ2J,oBAAoB;AAAA,cACxC,CAAC3J,QAAQ4J,0BAA0B,GACjC3D,gBAAgByB,SAAS,KAAK;AAAA,YAAA,CACjC;AAAA,UAAA,CACF,GAEFmC,2BAAAA,IAAAA,oBAAAA,QAAoBC,UAAQ;AAAA,YAACC,OAAOzH;AAAAA,YAAcpC,yCACjD,OAAA;AAAA,cACEJ,IAAImH,MAAAA,MAAMlE,WAAW,oBAAoB;AAAA,cACzChD,WAAW0B,GAAGzB,QAAQgK,OAAO;AAAA,gBAC3B,CAAChK,QAAQiK,aAAa,GAAGhE,gBAAgByB,SAAS,KAAK;AAAA,gBACvD,CAAC1H,QAAQkK,eAAe,GAAGjE,gBAAgByB,SAAS,QAAQ;AAAA,cAAA,CAC7D;AAAA,cAAExH;AAAAA,YAAAA,CAGA;AAAA,UAAA,CACuB,GAC7B+F,gBAAgByB,SAAS,KAAK,oCAC7B,OAAA;AAAA,YACExD,OAAO;AAAA,cAAEL,OAAOX;AAAAA,YAAe;AAAA,YAC/BnD,WAAW0B,GACTzB,QAAQ2J,oBACR3J,QAAQmK,0BACR;AAAA,cACE,CAACnK,QAAQoK,wBAAwB,GAC/BnE,gBAAgByB,SAAS,KAAK;AAAA,cAChC,CAAC1H,QAAQqK,uBAAuB,GAC9BpE,gBAAgByB,SAAS,OAAO;AAAA,YAAA,CAEtC;AAAA,UAAA,CACD,CACF;AAAA,QAAA,CACE;AAAA,MAAA,CACY;AAAA,IAAA,CAChB;AAGH7G,QAAAA;AAAsB0I,aAAAA;AAEnBe,WAAAA,SAAAA,aACLf,WACAR,SAASwB,eAAe5I,UAAU,EAAE,KAAKoH,SAASyB,IACpD;AAAA,EAAA;AAGF,yCACE,OAAA;AAAA,IAAKzK,WAAWC,QAAQyK;AAAAA,IAAKvK,WAC3B4H,2BAAAA,IAAA,OAAA;AAAA,MACEhI;AAAAA,MACAK,MAAMyC;AAAAA,MACN,iBAAeE;AAAAA,MACf,aAAWjB,SAASoF,MAAMlE,MAAAA,WAAW,oBAAoB,IAAIF;AAAAA,MAC7D,iBAAejC,YAAYiC;AAAAA,MAC3B,iBAAelC,YAAYkC;AAAAA,MAC3B9C,WAAW0B,GACTzB,QAAQ0K,QACR;AAAA,QAAE,CAAC1K,QAAQ2K,YAAY,GAAGjK;AAAAA,SAC1BX,SACF;AAAA,MAAE,GACG,CAACY,YAAY;AAAA,QAChB+I,WAAWxD;AAAAA,QACX0E,SAAS1E;AAAAA,MACX;AAAA;AAAA,MAEA2B,UAAU;AAAA,MAAG,GACTtG;AAAAA,MAAMrB,UAET4G;AAAAA,IAAAA,CACE,GACJjF,UAAU6G,kBAAkB;AAAA,EAAA,CAC1B;AAET;;;"}
1	+ {"version":3,"file":"BaseDropdown.cjs","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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"}

package/dist/cjs/components/Box/Box.cjs CHANGED Viewed

@@ -13,6 +13,7 @@ const HvBox = React.forwardRef((props, ref) => {
     component: Component = "div",
     sx,
     children,
+    classes,
     ...restProps
   } = useDefaultProps.useDefaultProps("HvBox", props);
   return /* @__PURE__ */ jsxRuntime.jsx(Component, {

package/dist/cjs/components/Box/Box.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Box.cjs","sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import { HvTheme, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\ntype SxProps = React.CSSProperties \| ((theme: HvTheme) => React.CSSProperties);\n\ntype HvBoxBaseProps<C extends React.ElementType> = PolymorphicComponentRef<\n C,\n { style?: React.CSSProperties; sx?: SxProps }\n>;\n\nexport type HvBoxProps = <C extends React.ElementType = \"div\">(\n props: HvBoxBaseProps<C>\n) => React.ReactElement \| null;\n\nconst sxFn = (sx: SxProps) => {\n return typeof sx === \"function\" ? sx(theme) : sx;\n};\n\n/*\n Customizable layout component that can be used to wrap other components.\n * It can be used to add styles to the wrapped components.\n * It can also be used to create a layout using the flexbox properties.\n */\nexport const HvBox: HvBoxProps = forwardRef(\n <C extends React.ElementType = \"div\">(\n props: HvBoxBaseProps<C>,\n ref?: PolymorphicRef<C>\n ) => {\n const {\n style,\n component: Component = \"div\",\n sx,\n children,\n ...restProps\n } = useDefaultProps(\"HvBox\", props);\n\n return (\n <Component style={sx ? sxFn(sx) : style} ref={ref} {...restProps}>\n {children}\n </Component>\n );\n }\n);\n"],"names":["sxFn","sx","theme","HvBox","forwardRef","props","ref","style","component","Component","children","restProps","useDefaultProps"],"mappings":";;;;;;AAkBA,MAAMA,OAAOA,CAACC,OAAgB;AAC5B,SAAO,OAAOA,OAAO,aAAaA,GAAGC,YAAK,KAAA,IAAID;AAChD;AAOO,MAAME,QAAoBC,MAAAA,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,WAAWC,YAAY;AAAA,IACvBR;AAAAA,IACAS;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,~~SAASP~~,KAAK;AAElC,wCACGI,WAAS;AAAA,IAACF,OAAON,KAAKD,KAAKC,EAAE,IAAIM;AAAAA,IAAOD;AAAAA,IAAS,~~GAAKK~~;AAAAA,~~IAASD~~;AAAAA,EAAAA,CAErD;AAEf,CACF;;"}
1	+ {"version":3,"file":"Box.cjs","sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import { HvTheme, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\ntype SxProps = React.CSSProperties \| ((theme: HvTheme) => React.CSSProperties);\n\ntype HvBoxBaseProps<C extends React.ElementType> = PolymorphicComponentRef<\n C,\n { style?: React.CSSProperties; sx?: SxProps }\n>;\n\nexport type HvBoxProps = <C extends React.ElementType = \"div\">(\n props: HvBoxBaseProps<C>\n) => React.ReactElement \| null;\n\nconst sxFn = (sx: SxProps) => {\n return typeof sx === \"function\" ? sx(theme) : sx;\n};\n\n/*\n Customizable layout component that can be used to wrap other components.\n * It can be used to add styles to the wrapped components.\n * It can also be used to create a layout using the flexbox properties.\n */\nexport const HvBox: HvBoxProps = forwardRef(\n <C extends React.ElementType = \"div\">(\n props: HvBoxBaseProps<C>,\n ref?: PolymorphicRef<C>\n ) => {\n const {\n style,\n component: Component = \"div\",\n sx,\n children,\n classes,\n ...restProps\n } = useDefaultProps(\"HvBox\", props);\n\n return (\n <Component style={sx ? sxFn(sx) : style} ref={ref} {...restProps}>\n {children}\n </Component>\n );\n }\n);\n"],"names":["sxFn","sx","theme","HvBox","forwardRef","props","ref","style","component","Component","children","classes","restProps","useDefaultProps"],"mappings":";;;;;;AAkBA,MAAMA,OAAOA,CAACC,OAAgB;AAC5B,SAAO,OAAOA,OAAO,aAAaA,GAAGC,YAAK,KAAA,IAAID;AAChD;AAOO,MAAME,QAAoBC,MAAAA,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,WAAWC,YAAY;AAAA,IACvBR;AAAAA,IACAS;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,SAASR,KAAK;AAElC,wCACGI,WAAS;AAAA,IAACF,OAAON,KAAKD,KAAKC,EAAE,IAAIM;AAAAA,IAAOD;AAAAA,IAAS,GAAKM;AAAAA,IAASF;AAAAA,EAAAA,CAErD;AAEf,CACF;;"}

package/dist/cjs/components/Card/Card.cjs CHANGED Viewed

@@ -23,7 +23,6 @@ const HvCard = (props) => {
     cx
   } = Card_styles.useClasses(classesProp);
   return /* @__PURE__ */ jsxRuntime.jsxs(Box.HvBox, {
-    "aria-selected": selectable ? selected : void 0,
     className: cx("HvIsCardGridElement", classes.root, css({
       backgroundColor: bgcolor && uikitStyles.theme.colors[bgcolor] || uikitStyles.theme.card.backgroundColor
     }), {

package/dist/cjs/components/Card/Card.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBox } from \"@core/components/Box\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"@core/types/tokens\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardProps extends HvBaseProps {\n /** The renderable content inside the icon slot of the header. /\n icon?: React.ReactNode;\n /* Whether the card is selectable. /\n selectable?: boolean;\n /* Whether the card is currently selected. /\n selected?: boolean;\n /* The background color of the card. /\n bgcolor?:\n \| \"sema0\"\n \| HvSemanticColorKeys\n \| HvAtmosphereColorKeys\n \| \"transparent\";\n /\n The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n * To set another color, the borderTop should be override.\n /\n statusColor?: \"sema0\" \| HvSemanticColorKeys \| HvAtmosphereColorKeys;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvCardClasses;\n}\n\n/\n A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = (props: HvCardProps) => {\n const {\n classes: classesProp,\n className,\n children,\n icon,\n selectable = false,\n selected = false,\n statusColor = \"sema0\",\n bgcolor,\n ...others\n } = useDefaultProps(\"HvCard\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n return (\n <HvBox\n ~~aria-selected={selectable ? selected : undefined}\n~~ className={cx(\n \"HvIsCardGridElement\",\n classes.root,\n css({\n backgroundColor:\n (bgcolor && theme.colors[bgcolor]) \|\| theme.card.backgroundColor,\n }),\n {\n [classes.selectable]: selectable,\n [classes.selected]: selected,\n },\n className\n )}\n {...others}\n >\n <div className={classes.semanticContainer}>\n <div\n className={cx(\n css({\n height: selected ? 4 : 2,\n backgroundColor:\n statusColor === \"sema0\"\n ? selected\n ? theme.colors.secondary\n : theme.colors.atmo4\n : theme.colors[statusColor],\n }),\n classes.semanticBar\n )}\n />\n <div className={classes.icon}>{icon}</div>\n </div>\n {children}\n </HvBox>\n );\n};\n"],"names":["HvCard","props","classes","classesProp","className","children","icon","selectable","selected","statusColor","bgcolor","others","useDefaultProps","css","cx","useClasses","HvBox","~~undefined","~~root","backgroundColor","theme","colors","card","_jsxs","semanticContainer","_jsx","height","secondary","atmo4","semanticBar"],"mappings":";;;;;;;AA0CaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,UAAUX,KAAK;AAE7B,QAAA;AAAA,IAAEC;AAAAA,IAASW;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,YAAAA,WAAWZ,WAAW;~~AACnD~~,yCACGa,IAAAA,OAAK;AAAA,~~IACJ~~,~~iBAAeT,aAAaC,WAAWS;AAAAA,IACvCb,~~WAAWU,GACT,uBACAZ,~~QAAQgB~~,~~MACRL~~,IAAI;AAAA,~~MACFM~~,~~iBACGT~~,~~WAAWU~~,kBAAMC,~~OAAOX~~,OAAO,~~KAAMU~~,YAAAA,MAAME,KAAKH;AAAAA,IAAAA,CACpD,GACD;AAAA,MACE,~~CAACjB~~,QAAQK,UAAU,GAAGA;AAAAA,MACtB,CAACL,QAAQM,QAAQ,GAAGA;AAAAA,OAEtBJ,SACF;AAAA,IAAE,GACEO;AAAAA,IAAMN,~~WAEVkB~~,2BAAAA,KAAA,OAAA;AAAA,~~MAAKnB~~,WAAWF,~~QAAQsB~~;AAAAA,~~MAAkBnB~~,~~WACxCoB~~,2BAAAA,IAAA,OAAA;AAAA,~~QACErB~~,WAAWU,GACTD,IAAI;AAAA,~~UACFa~~,~~QAAQlB~~,WAAW,IAAI;AAAA,~~UACvBW~~,~~iBACEV~~,gBAAgB,UACZD,~~WACEY~~,YAAMC,MAAAA,OAAOM,YACbP,YAAAA,MAAMC,OAAOO,QACfR,YAAAA,MAAMC,~~OAAOZ~~,WAAW;AAAA,QAAA,CAC/B,GACDP,~~QAAQ2B~~,WACV;AAAA,MAAA,CACD,GACDJ,2BAAAA,IAAA,OAAA;AAAA,~~QAAKrB~~,WAAWF,QAAQI;AAAAA,QAAKD,UAAEC;AAAAA,MAAAA,CAAU,CAAC;AAAA,IACvC,CAAA,GACJD,QAAQ;AAAA,EAAA,CACJ;AAEX;;;"}
1	+ {"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBox } from \"@core/components/Box\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"@core/types/tokens\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardProps extends HvBaseProps {\n /** The renderable content inside the icon slot of the header. /\n icon?: React.ReactNode;\n /* Whether the card is selectable. /\n selectable?: boolean;\n /* Whether the card is currently selected. /\n selected?: boolean;\n /* The background color of the card. /\n bgcolor?:\n \| \"sema0\"\n \| HvSemanticColorKeys\n \| HvAtmosphereColorKeys\n \| \"transparent\";\n /\n The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n * To set another color, the borderTop should be override.\n /\n statusColor?: \"sema0\" \| HvSemanticColorKeys \| HvAtmosphereColorKeys;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvCardClasses;\n}\n\n/\n A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = (props: HvCardProps) => {\n const {\n classes: classesProp,\n className,\n children,\n icon,\n selectable = false,\n selected = false,\n statusColor = \"sema0\",\n bgcolor,\n ...others\n } = useDefaultProps(\"HvCard\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n\n return (\n <HvBox\n className={cx(\n \"HvIsCardGridElement\",\n classes.root,\n css({\n backgroundColor:\n (bgcolor && theme.colors[bgcolor]) \|\| theme.card.backgroundColor,\n }),\n {\n [classes.selectable]: selectable,\n [classes.selected]: selected,\n },\n className\n )}\n {...others}\n >\n <div className={classes.semanticContainer}>\n <div\n className={cx(\n css({\n height: selected ? 4 : 2,\n backgroundColor:\n statusColor === \"sema0\"\n ? selected\n ? theme.colors.secondary\n : theme.colors.atmo4\n : theme.colors[statusColor],\n }),\n classes.semanticBar\n )}\n />\n <div className={classes.icon}>{icon}</div>\n </div>\n {children}\n </HvBox>\n );\n};\n"],"names":["HvCard","props","classes","classesProp","className","children","icon","selectable","selected","statusColor","bgcolor","others","useDefaultProps","css","cx","useClasses","HvBox","root","backgroundColor","theme","colors","card","_jsxs","semanticContainer","_jsx","height","secondary","atmo4","semanticBar"],"mappings":";;;;;;;AA0CaA,MAAAA,SAASA,CAACC,UAAuB;AACtC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,UAAUX,KAAK;AAE7B,QAAA;AAAA,IAAEC;AAAAA,IAASW;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,YAAAA,WAAWZ,WAAW;AAEnD,yCACGa,IAAAA,OAAK;AAAA,IACJZ,WAAWU,GACT,uBACAZ,QAAQe,MACRJ,IAAI;AAAA,MACFK,iBACGR,WAAWS,kBAAMC,OAAOV,OAAO,KAAMS,YAAAA,MAAME,KAAKH;AAAAA,IAAAA,CACpD,GACD;AAAA,MACE,CAAChB,QAAQK,UAAU,GAAGA;AAAAA,MACtB,CAACL,QAAQM,QAAQ,GAAGA;AAAAA,OAEtBJ,SACF;AAAA,IAAE,GACEO;AAAAA,IAAMN,WAEViB,2BAAAA,KAAA,OAAA;AAAA,MAAKlB,WAAWF,QAAQqB;AAAAA,MAAkBlB,WACxCmB,2BAAAA,IAAA,OAAA;AAAA,QACEpB,WAAWU,GACTD,IAAI;AAAA,UACFY,QAAQjB,WAAW,IAAI;AAAA,UACvBU,iBACET,gBAAgB,UACZD,WACEW,YAAMC,MAAAA,OAAOM,YACbP,YAAAA,MAAMC,OAAOO,QACfR,YAAAA,MAAMC,OAAOX,WAAW;AAAA,QAAA,CAC/B,GACDP,QAAQ0B,WACV;AAAA,MAAA,CACD,GACDJ,2BAAAA,IAAA,OAAA;AAAA,QAAKpB,WAAWF,QAAQI;AAAAA,QAAKD,UAAEC;AAAAA,MAAAA,CAAU,CAAC;AAAA,IACvC,CAAA,GACJD,QAAQ;AAAA,EAAA,CACJ;AAEX;;;"}

package/dist/cjs/components/ColorPicker/ColorPicker.cjs CHANGED Viewed

@@ -54,7 +54,8 @@ const HvColorPicker = (props) => {
     defaultSavedColorsValue = [],
     onSavedColorAdded,
     onSavedColorRemoved,
-    deleteSavedColorButtonArialLabel = "Delete saved color"
+    deleteSavedColorButtonArialLabel = "Delete saved color",
+    addSavedColorButtonAriaLabel = "Add current color to saved colors"
   } = useDefaultProps.useDefaultProps("HvColorPicker", props);
   const {
     classes,
@@ -182,7 +183,8 @@ const HvColorPicker = (props) => {
             onAddColor: handleAddColor,
             onClickColor: handleSelect,
             onRemoveColor: handleRemoveColor,
-            deleteButtonArialLabel: deleteSavedColorButtonArialLabel
+            deleteButtonAriaLabel: deleteSavedColorButtonArialLabel,
+            addButtonAriaLabel: addSavedColorButtonAriaLabel
           }), recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(PresetColors.PresetColors, {
             colors: recommendedColors,
             onClick: handleSelect,

package/dist/cjs/components/ColorPicker/ColorPicker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ColorState } from \"react-color\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { HvBaseDropdown } from \"@core/components/BaseDropdown\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\n\nimport { Picker } from \"./Picker\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n \"aria-describedby\"?: string;\n /** Class names to be applied. /\n className?: string;\n /* Id to be applied to the form element root node. /\n id?: string;\n /* The form element name. /\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?: React.ReactNode;\n /* Provide additional descriptive text for the form element. /\n description?: React.ReactNode;\n /* Indicates that user input is required on the form element. /\n required?: boolean;\n /* The value color, in HEX format. /\n value?: string;\n /* The default value color, in HEX format. /\n defaultValue?: string;\n /* If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. /\n disabled?: boolean;\n /* If `true` the dropdown starts opened if `false` it starts closed. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* A function to be executed whenever the color changes. /\n onChange?: (color: string) => void;\n /* A function to be executed whenever the color change is complete. /\n onChangeComplete?: (color: string) => void;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvColorPickerClasses;\n /* The placeholder value when nothing is selected. /\n placeholder?: string;\n /* Recommended colors. The colors are HEX values. /\n recommendedColors?: string[];\n /* Recommended colors position. /\n recommendedColorsPosition?: \"top\" \| \"bottom\";\n /* If `true`, the labels are shown. If `false`, they are not shown. /\n showLabels?: boolean;\n /* An object containing all the labels. /\n labels?: {\n recommendedColorsLabel?: string;\n customColorsLabel?: string;\n };\n /* Icon type for the input's end adornment. /\n dropdownIcon?: \"arrow\" \| \"colorPicker\";\n /* If `true`, the input only shows an icon. If `false`, the input shows text and icons. /\n iconOnly?: boolean;\n /* If `true`, the saved colors area is shown. If `false`, it is not shown. /\n showSavedColors?: boolean;\n /* If `true`, the custom colors area is shown. If `false`, it is not shown. /\n showCustomColors?: boolean;\n /* The saved colors. The colors are HEX values. /\n savedColorsValue?: string[];\n /* The default saved colors. The colors are HEX values. /\n defaultSavedColorsValue?: string[];\n /* Callback fired when a new saved color is added. /\n onSavedColorAdded?: (color?: string) => void;\n /* Callback fired when a new saved color is removed. /\n onSavedColorRemoved?: (color?: string) => void;\n /* Aria label to apply to delete saved color button. /\n deleteSavedColorButtonArialLabel?: string;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"labels\"] = {\n recommendedColorsLabel: \"Recommended colors:\",\n customColorsLabel: \"Custom colors:\",\n};\n\n/\n A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = (props: HvColorPickerProps) => {\n const {\n id,\n name,\n required = false,\n disabled = false,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n className,\n classes: classesProp,\n value,\n onChange,\n onChangeComplete,\n defaultValue = \"\",\n expanded,\n defaultExpanded = false,\n recommendedColorsPosition = \"top\",\n recommendedColors = [\n \"#95AFE8\",\n \"#E89E5D\",\n \"#83B8A6\",\n \"#70759C\",\n \"#C57E7E\",\n \"#FADA95\",\n \"#ADBFE8\",\n \"#E3B386\",\n \"#9AC6B7\",\n \"#8B90AF\",\n \"#CF9797\",\n \"#FAE1AA\",\n ],\n showLabels = true,\n labels: labelsProp,\n dropdownIcon = \"colorPicker\",\n placeholder = \"Select color...\",\n iconOnly = false,\n showSavedColors = true,\n showCustomColors = true,\n savedColorsValue,\n defaultSavedColorsValue = [],\n onSavedColorAdded,\n onSavedColorRemoved,\n deleteSavedColorButtonArialLabel = \"Delete saved color\",\n } = useDefaultProps(\"HvColorPicker\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const [color, setColor] = useControlled(value, defaultValue);\n const [savedColors, setSavedColors] = useControlled(\n savedColorsValue,\n defaultSavedColorsValue\n );\n const elementId = useUniqueId(id, \"hvdropdown\");\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n setIsOpen(open);\n };\n\n const handleSelect = (val: ColorState \| { hex: string; source: string }) => {\n onChange?.(val.hex);\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChange = (\n val: ColorState \| { hex: string; source: string }\n ) => {\n onChange?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChangeComplete = (\n val: ColorState \| { hex: string; source: string }\n ) => {\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleAddColor = () => {\n // When no color is provided, react-color sets the picker to #000000.\n // This is the color that should be added in this case.\n const colorToAdd = color \|\| \"#000000\";\n\n onSavedColorAdded?.(colorToAdd);\n setSavedColors([...savedColors, colorToAdd]);\n };\n\n const handleRemoveColor = (val: string, position: number) => {\n if (savedColors[position] === val) {\n const sColors = [...savedColors];\n sColors.splice(position, 1);\n onSavedColorRemoved?.(val);\n setSavedColors(sColors);\n }\n };\n\n const setFocusToContent = (containerRef: HTMLElement \| null) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n }\n };\n\n return (\n <HvFormElement\n id={id}\n name={name}\n disabled={disabled}\n required={required}\n className={cx(classes.root, className)}\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 variableWidth\n className={className}\n expanded={isOpen}\n onToggle={handleToggle}\n onContainerCreation={setFocusToContent}\n classes={{\n root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n selection: cx(iconOnly && css({ padding: 0 })),\n }}\n adornment={\n iconOnly && color ? (\n <Checkbox\n className={classes.headerColorIconOnly}\n color={[color, \"transparent\"]}\n />\n ) : dropdownIcon === \"colorPicker\" ? (\n <ColorPicker className={classes.colorPickerIcon} />\n ) : undefined\n }\n placeholder={\n iconOnly ? undefined : color ? (\n <>\n <Checkbox\n className={classes.headerColorIcon}\n color={[color, \"transparent\"]}\n />\n <HvTypography\n className={classes.headerColorValue}\n variant={activeTheme?.colorPicker.inputValueVariant}\n >\n {color}\n </HvTypography>\n </>\n ) : (\n placeholder\n )\n }\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n >\n <HvPanel className={classes.panel}>\n <div className={classes.colorPicker}>\n {recommendedColorsPosition === \"top\" && (\n <PresetColors\n className={cx(\n (showCustomColors \|\| showSavedColors) &&\n css({\n paddingBottom:\n activeTheme?.colorPicker.recommendedColorsBottomPadding,\n }),\n classes.recommendedColorsRoot\n )}\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels?.recommendedColorsLabel : undefined}\n />\n )}\n {showCustomColors && (\n <Picker\n classes={{\n fields: cx({\n [classes.pickerFields]:\n recommendedColorsPosition === \"bottom\" \|\| showSavedColors,\n }),\n }}\n title={showLabels ? labels?.customColorsLabel : undefined}\n color={color}\n onChange={handleOnChange}\n onChangeComplete={handleOnChangeComplete}\n />\n )}\n {showSavedColors && (\n <SavedColors\n colors={savedColors}\n onAddColor={handleAddColor}\n onClickColor={handleSelect}\n onRemoveColor={handleRemoveColor}\n deleteButtonArialLabel={deleteSavedColorButtonArialLabel}\n />\n )}\n {recommendedColorsPosition === \"bottom\" && (\n <PresetColors\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels?.recommendedColorsLabel : undefined}\n />\n )}\n </div>\n </HvPanel>\n </HvBaseDropdown>\n </HvFormElement>\n );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","props","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","classesProp","value","onChange","onChangeComplete","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleOnChange","handleOnChangeComplete","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","HvFormElement","root","children","labelContainer","_jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","variableWidth","onToggle","onContainerCreation","dropdownRootIconOnly","selection","padding","adornment","Checkbox","headerColorIconOnly","ColorPicker","colorPickerIcon","undefined","_Fragment","headerColorIcon","HvTypography","headerColorValue","variant","colorPicker","inputValueVariant","join","trim","HvPanel","panel","PresetColors","paddingBottom","recommendedColorsBottomPadding","recommendedColorsRoot","colors","onClick","title","Picker","fields","pickerFields","SavedColors","onAddColor","onClickColor","onRemoveColor","deleteButtonArialLabel"],"mappings":"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"}
1	+ {"version":3,"file":"ColorPicker.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ColorState } from \"react-color\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { HvBaseDropdown } from \"@core/components/BaseDropdown\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\n\nimport { Picker } from \"./Picker\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n \"aria-describedby\"?: string;\n /** Class names to be applied. /\n className?: string;\n /* Id to be applied to the form element root node. /\n id?: string;\n /* The form element name. /\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?: React.ReactNode;\n /* Provide additional descriptive text for the form element. /\n description?: React.ReactNode;\n /* Indicates that user input is required on the form element. /\n required?: boolean;\n /* The value color, in HEX format. /\n value?: string;\n /* The default value color, in HEX format. /\n defaultValue?: string;\n /* If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. /\n disabled?: boolean;\n /* If `true` the dropdown starts opened if `false` it starts closed. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* A function to be executed whenever the color changes. /\n onChange?: (color: string) => void;\n /* A function to be executed whenever the color change is complete. /\n onChangeComplete?: (color: string) => void;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvColorPickerClasses;\n /* The placeholder value when nothing is selected. /\n placeholder?: string;\n /* Recommended colors. The colors are HEX values. /\n recommendedColors?: string[];\n /* Recommended colors position. /\n recommendedColorsPosition?: \"top\" \| \"bottom\";\n /* If `true`, the labels are shown. If `false`, they are not shown. /\n showLabels?: boolean;\n /* An object containing all the labels. /\n labels?: {\n recommendedColorsLabel?: string;\n customColorsLabel?: string;\n };\n /* Icon type for the input's end adornment. /\n dropdownIcon?: \"arrow\" \| \"colorPicker\";\n /* If `true`, the input only shows an icon. If `false`, the input shows text and icons. /\n iconOnly?: boolean;\n /* If `true`, the saved colors area is shown. If `false`, it is not shown. /\n showSavedColors?: boolean;\n /* If `true`, the custom colors area is shown. If `false`, it is not shown. /\n showCustomColors?: boolean;\n /* The saved colors. The colors are HEX values. /\n savedColorsValue?: string[];\n /* The default saved colors. The colors are HEX values. /\n defaultSavedColorsValue?: string[];\n /* Callback fired when a new saved color is added. /\n onSavedColorAdded?: (color?: string) => void;\n /* Callback fired when a new saved color is removed. /\n onSavedColorRemoved?: (color?: string) => void;\n /* Aria label to apply to delete saved color button. /\n deleteSavedColorButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n /* Aria label to apply to add saved color button. /\n addSavedColorButtonAriaLabel?: string;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"labels\"] = {\n recommendedColorsLabel: \"Recommended colors:\",\n customColorsLabel: \"Custom colors:\",\n};\n\n/\n A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = (props: HvColorPickerProps) => {\n const {\n id,\n name,\n required = false,\n disabled = false,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n className,\n classes: classesProp,\n value,\n onChange,\n onChangeComplete,\n defaultValue = \"\",\n expanded,\n defaultExpanded = false,\n recommendedColorsPosition = \"top\",\n recommendedColors = [\n \"#95AFE8\",\n \"#E89E5D\",\n \"#83B8A6\",\n \"#70759C\",\n \"#C57E7E\",\n \"#FADA95\",\n \"#ADBFE8\",\n \"#E3B386\",\n \"#9AC6B7\",\n \"#8B90AF\",\n \"#CF9797\",\n \"#FAE1AA\",\n ],\n showLabels = true,\n labels: labelsProp,\n dropdownIcon = \"colorPicker\",\n placeholder = \"Select color...\",\n iconOnly = false,\n showSavedColors = true,\n showCustomColors = true,\n savedColorsValue,\n defaultSavedColorsValue = [],\n onSavedColorAdded,\n onSavedColorRemoved,\n deleteSavedColorButtonArialLabel = \"Delete saved color\",\n addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n } = useDefaultProps(\"HvColorPicker\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const [color, setColor] = useControlled(value, defaultValue);\n const [savedColors, setSavedColors] = useControlled(\n savedColorsValue,\n defaultSavedColorsValue\n );\n const elementId = useUniqueId(id, \"hvdropdown\");\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n setIsOpen(open);\n };\n\n const handleSelect = (val: ColorState \| { hex: string; source: string }) => {\n onChange?.(val.hex);\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChange = (\n val: ColorState \| { hex: string; source: string }\n ) => {\n onChange?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChangeComplete = (\n val: ColorState \| { hex: string; source: string }\n ) => {\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleAddColor = () => {\n // When no color is provided, react-color sets the picker to #000000.\n // This is the color that should be added in this case.\n const colorToAdd = color \|\| \"#000000\";\n\n onSavedColorAdded?.(colorToAdd);\n setSavedColors([...savedColors, colorToAdd]);\n };\n\n const handleRemoveColor = (val: string, position: number) => {\n if (savedColors[position] === val) {\n const sColors = [...savedColors];\n sColors.splice(position, 1);\n onSavedColorRemoved?.(val);\n setSavedColors(sColors);\n }\n };\n\n const setFocusToContent = (containerRef: HTMLElement \| null) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n }\n };\n\n return (\n <HvFormElement\n id={id}\n name={name}\n disabled={disabled}\n required={required}\n className={cx(classes.root, className)}\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 variableWidth\n className={className}\n expanded={isOpen}\n onToggle={handleToggle}\n onContainerCreation={setFocusToContent}\n classes={{\n root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n selection: cx(iconOnly && css({ padding: 0 })),\n }}\n adornment={\n iconOnly && color ? (\n <Checkbox\n className={classes.headerColorIconOnly}\n color={[color, \"transparent\"]}\n />\n ) : dropdownIcon === \"colorPicker\" ? (\n <ColorPicker className={classes.colorPickerIcon} />\n ) : undefined\n }\n placeholder={\n iconOnly ? undefined : color ? (\n <>\n <Checkbox\n className={classes.headerColorIcon}\n color={[color, \"transparent\"]}\n />\n <HvTypography\n className={classes.headerColorValue}\n variant={activeTheme?.colorPicker.inputValueVariant}\n >\n {color}\n </HvTypography>\n </>\n ) : (\n placeholder\n )\n }\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n >\n <HvPanel className={classes.panel}>\n <div className={classes.colorPicker}>\n {recommendedColorsPosition === \"top\" && (\n <PresetColors\n className={cx(\n (showCustomColors \|\| showSavedColors) &&\n css({\n paddingBottom:\n activeTheme?.colorPicker.recommendedColorsBottomPadding,\n }),\n classes.recommendedColorsRoot\n )}\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels?.recommendedColorsLabel : undefined}\n />\n )}\n {showCustomColors && (\n <Picker\n classes={{\n fields: cx({\n [classes.pickerFields]:\n recommendedColorsPosition === \"bottom\" \|\| showSavedColors,\n }),\n }}\n title={showLabels ? labels?.customColorsLabel : undefined}\n color={color}\n onChange={handleOnChange}\n onChangeComplete={handleOnChangeComplete}\n />\n )}\n {showSavedColors && (\n <SavedColors\n colors={savedColors}\n onAddColor={handleAddColor}\n onClickColor={handleSelect}\n onRemoveColor={handleRemoveColor}\n deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n addButtonAriaLabel={addSavedColorButtonAriaLabel}\n />\n )}\n {recommendedColorsPosition === \"bottom\" && (\n <PresetColors\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels?.recommendedColorsLabel : undefined}\n />\n )}\n </div>\n </HvPanel>\n </HvBaseDropdown>\n </HvFormElement>\n );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","props","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","classesProp","value","onChange","onChangeComplete","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","addSavedColorButtonAriaLabel","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleOnChange","handleOnChangeComplete","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","HvFormElement","root","children","labelContainer","_jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","variableWidth","onToggle","onContainerCreation","dropdownRootIconOnly","selection","padding","adornment","Checkbox","headerColorIconOnly","ColorPicker","colorPickerIcon","undefined","_Fragment","headerColorIcon","HvTypography","headerColorValue","variant","colorPicker","inputValueVariant","join","trim","HvPanel","panel","PresetColors","paddingBottom","recommendedColorsBottomPadding","recommendedColorsRoot","colors","onClick","title","Picker","fields","pickerFields","SavedColors","onAddColor","onClickColor","onRemoveColor","deleteButtonAriaLabel","addButtonAriaLabel"],"mappings":"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"}

package/dist/cjs/components/ColorPicker/SavedColors/SavedColors.cjs CHANGED Viewed

@@ -10,7 +10,8 @@ const SavedColors = ({
   onClickColor,
   onAddColor,
   onRemoveColor,
-  deleteButtonArialLabel,
+  deleteButtonAriaLabel,
+  addButtonAriaLabel,
   classes: classesProp
 }) => {
   const {
@@ -29,7 +30,10 @@ const SavedColors = ({
       variant: "secondarySubtle",
       icon: true,
       onClick: onAddColor,
-      children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, {})
+      "aria-label": addButtonAriaLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, {
+        "aria-hidden": true
+      })
     }), colors.map((color, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
       className: classes.swatchRoot,
       children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -48,8 +52,9 @@ const SavedColors = ({
           variant: "secondarySubtle",
           onClick: () => onRemoveColor(color, index),
           tabIndex: 0,
-          "aria-label": deleteButtonArialLabel,
+          "aria-label": deleteButtonAriaLabel,
           children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, {
+            "aria-hidden": true,
             iconSize: "XS"
           })
         })

package/dist/cjs/components/ColorPicker/SavedColors/SavedColors.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SavedColors.cjs","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n colors: string[];\n onClickColor: (color: { hex: string; source: string }) => void;\n onAddColor: () => void;\n onRemoveColor: (color: string, index: number) => void;\n ~~deleteButtonArialLabel~~?: string;\n classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = ({\n colors,\n onClickColor,\n onAddColor,\n onRemoveColor,\n ~~deleteButtonArialLabel~~,\n classes: classesProp,\n}: SavedColorsProps) => {\n const { classes } = useClasses(classesProp);\n\n const handleClick = (hex: string) => {\n onClickColor({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <div className={classes.root}>\n <HvButton\n className={classes.addButton}\n variant=\"secondarySubtle\"\n icon\n onClick={onAddColor}\n >\n <Add />\n </HvButton>\n {colors.map((color, index) => (\n <div\n key={`saved-color-${color}-${index}`}\n className={classes.swatchRoot}\n >\n <div className={classes.swatchWrap}>\n <Swatch\n color={color}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n <div className={classes.removeButtonRoot}>\n <HvButton\n className={classes.removeButton}\n variant=\"secondarySubtle\"\n onClick={() => onRemoveColor(color, index)}\n tabIndex={0}\n aria-label={~~deleteButtonArialLabel~~}\n >\n <CloseXS iconSize=\"XS\" />\n </HvButton>\n </div>\n </div>\n ))}\n </div>\n );\n};\n"],"names":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","~~deleteButtonArialLabel~~","classes","classesProp","useClasses","handleClick","hex","source","className","root","children","_jsx","HvButton","addButton","variant","icon","onClick","Add","map","color","index","swatchRoot","swatchWrap","Swatch","focusStyle","boxShadow","removeButtonRoot","removeButton","tabIndex","CloseXS","iconSize"],"mappings":";;;;;;;~~AAwBO~~,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACO,MAAM;AAChB,QAAA;AAAA,IAAED;AAAAA,EAAAA,IAAYE,mBAAAA,WAAWD,WAAW;AAEpCE,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,yCACE,OAAA;AAAA,IAAKC,WAAWN,QAAQO;AAAAA,IAAKC,UAAA,CAC3BC,2BAAAA,IAACC,iBAAQ;AAAA,MACPJ,WAAWN,QAAQW;AAAAA,MACnBC,SAAQ;AAAA,MACRC,MAAI;AAAA,MACJC,~~SAASjB~~;AAAAA,~~MAAWW~~,~~UAEpBC~~,~~2BAAAA~~,~~IAACM~~,~~gBAAK~~,~~KAAA~~,~~EAAA~~;AAAA,IAAA,~~CACE~~,~~GACTpB~~,~~OAAOqB~~,IAAI,CAACC,OAAOC,0CAClB,OAAA;AAAA,MAEEZ,WAAWN,QAAQmB;AAAAA,MAAWX,WAE9BC,2BAAAA,IAAA,OAAA;AAAA,QAAKH,WAAWN,QAAQoB;AAAAA,QAAWZ,yCAChCa,eAAM;AAAA,UACLJ;AAAAA,UACAH,SAASX;AAAAA,UACTmB,YAAY;AAAA,YACVC,WAAY,4CAA2CN;AAAAA,UACzD;AAAA,QAAA,CACD;AAAA,MAAA,CACE,GACLR,2BAAAA,IAAA,OAAA;AAAA,QAAKH,WAAWN,QAAQwB;AAAAA,QAAiBhB,yCACtCE,iBAAQ;AAAA,UACPJ,WAAWN,QAAQyB;AAAAA,UACnBb,SAAQ;AAAA,UACRE,SAASA,~~MAAMhB~~,~~cAAcmB~~,OAAOC,KAAK;AAAA,UACzCQ,UAAU;AAAA,UACV,~~cAAY3B~~;AAAAA,~~UAAuBS~~,~~yCAElCmB~~,yBAAO;AAAA,YAACC,UAAS;AAAA,UAAA,CAAM;AAAA,QAAA,~~CAChB~~;AAAA,MAAA,CACP,CAAC;AAAA,IAAA,GAtBA,eAAcX,SAASC,OAuB1B,CACN,CAAC;AAAA,EAAA,CACC;AAET;;;"}
1	+ {"version":3,"file":"SavedColors.cjs","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n colors: string[];\n onClickColor: (color: { hex: string; source: string }) => void;\n onAddColor: () => void;\n onRemoveColor: (color: string, index: number) => void;\n deleteButtonAriaLabel?: string;\n addButtonAriaLabel?: string;\n classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = ({\n colors,\n onClickColor,\n onAddColor,\n onRemoveColor,\n deleteButtonAriaLabel,\n addButtonAriaLabel,\n classes: classesProp,\n}: SavedColorsProps) => {\n const { classes } = useClasses(classesProp);\n\n const handleClick = (hex: string) => {\n onClickColor({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <div className={classes.root}>\n <HvButton\n className={classes.addButton}\n variant=\"secondarySubtle\"\n icon\n onClick={onAddColor}\n aria-label={addButtonAriaLabel}\n >\n <Add aria-hidden />\n </HvButton>\n {colors.map((color, index) => (\n <div\n key={`saved-color-${color}-${index}`}\n className={classes.swatchRoot}\n >\n <div className={classes.swatchWrap}>\n <Swatch\n color={color}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n <div className={classes.removeButtonRoot}>\n <HvButton\n className={classes.removeButton}\n variant=\"secondarySubtle\"\n onClick={() => onRemoveColor(color, index)}\n tabIndex={0}\n aria-label={deleteButtonAriaLabel}\n >\n <CloseXS aria-hidden iconSize=\"XS\" />\n </HvButton>\n </div>\n </div>\n ))}\n </div>\n );\n};\n"],"names":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonAriaLabel","addButtonAriaLabel","classes","classesProp","useClasses","handleClick","hex","source","className","root","children","_jsx","HvButton","addButton","variant","icon","onClick","Add","map","color","index","swatchRoot","swatchWrap","Swatch","focusStyle","boxShadow","removeButtonRoot","removeButton","tabIndex","CloseXS","iconSize"],"mappings":";;;;;;;AAyBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACO,MAAM;AAChB,QAAA;AAAA,IAAED;AAAAA,EAAAA,IAAYE,mBAAAA,WAAWD,WAAW;AAEpCE,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,yCACE,OAAA;AAAA,IAAKC,WAAWN,QAAQO;AAAAA,IAAKC,UAAA,CAC3BC,2BAAAA,IAACC,iBAAQ;AAAA,MACPJ,WAAWN,QAAQW;AAAAA,MACnBC,SAAQ;AAAA,MACRC,MAAI;AAAA,MACJC,SAASlB;AAAAA,MACT,cAAYG;AAAAA,MAAmBS,yCAE9BO,qBAAG;AAAA,QAAC,eAAA;AAAA,MAAA,CAAa;AAAA,IAAA,CACV,GACTrB,OAAOsB,IAAI,CAACC,OAAOC,0CAClB,OAAA;AAAA,MAEEZ,WAAWN,QAAQmB;AAAAA,MAAWX,WAE9BC,2BAAAA,IAAA,OAAA;AAAA,QAAKH,WAAWN,QAAQoB;AAAAA,QAAWZ,yCAChCa,eAAM;AAAA,UACLJ;AAAAA,UACAH,SAASX;AAAAA,UACTmB,YAAY;AAAA,YACVC,WAAY,4CAA2CN;AAAAA,UACzD;AAAA,QAAA,CACD;AAAA,MAAA,CACE,GACLR,2BAAAA,IAAA,OAAA;AAAA,QAAKH,WAAWN,QAAQwB;AAAAA,QAAiBhB,yCACtCE,iBAAQ;AAAA,UACPJ,WAAWN,QAAQyB;AAAAA,UACnBb,SAAQ;AAAA,UACRE,SAASA,MAAMjB,cAAcoB,OAAOC,KAAK;AAAA,UACzCQ,UAAU;AAAA,UACV,cAAY5B;AAAAA,UAAsBU,yCAEjCmB,yBAAO;AAAA,YAAC,eAAW;AAAA,YAACC,UAAS;AAAA,UAAA,CAAM;AAAA,QAAA,CAC5B;AAAA,MAAA,CACP,CAAC;AAAA,IAAA,GAtBA,eAAcX,SAASC,OAuB1B,CACN,CAAC;AAAA,EAAA,CACC;AAET;;;"}

package/dist/cjs/components/DropDownMenu/DropDownMenu.cjs CHANGED Viewed

@@ -85,7 +85,7 @@ const HvDropDownMenu = (props) => {
       disabled,
       "aria-label": "Dropdown menu",
       children: icon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, {
-        role: "presentation",
+        "aria-hidden": true,
         color: disabled ? "secondary_60" : void 0
       })
     }),

package/dist/cjs/components/DropDownMenu/DropDownMenu.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropDownMenu.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n HvBaseDropdown,\n HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n /** Icon. /\n icon?: React.ReactElement;\n /\n A list containing the elements to be rendered.\n \n - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - icon: The icon node to be rendered on the left.\n * - showNavIcon: If true renders the navigation icon on the right.\n /\n dataList: HvListValue[];\n /* Placement of the dropdown. /\n placement?: \"left\" \| \"right\";\n /* Disable the portal behavior. The children stay within it's parent DOM hierarchy. /\n disablePortal?: boolean;\n /* Function executed on toggle of the dropdown. Should receive the open status. /\n onToggle?: (event: Event, open: boolean) => void;\n /* Function executed in each onClick. Should received the clicked element. /\n onClick?: (\n event: React.ChangeEvent<HTMLLIElement>,\n value: HvListValue\n ) => void;\n /* Keep the Dropdown Menu opened after clicking one option /\n keepOpened?: boolean;\n /* Defines if the component is disabled. /\n disabled?: boolean;\n /* If true it should be displayed open. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* The variant to be used in the header. /\n category?: HvButtonVariant;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvDropDownMenuClasses;\n}\n\n/\n A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n const {\n id: idProp,\n classes: classesProp,\n className,\n icon,\n placement = \"right\",\n dataList,\n disablePortal = false,\n onToggle,\n onClick,\n keepOpened = true,\n disabled = false,\n expanded,\n defaultExpanded = false,\n category = \"secondaryGhost\",\n ...others\n } = useDefaultProps(\"HvDropDownMenu\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const id = useUniqueId(idProp, \"dropdown-menu\");\n const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n const listId = setId(id, \"list\");\n\n const handleClose = (event: ChangeEvent) => {\n // this will only run if uncontrolled\n setOpen(false);\n onToggle?.(event as any, false);\n };\n\n // If the ESCAPE key is pressed inside the list, the close handler must be called.\n const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Tab\")) {\n const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n if (node) setTimeout(() => node.focus(), 0);\n handleClose(event as any);\n }\n event.preventDefault();\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef\n ) => {\n containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n };\n\n const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n style: {\n zIndex: theme.zIndices.tooltip,\n width: \"auto\",\n position: \"relative\",\n },\n };\n\n return (\n <HvBaseDropdown\n id={id}\n className={cx(classes.container, className)}\n classes={{\n root: classes.root,\n container: classes.baseContainer,\n }}\n expanded={open && !disabled}\n component={\n <HvButton\n icon\n variant={category}\n id={setId(id, \"icon-button\")}\n className={cx(classes.icon, { [classes.iconSelected]: open })}\n aria-expanded={open}\n disabled={disabled}\n aria-label=\"Dropdown menu\"\n >\n {icon \|\| (\n <MoreOptionsVertical\n ~~role=\"presentation~~\"\n color={disabled ? \"secondary_60\" : undefined}\n />\n )}\n </HvButton>\n }\n aria-haspopup=\"menu\"\n placement={placement}\n variableWidth\n disablePortal={disablePortal}\n onToggle={(e, s) => {\n // this will only run if uncontrolled\n setOpen(s);\n onToggle?.(e, s);\n }}\n disabled={disabled}\n onContainerCreation={setFocusToContent}\n popperProps={popperStyle}\n {...others}\n >\n <HvPanel className={classes.menuListRoot}>\n <HvList\n id={listId}\n values={dataList}\n selectable={false}\n condensed={condensed}\n onClick={(event, item) => {\n if (!keepOpened) handleClose(event);\n onClick?.(event, item);\n }}\n onKeyDown={handleKeyDown}\n classes={{\n root: classes.menuList,\n }}\n />\n </HvPanel>\n </HvBaseDropdown>\n );\n};\n"],"names":["HvDropDownMenu","props","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","useDefaultProps","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKey","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","HvBaseDropdown","container","root","baseContainer","component","HvButton","variant","iconSelected","children","_jsx","MoreOptionsVertical","~~role","~~color","undefined","variableWidth","e","s","onContainerCreation","popperProps","HvPanel","menuListRoot","HvList","values","selectable","item","onKeyDown","menuList"],"mappings":";;;;;;;;;;;;;;;;;AAqEaA,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC,IAAIC;AAAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZC;AAAAA,IACAC,gBAAgB;AAAA,IAChBC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC,WAAW;AAAA,IACXC;AAAAA,IACAC,kBAAkB;AAAA,IAClBC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,kBAAkBlB,KAAK;AAErC,QAAA;AAAA,IAAEG;AAAAA,IAASgB;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWhB,WAAW;AACxC,QAAA,CAACiB,MAAMC,OAAO,IAAIC,cAAAA,cAAcT,UAAUU,QAAQT,eAAe,CAAC;AAClEd,QAAAA,KAAKwB,YAAAA,YAAYvB,QAAQ,eAAe;AAC9C,QAAMwB,aAAaC,uBAAAA,iBAAiBC,MAAAA,MAAM3B,IAAI,aAAa,CAAC;AAEtD4B,QAAAA,SAASD,MAAAA,MAAM3B,IAAI,MAAM;AAEzB6B,QAAAA,cAAcA,CAACC,UAAuB;AAE1CT,YAAQ,KAAK;AACbZ,yCAAWqB,OAAc;AAAA,EAAK;AAIhC,QAAMC,gBAA2CD,CAAU,UAAA;AACrDE,QAAAA,cAAAA,MAAMF,OAAO,KAAK,GAAG;AACvB,YAAMG,OAAOH,MAAMI,WAAWT,WAAWU,YAAYV,WAAWW;AAC5DH,UAAAA;AAAMI,mBAAW,MAAMJ,KAAKK,MAAM,GAAG,CAAC;AAC1CT,kBAAYC,KAAa;AAAA,IAC3B;AACAA,UAAMS,eAAe;AAAA,EAAA;AAGvB,QAAMC,oBACJC,CACG,iBAAA;;AACHA,uDAAcC,qBAAqB,MAAM,OAAzCD,mBAA6CH;AAAAA,EAAM;AAGrD,QAAMK,YAAYC,MAAAA,QAAQ,MAAMrC,SAASsC,MAAOC,CAAAA,OAAO,CAACA,GAAGzC,IAAI,GAAG,CAACE,QAAQ,CAAC;AAC5E,QAAMwC,cAAkD;AAAA,IACtDC,OAAO;AAAA,MACLC,QAAQC,YAAAA,MAAMC,SAASC;AAAAA,MACvBC,OAAO;AAAA,MACPC,UAAU;AAAA,IACZ;AAAA,EAAA;AAGF,wCACGC,aAAAA,gBAAc;AAAA,IACbvD;AAAAA,IACAI,WAAWc,GAAGhB,QAAQsD,WAAWpD,SAAS;AAAA,IAC1CF,SAAS;AAAA,MACPuD,MAAMvD,QAAQuD;AAAAA,MACdD,WAAWtD,QAAQwD;AAAAA,IACrB;AAAA,IACA7C,UAAUO,QAAQ,CAACR;AAAAA,IACnB+C,0CACGC,iBAAQ;AAAA,MACPvD,MAAI;AAAA,MACJwD,SAAS9C;AAAAA,MACTf,IAAI2B,MAAAA,MAAM3B,IAAI,aAAa;AAAA,MAC3BI,WAAWc,GAAGhB,QAAQG,MAAM;AAAA,QAAE,CAACH,QAAQ4D,YAAY,GAAG1C;AAAAA,MAAAA,CAAM;AAAA,MAC5D,iBAAeA;AAAAA,MACfR;AAAAA,MACA,cAAW;AAAA,MAAemD,UAEzB1D,QACC2D,2BAAAA,IAACC,qCAAmB;AAAA,~~QAClBC~~,~~MAAK~~;AAAA,~~QACLC~~,~~OAAOvD~~,WAAW,~~iBAAiBwD~~;AAAAA,MAAAA,CACpC;AAAA,IAAA,CAEK;AAAA,IAEZ,iBAAc;AAAA,~~IACd9D~~;AAAAA,~~IACA+D~~,eAAa;AAAA,~~IACb7D~~;AAAAA,IACAC,UAAUA,~~CAAC6D~~,GAAGC,MAAM;~~AAElBlD~~,~~cAAQkD~~,CAAC;~~AACT9D~~,~~2CAAW6D~~,GAAGC;AAAAA,IAChB;AAAA,~~IACA3D~~;AAAAA,~~IACA4D~~,~~qBAAqBhC~~;AAAAA,~~IACrBiC~~,~~aAAa1B~~;AAAAA,IAAY,GACrB/B;AAAAA,IAAM+C,~~yCAETW~~,eAAO;AAAA,~~MAACtE~~,WAAWF,~~QAAQyE~~;AAAAA,~~MAAaZ~~,~~yCACtCa~~,aAAM;AAAA,~~QACL5E~~,IAAI4B;AAAAA,~~QACJiD~~,~~QAAQtE~~;AAAAA,~~QACRuE~~,YAAY;AAAA,~~QACZnC~~;AAAAA,QACAjC,SAASA,CAACoB,~~OAAOiD~~,SAAS;AACxB,cAAI,~~CAACpE~~;AAAYkB,wBAAYC,KAAK;AAClCpB,6CAAUoB,~~OAAOiD~~;AAAAA,QACnB;AAAA,QACAC,~~WAAWjD~~;AAAAA,QACX7B,SAAS;AAAA,UACPuD,MAAMvD,~~QAAQ+E~~;AAAAA,QAChB;AAAA,MAAA,CACD;AAAA,IAAA,CACM;AAAA,EAAA,CACK;AAEpB;;;"}
1	+ {"version":3,"file":"DropDownMenu.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n HvBaseDropdown,\n HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n /** Icon. /\n icon?: React.ReactElement;\n /\n A list containing the elements to be rendered.\n \n - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - icon: The icon node to be rendered on the left.\n * - showNavIcon: If true renders the navigation icon on the right.\n /\n dataList: HvListValue[];\n /* Placement of the dropdown. /\n placement?: \"left\" \| \"right\";\n /* Disable the portal behavior. The children stay within it's parent DOM hierarchy. /\n disablePortal?: boolean;\n /* Function executed on toggle of the dropdown. Should receive the open status. /\n onToggle?: (event: Event, open: boolean) => void;\n /* Function executed in each onClick. Should received the clicked element. /\n onClick?: (\n event: React.ChangeEvent<HTMLLIElement>,\n value: HvListValue\n ) => void;\n /* Keep the Dropdown Menu opened after clicking one option /\n keepOpened?: boolean;\n /* Defines if the component is disabled. /\n disabled?: boolean;\n /* If true it should be displayed open. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* The variant to be used in the header. /\n category?: HvButtonVariant;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvDropDownMenuClasses;\n}\n\n/\n A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n const {\n id: idProp,\n classes: classesProp,\n className,\n icon,\n placement = \"right\",\n dataList,\n disablePortal = false,\n onToggle,\n onClick,\n keepOpened = true,\n disabled = false,\n expanded,\n defaultExpanded = false,\n category = \"secondaryGhost\",\n ...others\n } = useDefaultProps(\"HvDropDownMenu\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const id = useUniqueId(idProp, \"dropdown-menu\");\n const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n const listId = setId(id, \"list\");\n\n const handleClose = (event: ChangeEvent) => {\n // this will only run if uncontrolled\n setOpen(false);\n onToggle?.(event as any, false);\n };\n\n // If the ESCAPE key is pressed inside the list, the close handler must be called.\n const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Tab\")) {\n const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n if (node) setTimeout(() => node.focus(), 0);\n handleClose(event as any);\n }\n event.preventDefault();\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef\n ) => {\n containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n };\n\n const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n style: {\n zIndex: theme.zIndices.tooltip,\n width: \"auto\",\n position: \"relative\",\n },\n };\n\n return (\n <HvBaseDropdown\n id={id}\n className={cx(classes.container, className)}\n classes={{\n root: classes.root,\n container: classes.baseContainer,\n }}\n expanded={open && !disabled}\n component={\n <HvButton\n icon\n variant={category}\n id={setId(id, \"icon-button\")}\n className={cx(classes.icon, { [classes.iconSelected]: open })}\n aria-expanded={open}\n disabled={disabled}\n aria-label=\"Dropdown menu\"\n >\n {icon \|\| (\n <MoreOptionsVertical\n aria-hidden\n color={disabled ? \"secondary_60\" : undefined}\n />\n )}\n </HvButton>\n }\n aria-haspopup=\"menu\"\n placement={placement}\n variableWidth\n disablePortal={disablePortal}\n onToggle={(e, s) => {\n // this will only run if uncontrolled\n setOpen(s);\n onToggle?.(e, s);\n }}\n disabled={disabled}\n onContainerCreation={setFocusToContent}\n popperProps={popperStyle}\n {...others}\n >\n <HvPanel className={classes.menuListRoot}>\n <HvList\n id={listId}\n values={dataList}\n selectable={false}\n condensed={condensed}\n onClick={(event, item) => {\n if (!keepOpened) handleClose(event);\n onClick?.(event, item);\n }}\n onKeyDown={handleKeyDown}\n classes={{\n root: classes.menuList,\n }}\n />\n </HvPanel>\n </HvBaseDropdown>\n );\n};\n"],"names":["HvDropDownMenu","props","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","useDefaultProps","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKey","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","HvBaseDropdown","container","root","baseContainer","component","HvButton","variant","iconSelected","children","_jsx","MoreOptionsVertical","color","undefined","variableWidth","e","s","onContainerCreation","popperProps","HvPanel","menuListRoot","HvList","values","selectable","item","onKeyDown","menuList"],"mappings":"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"}

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const uniqueId = require("lodash/uniqueId");
 const accept = require("attr-accept");
-const keyboardUtils = require("../../../utils/keyboardUtils.cjs");
 const setId = require("../../../utils/setId.cjs");
 const useUniqueId = require("../../../hooks/useUniqueId.cjs");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
@@ -67,7 +66,6 @@ const HvDropZone = ({
     children: [!hideLabels && /* @__PURE__ */ jsxRuntime.jsxs("div", {
       id,
       className: classes.dropZoneLabelsGroup,
-      "aria-label": "File Dropzone",
       children: [/* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
         id: setId.setId(id, "input-file-label"),
         htmlFor: setId.setId(id, "input-file"),
@@ -78,50 +76,13 @@ const HvDropZone = ({
         children: [Number.isInteger(maxFileSize) && `${labels == null ? void 0 : labels.sizeWarning} ${utils.convertUnits(maxFileSize)}`, (labels == null ? void 0 : labels.acceptedFiles) && labels.acceptedFiles, !(labels == null ? void 0 : labels.acceptedFiles) && acceptedFiles.length > 0 && ` (${acceptedFiles.join(", ")})`]
       })]
     }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      id: setId.setId(id, "button"),
+      id: setId.setId(id, "input-file-container"),
       className: cx(classes.dropZoneContainer, {
         [classes.dragAction]: dragState,
         [classes.dropZoneContainerDisabled]: disabled
       }),
-      role: "button",
-      tabIndex: 0,
-      onDragEnter: (event) => {
-        if (!disabled) {
-          enterDropArea();
-          event.stopPropagation();
-          event.preventDefault();
-        }
-      },
-      onDragLeave: leaveDropArea,
-      onDropCapture: leaveDropArea,
-      onDragOver: (event) => {
-        if (!disabled) {
-          enterDropArea();
-          event.stopPropagation();
-          event.preventDefault();
-        }
-      },
-      onDrop: (event) => {
-        if (!disabled) {
-          const {
-            files
-          } = event.dataTransfer;
-          if (multiple === true || files.length === 1) {
-            event.stopPropagation();
-            event.preventDefault();
-            onChangeHandler(files);
-          }
-        }
-      },
-      onKeyDown: (e) => {
-        var _a;
-        if (keyboardUtils.isKey(e, "Enter") || keyboardUtils.isKey(e, "Space")) {
-          (_a = inputRef.current) == null ? void 0 : _a.click();
-        }
-      },
       children: [/* @__PURE__ */ jsxRuntime.jsx("input", {
         id: setId.setId(id, "input-file"),
-        tabIndex: -1,
         className: classes.inputArea,
         type: "file",
         multiple,
@@ -138,6 +99,34 @@ const HvDropZone = ({
             onChangeHandler(inputRef.current.files);
           }
         },
+        onDragEnter: (event) => {
+          if (!disabled) {
+            enterDropArea();
+            event.stopPropagation();
+            event.preventDefault();
+          }
+        },
+        onDragLeave: leaveDropArea,
+        onDropCapture: leaveDropArea,
+        onDragOver: (event) => {
+          if (!disabled) {
+            enterDropArea();
+            event.stopPropagation();
+            event.preventDefault();
+          }
+        },
+        onDrop: (event) => {
+          if (!disabled) {
+            const {
+              files
+            } = event.dataTransfer;
+            if (multiple === true || files.length === 1) {
+              event.stopPropagation();
+              event.preventDefault();
+              onChangeHandler(files);
+            }
+          }
+        },
         ref: inputRef,
         accept: acceptedFiles.join(","),
         ...inputProps