@hitachivantara/uikit-react-core 5.0.0-next.8 → 5.0.0-next.9

package/dist/esm/components/BaseDropdown/BaseDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseDropdown.js","sources":["../../../../src/components/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import React, { useMemo, useState, useCallback, useContext } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport clsx from \"clsx\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\nimport {\n  ClickAwayListener,\n  PopperPlacementType,\n  PopperProps,\n} from \"@mui/material\";\nimport { useControlled, useForkRef, useUniqueId } from \"hooks\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { getFirstAndLastFocus } from \"utils/focusableElementFinder\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledAnchor,\n  StyledContainer,\n  StyledDropDownXS,\n  StyledDropUpXS,\n  StyledExtension,\n  StyledHeaderRoot,\n  StyledPanel,\n  StyledPlaceholder,\n  StyledRoot,\n  StyledSelection,\n} from \"./BaseDropdown.styles\";\nimport { usePopper } from \"react-popper\";\nimport { detectOverflow, ModifierArguments, Options } from \"@popperjs/core\";\nimport { HvThemeContext } from \"providers\";\nimport baseDropdownClasses, {\n  HvBaseDropdownClasses,\n} from \"./baseDropdownClasses\";\n\nconst { Tab, Enter, Esc, Space, ArrowDown } = keyboardCodes;\n\nexport type HvBaseDropdownProps = HvBaseProps<\n  HTMLDivElement,\n  { placeholder }\n> & {\n  /**\n   * The role of the element that triggers the popup.\n   *\n   * Defaults to \"combobox\" if `component` and the default\n   * \"textbox\" header is used, undefined otherwise.\n   */\n  role?: string;\n  /**\n   * Header placeholder.\n   */\n  placeholder?: string | React.ReactNode;\n  /**\n   * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the dropdown will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps>;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * Replacement for the header component.\n   */\n  component?: React.ReactNode;\n  /**\n   * Adornment to replace the default arrows.\n   */\n  adornment?: React.ReactNode;\n  /**\n   * When dropdown changes the expanded state.\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * When user click outside the open container.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * Callback called when the dropdown is opened and ready,\n   * commonly used to set focus to the content.\n   */\n  onContainerCreation?: (container: HTMLElement | null) => void;\n  /**\n   * Attributes applied to the dropdown header element.\n   */\n  dropdownHeaderProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n  /**\n   * Pass a ref to the dropdown header element.\n   */\n  dropdownHeaderRef?: React.Ref<any>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvBaseDropdownClasses;\n};\n\nexport const HvBaseDropdown = ({\n  id,\n  className,\n  classes,\n  children,\n  role,\n  placeholder,\n  component,\n  adornment,\n  expanded,\n  dropdownHeaderProps,\n  defaultExpanded = false,\n  disabled = false,\n  readOnly = false,\n  disablePortal = false,\n  variableWidth = false,\n  placement = \"right\",\n  popperProps = {},\n  dropdownHeaderRef: dropdownHeaderRefProp,\n  onToggle,\n  onClickOutside,\n  onContainerCreation,\n  ...others\n}: HvBaseDropdownProps) => {\n  const { rootId } = useContext(HvThemeContext);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(\n    null\n  );\n  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);\n  const [popperMaxSize, setPopperMaxSize] = useState<{\n    width?: number;\n    height?: number;\n  }>({});\n\n  const handleDropdownHeaderRefProp = useForkRef(\n    dropdownHeaderRefProp,\n    dropdownHeaderProps?.ref\n  );\n  const handleDropdownHeaderRef = useForkRef(\n    setReferenceElement,\n    handleDropdownHeaderRefProp\n  );\n\n  const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n  const elementId = useUniqueId(id, \"hvbasedropdown\");\n\n  const bottom: PopperPlacementType =\n    placement && `bottom-${placement === \"right\" ? \"start\" : \"end\"}`;\n\n  const extensionWidth = referenceElement\n    ? referenceElement?.offsetWidth\n    : \"inherit\";\n\n  const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n    popperProps;\n\n  const onFirstUpdate = useCallback(() => {\n    if (onContainerCreation) onContainerCreation(popperElement);\n  }, [onContainerCreation, popperElement]);\n\n  const widthCalculator = useCallback(\n    ({ state }: ModifierArguments<Options>) => {\n      state.styles.popper.width = `${state.rects.reference.width}px`;\n    },\n    []\n  );\n\n  const widthCalculatorEffect = useCallback(\n    ({ state }: ModifierArguments<Options>) => {\n      state.elements.popper.style.width = `${\n        (state.elements.reference as any).offsetWidth\n      }px`;\n    },\n    []\n  );\n\n  const applyMaxSizeCalculator = useCallback(\n    ({ state }: ModifierArguments<Options>) => {\n      // The `maxSize` modifier provides this data\n      const { width, height } = state.modifiersData.maxSize;\n      if (width !== popperMaxSize?.width || height !== popperMaxSize?.height) {\n        setPopperMaxSize({ width, height });\n      }\n\n      state.styles.popper = {\n        ...state.styles.popper,\n        maxWidth: `${width}px`,\n        maxHeight: `${height}px`,\n      };\n    },\n    [popperMaxSize]\n  );\n\n  const maxSizeCalculator = useCallback(\n    ({ state, name, options }: ModifierArguments<Options>) => {\n      const overflow = detectOverflow(state, options);\n\n      const x = state.modifiersData.preventOverflow?.x || 0;\n      const y = state.modifiersData.preventOverflow?.y || 0;\n\n      const popperWidth = state.rects.popper.width;\n      const popperHeight = state.rects.popper.height;\n\n      const basePlacement = state.placement.split(\"-\")[0];\n\n      const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n      const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n      state.modifiersData[name] = {\n        width: popperWidth - overflow[widthProp] - x,\n        height: popperHeight - overflow[heightProp] - y,\n      };\n    },\n    []\n  );\n\n  const modifiers: any = useMemo(\n    () => [\n      {\n        name: \"variableWidth\",\n        enabled: !variableWidth,\n        phase: \"beforeWrite\",\n        requires: [\"computeStyles\"],\n        fn: widthCalculator,\n        effect: widthCalculatorEffect,\n      },\n      {\n        name: \"maxSize\",\n        enabled: true,\n        phase: \"main\",\n        requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n        fn: maxSizeCalculator,\n      },\n      {\n        name: \"applyMaxSize\",\n        enabled: true,\n        phase: \"beforeWrite\",\n        requires: [\"maxSize\"],\n        fn: applyMaxSizeCalculator,\n      },\n      ...popperPropsModifiers,\n    ],\n    [\n      maxSizeCalculator,\n      applyMaxSizeCalculator,\n      popperPropsModifiers,\n      variableWidth,\n      widthCalculator,\n      widthCalculatorEffect,\n    ]\n  );\n\n  const { styles: popperStyles, attributes } = usePopper(\n    referenceElement,\n    popperElement,\n    {\n      placement: bottom,\n      modifiers,\n      onFirstUpdate,\n      ...otherPopperProps,\n    }\n  );\n\n  let popperPlacement = \"bottom\";\n  if (attributes.popper) {\n    popperPlacement = attributes.popper[\"data-popper-placement\"];\n  }\n\n  const handleToggle = useCallback(\n    (event) => {\n      if (event && !isKeypress(event, Tab)) {\n        event.preventDefault();\n      }\n\n      // We are checking specifically for false because if \"isKeypress\" returns true or undefined it should continue\n      const notControlKey = [Tab, Enter, Esc, ArrowDown, Space].every(\n        (key) => isKeypress(event, key) === false\n      );\n\n      const ignoredCombinations =\n        (isKeypress(event, Esc) && !isOpen) ||\n        (isKeypress(event, ArrowDown) && isOpen) ||\n        (isKeypress(event, Tab) && !isOpen);\n\n      if (disabled || notControlKey || ignoredCombinations) return;\n\n      const newOpen = !isOpen;\n\n      /* If about to close focus on the header component. */\n      const focusHeader = () => {\n        if (!newOpen) {\n          // Focus-ring won't be visible even if using the keyboard:\n          // https://github.com/WICG/focus-visible/issues/88\n          referenceElement?.focus({ preventScroll: true });\n        }\n\n        return newOpen;\n      };\n      setIsOpen(focusHeader());\n\n      onToggle?.(event, newOpen);\n    },\n    [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n  );\n\n  const headerComponent = (() => {\n    if (component) {\n      return React.cloneElement(component as React.ReactElement, {\n        ref: handleDropdownHeaderRef,\n      });\n    }\n\n    return (\n      <StyledHeaderRoot\n        id={setId(id, \"header\")}\n        className={clsx(\n          baseDropdownClasses.header,\n          classes?.header,\n          disabled &&\n            clsx(baseDropdownClasses.headerDisabled, classes?.headerDisabled),\n          readOnly &&\n            clsx(baseDropdownClasses.headerReadOnly, classes?.headerReadOnly),\n          isOpen && clsx(baseDropdownClasses.headerOpen, classes?.headerOpen),\n          isOpen &&\n            popperPlacement.includes(\"top\") &&\n            clsx(baseDropdownClasses.headerOpenUp, classes?.headerOpenUp),\n          isOpen &&\n            popperPlacement.includes(\"bottom\") &&\n            clsx(baseDropdownClasses.headerOpenDown, classes?.headerOpenDown)\n        )}\n        $disabled={disabled}\n        $readOnly={readOnly}\n        $opened={isOpen}\n        $openedUp={isOpen && popperPlacement.includes(\"top\")}\n        $openedDown={isOpen && popperPlacement.includes(\"bottom\")}\n        role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n        style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n        aria-controls={\n          isOpen ? setId(elementId, \"children-container\") : undefined\n        }\n        aria-label={others[\"aria-label\"] ?? undefined}\n        aria-labelledby={others[\"aria-labelledby\"] ?? undefined}\n        // Removes the element from the navigation sequence for keyboard focus if disabled\n        tabIndex={disabled ? -1 : 0}\n        ref={handleDropdownHeaderRef}\n        {...dropdownHeaderProps}\n      >\n        <StyledSelection\n          className={clsx(baseDropdownClasses.selection, classes?.selection)}\n        >\n          {placeholder && typeof placeholder === \"string\" ? (\n            <StyledPlaceholder\n              className={clsx(\n                baseDropdownClasses.placeholder,\n                classes?.placeholder,\n                disabled &&\n                  clsx(\n                    baseDropdownClasses.selectionDisabled,\n                    classes?.selectionDisabled\n                  )\n              )}\n              $disabled={disabled}\n              variant=\"body\"\n            >\n              {placeholder}\n            </StyledPlaceholder>\n          ) : (\n            placeholder\n          )}\n        </StyledSelection>\n        {adornment ||\n          (isOpen ? (\n            <StyledDropUpXS\n              iconSize=\"XS\"\n              className={clsx(baseDropdownClasses.arrow, classes?.arrow)}\n            />\n          ) : (\n            <StyledDropDownXS\n              iconSize=\"XS\"\n              className={clsx(baseDropdownClasses.arrow, classes?.arrow)}\n              $disabled={disabled}\n            />\n          ))}\n      </StyledHeaderRoot>\n    );\n  })();\n\n  const containerComponent = (() => {\n    /**\n     *  Handle keyboard inside children container.\n     */\n    const handleContainerKeyDown = (event) => {\n      if (isKeypress(event, Esc)) {\n        handleToggle(event);\n      }\n      if (isKeypress(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 = (event) => {\n      const isButtonClick = referenceElement?.contains(event.target);\n      if (!isButtonClick) {\n        onClickOutside?.(event);\n        setIsOpen(false);\n        onToggle?.(event, false);\n      }\n    };\n\n    const container = (\n      <StyledContainer\n        role=\"tooltip\"\n        ref={setPopperElement}\n        className={clsx(baseDropdownClasses.container, classes?.container)}\n        style={popperStyles.popper}\n        {...attributes.popper}\n      >\n        <ClickAwayListener onClickAway={handleOutside}>\n          <div onKeyDown={handleContainerKeyDown}>\n            {popperPlacement.includes(\"bottom\") && (\n              <StyledExtension\n                style={{ width: extensionWidth }}\n                className={clsx(\n                  baseDropdownClasses.inputExtensionOpen,\n                  classes?.inputExtensionOpen,\n                  popperPlacement.includes(\"end\") &&\n                    clsx(\n                      baseDropdownClasses.inputExtensionLeftPosition,\n                      classes?.inputExtensionLeftPosition\n                    )\n                )}\n                $leftPosition={popperPlacement.includes(\"end\")}\n                $openShadow={false}\n                $floatLeft={false}\n                $floatRight={false}\n              />\n            )}\n            <BaseDropdownContext.Provider value={popperMaxSize}>\n              <StyledPanel\n                id={setId(elementId, \"children-container\")}\n                className={clsx(baseDropdownClasses.panel, classes?.panel)}\n              >\n                {children}\n              </StyledPanel>\n            </BaseDropdownContext.Provider>\n            {popperPlacement.includes(\"top\") && (\n              <StyledExtension\n                style={{ width: extensionWidth }}\n                className={clsx(\n                  baseDropdownClasses.inputExtensionOpen,\n                  classes?.inputExtensionOpen,\n                  baseDropdownClasses.inputExtensionOpenShadow,\n                  classes?.inputExtensionOpenShadow,\n                  popperPlacement.includes(\"end\") &&\n                    clsx(\n                      baseDropdownClasses.inputExtensionFloatRight,\n                      classes?.inputExtensionFloatRight\n                    ),\n                  popperPlacement.includes(\"start\") &&\n                    clsx(\n                      baseDropdownClasses.inputExtensionFloatLeft,\n                      classes?.inputExtensionFloatLeft\n                    )\n                )}\n                $leftPosition={false}\n                $openShadow={true}\n                $floatLeft={popperPlacement.includes(\"start\")}\n                $floatRight={popperPlacement.includes(\"end\")}\n              />\n            )}\n          </div>\n        </ClickAwayListener>\n      </StyledContainer>\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    <StyledRoot className={clsx(baseDropdownClasses.root, classes?.root)}>\n      <StyledAnchor\n        id={id}\n        role={ariaRole}\n        aria-expanded={!!isOpen}\n        aria-owns={isOpen ? setId(elementId, \"children-container\") : undefined}\n        className={clsx(\n          className,\n          baseDropdownClasses.anchor,\n          classes?.anchor,\n          disabled &&\n            clsx(baseDropdownClasses.rootDisabled, classes?.rootDisabled)\n        )}\n        $disabled={disabled}\n        {...(!readOnly && {\n          onKeyDown: handleToggle,\n          onClick: handleToggle,\n        })}\n        // Removes the element from the navigation sequence for keyboard focus\n        tabIndex={-1}\n        {...others}\n      >\n        {headerComponent}\n      </StyledAnchor>\n      {isOpen && containerComponent}\n    </StyledRoot>\n  );\n};\n"],"names":["Tab","Enter","Esc","Space","ArrowDown","keyboardCodes","HvBaseDropdown","id","className","classes","children","role","placeholder","component","adornment","expanded","dropdownHeaderProps","defaultExpanded","disabled","readOnly","disablePortal","variableWidth","placement","popperProps","dropdownHeaderRef","dropdownHeaderRefProp","onToggle","onClickOutside","onContainerCreation","others","rootId","useContext","HvThemeContext","isOpen","setIsOpen","useControlled","Boolean","referenceElement","setReferenceElement","useState","popperElement","setPopperElement","popperMaxSize","setPopperMaxSize","handleDropdownHeaderRefProp","useForkRef","ref","handleDropdownHeaderRef","ariaRole","undefined","elementId","useUniqueId","bottom","extensionWidth","offsetWidth","modifiers","popperPropsModifiers","otherPopperProps","onFirstUpdate","useCallback","widthCalculator","state","styles","popper","width","rects","reference","widthCalculatorEffect","elements","style","applyMaxSizeCalculator","height","modifiersData","maxSize","maxWidth","maxHeight","maxSizeCalculator","name","options","overflow","detectOverflow","x","preventOverflow","y","popperWidth","popperHeight","basePlacement","split","widthProp","heightProp","useMemo","enabled","phase","requires","fn","effect","requiresIfExists","popperStyles","attributes","usePopper","popperPlacement","handleToggle","event","isKeypress","preventDefault","notControlKey","every","key","ignoredCombinations","newOpen","focusHeader","focus","preventScroll","headerComponent","React","cloneElement","StyledHeaderRoot","setId","clsx","baseDropdownClasses","header","headerDisabled","headerReadOnly","headerOpen","includes","headerOpenUp","headerOpenDown","$disabled","$readOnly","$opened","$openedUp","$openedDown","pointerEvents","tabIndex","_jsx","StyledSelection","selection","StyledPlaceholder","selectionDisabled","variant","StyledDropUpXS","iconSize","arrow","StyledDropDownXS","containerComponent","handleContainerKeyDown","shiftKey","focusList","getFirstAndLastFocus","document","activeElement","last","first","handleOutside","isButtonClick","contains","target","container","StyledContainer","ClickAwayListener","onClickAway","onKeyDown","StyledExtension","inputExtensionOpen","inputExtensionLeftPosition","$leftPosition","$openShadow","$floatLeft","$floatRight","BaseDropdownContext","Provider","value","StyledPanel","panel","inputExtensionOpenShadow","inputExtensionFloatRight","inputExtensionFloatLeft","createPortal","getElementById","body","StyledRoot","root","StyledAnchor","anchor","rootDisabled","onClick"],"mappings":"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"}
+{"version":3,"file":"BaseDropdown.js","sources":["../../../../src/components/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import React, { useMemo, useState, useCallback, useContext } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport clsx from \"clsx\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\nimport {\n  ClickAwayListener,\n  PopperPlacementType,\n  PopperProps,\n} from \"@mui/material\";\nimport { useControlled, useForkRef, useUniqueId } from \"hooks\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { getFirstAndLastFocus } from \"utils/focusableElementFinder\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledAnchor,\n  StyledContainer,\n  StyledDropDownXS,\n  StyledDropUpXS,\n  StyledExtension,\n  StyledHeaderRoot,\n  StyledPanel,\n  StyledPlaceholder,\n  StyledRoot,\n  StyledSelection,\n} from \"./BaseDropdown.styles\";\nimport { usePopper } from \"react-popper\";\nimport { detectOverflow, ModifierArguments, Options } from \"@popperjs/core\";\nimport { HvThemeContext } from \"providers\";\nimport baseDropdownClasses, {\n  HvBaseDropdownClasses,\n} from \"./baseDropdownClasses\";\n\nconst { Tab, Enter, Esc, Space, ArrowDown } = keyboardCodes;\n\nexport type HvBaseDropdownProps = HvBaseProps<\n  HTMLDivElement,\n  { placeholder }\n> & {\n  /**\n   * The role of the element that triggers the popup.\n   *\n   * Defaults to \"combobox\" if `component` and the default\n   * \"textbox\" header is used, undefined otherwise.\n   */\n  role?: string;\n  /**\n   * Header placeholder.\n   */\n  placeholder?: string | React.ReactNode;\n  /**\n   * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the dropdown will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps>;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * Replacement for the header component.\n   */\n  component?: React.ReactNode;\n  /**\n   * Adornment to replace the default arrows.\n   */\n  adornment?: React.ReactNode;\n  /**\n   * When dropdown changes the expanded state.\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * When user click outside the open container.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * Callback called when the dropdown is opened and ready,\n   * commonly used to set focus to the content.\n   */\n  onContainerCreation?: (container: HTMLElement | null) => void;\n  /**\n   * Attributes applied to the dropdown header element.\n   */\n  dropdownHeaderProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n  /**\n   * Pass a ref to the dropdown header element.\n   */\n  dropdownHeaderRef?: React.Ref<any>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvBaseDropdownClasses;\n};\n\nexport const HvBaseDropdown = ({\n  id,\n  className,\n  classes,\n  children,\n  role,\n  placeholder,\n  component,\n  adornment,\n  expanded,\n  dropdownHeaderProps,\n  defaultExpanded = false,\n  disabled = false,\n  readOnly = false,\n  disablePortal = false,\n  variableWidth = false,\n  placement = \"right\",\n  popperProps = {},\n  dropdownHeaderRef: dropdownHeaderRefProp,\n  onToggle,\n  onClickOutside,\n  onContainerCreation,\n  ...others\n}: HvBaseDropdownProps) => {\n  const { rootId } = useContext(HvThemeContext);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(\n    null\n  );\n  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);\n  const [popperMaxSize, setPopperMaxSize] = useState<{\n    width?: number;\n    height?: number;\n  }>({});\n\n  const handleDropdownHeaderRefProp = useForkRef(\n    dropdownHeaderRefProp,\n    dropdownHeaderProps?.ref\n  );\n  const handleDropdownHeaderRef = useForkRef(\n    setReferenceElement,\n    handleDropdownHeaderRefProp\n  );\n\n  const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n  const elementId = useUniqueId(id, \"hvbasedropdown\");\n\n  const bottom: PopperPlacementType =\n    placement && `bottom-${placement === \"right\" ? \"start\" : \"end\"}`;\n\n  const extensionWidth = referenceElement\n    ? referenceElement?.offsetWidth\n    : \"inherit\";\n\n  const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n    popperProps;\n\n  const onFirstUpdate = useCallback(() => {\n    if (onContainerCreation) onContainerCreation(popperElement);\n  }, [onContainerCreation, popperElement]);\n\n  const widthCalculator = useCallback(\n    ({ state }: ModifierArguments<Options>) => {\n      state.styles.popper.width = `${state.rects.reference.width}px`;\n    },\n    []\n  );\n\n  const widthCalculatorEffect = useCallback(\n    ({ state }: ModifierArguments<Options>) => {\n      state.elements.popper.style.width = `${\n        (state.elements.reference as any).offsetWidth\n      }px`;\n    },\n    []\n  );\n\n  const applyMaxSizeCalculator = useCallback(\n    ({ state }: ModifierArguments<Options>) => {\n      // The `maxSize` modifier provides this data\n      const { width, height } = state.modifiersData.maxSize;\n      if (width !== popperMaxSize?.width || height !== popperMaxSize?.height) {\n        setPopperMaxSize({ width, height });\n      }\n\n      state.styles.popper = {\n        ...state.styles.popper,\n        maxWidth: `${width}px`,\n        maxHeight: `${height}px`,\n      };\n    },\n    [popperMaxSize]\n  );\n\n  const maxSizeCalculator = useCallback(\n    ({ state, name, options }: ModifierArguments<Options>) => {\n      const overflow = detectOverflow(state, options);\n\n      const x = state.modifiersData.preventOverflow?.x || 0;\n      const y = state.modifiersData.preventOverflow?.y || 0;\n\n      const popperWidth = state.rects.popper.width;\n      const popperHeight = state.rects.popper.height;\n\n      const basePlacement = state.placement.split(\"-\")[0];\n\n      const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n      const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n      state.modifiersData[name] = {\n        width: popperWidth - overflow[widthProp] - x,\n        height: popperHeight - overflow[heightProp] - y,\n      };\n    },\n    []\n  );\n\n  const modifiers: any = useMemo(\n    () => [\n      {\n        name: \"variableWidth\",\n        enabled: !variableWidth,\n        phase: \"beforeWrite\",\n        requires: [\"computeStyles\"],\n        fn: widthCalculator,\n        effect: widthCalculatorEffect,\n      },\n      {\n        name: \"maxSize\",\n        enabled: true,\n        phase: \"main\",\n        requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n        fn: maxSizeCalculator,\n      },\n      {\n        name: \"applyMaxSize\",\n        enabled: true,\n        phase: \"beforeWrite\",\n        requires: [\"maxSize\"],\n        fn: applyMaxSizeCalculator,\n      },\n      ...popperPropsModifiers,\n    ],\n    [\n      maxSizeCalculator,\n      applyMaxSizeCalculator,\n      popperPropsModifiers,\n      variableWidth,\n      widthCalculator,\n      widthCalculatorEffect,\n    ]\n  );\n\n  const { styles: popperStyles, attributes } = usePopper(\n    referenceElement,\n    popperElement,\n    {\n      placement: bottom,\n      modifiers,\n      onFirstUpdate,\n      ...otherPopperProps,\n    }\n  );\n\n  let popperPlacement = \"bottom\";\n  if (attributes.popper) {\n    popperPlacement = attributes.popper[\"data-popper-placement\"];\n  }\n\n  const handleToggle = useCallback(\n    (event) => {\n      if (event && !isKeypress(event, Tab)) {\n        event.preventDefault();\n      }\n\n      // We are checking specifically for false because if \"isKeypress\" returns true or undefined it should continue\n      const notControlKey = [Tab, Enter, Esc, ArrowDown, Space].every(\n        (key) => isKeypress(event, key) === false\n      );\n\n      const ignoredCombinations =\n        (isKeypress(event, Esc) && !isOpen) ||\n        (isKeypress(event, ArrowDown) && isOpen) ||\n        (isKeypress(event, Tab) && !isOpen);\n\n      if (disabled || notControlKey || ignoredCombinations) return;\n\n      const newOpen = !isOpen;\n\n      /* If about to close focus on the header component. */\n      const focusHeader = () => {\n        if (!newOpen) {\n          // Focus-ring won't be visible even if using the keyboard:\n          // https://github.com/WICG/focus-visible/issues/88\n          referenceElement?.focus({ preventScroll: true });\n        }\n\n        return newOpen;\n      };\n      setIsOpen(focusHeader());\n\n      onToggle?.(event, newOpen);\n    },\n    [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n  );\n\n  const headerComponent = (() => {\n    if (component) {\n      return React.cloneElement(component as React.ReactElement, {\n        ref: handleDropdownHeaderRef,\n      });\n    }\n\n    return (\n      <StyledHeaderRoot\n        id={setId(id, \"header\")}\n        className={clsx(\n          baseDropdownClasses.header,\n          classes?.header,\n          disabled &&\n            clsx(baseDropdownClasses.headerDisabled, classes?.headerDisabled),\n          readOnly &&\n            clsx(baseDropdownClasses.headerReadOnly, classes?.headerReadOnly),\n          isOpen && clsx(baseDropdownClasses.headerOpen, classes?.headerOpen),\n          isOpen &&\n            popperPlacement.includes(\"top\") &&\n            clsx(baseDropdownClasses.headerOpenUp, classes?.headerOpenUp),\n          isOpen &&\n            popperPlacement.includes(\"bottom\") &&\n            clsx(baseDropdownClasses.headerOpenDown, classes?.headerOpenDown)\n        )}\n        $disabled={disabled}\n        $readOnly={readOnly}\n        $opened={isOpen}\n        $openedUp={isOpen && popperPlacement.includes(\"top\")}\n        $openedDown={isOpen && popperPlacement.includes(\"bottom\")}\n        role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n        style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n        aria-controls={\n          isOpen ? setId(elementId, \"children-container\") : undefined\n        }\n        aria-label={others[\"aria-label\"] ?? undefined}\n        aria-labelledby={others[\"aria-labelledby\"] ?? undefined}\n        // Removes the element from the navigation sequence for keyboard focus if disabled\n        tabIndex={disabled ? -1 : 0}\n        ref={handleDropdownHeaderRef}\n        {...dropdownHeaderProps}\n      >\n        <StyledSelection\n          className={clsx(baseDropdownClasses.selection, classes?.selection)}\n        >\n          {placeholder && typeof placeholder === \"string\" ? (\n            <StyledPlaceholder\n              className={clsx(\n                baseDropdownClasses.placeholder,\n                classes?.placeholder,\n                disabled &&\n                  clsx(\n                    baseDropdownClasses.selectionDisabled,\n                    classes?.selectionDisabled\n                  )\n              )}\n              $disabled={disabled}\n              variant=\"body\"\n            >\n              {placeholder}\n            </StyledPlaceholder>\n          ) : (\n            placeholder\n          )}\n        </StyledSelection>\n        {adornment ||\n          (isOpen ? (\n            <StyledDropUpXS\n              iconSize=\"XS\"\n              className={clsx(baseDropdownClasses.arrow, classes?.arrow)}\n            />\n          ) : (\n            <StyledDropDownXS\n              iconSize=\"XS\"\n              className={clsx(baseDropdownClasses.arrow, classes?.arrow)}\n              $disabled={disabled}\n            />\n          ))}\n      </StyledHeaderRoot>\n    );\n  })();\n\n  const containerComponent = (() => {\n    /**\n     *  Handle keyboard inside children container.\n     */\n    const handleContainerKeyDown = (event) => {\n      if (isKeypress(event, Esc)) {\n        handleToggle(event);\n      }\n      if (isKeypress(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 = (event) => {\n      const isButtonClick = referenceElement?.contains(event.target);\n      if (!isButtonClick) {\n        onClickOutside?.(event);\n        setIsOpen(false);\n        onToggle?.(event, false);\n      }\n    };\n\n    const container = (\n      <StyledContainer\n        role=\"tooltip\"\n        ref={setPopperElement}\n        className={clsx(baseDropdownClasses.container, classes?.container)}\n        style={popperStyles.popper}\n        {...attributes.popper}\n      >\n        <ClickAwayListener onClickAway={handleOutside}>\n          <div onKeyDown={handleContainerKeyDown}>\n            {popperPlacement.includes(\"bottom\") && (\n              <StyledExtension\n                style={{ width: extensionWidth }}\n                className={clsx(\n                  baseDropdownClasses.inputExtensionOpen,\n                  classes?.inputExtensionOpen,\n                  popperPlacement.includes(\"end\") &&\n                    clsx(\n                      baseDropdownClasses.inputExtensionLeftPosition,\n                      classes?.inputExtensionLeftPosition\n                    )\n                )}\n                $leftPosition={popperPlacement.includes(\"end\")}\n                $openShadow={false}\n                $floatLeft={false}\n                $floatRight={false}\n              />\n            )}\n            <BaseDropdownContext.Provider value={popperMaxSize}>\n              <StyledPanel\n                id={setId(elementId, \"children-container\")}\n                className={clsx(baseDropdownClasses.panel, classes?.panel)}\n              >\n                {children}\n              </StyledPanel>\n            </BaseDropdownContext.Provider>\n            {popperPlacement.includes(\"top\") && (\n              <StyledExtension\n                style={{ width: extensionWidth }}\n                className={clsx(\n                  baseDropdownClasses.inputExtensionOpen,\n                  classes?.inputExtensionOpen,\n                  baseDropdownClasses.inputExtensionOpenShadow,\n                  classes?.inputExtensionOpenShadow,\n                  popperPlacement.includes(\"end\") &&\n                    clsx(\n                      baseDropdownClasses.inputExtensionFloatRight,\n                      classes?.inputExtensionFloatRight\n                    ),\n                  popperPlacement.includes(\"start\") &&\n                    clsx(\n                      baseDropdownClasses.inputExtensionFloatLeft,\n                      classes?.inputExtensionFloatLeft\n                    )\n                )}\n                $leftPosition={false}\n                $openShadow={true}\n                $floatLeft={popperPlacement.includes(\"start\")}\n                $floatRight={popperPlacement.includes(\"end\")}\n              />\n            )}\n          </div>\n        </ClickAwayListener>\n      </StyledContainer>\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    <StyledRoot className={clsx(baseDropdownClasses.root, classes?.root)}>\n      <StyledAnchor\n        id={id}\n        role={ariaRole}\n        aria-expanded={!!isOpen}\n        aria-owns={isOpen ? setId(elementId, \"children-container\") : undefined}\n        className={clsx(\n          className,\n          baseDropdownClasses.anchor,\n          classes?.anchor,\n          disabled &&\n            clsx(baseDropdownClasses.rootDisabled, classes?.rootDisabled)\n        )}\n        $disabled={disabled}\n        {...(!readOnly && {\n          onKeyDown: handleToggle,\n          onClick: handleToggle,\n        })}\n        // Removes the element from the navigation sequence for keyboard focus\n        tabIndex={-1}\n        {...others}\n      >\n        {headerComponent}\n      </StyledAnchor>\n      {isOpen && containerComponent}\n    </StyledRoot>\n  );\n};\n"],"names":["Tab","Enter","Esc","Space","ArrowDown","keyboardCodes","HvBaseDropdown","id","className","classes","children","role","placeholder","component","adornment","expanded","dropdownHeaderProps","defaultExpanded","disabled","readOnly","disablePortal","variableWidth","placement","popperProps","dropdownHeaderRef","dropdownHeaderRefProp","onToggle","onClickOutside","onContainerCreation","others","rootId","useContext","HvThemeContext","isOpen","setIsOpen","useControlled","Boolean","referenceElement","setReferenceElement","useState","popperElement","setPopperElement","popperMaxSize","setPopperMaxSize","handleDropdownHeaderRefProp","useForkRef","ref","handleDropdownHeaderRef","ariaRole","undefined","elementId","useUniqueId","bottom","extensionWidth","offsetWidth","modifiers","popperPropsModifiers","otherPopperProps","onFirstUpdate","useCallback","widthCalculator","state","styles","popper","width","rects","reference","widthCalculatorEffect","elements","style","applyMaxSizeCalculator","height","modifiersData","maxSize","maxWidth","maxHeight","maxSizeCalculator","name","options","overflow","detectOverflow","x","preventOverflow","y","popperWidth","popperHeight","basePlacement","split","widthProp","heightProp","useMemo","enabled","phase","requires","fn","effect","requiresIfExists","popperStyles","attributes","usePopper","popperPlacement","handleToggle","event","isKeypress","preventDefault","notControlKey","every","key","ignoredCombinations","newOpen","focusHeader","focus","preventScroll","headerComponent","React","cloneElement","setId","clsx","baseDropdownClasses","header","headerDisabled","headerReadOnly","headerOpen","includes","headerOpenUp","headerOpenDown","pointerEvents","selection","selectionDisabled","arrow","containerComponent","handleContainerKeyDown","shiftKey","focusList","getFirstAndLastFocus","document","activeElement","last","first","handleOutside","isButtonClick","contains","target","container","inputExtensionOpen","inputExtensionLeftPosition","panel","inputExtensionOpenShadow","inputExtensionFloatRight","inputExtensionFloatLeft","createPortal","getElementById","body","root","anchor","rootDisabled","onKeyDown","onClick"],"mappings":"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"}

