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

@hitachivantara/uikit-react-core 5.67.1 → 5.68.1

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","sources":["../../../src/Select/Select.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define /\nimport { useRef, useState } from \"react\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { SelectOption } from \"@mui/base/useOption\";\nimport {\n SelectProvider,\n useSelect,\n UseSelectParameters,\n} from \"@mui/base/useSelect\";\nimport { useControlled, useForkRef } from \"@mui/material/utils\";\nimport type { Placement } from \"@popperjs/core\";\nimport clsx from \"clsx\";\nimport { useTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport { HvButtonProps } from \"../Button\";\nimport { HvDropdownButton } from \"../DropdownButton\";\nimport {\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n} from \"../Forms\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvPanel } from \"../Panel\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getContainerElement } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Select.styles\";\n\nfunction defaultRenderValue<Value>(\n options: SelectOption<Value> \| SelectOption<Value>[] \| null,\n) {\n if (Array.isArray(options)) {\n if (options.length === 0) return null;\n return <>{options.map((o) => o.label).join(\", \")}</>;\n }\n\n return options?.label ?? null;\n}\n\nconst mergeIds = (...ids: clsx.ClassValue[]) => clsx(ids) \|\| undefined;\n\nexport { staticClasses as selectClasses };\n\nexport type HvSelectClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectProps<\n OptionValue extends {},\n Multiple extends boolean = false,\n> extends Omit<HvFormElementProps, \"value\" \| \"defaultValue\" \| \"onChange\">,\n Pick<\n UseSelectParameters<OptionValue, Multiple>,\n \| \"name\"\n \| \"required\"\n \| \"disabled\"\n \| \"multiple\"\n \| \"open\"\n \| \"defaultOpen\"\n \| \"value\"\n \| \"defaultValue\"\n \| \"buttonRef\"\n \| \"options\"\n \| \"getSerializedValue\"\n \| \"onChange\"\n \| \"onOpenChange\"\n >,\n Pick<HvButtonProps, \"size\" \| \"variant\"> {\n classes?: HvSelectClasses;\n placeholder?: React.ReactNode;\n autoComplete?: string;\n /* Whether the width of the select panel can vary independently. /\n variableWidth?: boolean;\n /\n Properties passed on to the input element.\n /\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /* If enabled the panel will be rendered using a portal , if disabled will be under the DOM hierarchy of the parent component. /\n enablePortal?: boolean;\n}\n\n/\n The `HvSelect` component is a form control element that allows selection from a list of options.\n \n It aims to be aligned with the native HTML `<select>` and `<option>` APIs and be easily integrated with forms.\n \n @example\n * <HvSelect name=\"pets\">\n * <HvOption value=\"dog\">Dog</HvOption>\n * <HvOption value=\"cat\">Cat</HvOption>\n * </HvSelect>\n * */\nexport const HvSelect = fixedForwardRef(function HvSelect<\n OptionValue extends {},\n Multiple extends boolean = false,\n>(\n props: HvSelectProps<OptionValue, Multiple>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n classes: classesProp,\n className,\n id: idProp,\n size,\n variant = \"secondarySubtle\",\n name,\n required,\n disabled: disabledProp,\n readOnly,\n label,\n open: openProp,\n defaultOpen,\n multiple,\n autoComplete,\n options: optionsProp,\n variableWidth,\n value: valueProp,\n defaultValue,\n placeholder,\n inputProps,\n enablePortal,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n getSerializedValue,\n onClick,\n onChange,\n onOpenChange,\n ...others\n } = useDefaultProps(\"HvSelect\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { rootId } = useTheme();\n\n const [placement, setPlacement] = useState<Placement>(\"bottom-start\");\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleButtonRef = useForkRef(ref, buttonRef);\n\n const {\n contextValue,\n disabled,\n getButtonProps,\n getListboxProps,\n getHiddenInputProps,\n getOptionMetadata,\n value,\n open,\n } = useSelect<OptionValue, Multiple>({\n componentName: \"HvSelect\",\n name,\n required,\n disabled: disabledProp,\n multiple,\n open: openProp,\n defaultOpen,\n value: valueProp,\n defaultValue,\n options: optionsProp,\n buttonRef: handleButtonRef,\n getSerializedValue,\n onChange,\n onOpenChange: handleOpenChange,\n });\n\n const id = useUniqueId(idProp);\n const labelId = useUniqueId(setId(idProp, \"label\"));\n const descriptionId = useUniqueId(setId(idProp, \"description\"));\n const errorMessageId = useUniqueId(setId(idProp, \"error\"));\n\n const [validationMessage] = useControlled({\n name: \"HvSelect.statusMessage\",\n controlled: statusMessage,\n default: \"Required\",\n });\n const [validationState, setValidationState] = useControlled<HvFormStatus>({\n name: \"HvSelect.status\",\n controlled: status,\n default: \"standBy\",\n });\n\n function handleOpenChange(newOpen: boolean) {\n if (!newOpen) {\n const hasValue = multiple ? (value as OptionValue[]).length > 0 : !!value;\n setValidationState(required && !hasValue ? \"invalid\" : \"valid\");\n }\n onOpenChange?.(newOpen);\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 isInvalid = validationState === \"invalid\";\n\n const actualValue = multiple\n ? (value as OptionValue[])\n .map((v) => getOptionMetadata(v))\n .filter((v): v is SelectOption<OptionValue> => v !== undefined)\n : (getOptionMetadata(value as OptionValue) ?? null);\n\n const isOpen = open && !!children;\n\n return (\n <HvFormElement\n name={name}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={validationState}\n className={cx(classes.root, className, {\n [classes.disabled]: disabled,\n [classes.readOnly]: readOnly,\n })}\n {...others}\n >\n {(label \|\| description) && (\n <div className={classes.labelContainer}>\n {label && (\n <HvLabel\n id={labelId}\n htmlFor={id}\n label={label}\n className={classes.label}\n />\n )}\n {description && (\n <HvInfoMessage id={descriptionId} className={classes.description}>\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvDropdownButton\n id={id}\n open={isOpen}\n disabled={disabled}\n readOnly={readOnly}\n className={cx(classes.select, {\n [classes.invalid]: validationState === \"invalid\",\n })}\n placement={placement}\n size={size}\n variant={variant}\n aria-label={ariaLabel}\n aria-labelledby={mergeIds(ariaLabelledBy, { [labelId]: label })}\n aria-invalid={isInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={mergeIds(ariaDescribedBy, {\n [descriptionId]: description,\n })}\n {...getButtonProps()}\n >\n {defaultRenderValue(actualValue) ?? placeholder}\n </HvDropdownButton>\n <Popper\n role=\"none\"\n open={isOpen}\n keepMounted\n disablePortal={!enablePortal}\n container={enablePortal ? getContainerElement(rootId) : undefined}\n anchorEl={buttonRef.current}\n className={classes.popper}\n placement={placement}\n modifiers={[\n {\n enabled: true,\n phase: \"main\",\n fn: ({ state }) => setPlacement(state.placement),\n },\n ]}\n >\n <HvPanel\n style={{\n width: variableWidth\n ? \"auto\"\n : (buttonRef.current?.clientWidth \|\| 0) + 2,\n }}\n className={cx(classes.panel, className, {\n [classes.panelOpenedUp]: placement.includes(\"top\"),\n [classes.panelOpenedDown]: placement.includes(\"bottom\"),\n })}\n >\n <SelectProvider value={contextValue}>\n <HvListContainer condensed selectable {...getListboxProps()}>\n {children}\n </HvListContainer>\n </SelectProvider>\n </HvPanel>\n </Popper>\n <input\n {...getHiddenInputProps()}\n autoComplete={autoComplete}\n {...inputProps}\n />\n {canShowError && (\n <HvWarningText\n id={errorMessageId}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n});\n"],"names":["HvSelect"],"mappings":"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"}
1	+ {"version":3,"file":"Select.js","sources":["../../../src/Select/Select.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define /\nimport { useRef, useState } from \"react\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { SelectOption } from \"@mui/base/useOption\";\nimport {\n SelectProvider,\n useSelect,\n UseSelectParameters,\n} from \"@mui/base/useSelect\";\nimport { useControlled, useForkRef } from \"@mui/material/utils\";\nimport type { Placement } from \"@popperjs/core\";\nimport clsx from \"clsx\";\nimport {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonProps } from \"../Button\";\nimport { HvDropdownButton } from \"../DropdownButton\";\nimport {\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n} from \"../Forms\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvPanel } from \"../Panel\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { getContainerElement } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Select.styles\";\n\nfunction defaultRenderValue<Value>(\n options: SelectOption<Value> \| SelectOption<Value>[] \| null,\n) {\n if (Array.isArray(options)) {\n if (options.length === 0) return null;\n return <>{options.map((o) => o.label).join(\", \")}</>;\n }\n\n return options?.label ?? null;\n}\n\nconst mergeIds = (...ids: clsx.ClassValue[]) => clsx(ids) \|\| undefined;\n\nexport { staticClasses as selectClasses };\n\nexport type HvSelectClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectProps<\n OptionValue extends {},\n Multiple extends boolean = false,\n> extends Omit<HvFormElementProps, \"value\" \| \"defaultValue\" \| \"onChange\">,\n Pick<\n UseSelectParameters<OptionValue, Multiple>,\n \| \"name\"\n \| \"required\"\n \| \"disabled\"\n \| \"multiple\"\n \| \"open\"\n \| \"defaultOpen\"\n \| \"value\"\n \| \"defaultValue\"\n \| \"buttonRef\"\n \| \"options\"\n \| \"getSerializedValue\"\n \| \"onChange\"\n \| \"onOpenChange\"\n >,\n Pick<HvButtonProps, \"size\" \| \"variant\"> {\n classes?: HvSelectClasses;\n placeholder?: React.ReactNode;\n autoComplete?: string;\n /* Whether the width of the select panel can vary independently. /\n variableWidth?: boolean;\n /\n Properties passed on to the input element.\n /\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /* If enabled the panel will be rendered using a portal , if disabled will be under the DOM hierarchy of the parent component. /\n enablePortal?: boolean;\n}\n\n/\n The `HvSelect` component is a form control element that allows selection from a list of options.\n \n It aims to be aligned with the native HTML `<select>` and `<option>` APIs and be easily integrated with forms.\n \n @example\n * <HvSelect name=\"pets\">\n * <HvOption value=\"dog\">Dog</HvOption>\n * <HvOption value=\"cat\">Cat</HvOption>\n * </HvSelect>\n * */\nexport const HvSelect = fixedForwardRef(function HvSelect<\n OptionValue extends {},\n Multiple extends boolean = false,\n>(\n props: HvSelectProps<OptionValue, Multiple>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n classes: classesProp,\n className,\n id: idProp,\n size,\n variant = \"secondarySubtle\",\n name,\n required,\n disabled: disabledProp,\n readOnly,\n label,\n open: openProp,\n defaultOpen,\n multiple,\n autoComplete,\n options: optionsProp,\n variableWidth,\n value: valueProp,\n defaultValue,\n placeholder,\n inputProps,\n enablePortal,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n getSerializedValue,\n onClick,\n onChange,\n onOpenChange,\n ...others\n } = useDefaultProps(\"HvSelect\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { rootId } = useTheme();\n\n const [placement, setPlacement] = useState<Placement>(\"bottom-start\");\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleButtonRef = useForkRef(ref, buttonRef);\n\n const {\n contextValue,\n disabled,\n getButtonProps,\n getListboxProps,\n getHiddenInputProps,\n getOptionMetadata,\n value,\n open,\n } = useSelect<OptionValue, Multiple>({\n componentName: \"HvSelect\",\n name,\n required,\n disabled: disabledProp,\n multiple,\n open: openProp,\n defaultOpen,\n value: valueProp,\n defaultValue,\n options: optionsProp,\n buttonRef: handleButtonRef,\n getSerializedValue,\n onChange,\n onOpenChange: handleOpenChange,\n });\n\n const id = useUniqueId(idProp);\n const labelId = useUniqueId(setId(idProp, \"label\"));\n const descriptionId = useUniqueId(setId(idProp, \"description\"));\n const errorMessageId = useUniqueId(setId(idProp, \"error\"));\n\n const [validationMessage] = useControlled({\n name: \"HvSelect.statusMessage\",\n controlled: statusMessage,\n default: \"Required\",\n });\n const [validationState, setValidationState] = useControlled<HvFormStatus>({\n name: \"HvSelect.status\",\n controlled: status,\n default: \"standBy\",\n });\n\n function handleOpenChange(newOpen: boolean) {\n if (!newOpen) {\n const hasValue = multiple ? (value as OptionValue[]).length > 0 : !!value;\n setValidationState(required && !hasValue ? \"invalid\" : \"valid\");\n }\n onOpenChange?.(newOpen);\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 isInvalid = validationState === \"invalid\";\n\n const actualValue = multiple\n ? (value as OptionValue[])\n .map((v) => getOptionMetadata(v))\n .filter((v): v is SelectOption<OptionValue> => v !== undefined)\n : (getOptionMetadata(value as OptionValue) ?? null);\n\n const isOpen = open && !!children;\n\n return (\n <HvFormElement\n name={name}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={validationState}\n className={cx(classes.root, className, {\n [classes.disabled]: disabled,\n [classes.readOnly]: readOnly,\n })}\n {...others}\n >\n {(label \|\| description) && (\n <div className={classes.labelContainer}>\n {label && (\n <HvLabel\n id={labelId}\n htmlFor={id}\n label={label}\n className={classes.label}\n />\n )}\n {description && (\n <HvInfoMessage id={descriptionId} className={classes.description}>\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvDropdownButton\n id={id}\n open={isOpen}\n disabled={disabled}\n readOnly={readOnly}\n className={cx(classes.select, {\n [classes.invalid]: validationState === \"invalid\",\n })}\n placement={placement}\n size={size}\n variant={variant}\n aria-label={ariaLabel}\n aria-labelledby={mergeIds(ariaLabelledBy, { [labelId]: label })}\n aria-invalid={isInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={mergeIds(ariaDescribedBy, {\n [descriptionId]: description,\n })}\n {...getButtonProps()}\n >\n {defaultRenderValue(actualValue) ?? placeholder}\n </HvDropdownButton>\n <Popper\n role=\"none\"\n open={isOpen}\n keepMounted\n disablePortal={!enablePortal}\n container={enablePortal ? getContainerElement(rootId) : undefined}\n anchorEl={buttonRef.current}\n className={classes.popper}\n placement={placement}\n modifiers={[\n {\n enabled: true,\n phase: \"main\",\n fn: ({ state }) => setPlacement(state.placement),\n },\n ]}\n >\n <HvPanel\n style={{\n width: variableWidth\n ? \"auto\"\n : (buttonRef.current?.clientWidth \|\| 0) + 2,\n }}\n className={cx(classes.panel, className, {\n [classes.panelOpenedUp]: placement.includes(\"top\"),\n [classes.panelOpenedDown]: placement.includes(\"bottom\"),\n })}\n >\n <SelectProvider value={contextValue}>\n <HvListContainer condensed selectable {...getListboxProps()}>\n {children}\n </HvListContainer>\n </SelectProvider>\n </HvPanel>\n </Popper>\n <input\n {...getHiddenInputProps()}\n autoComplete={autoComplete}\n {...inputProps}\n />\n {canShowError && (\n <HvWarningText\n id={errorMessageId}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n});\n"],"names":["HvSelect"],"mappings":"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"}

