npm - @hitachivantara/uikit-react-core - Versions diffs - 5.68.1 → 5.70.0 - Mend

@hitachivantara/uikit-react-core 5.68.1 → 5.70.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 (83) hide show

package/dist/esm/Header/Navigation/MenuItem/MenuItem.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.styles.js","sources":["../../../../../src/Header/Navigation/MenuItem/MenuItem.styles.tsx"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../../utils/focusUtils\";\n\nconst item: CSSInterpolation = {\n border: \"none\",\n cursor: \"pointer\",\n padding: `${theme.space.xs} ${theme.space.sm}`,\n height: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n \"&:active\": {\n outline: \"none\",\n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n \"& span\": {\n display: \"inline-flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n },\n \"& span::after\": {\n content: \"attr(data-text)\",\n height: 0,\n visibility: \"hidden\",\n overflow: \"hidden\",\n userSelect: \"none\",\n pointerEvents: \"none\",\n fontWeight: theme.fontWeights.semibold,\n\n \"@media speech\": {\n display: \"none\",\n },\n },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvHeader-MenuItem\",\n {\n root: {\n display: \"inline\",\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&:focus-within\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n menu: {\n marginTop: 0,\n paddingBottom: \"4px\",\n paddingTop: \"4px\",\n height: \"100%\",\n borderTop: \"none\",\n borderBottom: `4px solid ${theme.colors.atmo2}`,\n },\n menubar: {\n marginTop: \"0px\",\n paddingBottom: \"4px\",\n paddingTop: \"4px\",\n height: \"100%\",\n borderTop: `0px solid ${theme.colors.atmo1}`,\n borderBottom: `${\"4px\"} solid ${theme.colors.atmo1}`,\n },\n selected: {\n \"&$menu\": {\n marginTop: 0,\n paddingBottom: 0,\n borderTop: \"none\",\n borderBottom: `4px solid ${theme.colors.secondary}`,\n paddingTop: \"4px\",\n height: \"100%\",\n \"& > * > span\": {\n color: theme.colors.secondary,\n },\n },\n \"&$menubar\": {\n marginTop: 0,\n paddingBottom: 0,\n borderTop: \"none\",\n borderBottom: `4px solid ${theme.colors.secondary}`,\n paddingTop: \"4px\",\n height: \"100%\",\n },\n },\n link: {\n textDecoration: \"none\",\n ...item,\n } as CSSInterpolation,\n button: {\n color: \"inherit\",\n ...item,\n } as CSSInterpolation,\n },\n);\n"],"names":[],"mappings":";;;AAMA,MAAM,OAAyB;AAAA,EAC7B,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS,GAAG,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,EAC5C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAG;AAAA,EACL;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY,MAAM,YAAY;AAAA,IAE9B,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;~~AAEa~~,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,QACT,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,MACA,kBAAkB;AAAA,QAChB,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,IAC/C;AAAA,IACA,SAAS;AAAA,MACP,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,MAC1C,cAAc,GAAG,KAAK,UAAU,MAAM,OAAO,KAAK;AAAA,IACpD;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,QACR,WAAW;AAAA,QACX,eAAe;AAAA,QACf,WAAW;AAAA,QACX,cAAc,aAAa,MAAM,OAAO,SAAS;AAAA,QACjD,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,gBAAgB;AAAA,UACd,OAAO,MAAM,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,MACA,aAAa;AAAA,QACX,WAAW;AAAA,QACX,eAAe;AAAA,QACf,WAAW;AAAA,QACX,cAAc,aAAa,MAAM,OAAO,SAAS;AAAA,QACjD,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,gBAAgB;AAAA,MAChB,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,EACF;AACF;"}
1	+ {"version":3,"file":"MenuItem.styles.js","sources":["../../../../../src/Header/Navigation/MenuItem/MenuItem.styles.tsx"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../../utils/focusUtils\";\n\nconst item: CSSInterpolation = {\n border: \"none\",\n cursor: \"pointer\",\n padding: `${theme.space.xs} ${theme.space.sm}`,\n height: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n \"&:active\": {\n outline: \"none\",\n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n \"& span\": {\n display: \"inline-flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n },\n \"& span::after\": {\n content: \"attr(data-text)\",\n height: 0,\n visibility: \"hidden\",\n overflow: \"hidden\",\n userSelect: \"none\",\n pointerEvents: \"none\",\n fontWeight: theme.fontWeights.semibold,\n\n \"@media speech\": {\n display: \"none\",\n },\n },\n};\n\n// TODO - rename to HvHeaderMenuItem (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\n \"HvHeader-MenuItem\",\n {\n root: {\n display: \"inline\",\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&:focus-within\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n menu: {\n marginTop: 0,\n paddingBottom: \"4px\",\n paddingTop: \"4px\",\n height: \"100%\",\n borderTop: \"none\",\n borderBottom: `4px solid ${theme.colors.atmo2}`,\n },\n menubar: {\n marginTop: \"0px\",\n paddingBottom: \"4px\",\n paddingTop: \"4px\",\n height: \"100%\",\n borderTop: `0px solid ${theme.colors.atmo1}`,\n borderBottom: `${\"4px\"} solid ${theme.colors.atmo1}`,\n },\n selected: {\n \"&$menu\": {\n marginTop: 0,\n paddingBottom: 0,\n borderTop: \"none\",\n borderBottom: `4px solid ${theme.colors.secondary}`,\n paddingTop: \"4px\",\n height: \"100%\",\n \"& > * > span\": {\n color: theme.colors.secondary,\n },\n },\n \"&$menubar\": {\n marginTop: 0,\n paddingBottom: 0,\n borderTop: \"none\",\n borderBottom: `4px solid ${theme.colors.secondary}`,\n paddingTop: \"4px\",\n height: \"100%\",\n },\n },\n link: {\n textDecoration: \"none\",\n ...item,\n } as CSSInterpolation,\n button: {\n color: \"inherit\",\n ...item,\n } as CSSInterpolation,\n },\n);\n"],"names":[],"mappings":";;;AAMA,MAAM,OAAyB;AAAA,EAC7B,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS,GAAG,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,EAC5C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAG;AAAA,EACL;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY,MAAM,YAAY;AAAA,IAE9B,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,QACT,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,MACA,kBAAkB;AAAA,QAChB,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,IAC/C;AAAA,IACA,SAAS;AAAA,MACP,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,MAC1C,cAAc,GAAG,KAAK,UAAU,MAAM,OAAO,KAAK;AAAA,IACpD;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,QACR,WAAW;AAAA,QACX,eAAe;AAAA,QACf,WAAW;AAAA,QACX,cAAc,aAAa,MAAM,OAAO,SAAS;AAAA,QACjD,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,gBAAgB;AAAA,UACd,OAAO,MAAM,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,MACA,aAAa;AAAA,QACX,WAAW;AAAA,QACX,eAAe;AAAA,QACf,WAAW;AAAA,QACX,cAAc,aAAa,MAAM,OAAO,SAAS;AAAA,QACjD,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,gBAAgB;AAAA,MAChB,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,EACF;AACF;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Navigation.styles.js","sources":["../../../../src/Header/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvHeader-Navigation\",\n {\n root: {\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n zIndex: 1,\n top: \"0px\",\n left: \"0px\",\n },\n },\n);\n"],"names":[],"mappings":";~~AAEa~~,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,EACF;AACF;"}
1	+ {"version":3,"file":"Navigation.styles.js","sources":["../../../../src/Header/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\n// TODO - rename to HvHeaderNavigation (the actual component's name) in v6\nexport const { staticClasses, useClasses } = createClasses(\n \"HvHeader-Navigation\",\n {\n root: {\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n zIndex: 1,\n top: \"0px\",\n left: \"0px\",\n },\n },\n);\n"],"names":[],"mappings":";AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,EACF;AACF;"}

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 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;\n /* If `true` the reveal password button is disabled. Valid only when type is \"password\". /\n disableRevealPassword?: boolean;\n /* If `true` the search button is disabled. Valid only when type is \"search\". /\n disableSearchButton?: boolean;\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 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 // reset validation status to standBy (only when status is uncontrolled)\n setValidationState(validationStates.standBy);\n\n changeInputValue(inputRef.current, \"\");\n\n // we want to focus the input when clicked and not active\n setTimeout(focusInput);\n }, [setValidationState]);\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 ...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 />\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":"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"}
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 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 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 // reset validation status to standBy (only when status is uncontrolled)\n setValidationState(validationStates.standBy);\n\n changeInputValue(inputRef.current, \"\");\n\n // we want to focus the input when clicked and not active\n setTimeout(focusInput);\n }, [setValidationState]);\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 ...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 />\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":"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"}

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

@@ -2,9 +2,8 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useCallback, useEffect } from "react";
 import Hidden from "@mui/material/Hidden";
 import { Start, Backwards, Forwards, End } from "@hitachivantara/uikit-react-icons";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, clamp } from "@hitachivantara/uikit-react-utils";
 import { useLabels } from "../hooks/useLabels.js";
-import { clamp } from "../utils/helpers.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./Pagination.styles.js";
 import { staticClasses } from "./Pagination.styles.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.js","sources":["../../../src/Pagination/Pagination.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport Hidden from \"@mui/material/Hidden\";\nimport {\n Backwards,\n End,\n Forwards,\n Start,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useLabels } from \"../hooks/useLabels\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { clamp } from \"../utils/helpers\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport HvSelect, { Option } from \"./Select\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\nconst DEFAULT_LABELS = {\n /** The show label. /\n pageSizePrev: \"Show\",\n /* Indicate the units of the page size selection. /\n pageSizeEntryName: \"rows\",\n /* Used for the aria-label of the selection of number of unit.s /\n pageSizeSelectorDescription: \"Select how many to display\",\n /* Separator of current page and total pages. /\n pagesSeparator: \"/\",\n /* Title of button `firstPage`. @deprecated Use `firstPage` instead. /\n paginationFirstPageTitle: \"First page\",\n /* Title of button `previousPage`. @deprecated Use `previousPage` instead. /\n paginationPreviousPageTitle: \"Previous page\",\n /* Title of button `nextPage`. @deprecated Use `nextPage` instead. /\n paginationNextPageTitle: \"Next page\",\n /* Title of button `lastPage`. @deprecated Use `lastPage` instead. /\n paginationLastPageTitle: \"Last page\",\n /* Aria-label passed to the page input. /\n paginationInputLabel: \"Current page\",\n /* Label of the first page button /\n firstPage: \"First Page\",\n /* Label of the previous page button /\n previousPage: \"Previous Page\",\n /* Label of the next page button /\n nextPage: \"Next Page\",\n /* Label of the last page button /\n lastPage: \"Last Page\",\n};\n\nexport type HvPaginationLabels = Partial<typeof DEFAULT_LABELS>;\n\nexport interface HvPaginationProps extends HvBaseProps {\n /* The number of pages the component has. /\n pages?: number;\n /* The currently selected page (0-indexed). /\n page?: number;\n /* Controls whether the left page size mechanism should be visible. /\n showPageSizeOptions?: boolean;\n /* The array of possible page sizes for the dropdown. /\n pageSizeOptions?: number[];\n /* The currently selected page size. /\n pageSize?: number;\n /* Controls whether the central page changing mechanism should be visible. /\n showPageJump?: boolean;\n /* Controls whether the previous/first page buttons are enabled. /\n canPrevious?: boolean;\n /* Controls whether the next/last page buttons are enabled. /\n canNext?: boolean;\n /* Function called when the page changes. /\n onPageChange?: (page: number) => void;\n /* Function called when the page size changes. /\n onPageSizeChange?: (pageSize: number) => void;\n /* An object containing all the labels for the component. /\n labels?: HvPaginationLabels;\n /* Other props to show page component. /\n showPageProps?: React.HTMLAttributes<HTMLDivElement>;\n /* Other props to pagination component. /\n navigationProps?: React.HTMLAttributes<HTMLDivElement>;\n /* Extra properties passed to the input component representing the current pages. /\n currentPageInputProps?: HvInputProps;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvPaginationClasses;\n}\n\n/\n Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = (props: HvPaginationProps) => {\n const {\n classes: classesProp,\n className,\n id,\n pages = 1,\n page = 0,\n showPageSizeOptions = true,\n pageSizeOptions = defaultPageSizeOptions,\n pageSize = defaultPageSizeOptions[1],\n showPageJump = true,\n canPrevious = false,\n canNext = false,\n onPageChange,\n onPageSizeChange,\n labels: labelsProp,\n showPageProps,\n navigationProps,\n currentPageInputProps,\n ...others\n } = useDefaultProps(\"HvPagination\", props);\n const { classes, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [pageInput, setPageInput] = useState(page);\n\n const changePage = useCallback(\n (newPage: number) => {\n const safePage = Number.isNaN(newPage) ? page : clamp(newPage, pages - 1);\n\n onPageChange?.(safePage);\n setPageInput(safePage);\n },\n [page, pages, onPageChange],\n );\n\n useEffect(() => {\n if (page >= pages && pages > 0) {\n changePage(page);\n }\n }, [changePage, page, pages]);\n\n useEffect(() => {\n setPageInput(page);\n }, [page]);\n\n const renderPageJump = () => (\n <div className={classes.pageJump}>\n <HvInput\n id={setId(id, \"currentPage\")}\n labels={labels}\n inputProps={{\n \"aria-label\": labels?.paginationInputLabel,\n // We really want the native number input\n type: \"number\",\n }}\n classes={{\n root: classes?.pageSizeInputContainer,\n input: classes?.pageSizeInput,\n inputRoot: classes?.pageSizeInputRoot,\n }}\n value={String(pageInput + 1)}\n onChange={(event, value) => setPageInput(Number(value) - 1)}\n onBlur={(evt, value) => changePage(Math.round(Number(value)) - 1)}\n onEnter={(evt, value) => changePage(Math.round(Number(value)) - 1)}\n disabled={pageSize === 0}\n disableClear\n {...currentPageInputProps}\n />\n </div>\n );\n\n return (\n <div id={id} className={cx(classes.root, className)} {...others}>\n <div className={classes.pageSizeOptions} {...showPageProps}>\n {showPageSizeOptions && (\n <>\n <Hidden xsDown>\n <HvTypography\n component=\"span\"\n className={classes?.pageSizeTextContainer}\n >\n {labels?.pageSizePrev}\n </HvTypography>\n </Hidden>\n <HvSelect\n id={setId(id, \"pageSize\")}\n disabled={pageSize === 0}\n className={classes.pageSizeOptionsSelect}\n aria-label={labels?.pageSizeSelectorDescription}\n onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n value={pageSize}\n classes={{\n header: classes.pageSizeHeader,\n root: classes.pageSizeRoot,\n }}\n >\n {pageSizeOptions.map((option) => (\n <Option key={option} value={option}>\n {option}\n </Option>\n ))}\n </HvSelect>\n <Hidden xsDown>\n <HvTypography\n component=\"span\"\n className={classes.pageSizeTextContainer}\n >\n {labels?.pageSizeEntryName}\n </HvTypography>\n </Hidden>\n </>\n )}\n </div>\n <div className={classes.pageNavigator} {...navigationProps}>\n <HvIconButton\n id={setId(id, \"firstPage-button\")}\n className={classes.iconContainer}\n disabled={!canPrevious}\n onClick={() => changePage(0)}\n title={labels?.firstPage \|\| labels?.paginationFirstPageTitle}\n >\n <Start className={classes.icon} iconSize=\"XS\" />\n </HvIconButton>\n <HvIconButton\n id={setId(id, \"previousPage-button\")}\n className={classes.iconContainer}\n disabled={!canPrevious}\n onClick={() => changePage(page - 1)}\n title={labels?.previousPage \|\| labels?.paginationPreviousPageTitle}\n >\n <Backwards className={classes.icon} iconSize=\"XS\" />\n </HvIconButton>\n <div className={classes.pageInfo}>\n {showPageJump ? (\n renderPageJump()\n ) : (\n <HvTypography variant=\"caption2\" component=\"span\">{`${\n page + 1\n }`}</HvTypography>\n )}\n <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n <HvTypography\n component=\"span\"\n id={setId(id, \"totalPages\")}\n className={classes.totalPagesTextContainer}\n >\n {pages}\n </HvTypography>\n </div>\n <HvIconButton\n id={setId(id, \"nextPage-button\")}\n className={classes.iconContainer}\n disabled={!canNext}\n onClick={() => changePage(page + 1)}\n title={labels?.nextPage \|\| labels?.paginationNextPageTitle}\n >\n <Forwards className={classes.icon} iconSize=\"XS\" />\n </HvIconButton>\n <HvIconButton\n id={setId(id, \"lastPage-button\")}\n className={classes.iconContainer}\n disabled={!canNext}\n onClick={() => changePage(pages - 1)}\n title={labels?.lastPage \|\| labels?.paginationLastPageTitle}\n >\n <End className={classes.icon} iconSize=\"XS\" />\n </HvIconButton>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"Pagination.js","sources":["../../../src/Pagination/Pagination.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport Hidden from \"@mui/material/Hidden\";\nimport {\n Backwards,\n End,\n Forwards,\n Start,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n clamp,\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useLabels } from \"../hooks/useLabels\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport HvSelect, { Option } from \"./Select\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\nconst DEFAULT_LABELS = {\n /** The show label. /\n pageSizePrev: \"Show\",\n /* Indicate the units of the page size selection. /\n pageSizeEntryName: \"rows\",\n /* Used for the aria-label of the selection of number of unit.s /\n pageSizeSelectorDescription: \"Select how many to display\",\n /* Separator of current page and total pages. /\n pagesSeparator: \"/\",\n /* Title of button `firstPage`. @deprecated Use `firstPage` instead. /\n paginationFirstPageTitle: \"First page\",\n /* Title of button `previousPage`. @deprecated Use `previousPage` instead. /\n paginationPreviousPageTitle: \"Previous page\",\n /* Title of button `nextPage`. @deprecated Use `nextPage` instead. /\n paginationNextPageTitle: \"Next page\",\n /* Title of button `lastPage`. @deprecated Use `lastPage` instead. /\n paginationLastPageTitle: \"Last page\",\n /* Aria-label passed to the page input. /\n paginationInputLabel: \"Current page\",\n /* Label of the first page button /\n firstPage: \"First Page\",\n /* Label of the previous page button /\n previousPage: \"Previous Page\",\n /* Label of the next page button /\n nextPage: \"Next Page\",\n /* Label of the last page button /\n lastPage: \"Last Page\",\n};\n\nexport type HvPaginationLabels = Partial<typeof DEFAULT_LABELS>;\n\nexport interface HvPaginationProps extends HvBaseProps {\n /* The number of pages the component has. /\n pages?: number;\n /* The currently selected page (0-indexed). /\n page?: number;\n /* Controls whether the left page size mechanism should be visible. /\n showPageSizeOptions?: boolean;\n /* The array of possible page sizes for the dropdown. /\n pageSizeOptions?: number[];\n /* The currently selected page size. /\n pageSize?: number;\n /* Controls whether the central page changing mechanism should be visible. /\n showPageJump?: boolean;\n /* Controls whether the previous/first page buttons are enabled. /\n canPrevious?: boolean;\n /* Controls whether the next/last page buttons are enabled. /\n canNext?: boolean;\n /* Function called when the page changes. /\n onPageChange?: (page: number) => void;\n /* Function called when the page size changes. /\n onPageSizeChange?: (pageSize: number) => void;\n /* An object containing all the labels for the component. /\n labels?: HvPaginationLabels;\n /* Other props to show page component. /\n showPageProps?: React.HTMLAttributes<HTMLDivElement>;\n /* Other props to pagination component. /\n navigationProps?: React.HTMLAttributes<HTMLDivElement>;\n /* Extra properties passed to the input component representing the current pages. /\n currentPageInputProps?: HvInputProps;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvPaginationClasses;\n}\n\n/\n Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = (props: HvPaginationProps) => {\n const {\n classes: classesProp,\n className,\n id,\n pages = 1,\n page = 0,\n showPageSizeOptions = true,\n pageSizeOptions = defaultPageSizeOptions,\n pageSize = defaultPageSizeOptions[1],\n showPageJump = true,\n canPrevious = false,\n canNext = false,\n onPageChange,\n onPageSizeChange,\n labels: labelsProp,\n showPageProps,\n navigationProps,\n currentPageInputProps,\n ...others\n } = useDefaultProps(\"HvPagination\", props);\n const { classes, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [pageInput, setPageInput] = useState(page);\n\n const changePage = useCallback(\n (newPage: number) => {\n const safePage = Number.isNaN(newPage) ? page : clamp(newPage, pages - 1);\n\n onPageChange?.(safePage);\n setPageInput(safePage);\n },\n [page, pages, onPageChange],\n );\n\n useEffect(() => {\n if (page >= pages && pages > 0) {\n changePage(page);\n }\n }, [changePage, page, pages]);\n\n useEffect(() => {\n setPageInput(page);\n }, [page]);\n\n const renderPageJump = () => (\n <div className={classes.pageJump}>\n <HvInput\n id={setId(id, \"currentPage\")}\n labels={labels}\n inputProps={{\n \"aria-label\": labels?.paginationInputLabel,\n // We really want the native number input\n type: \"number\",\n }}\n classes={{\n root: classes?.pageSizeInputContainer,\n input: classes?.pageSizeInput,\n inputRoot: classes?.pageSizeInputRoot,\n }}\n value={String(pageInput + 1)}\n onChange={(event, value) => setPageInput(Number(value) - 1)}\n onBlur={(evt, value) => changePage(Math.round(Number(value)) - 1)}\n onEnter={(evt, value) => changePage(Math.round(Number(value)) - 1)}\n disabled={pageSize === 0}\n disableClear\n {...currentPageInputProps}\n />\n </div>\n );\n\n return (\n <div id={id} className={cx(classes.root, className)} {...others}>\n <div className={classes.pageSizeOptions} {...showPageProps}>\n {showPageSizeOptions && (\n <>\n <Hidden xsDown>\n <HvTypography\n component=\"span\"\n className={classes?.pageSizeTextContainer}\n >\n {labels?.pageSizePrev}\n </HvTypography>\n </Hidden>\n <HvSelect\n id={setId(id, \"pageSize\")}\n disabled={pageSize === 0}\n className={classes.pageSizeOptionsSelect}\n aria-label={labels?.pageSizeSelectorDescription}\n onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n value={pageSize}\n classes={{\n header: classes.pageSizeHeader,\n root: classes.pageSizeRoot,\n }}\n >\n {pageSizeOptions.map((option) => (\n <Option key={option} value={option}>\n {option}\n </Option>\n ))}\n </HvSelect>\n <Hidden xsDown>\n <HvTypography\n component=\"span\"\n className={classes.pageSizeTextContainer}\n >\n {labels?.pageSizeEntryName}\n </HvTypography>\n </Hidden>\n </>\n )}\n </div>\n <div className={classes.pageNavigator} {...navigationProps}>\n <HvIconButton\n id={setId(id, \"firstPage-button\")}\n className={classes.iconContainer}\n disabled={!canPrevious}\n onClick={() => changePage(0)}\n title={labels?.firstPage \|\| labels?.paginationFirstPageTitle}\n >\n <Start className={classes.icon} iconSize=\"XS\" />\n </HvIconButton>\n <HvIconButton\n id={setId(id, \"previousPage-button\")}\n className={classes.iconContainer}\n disabled={!canPrevious}\n onClick={() => changePage(page - 1)}\n title={labels?.previousPage \|\| labels?.paginationPreviousPageTitle}\n >\n <Backwards className={classes.icon} iconSize=\"XS\" />\n </HvIconButton>\n <div className={classes.pageInfo}>\n {showPageJump ? (\n renderPageJump()\n ) : (\n <HvTypography variant=\"caption2\" component=\"span\">{`${\n page + 1\n }`}</HvTypography>\n )}\n <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n <HvTypography\n component=\"span\"\n id={setId(id, \"totalPages\")}\n className={classes.totalPagesTextContainer}\n >\n {pages}\n </HvTypography>\n </div>\n <HvIconButton\n id={setId(id, \"nextPage-button\")}\n className={classes.iconContainer}\n disabled={!canNext}\n onClick={() => changePage(page + 1)}\n title={labels?.nextPage \|\| labels?.paginationNextPageTitle}\n >\n <Forwards className={classes.icon} iconSize=\"XS\" />\n </HvIconButton>\n <HvIconButton\n id={setId(id, \"lastPage-button\")}\n className={classes.iconContainer}\n disabled={!canNext}\n onClick={() => changePage(pages - 1)}\n title={labels?.lastPage \|\| labels?.paginationLastPageTitle}\n >\n <End className={classes.icon} iconSize=\"XS\" />\n </HvIconButton>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AA2BA,MAAM,yBAAyB,CAAC,GAAG,IAAI,IAAI,IAAI,IAAI,GAAG;AAEtD,MAAM,iBAAiB;AAAA;AAAA,EAErB,cAAc;AAAA;AAAA,EAEd,mBAAmB;AAAA;AAAA,EAEnB,6BAA6B;AAAA;AAAA,EAE7B,gBAAgB;AAAA;AAAA,EAEhB,0BAA0B;AAAA;AAAA,EAE1B,6BAA6B;AAAA;AAAA,EAE7B,yBAAyB;AAAA;AAAA,EAEzB,yBAAyB;AAAA;AAAA,EAEzB,sBAAsB;AAAA;AAAA,EAEtB,WAAW;AAAA;AAAA,EAEX,cAAc;AAAA;AAAA,EAEd,UAAU;AAAA;AAAA,EAEV,UAAU;AACZ;AAyCa,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,sBAAsB;AAAA,IACtB,kBAAkB;AAAA,IAClB,WAAW,uBAAuB,CAAC;AAAA,IACnC,eAAe;AAAA,IACf,cAAc;AAAA,IACd,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AACzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAE/C,QAAM,aAAa;AAAA,IACjB,CAAC,YAAoB;AACb,YAAA,WAAW,OAAO,MAAM,OAAO,IAAI,OAAO,MAAM,SAAS,QAAQ,CAAC;AAExE,qBAAe,QAAQ;AACvB,mBAAa,QAAQ;AAAA,IACvB;AAAA,IACA,CAAC,MAAM,OAAO,YAAY;AAAA,EAAA;AAG5B,YAAU,MAAM;AACV,QAAA,QAAQ,SAAS,QAAQ,GAAG;AAC9B,iBAAW,IAAI;AAAA,IACjB;AAAA,EACC,GAAA,CAAC,YAAY,MAAM,KAAK,CAAC;AAE5B,YAAU,MAAM;AACd,iBAAa,IAAI;AAAA,EAAA,GAChB,CAAC,IAAI,CAAC;AAET,QAAM,iBAAiB,MACrB,oBAAC,OAAI,EAAA,WAAW,QAAQ,UACtB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,MAAM,IAAI,aAAa;AAAA,MAC3B;AAAA,MACA,YAAY;AAAA,QACV,cAAc,QAAQ;AAAA;AAAA,QAEtB,MAAM;AAAA,MACR;AAAA,MACA,SAAS;AAAA,QACP,MAAM,SAAS;AAAA,QACf,OAAO,SAAS;AAAA,QAChB,WAAW,SAAS;AAAA,MACtB;AAAA,MACA,OAAO,OAAO,YAAY,CAAC;AAAA,MAC3B,UAAU,CAAC,OAAO,UAAU,aAAa,OAAO,KAAK,IAAI,CAAC;AAAA,MAC1D,QAAQ,CAAC,KAAK,UAAU,WAAW,KAAK,MAAM,OAAO,KAAK,CAAC,IAAI,CAAC;AAAA,MAChE,SAAS,CAAC,KAAK,UAAU,WAAW,KAAK,MAAM,OAAO,KAAK,CAAC,IAAI,CAAC;AAAA,MACjE,UAAU,aAAa;AAAA,MACvB,cAAY;AAAA,MACX,GAAG;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAIA,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACvD,UAAA;AAAA,IAAA,oBAAC,SAAI,WAAW,QAAQ,iBAAkB,GAAG,eAC1C,iCAEG,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAC,oBAAA,QAAA,EAAO,QAAM,MACZ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,SAAS;AAAA,UAEnB,UAAQ,QAAA;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,UAAU;AAAA,UACxB,UAAU,aAAa;AAAA,UACvB,WAAW,QAAQ;AAAA,UACnB,cAAY,QAAQ;AAAA,UACpB,UAAU,CAAC,GAAQ,QAAgB,mBAAmB,GAAG;AAAA,UACzD,OAAO;AAAA,UACP,SAAS;AAAA,YACP,QAAQ,QAAQ;AAAA,YAChB,MAAM,QAAQ;AAAA,UAChB;AAAA,UAEC,UAAA,gBAAgB,IAAI,CAAC,WACpB,oBAAC,UAAoB,OAAO,QACzB,UADU,OAAA,GAAA,MAEb,CACD;AAAA,QAAA;AAAA,MACH;AAAA,MACA,oBAAC,QAAO,EAAA,QAAM,MACZ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,QAAQ;AAAA,UAElB,UAAQ,QAAA;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,EAAA,CACF,EAEJ,CAAA;AAAA,yBACC,OAAI,EAAA,WAAW,QAAQ,eAAgB,GAAG,iBACzC,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,kBAAkB;AAAA,UAChC,WAAW,QAAQ;AAAA,UACnB,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,WAAW,CAAC;AAAA,UAC3B,OAAO,QAAQ,aAAa,QAAQ;AAAA,UAEpC,8BAAC,OAAM,EAAA,WAAW,QAAQ,MAAM,UAAS,MAAK;AAAA,QAAA;AAAA,MAChD;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,qBAAqB;AAAA,UACnC,WAAW,QAAQ;AAAA,UACnB,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,WAAW,OAAO,CAAC;AAAA,UAClC,OAAO,QAAQ,gBAAgB,QAAQ;AAAA,UAEvC,8BAAC,WAAU,EAAA,WAAW,QAAQ,MAAM,UAAS,MAAK;AAAA,QAAA;AAAA,MACpD;AAAA,MACC,qBAAA,OAAA,EAAI,WAAW,QAAQ,UACrB,UAAA;AAAA,QACC,eAAA,eAAA,IAEA,oBAAC,cAAa,EAAA,SAAQ,YAAW,WAAU,QAAQ,UAAA,GACjD,OAAO,CACT,GAAG,CAAA;AAAA,4BAEJ,cAAa,EAAA,WAAU,QAAQ,UAAG,GAAA,QAAQ,cAAc,KAAI;AAAA,QAC7D;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,MAAM,IAAI,YAAY;AAAA,YAC1B,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA,GACF;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,iBAAiB;AAAA,UAC/B,WAAW,QAAQ;AAAA,UACnB,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,WAAW,OAAO,CAAC;AAAA,UAClC,OAAO,QAAQ,YAAY,QAAQ;AAAA,UAEnC,8BAAC,UAAS,EAAA,WAAW,QAAQ,MAAM,UAAS,MAAK;AAAA,QAAA;AAAA,MACnD;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,iBAAiB;AAAA,UAC/B,WAAW,QAAQ;AAAA,UACnB,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,WAAW,QAAQ,CAAC;AAAA,UACnC,OAAO,QAAQ,YAAY,QAAQ;AAAA,UAEnC,8BAAC,KAAI,EAAA,WAAW,QAAQ,MAAM,UAAS,MAAK;AAAA,QAAA;AAAA,MAC9C;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

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

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { clamp } from "../utils/helpers.js";
+import { useDefaultProps, clamp } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./ProgressBar.styles.js";
 import { staticClasses } from "./ProgressBar.styles.js";
 import { HvTypography } from "../Typography/Typography.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.js","sources":["../../../src/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyProps } from \"../Typography\";\nimport { ~~clamp } from \"../utils/helpers\";\nimport {~~ staticClasses, useClasses } from \"./ProgressBar.styles\";\n\nexport { staticClasses as progressBarClasses };\n\nexport type HvProgressBarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvProgressBarStatus = \"inProgress\" \| \"completed\" \| \"error\";\n\n/*\n ProgressBar provides feedback about a process that is taking place in the application.\n /\nexport interface HvProgressBarProps extends HvBaseProps {\n /* The value of the progress bar. /\n value: number;\n /\n The status of the progress bar.\n \n inProgress is black, error is red and completed is green.\n \n When uncontrolled and unspecified it will default to \"inProgress\".\n /\n status?: HvProgressBarStatus;\n /* Aria Properties passed on to the progress bar. /\n labelProps?: HvTypographyProps;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvProgressBarClasses;\n /\n True if the text label should not be displayed.\n */\n hideLabel?: boolean;\n}\n\nexport const HvProgressBar = (props: HvProgressBarProps) => {\n const {\n className,\n classes: classesProp,\n value = 0,\n status = \"inProgress\",\n labelProps,\n hideLabel,\n ...others\n } = useDefaultProps(\"HvProgressBar\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const clampedValue = clamp(value, 100);\n\n return (\n <div\n className={cx(classes.root, classes.progress, className)}\n role=\"progressbar\"\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuenow={clampedValue}\n {...others}\n >\n <div className={classes.progressContainer}>\n {!hideLabel && (\n <HvTypography\n className={classes.progressBarLabel}\n variant=\"caption2\"\n style={{ width: `${clampedValue}%` }}\n {...labelProps}\n >\n {`${clampedValue}%`}\n </HvTypography>\n )}\n <div className={classes.progressBarContainer}>\n <div\n style={{ width: `${clampedValue}%` }}\n className={cx(classes.progressBar, {\n [classes.progressDone]: status === \"completed\",\n [classes.progressError]: status === \"error\",\n })}\n />\n </div>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;~~AAwCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,MAAM,OAAO,GAAG;AAGnC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,QAAQ,UAAU,SAAS;AAAA,MACvD,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACd,GAAG;AAAA,MAEJ,UAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,mBACrB,UAAA;AAAA,QAAA,CAAC,aACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,SAAQ;AAAA,YACR,OAAO,EAAE,OAAO,GAAG,YAAY,IAAI;AAAA,YAClC,GAAG;AAAA,YAEH,aAAG,YAAY;AAAA,UAAA;AAAA,QAClB;AAAA,QAED,oBAAA,OAAA,EAAI,WAAW,QAAQ,sBACtB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,YAAY,IAAI;AAAA,YACnC,WAAW,GAAG,QAAQ,aAAa;AAAA,cACjC,CAAC,QAAQ,YAAY,GAAG,WAAW;AAAA,cACnC,CAAC,QAAQ,aAAa,GAAG,WAAW;AAAA,YAAA,CACrC;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"ProgressBar.js","sources":["../../../src/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import {\n clamp,\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyProps } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./ProgressBar.styles\";\n\nexport { staticClasses as progressBarClasses };\n\nexport type HvProgressBarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvProgressBarStatus = \"inProgress\" \| \"completed\" \| \"error\";\n\n/*\n ProgressBar provides feedback about a process that is taking place in the application.\n /\nexport interface HvProgressBarProps extends HvBaseProps {\n /* The value of the progress bar. /\n value: number;\n /\n The status of the progress bar.\n \n inProgress is black, error is red and completed is green.\n \n When uncontrolled and unspecified it will default to \"inProgress\".\n /\n status?: HvProgressBarStatus;\n /* Aria Properties passed on to the progress bar. /\n labelProps?: HvTypographyProps;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvProgressBarClasses;\n /\n True if the text label should not be displayed.\n */\n hideLabel?: boolean;\n}\n\nexport const HvProgressBar = (props: HvProgressBarProps) => {\n const {\n className,\n classes: classesProp,\n value = 0,\n status = \"inProgress\",\n labelProps,\n hideLabel,\n ...others\n } = useDefaultProps(\"HvProgressBar\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const clampedValue = clamp(value, 100);\n\n return (\n <div\n className={cx(classes.root, classes.progress, className)}\n role=\"progressbar\"\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuenow={clampedValue}\n {...others}\n >\n <div className={classes.progressContainer}>\n {!hideLabel && (\n <HvTypography\n className={classes.progressBarLabel}\n variant=\"caption2\"\n style={{ width: `${clampedValue}%` }}\n {...labelProps}\n >\n {`${clampedValue}%`}\n </HvTypography>\n )}\n <div className={classes.progressBarContainer}>\n <div\n style={{ width: `${clampedValue}%` }}\n className={cx(classes.progressBar, {\n [classes.progressDone]: status === \"completed\",\n [classes.progressError]: status === \"error\",\n })}\n />\n </div>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;AAwCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,MAAM,OAAO,GAAG;AAGnC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,QAAQ,UAAU,SAAS;AAAA,MACvD,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACd,GAAG;AAAA,MAEJ,UAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,mBACrB,UAAA;AAAA,QAAA,CAAC,aACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,SAAQ;AAAA,YACR,OAAO,EAAE,OAAO,GAAG,YAAY,IAAI;AAAA,YAClC,GAAG;AAAA,YAEH,aAAG,YAAY;AAAA,UAAA;AAAA,QAClB;AAAA,QAED,oBAAA,OAAA,EAAI,WAAW,QAAQ,sBACtB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,YAAY,IAAI;AAAA,YACnC,WAAW,GAAG,QAAQ,aAAa;AAAA,cACjC,CAAC,QAAQ,YAAY,GAAG,WAAW;AAAA,cACnC,CAAC,QAAQ,aAAa,GAAG,WAAW;AAAA,YAAA,CACrC;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseSwitch } from \"../BaseSwitch\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvLabel,\n HvLabelProps,\n HvWarningText,\n} from \"../Forms\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Switch.styles\";\n\nexport { staticClasses as switchClasses };\n\nexport type HvSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSwitchProps\n extends Omit<MuiSwitchProps, \"onChange\" \| \"classes\"> {\n /*\n A Jss Object used to override or extend the styles applied to the switch.\n /\n classes?: HvSwitchClasses;\n /\n The form element name.\n /\n name?: string;\n /\n The value of the form element.\n \n Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n \n The default value is \"on\".\n /\n value?: any;\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 /\n Properties passed on to the label element.\n /\n labelProps?: HvLabelProps;\n /\n Indicates that the form element is disabled.\n /\n disabled?: boolean;\n /\n Indicates that the form element is not editable.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n If `true` the switch is selected, if set to `false` the switch is not selected.\n \n When defined the switch state becomes controlled.\n /\n checked?: boolean;\n /\n When uncontrolled, defines the initial checked state.\n /\n defaultChecked?: 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 /\n The error message to show when the validation status is \"invalid\".\n \n Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n /\n statusMessage?: string;\n /\n Identifies the element that provides an error message for the switch.\n \n Will only be used when the validation status is invalid.\n /\n \"aria-errormessage\"?: string;\n /\n The callback fired when the switch is pressed.\n /\n onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n /\n Properties passed on to the input element.\n /\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /* @ignore /\n ref?: MuiSwitchProps[\"ref\"];\n /* @ignore /\n component?: MuiSwitchProps[\"component\"];\n}\n\n/\n A Switch is <b>binary</b> and work as a digital on/off button.\n \n Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nexport const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n labelProps,\n\n checked,\n defaultChecked = false,\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n inputProps,\n\n ...others\n } = useDefaultProps(\"HvSwitch\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [isChecked, setIsChecked] = useControlled(\n checked,\n Boolean(defaultChecked),\n );\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent, newChecked: boolean) => {\n setIsChecked(() => {\n // this will only run if uncontrolled\n if (required && !newChecked) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newChecked;\n });\n\n onChange?.(evt, newChecked, value);\n },\n [onChange, required, setIsChecked, setValidationState, 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 required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId: string \| undefined;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n id={setId(elementId, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n className={classes.label}\n {...labelProps}\n />\n )}\n <div\n className={cx(classes.switchContainer, {\n [classes.invalidSwitch]: isStateInvalid,\n })}\n >\n <HvBaseSwitch\n ref={ref}\n id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n name={name}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n onChange={onLocalChange}\n value={value}\n checked={isChecked}\n inputProps={{\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...inputProps,\n }}\n {...others}\n />\n </div>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n disableAdornment\n hideText\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;~~AAsHO~~,MAAM,WAAW;AAAA,EACtB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MAEA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MAEX;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB;AAAA,MAEA;AAAA,MACA,iBAAiB;AAAA,MAEjB;AAAA,MAEA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MAErB;AAAA,MAEA,GAAG;AAAA,IAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,YAAY,YAAY,EAAE;AAE1B,UAAA,CAAC,WAAW,YAAY,IAAI;AAAA,MAChC;AAAA,MACA,QAAQ,cAAc;AAAA,IAAA;AAGlB,UAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,MAC5C;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AAEnE,UAAM,gBAAgB;AAAA,MACpB,CAAC,~~KAAwB~~,eAAwB;~~AAC/C~~,qBAAa,MAAM;AAEb,cAAA,YAAY,CAAC,YAAY;AAC3B,+BAAmB,SAAS;AAAA,UAAA,OACvB;AACL,+BAAmB,OAAO;AAAA,UAC5B;AAEO,iBAAA;AAAA,QAAA,CACR;AAEU,mBAAA,KAAK,YAAY,KAAK;AAAA,MACnC;AAAA,MACA,CAAC,UAAU,UAAU,cAAc,oBAAoB,KAAK;AAAA,IAAA;AAOxD,UAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UAAa;AAEvB,UAAA,iBAAiB,UAAU,eAAe;AAE5C,QAAA;AACJ,QAAI,gBAAgB;AAClB,uBAAiB,eACb,MAAM,WAAW,OAAO,IACxB;AAAA,IACN;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QAEpC,UAAA;AAAA,UACC,SAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B,SAAS,MAAM,WAAW,OAAO;AAAA,cACjC;AAAA,cACA,WAAW,QAAQ;AAAA,cAClB,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,iBAAiB;AAAA,gBACrC,CAAC,QAAQ,aAAa,GAAG;AAAA,cAAA,CAC1B;AAAA,cAED,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA,IAAI,QAAQ,MAAM,WAAW,OAAO,IAAI,MAAM,IAAI,OAAO;AAAA,kBACzD;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,UAAU;AAAA,kBACV;AAAA,kBACA,SAAS;AAAA,kBACT,YAAY;AAAA,oBACV,gBAAgB,iBAAiB,OAAO;AAAA,oBACxC,qBAAqB;AAAA,oBACrB,cAAc;AAAA,oBACd,mBAAmB;AAAA,oBACnB,oBAAoB;AAAA,oBACpB,GAAG;AAAA,kBACL;AAAA,kBACC,GAAG;AAAA,gBAAA;AAAA,cACN;AAAA,YAAA;AAAA,UACF;AAAA,UACC,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B,WAAW,QAAQ;AAAA,cACnB,eAAa;AAAA,cACb,kBAAgB;AAAA,cAChB,UAAQ;AAAA,cAEP,UAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}
1	+ {"version":3,"file":"Switch.js","sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseSwitch } from \"../BaseSwitch\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvLabel,\n HvLabelProps,\n HvWarningText,\n} from \"../Forms\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Switch.styles\";\n\nexport { staticClasses as switchClasses };\n\nexport type HvSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSwitchProps\n extends Omit<MuiSwitchProps, \"onChange\" \| \"classes\"> {\n /*\n A Jss Object used to override or extend the styles applied to the switch.\n /\n classes?: HvSwitchClasses;\n /\n The form element name.\n /\n name?: string;\n /\n The value of the form element.\n \n Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n \n The default value is \"on\".\n /\n value?: any;\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 /\n Properties passed on to the label element.\n /\n labelProps?: HvLabelProps;\n /\n Indicates that the form element is disabled.\n /\n disabled?: boolean;\n /\n Indicates that the form element is not editable.\n /\n readOnly?: boolean;\n /\n Indicates that user input is required on the form element.\n /\n required?: boolean;\n /\n If `true` the switch is selected, if set to `false` the switch is not selected.\n \n When defined the switch state becomes controlled.\n /\n checked?: boolean;\n /\n When uncontrolled, defines the initial checked state.\n /\n defaultChecked?: 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 /\n The error message to show when the validation status is \"invalid\".\n \n Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n /\n statusMessage?: string;\n /\n Identifies the element that provides an error message for the switch.\n \n Will only be used when the validation status is invalid.\n /\n \"aria-errormessage\"?: string;\n /\n The callback fired when the switch is pressed.\n /\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any,\n ) => void;\n /\n Properties passed on to the input element.\n /\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /* @ignore /\n ref?: MuiSwitchProps[\"ref\"];\n /* @ignore /\n component?: MuiSwitchProps[\"component\"];\n}\n\n/\n A Switch is <b>binary</b> and work as a digital on/off button.\n \n Use when two states are <b>opposite</b> and to trigger immediate\n * changes in the system.\n */\nexport const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n labelProps,\n\n checked,\n defaultChecked = false,\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n inputProps,\n\n ...others\n } = useDefaultProps(\"HvSwitch\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [isChecked, setIsChecked] = useControlled(\n checked,\n Boolean(defaultChecked),\n );\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n setIsChecked(() => {\n // this will only run if uncontrolled\n if (required && !newChecked) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newChecked;\n });\n\n onChange?.(evt, newChecked, value);\n },\n [onChange, required, setIsChecked, setValidationState, 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 required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId: string \| undefined;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n className={cx(classes.root, className)}\n >\n {label && (\n <HvLabel\n id={setId(elementId, \"label\")}\n htmlFor={setId(elementId, \"input\")}\n label={label}\n className={classes.label}\n {...labelProps}\n />\n )}\n <div\n className={cx(classes.switchContainer, {\n [classes.invalidSwitch]: isStateInvalid,\n })}\n >\n <HvBaseSwitch\n ref={ref}\n id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n name={name}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n onChange={onLocalChange}\n value={value}\n checked={isChecked}\n inputProps={{\n \"aria-invalid\": isStateInvalid ? true : undefined,\n \"aria-errormessage\": errorMessageId,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...inputProps,\n }}\n {...others}\n />\n </div>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n disableAdornment\n hideText\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/Table/TableBody/TableBody.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext, useRef, Children, isValidElement } from "react";
 import { useForkRef } from "../../hooks/useForkRef.js";
 import TableContext from "../TableContext.js";
-import TableSectionContext from "../TableSectionContext.js";
+import { TableSectionContext } from "../TableSectionContext.js";
 import { useClasses } from "./TableBody.styles.js";
 import { staticClasses } from "./TableBody.styles.js";
 import { HvFocus } from "../../Focus/Focus.js";

package/dist/esm/Table/TableBody/TableBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableBody.js","sources":["../../../../src/Table/TableBody/TableBody.tsx"],"sourcesContent":["import {\n Children,\n forwardRef,\n isValidElement,\n useContext,\n useRef,\n} from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFocus } from \"../../Focus\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableBody.styles\";\n\nexport { staticClasses as tableBodyClasses };\n\nexport type HvTableBodyClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableBodyProps\n extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n /*\n Content to be rendered\n /\n children: React.ReactNode;\n /\n The component used for the root node. Either a string to use a HTML element or a component.\n * Defaults to tbody.\n /\n component?: React.ElementType;\n /* Sets whether or not there should be arrow navigation between the table rows /\n withNavigation?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTableBodyClasses;\n}\n\nconst tableSectionContext = {\n type: \"body\",\n filterClassName: \"_grid\",\n};\n\nconst defaultComponent = \"tbody\";\n\n/\n HvTableBody acts as a `tbody` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles\n */\nexport const HvTableBody = forwardRef<HTMLElement, HvTableBodyProps>(\n (\n {\n classes: classesProp,\n className,\n component,\n children,\n withNavigation = false,\n ...others\n },\n externalRef,\n ) => {\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n\n const bodyRef = useRef(null);\n\n const handleRef = useForkRef(externalRef, bodyRef);\n\n const Component =\n component \|\| tableContext?.components?.TBody \|\| defaultComponent;\n\n return (\n <TableSectionContext.Provider value={tableSectionContext}>\n <Component\n className={cx(classes.root, className)}\n ref={handleRef}\n role={Component === defaultComponent ? null : \"rowgroup\"}\n {...others}\n >\n {withNavigation\n ? Children.map(children, (element) => {\n if (isValidElement(element)) {\n return (\n <HvFocus\n id={`my-id-${element.key}`}\n rootRef={bodyRef}\n key={`row-${element.key}`}\n strategy=\"grid\"\n filterClass={tableSectionContext.filterClassName}\n navigationJump={1}\n focusDisabled={false}\n selected={element.props.selected}\n >\n {element}\n </HvFocus>\n );\n }\n })\n : children}\n </Component>\n </TableSectionContext.Provider>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;~~AAqCA~~,MAAM,sBAAsB;AAAA,EAC1B,MAAM;AAAA,EACN,iBAAiB;AACnB;AAEA,MAAM,mBAAmB;AAMlB,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,GAAG;AAAA,KAEL,gBACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AAEtC,UAAA,UAAU,OAAO,IAAI;AAErB,UAAA,YAAY,WAAW,aAAa,OAAO;AAEjD,UAAM,YACJ,aAAa,cAAc,YAAY,SAAS;AAElD,WACG,oBAAA,oBAAoB,UAApB,EAA6B,OAAO,qBACnC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,QAEH,UACG,iBAAA,SAAS,IAAI,UAAU,CAAC,YAAY;AAC9B,cAAA,eAAe,OAAO,GAAG;AAEzB,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,SAAS,QAAQ,GAAG;AAAA,gBACxB,SAAS;AAAA,gBAET,UAAS;AAAA,gBACT,aAAa,oBAAoB;AAAA,gBACjC,gBAAgB;AAAA,gBAChB,eAAe;AAAA,gBACf,UAAU,QAAQ,MAAM;AAAA,gBAEvB,UAAA;AAAA,cAAA;AAAA,cAPI,OAAO,QAAQ,GAAG;AAAA,YAAA;AAAA,UAU7B;AAAA,QACD,CAAA,IACD;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AACF;"}
1	+ {"version":3,"file":"TableBody.js","sources":["../../../../src/Table/TableBody/TableBody.tsx"],"sourcesContent":["import {\n Children,\n forwardRef,\n isValidElement,\n useContext,\n useRef,\n} from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFocus } from \"../../Focus\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport TableContext from \"../TableContext\";\nimport {\n TableSectionContext,\n TableSectionContextValue,\n} from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableBody.styles\";\n\nexport { staticClasses as tableBodyClasses };\n\nexport type HvTableBodyClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableBodyProps\n extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n /*\n Content to be rendered\n /\n children: React.ReactNode;\n /\n The component used for the root node. Either a string to use a HTML element or a component.\n * Defaults to tbody.\n /\n component?: React.ElementType;\n /* Sets whether or not there should be arrow navigation between the table rows /\n withNavigation?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTableBodyClasses;\n}\n\nconst tableSectionContext = {\n type: \"body\",\n filterClassName: \"_grid\",\n} satisfies TableSectionContextValue;\n\nconst defaultComponent = \"tbody\";\n\n/\n HvTableBody acts as a `tbody` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles\n */\nexport const HvTableBody = forwardRef<HTMLElement, HvTableBodyProps>(\n (\n {\n classes: classesProp,\n className,\n component,\n children,\n withNavigation = false,\n ...others\n },\n externalRef,\n ) => {\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n\n const bodyRef = useRef(null);\n\n const handleRef = useForkRef(externalRef, bodyRef);\n\n const Component =\n component \|\| tableContext?.components?.TBody \|\| defaultComponent;\n\n return (\n <TableSectionContext.Provider value={tableSectionContext}>\n <Component\n className={cx(classes.root, className)}\n ref={handleRef}\n role={Component === defaultComponent ? null : \"rowgroup\"}\n {...others}\n >\n {withNavigation\n ? Children.map(children, (element) => {\n if (isValidElement(element)) {\n return (\n <HvFocus\n id={`my-id-${element.key}`}\n rootRef={bodyRef}\n key={`row-${element.key}`}\n strategy=\"grid\"\n filterClass={tableSectionContext.filterClassName}\n navigationJump={1}\n focusDisabled={false}\n selected={element.props.selected}\n >\n {element}\n </HvFocus>\n );\n }\n })\n : children}\n </Component>\n </TableSectionContext.Provider>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;AAwCA,MAAM,sBAAsB;AAAA,EAC1B,MAAM;AAAA,EACN,iBAAiB;AACnB;AAEA,MAAM,mBAAmB;AAMlB,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,GAAG;AAAA,KAEL,gBACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AAEtC,UAAA,UAAU,OAAO,IAAI;AAErB,UAAA,YAAY,WAAW,aAAa,OAAO;AAEjD,UAAM,YACJ,aAAa,cAAc,YAAY,SAAS;AAElD,WACG,oBAAA,oBAAoB,UAApB,EAA6B,OAAO,qBACnC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACrC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,QAEH,UACG,iBAAA,SAAS,IAAI,UAAU,CAAC,YAAY;AAC9B,cAAA,eAAe,OAAO,GAAG;AAEzB,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,SAAS,QAAQ,GAAG;AAAA,gBACxB,SAAS;AAAA,gBAET,UAAS;AAAA,gBACT,aAAa,oBAAoB;AAAA,gBACjC,gBAAgB;AAAA,gBAChB,eAAe;AAAA,gBACf,UAAU,QAAQ,MAAM;AAAA,gBAEvB,UAAA;AAAA,cAAA;AAAA,cAPI,OAAO,QAAQ,GAAG;AAAA,YAAA;AAAA,UAU7B;AAAA,QACD,CAAA,IACD;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AACF;"}

package/dist/esm/Table/TableCell/TableCell.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { forwardRef, useContext } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { capitalize } from "../../utils/helpers.js";
 import TableContext from "../TableContext.js";
-import TableSectionContext from "../TableSectionContext.js";
+import { TableSectionContext } from "../TableSectionContext.js";
 import { useClasses } from "./TableCell.styles.js";
 import { staticClasses } from "./TableCell.styles.js";
 const defaultComponent = "td";

package/dist/esm/Table/TableCell/TableCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableCell.js","sources":["../../../../src/Table/TableCell/TableCell.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n HvTableCellAlign,\n HvTableCellType,\n HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableCell.styles\";\n\nexport { staticClasses as tableCellClasses };\n\nexport type HvTableCellClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableCellProps\n extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. /\n component?: React.ElementType;\n /* Content to be rendered /\n children?: React.ReactNode;\n /* Inline styles to be applied to the root element. /\n style?: React.CSSProperties;\n /* Set the text-align on the table cell content. /\n align?: HvTableCellAlign;\n /* Sets the cell's variant. /\n variant?: HvTableCellVariant \| \"listcheckbox\" \| \"listactions\";\n /* Specify the cell's type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. /\n type?: HvTableCellType;\n /* Whether or not the cell is part of a sorted column. /\n sorted?: boolean;\n /* The cell is part of a sticky column. /\n stickyColumn?: boolean;\n /* The cell is part of the last sticky to the left column. /\n stickyColumnMostLeft?: boolean;\n /* The cell is part of the first sticky to the right column. /\n stickyColumnLeastRight?: boolean;\n /* The cell is part of the first column in the group. /\n groupColumnMostLeft?: boolean;\n /* The cell is part of the last column in the group. /\n groupColumnMostRight?: boolean;\n /* Whether or not the cell is resizable /\n resizable?: boolean;\n /* Whether or not the cell is being resized /\n resizing?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTableCellClasses;\n}\n\nconst defaultComponent = \"td\";\n\n/\n `HvTableCell` acts as a `td` element and inherits styles from its context\n */\nexport const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(\n (props, externalRef) => {\n const {\n children,\n component,\n className,\n style,\n classes: classesProp,\n align = \"inherit\",\n variant = \"default\",\n type: typeProp,\n stickyColumn = false,\n stickyColumnMostLeft = false,\n stickyColumnLeastRight = false,\n groupColumnMostLeft = false,\n groupColumnMostRight = false,\n sorted = false,\n resizable = false,\n resizing = false,\n ...others\n } = useDefaultProps(\"HvTableCell\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = typeProp \|\| tableSectionContext?.type \|\| \"body\";\n\n const Component =\n component \|\| tableContext?.components?.Td \|\| defaultComponent;\n\n return (\n <Component\n ref={externalRef}\n role={Component === defaultComponent ? null : \"cell\"}\n style={style}\n className={cx(\n classes.root,\n classes[type as keyof HvTableCellClasses],\n {\n [classes[`align${capitalize(align)}` as keyof HvTableCellClasses]]:\n align !== \"inherit\",\n [classes.variantList]: tableContext.variant === \"listrow\",\n [classes.variantListHead]:\n tableContext.variant === \"listrow\" && type !== \"body\",\n [classes[\n `variant${capitalize(variant)}` as keyof HvTableCellClasses\n ]]: variant !== \"default\",\n [classes.sorted]: sorted,\n [classes.stickyColumn]: stickyColumn,\n [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n [classes.groupColumnMostLeft]: groupColumnMostLeft,\n [classes.groupColumnMostRight]: groupColumnMostRight,\n [classes.resizable]: resizable,\n [classes.resizing]: resizing,\n },\n className,\n )}\n {...others}\n >\n {children}\n </Component>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;AAsDA,MAAM,mBAAmB;AAKlB,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,gBAAgB;AAChB,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,eAAe;AAAA,MACf,uBAAuB;AAAA,MACvB,yBAAyB;AAAA,MACzB,sBAAsB;AAAA,MACtB,uBAAuB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AACtC,UAAA,sBAAsB,WAAW,mBAAmB;AAEpD,UAAA,OAAO,YAAY,qBAAqB,QAAQ;AAEtD,UAAM,YACJ,aAAa,cAAc,YAAY,MAAM;AAG7C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC9C;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,IAAgC;AAAA,UACxC;AAAA,YACE,CAAC,QAAQ,QAAQ,WAAW,KAAK,CAAC,EAA8B,CAAC,GAC/D,UAAU;AAAA,YACZ,CAAC,QAAQ,WAAW,GAAG,aAAa,YAAY;AAAA,YAChD,CAAC,QAAQ,eAAe,GACtB,aAAa,YAAY,aAAa,SAAS;AAAA,YACjD,CAAC,QACC,UAAU,WAAW,OAAO,CAAC,EAC/B,CAAC,GAAG,YAAY;AAAA,YAChB,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,sBAAsB,GAAG;AAAA,YAClC,CAAC,QAAQ,mBAAmB,GAAG;AAAA,YAC/B,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,SAAS,GAAG;AAAA,YACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
1	+ {"version":3,"file":"TableCell.js","sources":["../../../../src/Table/TableCell/TableCell.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n HvTableCellAlign,\n HvTableCellType,\n HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport { TableSectionContext } from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableCell.styles\";\n\nexport { staticClasses as tableCellClasses };\n\nexport type HvTableCellClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableCellProps\n extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. /\n component?: React.ElementType;\n /* Content to be rendered /\n children?: React.ReactNode;\n /* Inline styles to be applied to the root element. /\n style?: React.CSSProperties;\n /* Set the text-align on the table cell content. /\n align?: HvTableCellAlign;\n /* Sets the cell's variant. /\n variant?: HvTableCellVariant \| \"listcheckbox\" \| \"listactions\";\n /* Specify the cell's type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. /\n type?: HvTableCellType;\n /* Whether or not the cell is part of a sorted column. /\n sorted?: boolean;\n /* The cell is part of a sticky column. /\n stickyColumn?: boolean;\n /* The cell is part of the last sticky to the left column. /\n stickyColumnMostLeft?: boolean;\n /* The cell is part of the first sticky to the right column. /\n stickyColumnLeastRight?: boolean;\n /* The cell is part of the first column in the group. /\n groupColumnMostLeft?: boolean;\n /* The cell is part of the last column in the group. /\n groupColumnMostRight?: boolean;\n /* Whether or not the cell is resizable /\n resizable?: boolean;\n /* Whether or not the cell is being resized /\n resizing?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTableCellClasses;\n}\n\nconst defaultComponent = \"td\";\n\n/\n `HvTableCell` acts as a `td` element and inherits styles from its context\n */\nexport const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(\n (props, externalRef) => {\n const {\n children,\n component,\n className,\n style,\n classes: classesProp,\n align = \"inherit\",\n variant = \"default\",\n type: typeProp,\n stickyColumn = false,\n stickyColumnMostLeft = false,\n stickyColumnLeastRight = false,\n groupColumnMostLeft = false,\n groupColumnMostRight = false,\n sorted = false,\n resizable = false,\n resizing = false,\n ...others\n } = useDefaultProps(\"HvTableCell\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = typeProp \|\| tableSectionContext?.type \|\| \"body\";\n\n const Component =\n component \|\| tableContext?.components?.Td \|\| defaultComponent;\n\n return (\n <Component\n ref={externalRef}\n role={Component === defaultComponent ? null : \"cell\"}\n style={style}\n className={cx(\n classes.root,\n classes[type as keyof HvTableCellClasses],\n {\n [classes[`align${capitalize(align)}` as keyof HvTableCellClasses]]:\n align !== \"inherit\",\n [classes.variantList]: tableContext.variant === \"listrow\",\n [classes.variantListHead]:\n tableContext.variant === \"listrow\" && type !== \"body\",\n [classes[\n `variant${capitalize(variant)}` as keyof HvTableCellClasses\n ]]: variant !== \"default\",\n [classes.sorted]: sorted,\n [classes.stickyColumn]: stickyColumn,\n [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n [classes.groupColumnMostLeft]: groupColumnMostLeft,\n [classes.groupColumnMostRight]: groupColumnMostRight,\n [classes.resizable]: resizable,\n [classes.resizing]: resizing,\n },\n className,\n )}\n {...others}\n >\n {children}\n </Component>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;AAsDA,MAAM,mBAAmB;AAKlB,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,gBAAgB;AAChB,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,eAAe;AAAA,MACf,uBAAuB;AAAA,MACvB,yBAAyB;AAAA,MACzB,sBAAsB;AAAA,MACtB,uBAAuB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AACtC,UAAA,sBAAsB,WAAW,mBAAmB;AAEpD,UAAA,OAAO,YAAY,qBAAqB,QAAQ;AAEtD,UAAM,YACJ,aAAa,cAAc,YAAY,MAAM;AAG7C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC9C;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,IAAgC;AAAA,UACxC;AAAA,YACE,CAAC,QAAQ,QAAQ,WAAW,KAAK,CAAC,EAA8B,CAAC,GAC/D,UAAU;AAAA,YACZ,CAAC,QAAQ,WAAW,GAAG,aAAa,YAAY;AAAA,YAChD,CAAC,QAAQ,eAAe,GACtB,aAAa,YAAY,aAAa,SAAS;AAAA,YACjD,CAAC,QACC,UAAU,WAAW,OAAO,CAAC,EAC/B,CAAC,GAAG,YAAY;AAAA,YAChB,CAAC,QAAQ,MAAM,GAAG;AAAA,YAClB,CAAC,QAAQ,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,sBAAsB,GAAG;AAAA,YAClC,CAAC,QAAQ,mBAAmB,GAAG;AAAA,YAC/B,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,SAAS,GAAG;AAAA,YACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/esm/Table/TableHead/TableHead.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext } from "react";
 import TableContext from "../TableContext.js";
-import TableSectionContext from "../TableSectionContext.js";
+import { TableSectionContext } from "../TableSectionContext.js";
 import { useClasses } from "./TableHead.styles.js";
 import { staticClasses } from "./TableHead.styles.js";
 const tableSectionContext = {

package/dist/esm/Table/TableHead/TableHead.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHead.js","sources":["../../../../src/Table/TableHead/TableHead.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHead.styles\";\n\nexport { staticClasses as tableHeadClasses };\n\nexport type HvTableHeadClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeadProps\n extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n /*\n Content to be rendered\n /\n children: React.ReactNode;\n /\n The component used for the root node. Either a string to use a HTML element or a component.\n * Defaults to thead.\n /\n component?: React.ElementType;\n /\n The table has sticky headers.\n /\n stickyHeader?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTableHeadClasses;\n}\n\nconst tableSectionContext = {\n type: \"head\",\n};\n\nconst defaultComponent = \"thead\";\n\n/\n HvTableHead acts as a `thead` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit header-specific styles\n */\nexport const HvTableHead = forwardRef<HTMLElement, HvTableHeadProps>(\n (\n { classes: classesProp, className, component, stickyHeader, ...others },\n externalRef,\n ) => {\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n\n const Component =\n component \|\| tableContext?.components?.THead \|\| defaultComponent;\n\n return (\n <TableSectionContext.Provider value={tableSectionContext}>\n <Component\n className={cx(\n classes.root,\n { [classes.stickyHeader]: stickyHeader },\n className,\n )}\n ref={externalRef}\n role={Component === defaultComponent ? null : \"rowgroup\"}\n {...others}\n />\n </TableSectionContext.Provider>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;~~AA+BA~~,MAAM,sBAAsB;AAAA,EAC1B,MAAM;AACR;AAEA,MAAM,mBAAmB;AAMlB,MAAM,cAAc;AAAA,EACzB,CACE,EAAE,SAAS,aAAa,WAAW,WAAW,cAAc,GAAG,OAAO,GACtE,gBACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AAE5C,UAAM,YACJ,aAAa,cAAc,YAAY,SAAS;AAElD,WACG,oBAAA,oBAAoB,UAApB,EAA6B,OAAO,qBACnC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,YAAY,GAAG,aAAa;AAAA,UACvC;AAAA,QACF;AAAA,QACA,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AACF;"}
1	+ {"version":3,"file":"TableHead.js","sources":["../../../../src/Table/TableHead/TableHead.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport TableContext from \"../TableContext\";\nimport {\n TableSectionContext,\n TableSectionContextValue,\n} from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHead.styles\";\n\nexport { staticClasses as tableHeadClasses };\n\nexport type HvTableHeadClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeadProps\n extends HvBaseProps<HTMLTableSectionElement, \"children\"> {\n /*\n Content to be rendered\n /\n children: React.ReactNode;\n /\n The component used for the root node. Either a string to use a HTML element or a component.\n * Defaults to thead.\n /\n component?: React.ElementType;\n /\n The table has sticky headers.\n /\n stickyHeader?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTableHeadClasses;\n}\n\nconst tableSectionContext = {\n type: \"head\",\n} satisfies TableSectionContextValue;\n\nconst defaultComponent = \"thead\";\n\n/\n HvTableHead acts as a `thead` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit header-specific styles\n */\nexport const HvTableHead = forwardRef<HTMLElement, HvTableHeadProps>(\n (\n { classes: classesProp, className, component, stickyHeader, ...others },\n externalRef,\n ) => {\n const { classes, cx } = useClasses(classesProp);\n\n const tableContext = useContext(TableContext);\n\n const Component =\n component \|\| tableContext?.components?.THead \|\| defaultComponent;\n\n return (\n <TableSectionContext.Provider value={tableSectionContext}>\n <Component\n className={cx(\n classes.root,\n { [classes.stickyHeader]: stickyHeader },\n className,\n )}\n ref={externalRef}\n role={Component === defaultComponent ? null : \"rowgroup\"}\n {...others}\n />\n </TableSectionContext.Provider>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;AAkCA,MAAM,sBAAsB;AAAA,EAC1B,MAAM;AACR;AAEA,MAAM,mBAAmB;AAMlB,MAAM,cAAc;AAAA,EACzB,CACE,EAAE,SAAS,aAAa,WAAW,WAAW,cAAc,GAAG,OAAO,GACtE,gBACG;AACH,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,WAAW,YAAY;AAE5C,UAAM,YACJ,aAAa,cAAc,YAAY,SAAS;AAElD,WACG,oBAAA,oBAAoB,UAApB,EAA6B,OAAO,qBACnC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,YAAY,GAAG,aAAa;AAAA,UACvC;AAAA,QACF;AAAA,QACA,KAAK;AAAA,QACL,MAAM,cAAc,mBAAmB,OAAO;AAAA,QAC7C,GAAG;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AACF;"}

package/dist/esm/Table/TableHeader/TableHeader.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 import { capitalize } from "../../utils/helpers.js";
 import TableContext from "../TableContext.js";
-import TableSectionContext from "../TableSectionContext.js";
+import { TableSectionContext } from "../TableSectionContext.js";
 import { useClasses, staticClasses } from "./TableHeader.styles.js";
 import { getSortIcon, isParagraph } from "./utils.js";
 import { HvButton } from "../../Button/Button.js";

package/dist/esm/Table/TableHeader/TableHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHeader.js","sources":["../../../../src/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo } from \"react\";\nimport { alpha, hexToRgb } from \"@mui/material/styles\";\nimport {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n HvTableCellAlign,\n HvTableCellType,\n HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHeader.styles\";\nimport { getSortIcon, isParagraph } from \"./utils\";\n\nexport { staticClasses as tableHeaderClasses };\n\nexport type HvTableHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeaderProps\n extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. /\n component?: React.ElementType;\n /* Content to be rendered /\n children?: React.ReactNode;\n /* The scope of cells that the header element relates to. /\n scope?: \"col\" \| \"row\" \| \"colgroup\" \| \"rowgroup\";\n /* Set the text-align on the table cell content. /\n align?: HvTableCellAlign;\n /* Sets the cell's variant. /\n variant?: HvTableCellVariant;\n /* Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. /\n type?: HvTableCellType;\n /* The cell is part of a sticky column. /\n stickyColumn?: boolean;\n /* The cell is part of the last sticky to the left column. /\n stickyColumnMostLeft?: boolean;\n /* The cell is part of the first sticky to the right column. /\n stickyColumnLeastRight?: boolean;\n /* The cell is part of the first column in the group. /\n groupColumnMostLeft?: boolean;\n /* The cell is part of the last column in the group. /\n groupColumnMostRight?: boolean;\n /* Whether or not the cell is sorted /\n sorted?: boolean;\n /* Whether or not the cell is sortable /\n sortable?: boolean;\n /* Set sort direction icon and aria-sort. /\n sortDirection?: \"ascending\" \| \"descending\" \| false;\n /* Extra props to be passed onto the text in the header. /\n headerTextProps?: HvTypographyProps;\n /* Whether or not the cell is resizable /\n resizable?: boolean;\n /* Whether or not the cell is being resized /\n resizing?: boolean;\n /* The resize props injected in the resize handler /\n resizerProps?: React.HTMLAttributes<HTMLDivElement>;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTableHeaderClasses;\n /* Extra props to be passed onto the sort button in the header. /\n sortButtonProps?: HvButtonProps;\n}\n\nconst defaultComponent = \"th\";\n\n/\n `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n (props, externalRef) => {\n const {\n children,\n component,\n className,\n style: styleProp,\n classes: classesProp,\n scope: scopeProp,\n align = \"inherit\",\n variant = \"default\",\n type: typeProp,\n stickyColumn = false,\n stickyColumnMostLeft = false,\n stickyColumnLeastRight = false,\n groupColumnMostLeft = false,\n groupColumnMostRight = false,\n sortDirection = \"none\",\n sorted,\n sortable,\n headerTextProps,\n resizerProps = {},\n resizable = false,\n resizing = false,\n sortButtonProps,\n ...others\n } = useDefaultProps(\"HvTableHeader\", props);\n const { classes, cx, css } = useClasses(classesProp);\n\n const { colors } = useTheme();\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = typeProp \|\| tableSectionContext?.type \|\| \"body\";\n const isHeadCell = type === \"head\";\n\n const scope = scopeProp ?? (isHeadCell ? \"col\" : \"row\");\n\n const Sort = useMemo(\n () => getSortIcon(sorted && sortDirection),\n [sorted, sortDirection],\n );\n\n const Component =\n component \|\| tableContext?.components?.Th \|\| defaultComponent;\n\n const role =\n Component === defaultComponent\n ? null\n : isHeadCell\n ? \"columnheader\"\n : \"rowheader\";\n const paragraph = isParagraph(children);\n\n // Keep the header sticky\n const style = stickyColumn\n ? { ...styleProp, position: \"sticky\" }\n : styleProp;\n\n return (\n <Component\n ref={externalRef}\n role={role}\n scope={scope}\n style={style}\n className={cx(\n classes.root,\n classes[type as keyof HvTableHeaderClasses],\n type === \"body\" &&\n css({\n [`&.${staticClasses.sorted}`]: {\n backgroundColor: alpha(\n hexToRgb(colors?.atmo1 \|\| theme.colors.atmo1),\n 0.4,\n ),\n },\n }),\n {\n [classes.groupColumnMostLeft]: groupColumnMostLeft,\n [classes.groupColumnMostRight]: groupColumnMostRight,\n [classes.sortable]: sortable,\n [classes.sorted]: sorted,\n [classes.resizable]: resizable,\n [classes.resizing]: resizing,\n [classes.stickyColumn]: stickyColumn,\n [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n [classes.variantList]: tableContext.variant === \"listrow\",\n [classes[\n `align${capitalize(align)}` as keyof HvTableHeaderClasses\n ]]: align !== \"inherit\",\n [classes[\n `variant${capitalize(variant)}` as keyof HvTableHeaderClasses\n ]]: variant !== \"default\",\n },\n className,\n )}\n aria-sort={sortable ? sortDirection : undefined}\n {...others}\n >\n <div\n className={cx(classes.headerContent, {\n [classes[\n `alignFlex${capitalize(align)}` as keyof HvTableHeaderClasses\n ]]: align !== \"inherit\",\n })}\n >\n {isHeadCell && sortable && (\n <HvButton\n className={classes.sortButton}\n icon\n overrideIconColors={false}\n aria-label=\"Sort\"\n {...sortButtonProps}\n >\n <Sort className={classes.sortIcon} />\n </HvButton>\n )}\n <HvTypography\n component=\"div\"\n className={cx({\n [classes.headerText]: !paragraph,\n [classes.headerParagraph]: paragraph,\n [classes.sortableHeaderText]: sortable,\n })}\n variant=\"label\"\n {...headerTextProps}\n >\n {children}\n </HvTypography>\n {resizable && <div {...resizerProps} className={classes.resizer} />}\n </div>\n </Component>\n );\n },\n);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"TableHeader.js","sources":["../../../../src/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo } from \"react\";\nimport { alpha, hexToRgb } from \"@mui/material/styles\";\nimport {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n HvTableCellAlign,\n HvTableCellType,\n HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport { TableSectionContext } from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHeader.styles\";\nimport { getSortIcon, isParagraph } from \"./utils\";\n\nexport { staticClasses as tableHeaderClasses };\n\nexport type HvTableHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeaderProps\n extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. /\n component?: React.ElementType;\n /* Content to be rendered /\n children?: React.ReactNode;\n /* The scope of cells that the header element relates to. /\n scope?: \"col\" \| \"row\" \| \"colgroup\" \| \"rowgroup\";\n /* Set the text-align on the table cell content. /\n align?: HvTableCellAlign;\n /* Sets the cell's variant. /\n variant?: HvTableCellVariant;\n /* Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. /\n type?: HvTableCellType;\n /* The cell is part of a sticky column. /\n stickyColumn?: boolean;\n /* The cell is part of the last sticky to the left column. /\n stickyColumnMostLeft?: boolean;\n /* The cell is part of the first sticky to the right column. /\n stickyColumnLeastRight?: boolean;\n /* The cell is part of the first column in the group. /\n groupColumnMostLeft?: boolean;\n /* The cell is part of the last column in the group. /\n groupColumnMostRight?: boolean;\n /* Whether or not the cell is sorted /\n sorted?: boolean;\n /* Whether or not the cell is sortable /\n sortable?: boolean;\n /* Set sort direction icon and aria-sort. /\n sortDirection?: \"ascending\" \| \"descending\" \| false;\n /* Extra props to be passed onto the text in the header. /\n headerTextProps?: HvTypographyProps;\n /* Whether or not the cell is resizable /\n resizable?: boolean;\n /* Whether or not the cell is being resized /\n resizing?: boolean;\n /* The resize props injected in the resize handler /\n resizerProps?: React.HTMLAttributes<HTMLDivElement>;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTableHeaderClasses;\n /* Extra props to be passed onto the sort button in the header. /\n sortButtonProps?: HvButtonProps;\n}\n\nconst defaultComponent = \"th\";\n\n/\n `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n (props, externalRef) => {\n const {\n children,\n component,\n className,\n style: styleProp,\n classes: classesProp,\n scope: scopeProp,\n align = \"inherit\",\n variant = \"default\",\n type: typeProp,\n stickyColumn = false,\n stickyColumnMostLeft = false,\n stickyColumnLeastRight = false,\n groupColumnMostLeft = false,\n groupColumnMostRight = false,\n sortDirection = \"none\",\n sorted,\n sortable,\n headerTextProps,\n resizerProps = {},\n resizable = false,\n resizing = false,\n sortButtonProps,\n ...others\n } = useDefaultProps(\"HvTableHeader\", props);\n const { classes, cx, css } = useClasses(classesProp);\n\n const { colors } = useTheme();\n const tableContext = useContext(TableContext);\n const tableSectionContext = useContext(TableSectionContext);\n\n const type = typeProp \|\| tableSectionContext?.type \|\| \"body\";\n const isHeadCell = type === \"head\";\n\n const scope = scopeProp ?? (isHeadCell ? \"col\" : \"row\");\n\n const Sort = useMemo(\n () => getSortIcon(sorted && sortDirection),\n [sorted, sortDirection],\n );\n\n const Component =\n component \|\| tableContext?.components?.Th \|\| defaultComponent;\n\n const role =\n Component === defaultComponent\n ? null\n : isHeadCell\n ? \"columnheader\"\n : \"rowheader\";\n const paragraph = isParagraph(children);\n\n // Keep the header sticky\n const style = stickyColumn\n ? { ...styleProp, position: \"sticky\" }\n : styleProp;\n\n return (\n <Component\n ref={externalRef}\n role={role}\n scope={scope}\n style={style}\n className={cx(\n classes.root,\n classes[type as keyof HvTableHeaderClasses],\n type === \"body\" &&\n css({\n [`&.${staticClasses.sorted}`]: {\n backgroundColor: alpha(\n hexToRgb(colors?.atmo1 \|\| theme.colors.atmo1),\n 0.4,\n ),\n },\n }),\n {\n [classes.groupColumnMostLeft]: groupColumnMostLeft,\n [classes.groupColumnMostRight]: groupColumnMostRight,\n [classes.sortable]: sortable,\n [classes.sorted]: sorted,\n [classes.resizable]: resizable,\n [classes.resizing]: resizing,\n [classes.stickyColumn]: stickyColumn,\n [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n [classes.variantList]: tableContext.variant === \"listrow\",\n [classes[\n `align${capitalize(align)}` as keyof HvTableHeaderClasses\n ]]: align !== \"inherit\",\n [classes[\n `variant${capitalize(variant)}` as keyof HvTableHeaderClasses\n ]]: variant !== \"default\",\n },\n className,\n )}\n aria-sort={sortable ? sortDirection : undefined}\n {...others}\n >\n <div\n className={cx(classes.headerContent, {\n [classes[\n `alignFlex${capitalize(align)}` as keyof HvTableHeaderClasses\n ]]: align !== \"inherit\",\n })}\n >\n {isHeadCell && sortable && (\n <HvButton\n className={classes.sortButton}\n icon\n overrideIconColors={false}\n aria-label=\"Sort\"\n {...sortButtonProps}\n >\n <Sort className={classes.sortIcon} />\n </HvButton>\n )}\n <HvTypography\n component=\"div\"\n className={cx({\n [classes.headerText]: !paragraph,\n [classes.headerParagraph]: paragraph,\n [classes.sortableHeaderText]: sortable,\n })}\n variant=\"label\"\n {...headerTextProps}\n >\n {children}\n </HvTypography>\n {resizable && <div {...resizerProps} className={classes.resizer} />}\n </div>\n </Component>\n );\n },\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/Table/TableRow/TableRow.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import TableContext from "../TableContext.js";
-import TableSectionContext from "../TableSectionContext.js";
+import { TableSectionContext } from "../TableSectionContext.js";
 import { useClasses } from "./TableRow.styles.js";
 import { staticClasses } from "./TableRow.styles.js";
 const defaultComponent = "tr";