package/dist/esm/components/BaseInput/BaseInput.js

@@ -1,10 +1,10 @@
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
 import { useContext } from "react";
 import { StyledRoot, StyledInput, StyledInputBorderContainer } from "./BaseInput.styles.js";
 import clsx from "clsx";
 import baseInputClasses from "./baseInputClasses.js";
 import { css, Global } from "@emotion/react";
 import { theme } from "@hitachivantara/uikit-styles";
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
 import { buildFormElementPropsFromContext, buildAriaPropsFromContext } from "../Forms/FormElement/utils/FormUtils.js";
 import { HvFormElementContext } from "../Forms/FormElement/context/FormElementContext.js";
 import { HvFormElementDescriptorsContext } from "../Forms/FormElement/context/FormElementDescriptorsContext.js";
@@ -37,52 +37,23 @@ const HvBaseInput = ({
   const onChangeHandler = (event) => {
     onChange == null ? void 0 : onChange(event, event.target.value);
   };
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(Global, {
-      styles: baseInputStyles
-    }), /* @__PURE__ */ jsxs(StyledRoot, {
-      className: clsx(baseInputClasses.root, classes == null ? void 0 : classes.root, className, formElementProps.disabled && clsx(baseInputClasses.disabled, classes == null ? void 0 : classes.disabled), localInvalid && clsx(baseInputClasses.invalid, classes == null ? void 0 : classes.invalid), multiline && resizable && clsx(baseInputClasses.resizable, classes == null ? void 0 : classes.resizable), readOnly && clsx(baseInputClasses.readOnly, classes == null ? void 0 : classes.readOnly)),
-      $disabled: formElementProps.disabled,
-      $invalid: localInvalid,
-      $resizable: multiline && resizable,
-      $readOnly: !!readOnly,
-      children: [/* @__PURE__ */ jsx(StyledInput, {
-        id,
-        name: formElementProps.name,
-        value,
-        defaultValue,
-        type,
-        placeholder,
-        readOnly: !!formElementProps.readOnly,
-        disabled: formElementProps.disabled,
-        onChange: onChangeHandler,
-        className: clsx(localInvalid && clsx(baseInputClasses.inputRootInvalid, classes == null ? void 0 : classes.inputRootInvalid), readOnly && clsx(baseInputClasses.inputRootReadOnly, classes == null ? void 0 : classes.inputRootReadOnly)),
-        classes: {
-          root: clsx(baseInputClasses.inputRoot, classes == null ? void 0 : classes.inputRoot),
-          focused: clsx(baseInputClasses.inputRootFocused, classes == null ? void 0 : classes.inputRootFocused),
-          disabled: clsx(baseInputClasses.inputRootDisabled, classes == null ? void 0 : classes.inputRootDisabled),
-          multiline: clsx(baseInputClasses.inputRootMultiline, classes == null ? void 0 : classes.inputRootMultiline),
-          input: clsx(baseInputClasses.input, classes == null ? void 0 : classes.input, !formElementProps.disabled && resizable && clsx(baseInputClasses.inputResizable, classes == null ? void 0 : classes.inputResizable), disabled && clsx(baseInputClasses.inputDisabled, classes == null ? void 0 : classes.inputDisabled), readOnly && clsx(baseInputClasses.inputReadOnly, classes == null ? void 0 : classes.readOnly))
-        },
-        inputProps: {
-          required: formElementProps.required,
-          ...inputProps,
-          ...ariaProps
-        },
-        inputRef,
-        multiline,
-        rows: 10,
-        $resizable: !formElementProps.disabled && resizable,
-        $disabled: !!disabled,
-        $readOnly: !!readOnly,
-        $invalid: localInvalid,
-        ...others
-      }), !multiline && /* @__PURE__ */ jsx(StyledInputBorderContainer, {
-        role: "presentation",
-        className: clsx(baseInputClasses.inputBorderContainer, classes == null ? void 0 : classes.inputBorderContainer)
-      })]
-    })]
-  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Global, { styles: baseInputStyles }),
+    /* @__PURE__ */ jsxs(StyledRoot, { className: clsx(baseInputClasses.root, classes == null ? void 0 : classes.root, className, formElementProps.disabled && clsx(baseInputClasses.disabled, classes == null ? void 0 : classes.disabled), localInvalid && clsx(baseInputClasses.invalid, classes == null ? void 0 : classes.invalid), multiline && resizable && clsx(baseInputClasses.resizable, classes == null ? void 0 : classes.resizable), readOnly && clsx(baseInputClasses.readOnly, classes == null ? void 0 : classes.readOnly)), $disabled: formElementProps.disabled, $invalid: localInvalid, $resizable: multiline && resizable, $readOnly: !!readOnly, children: [
+      /* @__PURE__ */ jsx(StyledInput, { id, name: formElementProps.name, value, defaultValue, type, placeholder, readOnly: !!formElementProps.readOnly, disabled: formElementProps.disabled, onChange: onChangeHandler, className: clsx(localInvalid && clsx(baseInputClasses.inputRootInvalid, classes == null ? void 0 : classes.inputRootInvalid), readOnly && clsx(baseInputClasses.inputRootReadOnly, classes == null ? void 0 : classes.inputRootReadOnly)), classes: {
+        root: clsx(baseInputClasses.inputRoot, classes == null ? void 0 : classes.inputRoot),
+        focused: clsx(baseInputClasses.inputRootFocused, classes == null ? void 0 : classes.inputRootFocused),
+        disabled: clsx(baseInputClasses.inputRootDisabled, classes == null ? void 0 : classes.inputRootDisabled),
+        multiline: clsx(baseInputClasses.inputRootMultiline, classes == null ? void 0 : classes.inputRootMultiline),
+        input: clsx(baseInputClasses.input, classes == null ? void 0 : classes.input, !formElementProps.disabled && resizable && clsx(baseInputClasses.inputResizable, classes == null ? void 0 : classes.inputResizable), disabled && clsx(baseInputClasses.inputDisabled, classes == null ? void 0 : classes.inputDisabled), readOnly && clsx(baseInputClasses.inputReadOnly, classes == null ? void 0 : classes.readOnly))
+      }, inputProps: {
+        required: formElementProps.required,
+        ...inputProps,
+        ...ariaProps
+      }, inputRef, multiline, rows: 10, $resizable: !formElementProps.disabled && resizable, $disabled: !!disabled, $readOnly: !!readOnly, $invalid: localInvalid, ...others }),
+      !multiline && /* @__PURE__ */ jsx(StyledInputBorderContainer, { role: "presentation", className: clsx(baseInputClasses.inputBorderContainer, classes == null ? void 0 : classes.inputBorderContainer) })
+    ] })
+  ] });
 };
 export {
   HvBaseInput

package/dist/esm/components/BaseInput/BaseInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.js","sources":["../../../../src/components/BaseInput/BaseInput.tsx"],"sourcesContent":["import { RefObject, useContext } from \"react\";\nimport {\n  InputBaseComponentProps as MuiInputBaseComponentProps,\n  InputProps as MuiInputProps,\n} from \"@mui/material\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledRoot,\n  StyledInputBorderContainer,\n  StyledInput,\n} from \"./BaseInput.styles\";\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n  buildFormElementPropsFromContext,\n  buildAriaPropsFromContext,\n} from \"../Forms/FormElement\";\nimport clsx from \"clsx\";\nimport baseInputClasses, { HvBaseInputClasses } from \"./baseInputClasses\";\nimport { css, Global } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\n// Global styles for the base input.\nconst baseInputStyles = css`\n  \"input:-webkit-autofill\": {\n    \"-webkit-box-shadow\": 0 0 0px 1000px ${theme.colors.atmo1} inset,\n    \"-webkit-text-fill-color\": ${theme.colors.acce1},\n  },\n\n  /* Clears input's clear and reveal buttons from IE */\n  \"input[type=search]::-ms-clear\": {\n    display: \"none\",\n    width: 0,\n    height: 0,\n  },\n  \"input[type=search]::-ms-reveal\": {\n    display: \"none\",\n    width: 0,\n    height: 0,\n  },\n\n  /* Clears input's clear button from Chrome */\n  \"input[type=search]::-webkit-search-decoration\": { display: \"none\" },\n  \"input[type=search]::-webkit-search-cancel-button\": { display: \"none\" },\n  \"input[type=search]::-webkit-search-results-button\": {\n    display: \"none\",\n  },\n  \"input[type=search]::-webkit-search-results-decoration\": {\n    display: \"none\",\n  },\n}`;\n\nexport type HvBaseInputProps = Omit<MuiInputProps, \"onChange\" | \"classes\"> &\n  HvBaseProps<HTMLDivElement, { onChange }> & {\n    /** The input name. */\n    name?: string;\n    /** The value of the input, when controlled. */\n    value?: string;\n    /** The initial value of the input, when uncontrolled. */\n    defaultValue?: string;\n    /** If `true` the input is disabled. */\n    disabled?: boolean;\n    /** Indicates that the input is not editable. */\n    readOnly?: boolean;\n    /** If true, the input element will be required. */\n    required?: boolean;\n    /** The function that will be executed onChange, allows modification of the input,\n     * it receives the value. If a new value should be presented it must returned it. */\n    onChange?: (\n      event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n      value: string\n    ) => void;\n    /** The input type. */\n    type?: string;\n    /** Label inside the input used to help user. */\n    placeholder?: string;\n    /** If true, a textarea element will be rendered. */\n    multiline?: boolean;\n    /** If true and multiline is also true the textarea element will be resizable. */\n    resizable?: boolean;\n    /** Denotes if the input is in an invalid state. */\n    invalid?: boolean;\n    /** Attributes applied to the input element. */\n    inputProps?: MuiInputBaseComponentProps;\n    /** Allows passing a ref to the underlying input */\n    inputRef?: RefObject<HTMLElement>;\n    /** A Jss Object used to override or extend the styles applied to the component. */\n    classes?: HvBaseInputClasses;\n  };\n\n/**\n * An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = ({\n  classes,\n  className = \"\",\n  id,\n  name,\n  value,\n  defaultValue,\n  required,\n  readOnly,\n  disabled,\n  onChange,\n  type = \"text\",\n  placeholder,\n  multiline = false,\n  resizable = false,\n  invalid = false,\n  inputRef,\n  inputProps = {},\n  ...others\n}: HvBaseInputProps) => {\n  const formElementContext = useContext(HvFormElementContext);\n  const formElementProps = buildFormElementPropsFromContext(\n    name,\n    disabled,\n    readOnly,\n    required,\n    status,\n    formElementContext\n  );\n\n  const localInvalid = invalid || formElementProps.status === \"invalid\";\n\n  const formElementDescriptorsContext = useContext(\n    HvFormElementDescriptorsContext\n  );\n  const ariaProps = buildAriaPropsFromContext(\n    inputProps,\n    formElementDescriptorsContext,\n    localInvalid,\n    id\n  );\n\n  const onChangeHandler = (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    onChange?.(event, event.target.value);\n  };\n\n  return (\n    <>\n      <Global styles={baseInputStyles} />\n      <StyledRoot\n        className={clsx(\n          baseInputClasses.root,\n          classes?.root,\n          className,\n          formElementProps.disabled &&\n            clsx(baseInputClasses.disabled, classes?.disabled),\n          localInvalid && clsx(baseInputClasses.invalid, classes?.invalid),\n          multiline &&\n            resizable &&\n            clsx(baseInputClasses.resizable, classes?.resizable),\n          readOnly && clsx(baseInputClasses.readOnly, classes?.readOnly)\n        )}\n        $disabled={formElementProps.disabled}\n        $invalid={localInvalid}\n        $resizable={multiline && resizable}\n        $readOnly={!!readOnly}\n      >\n        <StyledInput\n          id={id}\n          name={formElementProps.name}\n          value={value}\n          defaultValue={defaultValue}\n          type={type}\n          placeholder={placeholder}\n          readOnly={!!formElementProps.readOnly}\n          disabled={formElementProps.disabled}\n          onChange={onChangeHandler}\n          className={clsx(\n            localInvalid &&\n              clsx(\n                baseInputClasses.inputRootInvalid,\n                classes?.inputRootInvalid\n              ),\n            readOnly &&\n              clsx(\n                baseInputClasses.inputRootReadOnly,\n                classes?.inputRootReadOnly\n              )\n          )}\n          classes={{\n            root: clsx(baseInputClasses.inputRoot, classes?.inputRoot),\n            focused: clsx(\n              baseInputClasses.inputRootFocused,\n              classes?.inputRootFocused\n            ),\n            disabled: clsx(\n              baseInputClasses.inputRootDisabled,\n              classes?.inputRootDisabled\n            ),\n            multiline: clsx(\n              baseInputClasses.inputRootMultiline,\n              classes?.inputRootMultiline\n            ),\n            input: clsx(\n              baseInputClasses.input,\n              classes?.input,\n              !formElementProps.disabled &&\n                resizable &&\n                clsx(baseInputClasses.inputResizable, classes?.inputResizable),\n              disabled &&\n                clsx(baseInputClasses.inputDisabled, classes?.inputDisabled),\n              readOnly &&\n                clsx(baseInputClasses.inputReadOnly, classes?.readOnly)\n            ),\n          }}\n          inputProps={{\n            // Avoid the required attribute at the root node\n            required: formElementProps.required,\n            ...inputProps,\n            ...ariaProps,\n          }}\n          inputRef={inputRef}\n          multiline={multiline}\n          rows={10}\n          $resizable={!formElementProps.disabled && resizable}\n          $disabled={!!disabled}\n          $readOnly={!!readOnly}\n          $invalid={localInvalid}\n          {...others}\n        />\n        {!multiline && (\n          <StyledInputBorderContainer\n            role=\"presentation\"\n            className={clsx(\n              baseInputClasses.inputBorderContainer,\n              classes?.inputBorderContainer\n            )}\n          />\n        )}\n      </StyledRoot>\n    </>\n  );\n};\n"],"names":["baseInputStyles","theme","colors","atmo1","acce1","process","env","NODE_ENV","HvBaseInput","classes","className","id","name","value","defaultValue","required","readOnly","disabled","onChange","type","placeholder","multiline","resizable","invalid","inputRef","inputProps","others","formElementContext","useContext","HvFormElementContext","formElementProps","buildFormElementPropsFromContext","status","localInvalid","formElementDescriptorsContext","HvFormElementDescriptorsContext","ariaProps","buildAriaPropsFromContext","onChangeHandler","event","target","_Fragment","children","_jsx","Global","styles","_jsxs","StyledRoot","clsx","baseInputClasses","root","$disabled","$invalid","$resizable","$readOnly","StyledInput","inputRootInvalid","inputRootReadOnly","inputRoot","focused","inputRootFocused","inputRootDisabled","inputRootMultiline","input","inputResizable","inputDisabled","inputReadOnly","rows","StyledInputBorderContainer","role","inputBorderContainer"],"mappings":"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"}
+{"version":3,"file":"BaseInput.js","sources":["../../../../src/components/BaseInput/BaseInput.tsx"],"sourcesContent":["import { RefObject, useContext } from \"react\";\nimport {\n  InputBaseComponentProps as MuiInputBaseComponentProps,\n  InputProps as MuiInputProps,\n} from \"@mui/material\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledRoot,\n  StyledInputBorderContainer,\n  StyledInput,\n} from \"./BaseInput.styles\";\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n  buildFormElementPropsFromContext,\n  buildAriaPropsFromContext,\n} from \"../Forms/FormElement\";\nimport clsx from \"clsx\";\nimport baseInputClasses, { HvBaseInputClasses } from \"./baseInputClasses\";\nimport { css, Global } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\n// Global styles for the base input.\nconst baseInputStyles = css`\n  \"input:-webkit-autofill\": {\n    \"-webkit-box-shadow\": 0 0 0px 1000px ${theme.colors.atmo1} inset,\n    \"-webkit-text-fill-color\": ${theme.colors.acce1},\n  },\n\n  /* Clears input's clear and reveal buttons from IE */\n  \"input[type=search]::-ms-clear\": {\n    display: \"none\",\n    width: 0,\n    height: 0,\n  },\n  \"input[type=search]::-ms-reveal\": {\n    display: \"none\",\n    width: 0,\n    height: 0,\n  },\n\n  /* Clears input's clear button from Chrome */\n  \"input[type=search]::-webkit-search-decoration\": { display: \"none\" },\n  \"input[type=search]::-webkit-search-cancel-button\": { display: \"none\" },\n  \"input[type=search]::-webkit-search-results-button\": {\n    display: \"none\",\n  },\n  \"input[type=search]::-webkit-search-results-decoration\": {\n    display: \"none\",\n  },\n}`;\n\nexport type HvBaseInputProps = Omit<MuiInputProps, \"onChange\" | \"classes\"> &\n  HvBaseProps<HTMLDivElement, { onChange }> & {\n    /** The input name. */\n    name?: string;\n    /** The value of the input, when controlled. */\n    value?: string;\n    /** The initial value of the input, when uncontrolled. */\n    defaultValue?: string;\n    /** If `true` the input is disabled. */\n    disabled?: boolean;\n    /** Indicates that the input is not editable. */\n    readOnly?: boolean;\n    /** If true, the input element will be required. */\n    required?: boolean;\n    /** The function that will be executed onChange, allows modification of the input,\n     * it receives the value. If a new value should be presented it must returned it. */\n    onChange?: (\n      event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n      value: string\n    ) => void;\n    /** The input type. */\n    type?: string;\n    /** Label inside the input used to help user. */\n    placeholder?: string;\n    /** If true, a textarea element will be rendered. */\n    multiline?: boolean;\n    /** If true and multiline is also true the textarea element will be resizable. */\n    resizable?: boolean;\n    /** Denotes if the input is in an invalid state. */\n    invalid?: boolean;\n    /** Attributes applied to the input element. */\n    inputProps?: MuiInputBaseComponentProps;\n    /** Allows passing a ref to the underlying input */\n    inputRef?: RefObject<HTMLElement>;\n    /** A Jss Object used to override or extend the styles applied to the component. */\n    classes?: HvBaseInputClasses;\n  };\n\n/**\n * An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = ({\n  classes,\n  className = \"\",\n  id,\n  name,\n  value,\n  defaultValue,\n  required,\n  readOnly,\n  disabled,\n  onChange,\n  type = \"text\",\n  placeholder,\n  multiline = false,\n  resizable = false,\n  invalid = false,\n  inputRef,\n  inputProps = {},\n  ...others\n}: HvBaseInputProps) => {\n  const formElementContext = useContext(HvFormElementContext);\n  const formElementProps = buildFormElementPropsFromContext(\n    name,\n    disabled,\n    readOnly,\n    required,\n    status,\n    formElementContext\n  );\n\n  const localInvalid = invalid || formElementProps.status === \"invalid\";\n\n  const formElementDescriptorsContext = useContext(\n    HvFormElementDescriptorsContext\n  );\n  const ariaProps = buildAriaPropsFromContext(\n    inputProps,\n    formElementDescriptorsContext,\n    localInvalid,\n    id\n  );\n\n  const onChangeHandler = (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    onChange?.(event, event.target.value);\n  };\n\n  return (\n    <>\n      <Global styles={baseInputStyles} />\n      <StyledRoot\n        className={clsx(\n          baseInputClasses.root,\n          classes?.root,\n          className,\n          formElementProps.disabled &&\n            clsx(baseInputClasses.disabled, classes?.disabled),\n          localInvalid && clsx(baseInputClasses.invalid, classes?.invalid),\n          multiline &&\n            resizable &&\n            clsx(baseInputClasses.resizable, classes?.resizable),\n          readOnly && clsx(baseInputClasses.readOnly, classes?.readOnly)\n        )}\n        $disabled={formElementProps.disabled}\n        $invalid={localInvalid}\n        $resizable={multiline && resizable}\n        $readOnly={!!readOnly}\n      >\n        <StyledInput\n          id={id}\n          name={formElementProps.name}\n          value={value}\n          defaultValue={defaultValue}\n          type={type}\n          placeholder={placeholder}\n          readOnly={!!formElementProps.readOnly}\n          disabled={formElementProps.disabled}\n          onChange={onChangeHandler}\n          className={clsx(\n            localInvalid &&\n              clsx(\n                baseInputClasses.inputRootInvalid,\n                classes?.inputRootInvalid\n              ),\n            readOnly &&\n              clsx(\n                baseInputClasses.inputRootReadOnly,\n                classes?.inputRootReadOnly\n              )\n          )}\n          classes={{\n            root: clsx(baseInputClasses.inputRoot, classes?.inputRoot),\n            focused: clsx(\n              baseInputClasses.inputRootFocused,\n              classes?.inputRootFocused\n            ),\n            disabled: clsx(\n              baseInputClasses.inputRootDisabled,\n              classes?.inputRootDisabled\n            ),\n            multiline: clsx(\n              baseInputClasses.inputRootMultiline,\n              classes?.inputRootMultiline\n            ),\n            input: clsx(\n              baseInputClasses.input,\n              classes?.input,\n              !formElementProps.disabled &&\n                resizable &&\n                clsx(baseInputClasses.inputResizable, classes?.inputResizable),\n              disabled &&\n                clsx(baseInputClasses.inputDisabled, classes?.inputDisabled),\n              readOnly &&\n                clsx(baseInputClasses.inputReadOnly, classes?.readOnly)\n            ),\n          }}\n          inputProps={{\n            // Avoid the required attribute at the root node\n            required: formElementProps.required,\n            ...inputProps,\n            ...ariaProps,\n          }}\n          inputRef={inputRef}\n          multiline={multiline}\n          rows={10}\n          $resizable={!formElementProps.disabled && resizable}\n          $disabled={!!disabled}\n          $readOnly={!!readOnly}\n          $invalid={localInvalid}\n          {...others}\n        />\n        {!multiline && (\n          <StyledInputBorderContainer\n            role=\"presentation\"\n            className={clsx(\n              baseInputClasses.inputBorderContainer,\n              classes?.inputBorderContainer\n            )}\n          />\n        )}\n      </StyledRoot>\n    </>\n  );\n};\n"],"names":["baseInputStyles","theme","colors","atmo1","acce1","process","env","NODE_ENV","HvBaseInput","classes","className","id","name","value","defaultValue","required","readOnly","disabled","onChange","type","placeholder","multiline","resizable","invalid","inputRef","inputProps","others","formElementContext","useContext","HvFormElementContext","formElementProps","buildFormElementPropsFromContext","status","localInvalid","formElementDescriptorsContext","HvFormElementDescriptorsContext","ariaProps","buildAriaPropsFromContext","onChangeHandler","event","target","clsx","baseInputClasses","root","inputRootInvalid","inputRootReadOnly","inputRoot","focused","inputRootFocused","inputRootDisabled","inputRootMultiline","input","inputResizable","inputDisabled","inputReadOnly","inputBorderContainer"],"mappings":"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"}

