npm - @hitachivantara/uikit-react-core - Versions diffs - 5.80.1 → 5.81.0 - Mend

@hitachivantara/uikit-react-core 5.80.1 → 5.81.0

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

Files changed (587) hide show

package/dist/esm/Header/Navigation/useSelectionPath.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSelectionPath.js","sources":["../../../../src/Header/Navigation/useSelectionPath.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport interface HvHeaderNavigationItemProp {\n id: string;\n label: string;\n path?: string;\n href?: string;\n target?: string;\n data?: HvHeaderNavigationItemProp[];\n}\n\nconst getSelectionPath = (\n data: HvHeaderNavigationItemProp[] \| undefined,\n selectedId: string \| undefined,\n selection: string[] = [],\n idx = -1,\n parent: HvHeaderNavigationItemProp[] = [],\n): string[] => {\n data?.forEach((item: HvHeaderNavigationItemProp, i) => {\n const hasData = item.data?.length;\n\n const isSelected = item.id === selectedId;\n\n if (isSelected)\n selection.push(...(idx > -1 ? [parent[idx].id] : []), item.id);\n\n if (hasData) getSelectionPath(item.data, selectedId, selection, i, data);\n });\n\n return selection;\n};\n\nexport const useSelectionPath = (\n data: HvHeaderNavigationItemProp[],\n selectedId?: string,\n): string[] => {\n const [selectionPath, setSelectionPath] = useState<string[]>([]);\n\n useEffect(() => {\n const path = getSelectionPath(data, selectedId);\n\n setSelectionPath(path);\n }, [data, selectedId]);\n\n return selectionPath;\n};\n"],"names":[],"mappings":";AAWA,MAAM,mBAAmB,CACvB,MACA,YACA,YAAsB,IACtB,MAAM,IACN,SAAuC,OAC1B;AACP,QAAA,QAAQ,CAAC,MAAkC,MAAM;AAC/C,UAAA,UAAU,KAAK,MAAM;AAErB,UAAA,aAAa,KAAK,OAAO;AAE3B,QAAA;AACF,gBAAU,KAAK,GAAI,MAAM,KAAK,CAAC,OAAO,GAAG,EAAE,EAAE,IAAI,~~CAAC~~,~~GAAI,~~KAAK,EAAE;AAE/D,QAAI,QAA0B,kBAAA,KAAK,MAAM,YAAY,WAAW,GAAG,IAAI;AAAA,EAAA,CACxE;AAEM,SAAA;AACT;AAEa,MAAA,mBAAmB,CAC9B,MACA,eACa;AACb,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAmB,CAAE~~,CAAA~~;AAE/D,YAAU,MAAM;AACR,UAAA,OAAO,iBAAiB,MAAM,UAAU;AAE9C,qBAAiB,IAAI;AAAA,EAAA,GACpB,CAAC,MAAM,UAAU,CAAC;AAEd,SAAA;AACT;"}
1	+ {"version":3,"file":"useSelectionPath.js","sources":["../../../../src/Header/Navigation/useSelectionPath.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport interface HvHeaderNavigationItemProp {\n id: string;\n label: string;\n path?: string;\n href?: string;\n target?: string;\n data?: HvHeaderNavigationItemProp[];\n}\n\nconst getSelectionPath = (\n data: HvHeaderNavigationItemProp[] \| undefined,\n selectedId: string \| undefined,\n selection: string[] = [],\n idx = -1,\n parent: HvHeaderNavigationItemProp[] = [],\n): string[] => {\n data?.forEach((item: HvHeaderNavigationItemProp, i) => {\n const hasData = item.data?.length;\n\n const isSelected = item.id === selectedId;\n\n if (isSelected)\n selection.push(...(idx > -1 ? [parent[idx].id] : []), item.id);\n\n if (hasData) getSelectionPath(item.data, selectedId, selection, i, data);\n });\n\n return selection;\n};\n\nexport const useSelectionPath = (\n data: HvHeaderNavigationItemProp[],\n selectedId?: string,\n): string[] => {\n const [selectionPath, setSelectionPath] = useState<string[]>([]);\n\n useEffect(() => {\n const path = getSelectionPath(data, selectedId);\n\n setSelectionPath(path);\n }, [data, selectedId]);\n\n return selectionPath;\n};\n"],"names":[],"mappings":";AAWA,MAAM,mBAAmB,CACvB,MACA,YACA,YAAsB,IACtB,MAAM,IACN,SAAuC,OAC1B;AACP,QAAA,QAAQ,CAAC,MAAkC,MAAM;AAC/C,UAAA,UAAU,KAAK,MAAM;AAErB,UAAA,aAAa,KAAK,OAAO;AAE3B,QAAA;AACF,gBAAU,KAAK,GAAI,MAAM,KAAK,CAAC,OAAO,GAAG,EAAE,EAAE,IAAI,IAAK,KAAK,EAAE;AAE/D,QAAI,QAA0B,kBAAA,KAAK,MAAM,YAAY,WAAW,GAAG,IAAI;AAAA,EAAA,CACxE;AAEM,SAAA;AACT;AAEa,MAAA,mBAAmB,CAC9B,MACA,eACa;AACb,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAmB,CAAA,CAAE;AAE/D,YAAU,MAAM;AACR,UAAA,OAAO,iBAAiB,MAAM,UAAU;AAE9C,qBAAiB,IAAI;AAAA,EAAA,GACpB,CAAC,MAAM,UAAU,CAAC;AAEd,SAAA;AACT;"}

package/dist/esm/Header/Navigation/utils/FocusContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FocusContext.js","sources":["../../../../../src/Header/Navigation/utils/FocusContext.tsx"],"sourcesContent":["import { createContext, useMemo, useReducer } from \"react\";\n\ntype Action = { type: \"setItemFocused\"; itemFocused: EventTarget & Element };\n\nconst reducer: React.Reducer<FocusContextType, Action> = (state, action) => {\n switch (action.type) {\n case \"setItemFocused\":\n return { itemFocused: action.itemFocused };\n default:\n return state;\n }\n};\n\nconst initialState = { itemFocused: undefined, dispatch: undefined };\n\ntype FocusContextType = {\n itemFocused?: EventTarget & Element;\n dispatch?: React.Dispatch<Action>;\n};\n\nexport const FocusContext = createContext<FocusContextType>(initialState);\n\nexport const FocusProvider = ({ children }: { children?: React.ReactNode }) => {\n const [state, dispatch] = useReducer(reducer, initialState);\n const contextValue = useMemo(\n () => ({ ...state, dispatch }),\n [state, dispatch],\n );\n\n return (\n <FocusContext.Provider value={contextValue}>\n {children}\n </FocusContext.Provider>\n );\n};\n"],"names":[],"mappings":";;AAIA,MAAM,UAAmD,CAAC,OAAO,WAAW;AAC1E,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACI,aAAA,EAAE,aAAa,OAAO;~~IAC/B~~;AACS,aAAA;AAAA,~~EACX~~;~~AACF~~;AAEA,MAAM,eAAe,EAAE,aAAa,QAAW,UAAU;~~AAO5C~~,MAAA,eAAe,cAAgC,YAAY;AAEjE,MAAM,gBAAgB,CAAC,EAAE,eAA+C;AAC7E,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,SAAS,YAAY;AAC1D,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,GAAG,OAAO;IACnB,CAAC,OAAO,QAAQ;AAAA,~~EAAA~~;~~AAGlB~~,6BACG,aAAa,UAAb,EAAsB,OAAO,cAC3B,~~SACH,CAAA~~;AAEJ;"}
1	+ {"version":3,"file":"FocusContext.js","sources":["../../../../../src/Header/Navigation/utils/FocusContext.tsx"],"sourcesContent":["import { createContext, useMemo, useReducer } from \"react\";\n\ntype Action = { type: \"setItemFocused\"; itemFocused: EventTarget & Element };\n\nconst reducer: React.Reducer<FocusContextType, Action> = (state, action) => {\n switch (action.type) {\n case \"setItemFocused\":\n return { itemFocused: action.itemFocused };\n default:\n return state;\n }\n};\n\nconst initialState = { itemFocused: undefined, dispatch: undefined };\n\ntype FocusContextType = {\n itemFocused?: EventTarget & Element;\n dispatch?: React.Dispatch<Action>;\n};\n\nexport const FocusContext = createContext<FocusContextType>(initialState);\n\nexport const FocusProvider = ({ children }: { children?: React.ReactNode }) => {\n const [state, dispatch] = useReducer(reducer, initialState);\n const contextValue = useMemo(\n () => ({ ...state, dispatch }),\n [state, dispatch],\n );\n\n return (\n <FocusContext.Provider value={contextValue}>\n {children}\n </FocusContext.Provider>\n );\n};\n"],"names":[],"mappings":";;AAIA,MAAM,UAAmD,CAAC,OAAO,WAAW;AAC1E,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACI,aAAA,EAAE,aAAa,OAAO,YAAY;AAAA,IAC3C;AACS,aAAA;AAAA,EAAA;AAEb;AAEA,MAAM,eAAe,EAAE,aAAa,QAAW,UAAU,OAAU;AAOtD,MAAA,eAAe,cAAgC,YAAY;AAEjE,MAAM,gBAAgB,CAAC,EAAE,eAA+C;AAC7E,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,SAAS,YAAY;AAC1D,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,GAAG,OAAO;IACnB,CAAC,OAAO,QAAQ;AAAA,EAClB;AAEA,6BACG,aAAa,UAAb,EAAsB,OAAO,cAC3B,UACH;AAEJ;"}

package/dist/esm/IconButton/IconButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.js","sources":["../../../src/IconButton/IconButton.tsx"],"sourcesContent":["import { useDefaultProps } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { HvTooltip, HvTooltipProps } from \"../Tooltip\";\nimport {\n fixedForwardRef,\n PolymorphicComponentRef,\n PolymorphicRef,\n} from \"../types/generic\";\n\nexport type HvIconButtonProps<C extends React.ElementType = \"button\"> =\n PolymorphicComponentRef<\n C,\n Omit<\n HvButtonProps<C>,\n \| \"icon\"\n \| \"focusableWhenDisabled\"\n \| \"title\"\n \| \"startIcon\"\n \| \"endIcon\"\n \| \"children\"\n \| \"ref\"\n \| \"component\"\n > & {\n /** Label to be displayed in the tooltip when hovered. This label will be used as the button's `aria-label`. /\n title: React.ReactNode;\n /* Number of milliseconds to wait before showing the tooltip. @default 500 /\n enterDelay?: HvTooltipProps[\"enterDelay\"];\n /* Tooltip placement. @default top /\n placement?: HvTooltipProps[\"placement\"];\n /* Extra tooltip properties. /\n tooltipProps?: Omit<Partial<HvTooltipProps>, \"children\">;\n }\n >;\n\n/\n The `HvIconButton` component wraps a `HvTooltip` with a label around a `HvButton` with only an icon as its content.\n * As defined by Design System, a tooltip with the button’s label should always be displayed when hovering an icon only button.\n * This component provides this behavior out of the box.\n */\nexport const HvIconButton = fixedForwardRef(function HvIconButton<\n C extends React.ElementType = \"button\",\n>(props: HvIconButtonProps<C>, ref: PolymorphicRef<C>) {\n const {\n title,\n placement = \"top\",\n enterDelay = 500,\n tooltipProps,\n ...others\n } = useDefaultProps(\"HvIconButton\", props);\n\n return (\n <HvTooltip\n title={title}\n enterDelay={enterDelay}\n placement={placement}\n {...tooltipProps}\n >\n <HvButton\n icon\n ref={ref}\n focusableWhenDisabled\n {...(others as HvButtonProps)}\n />\n </HvTooltip>\n );\n});\n"],"names":["HvIconButton"],"mappings":";;;;;AAwCO,MAAM,eAAe,gBAAgB,SAASA,cAEnD,OAA6B,KAAwB;AAC/C,QAAA;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAGvC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ;AAAA,UACA,uBAAqB;AAAA,UACpB,GAAI;AAAA,QAAA;AAAA,~~MACP~~;AAAA,~~IAAA~~;AAAA,~~EAAA~~;~~AAGN~~,CAAC;"}
1	+ {"version":3,"file":"IconButton.js","sources":["../../../src/IconButton/IconButton.tsx"],"sourcesContent":["import { useDefaultProps } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { HvTooltip, HvTooltipProps } from \"../Tooltip\";\nimport {\n fixedForwardRef,\n PolymorphicComponentRef,\n PolymorphicRef,\n} from \"../types/generic\";\n\nexport type HvIconButtonProps<C extends React.ElementType = \"button\"> =\n PolymorphicComponentRef<\n C,\n Omit<\n HvButtonProps<C>,\n \| \"icon\"\n \| \"focusableWhenDisabled\"\n \| \"title\"\n \| \"startIcon\"\n \| \"endIcon\"\n \| \"children\"\n \| \"ref\"\n \| \"component\"\n > & {\n /** Label to be displayed in the tooltip when hovered. This label will be used as the button's `aria-label`. /\n title: React.ReactNode;\n /* Number of milliseconds to wait before showing the tooltip. @default 500 /\n enterDelay?: HvTooltipProps[\"enterDelay\"];\n /* Tooltip placement. @default top /\n placement?: HvTooltipProps[\"placement\"];\n /* Extra tooltip properties. /\n tooltipProps?: Omit<Partial<HvTooltipProps>, \"children\">;\n }\n >;\n\n/\n The `HvIconButton` component wraps a `HvTooltip` with a label around a `HvButton` with only an icon as its content.\n * As defined by Design System, a tooltip with the button’s label should always be displayed when hovering an icon only button.\n * This component provides this behavior out of the box.\n */\nexport const HvIconButton = fixedForwardRef(function HvIconButton<\n C extends React.ElementType = \"button\",\n>(props: HvIconButtonProps<C>, ref: PolymorphicRef<C>) {\n const {\n title,\n placement = \"top\",\n enterDelay = 500,\n tooltipProps,\n ...others\n } = useDefaultProps(\"HvIconButton\", props);\n\n return (\n <HvTooltip\n title={title}\n enterDelay={enterDelay}\n placement={placement}\n {...tooltipProps}\n >\n <HvButton\n icon\n ref={ref}\n focusableWhenDisabled\n {...(others as HvButtonProps)}\n />\n </HvTooltip>\n );\n});\n"],"names":["HvIconButton"],"mappings":";;;;;AAwCO,MAAM,eAAe,gBAAgB,SAASA,cAEnD,OAA6B,KAAwB;AAC/C,QAAA;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAGvC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ;AAAA,UACA,uBAAqB;AAAA,UACpB,GAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IACP;AAAA,EACF;AAEJ,CAAC;"}

package/dist/esm/InlineEditor/InlineEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useEnhancedEffect } from \"../hooks/useEnhancedEffect\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport {\n fixedForwardRef,\n PolymorphicComponentRef,\n PolymorphicRef,\n} from \"../types/generic\";\nimport {\n HvTypography,\n HvTypographyProps,\n HvTypographyVariants,\n} from \"../Typography\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport type HvInlineEditorProps<C extends React.ElementType = typeof HvInput> =\n PolymorphicComponentRef<\n C,\n {\n /** The value of the form element. /\n value?: string;\n /* The default value of the form element. /\n defaultValue?: string;\n /* Whether the Edit icon should always be visible /\n showIcon?: boolean;\n /* Variant of the HvTypography to display /\n variant?: HvTypographyVariants;\n /* Called when the input is blurred. /\n onBlur?: (\n event: React.FocusEvent<HTMLTextAreaElement \| HTMLInputElement>,\n value: string,\n ) => void;\n /* Called when the input value changes. /\n onChange?: (event: React.SyntheticEvent, value: string) => void;\n /* Called when there's a keydown event on the input. /\n onKeyDown?: (\n event:\n \| React.KeyboardEvent<HTMLTextAreaElement \| HTMLInputElement>\n \| React.MouseEvent,\n value: string,\n ) => void;\n /* Props passed to the HvButton component /\n buttonProps?: HvButtonProps;\n /* Props passed to the HvTypography text component /\n typographyProps?: HvTypographyProps;\n /* Whether the editor is disabled or not. /\n disabled?: boolean;\n /* A Jss Object used to override or extend the styles applied to the empty state component. /\n classes?: HvInlineEditorClasses;\n /* The placeholder value of the input. /\n placeholder?: string;\n }\n >;\n\n/\n An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = fixedForwardRef(function HvInlineEditor<\n C extends React.ElementType = typeof HvInput,\n>(props: HvInlineEditorProps<C>, ref: PolymorphicRef<C>) {\n const {\n className,\n classes: classesProp,\n value: valueProp,\n defaultValue = \"\",\n showIcon,\n component: InputComponent = HvInput,\n variant = \"body\",\n placeholder = \"Enter text\",\n onBlur,\n onChange,\n onKeyDown,\n buttonProps,\n typographyProps,\n disabled,\n ...others\n } = useDefaultProps(\"HvInlineEditor\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const [value, setValue] = useControlled(valueProp, defaultValue);\n const [editMode, setEditMode] = useState(false);\n const [cachedValue, setCachedValue] = useState(value);\n const inputRef = useRef<HTMLInputElement>();\n const { activeTheme } = useTheme();\n\n const typographyStyles = activeTheme?.typography[variant] \|\| {};\n const { lineHeight } = typographyStyles;\n\n useEnhancedEffect(() => {\n const input = inputRef.current;\n if (editMode && input) {\n input.focus();\n input.select();\n }\n }, [editMode]);\n\n const handleClick = () => {\n setEditMode(true);\n setCachedValue(value);\n };\n\n const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n setEditMode(false);\n\n const newValue = value \|\| cachedValue; // empty values should be ignored\n setValue(newValue);\n onBlur?.(event, newValue);\n };\n\n const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n let newValue = value;\n if (isKey(event, \"Esc\")) {\n newValue = cachedValue;\n setEditMode(false);\n setValue(newValue);\n }\n onKeyDown?.(event, newValue);\n };\n\n const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n setValue(val);\n onChange?.(event, val);\n };\n\n return (\n <div className={cx(classes.root, className)}>\n {editMode && !disabled ? (\n <InputComponent\n ref={ref}\n inputRef={inputRef}\n classes={{\n root: classes.inputRoot,\n input: classes.input,\n inputBorderContainer: classes.inputBorderContainer,\n }}\n inputProps={{\n style: {\n ...typographyStyles,\n height: InputComponent === HvInput ? lineHeight : undefined,\n },\n }}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n {...others}\n />\n ) : (\n <HvButton\n variant=\"secondaryGhost\"\n overrideIconColors={false}\n endIcon={\n <Edit\n color=\"secondary_60\"\n className={cx(classes.icon, {\n [classes.iconVisible]: showIcon,\n })}\n />\n }\n className={cx(classes.button, {\n [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n })}\n onClick={handleClick}\n disabled={disabled}\n {...buttonProps}\n >\n <HvTypography\n variant={variant}\n noWrap\n className={cx(classes.text, { [classes.textEmpty]: !value })}\n {...typographyProps}\n >\n {value \|\| placeholder}\n </HvTypography>\n </HvButton>\n )}\n </div>\n );\n});\n"],"names":["HvInlineEditor"],"mappings":";;;;;;;;;;;;;AAwEO,MAAM,iBAAiB,gBAAgB,SAASA,gBAErD,OAA+B,KAAwB;AACjD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA,WAAW,iBAAiB;AAAA,IAC5B,UAAU;AAAA,IACV,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,~~GAAG~~,~~IAAI,~~WAAW,WAAW;AAC9C,QAAM,CAAC,OAAO,QAAQ,IAAI,cAAc,WAAW,YAAY;AAC/D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,WAAW;~~AACX~~,QAAA,EAAE,~~gBAAgB~~;~~AAExB~~,QAAM,mBAAmB,aAAa,WAAW,OAAO,KAAK,~~CAAA~~;~~AACvD~~,QAAA,EAAE,~~WAAe,IAAA~~;AAEvB,oBAAkB,MAAM;AACtB,UAAM,QAAQ,SAAS;AACvB,QAAI,YAAY,OAAO;AACrB,YAAM,MAAM;AACZ,YAAM,OAAO;AAAA,~~IACf~~;AAAA,~~EAAA~~,GACC,CAAC,QAAQ,CAAC;AAEb,QAAM,cAAc,MAAM;AACxB,gBAAY,IAAI;AAChB,mBAAe,KAAK;AAAA,~~EAAA~~;~~AAGhB~~,QAAA,aAAqC,CAAC,UAAU;AACpD,gBAAY,KAAK;AAEjB,UAAM,WAAW,SAAS;AAC1B,aAAS,QAAQ;AACjB,aAAS,OAAO,QAAQ;AAAA,~~EAAA~~;~~AAGpB~~,QAAA,gBAA2C,CAAC,UAAU;AAC1D,QAAI,WAAW;AACX,QAAA,MAAM,OAAO,KAAK,GAAG;AACZ,iBAAA;AACX,kBAAY,KAAK;AACjB,eAAS,QAAQ;AAAA,~~IACnB~~;~~AACA~~,gBAAY,OAAO,QAAQ;AAAA,~~EAAA~~;~~AAGvB~~,QAAA,eAAyC,CAAC,OAAO,QAAQ;AAC7D,aAAS,GAAG;AACZ,eAAW,OAAO,GAAG;AAAA,~~EAAA~~;~~AAIrB~~,SAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAY,YAAA,CAAC,WACZ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,OAAO,QAAQ;AAAA,QACf,sBAAsB,QAAQ;AAAA,MAChC;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,UACL,GAAG;AAAA,UACH,QAAQ,mBAAmB,UAAU,aAAa;AAAA,~~QACpD~~;AAAA,~~MACF~~;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACV,GAAG;AAAA,IAAA;AAAA,EAAA,IAGN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,oBAAoB;AAAA,MACpB,SACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,WAAW,GAAG,QAAQ,MAAM;AAAA,YAC1B,CAAC,QAAQ,WAAW,GAAG;AAAA,~~UAAA~~,~~CACxB~~;AAAA,QAAA;AAAA,MACH;AAAA,MAEF,WAAW,GAAG,QAAQ,QAAQ;AAAA,QAC5B,CAAC,QAAQ,SAAS,GAAG,SAAS,YAAsB,EAAE,KAAK;AAAA,MAAA,CAC5D;AAAA,MACD,SAAS;AAAA,MACT;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,QAAM;AAAA,UACN,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,OAAO;AAAA,UAC1D,GAAG;AAAA,UAEH,UAAS,SAAA;AAAA,QAAA;AAAA,~~MACZ~~;AAAA,~~IAAA~~;AAAA,~~EAGN,~~EAAA,~~CAAA~~;AAEJ,CAAC;"}
1	+ {"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useEnhancedEffect } from \"../hooks/useEnhancedEffect\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport {\n fixedForwardRef,\n PolymorphicComponentRef,\n PolymorphicRef,\n} from \"../types/generic\";\nimport {\n HvTypography,\n HvTypographyProps,\n HvTypographyVariants,\n} from \"../Typography\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport type HvInlineEditorProps<C extends React.ElementType = typeof HvInput> =\n PolymorphicComponentRef<\n C,\n {\n /** The value of the form element. /\n value?: string;\n /* The default value of the form element. /\n defaultValue?: string;\n /* Whether the Edit icon should always be visible /\n showIcon?: boolean;\n /* Variant of the HvTypography to display /\n variant?: HvTypographyVariants;\n /* Called when the input is blurred. /\n onBlur?: (\n event: React.FocusEvent<HTMLTextAreaElement \| HTMLInputElement>,\n value: string,\n ) => void;\n /* Called when the input value changes. /\n onChange?: (event: React.SyntheticEvent, value: string) => void;\n /* Called when there's a keydown event on the input. /\n onKeyDown?: (\n event:\n \| React.KeyboardEvent<HTMLTextAreaElement \| HTMLInputElement>\n \| React.MouseEvent,\n value: string,\n ) => void;\n /* Props passed to the HvButton component /\n buttonProps?: HvButtonProps;\n /* Props passed to the HvTypography text component /\n typographyProps?: HvTypographyProps;\n /* Whether the editor is disabled or not. /\n disabled?: boolean;\n /* A Jss Object used to override or extend the styles applied to the empty state component. /\n classes?: HvInlineEditorClasses;\n /* The placeholder value of the input. /\n placeholder?: string;\n }\n >;\n\n/\n An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = fixedForwardRef(function HvInlineEditor<\n C extends React.ElementType = typeof HvInput,\n>(props: HvInlineEditorProps<C>, ref: PolymorphicRef<C>) {\n const {\n className,\n classes: classesProp,\n value: valueProp,\n defaultValue = \"\",\n showIcon,\n component: InputComponent = HvInput,\n variant = \"body\",\n placeholder = \"Enter text\",\n onBlur,\n onChange,\n onKeyDown,\n buttonProps,\n typographyProps,\n disabled,\n ...others\n } = useDefaultProps(\"HvInlineEditor\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const [value, setValue] = useControlled(valueProp, defaultValue);\n const [editMode, setEditMode] = useState(false);\n const [cachedValue, setCachedValue] = useState(value);\n const inputRef = useRef<HTMLInputElement>();\n const { activeTheme } = useTheme();\n\n const typographyStyles = activeTheme?.typography[variant] \|\| {};\n const { lineHeight } = typographyStyles;\n\n useEnhancedEffect(() => {\n const input = inputRef.current;\n if (editMode && input) {\n input.focus();\n input.select();\n }\n }, [editMode]);\n\n const handleClick = () => {\n setEditMode(true);\n setCachedValue(value);\n };\n\n const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n setEditMode(false);\n\n const newValue = value \|\| cachedValue; // empty values should be ignored\n setValue(newValue);\n onBlur?.(event, newValue);\n };\n\n const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n let newValue = value;\n if (isKey(event, \"Esc\")) {\n newValue = cachedValue;\n setEditMode(false);\n setValue(newValue);\n }\n onKeyDown?.(event, newValue);\n };\n\n const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n setValue(val);\n onChange?.(event, val);\n };\n\n return (\n <div className={cx(classes.root, className)}>\n {editMode && !disabled ? (\n <InputComponent\n ref={ref}\n inputRef={inputRef}\n classes={{\n root: classes.inputRoot,\n input: classes.input,\n inputBorderContainer: classes.inputBorderContainer,\n }}\n inputProps={{\n style: {\n ...typographyStyles,\n height: InputComponent === HvInput ? lineHeight : undefined,\n },\n }}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n {...others}\n />\n ) : (\n <HvButton\n variant=\"secondaryGhost\"\n overrideIconColors={false}\n endIcon={\n <Edit\n color=\"secondary_60\"\n className={cx(classes.icon, {\n [classes.iconVisible]: showIcon,\n })}\n />\n }\n className={cx(classes.button, {\n [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n })}\n onClick={handleClick}\n disabled={disabled}\n {...buttonProps}\n >\n <HvTypography\n variant={variant}\n noWrap\n className={cx(classes.text, { [classes.textEmpty]: !value })}\n {...typographyProps}\n >\n {value \|\| placeholder}\n </HvTypography>\n </HvButton>\n )}\n </div>\n );\n});\n"],"names":["HvInlineEditor"],"mappings":"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"}