package/dist/esm/Select/Select.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvSelect", {
   root: {
     position: "relative",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.styles.js","sources":["../../../src/Select/Select.styles.ts"],"sourcesContent":["import { ~~theme~~ } from \"@hitachivantara/uikit-~~styles~~\";\n\nimport { ~~createClasses~~ } from \"~~../utils~~/~~classes~~\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelect\", {\n root: {\n position: \"relative\",\n \"&$disabled,&$readOnly\": {\n pointerEvents: \"none\",\n },\n },\n disabled: {},\n readOnly: {},\n invalid: {\n border: `1px solid ${theme.colors.negative}`,\n },\n labelContainer: {\n display: \"flex\",\n alignItems: \"flex-start\",\n },\n label: {\n display: \"block\",\n paddingBottom: 6,\n },\n description: {},\n select: {},\n popper: {\n zIndex: theme.zIndices.popover,\n },\n panel: {\n border: `1px solid ${theme.colors.secondary}`,\n marginTop: -1,\n marginBottom: -1,\n },\n panelOpenedUp: {\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n },\n panelOpenedDown: {\n borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n },\n error: {},\n});\n"],"names":[],"mappings":";;~~AAIO~~,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,yBAAyB;AAAA,MACvB,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS;AAAA,IACP,QAAQ,aAAa,MAAM,OAAO,QAAQ;AAAA,EAC5C;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,aAAa,CAAC;AAAA,EACd,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA,IACN,QAAQ,MAAM,SAAS;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,IACL,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC3C,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACb,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,iBAAiB;AAAA,IACf,cAAc,OAAO,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC3D;AAAA,EACA,OAAO,CAAC;AACV,CAAC;"}
1	+ {"version":3,"file":"Select.styles.js","sources":["../../../src/Select/Select.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelect\", {\n root: {\n position: \"relative\",\n \"&$disabled,&$readOnly\": {\n pointerEvents: \"none\",\n },\n },\n disabled: {},\n readOnly: {},\n invalid: {\n border: `1px solid ${theme.colors.negative}`,\n },\n labelContainer: {\n display: \"flex\",\n alignItems: \"flex-start\",\n },\n label: {\n display: \"block\",\n paddingBottom: 6,\n },\n description: {},\n select: {},\n popper: {\n zIndex: theme.zIndices.popover,\n },\n panel: {\n border: `1px solid ${theme.colors.secondary}`,\n marginTop: -1,\n marginBottom: -1,\n },\n panelOpenedUp: {\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n },\n panelOpenedDown: {\n borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n },\n error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,yBAAyB;AAAA,MACvB,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS;AAAA,IACP,QAAQ,aAAa,MAAM,OAAO,QAAQ;AAAA,EAC5C;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,aAAa,CAAC;AAAA,EACd,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA,IACN,QAAQ,MAAM,SAAS;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,IACL,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC3C,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACb,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,iBAAiB;AAAA,IACf,cAAc,OAAO,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC3D;AAAA,EACA,OAAO,CAAC;AACV,CAAC;"}

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

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo, Children, useRef, useEffect, useCallback, cloneElement } from "react";
 import { useForkRef } from "@mui/material/utils";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
-import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { isKey } from "../utils/keyboardUtils.js";
 import { multiSelectionEventHandler } from "../utils/multiSelectionEventHandler.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionList.js","sources":["../../../src/SelectionList/SelectionList.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { HvFormElement, HvFormStatus } from \"../Forms/FormElement\";\nimport { HvInfoMessage } from \"../Forms/InfoMessage\";\nimport { HvLabel } from \"../Forms/Label\";\nimport { HvWarningText } from \"../Forms/WarningText\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { multiSelectionEventHandler } from \"../utils/multiSelectionEventHandler\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./SelectionList.styles\";\n\nexport { staticClasses as selectionListClasses };\n\nexport type HvSelectionListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectionListProps\n extends HvBaseProps<HTMLUListElement, \"onChange\"> {\n /** The form element name. /\n name?: string;\n /\n The value of the form element. It must be represented in the child list items.\n \n Can either be a single value (when multiple = false) or an\n * array of values (when multiple = true).\n \n When defined the selection list state becomes controlled.\n /\n value?: any \| any[];\n /* When uncontrolled, defines the initial value. /\n defaultValue?: any \| 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 provided instead.\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. If `true` the state is propagated to the children list items. /\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 the state.\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 /* Indicates that the user may select more than one item from the current selectable list items. /\n multiple?: boolean;\n /* If `true`, selection can be toggled when single selection. /\n singleSelectionToggle?: boolean;\n /* Indicates whether the list orientation is horizontal or vertical. Defaults to vertical. /\n orientation?: \"vertical\" \| \"horizontal\";\n /* The callback fired when the value changes. /\n onChange?: (event: React.MouseEvent, value: any) => void;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvSelectionListClasses;\n}\n\nconst getValueFromSelectedChildren = (\n children: React.ReactNode,\n multiple: boolean,\n) => {\n const selectedValues = Children.toArray(children)\n .map((child: any) => {\n const childIsControlled = child?.props?.selected !== undefined;\n const childIsSelected =\n child && childIsControlled\n ? child.props?.selected\n : child.props?.defaultSelected;\n\n return childIsSelected ? child?.props.value : undefined;\n })\n .filter((v) => v !== undefined);\n\n return multiple ? selectedValues : selectedValues?.[0];\n};\n\n/\n Allows the user to select one or more items from a list of choices.\n \n Although it supports multi-selection, DS recommends the use of a selection list\n * when it’s clear that the user can only select just one option from the range provided.\n */\nexport const HvSelectionList = forwardRef<\n HTMLUListElement,\n HvSelectionListProps\n>((props, ref) => {\n const {\n id,\n classes: classesProp,\n className,\n children,\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 status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n orientation = \"vertical\",\n multiple = false,\n singleSelectionToggle = false,\n ...others\n } = useDefaultProps(\"HvSelectionList\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [value, setValue] = useControlled(\n valueProp,\n defaultValue !== undefined\n ? defaultValue\n : // when uncontrolled and no default value is given,\n // extract the initial selected values from the children own state\n () => getValueFromSelectedChildren(children, multiple),\n );\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [allValues, selectedState] = useMemo(() => {\n const childValues: any[] = [];\n const childSelectedState: boolean[] = [];\n\n Children.toArray(children).forEach((child: any, i: number) => {\n const childValue = child?.props?.value;\n const childIsSelected = multiple\n ? value.indexOf(childValue) !== -1\n : value === childValue;\n\n childValues[i] = childValue;\n childSelectedState[i] = childIsSelected;\n });\n\n return [childValues, childSelectedState];\n }, [children, multiple, value]);\n\n const selectionAnchor = useRef(undefined);\n\n const listRef = useRef<any>(null);\n const listForkedRef = useForkRef(ref, listRef);\n\n useEffect(() => {\n const handleMeta = (event: KeyboardEvent) => {\n const tempArray: any[] = [];\n if (\n (isKey(event, \"ArrowUp\") &&\n event.shiftKey &&\n listRef.current.contains(event.target)) \|\|\n (isKey(event, \"ArrowDown\") &&\n event.shiftKey &&\n listRef.current.contains(event.target))\n ) {\n selectedState.forEach((isSelected, i) => {\n if (i === (event.target as any).value - 1) {\n if (!isSelected) {\n tempArray.push(allValues[i]);\n }\n } else if (isSelected) {\n tempArray.push(allValues[i]);\n }\n });\n setValue(tempArray);\n }\n };\n window.addEventListener(\"keyup\", handleMeta);\n\n return () => {\n window.removeEventListener(\"keyup\", handleMeta);\n };\n }, [allValues, selectedState, setValue]);\n\n const onChildChangeInterceptor = useCallback(\n (\n index: number,\n childOnClick: (e: React.MouseEvent) => void,\n evt: React.MouseEvent,\n ) => {\n childOnClick?.(evt);\n\n if (!readOnly && !disabled) {\n let newValue: any;\n if (multiple) {\n newValue = multiSelectionEventHandler(\n evt,\n index,\n selectionAnchor,\n allValues,\n selectedState,\n undefined,\n );\n } else {\n newValue =\n singleSelectionToggle && selectedState[index]\n ? null\n : allValues[index];\n }\n\n onChange?.(evt, newValue);\n\n setValue(() => {\n // This will only run if uncontrolled\n\n if (required && newValue.length === 0) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newValue;\n });\n }\n },\n [\n allValues,\n disabled,\n multiple,\n onChange,\n readOnly,\n required,\n selectedState,\n setValidationState,\n setValue,\n singleSelectionToggle,\n selectionAnchor,\n ],\n );\n\n const modifiedChildren = useMemo(() => {\n return Children.map(children, (child: any, i: number) => {\n const childIsSelected = selectedState[i];\n\n return cloneElement(child, {\n role: \"option\",\n selected: childIsSelected,\n onClick: (evt) =>\n onChildChangeInterceptor(i, child?.props?.onClick, evt),\n disabled: disabled \|\| child?.props?.disabled,\n });\n });\n }, [children, disabled, onChildChangeInterceptor, selectedState]);\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 errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n\n const listId = (label && setId(elementId, \"listbox\")) \|\| \"\";\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 label={label}\n className={classes.label}\n />\n )}\n {description && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n\n <HvListContainer\n id={listId}\n interactive\n condensed\n role=\"listbox\"\n aria-multiselectable={multiple \|\| undefined}\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-invalid={validationState === \"invalid\" ? true : undefined}\n aria-errormessage={\n validationState === \"invalid\" ? errorMessageId : undefined\n }\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n className={cx(classes.listbox, {\n [classes.vertical]: orientation === \"vertical\",\n [classes.horizontal]: orientation === \"horizontal\",\n [classes.invalid]: validationState === \"invalid\",\n })}\n ref={listForkedRef}\n {...others}\n >\n {modifiedChildren}\n </HvListContainer>\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":[],"mappings":"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"}