package/dist/esm/components/BaseRadio/BaseRadio.js

@@ -1,9 +1,9 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { useState, useCallback } from "react";
 import clsx from "clsx";
 import { RadioButtonUnselected, RadioButtonSelected } from "@hitachivantara/uikit-react-icons";
 import { StyledRadio } from "./BaseRadio.styles.js";
 import baseRadioClasses from "./baseRadioClasses.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 const getSelectorIcons = (options, classes) => {
   const {
     disabled,
@@ -12,14 +12,8 @@ const getSelectorIcons = (options, classes) => {
   const color = disabled && ["atmo3", "atmo5"] || semantic && ["base1", "base2"] || void 0;
   const checkedColor = disabled && ["atmo3", "atmo5"] || semantic && ["base2", "base1"] || void 0;
   return {
-    radio: /* @__PURE__ */ jsx(RadioButtonUnselected, {
-      color,
-      className: clsx(baseRadioClasses.icon, classes == null ? void 0 : classes.icon)
-    }),
-    radioChecked: /* @__PURE__ */ jsx(RadioButtonSelected, {
-      color: checkedColor,
-      className: clsx(baseRadioClasses.icon, classes == null ? void 0 : classes.icon)
-    })
+    radio: /* @__PURE__ */ jsx(RadioButtonUnselected, { color, className: clsx(baseRadioClasses.icon, classes == null ? void 0 : classes.icon) }),
+    radioChecked: /* @__PURE__ */ jsx(RadioButtonSelected, { color: checkedColor, className: clsx(baseRadioClasses.icon, classes == null ? void 0 : classes.icon) })
   };
 };
 const HvBaseRadio = (props) => {
@@ -60,27 +54,7 @@ const HvBaseRadio = (props) => {
     }
     onChange == null ? void 0 : onChange(evt, evt.target.checked, value);
   }, [onChange, readOnly, value]);