package/dist/esm/InlineEditor/InlineEditor.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineEditor.styles.js","sources":["../../../src/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { baseInputClasses } from \"../BaseInput\";\nimport { inputClasses } from \"../Input\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInlineEditor\", {\n root: {\n [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n height: \"100%\",\n minHeight: \"32px\",\n },\n },\n inputBorderContainer: {\n top: \"unset\",\n bottom: 0,\n },\n input: {},\n inputRoot: {},\n text: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n alignSelf: \"center\",\n },\n largeText: {},\n textEmpty: {\n color: theme.colors.secondary_60,\n },\n button: {\n padding: theme.spacing(\"6px\", \"8px\", \"5px\", \"8px\"),\n minHeight: \"32px\",\n\n boxSizing: \"border-box\",\n cursor: \"text\",\n height: \"100%\",\n width: \"100%\",\n maxWidth: \"100%\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n\n backgroundColor: theme.colors.atmo1,\n border: `1px solid transparent`,\n\n \"&:hover, &:focus\": {\n border: `1px solid ${theme.colors.primary}`,\n backgroundColor: theme.colors.atmo1,\n\n \"& $icon\": {\n visibility: \"visible\",\n },\n },\n\n \"&:active\": {\n border: `1px solid ${theme.colors.secondary}`,\n backgroundColor: \"transparent\",\n\n \"& $icon\": {\n visibility: \"visible\",\n },\n },\n\n \"& > div\": {\n width: \"100%\",\n },\n \"& > div > span\": {\n width: \"100%\",\n },\n },\n icon: {\n cursor: \"pointer\",\n visibility: \"hidden\",\n alignSelf: \"center\",\n height: \"16px\",\n width: \"32px\",\n minWidth: \"32px\",\n\n \"& svg\": {\n margin: theme.spacing(0, \"xs\"),\n },\n },\n iconVisible: {\n visibility: \"visible\",\n },\n});\n"],"names":["baseInputClasses","inputClasses"],"mappings":";;;;;;AAMO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,CAAC,MAAMA,gBAAiB,SAAS,IAAIC,gBAAa,SAAS,EAAE,GAAG;AAAA,MAC9D,QAAQ;AAAA,MACR,WAAW;AAAA,~~IACb~~;AAAA,~~EACF~~;AAAA,EACA,sBAAsB;AAAA,IACpB,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AAAA,EACA,OAAO,CAAC;AAAA,EACR,WAAW,CAAC;AAAA,EACZ,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,WAAW;AAAA,IACT,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,SAAS,MAAM,QAAQ,OAAO,OAAO,OAAO,KAAK;AAAA,IACjD,WAAW;AAAA,IAEX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,YAAY;AAAA,IAEZ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IAER,oBAAoB;AAAA,MAClB,QAAQ,aAAa,MAAM,OAAO,OAAO;AAAA,MACzC,iBAAiB,MAAM,OAAO;AAAA,MAE9B,WAAW;AAAA,QACT,YAAY;AAAA,~~MACd~~;AAAA,~~IACF~~;AAAA,IAEA,YAAY;AAAA,MACV,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACT,YAAY;AAAA,~~MACd~~;AAAA,~~IACF~~;AAAA,IAEA,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChB,OAAO;AAAA,~~IACT~~;AAAA,~~EACF~~;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IAEV,SAAS;AAAA,MACP,QAAQ,MAAM,QAAQ,GAAG,IAAI;AAAA,~~IAC/B~~;AAAA,~~EACF~~;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,~~EACd~~;~~AACF~~,CAAC;"}
1	+ {"version":3,"file":"InlineEditor.styles.js","sources":["../../../src/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { baseInputClasses } from \"../BaseInput\";\nimport { inputClasses } from \"../Input\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInlineEditor\", {\n root: {\n [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n height: \"100%\",\n minHeight: \"32px\",\n },\n },\n inputBorderContainer: {\n top: \"unset\",\n bottom: 0,\n },\n input: {},\n inputRoot: {},\n text: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n alignSelf: \"center\",\n },\n largeText: {},\n textEmpty: {\n color: theme.colors.secondary_60,\n },\n button: {\n padding: theme.spacing(\"6px\", \"8px\", \"5px\", \"8px\"),\n minHeight: \"32px\",\n\n boxSizing: \"border-box\",\n cursor: \"text\",\n height: \"100%\",\n width: \"100%\",\n maxWidth: \"100%\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n\n backgroundColor: theme.colors.atmo1,\n border: `1px solid transparent`,\n\n \"&:hover, &:focus\": {\n border: `1px solid ${theme.colors.primary}`,\n backgroundColor: theme.colors.atmo1,\n\n \"& $icon\": {\n visibility: \"visible\",\n },\n },\n\n \"&:active\": {\n border: `1px solid ${theme.colors.secondary}`,\n backgroundColor: \"transparent\",\n\n \"& $icon\": {\n visibility: \"visible\",\n },\n },\n\n \"& > div\": {\n width: \"100%\",\n },\n \"& > div > span\": {\n width: \"100%\",\n },\n },\n icon: {\n cursor: \"pointer\",\n visibility: \"hidden\",\n alignSelf: \"center\",\n height: \"16px\",\n width: \"32px\",\n minWidth: \"32px\",\n\n \"& svg\": {\n margin: theme.spacing(0, \"xs\"),\n },\n },\n iconVisible: {\n visibility: \"visible\",\n },\n});\n"],"names":["baseInputClasses","inputClasses"],"mappings":";;;;;;AAMO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,CAAC,MAAMA,gBAAiB,SAAS,IAAIC,gBAAa,SAAS,EAAE,GAAG;AAAA,MAC9D,QAAQ;AAAA,MACR,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,sBAAsB;AAAA,IACpB,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AAAA,EACA,OAAO,CAAC;AAAA,EACR,WAAW,CAAC;AAAA,EACZ,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,WAAW;AAAA,IACT,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,SAAS,MAAM,QAAQ,OAAO,OAAO,OAAO,KAAK;AAAA,IACjD,WAAW;AAAA,IAEX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,YAAY;AAAA,IAEZ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IAER,oBAAoB;AAAA,MAClB,QAAQ,aAAa,MAAM,OAAO,OAAO;AAAA,MACzC,iBAAiB,MAAM,OAAO;AAAA,MAE9B,WAAW;AAAA,QACT,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IAEA,YAAY;AAAA,MACV,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACT,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IAEA,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChB,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IAEV,SAAS;AAAA,MACP,QAAQ,MAAM,QAAQ,GAAG,IAAI;AAAA,IAAA;AAAA,EAEjC;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,EAAA;AAEhB,CAAC;"}

package/dist/esm/Input/Input.js CHANGED Viewed

@@ -45,7 +45,7 @@ const changeInputValue = (input, value = "") => {
   setInputValue?.call(input, value);
   input?.dispatchEvent(event);
 };