1	+ {"version":3,"file":"SelectionList.js","sources":["../../../src/SelectionList/SelectionList.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFormElement, HvFormStatus } from \"../Forms/FormElement\";\nimport { HvInfoMessage } from \"../Forms/InfoMessage\";\nimport { HvLabel } from \"../Forms/Label\";\nimport { HvWarningText } from \"../Forms/WarningText\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { multiSelectionEventHandler } from \"../utils/multiSelectionEventHandler\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./SelectionList.styles\";\n\nexport { staticClasses as selectionListClasses };\n\nexport type HvSelectionListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectionListProps\n extends HvBaseProps<HTMLUListElement, \"onChange\"> {\n /** The form element name. /\n name?: string;\n /\n The value of the form element. It must be represented in the child list items.\n \n Can either be a single value (when multiple = false) or an\n * array of values (when multiple = true).\n \n When defined the selection list state becomes controlled.\n /\n value?: any \| any[];\n /* When uncontrolled, defines the initial value. /\n defaultValue?: any \| 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 provided instead.\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. If `true` the state is propagated to the children list items. /\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 the state.\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 /* Indicates that the user may select more than one item from the current selectable list items. /\n multiple?: boolean;\n /* If `true`, selection can be toggled when single selection. /\n singleSelectionToggle?: boolean;\n /* Indicates whether the list orientation is horizontal or vertical. Defaults to vertical. /\n orientation?: \"vertical\" \| \"horizontal\";\n /* The callback fired when the value changes. /\n onChange?: (event: React.MouseEvent, value: any) => void;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvSelectionListClasses;\n}\n\nconst getValueFromSelectedChildren = (\n children: React.ReactNode,\n multiple: boolean,\n) => {\n const selectedValues = Children.toArray(children)\n .map((child: any) => {\n const childIsControlled = child?.props?.selected !== undefined;\n const childIsSelected =\n child && childIsControlled\n ? child.props?.selected\n : child.props?.defaultSelected;\n\n return childIsSelected ? child?.props.value : undefined;\n })\n .filter((v) => v !== undefined);\n\n return multiple ? selectedValues : selectedValues?.[0];\n};\n\n/\n Allows the user to select one or more items from a list of choices.\n \n Although it supports multi-selection, DS recommends the use of a selection list\n * when it’s clear that the user can only select just one option from the range provided.\n */\nexport const HvSelectionList = forwardRef<\n HTMLUListElement,\n HvSelectionListProps\n>((props, ref) => {\n const {\n id,\n classes: classesProp,\n className,\n children,\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 status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n orientation = \"vertical\",\n multiple = false,\n singleSelectionToggle = false,\n ...others\n } = useDefaultProps(\"HvSelectionList\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const elementId = useUniqueId(id);\n\n const [value, setValue] = useControlled(\n valueProp,\n defaultValue !== undefined\n ? defaultValue\n : // when uncontrolled and no default value is given,\n // extract the initial selected values from the children own state\n () => getValueFromSelectedChildren(children, multiple),\n );\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [allValues, selectedState] = useMemo(() => {\n const childValues: any[] = [];\n const childSelectedState: boolean[] = [];\n\n Children.toArray(children).forEach((child: any, i: number) => {\n const childValue = child?.props?.value;\n const childIsSelected = multiple\n ? value.indexOf(childValue) !== -1\n : value === childValue;\n\n childValues[i] = childValue;\n childSelectedState[i] = childIsSelected;\n });\n\n return [childValues, childSelectedState];\n }, [children, multiple, value]);\n\n const selectionAnchor = useRef(undefined);\n\n const listRef = useRef<any>(null);\n const listForkedRef = useForkRef(ref, listRef);\n\n useEffect(() => {\n const handleMeta = (event: KeyboardEvent) => {\n const tempArray: any[] = [];\n if (\n (isKey(event, \"ArrowUp\") &&\n event.shiftKey &&\n listRef.current.contains(event.target)) \|\|\n (isKey(event, \"ArrowDown\") &&\n event.shiftKey &&\n listRef.current.contains(event.target))\n ) {\n selectedState.forEach((isSelected, i) => {\n if (i === (event.target as any).value - 1) {\n if (!isSelected) {\n tempArray.push(allValues[i]);\n }\n } else if (isSelected) {\n tempArray.push(allValues[i]);\n }\n });\n setValue(tempArray);\n }\n };\n window.addEventListener(\"keyup\", handleMeta);\n\n return () => {\n window.removeEventListener(\"keyup\", handleMeta);\n };\n }, [allValues, selectedState, setValue]);\n\n const onChildChangeInterceptor = useCallback(\n (\n index: number,\n childOnClick: (e: React.MouseEvent) => void,\n evt: React.MouseEvent,\n ) => {\n childOnClick?.(evt);\n\n if (!readOnly && !disabled) {\n let newValue: any;\n if (multiple) {\n newValue = multiSelectionEventHandler(\n evt,\n index,\n selectionAnchor,\n allValues,\n selectedState,\n undefined,\n );\n } else {\n newValue =\n singleSelectionToggle && selectedState[index]\n ? null\n : allValues[index];\n }\n\n onChange?.(evt, newValue);\n\n setValue(() => {\n // This will only run if uncontrolled\n\n if (required && newValue.length === 0) {\n setValidationState(\"invalid\");\n } else {\n setValidationState(\"valid\");\n }\n\n return newValue;\n });\n }\n },\n [\n allValues,\n disabled,\n multiple,\n onChange,\n readOnly,\n required,\n selectedState,\n setValidationState,\n setValue,\n singleSelectionToggle,\n selectionAnchor,\n ],\n );\n\n const modifiedChildren = useMemo(() => {\n return Children.map(children, (child: any, i: number) => {\n const childIsSelected = selectedState[i];\n\n return cloneElement(child, {\n role: \"option\",\n selected: childIsSelected,\n onClick: (evt) =>\n onChildChangeInterceptor(i, child?.props?.onClick, evt),\n disabled: disabled \|\| child?.props?.disabled,\n });\n });\n }, [children, disabled, onChildChangeInterceptor, selectedState]);\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 errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n\n const listId = (label && setId(elementId, \"listbox\")) \|\| \"\";\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 label={label}\n className={classes.label}\n />\n )}\n {description && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n\n <HvListContainer\n id={listId}\n interactive\n condensed\n role=\"listbox\"\n aria-multiselectable={multiple \|\| undefined}\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-invalid={validationState === \"invalid\" ? true : undefined}\n aria-errormessage={\n validationState === \"invalid\" ? errorMessageId : undefined\n }\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n className={cx(classes.listbox, {\n [classes.vertical]: orientation === \"vertical\",\n [classes.horizontal]: orientation === \"horizontal\",\n [classes.invalid]: validationState === \"invalid\",\n })}\n ref={listForkedRef}\n {...others}\n >\n {modifiedChildren}\n </HvListContainer>\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":[],"mappings":"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"}

package/dist/esm/SelectionList/SelectionList.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvSelectionList", {
   root: { display: "inline-block", padding: 0, margin: 0 },
   error: { width: "100%", float: "left", clear: "both" },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionList.styles.js","sources":["../../../src/SelectionList/SelectionList.styles.tsx"],"sourcesContent":["import { ~~theme~~ } from \"@hitachivantara/uikit-~~styles~~\";\n\nimport { ~~createClasses~~ } from \"~~../utils~~/~~classes~~\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelectionList\", {\n root: { display: \"inline-block\", padding: 0, margin: 0 },\n error: { width: \"100%\", float: \"left\", clear: \"both\" },\n listbox: {\n display: \"flex\",\n float: \"left\",\n clear: \"both\",\n width: \"100%\",\n paddingBottom: theme.space.xs,\n },\n label: { marginBottom: theme.space.xs, float: \"left\" },\n description: { float: \"left\" },\n horizontal: {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n marginLeft: -theme.space.sm,\n \"&>\": {\n marginLeft: theme.space.sm,\n },\n },\n vertical: {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>\": {\n zIndex: 0,\n },\n \"&>*:focus-within\": {\n zIndex: 1,\n },\n },\n invalid: { borderBottom: `1px solid ${theme.colors.negative}` },\n});\n"],"names":[],"mappings":";;~~AAIO~~,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM,EAAE,SAAS,gBAAgB,SAAS,GAAG,QAAQ,EAAE;AAAA,EACvD,OAAO,EAAE,OAAO,QAAQ,OAAO,QAAQ,OAAO,OAAO;AAAA,EACrD,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,EAC7B;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,IAAI,OAAO,OAAO;AAAA,EACrD,aAAa,EAAE,OAAO,OAAO;AAAA,EAC7B,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,YAAY,CAAC,MAAM,MAAM;AAAA,IACzB,OAAO;AAAA,MACL,YAAY,MAAM,MAAM;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,SAAS,EAAE,cAAc,aAAa,MAAM,OAAO,QAAQ,GAAG;AAChE,CAAC;"}