-  return /* @__PURE__ */ jsx(StyledRadio, {
-    id,
-    name,
-    className: clsx(className, baseRadioClasses.root, classes == null ? void 0 : classes.root, disabled && clsx(baseRadioClasses.disabled, classes == null ? void 0 : classes.disabled), focusVisible && clsx(baseRadioClasses.focusVisible, classes == null ? void 0 : classes.focusVisible)),
-    $focusVisible: focusVisible,
-    icon: icons.radio,
-    checkedIcon: icons.radioChecked,
-    color: "default",
-    disabled,
-    required,
-    readOnly,
-    disableRipple: true,
-    onChange: onLocalChange,
-    value,
-    checked,
-    defaultChecked,
-    inputProps,
-    onFocusVisible: onFocusVisibleCallback,
-    onBlur: onBlurCallback,
-    ...others
-  });
+  return /* @__PURE__ */ jsx(StyledRadio, { id, name, className: clsx(className, baseRadioClasses.root, classes == null ? void 0 : classes.root, disabled && clsx(baseRadioClasses.disabled, classes == null ? void 0 : classes.disabled), focusVisible && clsx(baseRadioClasses.focusVisible, classes == null ? void 0 : classes.focusVisible)), $focusVisible: focusVisible, icon: icons.radio, checkedIcon: icons.radioChecked, color: "default", disabled, required, readOnly, disableRipple: true, onChange: onLocalChange, value, checked, defaultChecked, inputProps, onFocusVisible: onFocusVisibleCallback, onBlur: onBlurCallback, ...others });
 };
 export {
   HvBaseRadio,

package/dist/esm/components/BaseRadio/BaseRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseRadio.js","sources":["../../../../src/components/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import React, { useState, useCallback } from \"react\";\nimport clsx from \"clsx\";\nimport { RadioProps as MuiRadioProps } from \"@mui/material\";\nimport {\n  RadioButtonUnselected,\n  RadioButtonSelected,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledRadio } from \"./BaseRadio.styles\";\nimport baseRadioClasses, { HvBaseRadioClasses } from \"./baseRadioClasses\";\n\nexport type HvBaseRadioProps = Omit<MuiRadioProps, \"onChange\" | \"classes\"> &\n  HvBaseProps<HTMLInputElement, { onChange }> & {\n    /**\n     * Class names to be applied.\n     */\n    className?: string;\n    /**\n     * A Jss Object used to override or extend the styles applied to the radio button.\n     */\n    classes?: HvBaseRadioClasses;\n    /**\n     * Id to be applied to the root node.\n     */\n    id?: string;\n    /**\n     * The input name.\n     */\n    name?: string;\n    /**\n     * The value of the input.\n     *\n     * The default value is \"on\".\n     */\n    value?: any;\n    /**\n     * Indicates that user input is required.\n     */\n    required?: boolean;\n    /**\n     * Indicates that the input is not editable.\n     */\n    readOnly?: boolean;\n    /**\n     * Indicates that the input is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n     *\n     * When defined the radio button state becomes controlled.\n     */\n    checked?: boolean;\n    /**\n     * When uncontrolled, defines the initial checked state.\n     */\n    defaultChecked?: boolean;\n    /**\n     * The callback fired when the radio button is pressed.\n     */\n    onChange?: (\n      event: React.ChangeEvent<HTMLInputElement>,\n      checked: boolean,\n      value: any\n    ) => void;\n    /**\n     * Whether the selector should use semantic colors.\n     */\n    semantic?: boolean;\n    /**\n     * Properties passed on to the input element.\n     */\n    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n    /**\n     * Callback fired when the component is focused with a keyboard.\n     * We trigger a `onFocus` callback too.\n     */\n    onFocusVisible?: (event: React.FocusEvent<any>) => void;\n    /**\n     * @ignore\n     */\n    onBlur?: (event: React.FocusEvent<any>) => void;\n  };\n\nexport const getSelectorIcons = (\n  options: { disabled: boolean; semantic: boolean },\n  classes?: HvBaseRadioClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"atmo5\"]) ||\n    (semantic && [\"base1\", \"base2\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"atmo5\"]) ||\n    (semantic && [\"base2\", \"base1\"]) ||\n    undefined;\n\n  return {\n    radio: (\n      <RadioButtonUnselected\n        color={color}\n        className={clsx(baseRadioClasses.icon, classes?.icon)}\n      />\n    ),\n    radioChecked: (\n      <RadioButtonSelected\n        color={checkedColor}\n        className={clsx(baseRadioClasses.icon, classes?.icon)}\n      />\n    ),\n  };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = (props: HvBaseRadioProps) => {\n  const {\n    classes,\n    className,\n    id,\n    name,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    checked,\n    defaultChecked,\n    onChange,\n    semantic = false,\n    inputProps,\n    onFocusVisible,\n    onBlur,\n    ...others\n  } = props;\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onLocalChange = useCallback(\n    (evt: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(evt, evt.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  return (\n    <StyledRadio\n      id={id}\n      name={name}\n      className={clsx(\n        className,\n        baseRadioClasses.root,\n        classes?.root,\n        disabled && clsx(baseRadioClasses.disabled, classes?.disabled),\n        focusVisible &&\n          clsx(baseRadioClasses.focusVisible, classes?.focusVisible)\n      )}\n      $focusVisible={focusVisible}\n      icon={icons.radio}\n      checkedIcon={icons.radioChecked}\n      color=\"default\"\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      disableRipple\n      onChange={onLocalChange}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      inputProps={inputProps}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n};\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","radio","RadioButtonUnselected","className","clsx","baseRadioClasses","icon","radioChecked","RadioButtonSelected","HvBaseRadio","props","id","name","value","required","readOnly","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","icons","onLocalChange","target","StyledRadio","root","$focusVisible","checkedIcon","disableRipple"],"mappings":";;;;;;AAoFaA,MAAAA,mBAAmBA,CAC9BC,SACAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,OAAO,KAC7BC,YAAY,CAAC,SAAS,OAAO,KAC9BE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,OAAO,KAC7BC,YAAY,CAAC,SAAS,OAAO,KAC9BE;AAEK,SAAA;AAAA,IACLE,2BACGC,uBAAqB;AAAA,MACpBJ;AAAAA,MACAK,WAAWC,KAAKC,iBAAiBC,MAAMX,mCAASW,IAAI;AAAA,IAAA,CAEvD;AAAA,IACDC,kCACGC,qBAAmB;AAAA,MAClBV,OAAOE;AAAAA,MACPG,WAAWC,KAAKC,iBAAiBC,MAAMX,mCAASW,IAAI;AAAA,IAAA,CAAE;AAAA,EAAA;AAI9D;AAQaG,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJf;AAAAA,IACAQ;AAAAA,IACAQ;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXnB,WAAW;AAAA,IACXoB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACArB,WAAW;AAAA,IACXsB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AAEJ,QAAM,CAACa,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAA+B;AAC9BJ,oBAAgB,IAAI;AACpBJ,qDAAiBQ;AAAAA,EAAG,GAEtB,CAACR,cAAc,CAAC;AAGZS,QAAAA,iBAAiBF,YACrB,CAACC,QAA+B;AAC9BJ,oBAAgB,KAAK;AACrBH,qCAASO;AAAAA,EAAG,GAEd,CAACP,MAAM,CAAC;AAGV,QAAMS,QAAQrC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDoC,QAAAA,gBAAgBJ,YACpB,CAACC,QAA6C;AAC5C,QAAIb,UAAU;AACZ;AAAA,IACF;AAEAG,yCAAWU,KAAKA,IAAII,OAAOhB,SAASH;AAAAA,EAEtC,GAAA,CAACK,UAAUH,UAAUF,KAAK,CAAC;AAG7B,6BACGoB,aAAW;AAAA,IACVtB;AAAAA,IACAC;AAAAA,IACAT,WAAWC,KACTD,WACAE,iBAAiB6B,MACjBvC,mCAASuC,MACTtC,YAAYQ,KAAKC,iBAAiBT,UAAUD,mCAASC,QAAQ,GAC7D2B,gBACEnB,KAAKC,iBAAiBkB,cAAc5B,mCAAS4B,YAAY,CAAC;AAAA,IAE9DY,eAAeZ;AAAAA,IACfjB,MAAMwB,MAAM7B;AAAAA,IACZmC,aAAaN,MAAMvB;AAAAA,IACnBT,OAAM;AAAA,IACNF;AAAAA,IACAkB;AAAAA,IACAC;AAAAA,IACAsB,eAAa;AAAA,IACbnB,UAAUa;AAAAA,IACVlB;AAAAA,IACAG;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC,gBAAgBM;AAAAA,IAChBL,QAAQQ;AAAAA,IAAe,GACnBP;AAAAA,EAAAA,CACJ;AAEN;"}
+{"version":3,"file":"BaseRadio.js","sources":["../../../../src/components/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import React, { useState, useCallback } from \"react\";\nimport clsx from \"clsx\";\nimport { RadioProps as MuiRadioProps } from \"@mui/material\";\nimport {\n  RadioButtonUnselected,\n  RadioButtonSelected,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledRadio } from \"./BaseRadio.styles\";\nimport baseRadioClasses, { HvBaseRadioClasses } from \"./baseRadioClasses\";\n\nexport type HvBaseRadioProps = Omit<MuiRadioProps, \"onChange\" | \"classes\"> &\n  HvBaseProps<HTMLInputElement, { onChange }> & {\n    /**\n     * Class names to be applied.\n     */\n    className?: string;\n    /**\n     * A Jss Object used to override or extend the styles applied to the radio button.\n     */\n    classes?: HvBaseRadioClasses;\n    /**\n     * Id to be applied to the root node.\n     */\n    id?: string;\n    /**\n     * The input name.\n     */\n    name?: string;\n    /**\n     * The value of the input.\n     *\n     * The default value is \"on\".\n     */\n    value?: any;\n    /**\n     * Indicates that user input is required.\n     */\n    required?: boolean;\n    /**\n     * Indicates that the input is not editable.\n     */\n    readOnly?: boolean;\n    /**\n     * Indicates that the input is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n     *\n     * When defined the radio button state becomes controlled.\n     */\n    checked?: boolean;\n    /**\n     * When uncontrolled, defines the initial checked state.\n     */\n    defaultChecked?: boolean;\n    /**\n     * The callback fired when the radio button is pressed.\n     */\n    onChange?: (\n      event: React.ChangeEvent<HTMLInputElement>,\n      checked: boolean,\n      value: any\n    ) => void;\n    /**\n     * Whether the selector should use semantic colors.\n     */\n    semantic?: boolean;\n    /**\n     * Properties passed on to the input element.\n     */\n    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n    /**\n     * Callback fired when the component is focused with a keyboard.\n     * We trigger a `onFocus` callback too.\n     */\n    onFocusVisible?: (event: React.FocusEvent<any>) => void;\n    /**\n     * @ignore\n     */\n    onBlur?: (event: React.FocusEvent<any>) => void;\n  };\n\nexport const getSelectorIcons = (\n  options: { disabled: boolean; semantic: boolean },\n  classes?: HvBaseRadioClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"atmo5\"]) ||\n    (semantic && [\"base1\", \"base2\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"atmo5\"]) ||\n    (semantic && [\"base2\", \"base1\"]) ||\n    undefined;\n\n  return {\n    radio: (\n      <RadioButtonUnselected\n        color={color}\n        className={clsx(baseRadioClasses.icon, classes?.icon)}\n      />\n    ),\n    radioChecked: (\n      <RadioButtonSelected\n        color={checkedColor}\n        className={clsx(baseRadioClasses.icon, classes?.icon)}\n      />\n    ),\n  };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = (props: HvBaseRadioProps) => {\n  const {\n    classes,\n    className,\n    id,\n    name,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    checked,\n    defaultChecked,\n    onChange,\n    semantic = false,\n    inputProps,\n    onFocusVisible,\n    onBlur,\n    ...others\n  } = props;\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onLocalChange = useCallback(\n    (evt: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(evt, evt.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  return (\n    <StyledRadio\n      id={id}\n      name={name}\n      className={clsx(\n        className,\n        baseRadioClasses.root,\n        classes?.root,\n        disabled && clsx(baseRadioClasses.disabled, classes?.disabled),\n        focusVisible &&\n          clsx(baseRadioClasses.focusVisible, classes?.focusVisible)\n      )}\n      $focusVisible={focusVisible}\n      icon={icons.radio}\n      checkedIcon={icons.radioChecked}\n      color=\"default\"\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      disableRipple\n      onChange={onLocalChange}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      inputProps={inputProps}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n};\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","radio","clsx","baseRadioClasses","icon","radioChecked","HvBaseRadio","props","className","id","name","value","required","readOnly","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","icons","onLocalChange","target","root"],"mappings":";;;;;;AAoFaA,MAAAA,mBAAmBA,CAC9BC,SACAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,OAAO,KAC7BC,YAAY,CAAC,SAAS,OAAO,KAC9BE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,OAAO,KAC7BC,YAAY,CAAC,SAAS,OAAO,KAC9BE;AAEK,SAAA;AAAA,IACLE,OACG,oBAAA,uBAAA,EACC,OACA,WAAWC,KAAKC,iBAAiBC,MAAMT,mCAASS,IAAI,EAEvD,CAAA;AAAA,IACDC,cACG,oBAAA,qBAAA,EACC,OAAOL,cACP,WAAWE,KAAKC,iBAAiBC,MAAMT,mCAASS,IAAI,EAAE,CAAA;AAAA,EAAA;AAI9D;AAQaE,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJZ;AAAAA,IACAa;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXjB,WAAW;AAAA,IACXkB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAnB,WAAW;AAAA,IACXoB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDb,IAAAA;AAEJ,QAAM,CAACc,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAA+B;AAC9BJ,oBAAgB,IAAI;AACpBJ,qDAAiBQ;AAAAA,EAAG,GAEtB,CAACR,cAAc,CAAC;AAGZS,QAAAA,iBAAiBF,YACrB,CAACC,QAA+B;AAC9BJ,oBAAgB,KAAK;AACrBH,qCAASO;AAAAA,EAAG,GAEd,CAACP,MAAM,CAAC;AAGV,QAAMS,QAAQnC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDkC,QAAAA,gBAAgBJ,YACpB,CAACC,QAA6C;AAC5C,QAAIb,UAAU;AACZ;AAAA,IACF;AAEAG,yCAAWU,KAAKA,IAAII,OAAOhB,SAASH;AAAAA,EAEtC,GAAA,CAACK,UAAUH,UAAUF,KAAK,CAAC;AAI3B,SAAA,oBAAC,aACC,EAAA,IACA,MACA,WAAWT,KACTM,WACAL,iBAAiB4B,MACjBpC,mCAASoC,MACTnC,YAAYM,KAAKC,iBAAiBP,UAAUD,mCAASC,QAAQ,GAC7DyB,gBACEnB,KAAKC,iBAAiBkB,cAAc1B,mCAAS0B,YAAY,CAAC,GAE9D,eAAeA,cACf,MAAMO,MAAM3B,OACZ,aAAa2B,MAAMvB,cACnB,OAAM,WACN,UACA,UACA,UACA,eAAa,MACb,UAAUwB,eACV,OACA,SACA,gBACA,YACA,gBAAgBL,wBAChB,QAAQG,gBACJP,GAAAA,OACJ,CAAA;AAEN;"}

