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

@hitachivantara/uikit-react-core 5.66.14 → 5.67.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 (399) hide show

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

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

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

@@ -1,6 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
 import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
   root: { width: "100%", position: "relative" },
   rootDisabled: {

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

@@ -1,6 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
 import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvBaseInput", {
   root: {
     display: "inline-block",

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

@@ -1,6 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
 import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
   root: {
     padding: 0,

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

@@ -1,6 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
 import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
   root: {
     padding: 0,

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

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvBreadCrumb", {
   root: { display: "flex", alignItems: "center", zIndex: 0 },
   link: {},

package/dist/esm/BreadCrumb/Page/Page.styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
 import { outlineStyles } from "../../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvBreadCrumbPage", {
   link: {
     padding: `8px ${theme.space.xs}`,

package/dist/esm/BreadCrumb/PathElement/PathElement.styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvPathElement", {
   centerContainer: { display: "flex", alignItems: "center" },
   separatorContainer: {}

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useTheme } from "@hitachivantara/uikit-react-shared";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
-import { useTheme } from "../hooks/useTheme.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./BulkActions.styles.js";
 import { staticClasses } from "./BulkActions.styles.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BulkActions.js","sources":["../../../src/BulkActions/BulkActions.tsx"],"sourcesContent":["import { HvActionsGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"../CheckBox\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ~~useTheme } from \"../hooks/useTheme\";\nimport {~~ HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n /** Custom label for select all checkbox /\n selectAllLabel?: React.ReactNode;\n /* Custom label for select all checkbox conjunction /\n selectAllConjunctionLabel?: string;\n /* Custom label for select all pages button /\n selectAllPagesLabel?: React.ReactNode;\n /* Whether select all pages element should be visible /\n showSelectAllPages?: boolean;\n /* The total number of elements /\n numTotal?: number;\n /* The number of elements currently selected /\n numSelected?: number;\n /* Function called when the \"select all\" Checkbox is toggled. /\n onSelectAll?: HvCheckBoxProps[\"onChange\"];\n /* Function called when the \"select all pages\" button is clicked toggled. /\n onSelectAllPages?: HvButtonProps[\"onClick\"];\n /* Whether the bulk actions should use the semantic styles when there are selected elements. /\n semantic?: boolean;\n /* The renderable content inside the right actions slot, or an array of actions `{ id, label, icon, disabled, ... }` /\n actions?: HvActionsGenericProps[\"actions\"];\n /* Whether actions should be all disabled /\n actionsDisabled?: boolean;\n /\n The callback function called when an action is triggered, receiving `action` as parameter.\n \n @deprecated Use `onAction` instead.\n * /\n actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n /* The callback function called when an action is triggered, receiving `action` as parameter. /\n onAction?: HvActionsGenericProps[\"onAction\"];\n /* The number of maximum visible actions before they're collapsed into a `DropDownMenu`. /\n maxVisibleActions?: number;\n /* Properties to be passed onto the checkbox component, the values of the object are equivalent to the HvCheckbox API. /\n checkboxProps?: HvCheckBoxProps;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvBulkActionsClasses;\n}\n\n/\n Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n const {\n id,\n className,\n classes: classesProp,\n selectAllPagesLabel,\n actionsDisabled,\n maxVisibleActions,\n checkboxProps,\n actions,\n numTotal = 0,\n numSelected = 0,\n selectAllLabel = \"All\",\n selectAllConjunctionLabel = \"/\",\n showSelectAllPages = false,\n semantic = true,\n actionsCallback, // TODO - remove in v6\n onAction,\n onSelectAll,\n onSelectAllPages,\n ...others\n } = useDefaultProps(\"HvBulkActions\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const { activeTheme } = useTheme();\n\n const anySelected = numSelected > 0;\n const isSemantic = semantic && anySelected;\n\n const selectAllLabelComponent = (\n <HvTypography\n component=\"span\"\n disabled={checkboxProps?.disabled}\n variant=\"body\"\n >\n {!anySelected ? (\n <>\n <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n {` (${numTotal})`}\n </>\n ) : (\n <>\n <HvTypography variant=\"label\">{numSelected}</HvTypography>\n {` ${selectAllConjunctionLabel} ${numTotal}`}\n </>\n )}\n </HvTypography>\n );\n\n return (\n <div\n id={id}\n className={cx(\n classes.root,\n { [classes.semantic]: isSemantic },\n className,\n )}\n {...others}\n >\n <div className={classes.selectAllContainer}>\n <HvCheckBox\n id={setId(id, \"select\")}\n className={classes.selectAll}\n checked={numSelected > 0}\n semantic={isSemantic}\n onChange={onSelectAll}\n indeterminate={numSelected > 0 && numSelected < numTotal}\n label={selectAllLabelComponent}\n {...checkboxProps}\n />\n {showSelectAllPages && anySelected && numSelected < numTotal && (\n <>\n <div className={classes.divider} />\n <HvButton\n id={setId(id, \"pages\")}\n className={classes.selectAllPages}\n variant={\n isSemantic\n ? (activeTheme?.bulkActions\n .actionButtonVariant as HvButtonVariant)\n : \"secondaryGhost\"\n }\n onClick={onSelectAllPages}\n >\n {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n </HvButton>\n </>\n )}\n </div>\n <HvActionsGeneric\n id={setId(id, \"actions\")}\n classes={{ root: classes.actions }}\n variant={\n isSemantic\n ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n : \"secondaryGhost\"\n }\n actions={actions}\n disabled={actionsDisabled ?? numSelected === 0}\n actionsCallback={actionsCallback}\n onAction={onAction}\n maxVisibleActions={maxVisibleActions}\n />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;~~AA0Da~~,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,EAAE,gBAAgB;AAExB,QAAM,cAAc,cAAc;AAClC,QAAM,aAAa,YAAY;AAE/B,QAAM,0BACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,eAAe;AAAA,MACzB,SAAQ;AAAA,MAEP,UAAA,CAAC,cAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAe,gBAAA;AAAA,QAC7C,KAAK,QAAQ;AAAA,MAAA,EAAA,CAChB,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAY,aAAA;AAAA,QAC1C,IAAI,yBAAyB,IAAI,QAAQ;AAAA,MAAA,GAC5C;AAAA,IAAA;AAAA,EAAA;AAMJ,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,oBACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,QAAQ;AAAA,cACtB,WAAW,QAAQ;AAAA,cACnB,SAAS,cAAc;AAAA,cACvB,UAAU;AAAA,cACV,UAAU;AAAA,cACV,eAAe,cAAc,KAAK,cAAc;AAAA,cAChD,OAAO;AAAA,cACN,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACC,sBAAsB,eAAe,cAAc,YAEhD,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,CAAA;AAAA,YACjC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,IAAI,OAAO;AAAA,gBACrB,WAAW,QAAQ;AAAA,gBACnB,SACE,aACK,aAAa,YACX,sBACH;AAAA,gBAEN,SAAS;AAAA,gBAER,UAAA,uBAAuB,cAAc,QAAQ;AAAA,cAAA;AAAA,YAChD;AAAA,UAAA,GACF;AAAA,QAAA,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,SAAS;AAAA,YACvB,SAAS,EAAE,MAAM,QAAQ,QAAQ;AAAA,YACjC,SACE,aACK,aAAa,YAAY,sBAC1B;AAAA,YAEN;AAAA,YACA,UAAU,mBAAmB,gBAAgB;AAAA,YAC7C;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"BulkActions.js","sources":["../../../src/BulkActions/BulkActions.tsx"],"sourcesContent":["import { useTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport { HvActionsGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"../CheckBox\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n /** Custom label for select all checkbox /\n selectAllLabel?: React.ReactNode;\n /* Custom label for select all checkbox conjunction /\n selectAllConjunctionLabel?: string;\n /* Custom label for select all pages button /\n selectAllPagesLabel?: React.ReactNode;\n /* Whether select all pages element should be visible /\n showSelectAllPages?: boolean;\n /* The total number of elements /\n numTotal?: number;\n /* The number of elements currently selected /\n numSelected?: number;\n /* Function called when the \"select all\" Checkbox is toggled. /\n onSelectAll?: HvCheckBoxProps[\"onChange\"];\n /* Function called when the \"select all pages\" button is clicked toggled. /\n onSelectAllPages?: HvButtonProps[\"onClick\"];\n /* Whether the bulk actions should use the semantic styles when there are selected elements. /\n semantic?: boolean;\n /* The renderable content inside the right actions slot, or an array of actions `{ id, label, icon, disabled, ... }` /\n actions?: HvActionsGenericProps[\"actions\"];\n /* Whether actions should be all disabled /\n actionsDisabled?: boolean;\n /\n The callback function called when an action is triggered, receiving `action` as parameter.\n \n @deprecated Use `onAction` instead.\n * /\n actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n /* The callback function called when an action is triggered, receiving `action` as parameter. /\n onAction?: HvActionsGenericProps[\"onAction\"];\n /* The number of maximum visible actions before they're collapsed into a `DropDownMenu`. /\n maxVisibleActions?: number;\n /* Properties to be passed onto the checkbox component, the values of the object are equivalent to the HvCheckbox API. /\n checkboxProps?: HvCheckBoxProps;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvBulkActionsClasses;\n}\n\n/\n Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n const {\n id,\n className,\n classes: classesProp,\n selectAllPagesLabel,\n actionsDisabled,\n maxVisibleActions,\n checkboxProps,\n actions,\n numTotal = 0,\n numSelected = 0,\n selectAllLabel = \"All\",\n selectAllConjunctionLabel = \"/\",\n showSelectAllPages = false,\n semantic = true,\n actionsCallback, // TODO - remove in v6\n onAction,\n onSelectAll,\n onSelectAllPages,\n ...others\n } = useDefaultProps(\"HvBulkActions\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const { activeTheme } = useTheme();\n\n const anySelected = numSelected > 0;\n const isSemantic = semantic && anySelected;\n\n const selectAllLabelComponent = (\n <HvTypography\n component=\"span\"\n disabled={checkboxProps?.disabled}\n variant=\"body\"\n >\n {!anySelected ? (\n <>\n <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n {` (${numTotal})`}\n </>\n ) : (\n <>\n <HvTypography variant=\"label\">{numSelected}</HvTypography>\n {` ${selectAllConjunctionLabel} ${numTotal}`}\n </>\n )}\n </HvTypography>\n );\n\n return (\n <div\n id={id}\n className={cx(\n classes.root,\n { [classes.semantic]: isSemantic },\n className,\n )}\n {...others}\n >\n <div className={classes.selectAllContainer}>\n <HvCheckBox\n id={setId(id, \"select\")}\n className={classes.selectAll}\n checked={numSelected > 0}\n semantic={isSemantic}\n onChange={onSelectAll}\n indeterminate={numSelected > 0 && numSelected < numTotal}\n label={selectAllLabelComponent}\n {...checkboxProps}\n />\n {showSelectAllPages && anySelected && numSelected < numTotal && (\n <>\n <div className={classes.divider} />\n <HvButton\n id={setId(id, \"pages\")}\n className={classes.selectAllPages}\n variant={\n isSemantic\n ? (activeTheme?.bulkActions\n .actionButtonVariant as HvButtonVariant)\n : \"secondaryGhost\"\n }\n onClick={onSelectAllPages}\n >\n {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n </HvButton>\n </>\n )}\n </div>\n <HvActionsGeneric\n id={setId(id, \"actions\")}\n classes={{ root: classes.actions }}\n variant={\n isSemantic\n ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n : \"secondaryGhost\"\n }\n actions={actions}\n disabled={actionsDisabled ?? numSelected === 0}\n actionsCallback={actionsCallback}\n onAction={onAction}\n maxVisibleActions={maxVisibleActions}\n />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA2Da,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,EAAE,gBAAgB;AAExB,QAAM,cAAc,cAAc;AAClC,QAAM,aAAa,YAAY;AAE/B,QAAM,0BACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,eAAe;AAAA,MACzB,SAAQ;AAAA,MAEP,UAAA,CAAC,cAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAe,gBAAA;AAAA,QAC7C,KAAK,QAAQ;AAAA,MAAA,EAAA,CAChB,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAY,aAAA;AAAA,QAC1C,IAAI,yBAAyB,IAAI,QAAQ;AAAA,MAAA,GAC5C;AAAA,IAAA;AAAA,EAAA;AAMJ,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,oBACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,QAAQ;AAAA,cACtB,WAAW,QAAQ;AAAA,cACnB,SAAS,cAAc;AAAA,cACvB,UAAU;AAAA,cACV,UAAU;AAAA,cACV,eAAe,cAAc,KAAK,cAAc;AAAA,cAChD,OAAO;AAAA,cACN,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACC,sBAAsB,eAAe,cAAc,YAEhD,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,CAAA;AAAA,YACjC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,IAAI,OAAO;AAAA,gBACrB,WAAW,QAAQ;AAAA,gBACnB,SACE,aACK,aAAa,YACX,sBACH;AAAA,gBAEN,SAAS;AAAA,gBAER,UAAA,uBAAuB,cAAc,QAAQ;AAAA,cAAA;AAAA,YAChD;AAAA,UAAA,GACF;AAAA,QAAA,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,SAAS;AAAA,YACvB,SAAS,EAAE,MAAM,QAAQ,QAAQ;AAAA,YACjC,SACE,aACK,aAAa,YAAY,sBAC1B;AAAA,YAEN;AAAA,YACA,UAAU,mBAAmB,gBAAgB;AAAA,YAC7C;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1,9 +1,9 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
 import { staticClasses as staticClasses$1 } from "../ActionsGeneric/ActionsGeneric.styles.js";
 import "react/jsx-runtime";
 import "react";
 import "@hitachivantara/uikit-react-icons";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvBulkActions", {
   root: {
     display: "flex",

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
+import { useTheme } from "@hitachivantara/uikit-react-shared";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
-import { useTheme } from "../hooks/useTheme.js";
 import { fixedForwardRef } from "../types/generic.js";
 import { useClasses, getIconSizeStyles, getSizeStyles, getColoringStyle, getRadiusStyles, getOverrideColors } from "./Button.styles.js";
 import { staticClasses } from "./Button.styles.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { ~~useDefaultProps~~ } from \"~~../hooks~~/~~useDefaultProps~~\";\nimport { ~~useTheme~~ } from \"../hooks/~~useTheme~~\";\nimport {\n fixedForwardRef,\n PolymorphicComponentRef,\n PolymorphicRef,\n} from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n staticClasses as buttonClasses,\n getColoringStyle,\n getIconSizeStyles,\n getOverrideColors,\n getRadiusStyles,\n getSizeStyles,\n useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n PolymorphicComponentRef<\n C,\n {\n /** Use the variant prop to change the visual style of the button. /\n variant?: HvButtonVariant;\n /* Whether the button is an icon-only button. /\n icon?: boolean;\n /* Whether the button is disabled or not. /\n disabled?: boolean;\n /* Class names to be applied. /\n className?: string;\n /* Element placed before the children. /\n startIcon?: React.ReactNode;\n /* Element placed after the children. /\n endIcon?: React.ReactNode;\n /* Button size. /\n size?: HvButtonSize;\n /* Button border radius. /\n radius?: HvButtonRadius;\n /* Defines the default colors of the button are forced into the icon. /\n overrideIconColors?: boolean;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvButtonClasses;\n /* Whether the button is selected or not. /\n selected?: boolean;\n /\n Whether the button is focusable when disabled.\n * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n /\n focusableWhenDisabled?: boolean;\n }\n >;\n\n/\n Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n /\nconst mapVariant = (\n variant: HvButtonVariant,\n theme?: string,\n): HvButtonVariant => {\n if (theme === \"ds3\") return variant;\n\n const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n secondary: \"secondarySubtle\",\n ghost: \"primaryGhost\",\n };\n\n const mappedVariant = deprecatedVariantMap[variant];\n\n if (import.meta.env.DEV && mappedVariant) {\n // eslint-disable-next-line no-console\n console.warn(\n `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`,\n );\n }\n\n return mappedVariant \|\| variant;\n};\n\n/\n Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n C extends React.ElementType = \"button\",\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n const {\n classes: classesProp,\n children,\n variant: variantProp, // TODO - should we split into two props (color and type) in v6?\n disabled = false,\n className,\n startIcon,\n endIcon,\n icon = false,\n size,\n radius,\n overrideIconColors = true,\n component: Component = \"button\",\n focusableWhenDisabled,\n onClick: onClickProp,\n onMouseDown: onMouseDownProp,\n selected,\n style,\n ...others\n } = useDefaultProps(\"HvButton\", props);\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n const variant = mapVariant(\n variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n activeTheme?.name,\n );\n\n const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n if (disabled) return;\n onClickProp?.(e);\n };\n\n const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n if (disabled) return;\n onMouseDownProp?.(e);\n };\n\n const [color, type] = useMemo(() => {\n const result = variant.split(/(?=[A-Z])/);\n if (\n result[0] === \"ghost\" \|\|\n result[0] === \"semantic\" \|\|\n (result[0] === \"secondary\" && !result[1])\n )\n return [];\n return result.map((x) => x.toLowerCase());\n }, [variant]);\n\n const sizeStyles = useMemo(\n () =>\n size ? (icon ? getIconSizeStyles(size) : getSizeStyles(size)) : undefined,\n [size, icon],\n );\n\n return (\n <Component\n ref={ref}\n style={{\n ...style,\n \"--HvButton-height\": sizeStyles ? sizeStyles.height : \"32px\",\n }}\n className={cx(\n classes.root,\n type && classes[type as keyof HvButtonClasses],\n color && css(getColoringStyle(color, type)),\n classes[variant as keyof HvButtonClasses], // Placed after type and color CSS for DS3 override\n radius && css(getRadiusStyles(radius)),\n overrideIconColors && css(getOverrideColors()),\n {\n [classes.icon]: icon,\n [classes.disabled]: disabled,\n },\n sizeStyles && css(sizeStyles),\n className,\n )}\n onClick={handleClick}\n onMouseDown={handleMouseDown}\n {...(Component === \"button\" && { type: \"button\" })}\n {...(disabled && {\n disabled: !focusableWhenDisabled,\n tabIndex: focusableWhenDisabled ? 0 : -1,\n \"aria-disabled\": true,\n })}\n {...(selected && { \"aria-pressed\": selected })}\n {...others}\n >\n {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n {children}\n {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n </Component>\n );\n});\n"],"names":["HvButton"],"mappings":";;;;;;;AAiEA,MAAM,aAAa,CACjB,SACA,UACoB;AAChB,MAAA,UAAU,MAAc,QAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgB;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AACnD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AAC3D,QAAI,SAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAGrB,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa;AAAA,IACjB,MACE,OAAQ,OAAO,kBAAkB,IAAI,IAAI,cAAc,IAAI,IAAK;AAAA,IAClE,CAAC,MAAM,IAAI;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,GAAG;AAAA,QACH,qBAAqB,aAAa,WAAW,SAAS;AAAA,MACxD;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,QAAQ,IAA6B;AAAA,QAC7C,SAAS,IAAI,iBAAiB,OAAO,IAAI,CAAC;AAAA,QAC1C,QAAQ,OAAgC;AAAA;AAAA,QACxC,UAAU,IAAI,gBAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,cAAc,IAAI,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,EAAE,gBAAgB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,WAAY,oBAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}
1	+ {"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n fixedForwardRef,\n PolymorphicComponentRef,\n PolymorphicRef,\n} from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n staticClasses as buttonClasses,\n getColoringStyle,\n getIconSizeStyles,\n getOverrideColors,\n getRadiusStyles,\n getSizeStyles,\n useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n PolymorphicComponentRef<\n C,\n {\n /** Use the variant prop to change the visual style of the button. /\n variant?: HvButtonVariant;\n /* Whether the button is an icon-only button. /\n icon?: boolean;\n /* Whether the button is disabled or not. /\n disabled?: boolean;\n /* Class names to be applied. /\n className?: string;\n /* Element placed before the children. /\n startIcon?: React.ReactNode;\n /* Element placed after the children. /\n endIcon?: React.ReactNode;\n /* Button size. /\n size?: HvButtonSize;\n /* Button border radius. /\n radius?: HvButtonRadius;\n /* Defines the default colors of the button are forced into the icon. /\n overrideIconColors?: boolean;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvButtonClasses;\n /* Whether the button is selected or not. /\n selected?: boolean;\n /\n Whether the button is focusable when disabled.\n * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n /\n focusableWhenDisabled?: boolean;\n }\n >;\n\n/\n Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n /\nconst mapVariant = (\n variant: HvButtonVariant,\n theme?: string,\n): HvButtonVariant => {\n if (theme === \"ds3\") return variant;\n\n const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n secondary: \"secondarySubtle\",\n ghost: \"primaryGhost\",\n };\n\n const mappedVariant = deprecatedVariantMap[variant];\n\n if (import.meta.env.DEV && mappedVariant) {\n // eslint-disable-next-line no-console\n console.warn(\n `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`,\n );\n }\n\n return mappedVariant \|\| variant;\n};\n\n/\n Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n C extends React.ElementType = \"button\",\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n const {\n classes: classesProp,\n children,\n variant: variantProp, // TODO - should we split into two props (color and type) in v6?\n disabled = false,\n className,\n startIcon,\n endIcon,\n icon = false,\n size,\n radius,\n overrideIconColors = true,\n component: Component = \"button\",\n focusableWhenDisabled,\n onClick: onClickProp,\n onMouseDown: onMouseDownProp,\n selected,\n style,\n ...others\n } = useDefaultProps(\"HvButton\", props);\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n const variant = mapVariant(\n variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n activeTheme?.name,\n );\n\n const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n if (disabled) return;\n onClickProp?.(e);\n };\n\n const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n if (disabled) return;\n onMouseDownProp?.(e);\n };\n\n const [color, type] = useMemo(() => {\n const result = variant.split(/(?=[A-Z])/);\n if (\n result[0] === \"ghost\" \|\|\n result[0] === \"semantic\" \|\|\n (result[0] === \"secondary\" && !result[1])\n )\n return [];\n return result.map((x) => x.toLowerCase());\n }, [variant]);\n\n const sizeStyles = useMemo(\n () =>\n size ? (icon ? getIconSizeStyles(size) : getSizeStyles(size)) : undefined,\n [size, icon],\n );\n\n return (\n <Component\n ref={ref}\n style={{\n ...style,\n \"--HvButton-height\": sizeStyles ? sizeStyles.height : \"32px\",\n }}\n className={cx(\n classes.root,\n type && classes[type as keyof HvButtonClasses],\n color && css(getColoringStyle(color, type)),\n classes[variant as keyof HvButtonClasses], // Placed after type and color CSS for DS3 override\n radius && css(getRadiusStyles(radius)),\n overrideIconColors && css(getOverrideColors()),\n {\n [classes.icon]: icon,\n [classes.disabled]: disabled,\n },\n sizeStyles && css(sizeStyles),\n className,\n )}\n onClick={handleClick}\n onMouseDown={handleMouseDown}\n {...(Component === \"button\" && { type: \"button\" })}\n {...(disabled && {\n disabled: !focusableWhenDisabled,\n tabIndex: focusableWhenDisabled ? 0 : -1,\n \"aria-disabled\": true,\n })}\n {...(selected && { \"aria-pressed\": selected })}\n {...others}\n >\n {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n {children}\n {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n </Component>\n );\n});\n"],"names":["HvButton"],"mappings":";;;;;;;AAiEA,MAAM,aAAa,CACjB,SACA,UACoB;AAChB,MAAA,UAAU,MAAc,QAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgB;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AACnD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AAC3D,QAAI,SAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAGrB,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa;AAAA,IACjB,MACE,OAAQ,OAAO,kBAAkB,IAAI,IAAI,cAAc,IAAI,IAAK;AAAA,IAClE,CAAC,MAAM,IAAI;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,GAAG;AAAA,QACH,qBAAqB,aAAa,WAAW,SAAS;AAAA,MACxD;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,QAAQ,IAA6B;AAAA,QAC7C,SAAS,IAAI,iBAAiB,OAAO,IAAI,CAAC;AAAA,QAC1C,QAAQ,OAAgC;AAAA;AAAA,QACxC,UAAU,IAAI,gBAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,cAAc,IAAI,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,EAAE,gBAAgB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,WAAY,oBAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}

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

@@ -1,6 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
 import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvButton", {
   root: {
     display: "inline-flex",

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

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvCalendar", {
   root: {
     display: "flex",

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvCalendarHeader", {
   root: {
     paddingBottom: theme.space.md,

package/dist/esm/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses(
   "HvComposedNavigation",
   {

package/dist/esm/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../../utils/classes.js";
 import { outlineStyles } from "../../../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const hover = {
   backgroundColor: theme.colors.atmo3,
   cursor: "pointer"

package/dist/esm/Calendar/CalendarNavigation/Navigation/Navigation.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvNavigation", {
   root: {
     display: "flex",

package/dist/esm/Calendar/SingleCalendar/CalendarCell.styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
 import { outlineStyles } from "../../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const hover = {
   backgroundColor: theme.colors.containerBackgroundHover,
   cursor: "pointer"

package/dist/esm/Calendar/SingleCalendar/SingleCalendar.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvSingleCalendar", {
   calendarContainer: {
     width: "318px",

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

@@ -1,6 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
 import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvCard", {
   root: {
     overflow: "visible",

package/dist/esm/Card/Content/Content.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvCardContent", {
   content: {
     padding: `0 ${theme.space.sm} 15px ${theme.space.sm}`,

package/dist/esm/Card/Header/Header.styles.js CHANGED Viewed

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

package/dist/esm/Card/Media/Media.styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvCardMedia", {
   root: { width: "100%" },
   media: {}

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

@@ -2,9 +2,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useState, Children, useCallback, useEffect } from "react";
 import useCarousel from "embla-carousel-react";
 import { Close, Fullscreen, Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
+import { useTheme } from "@hitachivantara/uikit-react-shared";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useLabels } from "../hooks/useLabels.js";
-import { useTheme } from "../hooks/useTheme.js";
 import { clamp } from "../utils/helpers.js";
 import { useClasses } from "./Carousel.styles.js";
 import { staticClasses } from "./Carousel.styles.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Carousel.js","sources":["../../../src/Carousel/Carousel.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useRef, useState } from \"react\";\nimport useCarousel from \"embla-carousel-react\";\nimport {\n Backwards,\n Close,\n Forwards,\n Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../Button\";\nimport { HvContainer } from \"../Container\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvIconButton, HvIconButtonProps } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { clamp } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n close: \"Close\",\n fullscreen: \"Fullscreen\",\n backwards: \"Backwards\",\n forwards: \"Forwards\",\n};\n\nexport interface HvCarouselProps\n extends HvBaseProps<HTMLDivElement, \"title\" \| \"onChange\"> {\n /** A Jss Object used to override or extend the styles applied. /\n classes?: HvCarouselClasses;\n /* Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio /\n height?: React.CSSProperties[\"height\"];\n /* Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio /\n thumbnailWidth?: React.CSSProperties[\"width\"];\n /* Title of the carousel /\n title?: React.ReactNode;\n /* Content slides to be displayed. @see `<HvCarouselSlide />` /\n children?: React.ReactNode;\n /* Custom content to render in the actions area /\n actions?: React.ReactNode;\n /* Whether Carousel is in \"xs mode\" - to use in embedded contexts /\n xs?: boolean;\n /* Whether to show dots instead of arrow pagination. Defaults to true under 5 elements /\n showDots?: boolean;\n /* Whether to show the counter on the top-right corner of the active slide /\n showCounter?: boolean;\n /* Whether to show the back/forwards buttons over the active slide /\n showSlideControls?: boolean;\n /* Whether to enable the fullscreen toggle button /\n showFullscreen?: boolean;\n /* Whether to hide the thumbnails. Hidden by default in \"xs\" mode /\n hideThumbnails?: boolean;\n /* Controls position. /\n controlsPosition?: \"top\" \| \"bottom\";\n /* Thumbnails position. /\n thumbnailsPosition?: \"top\" \| \"bottom\";\n /* Carousel configuration options. @see https://www.embla-carousel.com/api/options/ /\n carouselOptions?: Parameters<typeof useCarousel>[0];\n /* Function that renders the thumbnail. /\n renderThumbnail?: (index: number) => React.ReactNode;\n /* The callback fired when the active slide changes. /\n onChange?: (index: number) => void;\n /* The callback fired fullscreen is toggled. /\n onFullscreen?: (\n event: React.MouseEvent<HTMLButtonElement>,\n isFullscreen: boolean,\n ) => void;\n /* Labels used on the component. /\n labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\n/\n A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n const {\n className,\n classes: classesProp,\n height: heightProp = \"auto\",\n thumbnailWidth = 90,\n title,\n children,\n actions: actionsProp,\n xs,\n showDots: showDotsProp,\n showCounter: showCounterProp,\n showSlideControls,\n showFullscreen: showFullscreenProp,\n hideThumbnails: hideThumbnailsProp,\n controlsPosition: controlsPositionProp,\n thumbnailsPosition: thumbnailsPositionProp,\n labels: labelsProps,\n carouselOptions,\n renderThumbnail,\n onChange,\n onFullscreen,\n ...others\n } = useDefaultProps(\"HvCarousel\", props);\n const { activeTheme } = useTheme();\n const { classes, css, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n const thumbnailsRef = useRef<HTMLDivElement>(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n\n const isDs3 = activeTheme?.name === \"ds3\";\n const actionsPosition = isDs3 ? \"header\" : \"controls\";\n const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n const [containerRef, controller] = useCarousel({\n align: \"start\",\n loop: true,\n ...carouselOptions,\n });\n\n const [selectedIndex, setSelectedIndex] = useState(\n carouselOptions?.startIndex ?? 0,\n );\n\n const numSlides = Children.count(children);\n\n const handlePrevious = useCallback(() => {\n controller?.scrollPrev();\n }, [controller]);\n\n const handleNext = useCallback(() => {\n controller?.scrollNext();\n }, [controller]);\n\n const handleScroll = (index: number) => {\n controller?.scrollTo(index);\n };\n\n const handleSelect = useCallback(() => {\n if (!controller) return;\n\n const slideIndex = controller.selectedScrollSnap();\n setSelectedIndex(slideIndex);\n\n // scroll to thumbnail button\n thumbnailsRef.current\n ?.querySelectorAll(\"button\")\n ?.[slideIndex]?.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n });\n\n onChange?.(slideIndex);\n }, [controller, onChange]);\n\n useEffect(() => {\n if (!controller) return;\n\n controller.on(\"select\", handleSelect);\n\n return () => {\n controller.off(\"select\", handleSelect);\n };\n }, [controller, handleSelect]);\n\n useEffect(() => {\n if (!controller) return;\n\n controller.reInit();\n setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides));\n }, [numSlides, controller]);\n\n const handleFullscreen: HvIconButtonProps[\"onClick\"] = (event) => {\n onFullscreen?.(event, !isFullscreen);\n setIsFullscreen((curr) => !curr);\n };\n\n const canPrev = controller?.canScrollPrev() ?? false;\n const canNext = controller?.canScrollNext() ?? false;\n const showTitle = !!title && (!xs \|\| isFullscreen);\n const showFullscreen = showFullscreenProp ?? xs;\n const height = isFullscreen ? \"100%\" : (heightProp ?? \"auto\");\n const showCounter = xs;\n const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n const showThumbnails = !hideThumbnails && !!renderThumbnail;\n const showDots = showDotsProp ?? numSlides <= 5;\n\n const actions = (\n <div\n className={cx(\n classes.actions,\n actionsPosition === \"header\"\n ? css({ position: \"relative\", top: -40, height: 0 })\n : css({ position: \"absolute\" }),\n )}\n >\n {actionsProp}\n {showFullscreen && (\n <HvIconButton\n title={isFullscreen ? labels.close : labels.fullscreen}\n onClick={handleFullscreen}\n className={classes.closeButton}\n >\n {isFullscreen ? <Close /> : <Fullscreen />}\n </HvIconButton>\n )}\n </div>\n );\n\n const controls = (\n <HvCarouselControls\n classes={classes}\n showDots={showDots}\n page={selectedIndex}\n pages={numSlides}\n canPrevious={canPrev}\n canNext={canNext}\n onPreviousClick={handlePrevious}\n onNextClick={handleNext}\n actions={actionsPosition === \"controls\" && actions}\n labels={{\n backwards: labels.backwards,\n forwards: labels.forwards,\n }}\n />\n );\n\n const thumbnails = showThumbnails && (\n <HvCarouselThumbnails\n classes={classes}\n ref={thumbnailsRef}\n page={selectedIndex}\n pages={numSlides}\n width={thumbnailWidth}\n onThumbnailClick={(evt, i) => handleScroll(i)}\n renderThumbnail={renderThumbnail}\n />\n );\n\n return (\n <HvContainer\n className={cx(classes.root, className, {\n [classes.xs]: xs,\n [classes.fullscreen]: isFullscreen,\n })}\n {...others}\n >\n {showTitle && (\n <HvTypography variant=\"title2\" className={classes.title}>\n {title}\n </HvTypography>\n )}\n\n {actionsPosition === \"header\" && actions}\n {thumbnailsPosition === \"top\" && thumbnails}\n {controlsPosition === \"top\" && controls}\n <div\n className={cx(classes.main, {\n [classes.mainXs]: xs,\n [classes.mainFullscreen]: isFullscreen,\n })}\n >\n {showCounter && (\n <div className={classes.counterContainer}>\n <span className={classes.counter}>\n {`${selectedIndex + 1}/${numSlides}`}\n </span>\n </div>\n )}\n\n {showSlideControls && (\n <div className={classes.slideControls}>\n <HvButton\n icon\n disabled={!canPrev}\n variant=\"secondarySubtle\"\n aria-label={labels.backwards}\n onClick={handlePrevious}\n >\n <Backwards iconSize=\"XS\" />\n </HvButton>\n <HvButton\n icon\n disabled={!canNext}\n variant=\"secondarySubtle\"\n aria-label={labels.forwards}\n onClick={handleNext}\n >\n <Forwards iconSize=\"XS\" />\n </HvButton>\n </div>\n )}\n\n <div\n ref={containerRef}\n style={{ height }}\n className={classes.slidesViewport}\n >\n <div className={classes.slidesContainer}>{children}</div>\n </div>\n </div>\n {controlsPosition === \"bottom\" && controls}\n {thumbnailsPosition === \"bottom\" && thumbnails}\n </HvContainer>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"Carousel.js","sources":["../../../src/Carousel/Carousel.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useRef, useState } from \"react\";\nimport useCarousel from \"embla-carousel-react\";\nimport {\n Backwards,\n Close,\n Forwards,\n Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport { HvButton } from \"../Button\";\nimport { HvContainer } from \"../Container\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { HvIconButton, HvIconButtonProps } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { clamp } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n close: \"Close\",\n fullscreen: \"Fullscreen\",\n backwards: \"Backwards\",\n forwards: \"Forwards\",\n};\n\nexport interface HvCarouselProps\n extends HvBaseProps<HTMLDivElement, \"title\" \| \"onChange\"> {\n /** A Jss Object used to override or extend the styles applied. /\n classes?: HvCarouselClasses;\n /* Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio /\n height?: React.CSSProperties[\"height\"];\n /* Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio /\n thumbnailWidth?: React.CSSProperties[\"width\"];\n /* Title of the carousel /\n title?: React.ReactNode;\n /* Content slides to be displayed. @see `<HvCarouselSlide />` /\n children?: React.ReactNode;\n /* Custom content to render in the actions area /\n actions?: React.ReactNode;\n /* Whether Carousel is in \"xs mode\" - to use in embedded contexts /\n xs?: boolean;\n /* Whether to show dots instead of arrow pagination. Defaults to true under 5 elements /\n showDots?: boolean;\n /* Whether to show the counter on the top-right corner of the active slide /\n showCounter?: boolean;\n /* Whether to show the back/forwards buttons over the active slide /\n showSlideControls?: boolean;\n /* Whether to enable the fullscreen toggle button /\n showFullscreen?: boolean;\n /* Whether to hide the thumbnails. Hidden by default in \"xs\" mode /\n hideThumbnails?: boolean;\n /* Controls position. /\n controlsPosition?: \"top\" \| \"bottom\";\n /* Thumbnails position. /\n thumbnailsPosition?: \"top\" \| \"bottom\";\n /* Carousel configuration options. @see https://www.embla-carousel.com/api/options/ /\n carouselOptions?: Parameters<typeof useCarousel>[0];\n /* Function that renders the thumbnail. /\n renderThumbnail?: (index: number) => React.ReactNode;\n /* The callback fired when the active slide changes. /\n onChange?: (index: number) => void;\n /* The callback fired fullscreen is toggled. /\n onFullscreen?: (\n event: React.MouseEvent<HTMLButtonElement>,\n isFullscreen: boolean,\n ) => void;\n /* Labels used on the component. /\n labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\n/\n A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n const {\n className,\n classes: classesProp,\n height: heightProp = \"auto\",\n thumbnailWidth = 90,\n title,\n children,\n actions: actionsProp,\n xs,\n showDots: showDotsProp,\n showCounter: showCounterProp,\n showSlideControls,\n showFullscreen: showFullscreenProp,\n hideThumbnails: hideThumbnailsProp,\n controlsPosition: controlsPositionProp,\n thumbnailsPosition: thumbnailsPositionProp,\n labels: labelsProps,\n carouselOptions,\n renderThumbnail,\n onChange,\n onFullscreen,\n ...others\n } = useDefaultProps(\"HvCarousel\", props);\n const { activeTheme } = useTheme();\n const { classes, css, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProps);\n const thumbnailsRef = useRef<HTMLDivElement>(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n\n const isDs3 = activeTheme?.name === \"ds3\";\n const actionsPosition = isDs3 ? \"header\" : \"controls\";\n const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n const [containerRef, controller] = useCarousel({\n align: \"start\",\n loop: true,\n ...carouselOptions,\n });\n\n const [selectedIndex, setSelectedIndex] = useState(\n carouselOptions?.startIndex ?? 0,\n );\n\n const numSlides = Children.count(children);\n\n const handlePrevious = useCallback(() => {\n controller?.scrollPrev();\n }, [controller]);\n\n const handleNext = useCallback(() => {\n controller?.scrollNext();\n }, [controller]);\n\n const handleScroll = (index: number) => {\n controller?.scrollTo(index);\n };\n\n const handleSelect = useCallback(() => {\n if (!controller) return;\n\n const slideIndex = controller.selectedScrollSnap();\n setSelectedIndex(slideIndex);\n\n // scroll to thumbnail button\n thumbnailsRef.current\n ?.querySelectorAll(\"button\")\n ?.[slideIndex]?.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n });\n\n onChange?.(slideIndex);\n }, [controller, onChange]);\n\n useEffect(() => {\n if (!controller) return;\n\n controller.on(\"select\", handleSelect);\n\n return () => {\n controller.off(\"select\", handleSelect);\n };\n }, [controller, handleSelect]);\n\n useEffect(() => {\n if (!controller) return;\n\n controller.reInit();\n setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides));\n }, [numSlides, controller]);\n\n const handleFullscreen: HvIconButtonProps[\"onClick\"] = (event) => {\n onFullscreen?.(event, !isFullscreen);\n setIsFullscreen((curr) => !curr);\n };\n\n const canPrev = controller?.canScrollPrev() ?? false;\n const canNext = controller?.canScrollNext() ?? false;\n const showTitle = !!title && (!xs \|\| isFullscreen);\n const showFullscreen = showFullscreenProp ?? xs;\n const height = isFullscreen ? \"100%\" : (heightProp ?? \"auto\");\n const showCounter = xs;\n const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n const showThumbnails = !hideThumbnails && !!renderThumbnail;\n const showDots = showDotsProp ?? numSlides <= 5;\n\n const actions = (\n <div\n className={cx(\n classes.actions,\n actionsPosition === \"header\"\n ? css({ position: \"relative\", top: -40, height: 0 })\n : css({ position: \"absolute\" }),\n )}\n >\n {actionsProp}\n {showFullscreen && (\n <HvIconButton\n title={isFullscreen ? labels.close : labels.fullscreen}\n onClick={handleFullscreen}\n className={classes.closeButton}\n >\n {isFullscreen ? <Close /> : <Fullscreen />}\n </HvIconButton>\n )}\n </div>\n );\n\n const controls = (\n <HvCarouselControls\n classes={classes}\n showDots={showDots}\n page={selectedIndex}\n pages={numSlides}\n canPrevious={canPrev}\n canNext={canNext}\n onPreviousClick={handlePrevious}\n onNextClick={handleNext}\n actions={actionsPosition === \"controls\" && actions}\n labels={{\n backwards: labels.backwards,\n forwards: labels.forwards,\n }}\n />\n );\n\n const thumbnails = showThumbnails && (\n <HvCarouselThumbnails\n classes={classes}\n ref={thumbnailsRef}\n page={selectedIndex}\n pages={numSlides}\n width={thumbnailWidth}\n onThumbnailClick={(evt, i) => handleScroll(i)}\n renderThumbnail={renderThumbnail}\n />\n );\n\n return (\n <HvContainer\n className={cx(classes.root, className, {\n [classes.xs]: xs,\n [classes.fullscreen]: isFullscreen,\n })}\n {...others}\n >\n {showTitle && (\n <HvTypography variant=\"title2\" className={classes.title}>\n {title}\n </HvTypography>\n )}\n\n {actionsPosition === \"header\" && actions}\n {thumbnailsPosition === \"top\" && thumbnails}\n {controlsPosition === \"top\" && controls}\n <div\n className={cx(classes.main, {\n [classes.mainXs]: xs,\n [classes.mainFullscreen]: isFullscreen,\n })}\n >\n {showCounter && (\n <div className={classes.counterContainer}>\n <span className={classes.counter}>\n {`${selectedIndex + 1}/${numSlides}`}\n </span>\n </div>\n )}\n\n {showSlideControls && (\n <div className={classes.slideControls}>\n <HvButton\n icon\n disabled={!canPrev}\n variant=\"secondarySubtle\"\n aria-label={labels.backwards}\n onClick={handlePrevious}\n >\n <Backwards iconSize=\"XS\" />\n </HvButton>\n <HvButton\n icon\n disabled={!canNext}\n variant=\"secondarySubtle\"\n aria-label={labels.forwards}\n onClick={handleNext}\n >\n <Forwards iconSize=\"XS\" />\n </HvButton>\n </div>\n )}\n\n <div\n ref={containerRef}\n style={{ height }}\n className={classes.slidesViewport}\n >\n <div className={classes.slidesContainer}>{children}</div>\n </div>\n </div>\n {controlsPosition === \"bottom\" && controls}\n {thumbnailsPosition === \"bottom\" && thumbnails}\n </HvContainer>\n );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvCarousel", {
   /** Styles applied to the component root class. */
   root: {

package/dist/esm/Carousel/CarouselSlide/CarouselSlide.styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvCarouselSlide", {
   slide: {},
   image: {

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

@@ -1,6 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
 import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvCheckBox", {
   root: { display: "inline-block" },
   container: {

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

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvCheckBoxGroup", {
   root: {
     display: "inline-block",

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

@@ -1,4 +1,4 @@
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvColorPicker", {
   root: {},
   labelContainer: {

package/dist/esm/ColorPicker/Fields/Fields.styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const name = "HvColorPicker-Fields";
 const { staticClasses, useClasses } = createClasses(name, {
   fields: {

package/dist/esm/ColorPicker/Picker/Picker.js CHANGED Viewed

@@ -2,8 +2,8 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { CustomPicker } from "react-color";
 import { Saturation, Hue } from "react-color/lib/components/common";
+import { useTheme } from "@hitachivantara/uikit-react-shared";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { useTheme } from "../../hooks/useTheme.js";
 import { useClasses } from "./Picker.styles.js";
 import { staticClasses } from "./Picker.styles.js";
 import { Fields } from "../Fields/Fields.js";

package/dist/esm/ColorPicker/Picker/Picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Picker.js","sources":["../../../../src/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport {\n CustomPicker,\n CustomPickerInjectedProps,\n HSLColor,\n HSVColor,\n RGBColor,\n} from \"react-color\";\nimport { Hue, Saturation } from \"react-color/lib/components/common\";\n\nimport { ~~useDefaultProps~~ } from \"~~../../hooks~~/~~useDefaultProps~~\";\nimport { ~~useTheme~~ } from \"../../hooks/~~useTheme~~\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { Fields } from \"../Fields\";\nimport { staticClasses, useClasses } from \"./Picker.styles\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\ninterface PickerProps\n extends CustomPickerInjectedProps<\n \| HSLColor\n \| HSVColor\n \| RGBColor\n \| {\n source?: string;\n hex?: string;\n }\n > {\n classes?: HvColorPickerPickerClasses;\n title?: string;\n}\n\nconst Component = (props: PickerProps) => {\n const {\n onChange,\n rgb,\n hsl,\n hsv,\n hex,\n title,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerPicker\", props);\n const { activeTheme } = useTheme();\n const { classes } = useClasses(classesProp);\n\n const SaturationPointer = useCallback(\n () => <div className={classes?.saturationPointer} />,\n [classes?.saturationPointer],\n );\n\n const HueSlider = useCallback(\n () => <div className={classes?.hueSlider} />,\n [classes?.hueSlider],\n );\n\n return (\n <>\n {title && (\n <HvTypography className={classes.title} variant=\"caption1\">\n {title}\n </HvTypography>\n )}\n <div className={classes.pickers}>\n <div className={classes.saturation}>\n <Saturation\n hsl={hsl}\n hsv={hsv}\n onChange={onChange}\n pointer={SaturationPointer}\n />\n </div>\n <div className={classes.hue}>\n <Hue\n direction={activeTheme?.colorPicker.hueDirection}\n hsl={hsl}\n onChange={onChange}\n pointer={HueSlider}\n />\n </div>\n </div>\n <Fields\n className={classes.fields}\n rgb={rgb}\n hex={hex}\n onChange={onChange}\n />\n </>\n );\n};\n\nexport const Picker = CustomPicker(Component);\n"],"names":[],"mappings":";;;;;;;;;;AAmCA,MAAM,YAAY,CAAC,UAAuB;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,uBAAuB,KAAK;AAC1C,QAAA,EAAE,gBAAgB;AACxB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,oBAAoB;AAAA,IACxB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,kBAAmB,CAAA;AAAA,IAClD,CAAC,SAAS,iBAAiB;AAAA,EAAA;AAG7B,QAAM,YAAY;AAAA,IAChB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,UAAW,CAAA;AAAA,IAC1C,CAAC,SAAS,SAAS;AAAA,EAAA;AAGrB,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAW,QAAQ,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,MACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,KACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,YAAY;AAAA,UACpC;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEa,MAAA,SAAS,aAAa,SAAS;"}
1	+ {"version":3,"file":"Picker.js","sources":["../../../../src/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport {\n CustomPicker,\n CustomPickerInjectedProps,\n HSLColor,\n HSVColor,\n RGBColor,\n} from \"react-color\";\nimport { Hue, Saturation } from \"react-color/lib/components/common\";\nimport { useTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { Fields } from \"../Fields\";\nimport { staticClasses, useClasses } from \"./Picker.styles\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\ninterface PickerProps\n extends CustomPickerInjectedProps<\n \| HSLColor\n \| HSVColor\n \| RGBColor\n \| {\n source?: string;\n hex?: string;\n }\n > {\n classes?: HvColorPickerPickerClasses;\n title?: string;\n}\n\nconst Component = (props: PickerProps) => {\n const {\n onChange,\n rgb,\n hsl,\n hsv,\n hex,\n title,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerPicker\", props);\n const { activeTheme } = useTheme();\n const { classes } = useClasses(classesProp);\n\n const SaturationPointer = useCallback(\n () => <div className={classes?.saturationPointer} />,\n [classes?.saturationPointer],\n );\n\n const HueSlider = useCallback(\n () => <div className={classes?.hueSlider} />,\n [classes?.hueSlider],\n );\n\n return (\n <>\n {title && (\n <HvTypography className={classes.title} variant=\"caption1\">\n {title}\n </HvTypography>\n )}\n <div className={classes.pickers}>\n <div className={classes.saturation}>\n <Saturation\n hsl={hsl}\n hsv={hsv}\n onChange={onChange}\n pointer={SaturationPointer}\n />\n </div>\n <div className={classes.hue}>\n <Hue\n direction={activeTheme?.colorPicker.hueDirection}\n hsl={hsl}\n onChange={onChange}\n pointer={HueSlider}\n />\n </div>\n </div>\n <Fields\n className={classes.fields}\n rgb={rgb}\n hex={hex}\n onChange={onChange}\n />\n </>\n );\n};\n\nexport const Picker = CustomPicker(Component);\n"],"names":[],"mappings":";;;;;;;;;;AAmCA,MAAM,YAAY,CAAC,UAAuB;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,uBAAuB,KAAK;AAC1C,QAAA,EAAE,gBAAgB;AACxB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,oBAAoB;AAAA,IACxB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,kBAAmB,CAAA;AAAA,IAClD,CAAC,SAAS,iBAAiB;AAAA,EAAA;AAG7B,QAAM,YAAY;AAAA,IAChB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,UAAW,CAAA;AAAA,IAC1C,CAAC,SAAS,SAAS;AAAA,EAAA;AAGrB,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAW,QAAQ,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,MACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,KACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,YAAY;AAAA,UACpC;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEa,MAAA,SAAS,aAAa,SAAS;"}

package/dist/esm/ColorPicker/Picker/Picker.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const name = "HvColorPicker-Picker";
 const { staticClasses, useClasses } = createClasses(name, {
   pickers: {

package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const name = "HvColorPicker-PresetColors";
 const { staticClasses, useClasses } = createClasses(name, {
   root: { width: "232px" },