1	+ {"version":3,"file":"SelectionList.styles.js","sources":["../../../src/SelectionList/SelectionList.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelectionList\", {\n root: { display: \"inline-block\", padding: 0, margin: 0 },\n error: { width: \"100%\", float: \"left\", clear: \"both\" },\n listbox: {\n display: \"flex\",\n float: \"left\",\n clear: \"both\",\n width: \"100%\",\n paddingBottom: theme.space.xs,\n },\n label: { marginBottom: theme.space.xs, float: \"left\" },\n description: { float: \"left\" },\n horizontal: {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n marginLeft: -theme.space.sm,\n \"&>\": {\n marginLeft: theme.space.sm,\n },\n },\n vertical: {\n flexDirection: \"column\",\n\n // Prevent the focus ring to be hidden by sibling hover background\n \"&>\": {\n zIndex: 0,\n },\n \"&>*:focus-within\": {\n zIndex: 1,\n },\n },\n invalid: { borderBottom: `1px solid ${theme.colors.negative}` },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM,EAAE,SAAS,gBAAgB,SAAS,GAAG,QAAQ,EAAE;AAAA,EACvD,OAAO,EAAE,OAAO,QAAQ,OAAO,QAAQ,OAAO,OAAO;AAAA,EACrD,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,EAC7B;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,IAAI,OAAO,OAAO;AAAA,EACrD,aAAa,EAAE,OAAO,OAAO;AAAA,EAC7B,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,YAAY,CAAC,MAAM,MAAM;AAAA,IACzB,OAAO;AAAA,MACL,YAAY,MAAM,MAAM;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,SAAS,EAAE,cAAc,aAAa,MAAM,OAAO,QAAQ,GAAG;AAChE,CAAC;"}

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses, getContainerStyle } from "./SimpleGrid.styles.js";
 import { staticClasses } from "./SimpleGrid.styles.js";
 const HvSimpleGrid = (props) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SimpleGrid.js","sources":["../../../src/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { useDefaultProps } from \"~~../hooks~~/~~useDefaultProps~~\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ~~ExtractNames } from~~ \~~"../utils/classes\";\nimport {\~~n getContainerStyle,\n staticClasses,\n useClasses,\n} from \"./SimpleGrid.styles\";\nimport { Breakpoint, Spacing } from \"./types\";\n\nexport { staticClasses as simpleGridClasses };\n\nexport type HvSimpleGridClasses = ExtractNames<typeof useClasses>;\n\n/** Grid component that enables you to create columns of equal width and define your own breakpoints and responsive behavior. /\nexport interface HvSimpleGridProps extends HvBaseProps {\n /\n Spacing with pre-defined values according the values defined in the theme\n /\n spacing?: Spacing;\n /\n Provide an array to define responsive behavior:\n \n maxWidth or minWidth: max-width or min-width at which media query will work\n \n cols: number of columns per row at given max-width\n \n spacing: optional spacing at given max-width, if not provided spacing from component prop will be used instead\n /\n breakpoints?: Breakpoint[];\n /\n Number of how many columns the content will be displayed\n /\n cols?: number;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvSimpleGridClasses;\n}\n\nexport const HvSimpleGrid = (props: HvSimpleGridProps) => {\n const {\n children,\n breakpoints,\n spacing = \"sm\",\n cols,\n className,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvSimpleGrid\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const containerStyle = getContainerStyle({ breakpoints, spacing, cols });\n\n return (\n <div\n className={cx(css(containerStyle), classes.root, className)}\n {...others}\n >\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;~~AAsCa~~,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,iBAAiB,kBAAkB,EAAE,aAAa,SAAS,MAAM;AAGrE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,IAAI,cAAc,GAAG,QAAQ,MAAM,SAAS;AAAA,MACzD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1	+ {"version":3,"file":"SimpleGrid.js","sources":["../../../src/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport {\n getContainerStyle,\n staticClasses,\n useClasses,\n} from \"./SimpleGrid.styles\";\nimport { Breakpoint, Spacing } from \"./types\";\n\nexport { staticClasses as simpleGridClasses };\n\nexport type HvSimpleGridClasses = ExtractNames<typeof useClasses>;\n\n/** Grid component that enables you to create columns of equal width and define your own breakpoints and responsive behavior. /\nexport interface HvSimpleGridProps extends HvBaseProps {\n /\n Spacing with pre-defined values according the values defined in the theme\n /\n spacing?: Spacing;\n /\n Provide an array to define responsive behavior:\n \n maxWidth or minWidth: max-width or min-width at which media query will work\n \n cols: number of columns per row at given max-width\n \n spacing: optional spacing at given max-width, if not provided spacing from component prop will be used instead\n /\n breakpoints?: Breakpoint[];\n /\n Number of how many columns the content will be displayed\n /\n cols?: number;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvSimpleGridClasses;\n}\n\nexport const HvSimpleGrid = (props: HvSimpleGridProps) => {\n const {\n children,\n breakpoints,\n spacing = \"sm\",\n cols,\n className,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvSimpleGrid\", props);\n\n const { classes, cx, css } = useClasses(classesProp);\n\n const containerStyle = getContainerStyle({ breakpoints, spacing, cols });\n\n return (\n <div\n className={cx(css(containerStyle), classes.root, className)}\n {...others}\n >\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AAyCa,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,iBAAiB,kBAAkB,EAAE,aAAa,SAAS,MAAM;AAGrE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,IAAI,cAAc,GAAG,QAAQ,MAAM,SAAS;AAAA,MACzD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/SimpleGrid/SimpleGrid.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvSimpleGrid", {
   root: {}
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SimpleGrid.styles.js","sources":["../../../src/SimpleGrid/SimpleGrid.styles.tsx"],"sourcesContent":["import type { CSSObject } from \"@emotion/serialize\";\nimport { ~~theme~~ } from \"@hitachivantara/uikit-~~styles~~\";\n\nimport { ~~createClasses~~ } from \"~~../utils~~/~~classes~~\";\nimport { Breakpoint, Spacing } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSimpleGrid\", {\n root: {},\n});\n\nfunction size(props: { size: any; sizes: any }) {\n if (typeof props.size === \"number\") {\n return props.size;\n }\n\n return props.sizes[props.size] \|\| props.size \|\| props.sizes.md;\n}\n\nfunction getSortedBreakpoints(breakpoints: Breakpoint[]) {\n if (breakpoints.length === 0) {\n return breakpoints;\n }\n\n const property = \"maxWidth\" in breakpoints[0] ? \"maxWidth\" : \"minWidth\";\n const sorted = [...breakpoints].sort(\n (a, b) =>\n size({ size: b[property], sizes: theme.breakpoints }) -\n size({ size: a[property], sizes: theme.breakpoints }),\n );\n\n return property === \"minWidth\" ? sorted.reverse() : sorted;\n}\n\nexport const getContainerStyle = ({\n breakpoints,\n spacing,\n cols,\n}: {\n breakpoints?: Breakpoint[];\n spacing: Spacing;\n cols?: number;\n}) => {\n return {\n boxSizing: \"border-box\",\n display: \"grid\",\n gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n gap: theme.space[spacing],\n ...(breakpoints &&\n getSortedBreakpoints(breakpoints).reduce<\n Record<string, React.CSSProperties>\n >((acc, breakpoint) => {\n const property = \"maxWidth\" in breakpoint ? \"max-width\" : \"min-width\";\n const breakpointSize = size({\n size:\n property === \"max-width\"\n ? breakpoint.maxWidth\n : breakpoint.minWidth,\n sizes: theme.breakpoints,\n });\n\n acc[\n `@media (${property}: ${\n breakpointSize + (property === \"max-width\" ? 0 : 1)\n }px)`\n ] = {\n gridTemplateColumns: `repeat(${breakpoint.cols}, minmax(0, 1fr))`,\n gap: theme.space[spacing],\n };\n\n return acc;\n }, {})),\n } satisfies CSSObject;\n};\n"],"names":[],"mappings":";;AAMO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM,CAAC;AACT,CAAC;AAED,SAAS,KAAK,OAAkC;AAC1C,MAAA,OAAO,MAAM,SAAS,UAAU;AAClC,WAAO,MAAM;AAAA,EACf;AAEO,SAAA,MAAM,MAAM,MAAM,IAAI,KAAK,MAAM,QAAQ,MAAM,MAAM;AAC9D;AAEA,SAAS,qBAAqB,aAA2B;AACnD,MAAA,YAAY,WAAW,GAAG;AACrB,WAAA;AAAA,EACT;AAEA,QAAM,WAAW,cAAc,YAAY,CAAC,IAAI,aAAa;AAC7D,QAAM,SAAS,CAAC,GAAG,WAAW,EAAE;AAAA,IAC9B,CAAC,GAAG,MACF,KAAK,EAAE,MAAM,EAAE,QAAQ,GAAG,OAAO,MAAM,aAAa,IACpD,KAAK,EAAE,MAAM,EAAE,QAAQ,GAAG,OAAO,MAAM,aAAa;AAAA,EAAA;AAGxD,SAAO,aAAa,aAAa,OAAO,QAAA,IAAY;AACtD;AAEO,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACG,SAAA;AAAA,IACL,WAAW;AAAA,IACX,SAAS;AAAA,IACT,qBAAqB,UAAU,IAAI;AAAA,IACnC,KAAK,MAAM,MAAM,OAAO;AAAA,IACxB,GAAI,eACF,qBAAqB,WAAW,EAAE,OAEhC,CAAC,KAAK,eAAe;AACf,YAAA,WAAW,cAAc,aAAa,cAAc;AAC1D,YAAM,iBAAiB,KAAK;AAAA,QAC1B,MACE,aAAa,cACT,WAAW,WACX,WAAW;AAAA,QACjB,OAAO,MAAM;AAAA,MAAA,CACd;AAGC,UAAA,WAAW,QAAQ,KACjB,kBAAkB,aAAa,cAAc,IAAI,EACnD,KACF,IAAI;AAAA,QACF,qBAAqB,UAAU,WAAW,IAAI;AAAA,QAC9C,KAAK,MAAM,MAAM,OAAO;AAAA,MAAA;AAGnB,aAAA;AAAA,IACT,GAAG,EAAE;AAAA,EAAA;AAEX;"}
1	+ {"version":3,"file":"SimpleGrid.styles.js","sources":["../../../src/SimpleGrid/SimpleGrid.styles.tsx"],"sourcesContent":["import type { CSSObject } from \"@emotion/serialize\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { Breakpoint, Spacing } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSimpleGrid\", {\n root: {},\n});\n\nfunction size(props: { size: any; sizes: any }) {\n if (typeof props.size === \"number\") {\n return props.size;\n }\n\n return props.sizes[props.size] \|\| props.size \|\| props.sizes.md;\n}\n\nfunction getSortedBreakpoints(breakpoints: Breakpoint[]) {\n if (breakpoints.length === 0) {\n return breakpoints;\n }\n\n const property = \"maxWidth\" in breakpoints[0] ? \"maxWidth\" : \"minWidth\";\n const sorted = [...breakpoints].sort(\n (a, b) =>\n size({ size: b[property], sizes: theme.breakpoints }) -\n size({ size: a[property], sizes: theme.breakpoints }),\n );\n\n return property === \"minWidth\" ? sorted.reverse() : sorted;\n}\n\nexport const getContainerStyle = ({\n breakpoints,\n spacing,\n cols,\n}: {\n breakpoints?: Breakpoint[];\n spacing: Spacing;\n cols?: number;\n}) => {\n return {\n boxSizing: \"border-box\",\n display: \"grid\",\n gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n gap: theme.space[spacing],\n ...(breakpoints &&\n getSortedBreakpoints(breakpoints).reduce<\n Record<string, React.CSSProperties>\n >((acc, breakpoint) => {\n const property = \"maxWidth\" in breakpoint ? \"max-width\" : \"min-width\";\n const breakpointSize = size({\n size:\n property === \"max-width\"\n ? breakpoint.maxWidth\n : breakpoint.minWidth,\n sizes: theme.breakpoints,\n });\n\n acc[\n `@media (${property}: ${\n breakpointSize + (property === \"max-width\" ? 0 : 1)\n }px)`\n ] = {\n gridTemplateColumns: `repeat(${breakpoint.cols}, minmax(0, 1fr))`,\n gap: theme.space[spacing],\n };\n\n return acc;\n }, {})),\n } satisfies CSSObject;\n};\n"],"names":[],"mappings":";;AAMO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM,CAAC;AACT,CAAC;AAED,SAAS,KAAK,OAAkC;AAC1C,MAAA,OAAO,MAAM,SAAS,UAAU;AAClC,WAAO,MAAM;AAAA,EACf;AAEO,SAAA,MAAM,MAAM,MAAM,IAAI,KAAK,MAAM,QAAQ,MAAM,MAAM;AAC9D;AAEA,SAAS,qBAAqB,aAA2B;AACnD,MAAA,YAAY,WAAW,GAAG;AACrB,WAAA;AAAA,EACT;AAEA,QAAM,WAAW,cAAc,YAAY,CAAC,IAAI,aAAa;AAC7D,QAAM,SAAS,CAAC,GAAG,WAAW,EAAE;AAAA,IAC9B,CAAC,GAAG,MACF,KAAK,EAAE,MAAM,EAAE,QAAQ,GAAG,OAAO,MAAM,aAAa,IACpD,KAAK,EAAE,MAAM,EAAE,QAAQ,GAAG,OAAO,MAAM,aAAa;AAAA,EAAA;AAGxD,SAAO,aAAa,aAAa,OAAO,QAAA,IAAY;AACtD;AAEO,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACG,SAAA;AAAA,IACL,WAAW;AAAA,IACX,SAAS;AAAA,IACT,qBAAqB,UAAU,IAAI;AAAA,IACnC,KAAK,MAAM,MAAM,OAAO;AAAA,IACxB,GAAI,eACF,qBAAqB,WAAW,EAAE,OAEhC,CAAC,KAAK,eAAe;AACf,YAAA,WAAW,cAAc,aAAa,cAAc;AAC1D,YAAM,iBAAiB,KAAK;AAAA,QAC1B,MACE,aAAa,cACT,WAAW,WACX,WAAW;AAAA,QACjB,OAAO,MAAM;AAAA,MAAA,CACd;AAGC,UAAA,WAAW,QAAQ,KACjB,kBAAkB,aAAa,cAAc,IAAI,EACnD,KACF,IAAI;AAAA,QACF,qBAAqB,UAAU,WAAW,IAAI;AAAA,QAC9C,KAAK,MAAM,MAAM,OAAO;AAAA,MAAA;AAGnB,aAAA;AAAA,IACT,GAAG,EAAE;AAAA,EAAA;AAEX;"}

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Skeleton.styles.js";
 import { staticClasses } from "./Skeleton.styles.js";
 const HvSkeleton = (props) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Skeleton.js","sources":["../../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import { useDefaultProps } from \"~~../hooks~~/~~useDefaultProps~~\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ~~ExtractNames } from \"../utils/classes\";\nimport {~~ staticClasses, useClasses } from \"./Skeleton.styles\";\n\nexport { staticClasses as skeletonClasses };\n\nexport type HvSkeletonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSkeletonProps extends HvBaseProps {\n /** Whether the skeleton element is hidden or not. /\n hidden?: boolean;\n /* The type of skeleton element. @default \"text\" /\n variant?: \"circle\" \| \"square\" \| \"text\";\n /* The animation the skeleton element will display. @default \"pulse\" /\n animation?: \"pulse\" \| \"wave\";\n /* The width of the skeleton element. /\n width?: React.CSSProperties[\"width\"];\n /* The height of the skeleton element. /\n height?: React.CSSProperties[\"height\"];\n /* The url for a placeholder image to use on the skeleton element. /\n backgroundImage?: string;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvSkeletonClasses;\n}\n\n/\n The `HvSkeleton` component is used to create a placeholder element that represents the shape and size of the content that will be loaded.\n */\nexport const HvSkeleton = (props: HvSkeletonProps) => {\n const {\n classes: classesProp,\n className,\n children,\n hidden = false,\n variant = \"text\",\n animation = \"pulse\",\n backgroundImage,\n width,\n height,\n style,\n ...others\n } = useDefaultProps(\"HvSkeleton\", props);\n const { classes, cx } = useClasses(classesProp);\n\n if (hidden) return <div className={classes.content}>{children}</div>;\n\n return (\n <div\n className={cx(\n classes.root,\n classes[variant],\n animation && classes[animation],\n className,\n )}\n style={{\n width,\n height,\n ...(backgroundImage && {\n backgroundImage: `url(${backgroundImage})`,\n backgroundSize: \"contain\",\n backgroundPosition: \"center\",\n backgroundRepeat: \"no-repeat\",\n }),\n ...style,\n }}\n {...others}\n >\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;~~AA6Ba~~,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,MAAI,OAAe,QAAA,oBAAC,SAAI,WAAW,QAAQ,SAAU,SAAS,CAAA;AAG5D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf,aAAa,QAAQ,SAAS;AAAA,QAC9B;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,GAAI,mBAAmB;AAAA,UACrB,iBAAiB,OAAO,eAAe;AAAA,UACvC,gBAAgB;AAAA,UAChB,oBAAoB;AAAA,UACpB,kBAAkB;AAAA,QACpB;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1	+ {"version":3,"file":"Skeleton.js","sources":["../../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Skeleton.styles\";\n\nexport { staticClasses as skeletonClasses };\n\nexport type HvSkeletonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSkeletonProps extends HvBaseProps {\n /** Whether the skeleton element is hidden or not. /\n hidden?: boolean;\n /* The type of skeleton element. @default \"text\" /\n variant?: \"circle\" \| \"square\" \| \"text\";\n /* The animation the skeleton element will display. @default \"pulse\" /\n animation?: \"pulse\" \| \"wave\";\n /* The width of the skeleton element. /\n width?: React.CSSProperties[\"width\"];\n /* The height of the skeleton element. /\n height?: React.CSSProperties[\"height\"];\n /* The url for a placeholder image to use on the skeleton element. /\n backgroundImage?: string;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvSkeletonClasses;\n}\n\n/\n The `HvSkeleton` component is used to create a placeholder element that represents the shape and size of the content that will be loaded.\n */\nexport const HvSkeleton = (props: HvSkeletonProps) => {\n const {\n classes: classesProp,\n className,\n children,\n hidden = false,\n variant = \"text\",\n animation = \"pulse\",\n backgroundImage,\n width,\n height,\n style,\n ...others\n } = useDefaultProps(\"HvSkeleton\", props);\n const { classes, cx } = useClasses(classesProp);\n\n if (hidden) return <div className={classes.content}>{children}</div>;\n\n return (\n <div\n className={cx(\n classes.root,\n classes[variant],\n animation && classes[animation],\n className,\n )}\n style={{\n width,\n height,\n ...(backgroundImage && {\n backgroundImage: `url(${backgroundImage})`,\n backgroundSize: \"contain\",\n backgroundPosition: \"center\",\n backgroundRepeat: \"no-repeat\",\n }),\n ...style,\n }}\n {...others}\n >\n {children}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AAgCa,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,MAAI,OAAe,QAAA,oBAAC,SAAI,WAAW,QAAQ,SAAU,SAAS,CAAA;AAG5D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf,aAAa,QAAQ,SAAS;AAAA,QAC9B;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,GAAI,mBAAmB;AAAA,UACrB,iBAAiB,OAAO,eAAe;AAAA,UACvC,gBAAgB;AAAA,UAChB,oBAAoB;AAAA,UACpB,kBAAkB;AAAA,QACpB;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Skeleton/Skeleton.styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { keyframes } from "@emotion/react";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "@hitachivantara/uikit-react-shared";
 const pulse = keyframes`
   0%, 100% {
     opacity: 1;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Skeleton.styles.js","sources":["../../../src/Skeleton/Skeleton.styles.tsx"],"sourcesContent":["import { keyframes } from \"@emotion/react\";\nimport { ~~theme~~ } from \"@hitachivantara/uikit-~~styles~~\";\n\nimport { ~~createClasses~~ } from \"~~../utils~~/~~classes~~\";\n\nconst pulse = keyframes`\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n`;\n\n// Animation taken from Material UI:\n// https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Skeleton/Skeleton.js\nconst wave = keyframes`\n 0% {\n transform: translateX(-100%);\n }\n 50% {\n transform: translateX(100%);\n }\n 100% {\n transform: translateX(100%);\n }\n`;\n\nconst fadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSkeleton\", {\n root: {\n backgroundColor: theme.colors.atmo3,\n width: \"fit-content\",\n \"& > *\": {\n visibility: \"hidden\",\n },\n },\n content: {\n opacity: 0,\n animation: `${fadeIn} 0.5s ease forwards`,\n },\n circle: {\n borderRadius: theme.radii.circle,\n },\n square: {\n borderRadius: theme.radii.base,\n },\n text: {\n borderRadius: theme.radii.full,\n width: \"100%\",\n height: \"1.5em\",\n },\n pulse: {\n animation: `${pulse} 2s infinite`,\n },\n wave: {\n overflow: \"hidden\",\n position: \"relative\",\n \"&::after\": {\n animation: `${wave} 2s linear 0.5s infinite`,\n background: `linear-gradient(\n 90deg,\n transparent,\n ${theme.colors.atmo4},\n transparent\n )`,\n content: \"''\",\n position: \"absolute\",\n transform: \"translateX(-100%)\",\n inset: 0,\n },\n },\n});\n"],"names":[],"mappings":";;;~~AAKA~~,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWd,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYb,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASR,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,SAAS;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,WAAW,GAAG,MAAM;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,MAAM;AAAA,IACJ,cAAc,MAAM,MAAM;AAAA,IAC1B,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACL,WAAW,GAAG,KAAK;AAAA,EACrB;AAAA,EACA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,MACV,WAAW,GAAG,IAAI;AAAA,MAClB,YAAY;AAAA;AAAA;AAAA,cAGJ,MAAM,OAAO,KAAK;AAAA;AAAA;AAAA,MAG1B,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,IACT;AAAA,EACF;AACF,CAAC;"}
1	+ {"version":3,"file":"Skeleton.styles.js","sources":["../../../src/Skeleton/Skeleton.styles.tsx"],"sourcesContent":["import { keyframes } from \"@emotion/react\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst pulse = keyframes`\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n`;\n\n// Animation taken from Material UI:\n// https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Skeleton/Skeleton.js\nconst wave = keyframes`\n 0% {\n transform: translateX(-100%);\n }\n 50% {\n transform: translateX(100%);\n }\n 100% {\n transform: translateX(100%);\n }\n`;\n\nconst fadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSkeleton\", {\n root: {\n backgroundColor: theme.colors.atmo3,\n width: \"fit-content\",\n \"& > *\": {\n visibility: \"hidden\",\n },\n },\n content: {\n opacity: 0,\n animation: `${fadeIn} 0.5s ease forwards`,\n },\n circle: {\n borderRadius: theme.radii.circle,\n },\n square: {\n borderRadius: theme.radii.base,\n },\n text: {\n borderRadius: theme.radii.full,\n width: \"100%\",\n height: \"1.5em\",\n },\n pulse: {\n animation: `${pulse} 2s infinite`,\n },\n wave: {\n overflow: \"hidden\",\n position: \"relative\",\n \"&::after\": {\n animation: `${wave} 2s linear 0.5s infinite`,\n background: `linear-gradient(\n 90deg,\n transparent,\n ${theme.colors.atmo4},\n transparent\n )`,\n content: \"''\",\n position: \"absolute\",\n transform: \"translateX(-100%)\",\n inset: 0,\n },\n },\n});\n"],"names":[],"mappings":";;;AAIA,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWd,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYb,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASR,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,SAAS;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,WAAW,GAAG,MAAM;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,MAAM;AAAA,IACJ,cAAc,MAAM,MAAM;AAAA,IAC1B,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACL,WAAW,GAAG,KAAK;AAAA,EACrB;AAAA,EACA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,MACV,WAAW,GAAG,IAAI;AAAA,MAClB,YAAY;AAAA;AAAA;AAAA,cAGJ,MAAM,OAAO,KAAK;AAAA;AAAA;AAAA,MAG1B,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,IACT;AAAA,EACF;AACF,CAAC;"}

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

@@ -2,9 +2,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useMemo, useState, useCallback, useEffect } from "react";
 import Slider from "rc-slider";
 import Tooltip from "rc-tooltip";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import validationState from "../Forms/FormElement/validationStates.js";
 import { useControlled } from "../hooks/useControlled.js";
-import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { getElementById } from "../utils/document.js";
 import { setId } from "../utils/setId.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.js","sources":["../../../src/Slider/Slider.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport Slider, { SliderProps, SliderRef } from \"rc-slider\";\nimport Tooltip from \"rc-tooltip\";\n\nimport { HvFormElement, HvFormStatus, HvLabel, HvWarningText } from \"../Forms\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\nimport {\n calculateStepValue,\n convertStatusToArray,\n createKnobStyles,\n createMark,\n createTrackStyles,\n ensureValuesConsistency,\n generateDefaultKnobProperties,\n isSingleSlider,\n knobsPositionsToKnobsValues,\n knobsPositionToScaledValue,\n knobsValuesToKnobsPositions,\n scaledValueToKnobsPositionValue,\n statusArrayToFormStatus,\n} from \"./utils\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n extends HvBaseProps<HTMLDivElement, \"onChange\" \| \"onBlur\"> {\n /** The slider name. /\n name?: string;\n /* The label of the slider. If not provided, an aria-label or aria-labelledby must be inputted via sliderProps. /\n label?: React.ReactNode;\n /* Indicates that the slider is disabled. /\n disabled?: boolean;\n /* Indicates that the slider is not editable. /\n readOnly?: boolean;\n /* Indicates that user slider is required on the form element. /\n required?: boolean;\n /* Error message to render when the value is required. /\n requiredMessage?: string;\n /* If `true` the input that controls the slider is hidden. /\n hideInput?: boolean;\n /* Attributes applied to the slider element. /\n sliderProps?: SliderProps;\n /\n The status of the slider element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n \n When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n /\n status?: HvFormStatus \| HvFormStatus[];\n /* The error message to show when `status` is \"invalid\". /\n statusMessage?: React.ReactNode;\n /* The values array to apply to the component /\n values?: number[];\n /* The default values array to apply to the component /\n defaultValues?: (number \| undefined)[];\n /\n The object used to set the knob properties,\n * for every item in the array a new knob will be created.\n /\n knobProperties?: HvKnobProperty[];\n /* The object used to set the mark properties individually. /\n markProperties?: HvMarkProperty[];\n /\n The function executed before a change will occur in the slider.\n * @deprecated It's always better to use onChange instead\n /\n onBeforeChange?: (value: number[]) => void;\n /* The function executed while a change is occurring in the slider. /\n onChange?: (value: number[]) => void;\n /\n The function executed after a change ocurred in the slider.\n * @deprecated It's always better to use onChange instead\n /\n onAfterChange?: (value: number[]) => void;\n /* The function executed after a blur ocurred in the slider. /\n onBlur?: (\n event: React.FocusEvent,\n knobsValues: number[],\n status?: HvFormStatus \| HvFormStatus[],\n ) => void;\n /\n The separation in points between marks.\n * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n /\n markStep?: number;\n /* How many subdivisions there are in the slider. /\n divisionQuantity?: number;\n /* The value of the first point in the slider from left to right. /\n minPointValue?: number;\n /* The value of the last point in the slider from left to right. /\n maxPointValue?: number;\n /* Error message to render when the value is higher than maxPointValue or lower than minPointValue. /\n outOfRangeMessage?: string;\n /* The max number of decimals if no format function is applied /\n markDigits?: number;\n /\n A formatting function used to add format to the marks in the track,\n * the function receives the mark text\n /\n formatMark?: (label: React.ReactNode) => React.ReactNode;\n /\n A formatting function used to add format to the tooltip in the track,\n * the function receives the mark text\n /\n formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n /* If `true` the knobs can't have the same value, if `false` knobs can have the same value. /\n noOverlap?: boolean;\n /* Attributes applied to the input element. /\n inputProps?: HvInputProps[];\n /* Attributes applied to the knob element. /\n knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n /* The classes object to be applied into the root object. /\n classes?: HvSliderClasses;\n}\n\n/\n Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n /\nexport const HvSlider = forwardRef<SliderRef, HvSliderProps>((props, ref) => {\n const {\n id,\n className,\n name,\n label,\n status,\n statusMessage,\n disabled,\n classes: classesProp,\n sliderProps,\n knobProps,\n inputProps,\n requiredMessage = \"The value is required\",\n outOfRangeMessage = \"The value is out of range\",\n noOverlap = true,\n hideInput = false,\n required = false,\n readOnly = false,\n markProperties = [],\n defaultValues = [undefined],\n values: valuesProp = [],\n knobProperties: knobPropertiesProp,\n \"aria-errormessage\": ariaErrorMessage,\n maxPointValue = 100,\n minPointValue = 0,\n divisionQuantity = 100,\n markStep = 20,\n markDigits = 0,\n formatMark,\n onChange,\n onBlur,\n onBeforeChange,\n onAfterChange,\n formatTooltip,\n ...others\n } = useDefaultProps(\"HvSlider\", props);\n const { classes, cx } = useClasses(classesProp);\n\n // Miscellaneous state\n const hasLabel = label != null;\n\n // Signals that the user has manually edited the input value\n const isDirty = useRef(false);\n\n const elementId = useUniqueId(id);\n\n const sliderInputId = setId(elementId, \"input\");\n\n const stepValue = useMemo(\n () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n [divisionQuantity, maxPointValue, minPointValue],\n );\n\n const inverseStepValue = 1 / stepValue;\n\n const marks = useMemo(\n () =>\n createMark(\n markProperties,\n markStep,\n divisionQuantity,\n minPointValue,\n maxPointValue,\n stepValue,\n markDigits,\n !!disabled,\n formatMark,\n ),\n [\n disabled,\n divisionQuantity,\n formatMark,\n markDigits,\n markProperties,\n markStep,\n minPointValue,\n maxPointValue,\n stepValue,\n ],\n );\n\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n // We always show an error when the value(s) are not between maxPointValue and minPointValue; and when required is true (set by user).\n status === undefined);\n\n const isSingle: boolean = useMemo(\n () => isSingleSlider(valuesProp, defaultValues),\n [defaultValues, valuesProp],\n );\n\n const value: number[] \| undefined = useMemo(\n () =>\n valuesProp?.length > 0\n ? knobsValuesToKnobsPositions(\n valuesProp,\n inverseStepValue,\n minPointValue,\n )\n : undefined,\n [inverseStepValue, minPointValue, valuesProp],\n );\n\n const defaultKnobsPositions: number[] = useMemo(\n () =>\n knobsValuesToKnobsPositions(\n defaultValues,\n inverseStepValue,\n minPointValue,\n ),\n [defaultValues, inverseStepValue, minPointValue],\n );\n\n const [knobsPositions, setKnobsPositions] = useControlled(\n value,\n defaultKnobsPositions,\n );\n\n // Validation related state\n const { arrayStatus, arrayDefaultStatus } = useMemo(\n () => convertStatusToArray(knobsPositions.length, status),\n [knobsPositions.length, status],\n );\n\n const [validationStatus, setValidationState] = useControlled(\n arrayStatus,\n arrayDefaultStatus,\n );\n\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\",\n );\n\n const [isDraggingTrack, setIsDraggingTrack] = useState(false);\n\n const knobProperties = generateDefaultKnobProperties(\n knobsPositions.length,\n disabled,\n knobPropertiesProp,\n );\n\n const rangesCount = knobProperties.length - 1;\n\n const trackStyles = createTrackStyles(knobProperties);\n\n const knobStyles = createKnobStyles(knobProperties);\n\n /\n Generates an object which posses the current value and position of the knobs.\n \n @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n * @returns {Object} - An object with the positions and values of the knobs.\n * @memberof HvSlider\n /\n const generateKnobsPositionAndValues = useCallback(\n (\n knobsCurrentPosition: number[],\n ): { knobsPosition: number[]; knobsValues: number[] } => {\n const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n const knobsValues: number[] = [];\n\n let duplicatedValue: number \| null = null;\n\n const findDuplicated: number[] = newKnobsPosition.filter(\n (item, index) => newKnobsPosition.indexOf(item) !== index,\n );\n\n if (noOverlap && findDuplicated.length > 0) {\n [duplicatedValue] = findDuplicated;\n }\n\n newKnobsPosition.forEach((position, index, array) => {\n const newArray: number[] = array;\n let newPosition: number = position;\n\n if (noOverlap && newPosition === duplicatedValue) {\n const previousValue = knobsPositions[index];\n if (previousValue !== newPosition) {\n newPosition += newPosition > previousValue ? -1 : 1;\n newArray[index] = newPosition;\n }\n }\n\n knobsValues[index] = knobsPositionToScaledValue(\n newPosition,\n minPointValue,\n stepValue,\n );\n }, this);\n\n return {\n knobsPosition: newKnobsPosition,\n knobsValues,\n };\n },\n [knobsPositions, minPointValue, noOverlap, stepValue],\n );\n\n const performValidation = useCallback(() => {\n let invalid = false;\n let requiredMsg = false;\n\n const mappedValues =\n generateKnobsPositionAndValues(knobsPositions).knobsValues;\n\n const newValidationState = mappedValues.map((knobValue) => {\n if (required && (knobValue == null \|\| Number.isNaN(knobValue))) {\n invalid = true;\n requiredMsg = true;\n return validationStates.invalid;\n }\n\n if (knobValue < minPointValue \|\| knobValue > maxPointValue) {\n invalid = true;\n return validationStates.invalid;\n }\n\n return validationStates.valid;\n });\n\n setValidationState([...newValidationState]);\n\n if (invalid) {\n setValidationMessage(requiredMsg ? requiredMessage : outOfRangeMessage);\n return;\n }\n\n setValidationMessage(\"\");\n }, [\n generateKnobsPositionAndValues,\n knobsPositions,\n maxPointValue,\n minPointValue,\n outOfRangeMessage,\n required,\n requiredMessage,\n setValidationMessage,\n setValidationState,\n ]);\n\n useEffect(() => {\n const stepVl = calculateStepValue(\n maxPointValue,\n minPointValue,\n divisionQuantity,\n );\n\n const inverseStepVl = 1 / stepVl;\n\n if (valuesProp?.length > 0) {\n setKnobsPositions(\n knobsValuesToKnobsPositions(\n valuesProp.length > 0 ? valuesProp : defaultValues,\n inverseStepVl,\n minPointValue,\n ),\n );\n }\n }, [\n defaultValues,\n divisionQuantity,\n maxPointValue,\n minPointValue,\n setKnobsPositions,\n valuesProp,\n ]);\n\n useEffect(() => {\n if (!isDirty.current) {\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 }, [knobsPositions, requiredMessage, performValidation]);\n\n const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n setIsDraggingTrack(true);\n }\n };\n\n const onMouseUpHandler = () => {\n setIsDraggingTrack(false);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n performValidation();\n\n onBlur?.(event, knobs.knobsValues, status);\n };\n\n /\n Function executed while the knobs changes.\n \n executes the callback provided by the user with the values and position of the knobs,\n * also lock the value of the knob in case one is fixed.\n /\n const onChangeHandler = (knobsPosition: number[]) => {\n isDirty.current = true;\n\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n knobProperties.forEach((knobProperty, index) => {\n if (knobProperty.fixed) {\n knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n defaultValues[index],\n minPointValue,\n inverseStepValue,\n );\n }\n });\n\n if (disabled \|\| readOnly) return;\n onChange?.(knobs.knobsValues);\n\n setKnobsPositions(knobs.knobsPosition);\n };\n\n const onInputChangeHandler = (inputValues: number[], index: number) => {\n let newKnobPositions = knobsValuesToKnobsPositions(\n inputValues,\n inverseStepValue,\n minPointValue,\n );\n\n newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n onChangeHandler(newKnobPositions);\n };\n\n /\n Function executed before a change.\n \n executes the callback provided by the user with the values and position of the knobs\n /\n const onBeforeChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onBeforeChange?.(knobs.knobsValues);\n };\n\n /\n Function executed after a change.\n \n executes the callback provided by the user with the values and position of the knobs\n /\n const onAfterChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onAfterChange?.(knobs.knobsValues);\n };\n\n /\n Function used to create a custom knob for the slider.\n \n TODO: This should be isolated because is creating a sub component,\n * but there were some problems regarding the underlying component losing\n * references of the handlers disabling the focus.\n */\n const createKnob: SliderProps[\"handleRender\"] = (knobNode, params) => {\n const { value: knobValue, dragging, index } = params;\n const { style = {}, ...restProps } = knobNode.props;\n const scaledKnobValue = knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue,\n ).toFixed(markDigits);\n if (dragging) {\n style.backgroundColor = knobProperties[index]?.dragColor;\n } else {\n style.backgroundColor = knobProperties[index]?.color;\n }\n\n const isEmpty =\n Number.isNaN(knobsPositions[index]) \|\| knobsPositions[index] == null;\n const handleId = setId(elementId, \"knob\");\n const indexedHandleId = setId(handleId, index);\n\n return (\n <div\n key={index}\n className={cx({\n [classes.handleContainer]: !!(!disabled && !isEmpty),\n [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n [classes.handleHiddenContainer]: isEmpty \|\| readOnly,\n })}\n >\n <Tooltip\n prefixCls=\"rc-slider-tooltip\"\n overlay={formatTooltip?.(scaledKnobValue) \|\| scaledKnobValue}\n visible={dragging}\n placement=\"top\"\n overlayClassName={classes.sliderTooltip}\n getTooltipContainer={() => getElementById(indexedHandleId)!}\n >\n <div\n id={indexedHandleId}\n style={style}\n className={classes.handle}\n {...restProps}\n aria-label={`${label}-knob-${index}`}\n aria-valuenow={knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue,\n )}\n aria-valuemin={minPointValue}\n aria-valuemax={maxPointValue}\n {...knobProps?.[index]}\n />\n </Tooltip>\n </div>\n );\n };\n\n const knobsValuesArray = knobsPositionsToKnobsValues(\n knobsPositions,\n stepValue,\n minPointValue,\n );\n\n const knobsValues = knobsValuesArray.map((v) =>\n Number(v.toFixed(markDigits)),\n );\n\n return (\n <HvFormElement\n className={cx(\n classes.root,\n {\n [classes.trackStandBy]:\n !readOnly && !disabled && !isSingle && !isDraggingTrack,\n [classes.trackDragging]:\n !readOnly && !disabled && !isSingle && isDraggingTrack,\n [classes.rootDisabled]: !!disabled,\n },\n className,\n )}\n id={id}\n name={name}\n status={statusArrayToFormStatus(validationStatus)}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n onMouseDown={onMouseDownHandler}\n onMouseUp={onMouseUpHandler}\n onBlur={onBlurHandler}\n {...others}\n >\n {(hasLabel \|\| !hideInput) && (\n <div\n className={cx(classes.labelContainer, {\n [classes.labelIncluded]: hasLabel,\n [classes.onlyInput]: !hasLabel,\n })}\n >\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n className={classes.label}\n htmlFor={sliderInputId}\n label={label}\n />\n )}\n\n {!hideInput && (\n <HvSliderInput\n id={sliderInputId}\n label={label}\n values={knobsValues}\n onChange={onInputChangeHandler}\n status={validationStatus}\n disabled={disabled}\n readOnly={readOnly}\n markDigits={markDigits}\n inputProps={inputProps}\n />\n )}\n </div>\n )}\n\n <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n <Slider\n ref={ref}\n range={!isSingle}\n handleRender={createKnob}\n className={cx(classes.sliderRoot, {\n [classes.rootRange]: !isSingle,\n })}\n min={0}\n max={divisionQuantity}\n step={1}\n marks={marks}\n dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n onChange={(singleValue) =>\n onChangeHandler(Array<number>().concat(singleValue))\n }\n onBeforeChange={(singleValue) =>\n onBeforeChangeHandler(Array<number>().concat(singleValue))\n }\n onAfterChange={(singleValue) =>\n onAfterChangeHandler(Array<number>().concat(singleValue))\n }\n value={\n knobsPositions.length === 0\n ? undefined\n : isSingle\n ? knobsPositions[0]\n : [...knobsPositions]\n }\n allowCross={false}\n disabled={disabled}\n count={rangesCount}\n railStyle={sliderStyles.rail}\n handleStyle={knobStyles.knobInner}\n trackStyle={trackStyles}\n draggableTrack={!readOnly && !isSingle}\n {...sliderProps}\n />\n </div>\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n});\n"],"names":["knobsValues","validationStates"],"mappings":"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"}
1	+ {"version":3,"file":"Slider.js","sources":["../../../src/Slider/Slider.tsx"],"sourcesContent":["import {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport Slider, { SliderProps, SliderRef } from \"rc-slider\";\nimport Tooltip from \"rc-tooltip\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFormElement, HvFormStatus, HvLabel, HvWarningText } from \"../Forms\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvInputProps } from \"../Input\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\nimport {\n calculateStepValue,\n convertStatusToArray,\n createKnobStyles,\n createMark,\n createTrackStyles,\n ensureValuesConsistency,\n generateDefaultKnobProperties,\n isSingleSlider,\n knobsPositionsToKnobsValues,\n knobsPositionToScaledValue,\n knobsValuesToKnobsPositions,\n scaledValueToKnobsPositionValue,\n statusArrayToFormStatus,\n} from \"./utils\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n extends HvBaseProps<HTMLDivElement, \"onChange\" \| \"onBlur\"> {\n /** The slider name. /\n name?: string;\n /* The label of the slider. If not provided, an aria-label or aria-labelledby must be inputted via sliderProps. /\n label?: React.ReactNode;\n /* Indicates that the slider is disabled. /\n disabled?: boolean;\n /* Indicates that the slider is not editable. /\n readOnly?: boolean;\n /* Indicates that user slider is required on the form element. /\n required?: boolean;\n /* Error message to render when the value is required. /\n requiredMessage?: string;\n /* If `true` the input that controls the slider is hidden. /\n hideInput?: boolean;\n /* Attributes applied to the slider element. /\n sliderProps?: SliderProps;\n /\n The status of the slider element.\n \n Valid is correct, invalid is incorrect and standBy means no validations have run.\n \n When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n /\n status?: HvFormStatus \| HvFormStatus[];\n /* The error message to show when `status` is \"invalid\". /\n statusMessage?: React.ReactNode;\n /* The values array to apply to the component /\n values?: number[];\n /* The default values array to apply to the component /\n defaultValues?: (number \| undefined)[];\n /\n The object used to set the knob properties,\n * for every item in the array a new knob will be created.\n /\n knobProperties?: HvKnobProperty[];\n /* The object used to set the mark properties individually. /\n markProperties?: HvMarkProperty[];\n /\n The function executed before a change will occur in the slider.\n * @deprecated It's always better to use onChange instead\n /\n onBeforeChange?: (value: number[]) => void;\n /* The function executed while a change is occurring in the slider. /\n onChange?: (value: number[]) => void;\n /\n The function executed after a change ocurred in the slider.\n * @deprecated It's always better to use onChange instead\n /\n onAfterChange?: (value: number[]) => void;\n /* The function executed after a blur ocurred in the slider. /\n onBlur?: (\n event: React.FocusEvent,\n knobsValues: number[],\n status?: HvFormStatus \| HvFormStatus[],\n ) => void;\n /\n The separation in points between marks.\n * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n /\n markStep?: number;\n /* How many subdivisions there are in the slider. /\n divisionQuantity?: number;\n /* The value of the first point in the slider from left to right. /\n minPointValue?: number;\n /* The value of the last point in the slider from left to right. /\n maxPointValue?: number;\n /* Error message to render when the value is higher than maxPointValue or lower than minPointValue. /\n outOfRangeMessage?: string;\n /* The max number of decimals if no format function is applied /\n markDigits?: number;\n /\n A formatting function used to add format to the marks in the track,\n * the function receives the mark text\n /\n formatMark?: (label: React.ReactNode) => React.ReactNode;\n /\n A formatting function used to add format to the tooltip in the track,\n * the function receives the mark text\n /\n formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n /* If `true` the knobs can't have the same value, if `false` knobs can have the same value. /\n noOverlap?: boolean;\n /* Attributes applied to the input element. /\n inputProps?: HvInputProps[];\n /* Attributes applied to the knob element. /\n knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n /* The classes object to be applied into the root object. /\n classes?: HvSliderClasses;\n}\n\n/\n Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n /\nexport const HvSlider = forwardRef<SliderRef, HvSliderProps>((props, ref) => {\n const {\n id,\n className,\n name,\n label,\n status,\n statusMessage,\n disabled,\n classes: classesProp,\n sliderProps,\n knobProps,\n inputProps,\n requiredMessage = \"The value is required\",\n outOfRangeMessage = \"The value is out of range\",\n noOverlap = true,\n hideInput = false,\n required = false,\n readOnly = false,\n markProperties = [],\n defaultValues = [undefined],\n values: valuesProp = [],\n knobProperties: knobPropertiesProp,\n \"aria-errormessage\": ariaErrorMessage,\n maxPointValue = 100,\n minPointValue = 0,\n divisionQuantity = 100,\n markStep = 20,\n markDigits = 0,\n formatMark,\n onChange,\n onBlur,\n onBeforeChange,\n onAfterChange,\n formatTooltip,\n ...others\n } = useDefaultProps(\"HvSlider\", props);\n const { classes, cx } = useClasses(classesProp);\n\n // Miscellaneous state\n const hasLabel = label != null;\n\n // Signals that the user has manually edited the input value\n const isDirty = useRef(false);\n\n const elementId = useUniqueId(id);\n\n const sliderInputId = setId(elementId, \"input\");\n\n const stepValue = useMemo(\n () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n [divisionQuantity, maxPointValue, minPointValue],\n );\n\n const inverseStepValue = 1 / stepValue;\n\n const marks = useMemo(\n () =>\n createMark(\n markProperties,\n markStep,\n divisionQuantity,\n minPointValue,\n maxPointValue,\n stepValue,\n markDigits,\n !!disabled,\n formatMark,\n ),\n [\n disabled,\n divisionQuantity,\n formatMark,\n markDigits,\n markProperties,\n markStep,\n minPointValue,\n maxPointValue,\n stepValue,\n ],\n );\n\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n // We always show an error when the value(s) are not between maxPointValue and minPointValue; and when required is true (set by user).\n status === undefined);\n\n const isSingle: boolean = useMemo(\n () => isSingleSlider(valuesProp, defaultValues),\n [defaultValues, valuesProp],\n );\n\n const value: number[] \| undefined = useMemo(\n () =>\n valuesProp?.length > 0\n ? knobsValuesToKnobsPositions(\n valuesProp,\n inverseStepValue,\n minPointValue,\n )\n : undefined,\n [inverseStepValue, minPointValue, valuesProp],\n );\n\n const defaultKnobsPositions: number[] = useMemo(\n () =>\n knobsValuesToKnobsPositions(\n defaultValues,\n inverseStepValue,\n minPointValue,\n ),\n [defaultValues, inverseStepValue, minPointValue],\n );\n\n const [knobsPositions, setKnobsPositions] = useControlled(\n value,\n defaultKnobsPositions,\n );\n\n // Validation related state\n const { arrayStatus, arrayDefaultStatus } = useMemo(\n () => convertStatusToArray(knobsPositions.length, status),\n [knobsPositions.length, status],\n );\n\n const [validationStatus, setValidationState] = useControlled(\n arrayStatus,\n arrayDefaultStatus,\n );\n\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\",\n );\n\n const [isDraggingTrack, setIsDraggingTrack] = useState(false);\n\n const knobProperties = generateDefaultKnobProperties(\n knobsPositions.length,\n disabled,\n knobPropertiesProp,\n );\n\n const rangesCount = knobProperties.length - 1;\n\n const trackStyles = createTrackStyles(knobProperties);\n\n const knobStyles = createKnobStyles(knobProperties);\n\n /\n Generates an object which posses the current value and position of the knobs.\n \n @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n * @returns {Object} - An object with the positions and values of the knobs.\n * @memberof HvSlider\n /\n const generateKnobsPositionAndValues = useCallback(\n (\n knobsCurrentPosition: number[],\n ): { knobsPosition: number[]; knobsValues: number[] } => {\n const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n const knobsValues: number[] = [];\n\n let duplicatedValue: number \| null = null;\n\n const findDuplicated: number[] = newKnobsPosition.filter(\n (item, index) => newKnobsPosition.indexOf(item) !== index,\n );\n\n if (noOverlap && findDuplicated.length > 0) {\n [duplicatedValue] = findDuplicated;\n }\n\n newKnobsPosition.forEach((position, index, array) => {\n const newArray: number[] = array;\n let newPosition: number = position;\n\n if (noOverlap && newPosition === duplicatedValue) {\n const previousValue = knobsPositions[index];\n if (previousValue !== newPosition) {\n newPosition += newPosition > previousValue ? -1 : 1;\n newArray[index] = newPosition;\n }\n }\n\n knobsValues[index] = knobsPositionToScaledValue(\n newPosition,\n minPointValue,\n stepValue,\n );\n }, this);\n\n return {\n knobsPosition: newKnobsPosition,\n knobsValues,\n };\n },\n [knobsPositions, minPointValue, noOverlap, stepValue],\n );\n\n const performValidation = useCallback(() => {\n let invalid = false;\n let requiredMsg = false;\n\n const mappedValues =\n generateKnobsPositionAndValues(knobsPositions).knobsValues;\n\n const newValidationState = mappedValues.map((knobValue) => {\n if (required && (knobValue == null \|\| Number.isNaN(knobValue))) {\n invalid = true;\n requiredMsg = true;\n return validationStates.invalid;\n }\n\n if (knobValue < minPointValue \|\| knobValue > maxPointValue) {\n invalid = true;\n return validationStates.invalid;\n }\n\n return validationStates.valid;\n });\n\n setValidationState([...newValidationState]);\n\n if (invalid) {\n setValidationMessage(requiredMsg ? requiredMessage : outOfRangeMessage);\n return;\n }\n\n setValidationMessage(\"\");\n }, [\n generateKnobsPositionAndValues,\n knobsPositions,\n maxPointValue,\n minPointValue,\n outOfRangeMessage,\n required,\n requiredMessage,\n setValidationMessage,\n setValidationState,\n ]);\n\n useEffect(() => {\n const stepVl = calculateStepValue(\n maxPointValue,\n minPointValue,\n divisionQuantity,\n );\n\n const inverseStepVl = 1 / stepVl;\n\n if (valuesProp?.length > 0) {\n setKnobsPositions(\n knobsValuesToKnobsPositions(\n valuesProp.length > 0 ? valuesProp : defaultValues,\n inverseStepVl,\n minPointValue,\n ),\n );\n }\n }, [\n defaultValues,\n divisionQuantity,\n maxPointValue,\n minPointValue,\n setKnobsPositions,\n valuesProp,\n ]);\n\n useEffect(() => {\n if (!isDirty.current) {\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 }, [knobsPositions, requiredMessage, performValidation]);\n\n const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n setIsDraggingTrack(true);\n }\n };\n\n const onMouseUpHandler = () => {\n setIsDraggingTrack(false);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n performValidation();\n\n onBlur?.(event, knobs.knobsValues, status);\n };\n\n /\n Function executed while the knobs changes.\n \n executes the callback provided by the user with the values and position of the knobs,\n * also lock the value of the knob in case one is fixed.\n /\n const onChangeHandler = (knobsPosition: number[]) => {\n isDirty.current = true;\n\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n knobProperties.forEach((knobProperty, index) => {\n if (knobProperty.fixed) {\n knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n defaultValues[index],\n minPointValue,\n inverseStepValue,\n );\n }\n });\n\n if (disabled \|\| readOnly) return;\n onChange?.(knobs.knobsValues);\n\n setKnobsPositions(knobs.knobsPosition);\n };\n\n const onInputChangeHandler = (inputValues: number[], index: number) => {\n let newKnobPositions = knobsValuesToKnobsPositions(\n inputValues,\n inverseStepValue,\n minPointValue,\n );\n\n newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n onChangeHandler(newKnobPositions);\n };\n\n /\n Function executed before a change.\n \n executes the callback provided by the user with the values and position of the knobs\n /\n const onBeforeChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onBeforeChange?.(knobs.knobsValues);\n };\n\n /\n Function executed after a change.\n \n executes the callback provided by the user with the values and position of the knobs\n /\n const onAfterChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onAfterChange?.(knobs.knobsValues);\n };\n\n /\n Function used to create a custom knob for the slider.\n \n TODO: This should be isolated because is creating a sub component,\n * but there were some problems regarding the underlying component losing\n * references of the handlers disabling the focus.\n */\n const createKnob: SliderProps[\"handleRender\"] = (knobNode, params) => {\n const { value: knobValue, dragging, index } = params;\n const { style = {}, ...restProps } = knobNode.props;\n const scaledKnobValue = knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue,\n ).toFixed(markDigits);\n if (dragging) {\n style.backgroundColor = knobProperties[index]?.dragColor;\n } else {\n style.backgroundColor = knobProperties[index]?.color;\n }\n\n const isEmpty =\n Number.isNaN(knobsPositions[index]) \|\| knobsPositions[index] == null;\n const handleId = setId(elementId, \"knob\");\n const indexedHandleId = setId(handleId, index);\n\n return (\n <div\n key={index}\n className={cx({\n [classes.handleContainer]: !!(!disabled && !isEmpty),\n [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n [classes.handleHiddenContainer]: isEmpty \|\| readOnly,\n })}\n >\n <Tooltip\n prefixCls=\"rc-slider-tooltip\"\n overlay={formatTooltip?.(scaledKnobValue) \|\| scaledKnobValue}\n visible={dragging}\n placement=\"top\"\n overlayClassName={classes.sliderTooltip}\n getTooltipContainer={() => getElementById(indexedHandleId)!}\n >\n <div\n id={indexedHandleId}\n style={style}\n className={classes.handle}\n {...restProps}\n aria-label={`${label}-knob-${index}`}\n aria-valuenow={knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue,\n )}\n aria-valuemin={minPointValue}\n aria-valuemax={maxPointValue}\n {...knobProps?.[index]}\n />\n </Tooltip>\n </div>\n );\n };\n\n const knobsValuesArray = knobsPositionsToKnobsValues(\n knobsPositions,\n stepValue,\n minPointValue,\n );\n\n const knobsValues = knobsValuesArray.map((v) =>\n Number(v.toFixed(markDigits)),\n );\n\n return (\n <HvFormElement\n className={cx(\n classes.root,\n {\n [classes.trackStandBy]:\n !readOnly && !disabled && !isSingle && !isDraggingTrack,\n [classes.trackDragging]:\n !readOnly && !disabled && !isSingle && isDraggingTrack,\n [classes.rootDisabled]: !!disabled,\n },\n className,\n )}\n id={id}\n name={name}\n status={statusArrayToFormStatus(validationStatus)}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n onMouseDown={onMouseDownHandler}\n onMouseUp={onMouseUpHandler}\n onBlur={onBlurHandler}\n {...others}\n >\n {(hasLabel \|\| !hideInput) && (\n <div\n className={cx(classes.labelContainer, {\n [classes.labelIncluded]: hasLabel,\n [classes.onlyInput]: !hasLabel,\n })}\n >\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n className={classes.label}\n htmlFor={sliderInputId}\n label={label}\n />\n )}\n\n {!hideInput && (\n <HvSliderInput\n id={sliderInputId}\n label={label}\n values={knobsValues}\n onChange={onInputChangeHandler}\n status={validationStatus}\n disabled={disabled}\n readOnly={readOnly}\n markDigits={markDigits}\n inputProps={inputProps}\n />\n )}\n </div>\n )}\n\n <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n <Slider\n ref={ref}\n range={!isSingle}\n handleRender={createKnob}\n className={cx(classes.sliderRoot, {\n [classes.rootRange]: !isSingle,\n })}\n min={0}\n max={divisionQuantity}\n step={1}\n marks={marks}\n dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n onChange={(singleValue) =>\n onChangeHandler(Array<number>().concat(singleValue))\n }\n onBeforeChange={(singleValue) =>\n onBeforeChangeHandler(Array<number>().concat(singleValue))\n }\n onAfterChange={(singleValue) =>\n onAfterChangeHandler(Array<number>().concat(singleValue))\n }\n value={\n knobsPositions.length === 0\n ? undefined\n : isSingle\n ? knobsPositions[0]\n : [...knobsPositions]\n }\n allowCross={false}\n disabled={disabled}\n count={rangesCount}\n railStyle={sliderStyles.rail}\n handleStyle={knobStyles.knobInner}\n trackStyle={trackStyles}\n draggableTrack={!readOnly && !isSingle}\n {...sliderProps}\n />\n </div>\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n});\n"],"names":["knobsValues","validationStates"],"mappings":"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"}

package/dist/esm/Slider/Slider.styles.js CHANGED Viewed

@@ -1,7 +1,7 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../utils/focusUtils.js";
 import base from "./base.js";
-import { createClasses } from "@hitachivantara/uikit-react-shared";
 const dot = {
   position: "absolute",
   bottom: "-1px",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.styles.js","sources":["../../../src/Slider/Slider.styles.tsx"],"sourcesContent":["import { ~~theme~~ } from \"@hitachivantara/uikit-~~styles~~\";\n\nimport { ~~createClasses~~ } from \"~~../utils~~/~~classes~~\";\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport base from \"./base\";\n\nconst dot: React.CSSProperties = {\n position: \"absolute\",\n bottom: \"-1px\",\n marginLeft: \"0px\",\n width: \"1px\",\n height: \"4px\",\n border: \"none\",\n borderRadius: \"0%\",\n backgroundColor: theme.colors.atmo4,\n cursor: \"pointer\",\n verticalAlign: \"middle\",\n zIndex: \"-3\",\n};\n\nconst dragSquare: React.CSSProperties = {\n cursor: \"grab\",\n width: \"calc(100% - 40px)\",\n left: \"20px\",\n height: \"27px\",\n position: \"absolute\",\n top: \"-12px\",\n content: \"''\",\n background: \"transparent\",\n borderTop: `12px solid ${theme.colors.primary_20}`,\n borderBottom: `12px solid ${theme.colors.primary_20}`,\n zIndex: \"-2\",\n};\n\nconst ring: React.CSSProperties = {\n width: \"32px\",\n height: \"32px\",\n borderRadius: \"50%\",\n border: `9px solid ${theme.colors.primary_20}`,\n opacity: \"100%\",\n content: \"''\",\n position: \"absolute\",\n top: \"-10px\",\n left: \"-10px\",\n};\n\nconst border: React.CSSProperties = {\n width: \"20px\",\n height: \"20px\",\n borderRadius: \"50%\",\n border: `2px solid ${theme.colors.atmo1}`,\n content: \"''\",\n position: \"absolute\",\n top: \"-4px\",\n left: \"-4px\",\n};\n\nexport const sliderStyles = {\n mark: {\n ...theme.typography.caption1,\n fontFamily: theme.fontFamily.body,\n top: \"-2px\",\n zIndex: -1,\n },\n disabledMark: {\n ...theme.typography.caption1,\n fontFamily: theme.fontFamily.body,\n color: `${theme.colors.secondary_60}`,\n cursor: \"not-allowed\",\n top: \"-2px\",\n },\n dot: {\n ...dot,\n },\n dotDisabled: {\n ...dot,\n cursor: \"not-allowed\",\n },\n knobHidden: { display: \"none\" },\n knobHiddenLast: {\n borderColor: \"transparent\",\n height: \"3px\",\n width: \"2px\",\n marginLeft: \"-1px\",\n border: \"none\",\n borderRadius: \"0\",\n marginTop: \"0px\",\n left: \"100%\",\n touchAction: \"none\",\n cursor: \"default\",\n },\n knobInner: {\n borderColor: \"transparent\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.secondary,\n width: \"16px\",\n height: \"16px\",\n },\n knobOuter: {\n position: \"relative\",\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.atmo4,\n width: \"32px\",\n height: \"32px\",\n top: \"-80%\",\n left: \"-80%\",\n zIndex: \"-1\",\n },\n track: {\n backgroundColor: theme.colors.secondary,\n height: \"3px\",\n zIndex: \"-1\",\n marginTop: \"-1px\",\n },\n rail: { backgroundColor: theme.colors.atmo4, height: \"1px\", zIndex: \"-3\" },\n} satisfies Record<string, React.CSSProperties>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSlider\", {\n sliderBase: { ...base },\n rootDisabled: {\n cursor: \"not-allowed\",\n \"&& .rc-slider-disabled\": {\n background: \"transparent\",\n },\n },\n sliderContainer: { marginBottom: \"18px\", padding: \"0 23px\" },\n error: { padding: \"0 8px\" },\n trackDragging: {\n cursor: \"grabbing\",\n\n \"&& .rc-slider-track\": {\n \"&::before\": {\n ...dragSquare,\n cursor: \"grabbing\",\n },\n },\n },\n trackStandBy: {\n \"&& .rc-slider-track\": {\n \"&:hover\": {\n \"&::before\": {\n ...dragSquare,\n },\n },\n },\n },\n sliderRoot: { zIndex: 0 },\n rootRange: {},\n handleContainer: {\n \"&& .rc-slider-handle\": {\n cursor: \"pointer\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"grab\",\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n \"&:hover\": {\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n\n // Note about the usage of `!important below`: the way the rc-slider allows us to\n // style the knobs is through inline styles. This means that the `box-shadow`, which\n // is an inline style and is set to `none` to prevent the default rc-slider style to\n // show, can't be overridden for the focus scenario unless we use the `!important` flag.\n \"&:focus-visible\": {\n ...outlineStyles,\n boxShadow: \"0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important\",\n \"&::after\": {\n ...border,\n },\n },\n },\n },\n handle: {},\n handleContainerDisabled: {\n \"&& .rc-slider-handle\": {\n cursor: \"not-allowed\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"not-allowed\",\n },\n \"&:hover\": {\n cursor: \"not-allowed\",\n },\n },\n },\n handleHiddenContainer: { display: \"none\" },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n marginBottom: \"12px\",\n marginLeft: \"20px\",\n marginRight: \"20px\",\n },\n labelIncluded: { justifyContent: \"space-between\" },\n onlyInput: { justifyContent: \"flex-end\" },\n label: {},\n root: {},\n sliderTooltip: {\n \"&& .rc-slider-tooltip-inner\": {\n background: theme.colors.atmo1,\n borderRadius: 0,\n maxWidth: \"532px\",\n height: \"100%\",\n padding: theme.space.sm,\n ...theme.typography.body,\n fontFamily: theme.fontFamily.body,\n boxShadow: \"none\",\n },\n\n \"&& .rc-slider-tooltip-arrow\": {\n visibility: \"hidden\",\n },\n },\n});\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"Slider.styles.js","sources":["../../../src/Slider/Slider.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport base from \"./base\";\n\nconst dot: React.CSSProperties = {\n position: \"absolute\",\n bottom: \"-1px\",\n marginLeft: \"0px\",\n width: \"1px\",\n height: \"4px\",\n border: \"none\",\n borderRadius: \"0%\",\n backgroundColor: theme.colors.atmo4,\n cursor: \"pointer\",\n verticalAlign: \"middle\",\n zIndex: \"-3\",\n};\n\nconst dragSquare: React.CSSProperties = {\n cursor: \"grab\",\n width: \"calc(100% - 40px)\",\n left: \"20px\",\n height: \"27px\",\n position: \"absolute\",\n top: \"-12px\",\n content: \"''\",\n background: \"transparent\",\n borderTop: `12px solid ${theme.colors.primary_20}`,\n borderBottom: `12px solid ${theme.colors.primary_20}`,\n zIndex: \"-2\",\n};\n\nconst ring: React.CSSProperties = {\n width: \"32px\",\n height: \"32px\",\n borderRadius: \"50%\",\n border: `9px solid ${theme.colors.primary_20}`,\n opacity: \"100%\",\n content: \"''\",\n position: \"absolute\",\n top: \"-10px\",\n left: \"-10px\",\n};\n\nconst border: React.CSSProperties = {\n width: \"20px\",\n height: \"20px\",\n borderRadius: \"50%\",\n border: `2px solid ${theme.colors.atmo1}`,\n content: \"''\",\n position: \"absolute\",\n top: \"-4px\",\n left: \"-4px\",\n};\n\nexport const sliderStyles = {\n mark: {\n ...theme.typography.caption1,\n fontFamily: theme.fontFamily.body,\n top: \"-2px\",\n zIndex: -1,\n },\n disabledMark: {\n ...theme.typography.caption1,\n fontFamily: theme.fontFamily.body,\n color: `${theme.colors.secondary_60}`,\n cursor: \"not-allowed\",\n top: \"-2px\",\n },\n dot: {\n ...dot,\n },\n dotDisabled: {\n ...dot,\n cursor: \"not-allowed\",\n },\n knobHidden: { display: \"none\" },\n knobHiddenLast: {\n borderColor: \"transparent\",\n height: \"3px\",\n width: \"2px\",\n marginLeft: \"-1px\",\n border: \"none\",\n borderRadius: \"0\",\n marginTop: \"0px\",\n left: \"100%\",\n touchAction: \"none\",\n cursor: \"default\",\n },\n knobInner: {\n borderColor: \"transparent\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.secondary,\n width: \"16px\",\n height: \"16px\",\n },\n knobOuter: {\n position: \"relative\",\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.atmo4,\n width: \"32px\",\n height: \"32px\",\n top: \"-80%\",\n left: \"-80%\",\n zIndex: \"-1\",\n },\n track: {\n backgroundColor: theme.colors.secondary,\n height: \"3px\",\n zIndex: \"-1\",\n marginTop: \"-1px\",\n },\n rail: { backgroundColor: theme.colors.atmo4, height: \"1px\", zIndex: \"-3\" },\n} satisfies Record<string, React.CSSProperties>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSlider\", {\n sliderBase: { ...base },\n rootDisabled: {\n cursor: \"not-allowed\",\n \"&& .rc-slider-disabled\": {\n background: \"transparent\",\n },\n },\n sliderContainer: { marginBottom: \"18px\", padding: \"0 23px\" },\n error: { padding: \"0 8px\" },\n trackDragging: {\n cursor: \"grabbing\",\n\n \"&& .rc-slider-track\": {\n \"&::before\": {\n ...dragSquare,\n cursor: \"grabbing\",\n },\n },\n },\n trackStandBy: {\n \"&& .rc-slider-track\": {\n \"&:hover\": {\n \"&::before\": {\n ...dragSquare,\n },\n },\n },\n },\n sliderRoot: { zIndex: 0 },\n rootRange: {},\n handleContainer: {\n \"&& .rc-slider-handle\": {\n cursor: \"pointer\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"grab\",\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n \"&:hover\": {\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n\n // Note about the usage of `!important below`: the way the rc-slider allows us to\n // style the knobs is through inline styles. This means that the `box-shadow`, which\n // is an inline style and is set to `none` to prevent the default rc-slider style to\n // show, can't be overridden for the focus scenario unless we use the `!important` flag.\n \"&:focus-visible\": {\n ...outlineStyles,\n boxShadow: \"0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important\",\n \"&::after\": {\n ...border,\n },\n },\n },\n },\n handle: {},\n handleContainerDisabled: {\n \"&& .rc-slider-handle\": {\n cursor: \"not-allowed\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"not-allowed\",\n },\n \"&:hover\": {\n cursor: \"not-allowed\",\n },\n },\n },\n handleHiddenContainer: { display: \"none\" },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n marginBottom: \"12px\",\n marginLeft: \"20px\",\n marginRight: \"20px\",\n },\n labelIncluded: { justifyContent: \"space-between\" },\n onlyInput: { justifyContent: \"flex-end\" },\n label: {},\n root: {},\n sliderTooltip: {\n \"&& .rc-slider-tooltip-inner\": {\n background: theme.colors.atmo1,\n borderRadius: 0,\n maxWidth: \"532px\",\n height: \"100%\",\n padding: theme.space.sm,\n ...theme.typography.body,\n fontFamily: theme.fontFamily.body,\n boxShadow: \"none\",\n },\n\n \"&& .rc-slider-tooltip-arrow\": {\n visibility: \"hidden\",\n },\n },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/Slider/SliderInput/SliderInput.js CHANGED Viewed

@@ -32,7 +32,7 @@ const HvSliderInput = ({
     setInputValues(knobsValuesToString(valuesProp, markDigits));
   }, [markDigits, valuesProp]);
   return /* @__PURE__ */ jsx("div", { className: cx(classes.inputRoot, className), ...others, children: inputValues.map((value, index) => /* @__PURE__ */ jsxs("div", { className: classes.inputContainer, children: [
-    index !== 0 && /* @__PURE__ */ jsx(Remove, { color: disabled ? ["atmo4"] : void 0 }),
+    index !== 0 && /* @__PURE__ */ jsx(Remove, { color: disabled ? "secondary_60" : void 0 }),
     /* @__PURE__ */ jsx(
       HvInput,
       {

package/dist/esm/Slider/SliderInput/SliderInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderInput.js","sources":["../../../../src/Slider/SliderInput/SliderInput.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Remove } from \"@hitachivantara/uikit-react-icons\";\n\nimport { ~~HvFormStatus~~ } from \"~~../../Forms~~\";\nimport { ~~HvInput,~~ ~~HvInputProps~~ } from \"../../~~Input~~\";\nimport { ~~HvBaseProps~~ } from \"../../~~types/generic~~\";\nimport { ~~ExtractNames~~ } from \"../../~~utils~~/~~classes~~\";\nimport { setId } from \"../../utils/setId\";\nimport { knobsValuesToString, stringValuesToKnobs } from \"../utils\";\nimport { staticClasses, useClasses } from \"./SliderInput.styles\";\n\nexport { staticClasses as sliderInputClasses };\n\nexport type HvSliderInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderInputProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /*\n Used to generate the aria-label for the inputs.\n /\n label?: React.ReactNode;\n /\n Input status.\n /\n status?: HvFormStatus[];\n /\n The values array to apply to the component\n /\n values?: number[];\n /\n Callback function to be triggered when the selected date has changed.\n /\n onChange?: (values: number[], index: number) => void;\n /\n Attributes applied to the input element.\n /\n inputProps?: HvInputProps[];\n /\n Indicates that the form element is disabled.\n /\n disabled?: boolean;\n /\n Indicates that the form element is read only.\n /\n readOnly?: boolean;\n /\n Indicates how many decimals to use.\n /\n markDigits?: number;\n /\n Styles applied from the theme.\n */\n classes?: HvSliderInputClasses;\n}\n\nexport const HvSliderInput = ({\n classes: classesProp,\n className,\n id,\n label,\n status,\n values: valuesProp = [],\n inputProps = [],\n readOnly = false,\n disabled = false,\n markDigits = 0,\n onChange,\n ...others\n}: HvSliderInputProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const [inputValues, setInputValues] = useState<string[]>(\n knobsValuesToString(valuesProp, markDigits),\n );\n\n const handleChange = (index: number) => {\n if (disabled) return;\n\n onChange?.(stringValuesToKnobs(inputValues), index);\n };\n\n useEffect(() => {\n setInputValues(knobsValuesToString(valuesProp, markDigits));\n }, [markDigits, valuesProp]);\n\n return (\n <div className={cx(classes.inputRoot, className)} {...others}>\n {inputValues.map((value, index) => (\n <div key={setId(id, index)} className={classes.inputContainer}>\n {index !== 0 && <Remove color={disabled ? [\"~~atmo4~~\"] : undefined} />}\n <HvInput\n id={setId(id, index)}\n aria-label={`${label}-${index}`}\n className={classes.input}\n disabled={disabled}\n type=\"number\"\n value={Number.isNaN(value) \|\| value == null ? \"\" : value.toString()}\n onEnter={() => handleChange(index)}\n onBlur={() => handleChange(index)}\n onChange={(_, inputValue) => {\n const newValues = [...inputValues];\n newValues[index] = inputValue;\n setInputValues(newValues);\n }}\n status={status?.[index] \|\| \"standBy\"}\n readOnly={readOnly}\n disableClear\n {...inputProps[index]}\n />\n </div>\n ))}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAuDO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,aAAa,CAAC;AAAA,EACtB,aAAa,CAAC;AAAA,EACd,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC,oBAAoB,YAAY,UAAU;AAAA,EAAA;AAGtC,QAAA,eAAe,CAAC,UAAkB;AACtC,QAAI,SAAU;AAEH,eAAA,oBAAoB,WAAW,GAAG,KAAK;AAAA,EAAA;AAGpD,YAAU,MAAM;AACC,mBAAA,oBAAoB,YAAY,UAAU,CAAC;AAAA,EAAA,GACzD,CAAC,YAAY,UAAU,CAAC;AAE3B,6BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,WAAW,SAAS,GAAI,GAAG,QACnD,UAAY,YAAA,IAAI,CAAC,OAAO,+BACtB,OAA2B,EAAA,WAAW,QAAQ,gBAC5C,UAAA;AAAA,~~IAAU~~,~~UAAA~~,~~yBAAM~~,~~QAAO~~,~~EAAA~~,OAAO,WAAW,~~CAAC~~,~~OAAO,IAAI,~~QAAW;AAAA,~~IACjE~~;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,KAAK;AAAA,QACnB,cAAY,GAAG,KAAK,IAAI,KAAK;AAAA,QAC7B,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA,MAAK;AAAA,QACL,OAAO,OAAO,MAAM,KAAK,KAAK,SAAS,OAAO,KAAK,MAAM,SAAS;AAAA,QAClE,SAAS,MAAM,aAAa,KAAK;AAAA,QACjC,QAAQ,MAAM,aAAa,KAAK;AAAA,QAChC,UAAU,CAAC,GAAG,eAAe;AACrB,gBAAA,YAAY,CAAC,GAAG,WAAW;AACjC,oBAAU,KAAK,IAAI;AACnB,yBAAe,SAAS;AAAA,QAC1B;AAAA,QACA,QAAQ,SAAS,KAAK,KAAK;AAAA,QAC3B;AAAA,QACA,cAAY;AAAA,QACX,GAAG,WAAW,KAAK;AAAA,MAAA;AAAA,IACtB;AAAA,EAAA,EAAA,~~GApBQ~~,MAAM,IAAI,KAAK,~~CAqBzB~~,CACD,EACH,CAAA;AAEJ;"}
1	+ {"version":3,"file":"SliderInput.js","sources":["../../../../src/Slider/SliderInput/SliderInput.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Remove } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvFormStatus } from \"../../Forms\";\nimport { HvInput, HvInputProps } from \"../../Input\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { knobsValuesToString, stringValuesToKnobs } from \"../utils\";\nimport { staticClasses, useClasses } from \"./SliderInput.styles\";\n\nexport { staticClasses as sliderInputClasses };\n\nexport type HvSliderInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderInputProps\n extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n /*\n Used to generate the aria-label for the inputs.\n /\n label?: React.ReactNode;\n /\n Input status.\n /\n status?: HvFormStatus[];\n /\n The values array to apply to the component\n /\n values?: number[];\n /\n Callback function to be triggered when the selected date has changed.\n /\n onChange?: (values: number[], index: number) => void;\n /\n Attributes applied to the input element.\n /\n inputProps?: HvInputProps[];\n /\n Indicates that the form element is disabled.\n /\n disabled?: boolean;\n /\n Indicates that the form element is read only.\n /\n readOnly?: boolean;\n /\n Indicates how many decimals to use.\n /\n markDigits?: number;\n /\n Styles applied from the theme.\n */\n classes?: HvSliderInputClasses;\n}\n\nexport const HvSliderInput = ({\n classes: classesProp,\n className,\n id,\n label,\n status,\n values: valuesProp = [],\n inputProps = [],\n readOnly = false,\n disabled = false,\n markDigits = 0,\n onChange,\n ...others\n}: HvSliderInputProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const [inputValues, setInputValues] = useState<string[]>(\n knobsValuesToString(valuesProp, markDigits),\n );\n\n const handleChange = (index: number) => {\n if (disabled) return;\n\n onChange?.(stringValuesToKnobs(inputValues), index);\n };\n\n useEffect(() => {\n setInputValues(knobsValuesToString(valuesProp, markDigits));\n }, [markDigits, valuesProp]);\n\n return (\n <div className={cx(classes.inputRoot, className)} {...others}>\n {inputValues.map((value, index) => (\n <div key={setId(id, index)} className={classes.inputContainer}>\n {index !== 0 && (\n <Remove color={disabled ? \"secondary_60\" : undefined} />\n )}\n <HvInput\n id={setId(id, index)}\n aria-label={`${label}-${index}`}\n className={classes.input}\n disabled={disabled}\n type=\"number\"\n value={Number.isNaN(value) \|\| value == null ? \"\" : value.toString()}\n onEnter={() => handleChange(index)}\n onBlur={() => handleChange(index)}\n onChange={(_, inputValue) => {\n const newValues = [...inputValues];\n newValues[index] = inputValue;\n setInputValues(newValues);\n }}\n status={status?.[index] \|\| \"standBy\"}\n readOnly={readOnly}\n disableClear\n {...inputProps[index]}\n />\n </div>\n ))}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAuDO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,aAAa,CAAC;AAAA,EACtB,aAAa,CAAC;AAAA,EACd,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC,oBAAoB,YAAY,UAAU;AAAA,EAAA;AAGtC,QAAA,eAAe,CAAC,UAAkB;AACtC,QAAI,SAAU;AAEH,eAAA,oBAAoB,WAAW,GAAG,KAAK;AAAA,EAAA;AAGpD,YAAU,MAAM;AACC,mBAAA,oBAAoB,YAAY,UAAU,CAAC;AAAA,EAAA,GACzD,CAAC,YAAY,UAAU,CAAC;AAE3B,6BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,WAAW,SAAS,GAAI,GAAG,QACnD,UAAY,YAAA,IAAI,CAAC,OAAO,+BACtB,OAA2B,EAAA,WAAW,QAAQ,gBAC5C,UAAA;AAAA,IAAA,UAAU,KACR,oBAAA,QAAA,EAAO,OAAO,WAAW,iBAAiB,QAAW;AAAA,IAExD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,KAAK;AAAA,QACnB,cAAY,GAAG,KAAK,IAAI,KAAK;AAAA,QAC7B,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA,MAAK;AAAA,QACL,OAAO,OAAO,MAAM,KAAK,KAAK,SAAS,OAAO,KAAK,MAAM,SAAS;AAAA,QAClE,SAAS,MAAM,aAAa,KAAK;AAAA,QACjC,QAAQ,MAAM,aAAa,KAAK;AAAA,QAChC,UAAU,CAAC,GAAG,eAAe;AACrB,gBAAA,YAAY,CAAC,GAAG,WAAW;AACjC,oBAAU,KAAK,IAAI;AACnB,yBAAe,SAAS;AAAA,QAC1B;AAAA,QACA,QAAQ,SAAS,KAAK,KAAK;AAAA,QAC3B;AAAA,QACA,cAAY;AAAA,QACX,GAAG,WAAW,KAAK;AAAA,MAAA;AAAA,IACtB;AAAA,EAAA,EAAA,GAtBQ,MAAM,IAAI,KAAK,CAuBzB,CACD,EACH,CAAA;AAEJ;"}

package/dist/esm/Slider/SliderInput/SliderInput.styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { createClasses } from "@hitachivantara/uikit-react-shared";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses("HvSliderInput", {
   inputRoot: { display: "flex" },
   input: { maxWidth: "50px" },

package/dist/esm/Slider/SliderInput/SliderInput.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderInput.styles.js","sources":["../../../../src/Slider/SliderInput/SliderInput.styles.tsx"],"sourcesContent":["import { createClasses } from \"~~../../~~utils~~/classes~~\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSliderInput\", {\n inputRoot: { display: \"flex\" },\n input: { maxWidth: \"50px\" },\n inputContainer: { display: \"flex\" },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,WAAW,EAAE,SAAS,OAAO;AAAA,EAC7B,OAAO,EAAE,UAAU,OAAO;AAAA,EAC1B,gBAAgB,EAAE,SAAS,OAAO;AACpC,CAAC;"}
1	+ {"version":3,"file":"SliderInput.styles.js","sources":["../../../../src/Slider/SliderInput/SliderInput.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSliderInput\", {\n inputRoot: { display: \"flex\" },\n input: { maxWidth: \"50px\" },\n inputContainer: { display: \"flex\" },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,WAAW,EAAE,SAAS,OAAO;AAAA,EAC7B,OAAO,EAAE,UAAU,OAAO;AAAA,EAC1B,gBAAgB,EAAE,SAAS,OAAO;AACpC,CAAC;"}