package/dist/esm/components/BaseSwitch/BaseSwitch.js

@@ -1,8 +1,8 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { useState, useCallback } from "react";
 import clsx from "clsx";
 import { StyledSwitch } from "./BaseSwitch.styles.js";
 import baseSwitchClasses from "./baseSwitchClasses.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 const HvBaseSwitch = (props) => {
   const {
     classes,
@@ -36,35 +36,14 @@ const HvBaseSwitch = (props) => {
     }
     onChange == null ? void 0 : onChange(evt, evt.target.checked, value);
   }, [onChange, readOnly, value]);
-  return /* @__PURE__ */ jsx(StyledSwitch, {
-    id,
-    name,
-    className: clsx(className, baseSwitchClasses.root, classes == null ? void 0 : classes.root, disabled && clsx(baseSwitchClasses.disabled, classes == null ? void 0 : classes.disabled), readOnly && clsx(baseSwitchClasses.readOnly, classes == null ? void 0 : classes.readOnly), focusVisible && clsx(baseSwitchClasses.focusVisible, classes == null ? void 0 : classes.focusVisible)),
-    $focusVisible: focusVisible,
-    $readOnly: readOnly,
-    $disabled: disabled,
-    color: "default",
-    disabled,
-    required,
-    readOnly,
-    disableRipple: true,
-    onChange: onLocalChange,
-    value,
-    checked,
-    defaultChecked,
-    classes: {
-      root: clsx(baseSwitchClasses.switch, classes == null ? void 0 : classes.switch),
-      switchBase: clsx(baseSwitchClasses.switchBase, classes == null ? void 0 : classes.switchBase),
-      checked: clsx(baseSwitchClasses.checked, classes == null ? void 0 : classes.checked),
-      track: clsx(baseSwitchClasses.track, classes == null ? void 0 : classes.track),
-      thumb: clsx(baseSwitchClasses.thumb, classes == null ? void 0 : classes.thumb),
-      disabled: clsx(baseSwitchClasses.disabled, classes == null ? void 0 : classes.disabled)
-    },
-    inputProps,
-    onFocusVisible: onFocusVisibleCallback,
-    onBlur: onBlurCallback,
-    ...others
-  });
+  return /* @__PURE__ */ jsx(StyledSwitch, { id, name, className: clsx(className, baseSwitchClasses.root, classes == null ? void 0 : classes.root, disabled && clsx(baseSwitchClasses.disabled, classes == null ? void 0 : classes.disabled), readOnly && clsx(baseSwitchClasses.readOnly, classes == null ? void 0 : classes.readOnly), focusVisible && clsx(baseSwitchClasses.focusVisible, classes == null ? void 0 : classes.focusVisible)), $focusVisible: focusVisible, $readOnly: readOnly, $disabled: disabled, color: "default", disabled, required, readOnly, disableRipple: true, onChange: onLocalChange, value, checked, defaultChecked, classes: {
+    root: clsx(baseSwitchClasses.switch, classes == null ? void 0 : classes.switch),
+    switchBase: clsx(baseSwitchClasses.switchBase, classes == null ? void 0 : classes.switchBase),
+    checked: clsx(baseSwitchClasses.checked, classes == null ? void 0 : classes.checked),
+    track: clsx(baseSwitchClasses.track, classes == null ? void 0 : classes.track),
+    thumb: clsx(baseSwitchClasses.thumb, classes == null ? void 0 : classes.thumb),
+    disabled: clsx(baseSwitchClasses.disabled, classes == null ? void 0 : classes.disabled)
+  }, inputProps, onFocusVisible: onFocusVisibleCallback, onBlur: onBlurCallback, ...others });
 };
 export {
   HvBaseSwitch

package/dist/esm/components/BaseSwitch/BaseSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSwitch.js","sources":["../../../../src/components/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import React, { useState, useCallback } from \"react\";\nimport clsx from \"clsx\";\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material\";\nimport { StyledSwitch } from \"./BaseSwitch.styles\";\nimport { HvBaseProps } from \"../../types\";\nimport baseSwitchClasses, { HvBaseSwitchClasses } from \"./baseSwitchClasses\";\n\nexport type HvBaseSwitchProps = Omit<MuiSwitchProps, \"onChange\" | \"classes\"> &\n  HvBaseProps<HTMLInputElement, { onChange }> & {\n    /**\n     * Class names to be applied.\n     */\n    className?: string;\n    /**\n     * A Jss Object used to override or extend the styles applied to the switch.\n     */\n    classes?: HvBaseSwitchClasses;\n    /**\n     * Id to be applied to the root node.\n     */\n    id?: string;\n    /**\n     * The input name.\n     */\n    name?: string;\n    /**\n     * The value of the input.\n     *\n     * Is up to the application's logic when to consider the submission of this value.\n     * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n     *\n     * The default value is \"on\".\n     */\n    value?: any;\n    /**\n     * Indicates that user input is required.\n     */\n    required?: boolean;\n    /**\n     * Indicates that the input is not editable.\n     */\n    readOnly?: boolean;\n    /**\n     * Indicates that the input is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * If `true` the switch is selected, if set to `false` the switch is not selected.\n     *\n     * When defined the switch state becomes controlled.\n     */\n    checked?: boolean;\n    /**\n     * When uncontrolled, defines the initial checked state.\n     */\n    defaultChecked?: boolean;\n    /**\n     * The callback fired when the switch is pressed.\n     */\n    onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n    /**\n     * Properties passed on to the input element.\n     */\n    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n    /**\n     * Callback fired when the component is focused with a keyboard.\n     * We trigger a `onFocus` callback too.\n     */\n    onFocusVisible?: (event: React.FocusEvent<any>) => void;\n    /**\n     * @ignore\n     */\n    onBlur?: (event: React.FocusEvent<any>) => void;\n  };\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nexport const HvBaseSwitch = (props: HvBaseSwitchProps) => {\n  const {\n    classes,\n    className,\n\n    id,\n    name,\n    value = \"on\",\n\n    required = false,\n    readOnly = false,\n    disabled = false,\n\n    checked,\n    defaultChecked,\n\n    onChange,\n\n    inputProps,\n\n    onFocusVisible,\n    onBlur,\n\n    ...others\n  } = props;\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt: React.FocusEvent<any, Element>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt: React.FocusEvent<any, Element>) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const onLocalChange = useCallback(\n    (evt: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(evt, evt.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  return (\n    <StyledSwitch\n      id={id}\n      name={name}\n      className={clsx(\n        className,\n        baseSwitchClasses.root,\n        classes?.root,\n        disabled && clsx(baseSwitchClasses.disabled, classes?.disabled),\n        readOnly && clsx(baseSwitchClasses.readOnly, classes?.readOnly),\n        focusVisible &&\n          clsx(baseSwitchClasses.focusVisible, classes?.focusVisible)\n      )}\n      $focusVisible={focusVisible}\n      $readOnly={readOnly}\n      $disabled={disabled}\n      color=\"default\"\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      disableRipple\n      onChange={onLocalChange}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      classes={{\n        root: clsx(baseSwitchClasses.switch, classes?.switch),\n        switchBase: clsx(baseSwitchClasses.switchBase, classes?.switchBase),\n        checked: clsx(baseSwitchClasses.checked, classes?.checked),\n        track: clsx(baseSwitchClasses.track, classes?.track),\n        thumb: clsx(baseSwitchClasses.thumb, classes?.thumb),\n        disabled: clsx(baseSwitchClasses.disabled, classes?.disabled),\n      }}\n      inputProps={inputProps}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n};\n"],"names":["HvBaseSwitch","props","classes","className","id","name","value","required","readOnly","disabled","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","onLocalChange","target","StyledSwitch","clsx","baseSwitchClasses","root","$focusVisible","$readOnly","$disabled","color","disableRipple","switch","switchBase","track","thumb"],"mappings":";;;;;AAiFaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IAERC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IAEXC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IAEAC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,OAEGC;AAAAA,EACDf,IAAAA;AAEJ,QAAM,CAACgB,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAAwC;AACvCJ,oBAAgB,IAAI;AACpBJ,qDAAiBQ;AAAAA,EAAG,GAEtB,CAACR,cAAc,CAAC;AAGZS,QAAAA,iBAAiBF,YACrB,CAACC,QAAwC;AACvCJ,oBAAgB,KAAK;AACrBH,qCAASO;AAAAA,EAAG,GAEd,CAACP,MAAM,CAAC;AAGJS,QAAAA,gBAAgBH,YACpB,CAACC,QAA6C;AAC5C,QAAId,UAAU;AACZ;AAAA,IACF;AAEAI,yCAAWU,KAAKA,IAAIG,OAAOf,SAASJ;AAAAA,EAEtC,GAAA,CAACM,UAAUJ,UAAUF,KAAK,CAAC;AAG7B,6BACGoB,cAAY;AAAA,IACXtB;AAAAA,IACAC;AAAAA,IACAF,WAAWwB,KACTxB,WACAyB,kBAAkBC,MAClB3B,mCAAS2B,MACTpB,YAAYkB,KAAKC,kBAAkBnB,UAAUP,mCAASO,QAAQ,GAC9DD,YAAYmB,KAAKC,kBAAkBpB,UAAUN,mCAASM,QAAQ,GAC9DS,gBACEU,KAAKC,kBAAkBX,cAAcf,mCAASe,YAAY,CAAC;AAAA,IAE/Da,eAAeb;AAAAA,IACfc,WAAWvB;AAAAA,IACXwB,WAAWvB;AAAAA,IACXwB,OAAM;AAAA,IACNxB;AAAAA,IACAF;AAAAA,IACAC;AAAAA,IACA0B,eAAa;AAAA,IACbtB,UAAUY;AAAAA,IACVlB;AAAAA,IACAI;AAAAA,IACAC;AAAAA,IACAT,SAAS;AAAA,MACP2B,MAAMF,KAAKC,kBAAkBO,QAAQjC,mCAASiC,MAAM;AAAA,MACpDC,YAAYT,KAAKC,kBAAkBQ,YAAYlC,mCAASkC,UAAU;AAAA,MAClE1B,SAASiB,KAAKC,kBAAkBlB,SAASR,mCAASQ,OAAO;AAAA,MACzD2B,OAAOV,KAAKC,kBAAkBS,OAAOnC,mCAASmC,KAAK;AAAA,MACnDC,OAAOX,KAAKC,kBAAkBU,OAAOpC,mCAASoC,KAAK;AAAA,MACnD7B,UAAUkB,KAAKC,kBAAkBnB,UAAUP,mCAASO,QAAQ;AAAA,IAC9D;AAAA,IACAI;AAAAA,IACAC,gBAAgBM;AAAAA,IAChBL,QAAQQ;AAAAA,IAAe,GACnBP;AAAAA,EAAAA,CACJ;AAEN;"}
+{"version":3,"file":"BaseSwitch.js","sources":["../../../../src/components/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import React, { useState, useCallback } from \"react\";\nimport clsx from \"clsx\";\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material\";\nimport { StyledSwitch } from \"./BaseSwitch.styles\";\nimport { HvBaseProps } from \"../../types\";\nimport baseSwitchClasses, { HvBaseSwitchClasses } from \"./baseSwitchClasses\";\n\nexport type HvBaseSwitchProps = Omit<MuiSwitchProps, \"onChange\" | \"classes\"> &\n  HvBaseProps<HTMLInputElement, { onChange }> & {\n    /**\n     * Class names to be applied.\n     */\n    className?: string;\n    /**\n     * A Jss Object used to override or extend the styles applied to the switch.\n     */\n    classes?: HvBaseSwitchClasses;\n    /**\n     * Id to be applied to the root node.\n     */\n    id?: string;\n    /**\n     * The input name.\n     */\n    name?: string;\n    /**\n     * The value of the input.\n     *\n     * Is up to the application's logic when to consider the submission of this value.\n     * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n     *\n     * The default value is \"on\".\n     */\n    value?: any;\n    /**\n     * Indicates that user input is required.\n     */\n    required?: boolean;\n    /**\n     * Indicates that the input is not editable.\n     */\n    readOnly?: boolean;\n    /**\n     * Indicates that the input is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * If `true` the switch is selected, if set to `false` the switch is not selected.\n     *\n     * When defined the switch state becomes controlled.\n     */\n    checked?: boolean;\n    /**\n     * When uncontrolled, defines the initial checked state.\n     */\n    defaultChecked?: boolean;\n    /**\n     * The callback fired when the switch is pressed.\n     */\n    onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n    /**\n     * Properties passed on to the input element.\n     */\n    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n    /**\n     * Callback fired when the component is focused with a keyboard.\n     * We trigger a `onFocus` callback too.\n     */\n    onFocusVisible?: (event: React.FocusEvent<any>) => void;\n    /**\n     * @ignore\n     */\n    onBlur?: (event: React.FocusEvent<any>) => void;\n  };\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nexport const HvBaseSwitch = (props: HvBaseSwitchProps) => {\n  const {\n    classes,\n    className,\n\n    id,\n    name,\n    value = \"on\",\n\n    required = false,\n    readOnly = false,\n    disabled = false,\n\n    checked,\n    defaultChecked,\n\n    onChange,\n\n    inputProps,\n\n    onFocusVisible,\n    onBlur,\n\n    ...others\n  } = props;\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt: React.FocusEvent<any, Element>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt: React.FocusEvent<any, Element>) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const onLocalChange = useCallback(\n    (evt: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(evt, evt.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  return (\n    <StyledSwitch\n      id={id}\n      name={name}\n      className={clsx(\n        className,\n        baseSwitchClasses.root,\n        classes?.root,\n        disabled && clsx(baseSwitchClasses.disabled, classes?.disabled),\n        readOnly && clsx(baseSwitchClasses.readOnly, classes?.readOnly),\n        focusVisible &&\n          clsx(baseSwitchClasses.focusVisible, classes?.focusVisible)\n      )}\n      $focusVisible={focusVisible}\n      $readOnly={readOnly}\n      $disabled={disabled}\n      color=\"default\"\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      disableRipple\n      onChange={onLocalChange}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      classes={{\n        root: clsx(baseSwitchClasses.switch, classes?.switch),\n        switchBase: clsx(baseSwitchClasses.switchBase, classes?.switchBase),\n        checked: clsx(baseSwitchClasses.checked, classes?.checked),\n        track: clsx(baseSwitchClasses.track, classes?.track),\n        thumb: clsx(baseSwitchClasses.thumb, classes?.thumb),\n        disabled: clsx(baseSwitchClasses.disabled, classes?.disabled),\n      }}\n      inputProps={inputProps}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n};\n"],"names":["HvBaseSwitch","props","classes","className","id","name","value","required","readOnly","disabled","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","onLocalChange","target","clsx","baseSwitchClasses","root","switch","switchBase","track","thumb"],"mappings":";;;;;AAiFaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IAERC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IAEXC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IAEAC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,OAEGC;AAAAA,EACDf,IAAAA;AAEJ,QAAM,CAACgB,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAAwC;AACvCJ,oBAAgB,IAAI;AACpBJ,qDAAiBQ;AAAAA,EAAG,GAEtB,CAACR,cAAc,CAAC;AAGZS,QAAAA,iBAAiBF,YACrB,CAACC,QAAwC;AACvCJ,oBAAgB,KAAK;AACrBH,qCAASO;AAAAA,EAAG,GAEd,CAACP,MAAM,CAAC;AAGJS,QAAAA,gBAAgBH,YACpB,CAACC,QAA6C;AAC5C,QAAId,UAAU;AACZ;AAAA,IACF;AAEAI,yCAAWU,KAAKA,IAAIG,OAAOf,SAASJ;AAAAA,EAEtC,GAAA,CAACM,UAAUJ,UAAUF,KAAK,CAAC;AAI3B,SAAA,oBAAC,gBACC,IACA,MACA,WAAWoB,KACTvB,WACAwB,kBAAkBC,MAClB1B,mCAAS0B,MACTnB,YAAYiB,KAAKC,kBAAkBlB,UAAUP,mCAASO,QAAQ,GAC9DD,YAAYkB,KAAKC,kBAAkBnB,UAAUN,mCAASM,QAAQ,GAC9DS,gBACES,KAAKC,kBAAkBV,cAAcf,mCAASe,YAAY,CAAC,GAE/D,eAAeA,cACf,WAAWT,UACX,WAAWC,UACX,OAAM,WACN,UACA,UACA,UACA,eAAa,MACb,UAAUe,eACV,OACA,SACA,gBACA,SAAS;AAAA,IACPI,MAAMF,KAAKC,kBAAkBE,QAAQ3B,mCAAS2B,MAAM;AAAA,IACpDC,YAAYJ,KAAKC,kBAAkBG,YAAY5B,mCAAS4B,UAAU;AAAA,IAClEpB,SAASgB,KAAKC,kBAAkBjB,SAASR,mCAASQ,OAAO;AAAA,IACzDqB,OAAOL,KAAKC,kBAAkBI,OAAO7B,mCAAS6B,KAAK;AAAA,IACnDC,OAAON,KAAKC,kBAAkBK,OAAO9B,mCAAS8B,KAAK;AAAA,IACnDvB,UAAUiB,KAAKC,kBAAkBlB,UAAUP,mCAASO,QAAQ;AAAA,EAAA,GAE9D,YACA,gBAAgBW,wBAChB,QAAQG,gBACR,GAAIP,OACJ,CAAA;AAEN;"}