-const HvInput = forwardRef((props, ref) => {
+const HvInput = forwardRef(function HvInput2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/esm/Input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","sources":["../../../src/Input/Input.tsx"],"sourcesContent":["import {\n cloneElement,\n forwardRef,\n isValidElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n CloseXS,\n Preview,\n PreviewOff,\n Search,\n Success,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n computeValidationMessage,\n computeValidationState,\n computeValidationType,\n DEFAULT_ERROR_MESSAGES,\n hasBuiltInValidations,\n HvInputValidity,\n validateInput,\n} from \"../BaseInput/validations\";\nimport {\n HvAdornment,\n HvAdornmentProps,\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvSuggestion,\n HvSuggestions,\n HvSuggestionsProps,\n HvWarningText,\n isInvalid,\n isValid,\n} from \"../Forms\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvTooltip } from \"../Tooltip\";\nimport { HvInputSuggestion, HvValidationMessages } from \"../types/forms\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Input.styles\";\n\nexport { staticClasses as inputClasses };\n\nexport type HvInputClasses = ExtractNames<typeof useClasses>;\n\ntype InputElement = HTMLInputElement \| HTMLTextAreaElement;\n\nexport interface HvInputProps\n extends HvBaseProps<\n HTMLElement,\n \"onChange\" \| \"onBlur\" \| \"onFocus\" \| \"onKeyDown\" \| \"color\"\n > {\n /** The form element name. /\n name?: string;\n /* The value of the form element. /\n value?: string;\n /* When uncontrolled, defines the initial input value. /\n defaultValue?: 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 inputted via inputProps.\n /\n label?: React.ReactNode;\n /* Provide additional descriptive text for the form element. /\n description?: React.ReactNode;\n /* Indicates that the form element is disabled. /\n disabled?: boolean;\n /* Indicates that the form element is not editable. /\n readOnly?: boolean;\n /* Indicates that user input is required on the form element. /\n required?: boolean;\n /\n The status of the form element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n \n When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n /\n status?: HvFormStatus;\n /* The error message to show when `status` is \"invalid\". /\n statusMessage?: string;\n /\n The function that will be executed onChange, allows modification of the input,\n * it receives the value. If a new value should be presented it must returned it.\n /\n onChange?: HvBaseInputProps[\"onChange\"];\n /\n Callback called when the user submits the value by pressing Enter/Return.\n \n Also called when the search button is clicked (when type is \"search\").\n /\n onEnter?: (\n event: React.KeyboardEvent<InputElement> \| React.MouseEvent,\n value: string,\n ) => void;\n /\n The function that will be executed onBlur, allows checking the validation state,\n * it receives the value and the validation state.\n /\n onBlur?: (\n event: React.FocusEvent<InputElement>,\n value: string,\n validationState: HvInputValidity,\n ) => void;\n /\n The function that will be executed onBlur, allows checking the value state,\n * it receives the value.\n /\n onFocus?: (event: React.FocusEvent<InputElement>, value: string) => void;\n /\n The function that will be executed onKeyDown, allows checking the value state,\n * it receives the event and value.\n /\n onKeyDown?: (\n event: React.KeyboardEvent<InputElement> \| React.MouseEvent,\n value: string,\n ) => void;\n /* The input type. /\n type?: React.HTMLInputTypeAttribute;\n /* The placeholder value of the input. /\n placeholder?: string;\n /* Internal labels?. /\n labels?: HvInputLabels & Record<string, any>;\n /* An Object containing the various texts associated with the input. /\n validationMessages?: HvValidationMessages;\n /* Attributes applied to the input element. /\n inputProps?: MuiInputBaseComponentProps;\n /\n Allows passing a ref to the underlying input\n * @deprecated Use `ref` directly instead\n * /\n inputRef?: HvBaseInputProps[\"inputRef\"];\n /* The function that will be executed to received an array of objects that has a label and id to create list of suggestion /\n suggestionListCallback?: (value: string) => HvInputSuggestion[] \| null;\n /\n If enabled, the suggestions list will be rendered using a portal.\n * If disabled, it will be under the DOM hierarchy of the parent component.\n * @default false\n * /\n enablePortal?: boolean;\n /\n Whether the suggestions should be triggered once the input is focused and not only when typing.\n * @default false\n * /\n suggestOnFocus?: boolean;\n /\n The custom validation function, it receives the value and must return\n * either `true` for valid or `false` for invalid, default validations would only\n * occur if this function is null or undefined\n /\n validation?: (value: string) => boolean;\n /* If `true` it should autofocus. /\n autoFocus?: boolean;\n /* If `true` the clear button is disabled. /\n disableClear?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n /* If `true` the reveal password button is disabled. Valid only when type is \"password\". /\n disableRevealPassword?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n /* If `true` the search button is disabled. Valid only when type is \"search\". /\n disableSearchButton?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n /\n If `true` the validation icon adornment is visible. Defaults to `false`.\n \n Currently, DS specifications define only a positive feedback icon;\n * errors are signaled through the border style and by displaying the error message.\n /\n showValidationIcon?: boolean;\n /* A custom icon to be added into the input. /\n endAdornment?: React.ReactNode;\n /* The maximum allowed length of the characters, if this value is null no check will be performed. /\n maxCharQuantity?: number;\n /* The minimum allowed length of the characters, if this value is null no check will be perform. /\n minCharQuantity?: number;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvInputClasses;\n}\n\nconst DEFAULT_LABELS = {\n /* The label of the clear button. /\n clearButtonLabel: \"Clear the text\",\n /* The label of the reveal password button. /\n revealPasswordButtonLabel: \"Reveal password\",\n /* The tooltip of the reveal password button when the password is hidden. /\n revealPasswordButtonClickToShowTooltip: \"Click to show password.\",\n /* The tooltip of the reveal password button when the password is revealed. /\n revealPasswordButtonClickToHideTooltip: \"Click to hide password.\",\n /* The label of the search button. /\n searchButtonLabel: \"Search\",\n};\n\nexport type HvInputLabels = Partial<typeof DEFAULT_LABELS>;\n\nfunction eventTargetIsInsideContainer(\n container: HTMLElement \| null,\n event: React.FocusEvent<any>,\n) {\n return !!container?.contains(event.relatedTarget);\n}\n\n/* Changes a given `input`'s `value`, triggering its `onChange` /\nconst changeInputValue = (input: HTMLInputElement \| null, value = \"\") => {\n const event = new Event(\"input\", { bubbles: true });\n\n /* Original `input.value` setter (React overrides it). /\n const setInputValue = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\",\n )?.set;\n\n setInputValue?.call(input, value);\n input?.dispatchEvent(event);\n};\n\n/\n A text input box is a graphical control element intended to enable the user to input text information to be used by the software.\n /\nexport const HvInput = forwardRef<InputElement, HvInputProps>((props, ref) => {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value: valueProp,\n defaultValue = \"\",\n required = false,\n readOnly = false,\n disabled = false,\n enablePortal = false,\n suggestOnFocus = false,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n onChange,\n onEnter,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n type = \"text\",\n placeholder,\n autoFocus = false,\n labels: labelsProp,\n validationMessages,\n disableClear = false,\n disableRevealPassword = false,\n disableSearchButton = false,\n endAdornment,\n maxCharQuantity,\n minCharQuantity,\n validation,\n showValidationIcon = false,\n suggestionListCallback,\n inputRef: inputRefProp,\n onBlur,\n onFocus,\n onKeyDown,\n inputProps = {},\n ...others\n } = useDefaultProps(\"HvInput\", props);\n const { classes, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n const elementId = useUniqueId(id);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const forkedRef = useForkRef(ref, inputRef, inputRefProp);\n const suggestionsRef = useRef<HTMLElement>(null);\n\n const [focused, setFocused] = useState(false);\n\n // Signals that the user has manually edited the input value\n const isDirty = useRef(false);\n\n // Value related state\n const [value, setValue] = useControlled(valueProp, defaultValue);\n\n const isEmptyValue = value == null \|\| value === \"\";\n\n // Validation related state\n const [validationState, setValidationState] = useControlled(\n status,\n validationStates.standBy,\n );\n\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\",\n );\n\n // validationMessages reference tends to change, as users will not memoize/useState for it;\n // dependencies must be more explicit so we set\n const errorMessages = useMemo(\n () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n validationMessages?.error,\n validationMessages?.requiredError,\n validationMessages?.minCharError,\n validationMessages?.maxCharError,\n validationMessages?.typeMismatchError,\n ],\n );\n\n const validationType = useMemo(() => computeValidationType(type), [type]);\n\n // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n // and returns the validity state of the input.\n const performValidation = useCallback(() => {\n const inputValidity = validateInput(\n inputRef.current,\n value,\n required,\n minCharQuantity,\n maxCharQuantity,\n validationType,\n validation,\n );\n\n // This will only run if status is uncontrolled\n setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n // This will only run if statusMessage is uncontrolled\n setValidationMessage(\n computeValidationMessage(inputValidity, errorMessages),\n );\n\n return inputValidity;\n }, [\n errorMessages,\n isEmptyValue,\n maxCharQuantity,\n minCharQuantity,\n required,\n setValidationMessage,\n setValidationState,\n validation,\n validationType,\n value,\n ]);\n\n // The error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and any of the built-in validations are active\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined &&\n hasBuiltInValidations(\n required,\n validationType,\n minCharQuantity,\n maxCharQuantity,\n validation,\n inputProps,\n )));\n\n const isStateInvalid = isInvalid(validationState);\n\n // Input type related state\n const [revealPassword, setRevealPassword] = useState(false);\n\n const realType = useMemo(() => {\n if (type === \"password\") {\n return revealPassword ? \"text\" : \"password\";\n }\n\n if (type === \"search\") {\n return \"search\";\n }\n\n return \"text\";\n }, [revealPassword, type]);\n\n // Suggestions related state\n const [suggestionValues, setSuggestionValues] = useState<\n HvSuggestion[] \| null\n >(null);\n\n const canShowSuggestions = suggestionListCallback != null;\n const hasSuggestions = !!suggestionValues;\n\n // Miscellaneous state\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n /\n Looks for the node that represent the input inside the material tree and focus it.\n /\n const focusInput = () => {\n inputRef.current?.focus();\n };\n\n const isMounted = useIsMounted();\n\n /\n Clears the suggestion array.\n /\n const suggestionClearHandler = () => {\n if (isMounted.current) {\n setSuggestionValues(null);\n }\n };\n\n /\n Fills of the suggestion array.\n /\n const suggestionHandler = (val: string) => {\n const suggestionsArray = suggestionListCallback?.(val);\n if (suggestionsArray?.[0]?.label) {\n setSuggestionValues(suggestionsArray);\n } else {\n suggestionClearHandler();\n }\n };\n\n /\n Executes the user callback adds the selection to the state and clears the suggestions.\n /\n const suggestionSelectedHandler: HvSuggestionsProps[\"onSuggestionSelected\"] =\n (event, item) => {\n const newValue = item.value \|\| (item.label as any);\n\n changeInputValue(inputRef.current, newValue);\n\n focusInput();\n suggestionClearHandler();\n\n if (type === \"search\") {\n // trigger the onEnter callback when the user selects an option in a search box\n onEnter?.(event, newValue);\n }\n };\n\n const onChangeHandler: HvBaseInputProps[\"onChange\"] = (event, newValue) => {\n isDirty.current = true;\n\n // set the input value (only when value is uncontrolled)\n setValue(newValue);\n\n onChange?.(event, newValue);\n\n if (canShowSuggestions) {\n // an edge case might be a controlled input whose onChange callback\n // doesn't change the value (or sets another): the suggestionListCallback\n // callback will still receive the original rejected value.\n // a refactor is needed so the suggestionListCallback might be called only\n // when the input is uncontrolled, providing a way to externally control\n // the suggestion values.\n suggestionHandler(newValue);\n }\n };\n\n /\n Validates the input updating the state and modifying the info text, also executes\n * the user provided onBlur passing the current validation status and value.\n /\n const onInputBlurHandler: HvBaseInputProps[\"onBlur\"] = (event) => {\n // If the blur is executed when choosing an suggestion it should be ignored.\n if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;\n\n setFocused(false);\n\n const inputValidity = performValidation();\n\n onBlur?.(event, value, inputValidity);\n };\n\n /\n Updates the state putting again the value from the state because the input value is\n * not automatically manage, it also executes the onFocus function from the user passing the value\n /\n const onFocusHandler: HvBaseInputProps[\"onFocus\"] = (event) => {\n setFocused(true);\n\n // reset validation status to standBy (only when status is uncontrolled)\n setValidationState(validationStates.standBy);\n\n onFocus?.(event, value);\n };\n\n const getSuggestions = (li: number \| null) => {\n // TODO Replace with ref\n const listEl = document.getElementById(\n setId(elementId, \"suggestions-list\") \|\| \"\",\n );\n return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n };\n\n const onSuggestionKeyDown: HvSuggestionsProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Esc\")) {\n suggestionClearHandler();\n focusInput();\n } else if (isKey(event, \"Tab\")) {\n suggestionClearHandler();\n }\n };\n\n /* Focus the suggestion list when the arrow down is pressed. /\n const onKeyDownHandler: HvBaseInputProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"ArrowDown\") && hasSuggestions) {\n const li = getSuggestions(0);\n li?.focus();\n } else if (isKey(event, \"Enter\")) {\n onEnter?.(event, value);\n }\n\n onKeyDown?.(event, value);\n };\n\n /* Clears the suggestion list on blur. /\n const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n if (event.relatedTarget) {\n setTimeout(() => {\n const list = getSuggestions(null);\n if (!list?.contains(document.activeElement)) suggestionClearHandler();\n }, 10);\n }\n };\n\n const hasOnEnter = onEnter != null;\n\n // show the clear button only if the input is enabled, not read-only, disableClear is false and the input is not empty\n // also, don't show it when the input type is \"search\" and the input is active (standBy)\n const showClear =\n !disabled &&\n !readOnly &&\n !disableClear &&\n !isEmptyValue &&\n (!hasOnEnter \|\|\n type !== \"search\" \|\|\n disableSearchButton \|\|\n validationState !== validationStates.standBy);\n\n const showSearchIcon = type === \"search\" && !disableSearchButton;\n\n const showRevealPasswordButton =\n type === \"password\" && !disableRevealPassword;\n\n /\n Clears the input value from the state and refocus the input.\n /\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n // reset validation status to standBy (only when status is uncontrolled)\n setValidationState(validationStates.standBy);\n\n changeInputValue(inputRef.current, \"\");\n\n // prevent triggering the suggestions when clicking on the clear button when suggestOnFocus is true\n if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n else {\n // we want to focus the input when clicked and not active\n setTimeout(focusInput);\n }\n },\n [canShowSuggestions, setValidationState, suggestOnFocus],\n );\n\n const clearButton = useMemo(() => {\n if (!showClear) {\n return null;\n }\n\n return (\n <HvAdornment\n // Don't control visibility when the search icon is enabled\n className={cx(classes.adornmentButton, {\n [classes.iconClear]: !showSearchIcon,\n })}\n onClick={handleClear}\n aria-label={labels?.clearButtonLabel}\n aria-controls={setId(elementId, \"input\")}\n icon={<CloseXS />}\n />\n );\n }, [\n showClear,\n classes.adornmentButton,\n classes.iconClear,\n showSearchIcon,\n handleClear,\n labels?.clearButtonLabel,\n elementId,\n cx,\n ]);\n\n /\n Calls the onEnter callback and refocus the input.\n /\n const handleSearch = useCallback<NonNullable<HvAdornmentProps[\"onClick\"]>>(\n (event) => {\n onEnter?.(event, value);\n },\n [onEnter, value],\n );\n\n const searchButton = useMemo(() => {\n // If the search icon is not actionable, only show it when the input is empty or active\n const reallyShowIt =\n showSearchIcon &&\n (isEmptyValue \|\|\n (hasOnEnter && validationState === validationStates.standBy));\n\n if (!reallyShowIt) {\n return null;\n }\n\n return (\n <HvAdornment\n className={classes.adornmentButton}\n onClick={hasOnEnter ? handleSearch : undefined}\n aria-label={labels?.searchButtonLabel}\n icon={<Search />}\n />\n );\n }, [\n showSearchIcon,\n isEmptyValue,\n hasOnEnter,\n validationState,\n classes.adornmentButton,\n handleSearch,\n labels?.searchButtonLabel,\n ]);\n\n /\n Changes input type and refocus the input.\n */\n const handleRevealPassword = useCallback(() => {\n setRevealPassword(!revealPassword);\n }, [revealPassword]);\n\n const revealPasswordButton = useMemo(() => {\n if (!showRevealPasswordButton) {\n return null;\n }\n\n return (\n <HvTooltip\n disableFocusListener\n disableTouchListener\n title={\n revealPassword\n ? labels?.revealPasswordButtonClickToHideTooltip\n : labels?.revealPasswordButtonClickToShowTooltip\n }\n >\n <HvAdornment\n className={classes.adornmentButton}\n onClick={handleRevealPassword}\n aria-label={labels?.revealPasswordButtonLabel}\n aria-controls={setId(elementId, \"input\")}\n icon={revealPassword ? <PreviewOff /> : <Preview />}\n />\n </HvTooltip>\n );\n }, [\n showRevealPasswordButton,\n revealPassword,\n labels?.revealPasswordButtonClickToHideTooltip,\n labels?.revealPasswordButtonClickToShowTooltip,\n labels?.revealPasswordButtonLabel,\n classes.adornmentButton,\n handleRevealPassword,\n elementId,\n ]);\n\n const validationIcon = useMemo(() => {\n if (!showValidationIcon) {\n return null;\n }\n\n if (!isValid(validationState)) {\n return null;\n }\n\n return <Success color=\"positive\" className={classes.icon} />;\n }, [showValidationIcon, validationState, classes.icon]);\n\n // useMemo to avoid repetitive cloning of the custom icon\n const customIconEl = useMemo(\n () =>\n isValidElement(endAdornment) &&\n cloneElement(endAdornment as React.ReactElement, {\n className: cx(endAdornment.props.className, classes.icon),\n }),\n [classes.icon, endAdornment, cx],\n );\n\n const adornments = useMemo(() => {\n if (\n !clearButton &&\n !revealPasswordButton &&\n !searchButton &&\n !validationIcon &&\n !customIconEl\n )\n return null;\n\n // note: specification implies that the custom icon should be hidden when\n // a validation feedback icon is being shown.\n return (\n <div className={classes.adornmentsBox} aria-hidden=\"true\">\n {clearButton}\n {revealPasswordButton}\n {searchButton}\n {validationIcon \|\| customIconEl}\n </div>\n );\n }, [\n classes.adornmentsBox,\n clearButton,\n customIconEl,\n revealPasswordButton,\n searchButton,\n validationIcon,\n ]);\n\n // run initial validation after first render\n // and also when any validation condition changes\n useEffect(() => {\n if (focused \|\| (!isDirty.current && isEmptyValue)) {\n // skip validation if currently focused or if empty and\n // the user never manually edited the input value\n return;\n }\n\n performValidation();\n }, [focused, isEmptyValue, performValidation]);\n\n const errorMessageId = isStateInvalid\n ? canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage\n : undefined;\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(\n classes.root,\n {\n [classes.hasSuggestions]: hasSuggestions,\n },\n className,\n )}\n onBlur={onContainerBlurHandler}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n className={classes.label}\n htmlFor={setId(elementId, \"input\")}\n label={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 <HvBaseInput\n id={\n hasLabel \|\| showClear \|\| showRevealPasswordButton\n ? setId(elementId, \"input\")\n : setId(id, \"input\")\n }\n name={name}\n value={value}\n required={required}\n readOnly={readOnly}\n disabled={disabled}\n onChange={onChangeHandler}\n autoFocus={autoFocus}\n onKeyDown={onKeyDownHandler}\n onBlur={onInputBlurHandler}\n onFocus={onFocusHandler}\n placeholder={placeholder}\n type={realType}\n classes={{\n input: classes.input,\n inputRoot: classes.inputRoot,\n inputRootFocused: classes.inputRootFocused,\n inputRootDisabled: classes.inputRootDisabled,\n inputRootMultiline: classes.inputRootMultiline,\n inputBorderContainer: classes.inputBorderContainer,\n }}\n invalid={isStateInvalid}\n inputProps={{\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-describedby\":\n ariaDescribedBy != null\n ? ariaDescribedBy\n : description\n ? setId(elementId, \"description\")\n : undefined,\n \"aria-controls\": canShowSuggestions\n ? setId(elementId, \"suggestions\")\n : undefined,\n\n ref: inputRef,\n\n // prevent browsers auto-fill/suggestions when we have our own\n autoComplete: canShowSuggestions ? \"off\" : undefined,\n\n onFocus: (event) => {\n inputProps.onFocus?.(event);\n\n // trigger suggestions when focusing the input\n if (canShowSuggestions && suggestOnFocus) {\n suggestionHandler(value);\n }\n },\n\n onClick: (event) => {\n inputProps.onClick?.(event);\n\n // prevent closing the suggestions when clicking on the input when suggestOnFocus is true\n if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n },\n\n ...inputProps,\n }}\n inputRef={forkedRef}\n endAdornment={adornments}\n {...others}\n />\n {canShowSuggestions && (\n <>\n {hasSuggestions && (\n <div role=\"presentation\" className={classes.inputExtension} />\n )}\n <HvSuggestions\n ref={suggestionsRef}\n id={setId(elementId, \"suggestions\")}\n classes={{\n root: classes.suggestionsContainer,\n list: classes.suggestionList,\n }}\n expanded={hasSuggestions}\n anchorEl={inputRef.current?.parentElement}\n onClose={suggestionClearHandler}\n onKeyDown={onSuggestionKeyDown}\n onSuggestionSelected={suggestionSelectedHandler}\n suggestionValues={suggestionValues}\n enablePortal={enablePortal}\n />\n </>\n )}\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n});\n"],"names":["validationState","validationStates"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuMA,MAAM,iBAAiB;AAAA;AAAA,EAErB,kBAAkB;AAAA;AAAA,EAElB,2BAA2B;AAAA;AAAA,EAE3B,wCAAwC;AAAA;AAAA,EAExC,wCAAwC;AAAA;AAAA,EAExC,mBAAmB;AACrB;AAIA,SAAS,6BACP,WACA,OACA;AACA,SAAO,CAAC,CAAC,WAAW,SAAS,MAAM,aAAa;AAClD;AAGA,MAAM,mBAAmB,CAAC,OAAgC,QAAQ,OAAO;AACvE,QAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM;AAGlD,QAAM,gBAAgB,OAAO;AAAA,IAC3B,OAAO,iBAAiB;AAAA,IACxB;AAAA,EACC,GAAA;AAEY,iBAAA,KAAK,OAAO,KAAK;AAChC,SAAO,cAAc,KAAK;AAC5B;AAKO,MAAM,UAAU,WAAuC,CAAC,OAAO,QAAQ;AACtE,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,OAAO;AAAA,IACP;AAAA,IACA,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA,eAAe;AAAA,IACf,wBAAwB;AAAA,IACxB,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,CAAC;AAAA,IACd,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAC7C,QAAA,YAAY,YAAY,EAAE;AAE1B,QAAA,WAAW,OAAyB,IAAI;AAC9C,QAAM,YAAY,WAAW,KAAK,UAAU,YAAY;AAClD,QAAA,iBAAiB,OAAoB,IAAI;AAE/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAGtC,QAAA,UAAU,OAAO,KAAK;AAG5B,QAAM,CAAC,OAAO,QAAQ,IAAI,cAAc,WAAW,YAAY;AAEzD,QAAA,eAAe,SAAS,QAAQ,UAAU;AAG1C,QAAA,CAACA,mBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,IACAC,gBAAiB;AAAA,EAAA;AAGb,QAAA,CAAC,mBAAmB,oBAAoB,IAAI;AAAA,IAChD;AAAA,IACA;AAAA,EAAA;AAKF,QAAM,gBAAgB;AAAA,IACpB,OAAO,EAAE,GAAG,wBAAwB,GAAG;;IAEvC;AAAA,MACE,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,IACtB;AAAA,EAAA;AAGI,QAAA,iBAAiB,QAAQ,MAAM,sBAAsB,IAAI,GAAG,CAAC,IAAI,CAAC;AAIlE,QAAA,oBAAoB,YAAY,MAAM;AAC1C,UAAM,gBAAgB;AAAA,MACpB,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAIiB,uBAAA,uBAAuB,eAAe,YAAY,CAAC;AAGtE;AAAA,MACE,yBAAyB,eAAe,aAAa;AAAA,IAAA;AAGhD,WAAA;AAAA,EAAA,GACN;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAMK,QAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UACV;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAA,iBAAiB,UAAUD,iBAAe;AAGhD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAEpD,QAAA,WAAW,QAAQ,MAAM;AAC7B,QAAI,SAAS,YAAY;AACvB,aAAO,iBAAiB,SAAS;AAAA,IACnC;AAEA,QAAI,SAAS,UAAU;AACd,aAAA;AAAA,IACT;AAEO,WAAA;AAAA,EAAA,GACN,CAAC,gBAAgB,IAAI,CAAC;AAGzB,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAE9C,IAAI;AAEN,QAAM,qBAAqB,0BAA0B;AAC/C,QAAA,iBAAiB,CAAC,CAAC;AAGzB,QAAM,WAAW,SAAS;AAC1B,QAAM,iBAAiB,eAAe;AAKtC,QAAM,aAAa,MAAM;AACvB,aAAS,SAAS;EAAM;AAG1B,QAAM,YAAY;AAKlB,QAAM,yBAAyB,MAAM;AACnC,QAAI,UAAU,SAAS;AACrB,0BAAoB,IAAI;AAAA,IAC1B;AAAA,EAAA;AAMI,QAAA,oBAAoB,CAAC,QAAgB;AACnC,UAAA,mBAAmB,yBAAyB,GAAG;AACjD,QAAA,mBAAmB,CAAC,GAAG,OAAO;AAChC,0BAAoB,gBAAgB;AAAA,IAAA,OAC/B;AACkB;IACzB;AAAA,EAAA;AAMI,QAAA,4BACJ,CAAC,OAAO,SAAS;AACT,UAAA,WAAW,KAAK,SAAU,KAAK;AAEpB,qBAAA,SAAS,SAAS,QAAQ;AAEhC;AACY;AAEvB,QAAI,SAAS,UAAU;AAErB,gBAAU,OAAO,QAAQ;AAAA,IAC3B;AAAA,EAAA;AAGE,QAAA,kBAAgD,CAAC,OAAO,aAAa;AACzE,YAAQ,UAAU;AAGlB,aAAS,QAAQ;AAEjB,eAAW,OAAO,QAAQ;AAE1B,QAAI,oBAAoB;AAOtB,wBAAkB,QAAQ;AAAA,IAC5B;AAAA,EAAA;AAOI,QAAA,qBAAiD,CAAC,UAAU;AAEhE,QAAI,6BAA6B,eAAe,SAAS,KAAK,EAAG;AAEjE,eAAW,KAAK;AAEhB,UAAM,gBAAgB;AAEb,aAAA,OAAO,OAAO,aAAa;AAAA,EAAA;AAOhC,QAAA,iBAA8C,CAAC,UAAU;AAC7D,eAAW,IAAI;AAGf,uBAAmBC,gBAAiB,OAAO;AAE3C,cAAU,OAAO,KAAK;AAAA,EAAA;AAGlB,QAAA,iBAAiB,CAAC,OAAsB;AAE5C,UAAM,SAAS,SAAS;AAAA,MACtB,MAAM,WAAW,kBAAkB,KAAK;AAAA,IAAA;AAE1C,WAAO,MAAM,OAAO,QAAQ,qBAAqB,IAAI,IAAI,EAAE,IAAI;AAAA,EAAA;AAG3D,QAAA,sBAAuD,CAAC,UAAU;AAClE,QAAA,MAAM,OAAO,KAAK,GAAG;AACA;AACZ;IACF,WAAA,MAAM,OAAO,KAAK,GAAG;AACP;IACzB;AAAA,EAAA;AAII,QAAA,mBAAkD,CAAC,UAAU;AACjE,QAAI,MAAM,OAAO,WAAW,KAAK,gBAAgB;AACzC,YAAA,KAAK,eAAe,CAAC;AAC3B,UAAI,MAAM;AAAA,IACD,WAAA,MAAM,OAAO,OAAO,GAAG;AAChC,gBAAU,OAAO,KAAK;AAAA,IACxB;AAEA,gBAAY,OAAO,KAAK;AAAA,EAAA;AAIpB,QAAA,yBAAuD,CAAC,UAAU;AACtE,QAAI,MAAM,eAAe;AACvB,iBAAW,MAAM;AACT,cAAA,OAAO,eAAe,IAAI;AAChC,YAAI,CAAC,MAAM,SAAS,SAAS,aAAa,EAA0B;SACnE,EAAE;AAAA,IACP;AAAA,EAAA;AAGF,QAAM,aAAa,WAAW;AAI9B,QAAM,YACJ,CAAC,YACD,CAAC,YACD,CAAC,gBACD,CAAC,iBACA,CAAC,cACA,SAAS,YACT,uBACAD,sBAAoBC,gBAAiB;AAEnC,QAAA,iBAAiB,SAAS,YAAY,CAAC;AAEvC,QAAA,2BACJ,SAAS,cAAc,CAAC;AAK1B,QAAM,cAAc;AAAA,IAClB,CAAC,UAA+C;AAE9C,yBAAmBA,gBAAiB,OAAO;AAE1B,uBAAA,SAAS,SAAS,EAAE;AAGjC,UAAA,sBAAsB,eAAgB,OAAM,gBAAgB;AAAA,WAC3D;AAEH,mBAAW,UAAU;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,oBAAoB,oBAAoB,cAAc;AAAA,EAAA;AAGnD,QAAA,cAAc,QAAQ,MAAM;AAChC,QAAI,CAAC,WAAW;AACP,aAAA;AAAA,IACT;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,GAAG,QAAQ,iBAAiB;AAAA,UACrC,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,QAAA,CACvB;AAAA,QACD,SAAS;AAAA,QACT,cAAY,QAAQ;AAAA,QACpB,iBAAe,MAAM,WAAW,OAAO;AAAA,QACvC,0BAAO,SAAQ,EAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACjB,GAED;AAAA,IACD;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EAAA,CACD;AAKD,QAAM,eAAe;AAAA,IACnB,CAAC,UAAU;AACT,gBAAU,OAAO,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,KAAK;AAAA,EAAA;AAGX,QAAA,eAAe,QAAQ,MAAM;AAEjC,UAAM,eACJ,mBACC,gBACE,cAAcD,sBAAoBC,gBAAiB;AAExD,QAAI,CAAC,cAAc;AACV,aAAA;AAAA,IACT;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,SAAS,aAAa,eAAe;AAAA,QACrC,cAAY,QAAQ;AAAA,QACpB,0BAAO,QAAO,EAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAChB,GAED;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACAD;AAAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,QAAQ;AAAA,EAAA,CACT;AAKK,QAAA,uBAAuB,YAAY,MAAM;AAC7C,sBAAkB,CAAC,cAAc;AAAA,EAAA,GAChC,CAAC,cAAc,CAAC;AAEb,QAAA,uBAAuB,QAAQ,MAAM;AACzC,QAAI,CAAC,0BAA0B;AACtB,aAAA;AAAA,IACT;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,sBAAoB;AAAA,QACpB,sBAAoB;AAAA,QACpB,OACE,iBACI,QAAQ,yCACR,QAAQ;AAAA,QAGd,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,YACT,cAAY,QAAQ;AAAA,YACpB,iBAAe,MAAM,WAAW,OAAO;AAAA,YACvC,MAAM,iBAAiB,oBAAC,YAAW,CAAA,CAAA,wBAAM,SAAQ,EAAA;AAAA,UAAA;AAAA,QACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAED;AAAA,IACD;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EAAA,CACD;AAEK,QAAA,iBAAiB,QAAQ,MAAM;AACnC,QAAI,CAAC,oBAAoB;AAChB,aAAA;AAAA,IACT;AAEI,QAAA,CAAC,QAAQA,iBAAe,GAAG;AACtB,aAAA;AAAA,IACT;AAEA,+BAAQ,SAAQ,EAAA,OAAM,YAAW,WAAW,QAAQ,KAAM,CAAA;AAAA,KACzD,CAAC,oBAAoBA,mBAAiB,QAAQ,IAAI,CAAC;AAGtD,QAAM,eAAe;AAAA,IACnB,MACE,eAAe,YAAY,KAC3B,aAAa,cAAoC;AAAA,MAC/C,WAAW,GAAG,aAAa,MAAM,WAAW,QAAQ,IAAI;AAAA,IAAA,CACzD;AAAA,IACH,CAAC,QAAQ,MAAM,cAAc,EAAE;AAAA,EAAA;AAG3B,QAAA,aAAa,QAAQ,MAAM;AAE7B,QAAA,CAAC,eACD,CAAC,wBACD,CAAC,gBACD,CAAC,kBACD,CAAC;AAEM,aAAA;AAIT,gCACG,OAAI,EAAA,WAAW,QAAQ,eAAe,eAAY,QAChD,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,IACrB,EAAA,CAAA;AAAA,EAAA,GAED;AAAA,IACD,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAID,YAAU,MAAM;AACd,QAAI,WAAY,CAAC,QAAQ,WAAW,cAAe;AAGjD;AAAA,IACF;AAEkB;EACjB,GAAA,CAAC,SAAS,cAAc,iBAAiB,CAAC;AAE7C,QAAM,iBAAiB,iBACnB,eACE,MAAM,WAAW,OAAO,IACxB,mBACF;AAGF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQA;AAAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,cAAc,GAAG;AAAA,QAC5B;AAAA,QACA;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,MAEN,UAAA;AAAA,SAAA,YAAY,mBACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA;AAAA,UACC,YAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B,WAAW,QAAQ;AAAA,cACnB,SAAS,MAAM,WAAW,OAAO;AAAA,cACjC;AAAA,YAAA;AAAA,UACF;AAAA,UAGD,kBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,aAAa;AAAA,cAClC,WAAW,QAAQ;AAAA,cAElB,UAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA,GAEJ;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IACE,YAAY,aAAa,2BACrB,MAAM,WAAW,OAAO,IACxB,MAAM,IAAI,OAAO;AAAA,YAEvB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA,WAAW;AAAA,YACX,QAAQ;AAAA,YACR,SAAS;AAAA,YACT;AAAA,YACA,MAAM;AAAA,YACN,SAAS;AAAA,cACP,OAAO,QAAQ;AAAA,cACf,WAAW,QAAQ;AAAA,cACnB,kBAAkB,QAAQ;AAAA,cAC1B,mBAAmB,QAAQ;AAAA,cAC3B,oBAAoB,QAAQ;AAAA,cAC5B,sBAAsB,QAAQ;AAAA,YAChC;AAAA,YACA,SAAS;AAAA,YACT,YAAY;AAAA,cACV,cAAc;AAAA,cACd,mBAAmB;AAAA,cACnB,gBAAgB,iBAAiB,OAAO;AAAA,cACxC,qBAAqB;AAAA,cACrB,oBACE,mBAAmB,OACf,kBACA,cACE,MAAM,WAAW,aAAa,IAC9B;AAAA,cACR,iBAAiB,qBACb,MAAM,WAAW,aAAa,IAC9B;AAAA,cAEJ,KAAK;AAAA;AAAA,cAGL,cAAc,qBAAqB,QAAQ;AAAA,cAE3C,SAAS,CAAC,UAAU;AAClB,2BAAW,UAAU,KAAK;AAG1B,oBAAI,sBAAsB,gBAAgB;AACxC,oCAAkB,KAAK;AAAA,gBACzB;AAAA,cACF;AAAA,cAEA,SAAS,CAAC,UAAU;AAClB,2BAAW,UAAU,KAAK;AAGtB,oBAAA,sBAAsB,eAAgB,OAAM,gBAAgB;AAAA,cAClE;AAAA,cAEA,GAAG;AAAA,YACL;AAAA,YACA,UAAU;AAAA,YACV,cAAc;AAAA,YACb,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QACC,sBAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,UAAA,sCACE,OAAI,EAAA,MAAK,gBAAe,WAAW,QAAQ,gBAAgB;AAAA,UAE9D;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,IAAI,MAAM,WAAW,aAAa;AAAA,cAClC,SAAS;AAAA,gBACP,MAAM,QAAQ;AAAA,gBACd,MAAM,QAAQ;AAAA,cAChB;AAAA,cACA,UAAU;AAAA,cACV,UAAU,SAAS,SAAS;AAAA,cAC5B,SAAS;AAAA,cACT,WAAW;AAAA,cACX,sBAAsB;AAAA,cACtB;AAAA,cACA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GACF;AAAA,QAED,gBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,WAAW,OAAO;AAAA,YAC5B,eAAa;AAAA,YACb,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
1	+ {"version":3,"file":"Input.js","sources":["../../../src/Input/Input.tsx"],"sourcesContent":["import {\n cloneElement,\n forwardRef,\n isValidElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n CloseXS,\n Preview,\n PreviewOff,\n Search,\n Success,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n computeValidationMessage,\n computeValidationState,\n computeValidationType,\n DEFAULT_ERROR_MESSAGES,\n hasBuiltInValidations,\n HvInputValidity,\n validateInput,\n} from \"../BaseInput/validations\";\nimport {\n HvAdornment,\n HvAdornmentProps,\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvSuggestion,\n HvSuggestions,\n HvSuggestionsProps,\n HvWarningText,\n isInvalid,\n isValid,\n} from \"../Forms\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvTooltip } from \"../Tooltip\";\nimport { HvInputSuggestion, HvValidationMessages } from \"../types/forms\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Input.styles\";\n\nexport { staticClasses as inputClasses };\n\nexport type HvInputClasses = ExtractNames<typeof useClasses>;\n\ntype InputElement = HTMLInputElement \| HTMLTextAreaElement;\n\nexport interface HvInputProps\n extends Omit<HvBaseInputProps, \"onBlur\" \| \"onFocus\" \| \"onKeyDown\"> {\n /** The form element name. /\n name?: string;\n /* The value of the form element. /\n value?: string;\n /* When uncontrolled, defines the initial input value. /\n defaultValue?: 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 inputted via inputProps.\n /\n label?: React.ReactNode;\n /* Provide additional descriptive text for the form element. /\n description?: React.ReactNode;\n /* Indicates that the form element is disabled. /\n disabled?: boolean;\n /* Indicates that the form element is not editable. /\n readOnly?: boolean;\n /* Indicates that user input is required on the form element. /\n required?: boolean;\n /\n The status of the form element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n \n When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n /\n status?: HvFormStatus;\n /* The error message to show when `status` is \"invalid\". /\n statusMessage?: string;\n /\n Callback called when the user submits the value by pressing Enter/Return.\n \n Also called when the search button is clicked (when type is \"search\").\n /\n onEnter?: (\n event: React.KeyboardEvent<InputElement> \| React.MouseEvent,\n value: string,\n ) => void;\n /\n The function that will be executed onBlur, allows checking the validation state,\n * it receives the value and the validation state.\n /\n onBlur?: (\n event: React.FocusEvent<InputElement>,\n value: string,\n validationState: HvInputValidity,\n ) => void;\n /\n The function that will be executed onBlur, allows checking the value state,\n * it receives the value.\n /\n onFocus?: (event: React.FocusEvent<InputElement>, value: string) => void;\n /\n The function that will be executed onKeyDown, allows checking the value state,\n * it receives the event and value.\n /\n onKeyDown?: (\n event: React.KeyboardEvent<InputElement> \| React.MouseEvent,\n value: string,\n ) => void;\n /* The input type. /\n type?: React.HTMLInputTypeAttribute;\n /* The placeholder value of the input. /\n placeholder?: string;\n /* Internal labels?. /\n labels?: HvInputLabels & Record<string, any>;\n /* An Object containing the various texts associated with the input. /\n validationMessages?: HvValidationMessages;\n /* Attributes applied to the input element. /\n inputProps?: MuiInputBaseComponentProps;\n /\n Allows passing a ref to the underlying input\n * @deprecated Use `ref` directly instead\n * /\n inputRef?: HvBaseInputProps[\"inputRef\"];\n /* The function that will be executed to received an array of objects that has a label and id to create list of suggestion /\n suggestionListCallback?: (value: string) => HvInputSuggestion[] \| null;\n /\n If enabled, the suggestions list will be rendered using a portal.\n * If disabled, it will be under the DOM hierarchy of the parent component.\n * @default false\n * /\n enablePortal?: boolean;\n /\n Whether the suggestions should be triggered once the input is focused and not only when typing.\n * @default false\n * /\n suggestOnFocus?: boolean;\n /\n The custom validation function, it receives the value and must return\n * either `true` for valid or `false` for invalid, default validations would only\n * occur if this function is null or undefined\n /\n validation?: (value: string) => boolean;\n /* If `true` it should autofocus. /\n autoFocus?: boolean;\n /* If `true` the clear button is disabled. /\n disableClear?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n /* If `true` the reveal password button is disabled. Valid only when type is \"password\". /\n disableRevealPassword?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n /* If `true` the search button is disabled. Valid only when type is \"search\". /\n disableSearchButton?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button\n /\n If `true` the validation icon adornment is visible. Defaults to `false`.\n \n Currently, DS specifications define only a positive feedback icon;\n * errors are signaled through the border style and by displaying the error message.\n /\n showValidationIcon?: boolean;\n /* A custom icon to be added into the input. /\n endAdornment?: React.ReactNode;\n /* The maximum allowed length of the characters, if this value is null no check will be performed. /\n maxCharQuantity?: number;\n /* The minimum allowed length of the characters, if this value is null no check will be perform. /\n minCharQuantity?: number;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvInputClasses;\n}\n\nconst DEFAULT_LABELS = {\n /* The label of the clear button. /\n clearButtonLabel: \"Clear the text\",\n /* The label of the reveal password button. /\n revealPasswordButtonLabel: \"Reveal password\",\n /* The tooltip of the reveal password button when the password is hidden. /\n revealPasswordButtonClickToShowTooltip: \"Click to show password.\",\n /* The tooltip of the reveal password button when the password is revealed. /\n revealPasswordButtonClickToHideTooltip: \"Click to hide password.\",\n /* The label of the search button. /\n searchButtonLabel: \"Search\",\n};\n\nexport type HvInputLabels = Partial<typeof DEFAULT_LABELS>;\n\nfunction eventTargetIsInsideContainer(\n container: HTMLElement \| null,\n event: React.FocusEvent<any>,\n) {\n return !!container?.contains(event.relatedTarget);\n}\n\n/* Changes a given `input`'s `value`, triggering its `onChange` /\nconst changeInputValue = (input: HTMLInputElement \| null, value = \"\") => {\n const event = new Event(\"input\", { bubbles: true });\n\n /* Original `input.value` setter (React overrides it). /\n const setInputValue = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\",\n )?.set;\n\n setInputValue?.call(input, value);\n input?.dispatchEvent(event);\n};\n\n/\n A text input box is a graphical control element intended to enable the user to input text information to be used by the software.\n /\nexport const HvInput = forwardRef<\n // no-indent\n InputElement,\n HvInputProps\n>(function HvInput(props, ref) {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value: valueProp,\n defaultValue = \"\",\n required = false,\n readOnly = false,\n disabled = false,\n enablePortal = false,\n suggestOnFocus = false,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n onChange,\n onEnter,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n type = \"text\",\n placeholder,\n autoFocus = false,\n labels: labelsProp,\n validationMessages,\n disableClear = false,\n disableRevealPassword = false,\n disableSearchButton = false,\n endAdornment,\n maxCharQuantity,\n minCharQuantity,\n validation,\n showValidationIcon = false,\n suggestionListCallback,\n inputRef: inputRefProp,\n onBlur,\n onFocus,\n onKeyDown,\n inputProps = {},\n ...others\n } = useDefaultProps(\"HvInput\", props);\n const { classes, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n const elementId = useUniqueId(id);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const forkedRef = useForkRef(ref, inputRef, inputRefProp);\n const suggestionsRef = useRef<HTMLElement>(null);\n\n const [focused, setFocused] = useState(false);\n\n // Signals that the user has manually edited the input value\n const isDirty = useRef(false);\n\n // Value related state\n const [value, setValue] = useControlled(valueProp, defaultValue);\n\n const isEmptyValue = value == null \|\| value === \"\";\n\n // Validation related state\n const [validationState, setValidationState] = useControlled(\n status,\n validationStates.standBy,\n );\n\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\",\n );\n\n // validationMessages reference tends to change, as users will not memoize/useState for it;\n // dependencies must be more explicit so we set\n const errorMessages = useMemo(\n () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n validationMessages?.error,\n validationMessages?.requiredError,\n validationMessages?.minCharError,\n validationMessages?.maxCharError,\n validationMessages?.typeMismatchError,\n ],\n );\n\n const validationType = useMemo(() => computeValidationType(type), [type]);\n\n // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n // and returns the validity state of the input.\n const performValidation = useCallback(() => {\n const inputValidity = validateInput(\n inputRef.current,\n value,\n required,\n minCharQuantity,\n maxCharQuantity,\n validationType,\n validation,\n );\n\n // This will only run if status is uncontrolled\n setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n // This will only run if statusMessage is uncontrolled\n setValidationMessage(\n computeValidationMessage(inputValidity, errorMessages),\n );\n\n return inputValidity;\n }, [\n errorMessages,\n isEmptyValue,\n maxCharQuantity,\n minCharQuantity,\n required,\n setValidationMessage,\n setValidationState,\n validation,\n validationType,\n value,\n ]);\n\n // The error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and any of the built-in validations are active\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined &&\n hasBuiltInValidations(\n required,\n validationType,\n minCharQuantity,\n maxCharQuantity,\n validation,\n inputProps,\n )));\n\n const isStateInvalid = isInvalid(validationState);\n\n // Input type related state\n const [revealPassword, setRevealPassword] = useState(false);\n\n const realType = useMemo(() => {\n if (type === \"password\") {\n return revealPassword ? \"text\" : \"password\";\n }\n\n if (type === \"search\") {\n return \"search\";\n }\n\n return \"text\";\n }, [revealPassword, type]);\n\n // Suggestions related state\n const [suggestionValues, setSuggestionValues] = useState<\n HvSuggestion[] \| null\n >(null);\n\n const canShowSuggestions = suggestionListCallback != null;\n const hasSuggestions = !!suggestionValues;\n\n // Miscellaneous state\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n /\n Looks for the node that represent the input inside the material tree and focus it.\n /\n const focusInput = () => {\n inputRef.current?.focus();\n };\n\n const isMounted = useIsMounted();\n\n /\n Clears the suggestion array.\n /\n const suggestionClearHandler = () => {\n if (isMounted.current) {\n setSuggestionValues(null);\n }\n };\n\n /\n Fills of the suggestion array.\n /\n const suggestionHandler = (val: string) => {\n const suggestionsArray = suggestionListCallback?.(val);\n if (suggestionsArray?.[0]?.label) {\n setSuggestionValues(suggestionsArray);\n } else {\n suggestionClearHandler();\n }\n };\n\n /\n Executes the user callback adds the selection to the state and clears the suggestions.\n /\n const suggestionSelectedHandler: HvSuggestionsProps[\"onSuggestionSelected\"] =\n (event, item) => {\n const newValue = item.value \|\| (item.label as any);\n\n changeInputValue(inputRef.current, newValue);\n\n focusInput();\n suggestionClearHandler();\n\n if (type === \"search\") {\n // trigger the onEnter callback when the user selects an option in a search box\n onEnter?.(event, newValue);\n }\n };\n\n const onChangeHandler: HvBaseInputProps[\"onChange\"] = (event, newValue) => {\n isDirty.current = true;\n\n // set the input value (only when value is uncontrolled)\n setValue(newValue);\n\n onChange?.(event, newValue);\n\n if (canShowSuggestions) {\n // an edge case might be a controlled input whose onChange callback\n // doesn't change the value (or sets another): the suggestionListCallback\n // callback will still receive the original rejected value.\n // a refactor is needed so the suggestionListCallback might be called only\n // when the input is uncontrolled, providing a way to externally control\n // the suggestion values.\n suggestionHandler(newValue);\n }\n };\n\n /\n Validates the input updating the state and modifying the info text, also executes\n * the user provided onBlur passing the current validation status and value.\n /\n const onInputBlurHandler: HvBaseInputProps[\"onBlur\"] = (event) => {\n // If the blur is executed when choosing an suggestion it should be ignored.\n if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;\n\n setFocused(false);\n\n const inputValidity = performValidation();\n\n onBlur?.(event, value, inputValidity);\n };\n\n /\n Updates the state putting again the value from the state because the input value is\n * not automatically manage, it also executes the onFocus function from the user passing the value\n /\n const onFocusHandler: HvBaseInputProps[\"onFocus\"] = (event) => {\n setFocused(true);\n\n // reset validation status to standBy (only when status is uncontrolled)\n setValidationState(validationStates.standBy);\n\n onFocus?.(event, value);\n };\n\n const getSuggestions = (li: number \| null) => {\n // TODO Replace with ref\n const listEl = document.getElementById(\n setId(elementId, \"suggestions-list\") \|\| \"\",\n );\n return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n };\n\n const onSuggestionKeyDown: HvSuggestionsProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Esc\")) {\n suggestionClearHandler();\n focusInput();\n } else if (isKey(event, \"Tab\")) {\n suggestionClearHandler();\n }\n };\n\n /* Focus the suggestion list when the arrow down is pressed. /\n const onKeyDownHandler: HvBaseInputProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"ArrowDown\") && hasSuggestions) {\n const li = getSuggestions(0);\n li?.focus();\n } else if (isKey(event, \"Enter\")) {\n onEnter?.(event, value);\n }\n\n onKeyDown?.(event, value);\n };\n\n /* Clears the suggestion list on blur. /\n const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n if (event.relatedTarget) {\n setTimeout(() => {\n const list = getSuggestions(null);\n if (!list?.contains(document.activeElement)) suggestionClearHandler();\n }, 10);\n }\n };\n\n const hasOnEnter = onEnter != null;\n\n // show the clear button only if the input is enabled, not read-only, disableClear is false and the input is not empty\n // also, don't show it when the input type is \"search\" and the input is active (standBy)\n const showClear =\n !disabled &&\n !readOnly &&\n !disableClear &&\n !isEmptyValue &&\n (!hasOnEnter \|\|\n type !== \"search\" \|\|\n disableSearchButton \|\|\n validationState !== validationStates.standBy);\n\n const showSearchIcon = type === \"search\" && !disableSearchButton;\n\n const showRevealPasswordButton =\n type === \"password\" && !disableRevealPassword;\n\n /\n Clears the input value from the state and refocus the input.\n /\n const handleClear = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n // reset validation status to standBy (only when status is uncontrolled)\n setValidationState(validationStates.standBy);\n\n changeInputValue(inputRef.current, \"\");\n\n // prevent triggering the suggestions when clicking on the clear button when suggestOnFocus is true\n if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n else {\n // we want to focus the input when clicked and not active\n setTimeout(focusInput);\n }\n },\n [canShowSuggestions, setValidationState, suggestOnFocus],\n );\n\n const clearButton = useMemo(() => {\n if (!showClear) {\n return null;\n }\n\n return (\n <HvAdornment\n // Don't control visibility when the search icon is enabled\n className={cx(classes.adornmentButton, {\n [classes.iconClear]: !showSearchIcon,\n })}\n onClick={handleClear}\n aria-label={labels?.clearButtonLabel}\n aria-controls={setId(elementId, \"input\")}\n icon={<CloseXS />}\n />\n );\n }, [\n showClear,\n classes.adornmentButton,\n classes.iconClear,\n showSearchIcon,\n handleClear,\n labels?.clearButtonLabel,\n elementId,\n cx,\n ]);\n\n /\n Calls the onEnter callback and refocus the input.\n /\n const handleSearch = useCallback<NonNullable<HvAdornmentProps[\"onClick\"]>>(\n (event) => {\n onEnter?.(event, value);\n },\n [onEnter, value],\n );\n\n const searchButton = useMemo(() => {\n // If the search icon is not actionable, only show it when the input is empty or active\n const reallyShowIt =\n showSearchIcon &&\n (isEmptyValue \|\|\n (hasOnEnter && validationState === validationStates.standBy));\n\n if (!reallyShowIt) {\n return null;\n }\n\n return (\n <HvAdornment\n className={classes.adornmentButton}\n onClick={hasOnEnter ? handleSearch : undefined}\n aria-label={labels?.searchButtonLabel}\n icon={<Search />}\n />\n );\n }, [\n showSearchIcon,\n isEmptyValue,\n hasOnEnter,\n validationState,\n classes.adornmentButton,\n handleSearch,\n labels?.searchButtonLabel,\n ]);\n\n /\n Changes input type and refocus the input.\n */\n const handleRevealPassword = useCallback(() => {\n setRevealPassword(!revealPassword);\n }, [revealPassword]);\n\n const revealPasswordButton = useMemo(() => {\n if (!showRevealPasswordButton) {\n return null;\n }\n\n return (\n <HvTooltip\n disableFocusListener\n disableTouchListener\n title={\n revealPassword\n ? labels?.revealPasswordButtonClickToHideTooltip\n : labels?.revealPasswordButtonClickToShowTooltip\n }\n >\n <HvAdornment\n className={classes.adornmentButton}\n onClick={handleRevealPassword}\n aria-label={labels?.revealPasswordButtonLabel}\n aria-controls={setId(elementId, \"input\")}\n icon={revealPassword ? <PreviewOff /> : <Preview />}\n />\n </HvTooltip>\n );\n }, [\n showRevealPasswordButton,\n revealPassword,\n labels?.revealPasswordButtonClickToHideTooltip,\n labels?.revealPasswordButtonClickToShowTooltip,\n labels?.revealPasswordButtonLabel,\n classes.adornmentButton,\n handleRevealPassword,\n elementId,\n ]);\n\n const validationIcon = useMemo(() => {\n if (!showValidationIcon) {\n return null;\n }\n\n if (!isValid(validationState)) {\n return null;\n }\n\n return <Success color=\"positive\" className={classes.icon} />;\n }, [showValidationIcon, validationState, classes.icon]);\n\n // useMemo to avoid repetitive cloning of the custom icon\n const customIconEl = useMemo(\n () =>\n isValidElement(endAdornment) &&\n cloneElement(endAdornment as React.ReactElement, {\n className: cx(endAdornment.props.className, classes.icon),\n }),\n [classes.icon, endAdornment, cx],\n );\n\n const adornments = useMemo(() => {\n if (\n !clearButton &&\n !revealPasswordButton &&\n !searchButton &&\n !validationIcon &&\n !customIconEl\n )\n return null;\n\n // note: specification implies that the custom icon should be hidden when\n // a validation feedback icon is being shown.\n return (\n <div className={classes.adornmentsBox} aria-hidden=\"true\">\n {clearButton}\n {revealPasswordButton}\n {searchButton}\n {validationIcon \|\| customIconEl}\n </div>\n );\n }, [\n classes.adornmentsBox,\n clearButton,\n customIconEl,\n revealPasswordButton,\n searchButton,\n validationIcon,\n ]);\n\n // run initial validation after first render\n // and also when any validation condition changes\n useEffect(() => {\n if (focused \|\| (!isDirty.current && isEmptyValue)) {\n // skip validation if currently focused or if empty and\n // the user never manually edited the input value\n return;\n }\n\n performValidation();\n }, [focused, isEmptyValue, performValidation]);\n\n const errorMessageId = isStateInvalid\n ? canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage\n : undefined;\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(\n classes.root,\n {\n [classes.hasSuggestions]: hasSuggestions,\n },\n className,\n )}\n onBlur={onContainerBlurHandler}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n className={classes.label}\n htmlFor={setId(elementId, \"input\")}\n label={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 <HvBaseInput\n id={\n hasLabel \|\| showClear \|\| showRevealPasswordButton\n ? setId(elementId, \"input\")\n : setId(id, \"input\")\n }\n name={name}\n value={value}\n required={required}\n readOnly={readOnly}\n disabled={disabled}\n onChange={onChangeHandler}\n autoFocus={autoFocus}\n onKeyDown={onKeyDownHandler}\n onBlur={onInputBlurHandler}\n onFocus={onFocusHandler}\n placeholder={placeholder}\n type={realType}\n classes={{\n input: classes.input,\n inputRoot: classes.inputRoot,\n inputRootFocused: classes.inputRootFocused,\n inputRootDisabled: classes.inputRootDisabled,\n inputRootMultiline: classes.inputRootMultiline,\n inputBorderContainer: classes.inputBorderContainer,\n }}\n invalid={isStateInvalid}\n inputProps={{\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-describedby\":\n ariaDescribedBy != null\n ? ariaDescribedBy\n : description\n ? setId(elementId, \"description\")\n : undefined,\n \"aria-controls\": canShowSuggestions\n ? setId(elementId, \"suggestions\")\n : undefined,\n\n ref: inputRef,\n\n // prevent browsers auto-fill/suggestions when we have our own\n autoComplete: canShowSuggestions ? \"off\" : undefined,\n\n onFocus: (event) => {\n inputProps.onFocus?.(event);\n\n // trigger suggestions when focusing the input\n if (canShowSuggestions && suggestOnFocus) {\n suggestionHandler(value);\n }\n },\n\n onClick: (event) => {\n inputProps.onClick?.(event);\n\n // prevent closing the suggestions when clicking on the input when suggestOnFocus is true\n if (canShowSuggestions && suggestOnFocus) event.stopPropagation();\n },\n\n ...inputProps,\n }}\n inputRef={forkedRef}\n endAdornment={adornments}\n {...others}\n />\n {canShowSuggestions && (\n <>\n {hasSuggestions && (\n <div role=\"presentation\" className={classes.inputExtension} />\n )}\n <HvSuggestions\n ref={suggestionsRef}\n id={setId(elementId, \"suggestions\")}\n classes={{\n root: classes.suggestionsContainer,\n list: classes.suggestionList,\n }}\n expanded={hasSuggestions}\n anchorEl={inputRef.current?.parentElement}\n onClose={suggestionClearHandler}\n onKeyDown={onSuggestionKeyDown}\n onSuggestionSelected={suggestionSelectedHandler}\n suggestionValues={suggestionValues}\n enablePortal={enablePortal}\n />\n </>\n )}\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n});\n"],"names":["HvInput","validationState","validationStates"],"mappings":"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"}

package/dist/esm/Input/Input.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.styles.js","sources":["../../../src/Input/Input.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { suggestionsClasses } from \"../Forms\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInput\", {\n root: { display: \"block\" },\n labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n label: { paddingBottom: \"6px\", display: \"block\" },\n description: {},\n adornmentsBox: {\n display: \"flex\",\n flexDirection: \"row\",\n height: \"30px\",\n justifyContent: \"center\",\n marginRight: 1,\n },\n icon: { width: \"30px\", height: \"30px\" },\n adornmentButton: {\n backgroundColor: \"transparent\",\n border: \"none\",\n padding: 0,\n margin: 0,\n cursor: \"pointer\",\n },\n iconClear: { display: \"none\" },\n hasSuggestions: {},\n suggestionsContainer: { width: \"100%\", position: \"relative\" },\n suggestionList: {\n [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n width: \"100%\",\n },\n },\n inputExtension: {\n height: theme.space.xs,\n backgroundColor: theme.colors.atmo1,\n boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n },\n input: {\n \"&::-ms-clear\": {\n display: \"none\",\n },\n },\n inputRoot: {\n \":hover\": {\n \"& $iconClear\": {\n display: \"block\",\n },\n },\n \":focus-within $iconClear\": {\n display: \"block\",\n },\n },\n inputRootFocused: {\n \"& $iconClear\": {\n display: \"block\",\n },\n },\n inputRootDisabled: {\n cursor: \"not-allowed\",\n },\n inputRootMultiline: { padding: 0 },\n inputBorderContainer: {\n \"$hasSuggestions &\": {\n display: \"none\",\n },\n },\n error: {},\n});\n"],"names":["suggestionsClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,QAAQ;AAAA,EACzB,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,EAAE,eAAe,OAAO,SAAS,QAAQ;AAAA,EAChD,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,IACb,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,MAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACtC,iBAAiB;AAAA,IACf,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AAAA,EACA,WAAW,EAAE,SAAS,OAAO;AAAA,EAC7B,gBAAgB,CAAC;AAAA,EACjB,sBAAsB,EAAE,OAAO,QAAQ,UAAU,WAAW;AAAA,EAC5D,gBAAgB;AAAA,IACd,CAAC,MAAMA,gBAAmB,IAAI,KAAKA,gBAAmB,IAAI,IAAI,GAAG;AAAA,MAC/D,OAAO;AAAA,~~IACT~~;AAAA,~~EACF~~;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,eAAe,MAAM,OAAO,KAAK;AAAA,EAC9C;AAAA,EACA,OAAO;AAAA,IACL,gBAAgB;AAAA,MACd,SAAS;AAAA,~~IACX~~;AAAA,~~EACF~~;AAAA,EACA,WAAW;AAAA,IACT,UAAU;AAAA,MACR,gBAAgB;AAAA,QACd,SAAS;AAAA,~~MACX~~;AAAA,~~IACF~~;AAAA,IACA,4BAA4B;AAAA,MAC1B,SAAS;AAAA,~~IACX~~;AAAA,~~EACF~~;AAAA,EACA,kBAAkB;AAAA,IAChB,gBAAgB;AAAA,MACd,SAAS;AAAA,~~IACX~~;AAAA,~~EACF~~;AAAA,EACA,mBAAmB;AAAA,IACjB,QAAQ;AAAA,EACV;AAAA,EACA,oBAAoB,EAAE,SAAS,EAAE;AAAA,EACjC,sBAAsB;AAAA,IACpB,qBAAqB;AAAA,MACnB,SAAS;AAAA,~~IACX~~;AAAA,~~EACF~~;AAAA,EACA,OAAO,~~CAAC~~;~~AACV~~,CAAC;"}
1	+ {"version":3,"file":"Input.styles.js","sources":["../../../src/Input/Input.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { suggestionsClasses } from \"../Forms\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInput\", {\n root: { display: \"block\" },\n labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n label: { paddingBottom: \"6px\", display: \"block\" },\n description: {},\n adornmentsBox: {\n display: \"flex\",\n flexDirection: \"row\",\n height: \"30px\",\n justifyContent: \"center\",\n marginRight: 1,\n },\n icon: { width: \"30px\", height: \"30px\" },\n adornmentButton: {\n backgroundColor: \"transparent\",\n border: \"none\",\n padding: 0,\n margin: 0,\n cursor: \"pointer\",\n },\n iconClear: { display: \"none\" },\n hasSuggestions: {},\n suggestionsContainer: { width: \"100%\", position: \"relative\" },\n suggestionList: {\n [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n width: \"100%\",\n },\n },\n inputExtension: {\n height: theme.space.xs,\n backgroundColor: theme.colors.atmo1,\n boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n },\n input: {\n \"&::-ms-clear\": {\n display: \"none\",\n },\n },\n inputRoot: {\n \":hover\": {\n \"& $iconClear\": {\n display: \"block\",\n },\n },\n \":focus-within $iconClear\": {\n display: \"block\",\n },\n },\n inputRootFocused: {\n \"& $iconClear\": {\n display: \"block\",\n },\n },\n inputRootDisabled: {\n cursor: \"not-allowed\",\n },\n inputRootMultiline: { padding: 0 },\n inputBorderContainer: {\n \"$hasSuggestions &\": {\n display: \"none\",\n },\n },\n error: {},\n});\n"],"names":["suggestionsClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,QAAQ;AAAA,EACzB,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,EAAE,eAAe,OAAO,SAAS,QAAQ;AAAA,EAChD,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,IACb,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,MAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACtC,iBAAiB;AAAA,IACf,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AAAA,EACA,WAAW,EAAE,SAAS,OAAO;AAAA,EAC7B,gBAAgB,CAAC;AAAA,EACjB,sBAAsB,EAAE,OAAO,QAAQ,UAAU,WAAW;AAAA,EAC5D,gBAAgB;AAAA,IACd,CAAC,MAAMA,gBAAmB,IAAI,KAAKA,gBAAmB,IAAI,IAAI,GAAG;AAAA,MAC/D,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,eAAe,MAAM,OAAO,KAAK;AAAA,EAC9C;AAAA,EACA,OAAO;AAAA,IACL,gBAAgB;AAAA,MACd,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,WAAW;AAAA,IACT,UAAU;AAAA,MACR,gBAAgB;AAAA,QACd,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,4BAA4B;AAAA,MAC1B,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,kBAAkB;AAAA,IAChB,gBAAgB;AAAA,MACd,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,mBAAmB;AAAA,IACjB,QAAQ;AAAA,EACV;AAAA,EACA,oBAAoB,EAAE,SAAS,EAAE;AAAA,EACjC,sBAAsB;AAAA,IACpB,qBAAqB;AAAA,MACnB,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}

package/dist/esm/Kpi/Kpi.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Kpi.js","sources":["../../../src/Kpi/Kpi.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useLabels } from \"../hooks/useLabels\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Kpi.styles\";\n\nexport { staticClasses as kpiClasses };\n\nexport type HvKpiClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n /** The text at the top of the kpi. /\n title: \"\",\n /* The text in the middle of the kpi. /\n indicator: undefined as string \| undefined,\n /* The text to the right of the indicator. /\n unit: undefined as string \| undefined,\n /* The text to the right of the visual comparison. /\n comparisonIndicatorInfo: undefined as string \| undefined,\n};\n\nexport type HvKpiLabelProps = Partial<typeof DEFAULT_LABELS>;\n\nexport interface HvKpiProps extends HvBaseProps<HTMLDivElement, \"children\"> {\n /\n An Element that will be rendered to the left of the kpi indicator text.\n /\n trendIndicator?: React.ReactNode;\n /\n An Element that will be rendered to the left of the kpi indicator text.\n /\n visualIndicator?: React.ReactNode;\n /\n An Element that will be rendered below the kpi indicator text.\n /\n visualComparison?: React.ReactNode;\n /\n The object that contains the different labels inside the kpi.\n /\n labels?: HvKpiLabelProps;\n /\n The typography variant used in the main text indicator of the KPI\n /\n indicatorTextVariant?: \"display\" \| \"title1\" \| \"title2\";\n /\n The typography variant used in the main text indicator of the KPI\n /\n indicatorUnitTextVariant?: \"title2\" \| \"body\";\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvKpiClasses;\n}\n\n/\n Key Performance Indicator is a type of performance measurement. It monitors a business indicator\n * and its success/failure against a given target. KPIs are the first item read on a dashboard.\n * Communicates simple, immediate and vital information for operational decision making.\n */\nexport const HvKpi = (props: HvKpiProps) => {\n const {\n trendIndicator = null,\n visualIndicator = null,\n visualComparison = null,\n indicatorUnitTextVariant = \"title2\",\n indicatorTextVariant = \"title1\",\n labels: labelsProp,\n classes: classesProp,\n className,\n ...others\n } = useDefaultProps(\"HvKpi\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const InternalVisualComparison =\n typeof visualComparison === \"string\" ? HvTypography : \"div\";\n\n return (\n <div className={cx(classes.root, className)} {...others}>\n <div>\n <HvTypography variant=\"label\">{labels.title}</HvTypography>\n </div>\n <div className={classes.indicatorsContainer}>\n {visualIndicator && (\n <div\n className={cx(\n classes.visualIndicatorContainer,\n classes.spacingToTheRight,\n )}\n >\n {visualIndicator}\n </div>\n )}\n {labels.indicator && (\n <HvTypography\n className={cx(classes.spacingToTheRight, classes.indicatorText)}\n variant={indicatorTextVariant}\n >\n {labels.indicator}\n </HvTypography>\n )}\n {labels.unit && (\n <HvTypography\n className={classes.indicatorUnit}\n variant={indicatorUnitTextVariant}\n >\n {labels.unit}\n </HvTypography>\n )}\n </div>\n {visualComparison && (\n <div className={classes.comparisonComposition}>\n {trendIndicator && (\n <div className={cx(classes.trendLine, classes.spacingToTheRight)}>\n {trendIndicator}\n </div>\n )}\n <div>\n <div className={classes.comparisonContainer}>\n <InternalVisualComparison\n className={cx(classes.comparisons, classes.spacingToTheRight)}\n variant=\"label\"\n >\n {visualComparison}\n </InternalVisualComparison>\n </div>\n <div className={classes.comparisonContainer}>\n <HvTypography className={classes.comparisons} variant=\"caption2\">\n {labels.comparisonIndicatorInfo}\n </HvTypography>\n </div>\n </div>\n </div>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;AAcA,MAAM,iBAAiB;AAAA;AAAA,EAErB,OAAO;AAAA;AAAA,EAEP,WAAW;AAAA;AAAA,EAEX,MAAM;AAAA;AAAA,EAEN,yBAAyB;AAC3B;AAwCa,MAAA,QAAQ,CAAC,UAAsB;AACpC,QAAA;AAAA,IACJ,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,2BAA2B;AAAA,IAC3B,uBAAuB;AAAA,IACvB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAElC,QAAM,EAAE,SAAS,~~GAAG~~,~~IAAI,~~WAAW,WAAW;AAExC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,QAAM,2BACJ,OAAO,qBAAqB,WAAW,eAAe;AAGtD,SAAA,qBAAC,SAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC/C,UAAA;AAAA,IAAA,oBAAC,SACC,UAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAA,OAAO,OAAM,EAC9C,CAAA;AAAA,IACC,qBAAA,OAAA,EAAI,WAAW,QAAQ,qBACrB,UAAA;AAAA,MACC,mBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,UAEC,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,MAED,OAAO,aACN;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,mBAAmB,QAAQ,aAAa;AAAA,UAC9D,SAAS;AAAA,UAER,UAAO,OAAA;AAAA,QAAA;AAAA,MACV;AAAA,MAED,OAAO,QACN;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,SAAS;AAAA,UAER,UAAO,OAAA;AAAA,QAAA;AAAA,~~MACV~~;AAAA,~~IAAA~~,GAEJ;AAAA,IACC,oBACC,qBAAC,OAAI,EAAA,WAAW,QAAQ,uBACrB,UAAA;AAAA,MACC,kBAAA,oBAAC,SAAI,WAAW,GAAG,QAAQ,WAAW,QAAQ,iBAAiB,GAC5D,UACH,eAAA,CAAA;AAAA,2BAED,OACC,EAAA,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,qBACtB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,QAAQ,aAAa,QAAQ,iBAAiB;AAAA,YAC5D,SAAQ;AAAA,YAEP,UAAA;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,QACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,qBACtB,UAAC,oBAAA,cAAA,EAAa,WAAW,QAAQ,aAAa,SAAQ,YACnD,UAAA,OAAO,~~wBACV~~,CAAA~~,GACF~~;AAAA,MAAA,~~GACF~~;AAAA,IAAA,~~GACF~~;AAAA,~~EAEJ,~~EAAA,~~CAAA~~;AAEJ;"}
1	+ {"version":3,"file":"Kpi.js","sources":["../../../src/Kpi/Kpi.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useLabels } from \"../hooks/useLabels\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Kpi.styles\";\n\nexport { staticClasses as kpiClasses };\n\nexport type HvKpiClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n /** The text at the top of the kpi. /\n title: \"\",\n /* The text in the middle of the kpi. /\n indicator: undefined as string \| undefined,\n /* The text to the right of the indicator. /\n unit: undefined as string \| undefined,\n /* The text to the right of the visual comparison. /\n comparisonIndicatorInfo: undefined as string \| undefined,\n};\n\nexport type HvKpiLabelProps = Partial<typeof DEFAULT_LABELS>;\n\nexport interface HvKpiProps extends HvBaseProps<HTMLDivElement, \"children\"> {\n /\n An Element that will be rendered to the left of the kpi indicator text.\n /\n trendIndicator?: React.ReactNode;\n /\n An Element that will be rendered to the left of the kpi indicator text.\n /\n visualIndicator?: React.ReactNode;\n /\n An Element that will be rendered below the kpi indicator text.\n /\n visualComparison?: React.ReactNode;\n /\n The object that contains the different labels inside the kpi.\n /\n labels?: HvKpiLabelProps;\n /\n The typography variant used in the main text indicator of the KPI\n /\n indicatorTextVariant?: \"display\" \| \"title1\" \| \"title2\";\n /\n The typography variant used in the main text indicator of the KPI\n /\n indicatorUnitTextVariant?: \"title2\" \| \"body\";\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvKpiClasses;\n}\n\n/\n Key Performance Indicator is a type of performance measurement. It monitors a business indicator\n * and its success/failure against a given target. KPIs are the first item read on a dashboard.\n * Communicates simple, immediate and vital information for operational decision making.\n */\nexport const HvKpi = (props: HvKpiProps) => {\n const {\n trendIndicator = null,\n visualIndicator = null,\n visualComparison = null,\n indicatorUnitTextVariant = \"title2\",\n indicatorTextVariant = \"title1\",\n labels: labelsProp,\n classes: classesProp,\n className,\n ...others\n } = useDefaultProps(\"HvKpi\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const InternalVisualComparison =\n typeof visualComparison === \"string\" ? HvTypography : \"div\";\n\n return (\n <div className={cx(classes.root, className)} {...others}>\n <div>\n <HvTypography variant=\"label\">{labels.title}</HvTypography>\n </div>\n <div className={classes.indicatorsContainer}>\n {visualIndicator && (\n <div\n className={cx(\n classes.visualIndicatorContainer,\n classes.spacingToTheRight,\n )}\n >\n {visualIndicator}\n </div>\n )}\n {labels.indicator && (\n <HvTypography\n className={cx(classes.spacingToTheRight, classes.indicatorText)}\n variant={indicatorTextVariant}\n >\n {labels.indicator}\n </HvTypography>\n )}\n {labels.unit && (\n <HvTypography\n className={classes.indicatorUnit}\n variant={indicatorUnitTextVariant}\n >\n {labels.unit}\n </HvTypography>\n )}\n </div>\n {visualComparison && (\n <div className={classes.comparisonComposition}>\n {trendIndicator && (\n <div className={cx(classes.trendLine, classes.spacingToTheRight)}>\n {trendIndicator}\n </div>\n )}\n <div>\n <div className={classes.comparisonContainer}>\n <InternalVisualComparison\n className={cx(classes.comparisons, classes.spacingToTheRight)}\n variant=\"label\"\n >\n {visualComparison}\n </InternalVisualComparison>\n </div>\n <div className={classes.comparisonContainer}>\n <HvTypography className={classes.comparisons} variant=\"caption2\">\n {labels.comparisonIndicatorInfo}\n </HvTypography>\n </div>\n </div>\n </div>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;AAcA,MAAM,iBAAiB;AAAA;AAAA,EAErB,OAAO;AAAA;AAAA,EAEP,WAAW;AAAA;AAAA,EAEX,MAAM;AAAA;AAAA,EAEN,yBAAyB;AAC3B;AAwCa,MAAA,QAAQ,CAAC,UAAsB;AACpC,QAAA;AAAA,IACJ,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,2BAA2B;AAAA,IAC3B,uBAAuB;AAAA,IACvB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAElC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,QAAM,2BACJ,OAAO,qBAAqB,WAAW,eAAe;AAGtD,SAAA,qBAAC,SAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC/C,UAAA;AAAA,IAAA,oBAAC,SACC,UAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAA,OAAO,OAAM,EAC9C,CAAA;AAAA,IACC,qBAAA,OAAA,EAAI,WAAW,QAAQ,qBACrB,UAAA;AAAA,MACC,mBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,UAEC,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,MAED,OAAO,aACN;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,mBAAmB,QAAQ,aAAa;AAAA,UAC9D,SAAS;AAAA,UAER,UAAO,OAAA;AAAA,QAAA;AAAA,MACV;AAAA,MAED,OAAO,QACN;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,SAAS;AAAA,UAER,UAAO,OAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACV,GAEJ;AAAA,IACC,oBACC,qBAAC,OAAI,EAAA,WAAW,QAAQ,uBACrB,UAAA;AAAA,MACC,kBAAA,oBAAC,SAAI,WAAW,GAAG,QAAQ,WAAW,QAAQ,iBAAiB,GAC5D,UACH,eAAA,CAAA;AAAA,2BAED,OACC,EAAA,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,qBACtB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,QAAQ,aAAa,QAAQ,iBAAiB;AAAA,YAC5D,SAAQ;AAAA,YAEP,UAAA;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,QACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,qBACtB,UAAC,oBAAA,cAAA,EAAa,WAAW,QAAQ,aAAa,SAAQ,YACnD,UAAA,OAAO,yBACV,EACF,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/esm/Link/Link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.js","sources":["../../../src/Link/Link.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Link.styles\";\n\nexport { staticClasses as linkClasses };\n\nexport type HvLinkClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLinkProps extends HvBaseProps<HTMLAnchorElement, \"onClick\"> {\n onClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: any) => void;\n route?: string;\n data?: any;\n children: any;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvLinkClasses;\n}\n\nexport const HvLink = (props: HvLinkProps) => {\n const {\n onClick,\n classes: classesProp,\n className,\n route,\n data,\n children,\n ...others\n } = useDefaultProps(\"HvLink\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <a\n href={route}\n onClick={(event) => {\n if (!onClick) return;\n\n event.preventDefault();\n onClick?.(event, data);\n }}\n className={cx(classes.a, className)}\n {...others}\n >\n {children}\n </a>\n );\n};\n"],"names":[],"mappings":";;;;AAqBa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,SAAS,~~GAAG~~,~~IAAI,~~WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,SAAS,CAAC,UAAU;AAClB,YAAI,CAAC,QAAS;AAEd,cAAM,eAAe;AACrB,kBAAU,OAAO,IAAI;AAAA,MACvB;AAAA,MACA,WAAW,GAAG,QAAQ,GAAG,SAAS;AAAA,MACjC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,~~EAAA~~;~~AAGP~~;"}
1	+ {"version":3,"file":"Link.js","sources":["../../../src/Link/Link.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Link.styles\";\n\nexport { staticClasses as linkClasses };\n\nexport type HvLinkClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLinkProps extends HvBaseProps<HTMLAnchorElement, \"onClick\"> {\n onClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: any) => void;\n route?: string;\n data?: any;\n children: any;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvLinkClasses;\n}\n\nexport const HvLink = (props: HvLinkProps) => {\n const {\n onClick,\n classes: classesProp,\n className,\n route,\n data,\n children,\n ...others\n } = useDefaultProps(\"HvLink\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <a\n href={route}\n onClick={(event) => {\n if (!onClick) return;\n\n event.preventDefault();\n onClick?.(event, data);\n }}\n className={cx(classes.a, className)}\n {...others}\n >\n {children}\n </a>\n );\n};\n"],"names":[],"mappings":";;;;AAqBa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,SAAS,CAAC,UAAU;AAClB,YAAI,CAAC,QAAS;AAEd,cAAM,eAAe;AACrB,kBAAU,OAAO,IAAI;AAAA,MACvB;AAAA,MACA,WAAW,GAAG,QAAQ,GAAG,SAAS;AAAA,MACjC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/esm/Link/Link.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.styles.js","sources":["../../../src/Link/Link.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLink\", {\n a: {\n ...theme.typography.label,\n textDecoration: \"underline\",\n color: theme.colors.primary,\n\n \"&:focus-visible\": { ...outlineStyles },\n },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,GAAG;AAAA,IACD,GAAG,MAAM,WAAW;AAAA,IACpB,gBAAgB;AAAA,IAChB,OAAO,MAAM,OAAO;AAAA,IAEpB,mBAAmB,EAAE,GAAG,cAAc;AAAA,~~EACxC~~;~~AACF~~,CAAC;"}
1	+ {"version":3,"file":"Link.styles.js","sources":["../../../src/Link/Link.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLink\", {\n a: {\n ...theme.typography.label,\n textDecoration: \"underline\",\n color: theme.colors.primary,\n\n \"&:focus-visible\": { ...outlineStyles },\n },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,GAAG;AAAA,IACD,GAAG,MAAM,WAAW;AAAA,IACpB,gBAAgB;AAAA,IAChB,OAAO,MAAM,OAAO;AAAA,IAEpB,mBAAmB,EAAE,GAAG,cAAc;AAAA,EAAA;AAE1C,CAAC;"}

package/dist/esm/List/List.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"List.js","sources":["../../../src/List/List.tsx"],"sourcesContent":["import {\n AriaRole,\n forwardRef,\n isValidElement,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { FixedSizeList } from \"react-window\";\nimport { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../CheckBox\";\nimport { HvLink } from \"../Link\";\nimport {\n HvListContainer,\n HvListContainerProps,\n HvListItem,\n} from \"../ListContainer\";\nimport { HvOverflowTooltip } from \"../OverflowTooltip\";\nimport { HvRadio } from \"../Radio\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { HvListLabels, HvListValue } from \"./types\";\nimport { useSelectableList } from \"./useSelectableList\";\nimport { parseList } from \"./utils\";\n\nexport { staticClasses as listClasses };\n\nexport type HvListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListProps\n extends HvBaseProps<HTMLUListElement, \"onChange\" \| \"onClick\"> {\n /*\n A list containing the elements to be rendered.\n \n - id: The id of the item.\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 * - isHidden: Is item visible.\n * - icon: The icon.\n * - showNavIcon: If true renders the navigation icon on the right.\n * - path: The path to navigate to.\n /\n values: HvListValue[];\n /* If true renders a multi select list. /\n multiSelect?: boolean;\n /\n If true renders select all option for multi selection lists with selectors.\n * note: It will only be rendered if multiSelect and useSelector props are set to true.\n /\n showSelectAll?: boolean;\n /* An object containing all the labels for the dropdown. /\n labels?: HvListLabels;\n /* If true renders list items with radio or checkbox selectors. /\n useSelector?: boolean;\n /* Call back fired when list item is selected. Returns selection state. /\n onChange?: (value: HvListValue[]) => void;\n /* Call back fired when list item is selected. Returns selected item. /\n onClick?: (\n event:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLLIElement>,\n value: HvListValue,\n ) => void;\n /* If `true` the list items will show the selection state. /\n selectable?: boolean;\n /* If `true`, selection can be toggled when single selection. /\n singleSelectionToggle?: boolean;\n /* If `true` the list will be rendered without vertical spacing. /\n condensed?: boolean;\n /* If `true` the dropdown will show tooltips when user mouseenter text in list. @deprecated this is always enabled /\n hasTooltips?: boolean;\n /* Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used /\n height?: number;\n /* Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options. /\n virtualized?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvListClasses;\n}\n\nconst DEFAULT_LABELS = {\n selectAll: \"Select All\",\n selectionConjunction: \"/\",\n};\n\n/\n Component used to show a set of related data to the user.\n */\nexport const HvList = (props: HvListProps) => {\n const {\n id,\n classes: classesProp,\n className,\n multiSelect = false,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n hasTooltips = false,\n showSelectAll = false,\n labels = DEFAULT_LABELS,\n useSelector = false,\n selectable = true,\n singleSelectionToggle = true,\n condensed = false,\n onChange,\n onClick,\n values: valuesProp = [],\n height,\n virtualized = false,\n ...others\n } = useDefaultProps(\"HvList\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [list, setList, selection] = useSelectableList(valuesProp);\n const listRef = useRef<any>(null);\n\n useEffect(() => {\n const passedProps = { multiSelect, selectable, singleSelectionToggle };\n const parsedList: HvListValue[] = parseList(\n undefined,\n passedProps,\n undefined,\n valuesProp,\n );\n\n setList(parsedList);\n }, [valuesProp, multiSelect, selectable, singleSelectionToggle, setList]);\n\n const [role, itemRole] = useMemo<[AriaRole, AriaRole]>(() => {\n // selectors are responsible for the role & selection state\n if (selectable && useSelector) return [\"list\", \"listitem\"];\n\n if (selectable) return [\"listbox\", \"option\"];\n return [\"menu\", \"menuitem\"];\n }, [selectable, useSelector]);\n\n const handleSelect = (\n evt: React.ChangeEvent<HTMLInputElement> \| React.MouseEvent<HTMLLIElement>,\n item: HvListValue,\n ) => {\n if (!item.path) evt.preventDefault();\n if (item.disabled) return;\n\n const passedProps = { multiSelect, selectable, singleSelectionToggle };\n const parsedList = parseList(item, passedProps, undefined, list);\n setList(parsedList);\n\n onClick?.(evt, item);\n onChange?.(parsedList);\n };\n\n const handleSelectAll = () => {\n const passedProps = { multiSelect, selectable, singleSelectionToggle };\n const anySelectableSelected = list.some(\n (elem) => elem.selected \|\| elem.disabled,\n );\n const parsedList = parseList(\n undefined,\n passedProps,\n !anySelectableSelected,\n list,\n );\n setList(parsedList);\n\n onChange?.(parsedList);\n };\n\n const renderLeftIcon = (item: HvListValue) => {\n return isValidElement(item.icon)\n ? item.icon\n : typeof item.icon === \"function\"\n ? item.icon?.({\n isSelected: item.selected,\n isDisabled: item.disabled,\n })\n : null;\n };\n\n const renderSelectAll = () => {\n const { selectAll, selectionConjunction } = labels;\n\n const anySelected = !!selection?.length;\n const allSelected = selection.length === list.length;\n\n const selectionLabel = (\n <HvTypography component=\"span\">\n {!anySelected ? (\n <>\n <b>{selectAll}</b>\n {` (${list.length})`}\n </>\n ) : (\n <>\n <b>{selection.length}</b>\n {`\\xa0${selectionConjunction}\\xa0`}\n {list.length}\n </>\n )}\n </HvTypography>\n );\n\n return (\n <HvCheckBox\n id={setId(id, \"select-all\")}\n label={selectionLabel}\n onChange={handleSelectAll}\n className={classes.selectAllSelector}\n indeterminate={anySelected && !allSelected}\n checked={allSelected}\n />\n );\n };\n\n const renderItemText = (item: HvListValue) => {\n return !multiSelect && item.path ? (\n <HvLink route={item.path} classes={{ a: classes.link }}>\n <HvOverflowTooltip data={item.label} />\n </HvLink>\n ) : (\n <HvOverflowTooltip data={item.label} />\n );\n };\n\n const renderSelectItem = (item: HvListValue, itemId?: string) => {\n if (!useSelector) return renderItemText(item);\n\n const Component = multiSelect ? HvCheckBox : HvRadio;\n\n return (\n <Component\n id={setId(itemId, \"selector\")}\n label={<HvOverflowTooltip data={item.label} />}\n checked={item.selected \|\| false}\n disabled={item.disabled}\n onChange={multiSelect ? (evt) => handleSelect(evt, item) : undefined}\n classes={{\n root: classes.selectorRoot,\n container: classes.selectorContainer,\n label: classes.truncate,\n }}\n />\n );\n };\n\n const renderListItem = (item: HvListValue, i: number, otherProps = {}) => {\n const itemId = setId(id, \"item\", i);\n const selected = item.selected \|\| false;\n\n const startAdornment =\n !useSelector && item.icon ? renderLeftIcon(item) : null;\n\n return (\n <HvListItem\n key={i}\n id={itemId}\n role={itemRole}\n disabled={item.disabled \|\| undefined}\n className={classes.item}\n classes={{\n selected: cx({\n [classes.itemSelector]: useSelector \|\| multiSelect,\n }),\n }}\n selected={multiSelect \|\| selected ? selected : undefined}\n onClick={(evt) => handleSelect(evt, item)}\n startAdornment={startAdornment}\n endAdornment={\n item.showNavIcon && (\n <DropRightXS className={classes.box} iconSize=\"XS\" />\n )\n }\n {...otherProps}\n >\n {renderSelectItem(item, itemId)}\n </HvListItem>\n );\n };\n\n const filteredList = list.filter((it) => !it.isHidden);\n const anySelected = list\n .map((item) => item.selected && !item.disabled)\n .reduce((result, selected) => result \|\| selected, false);\n\n const selectedItemIndex = list.findIndex((item) => item.selected);\n useEffect(() => {\n if (selectedItemIndex >= 0 && listRef.current !== null) {\n listRef.current.scrollToItem(selectedItemIndex);\n }\n }, [listRef, selectedItemIndex]);\n\n const renderVirtualizedListItem = ({\n index,\n style,\n }: {\n index: number;\n style: Record<string, any>;\n }) => {\n const item = filteredList[index];\n const tabIndex =\n item.tabIndex \|\|\n (!anySelected && index === 0) \|\|\n (item.selected && !item.disabled)\n ? 0\n : -1;\n\n return renderListItem(item, index, {\n style: {\n ...style,\n top: `${parseFloat(style.top) + 5}px`,\n left: `${parseFloat(style.left) + 5}px`,\n width: `calc(${parseFloat(style.width)}% - 10px)`,\n },\n tabIndex,\n interactive: true,\n condensed,\n disableGutters: useSelector,\n });\n };\n\n const ariaMultiSelectable = (role === \"listbox\" && multiSelect) \|\| undefined;\n\n const ListContainer = useMemo(() => {\n return forwardRef<HTMLUListElement, HvListContainerProps>(\n ({ ...rest }, ref) => (\n <HvListContainer\n id={id}\n className={cx(classes.root, className)}\n role={role}\n interactive\n condensed={condensed}\n disableGutters={useSelector}\n aria-multiselectable={ariaMultiSelectable}\n ref={ref}\n {...rest}\n />\n ),\n );\n }, [\n cx,\n id,\n useSelector,\n className,\n classes.root,\n role,\n condensed,\n ariaMultiSelectable,\n ]);\n\n // Render nothing if there are no items\n if (filteredList.length === 0) return null;\n\n return (\n <>\n {multiSelect && useSelector && showSelectAll && renderSelectAll()}\n\n {!virtualized ? (\n <HvListContainer\n id={id}\n className={cx(classes.root, className)}\n role={role}\n interactive\n condensed={condensed}\n disableGutters={useSelector}\n aria-multiselectable={ariaMultiSelectable}\n {...others}\n >\n {filteredList.map((item, i) => renderListItem(item, i))}\n </HvListContainer>\n ) : (\n <FixedSizeList\n ref={listRef}\n className={classes.virtualizedRoot}\n height={(height \|\| 0) + 5}\n width=\"100%\"\n itemCount={filteredList.length}\n itemSize={condensed ? 32 : 40}\n innerElementType={ListContainer}\n {...(others as any)}\n >\n {renderVirtualizedListItem}\n </FixedSizeList>\n )}\n </>\n );\n};\n"],"names":["anySelected"],"mappings":";;;;;;;;;;;;;;;;;AAuFA,MAAM,iBAAiB;AAAA,EACrB,WAAW;AAAA,EACX,sBAAsB;AACxB;AAKa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAc;AAAA;AAAA,IAEd,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,cAAc;AAAA,IACd,aAAa;AAAA,IACb,wBAAwB;AAAA,IACxB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,QAAQ,aAAa,CAAC;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,MAAM,SAAS,SAAS,IAAI,kBAAkB,UAAU;AACzD,QAAA,UAAU,OAAY,IAAI;AAEhC,YAAU,MAAM;AACd,UAAM,cAAc,EAAE,aAAa,YAAY,sBAAsB;AACrE,UAAM,aAA4B;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,YAAQ,UAAU;AAAA,EAAA,GACjB,CAAC,YAAY,aAAa,YAAY,uBAAuB,OAAO,CAAC;AAExE,QAAM,CAAC,MAAM,QAAQ,IAAI,QAA8B,MAAM;AAE3D,QAAI,cAAc,YAAoB,QAAA,CAAC,QAAQ,UAAU;AAEzD,QAAI,WAAY,QAAO,CAAC,WAAW,QAAQ;AACpC,WAAA,CAAC,QAAQ,UAAU;AAAA,EAAA,GACzB,CAAC,YAAY,WAAW,CAAC;AAEtB,QAAA,eAAe,CACnB,KACA,SACG;AACH,QAAI,CAAC,KAAK,KAAM,KAAI,eAAe;AACnC,QAAI,KAAK,SAAU;AAEnB,UAAM,cAAc,EAAE,aAAa,YAAY,sBAAsB;AACrE,UAAM,aAAa,UAAU,MAAM,aAAa,QAAW,IAAI;AAC/D,YAAQ,UAAU;AAElB,cAAU,KAAK,IAAI;AACnB,eAAW,UAAU;AAAA,EAAA;AAGvB,QAAM,kBAAkB,MAAM;AAC5B,UAAM,cAAc,EAAE,aAAa,YAAY,sBAAsB;AACrE,UAAM,wBAAwB,KAAK;AAAA,MACjC,CAAC,SAAS,KAAK,YAAY,KAAK;AAAA,IAAA;AAElC,UAAM,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,MACA,CAAC;AAAA,MACD;AAAA,IAAA;AAEF,YAAQ,UAAU;AAElB,eAAW,UAAU;AAAA,EAAA;AAGjB,QAAA,iBAAiB,CAAC,SAAsB;AACrC,WAAA,eAAe,KAAK,IAAI,IAC3B,KAAK,OACL,OAAO,KAAK,SAAS,aACnB,KAAK,OAAO;AAAA,MACV,YAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,IAClB,CAAA,IACD;AAAA,EAAA;AAGR,QAAM,kBAAkB,MAAM;AACtB,UAAA,EAAE,WAAW,qBAAyB,IAAA;AAEtCA,UAAAA,eAAc,CAAC,CAAC,WAAW;AAC3B,UAAA,cAAc,UAAU,WAAW,KAAK;AAE9C,UAAM,iBACH,oBAAA,cAAA,EAAa,WAAU,QACrB,UAAA,CAACA,eAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,oBAAC,OAAG,UAAU,UAAA,CAAA;AAAA,MACb,KAAK,KAAK,MAAM;AAAA,IAAA,EAAA,CACnB,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAC,oBAAA,KAAA,EAAG,oBAAU,OAAO,CAAA;AAAA,MACpB,IAAO,oBAAoB;AAAA,MAC3B,KAAK;AAAA,IAAA,EACR,CAAA,EAEJ,CAAA;AAIA,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,YAAY;AAAA,QAC1B,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW,QAAQ;AAAA,QACnB,eAAeA,gBAAe,CAAC;AAAA,QAC/B,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACX;AAIE,QAAA,iBAAiB,CAAC,SAAsB;AACrC,WAAA,CAAC,eAAe,KAAK,OAC1B,oBAAC,QAAO,EAAA,OAAO,KAAK,MAAM,SAAS,EAAE,GAAG,QAAQ,KAC9C,GAAA,UAAA,oBAAC,mBAAkB,EAAA,MAAM,KAAK,MAAA,CAAO,EACvC,CAAA,IAEC,oBAAA,mBAAA,EAAkB,MAAM,KAAK,MAAO,CAAA;AAAA,EAAA;AAInC,QAAA,mBAAmB,CAAC,MAAmB,WAAoB;AAC/D,QAAI,CAAC,YAAoB,QAAA,eAAe,IAAI;AAEtC,UAAA,YAAY,cAAc,aAAa;AAG3C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,QAAQ,UAAU;AAAA,QAC5B,OAAO,oBAAC,mBAAkB,EAAA,MAAM,KAAK,OAAO;AAAA,QAC5C,SAAS,KAAK,YAAY;AAAA,QAC1B,UAAU,KAAK;AAAA,QACf,UAAU,cAAc,CAAC,QAAQ,aAAa,KAAK,IAAI,IAAI;AAAA,QAC3D,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,WAAW,QAAQ;AAAA,UACnB,OAAO,QAAQ;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAIJ,QAAM,iBAAiB,CAAC,MAAmB,GAAW,aAAa,CAAA,MAAO;AACxE,UAAM,SAAS,MAAM,IAAI,QAAQ,CAAC;AAC5B,UAAA,WAAW,KAAK,YAAY;AAElC,UAAM,iBACJ,CAAC,eAAe,KAAK,OAAO,eAAe,IAAI,IAAI;AAGnD,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,UAAU,KAAK,YAAY;AAAA,QAC3B,WAAW,QAAQ;AAAA,QACnB,SAAS;AAAA,UACP,UAAU,GAAG;AAAA,YACX,CAAC,QAAQ,YAAY,GAAG,eAAe;AAAA,UAAA,CACxC;AAAA,QACH;AAAA,QACA,UAAU,eAAe,WAAW,WAAW;AAAA,QAC/C,SAAS,CAAC,QAAQ,aAAa,KAAK,IAAI;AAAA,QACxC;AAAA,QACA,cACE,KAAK,eACH,oBAAC,eAAY,WAAW,QAAQ,KAAK,UAAS,KAAK,CAAA;AAAA,QAGtD,GAAG;AAAA,QAEH,UAAA,iBAAiB,MAAM,MAAM;AAAA,MAAA;AAAA,MApBzB;AAAA,IAAA;AAAA,EAqBP;AAIJ,QAAM,eAAe,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,QAAQ;AACrD,QAAM,cAAc,KACjB,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,KAAK,QAAQ,EAC7C,OAAO,CAAC,QAAQ,aAAa,UAAU,UAAU,KAAK;AAEzD,QAAM,oBAAoB,KAAK,UAAU,CAAC,SAAS,KAAK,QAAQ;AAChE,YAAU,MAAM;AACd,QAAI,qBAAqB,KAAK,QAAQ,YAAY,MAAM;AAC9C,cAAA,QAAQ,aAAa,iBAAiB;AAAA,IAChD;AAAA,EAAA,GACC,CAAC,SAAS,iBAAiB,CAAC;AAE/B,QAAM,4BAA4B,CAAC;AAAA,IACjC;AAAA,IACA;AAAA,EAAA,MAII;AACE,UAAA,OAAO,aAAa,KAAK;AAC/B,UAAM,WACJ,KAAK,YACJ,CAAC,eAAe,UAAU,KAC1B,KAAK,YAAY,CAAC,KAAK,WACpB,IACA;AAEC,WAAA,eAAe,MAAM,OAAO;AAAA,MACjC,OAAO;AAAA,QACL,GAAG;AAAA,QACH,KAAK,GAAG,WAAW,MAAM,GAAG,IAAI,CAAC;AAAA,QACjC,MAAM,GAAG,WAAW,MAAM,IAAI,IAAI,CAAC;AAAA,QACnC,OAAO,QAAQ,WAAW,MAAM,KAAK,CAAC;AAAA,MACxC;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,gBAAgB;AAAA,IAAA,CACjB;AAAA,EAAA;AAGG,QAAA,sBAAuB,SAAS,aAAa,eAAgB;AAE7D,QAAA,gBAAgB,QAAQ,MAAM;AAC3B,WAAA;AAAA,MACL,CAAC,EAAE,GAAG,QAAQ,QACZ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,UACrC;AAAA,UACA,aAAW;AAAA,UACX;AAAA,UACA,gBAAgB;AAAA,UAChB,wBAAsB;AAAA,UACtB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGG,MAAA,aAAa,WAAW,EAAU,QAAA;AAEtC,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAe,eAAA,eAAe,iBAAiB,gBAAgB;AAAA,IAE/D,CAAC,cACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA,gBAAgB;AAAA,QAChB,wBAAsB;AAAA,QACrB,GAAG;AAAA,QAEH,UAAA,aAAa,IAAI,CAAC,MAAM,MAAM,eAAe,MAAM,CAAC,CAAC;AAAA,MAAA;AAAA,IAAA,IAGxD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,QAAQ;AAAA,QACnB,SAAS,UAAU,KAAK;AAAA,QACxB,OAAM;AAAA,QACN,WAAW,aAAa;AAAA,QACxB,UAAU,YAAY,KAAK;AAAA,QAC3B,kBAAkB;AAAA,QACjB,GAAI;AAAA,QAEJ,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"List.js","sources":["../../../src/List/List.tsx"],"sourcesContent":["import {\n AriaRole,\n forwardRef,\n isValidElement,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { FixedSizeList } from \"react-window\";\nimport { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../CheckBox\";\nimport { HvLink } from \"../Link\";\nimport {\n HvListContainer,\n HvListContainerProps,\n HvListItem,\n} from \"../ListContainer\";\nimport { HvOverflowTooltip } from \"../OverflowTooltip\";\nimport { HvRadio } from \"../Radio\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { HvListLabels, HvListValue } from \"./types\";\nimport { useSelectableList } from \"./useSelectableList\";\nimport { parseList } from \"./utils\";\n\nexport { staticClasses as listClasses };\n\nexport type HvListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListProps\n extends HvBaseProps<HTMLUListElement, \"onChange\" \| \"onClick\"> {\n /*\n A list containing the elements to be rendered.\n \n - id: The id of the item.\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 * - isHidden: Is item visible.\n * - icon: The icon.\n * - showNavIcon: If true renders the navigation icon on the right.\n * - path: The path to navigate to.\n /\n values: HvListValue[];\n /* If true renders a multi select list. /\n multiSelect?: boolean;\n /\n If true renders select all option for multi selection lists with selectors.\n * note: It will only be rendered if multiSelect and useSelector props are set to true.\n /\n showSelectAll?: boolean;\n /* An object containing all the labels for the dropdown. /\n labels?: HvListLabels;\n /* If true renders list items with radio or checkbox selectors. /\n useSelector?: boolean;\n /* Call back fired when list item is selected. Returns selection state. /\n onChange?: (value: HvListValue[]) => void;\n /* Call back fired when list item is selected. Returns selected item. /\n onClick?: (\n event:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLLIElement>,\n value: HvListValue,\n ) => void;\n /* If `true` the list items will show the selection state. /\n selectable?: boolean;\n /* If `true`, selection can be toggled when single selection. /\n singleSelectionToggle?: boolean;\n /* If `true` the list will be rendered without vertical spacing. /\n condensed?: boolean;\n /* If `true` the dropdown will show tooltips when user mouseenter text in list. @deprecated this is always enabled /\n hasTooltips?: boolean;\n /* Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used /\n height?: number;\n /* Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options. /\n virtualized?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvListClasses;\n}\n\nconst DEFAULT_LABELS = {\n selectAll: \"Select All\",\n selectionConjunction: \"/\",\n};\n\n/\n Component used to show a set of related data to the user.\n */\nexport const HvList = (props: HvListProps) => {\n const {\n id,\n classes: classesProp,\n className,\n multiSelect = false,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n hasTooltips = false,\n showSelectAll = false,\n labels = DEFAULT_LABELS,\n useSelector = false,\n selectable = true,\n singleSelectionToggle = true,\n condensed = false,\n onChange,\n onClick,\n values: valuesProp = [],\n height,\n virtualized = false,\n ...others\n } = useDefaultProps(\"HvList\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [list, setList, selection] = useSelectableList(valuesProp);\n const listRef = useRef<any>(null);\n\n useEffect(() => {\n const passedProps = { multiSelect, selectable, singleSelectionToggle };\n const parsedList: HvListValue[] = parseList(\n undefined,\n passedProps,\n undefined,\n valuesProp,\n );\n\n setList(parsedList);\n }, [valuesProp, multiSelect, selectable, singleSelectionToggle, setList]);\n\n const [role, itemRole] = useMemo<[AriaRole, AriaRole]>(() => {\n // selectors are responsible for the role & selection state\n if (selectable && useSelector) return [\"list\", \"listitem\"];\n\n if (selectable) return [\"listbox\", \"option\"];\n return [\"menu\", \"menuitem\"];\n }, [selectable, useSelector]);\n\n const handleSelect = (\n evt: React.ChangeEvent<HTMLInputElement> \| React.MouseEvent<HTMLLIElement>,\n item: HvListValue,\n ) => {\n if (!item.path) evt.preventDefault();\n if (item.disabled) return;\n\n const passedProps = { multiSelect, selectable, singleSelectionToggle };\n const parsedList = parseList(item, passedProps, undefined, list);\n setList(parsedList);\n\n onClick?.(evt, item);\n onChange?.(parsedList);\n };\n\n const handleSelectAll = () => {\n const passedProps = { multiSelect, selectable, singleSelectionToggle };\n const anySelectableSelected = list.some(\n (elem) => elem.selected \|\| elem.disabled,\n );\n const parsedList = parseList(\n undefined,\n passedProps,\n !anySelectableSelected,\n list,\n );\n setList(parsedList);\n\n onChange?.(parsedList);\n };\n\n const renderLeftIcon = (item: HvListValue) => {\n return isValidElement(item.icon)\n ? item.icon\n : typeof item.icon === \"function\"\n ? item.icon?.({\n isSelected: item.selected,\n isDisabled: item.disabled,\n })\n : null;\n };\n\n const renderSelectAll = () => {\n const { selectAll, selectionConjunction } = labels;\n\n const anySelected = !!selection?.length;\n const allSelected = selection.length === list.length;\n\n const selectionLabel = (\n <HvTypography component=\"span\">\n {!anySelected ? (\n <>\n <b>{selectAll}</b>\n {` (${list.length})`}\n </>\n ) : (\n <>\n <b>{selection.length}</b>\n {`\\xa0${selectionConjunction}\\xa0`}\n {list.length}\n </>\n )}\n </HvTypography>\n );\n\n return (\n <HvCheckBox\n id={setId(id, \"select-all\")}\n label={selectionLabel}\n onChange={handleSelectAll}\n className={classes.selectAllSelector}\n indeterminate={anySelected && !allSelected}\n checked={allSelected}\n />\n );\n };\n\n const renderItemText = (item: HvListValue) => {\n return !multiSelect && item.path ? (\n <HvLink route={item.path} classes={{ a: classes.link }}>\n <HvOverflowTooltip data={item.label} />\n </HvLink>\n ) : (\n <HvOverflowTooltip data={item.label} />\n );\n };\n\n const renderSelectItem = (item: HvListValue, itemId?: string) => {\n if (!useSelector) return renderItemText(item);\n\n const Component = multiSelect ? HvCheckBox : HvRadio;\n\n return (\n <Component\n id={setId(itemId, \"selector\")}\n label={<HvOverflowTooltip data={item.label} />}\n checked={item.selected \|\| false}\n disabled={item.disabled}\n onChange={multiSelect ? (evt) => handleSelect(evt, item) : undefined}\n classes={{\n root: classes.selectorRoot,\n container: classes.selectorContainer,\n label: classes.truncate,\n }}\n />\n );\n };\n\n const renderListItem = (item: HvListValue, i: number, otherProps = {}) => {\n const itemId = setId(id, \"item\", i);\n const selected = item.selected \|\| false;\n\n const startAdornment =\n !useSelector && item.icon ? renderLeftIcon(item) : null;\n\n return (\n <HvListItem\n key={i}\n id={itemId}\n role={itemRole}\n disabled={item.disabled \|\| undefined}\n className={classes.item}\n classes={{\n selected: cx({\n [classes.itemSelector]: useSelector \|\| multiSelect,\n }),\n }}\n selected={multiSelect \|\| selected ? selected : undefined}\n onClick={(evt) => handleSelect(evt, item)}\n startAdornment={startAdornment}\n endAdornment={\n item.showNavIcon && (\n <DropRightXS className={classes.box} iconSize=\"XS\" />\n )\n }\n {...otherProps}\n >\n {renderSelectItem(item, itemId)}\n </HvListItem>\n );\n };\n\n const filteredList = list.filter((it) => !it.isHidden);\n const anySelected = list\n .map((item) => item.selected && !item.disabled)\n .reduce((result, selected) => result \|\| selected, false);\n\n const selectedItemIndex = list.findIndex((item) => item.selected);\n useEffect(() => {\n if (selectedItemIndex >= 0 && listRef.current !== null) {\n listRef.current.scrollToItem(selectedItemIndex);\n }\n }, [listRef, selectedItemIndex]);\n\n const renderVirtualizedListItem = ({\n index,\n style,\n }: {\n index: number;\n style: Record<string, any>;\n }) => {\n const item = filteredList[index];\n const tabIndex =\n item.tabIndex \|\|\n (!anySelected && index === 0) \|\|\n (item.selected && !item.disabled)\n ? 0\n : -1;\n\n return renderListItem(item, index, {\n style: {\n ...style,\n top: `${parseFloat(style.top) + 5}px`,\n left: `${parseFloat(style.left) + 5}px`,\n width: `calc(${parseFloat(style.width)}% - 10px)`,\n },\n tabIndex,\n interactive: true,\n condensed,\n disableGutters: useSelector,\n });\n };\n\n const ariaMultiSelectable = (role === \"listbox\" && multiSelect) \|\| undefined;\n\n const ListContainer = useMemo(() => {\n return forwardRef<HTMLUListElement, HvListContainerProps>(\n ({ ...rest }, ref) => (\n <HvListContainer\n id={id}\n className={cx(classes.root, className)}\n role={role}\n interactive\n condensed={condensed}\n disableGutters={useSelector}\n aria-multiselectable={ariaMultiSelectable}\n ref={ref}\n {...rest}\n />\n ),\n );\n }, [\n cx,\n id,\n useSelector,\n className,\n classes.root,\n role,\n condensed,\n ariaMultiSelectable,\n ]);\n\n // Render nothing if there are no items\n if (filteredList.length === 0) return null;\n\n return (\n <>\n {multiSelect && useSelector && showSelectAll && renderSelectAll()}\n\n {!virtualized ? (\n <HvListContainer\n id={id}\n className={cx(classes.root, className)}\n role={role}\n interactive\n condensed={condensed}\n disableGutters={useSelector}\n aria-multiselectable={ariaMultiSelectable}\n {...others}\n >\n {filteredList.map((item, i) => renderListItem(item, i))}\n </HvListContainer>\n ) : (\n <FixedSizeList\n ref={listRef}\n className={classes.virtualizedRoot}\n height={(height \|\| 0) + 5}\n width=\"100%\"\n itemCount={filteredList.length}\n itemSize={condensed ? 32 : 40}\n innerElementType={ListContainer}\n {...(others as any)}\n >\n {renderVirtualizedListItem}\n </FixedSizeList>\n )}\n </>\n );\n};\n"],"names":["anySelected"],"mappings":"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"}

package/dist/esm/List/List.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"List.styles.js","sources":["../../../src/List/List.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n root: {},\n virtualizedRoot: { marginBottom: 5 },\n selectorRoot: { width: \"100%\", zIndex: 0 },\n selectorContainer: {\n \"&:hover\": {\n backgroundColor: \"transparent\",\n },\n\n \"&:focus-within\": {\n backgroundColor: \"transparent\",\n outline: \"none\",\n boxShadow: \"none\",\n },\n },\n box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n truncate: {\n display: \"inline-block\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n item: {},\n itemSelector: {\n \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n link: {\n ...theme.typography.body,\n textDecoration: \"none\",\n\n \"&:focus\": {\n boxShadow: \"unset !important\",\n },\n },\n selectAllSelector: {\n width: \"100%\",\n margin: \"0 0 2px 0\",\n\n position: \"relative\",\n zIndex: 0,\n\n // prevent the focus ring to be hidden by sibling hover background\n \"&:focus-within\": {\n zIndex: 1,\n },\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,iBAAiB,EAAE,cAAc,EAAE;AAAA,EACnC,cAAc,EAAE,OAAO,QAAQ,QAAQ,EAAE;AAAA,EACzC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,~~IACb~~;AAAA,~~EACF~~;AAAA,EACA,KAAK,EAAE,OAAO,QAAQ,QAAQ,QAAQ,YAAY,OAAO;AAAA,EACzD,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpD,iBAAiB,MAAM,OAAO;AAAA,~~IAChC~~;AAAA,~~EACF~~;AAAA,EACA,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACT,WAAW;AAAA,~~IACb~~;AAAA,~~EACF~~;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,UAAU;AAAA,IACV,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChB,QAAQ;AAAA,~~IACV~~;AAAA,~~EACF~~;~~AACF~~,CAAC;"}
1	+ {"version":3,"file":"List.styles.js","sources":["../../../src/List/List.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n root: {},\n virtualizedRoot: { marginBottom: 5 },\n selectorRoot: { width: \"100%\", zIndex: 0 },\n selectorContainer: {\n \"&:hover\": {\n backgroundColor: \"transparent\",\n },\n\n \"&:focus-within\": {\n backgroundColor: \"transparent\",\n outline: \"none\",\n boxShadow: \"none\",\n },\n },\n box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n truncate: {\n display: \"inline-block\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n item: {},\n itemSelector: {\n \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n link: {\n ...theme.typography.body,\n textDecoration: \"none\",\n\n \"&:focus\": {\n boxShadow: \"unset !important\",\n },\n },\n selectAllSelector: {\n width: \"100%\",\n margin: \"0 0 2px 0\",\n\n position: \"relative\",\n zIndex: 0,\n\n // prevent the focus ring to be hidden by sibling hover background\n \"&:focus-within\": {\n zIndex: 1,\n },\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,iBAAiB,EAAE,cAAc,EAAE;AAAA,EACnC,cAAc,EAAE,OAAO,QAAQ,QAAQ,EAAE;AAAA,EACzC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,KAAK,EAAE,OAAO,QAAQ,QAAQ,QAAQ,YAAY,OAAO;AAAA,EACzD,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpD,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,UAAU;AAAA,IACV,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC;"}

package/dist/esm/List/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../src/List/utils.ts"],"sourcesContent":["import { HvListValue } from \"./types\";\n\nconst isItemSelected = (item: HvListValue, newItem: HvListValue) => {\n const selectionKey = item?.id ? \"id\" : \"label\";\n const selectionElement = item?.[selectionKey];\n return newItem[selectionKey] === selectionElement;\n};\n\nconst checkIcons = (list: any[]) => list?.some((elem) => elem?.icon);\n\nconst parseState = (list = []) => {\n const hasLeftIcons = checkIcons(list);\n const selection = list.filter((elem: any) => elem?.selected);\n const anySelected = !!selection.length;\n const allSelected = selection.length === list.length;\n const anySelectableSelected = list.some(\n (elem: any) => elem?.selected \|\| elem?.disabled,\n );\n const allSelectableSelected = list.every(\n (elem: any) => elem?.selected \|\| elem?.disabled,\n );\n\n return {\n list,\n hasLeftIcons,\n anySelected,\n allSelected,\n anySelectableSelected,\n allSelectableSelected,\n selection,\n };\n};\n\nconst parseList = (\n item: HvListValue \| undefined,\n props: {\n multiSelect?: boolean;\n selectable?: boolean;\n singleSelectionToggle?: boolean;\n },\n selectAll: boolean \| undefined,\n list: HvListValue[] = [],\n): HvListValue[] => {\n const { multiSelect, selectable, singleSelectionToggle } = props \|\| {};\n\n let anySelected = false;\n const newList = list.map((elem: any) => {\n const newItem = { ...elem };\n\n // reset elem item\n if (!multiSelect) {\n newItem.selected = false;\n }\n\n const selectItem = item ? isItemSelected(item, newItem) : elem?.selected;\n\n if (selectItem && selectable) {\n let selectionState;\n\n if (multiSelect) {\n selectionState = item ? !elem?.selected : true;\n } else {\n selectionState =\n !anySelected &&\n (item && singleSelectionToggle ? !elem?.selected : true);\n }\n\n newItem.selected = selectionState;\n anySelected = true;\n }\n\n if (typeof selectAll === \"boolean\" && !elem?.disabled)\n newItem.selected = selectAll;\n\n // normalize item selected prop if not provided\n if (!newItem?.selected) newItem.selected = false;\n\n return newItem;\n });\n\n return newList;\n};\n\nexport { isItemSelected, parseList, parseState };\n"],"names":[],"mappings":"AAEM,MAAA,iBAAiB,CAAC,MAAmB,YAAyB;AAC5D,QAAA,eAAe,MAAM,KAAK,OAAO;AACjC,QAAA,mBAAmB,OAAO,YAAY;AACrC,SAAA,QAAQ,YAAY,MAAM;AACnC;AA2BA,MAAM,YAAY,CAChB,MACA,OAKA,WACA,OAAsB,CAAA,MACJ;AAClB,QAAM,EAAE,aAAa,YAAY,sBAAsB,IAAI,SAAS,~~CAAA~~;~~AAEpE~~,MAAI,cAAc;AAClB,QAAM,UAAU,KAAK,IAAI,CAAC,SAAc;AAChC,UAAA,UAAU,EAAE,GAAG;~~AAGrB~~,QAAI,CAAC,aAAa;AAChB,cAAQ,WAAW;AAAA,~~IACrB~~;~~AAEA~~,UAAM,aAAa,OAAO,eAAe,MAAM,OAAO,IAAI,MAAM;AAEhE,QAAI,cAAc,YAAY;AACxB,UAAA;AAEJ,UAAI,aAAa;AACE,yBAAA,OAAO,CAAC,MAAM,WAAW;AAAA,MAAA,OACrC;AACL,yBACE,CAAC,gBACA,QAAQ,wBAAwB,CAAC,MAAM,WAAW;AAAA,~~MACvD~~;~~AAEA~~,cAAQ,WAAW;AACL,oBAAA;AAAA,~~IAChB~~;~~AAEA~~,QAAI,OAAO,cAAc,aAAa,CAAC,MAAM;AAC3C,cAAQ,WAAW;AAGrB,QAAI,CAAC,SAAS,SAAU,SAAQ,WAAW;AAEpC,WAAA;AAAA,EAAA,CACR;AAEM,SAAA;AACT;"}
1	+ {"version":3,"file":"utils.js","sources":["../../../src/List/utils.ts"],"sourcesContent":["import { HvListValue } from \"./types\";\n\nconst isItemSelected = (item: HvListValue, newItem: HvListValue) => {\n const selectionKey = item?.id ? \"id\" : \"label\";\n const selectionElement = item?.[selectionKey];\n return newItem[selectionKey] === selectionElement;\n};\n\nconst checkIcons = (list: any[]) => list?.some((elem) => elem?.icon);\n\nconst parseState = (list = []) => {\n const hasLeftIcons = checkIcons(list);\n const selection = list.filter((elem: any) => elem?.selected);\n const anySelected = !!selection.length;\n const allSelected = selection.length === list.length;\n const anySelectableSelected = list.some(\n (elem: any) => elem?.selected \|\| elem?.disabled,\n );\n const allSelectableSelected = list.every(\n (elem: any) => elem?.selected \|\| elem?.disabled,\n );\n\n return {\n list,\n hasLeftIcons,\n anySelected,\n allSelected,\n anySelectableSelected,\n allSelectableSelected,\n selection,\n };\n};\n\nconst parseList = (\n item: HvListValue \| undefined,\n props: {\n multiSelect?: boolean;\n selectable?: boolean;\n singleSelectionToggle?: boolean;\n },\n selectAll: boolean \| undefined,\n list: HvListValue[] = [],\n): HvListValue[] => {\n const { multiSelect, selectable, singleSelectionToggle } = props \|\| {};\n\n let anySelected = false;\n const newList = list.map((elem: any) => {\n const newItem = { ...elem };\n\n // reset elem item\n if (!multiSelect) {\n newItem.selected = false;\n }\n\n const selectItem = item ? isItemSelected(item, newItem) : elem?.selected;\n\n if (selectItem && selectable) {\n let selectionState;\n\n if (multiSelect) {\n selectionState = item ? !elem?.selected : true;\n } else {\n selectionState =\n !anySelected &&\n (item && singleSelectionToggle ? !elem?.selected : true);\n }\n\n newItem.selected = selectionState;\n anySelected = true;\n }\n\n if (typeof selectAll === \"boolean\" && !elem?.disabled)\n newItem.selected = selectAll;\n\n // normalize item selected prop if not provided\n if (!newItem?.selected) newItem.selected = false;\n\n return newItem;\n });\n\n return newList;\n};\n\nexport { isItemSelected, parseList, parseState };\n"],"names":[],"mappings":"AAEM,MAAA,iBAAiB,CAAC,MAAmB,YAAyB;AAC5D,QAAA,eAAe,MAAM,KAAK,OAAO;AACjC,QAAA,mBAAmB,OAAO,YAAY;AACrC,SAAA,QAAQ,YAAY,MAAM;AACnC;AA2BA,MAAM,YAAY,CAChB,MACA,OAKA,WACA,OAAsB,CAAA,MACJ;AAClB,QAAM,EAAE,aAAa,YAAY,sBAAsB,IAAI,SAAS,CAAC;AAErE,MAAI,cAAc;AAClB,QAAM,UAAU,KAAK,IAAI,CAAC,SAAc;AAChC,UAAA,UAAU,EAAE,GAAG,KAAK;AAG1B,QAAI,CAAC,aAAa;AAChB,cAAQ,WAAW;AAAA,IAAA;AAGrB,UAAM,aAAa,OAAO,eAAe,MAAM,OAAO,IAAI,MAAM;AAEhE,QAAI,cAAc,YAAY;AACxB,UAAA;AAEJ,UAAI,aAAa;AACE,yBAAA,OAAO,CAAC,MAAM,WAAW;AAAA,MAAA,OACrC;AACL,yBACE,CAAC,gBACA,QAAQ,wBAAwB,CAAC,MAAM,WAAW;AAAA,MAAA;AAGvD,cAAQ,WAAW;AACL,oBAAA;AAAA,IAAA;AAGhB,QAAI,OAAO,cAAc,aAAa,CAAC,MAAM;AAC3C,cAAQ,WAAW;AAGrB,QAAI,CAAC,SAAS,SAAU,SAAQ,WAAW;AAEpC,WAAA;AAAA,EAAA,CACR;AAEM,SAAA;AACT;"}

package/dist/esm/ListContainer/ListContainer.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { useForkRef } from "../hooks/useForkRef.js";
 import { useClasses } from "./ListContainer.styles.js";
 import { staticClasses } from "./ListContainer.styles.js";
 import ListContext from "./ListContext/ListContext.js";
-const HvListContainer = forwardRef((props, ref) => {
+const HvListContainer = forwardRef(function HvListContainer2(props, ref) {
   const {
     id,
     classes: classesProp,

package/dist/esm/ListContainer/ListContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListContainer.js","sources":["../../../src/ListContainer/ListContainer.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n useContext,\n useMemo,\n useRef,\n} from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./ListContainer.styles\";\nimport HvListContext from \"./ListContext\";\n\nexport { staticClasses as listContainerClasses };\n\nexport type HvListContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListContainerProps extends HvBaseProps<HTMLUListElement> {\n /*\n If the list items should be focusable and react to mouse over events.\n * Defaults to true if the list is selectable, false otherwise.\n /\n interactive?: boolean;\n /* If `true` compact the vertical spacing between list items. /\n condensed?: boolean;\n /* If `true`, the list items are _visually_ selectable. To enable selection, use `HvSelectionList` /\n selectable?: boolean;\n /* If `true`, the list items' left and right padding is removed. /\n disableGutters?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvListContainerClasses;\n}\n\n/\n A <b>list</b> is any enumeration of a set of items.\n * The simple list is for continuous <b>vertical indexes of text or icons+text</b>. The content of these lists must be simple: ideally simples fields.\n * This pattern is ideal for <b>selections</b>. It should be used inside a HvPanel.\n */\nexport const HvListContainer = forwardRef<\n HTMLUListElement,\n HvListContainerProps\n>((props, ref) => {\n const {\n id,\n classes: classesProp,\n className,\n interactive = false,\n selectable,\n condensed,\n disableGutters,\n children: childrenProp,\n ...others\n } = useDefaultProps(\"HvListContainer\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const containerRef = useRef(null);\n\n const { topContainerRef, nesting = -1 } = useContext(HvListContext);\n\n const listContext = useMemo(\n () => ({\n topContainerRef: topContainerRef \|\| containerRef,\n condensed,\n selectable,\n disableGutters,\n interactive,\n nesting: nesting + 1,\n }),\n [\n condensed,\n selectable,\n disableGutters,\n interactive,\n nesting,\n topContainerRef,\n ],\n );\n\n const children = useMemo(() => {\n if (!interactive) return childrenProp;\n\n const anySelected = Children.toArray(childrenProp).some(\n (child) =>\n isValidElement(child) && child.props.selected && !child.props.disabled,\n );\n\n return Children.map(childrenProp, (child: any, i) => {\n const tabIndex =\n child.props.tabIndex \|\|\n (!anySelected && i === 0) \|\|\n (child.props.selected && !child.props.disabled)\n ? 0\n : -1;\n\n return cloneElement(child, {\n tabIndex,\n interactive,\n });\n });\n }, [childrenProp, interactive]);\n\n const handleRef = useForkRef(ref, containerRef);\n\n return (\n <HvListContext.Provider value={listContext}>\n <ul\n ref={handleRef}\n id={id}\n className={cx(classes.root, className)}\n {...others}\n >\n {children}\n </ul>\n </HvListContext.Provider>\n );\n});\n"],"names":["HvListContext"],"mappings":";;;;;;;AA4CO,MAAM,kBAAkB,WAG7B,~~CAAC~~,OAAO,~~QAAQ~~;~~AACV~~,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,~~GAAG~~,~~IAAI,~~WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,IAAI;AAEhC,QAAM,EAAE,iBAAiB,UAAU,GAAG,IAAI,~~WAAWA~~,WAAa;AAElE,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,MACL,iBAAiB,mBAAmB;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,UAAU;AAAA,IAAA;AAAA,IAErB;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,~~IACF~~;AAAA,~~EAAA~~;~~AAGI~~,QAAA,WAAW,QAAQ,MAAM;AACzB,QAAA,CAAC,YAAoB,QAAA;AAEzB,UAAM,cAAc,SAAS,QAAQ,YAAY,EAAE;AAAA,MACjD,CAAC,UACC,eAAe,KAAK,KAAK,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM;AAAA,~~IAAA~~;~~AAGlE~~,WAAO,SAAS,IAAI,cAAc,CAAC,OAAY,MAAM;AACnD,YAAM,WACJ,MAAM,MAAM,YACX,CAAC,eAAe,MAAM,KACtB,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM,WAClC,IACA;AAEN,aAAO,aAAa,OAAO;AAAA,QACzB;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA,GACA,CAAC,cAAc,WAAW,CAAC;AAExB,QAAA,YAAY,WAAW,KAAK,YAAY;AAE9C,SACG,oBAAAA,YAAc,UAAd,EAAuB,OAAO,aAC7B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,~~EAEL,~~EAAA,~~CAAA~~;AAEJ,CAAC;"}
1	+ {"version":3,"file":"ListContainer.js","sources":["../../../src/ListContainer/ListContainer.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n useContext,\n useMemo,\n useRef,\n} from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./ListContainer.styles\";\nimport HvListContext from \"./ListContext\";\n\nexport { staticClasses as listContainerClasses };\n\nexport type HvListContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListContainerProps extends HvBaseProps<HTMLUListElement> {\n /*\n If the list items should be focusable and react to mouse over events.\n * Defaults to true if the list is selectable, false otherwise.\n /\n interactive?: boolean;\n /* If `true` compact the vertical spacing between list items. /\n condensed?: boolean;\n /* If `true`, the list items are _visually_ selectable. To enable selection, use `HvSelectionList` /\n selectable?: boolean;\n /* If `true`, the list items' left and right padding is removed. /\n disableGutters?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvListContainerClasses;\n}\n\n/\n A <b>list</b> is any enumeration of a set of items.\n * The simple list is for continuous <b>vertical indexes of text or icons+text</b>. The content of these lists must be simple: ideally simples fields.\n * This pattern is ideal for <b>selections</b>. It should be used inside a HvPanel.\n */\nexport const HvListContainer = forwardRef<\n HTMLUListElement,\n HvListContainerProps\n>(function HvListContainer(props, ref) {\n const {\n id,\n classes: classesProp,\n className,\n interactive = false,\n selectable,\n condensed,\n disableGutters,\n children: childrenProp,\n ...others\n } = useDefaultProps(\"HvListContainer\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const containerRef = useRef(null);\n\n const { topContainerRef, nesting = -1 } = useContext(HvListContext);\n\n const listContext = useMemo(\n () => ({\n topContainerRef: topContainerRef \|\| containerRef,\n condensed,\n selectable,\n disableGutters,\n interactive,\n nesting: nesting + 1,\n }),\n [\n condensed,\n selectable,\n disableGutters,\n interactive,\n nesting,\n topContainerRef,\n ],\n );\n\n const children = useMemo(() => {\n if (!interactive) return childrenProp;\n\n const anySelected = Children.toArray(childrenProp).some(\n (child) =>\n isValidElement(child) && child.props.selected && !child.props.disabled,\n );\n\n return Children.map(childrenProp, (child: any, i) => {\n const tabIndex =\n child.props.tabIndex \|\|\n (!anySelected && i === 0) \|\|\n (child.props.selected && !child.props.disabled)\n ? 0\n : -1;\n\n return cloneElement(child, {\n tabIndex,\n interactive,\n });\n });\n }, [childrenProp, interactive]);\n\n const handleRef = useForkRef(ref, containerRef);\n\n return (\n <HvListContext.Provider value={listContext}>\n <ul\n ref={handleRef}\n id={id}\n className={cx(classes.root, className)}\n {...others}\n >\n {children}\n </ul>\n </HvListContext.Provider>\n );\n});\n"],"names":["HvListContainer","HvListContext"],"mappings":";;;;;;;AA4CO,MAAM,kBAAkB,WAG7B,SAASA,iBAAgB,OAAO,KAAK;AAC/B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,IAAI;AAEhC,QAAM,EAAE,iBAAiB,UAAU,GAAG,IAAI,WAAWC,WAAa;AAElE,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,MACL,iBAAiB,mBAAmB;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,UAAU;AAAA,IAAA;AAAA,IAErB;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAEM,QAAA,WAAW,QAAQ,MAAM;AACzB,QAAA,CAAC,YAAoB,QAAA;AAEzB,UAAM,cAAc,SAAS,QAAQ,YAAY,EAAE;AAAA,MACjD,CAAC,UACC,eAAe,KAAK,KAAK,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM;AAAA,IAClE;AAEA,WAAO,SAAS,IAAI,cAAc,CAAC,OAAY,MAAM;AACnD,YAAM,WACJ,MAAM,MAAM,YACX,CAAC,eAAe,MAAM,KACtB,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM,WAClC,IACA;AAEN,aAAO,aAAa,OAAO;AAAA,QACzB;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA,GACA,CAAC,cAAc,WAAW,CAAC;AAExB,QAAA,YAAY,WAAW,KAAK,YAAY;AAE9C,SACG,oBAAAA,YAAc,UAAd,EAAuB,OAAO,aAC7B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ,CAAC;"}

package/dist/esm/ListContainer/ListContainer.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListContainer.styles.js","sources":["../../../src/ListContainer/ListContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListContainer\", {\n root: {\n overflow: \"clip\",\n overflowClipMargin: 4,\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,oBAAoB;AAAA,~~EACtB~~;~~AACF~~,CAAC;"}
1	+ {"version":3,"file":"ListContainer.styles.js","sources":["../../../src/ListContainer/ListContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListContainer\", {\n root: {\n overflow: \"clip\",\n overflowClipMargin: 4,\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,oBAAoB;AAAA,EAAA;AAExB,CAAC;"}

package/dist/esm/ListContainer/ListContext/ListContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListContext.js","sources":["../../../../src/ListContainer/ListContext/ListContext.ts"],"sourcesContent":["import React from \"react\";\n\nconst ListContext = React.createContext<{\n interactive?: boolean;\n nesting?: number;\n condensed?: boolean;\n selectable?: boolean;\n disableGutters?: boolean;\n topContainerRef?: React.MutableRefObject<HTMLUListElement \| null>;\n}>({});\n\nListContext.displayName = \"ListContext\";\n\nexport default ListContext;\n"],"names":["React"],"mappings":";AAEA,MAAM,cAAcA,eAAM,cAOvB,~~EAAE~~;AAEL,YAAY,cAAc;"}
1	+ {"version":3,"file":"ListContext.js","sources":["../../../../src/ListContainer/ListContext/ListContext.ts"],"sourcesContent":["import React from \"react\";\n\nconst ListContext = React.createContext<{\n interactive?: boolean;\n nesting?: number;\n condensed?: boolean;\n selectable?: boolean;\n disableGutters?: boolean;\n topContainerRef?: React.MutableRefObject<HTMLUListElement \| null>;\n}>({});\n\nListContext.displayName = \"ListContext\";\n\nexport default ListContext;\n"],"names":["React"],"mappings":";AAEA,MAAM,cAAcA,eAAM,cAOvB,CAAE,CAAA;AAEL,YAAY,cAAc;"}

package/dist/esm/ListContainer/ListItem/ListItem.js CHANGED Viewed

@@ -20,7 +20,7 @@ const applyClassNameToElement = (element, className) => {
     className
   });
 };
-const HvListItem = forwardRef((props, ref) => {
+const HvListItem = forwardRef(function HvListItem2(props, ref) {
   const {
     classes: classesProp,
     className,