package/dist/esm/components/Box/Box.js

@@ -1,6 +1,6 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { theme } from "@hitachivantara/uikit-styles";
 import { forwardRef } from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 const useSx = (sx) => {
   return typeof sx === "function" ? sx(theme) : sx;
 };
@@ -12,12 +12,7 @@ const HvBox = forwardRef(({
   ...restProps
 }, ref) => {
   const Component = as || "div";
-  return /* @__PURE__ */ jsx(Component, {
-    style: sx ? useSx(sx) : style,
-    ref,
-    ...restProps,
-    children
-  });
+  return /* @__PURE__ */ jsx(Component, { style: sx ? useSx(sx) : style, ref, ...restProps, children });
 });
 export {
   HvBox

package/dist/esm/components/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"../../types\";\n\ntype SxProps = React.CSSProperties | ((theme) => React.CSSProperties);\n\ntype HvBaseProps<C extends React.ElementType> = PolymorphicComponentRef<\n  C,\n  { style?: React.CSSProperties; sx?: SxProps }\n>;\n\nexport type HvBoxProps = <C extends React.ElementType = \"div\">(\n  props: HvBaseProps<C>\n) => React.ReactElement | null;\n\nconst useSx = (sx: SxProps) => {\n  return typeof sx === \"function\" ? sx(theme) : sx;\n};\n\nexport const HvBox: HvBoxProps = forwardRef(\n  <C extends React.ElementType = \"div\">(\n    { style, as, sx, children, ...restProps }: HvBaseProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as || \"div\";\n\n    return (\n      <Component style={sx ? useSx(sx) : style} ref={ref} {...restProps}>\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["useSx","sx","theme","HvBox","forwardRef","style","as","children","restProps","ref","Component"],"mappings":";;;AAgBA,MAAMA,QAAQA,CAACC,OAAgB;AAC7B,SAAO,OAAOA,OAAO,aAAaA,GAAGC,KAAK,IAAID;AAChD;AAEaE,MAAAA,QAAoBC,WAC/B,CACE;AAAA,EAAEC;AAAAA,EAAOC;AAAAA,EAAIL;AAAAA,EAAIM;AAAAA,KAAaC;AAA0B,GACxDC,QACG;AACH,QAAMC,YAAYJ,MAAM;AAExB,6BACGI,WAAS;AAAA,IAACL,OAAOJ,KAAKD,MAAMC,EAAE,IAAII;AAAAA,IAAOI;AAAAA,IAAS,GAAKD;AAAAA,IAASD;AAAAA,EAAAA,CAErD;AAEhB,CAAC;"}
+{"version":3,"file":"Box.js","sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"../../types\";\n\ntype SxProps = React.CSSProperties | ((theme) => React.CSSProperties);\n\ntype HvBaseProps<C extends React.ElementType> = PolymorphicComponentRef<\n  C,\n  { style?: React.CSSProperties; sx?: SxProps }\n>;\n\nexport type HvBoxProps = <C extends React.ElementType = \"div\">(\n  props: HvBaseProps<C>\n) => React.ReactElement | null;\n\nconst useSx = (sx: SxProps) => {\n  return typeof sx === \"function\" ? sx(theme) : sx;\n};\n\nexport const HvBox: HvBoxProps = forwardRef(\n  <C extends React.ElementType = \"div\">(\n    { style, as, sx, children, ...restProps }: HvBaseProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as || \"div\";\n\n    return (\n      <Component style={sx ? useSx(sx) : style} ref={ref} {...restProps}>\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["useSx","sx","theme","HvBox","forwardRef","style","as","children","restProps","ref","Component"],"mappings":";;;AAgBA,MAAMA,QAAQA,CAACC,OAAgB;AAC7B,SAAO,OAAOA,OAAO,aAAaA,GAAGC,KAAK,IAAID;AAChD;AAEaE,MAAAA,QAAoBC,WAC/B,CACE;AAAA,EAAEC;AAAAA,EAAOC;AAAAA,EAAIL;AAAAA,EAAIM;AAAAA,KAAaC;AAA0B,GACxDC,QACG;AACH,QAAMC,YAAYJ,MAAM;AAGtB,SAAA,oBAAC,WAAU,EAAA,OAAOL,KAAKD,MAAMC,EAAE,IAAII,OAAO,KAAcG,GAAAA,WACrDD,SACH,CAAA;AAEJ,CAAC;"}

package/dist/esm/components/BreadCrumb/BreadCrumb.js

@@ -1,10 +1,10 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
 import isNil from "lodash/isNil";
 import startCase from "lodash/startCase";
 import { isValidElement } from "react";
 import { StyledRoot, StyledOrderedList, StyledTypography } from "./BreadCrumb.styles.js";
 import { pathWithSubMenu, removeExtension } from "./utils.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 import breadCrumbClasses from "./breadCrumbClasses.js";
 import { HvPathElement } from "./PathElement/PathElement.js";
 import { HvPage } from "./Page/Page.js";
@@ -33,40 +33,19 @@ const HvBreadCrumb = ({
     }));
   }
   const breadcrumbPath = maxVisibleElem && listPath.length > maxVisibleElem ? pathWithSubMenu(id, classes, listPath, maxVisibleElem, dropDownMenuProps) : listPath;
-  return /* @__PURE__ */ jsx(StyledRoot, {
-    id,
-    className: clsx(breadCrumbClasses.root, classes == null ? void 0 : classes.root, className),
-    ...others,
-    children: /* @__PURE__ */ jsx(StyledOrderedList, {
-      className: clsx(breadCrumbClasses.orderedList, classes == null ? void 0 : classes.orderedList),
-      children: listPath.map((elem, index) => {
-        const key = `key_${index}`;
-        const isLast = index === breadcrumbPath.length - 1;
-        {
-          return /* @__PURE__ */ jsx(HvPathElement, {
-            classes: {
-              centerContainer: clsx(breadCrumbClasses.centerContainer, classes == null ? void 0 : classes.centerContainer),
-              separatorContainer: clsx(breadCrumbClasses.separatorContainer, classes == null ? void 0 : classes.separatorContainer)
-            },
-            last: isLast,
-            children: isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsx(StyledTypography, {
-              className: clsx(breadCrumbClasses.currentPage, classes == null ? void 0 : classes.currentPage),
-              variant: "body",
-              children: startCase(removeExtension(elem.label))
-            }) || /* @__PURE__ */ jsx(HvPage, {
-              elem,
-              classes: {
-                a: clsx(breadCrumbClasses.a, classes == null ? void 0 : classes.a),
-                link: clsx(breadCrumbClasses.link, classes == null ? void 0 : classes.link)
-              },
-              Component: onClick ? component : void 0,
-              onClick
-            }, key)
-          }, key);
-        }
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx(StyledRoot, { id, className: clsx(breadCrumbClasses.root, classes == null ? void 0 : classes.root, className), ...others, children: /* @__PURE__ */ jsx(StyledOrderedList, { className: clsx(breadCrumbClasses.orderedList, classes == null ? void 0 : classes.orderedList), children: listPath.map((elem, index) => {
+    const key = `key_${index}`;
+    const isLast = index === breadcrumbPath.length - 1;
+    {
+      return /* @__PURE__ */ jsx(HvPathElement, { classes: {
+        centerContainer: clsx(breadCrumbClasses.centerContainer, classes == null ? void 0 : classes.centerContainer),
+        separatorContainer: clsx(breadCrumbClasses.separatorContainer, classes == null ? void 0 : classes.separatorContainer)
+      }, last: isLast, children: isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsx(StyledTypography, { className: clsx(breadCrumbClasses.currentPage, classes == null ? void 0 : classes.currentPage), variant: "body", children: startCase(removeExtension(elem.label)) }) || /* @__PURE__ */ jsx(HvPage, { elem, classes: {
+        a: clsx(breadCrumbClasses.a, classes == null ? void 0 : classes.a),
+        link: clsx(breadCrumbClasses.link, classes == null ? void 0 : classes.link)
+      }, Component: onClick ? component : void 0, onClick }, key) }, key);
+    }
+  }) }) });
 };
 export {
   HvBreadCrumb