deps: fix typings issues

packages/fractal/package.json

@@ -126,6 +126,7 @@
  "@radix-ui/react-checkbox": "^1.1.0",
  "@radix-ui/react-compose-refs": "^1.1.0",
  "@radix-ui/react-dialog": "^1.1.1",
+ "@radix-ui/react-dismissable-layer": "^1.1.0",
  "@radix-ui/react-dropdown-menu": "^2.1.1",
  "@radix-ui/react-label": "^2.1.0",
  "@radix-ui/react-popover": "^1.1.1",

packages/fractal/src/components/Autocomplete/Autocomplete.tsx

@@ -1,7 +1,7 @@
 'use client'
 
+import type { DismissableLayerProps } from '@radix-ui/react-dismissable-layer'
 import { Label as RxLabel } from '@radix-ui/react-label'
-import type { DismissableLayerProps } from '@radix-ui/react-select'
 import isEmpty from 'lodash/fp/isEmpty'
 import isFunction from 'lodash/fp/isFunction'
 import omit from 'lodash/fp/omit'
@@ -20,7 +20,10 @@ import {
 } from 'react'
 
 import { Dropdown } from '@/components/Dropdown/Dropdown'
-import type { CombinedRefs as DropdownCombinedRefs } from '@/components/Dropdown/Dropdown.types'
+import type {
+ CombinedRefs as DropdownCombinedRefs,
+ DropdownProps,
+} from '@/components/Dropdown/Dropdown.types'
 import { InputText } from '@/components/InputText'
 import { Typography } from '@/components/Typography/Typography'
 import { PREFIX } from '@/constants'
@@ -133,23 +136,24 @@ export const Autocomplete = forwardRef<CombinedRefs, AutocompleteProps>(
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [children, open])
 
- const handleDropdownInteractOutside: DismissableLayerProps['onInteractOutside'] =
- (event) => {
- const { target } = event
- if (target === window || target === null || target === undefined) {
- return
- }
+ const handleDropdownInteractOutside: DropdownProps['onInteractOutside'] = (
+ event,
+ ) => {
+ const { target } = event
+ if (target === window || target === null || target === undefined) {
+ return
+ }
 
- if (
- containerRef?.current?.contains(target as Element) ||
- dropdownRef?.current?.container?.contains(target as Element) ||
- dropdownRef?.current?.dropdown?.contains(target as Element)
- ) {
- event.preventDefault()
- } else if (isOpen && isFunction(onBlur)) {
- inputRef.current?.blur()
- }
+ if (
+ containerRef?.current?.contains(target as Element) ||
+ dropdownRef?.current?.container?.contains(target as Element) ||
+ dropdownRef?.current?.dropdown?.contains(target as Element)
+ ) {
+ event.preventDefault()
+ } else if (isOpen && isFunction(onBlur)) {
+ inputRef.current?.blur()
  }
+ }
 
  const handleDropdownPointerDownOutside: DismissableLayerProps['onPointerDownOutside'] =
  (event) => {

packages/fractal/src/components/Dialog/Dialog.tsx

@@ -2,7 +2,7 @@
 
 import CloseIcon from '@iconscout/react-unicons/icons/uil-times'
 import * as RxDialog from '@radix-ui/react-dialog'
-import type { DismissableLayerProps } from '@radix-ui/react-select'
+import type { DismissableLayerProps } from '@radix-ui/react-dismissable-layer'
 import isFunction from 'lodash/fp/isFunction'
 import isString from 'lodash/fp/isString'
 import omit from 'lodash/fp/omit'

packages/fractal/src/components/Dropdown/Dropdown.tsx

@@ -3,7 +3,6 @@
 import AngleDownIcon from '@iconscout/react-unicons/icons/uil-angle-down'
 import * as RxDropdown from '@radix-ui/react-dropdown-menu'
 import * as RxScrollArea from '@radix-ui/react-scroll-area'
-import type { DismissableLayerProps } from '@radix-ui/react-select'
 import isFunction from 'lodash/fp/isFunction'
 import isNumber from 'lodash/fp/isNumber'
 import noop from 'lodash/fp/noop'
@@ -120,24 +119,25 @@ export const Dropdown = forwardRef<CombinedRefs, DropdownProps>(
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [children, open])
 
- const handleDropdownInteractOutside: DismissableLayerProps['onInteractOutside'] =
- (event) => {
- const { target } = event
- if (target === window || target === null || target === undefined) {
- return
- }
+ const handleDropdownInteractOutside: DropdownProps['onInteractOutside'] = (
+ event,
+ ) => {
+ const { target } = event
+ if (target === window || target === null || target === undefined) {
+ return
+ }
 
-  if (
-  containerRef?.current?.contains(target as Element) ||
-  dropdownRef?.current?.contains(target as Element)
-  ) {
-  event.preventDefault()
-  }
+ if (
+ containerRef?.current?.contains(target as Element) ||
+ dropdownRef?.current?.contains(target as Element)
+ ) {
+ event.preventDefault()
+ }
 
- if (isFunction(onInteractOutside)) {
- onInteractOutside(event)
- }
+ if (isFunction(onInteractOutside)) {
+ onInteractOutside(event)
  }
+ }
 
  let widthClassNames = 'max-w-[var(--radix-popper-available-width)]'
  let widthStyle: CSSProperties = {}
@@ -353,7 +353,9 @@ perfectionist/sort-objects */
  className={`${PREFIX}-${GROUP_NAME}__dropdown__scrollarea`}
  {...(props.dir === undefined
  ? {}
- : { dir: props.dir as RxScrollArea.Direction })}
+ : {
+ dir: props.dir as RxScrollArea.ScrollAreaProps['dir'],
+ })}
  type="hover"
  >
  <RxScrollArea.Viewport

packages/fractal/src/components/Dropdown/SubDropdown.tsx

@@ -3,7 +3,6 @@
 import AngleRightIcon from '@iconscout/react-unicons/icons/uil-angle-right'
 import * as RxDropdownMenu from '@radix-ui/react-dropdown-menu'
 import * as RxScrollArea from '@radix-ui/react-scroll-area'
-import type { DismissableLayerProps } from '@radix-ui/react-select'
 import isFunction from 'lodash/fp/isFunction'
 import omit from 'lodash/fp/omit'
 import {
@@ -22,6 +21,7 @@ import { alternatingBgColorLightClassNames, cj, cn } from '@/styles/helpers'
 
 import { GROUP_NAME } from './Dropdown.constants'
 import type {
+ DropdownProps,
  SubDropdownCombinedRefs,
  SubDropdownProps,
 } from './Dropdown.types'
@@ -116,24 +116,25 @@ export const SubDropdown = forwardRef<
  const isDisabled = disabled || groupDisabled || dropdownDisabled
  const isCondensed = condensed || groupCondensed || dropdownCondensed
 
- const handleSubMenuInteractOutside: DismissableLayerProps['onInteractOutside'] =
- (event) => {
- const { target } = event
- if (target === window || target === null || target === undefined) {
- return
- }
+ const handleSubMenuInteractOutside: DropdownProps['onInteractOutside'] = (
+ event,
+ ) => {
+ const { target } = event
+ if (target === window || target === null || target === undefined) {
+ return
+ }
 
-  if (
-  triggerRef?.current?.contains(target as Element) ||
-  contentRef?.current?.contains(target as Element)
-  ) {
-  event.preventDefault()
-  }
+ if (
+ triggerRef?.current?.contains(target as Element) ||
+ contentRef?.current?.contains(target as Element)
+ ) {
+ event.preventDefault()
+ }
 
- if (isFunction(onInteractOutside)) {
- onInteractOutside(event)
- }
+ if (isFunction(onInteractOutside)) {
+ onInteractOutside(event)
  }
+ }
 
  const contentElement = (
  <Typography
@@ -246,7 +247,7 @@ export const SubDropdown = forwardRef<
  className={`${PREFIX}-${GROUP_NAME}__sub-menu__content__scrollarea`}
  {...(props.dir === undefined
  ? {}
- : { dir: props.dir as RxScrollArea.Direction })}
+ : { dir: props.dir as RxScrollArea.ScrollAreaProps['dir'] })}
  type="hover"
  >
  <RxScrollArea.Viewport

packages/fractal/src/components/InputCheckbox/InputCheckbox.types.ts

@@ -1,5 +1,5 @@
 import type {
- CheckedState,
+ CheckboxProps,
  CheckboxProps as RxCheckboxProps,
 } from '@radix-ui/react-checkbox'
 import type { ReactNode } from 'react'
@@ -12,7 +12,7 @@ export interface InputCheckboxProps extends Omit<RxCheckboxProps, 'asChild'> {
  *
  * Must be used in conjunction with `onCheckedChange`.
  */
- checked?: CheckedState
+ checked?: CheckboxProps['checked']
  /**
  * The content of the checkbox.
  *
@@ -27,7 +27,7 @@ export interface InputCheckboxProps extends Omit<RxCheckboxProps, 'asChild'> {
  *
  * Use this when you do not need to control its checked state.
  */
- defaultChecked?: CheckedState
+ defaultChecked?: CheckboxProps['defaultChecked']
  /** Prevents the user from interacting with the checkbox. */
  disabled?: boolean
  /** Indicates if the checkbox should take all the available width. */
@@ -69,7 +69,7 @@ export interface InputCheckboxProps extends Omit<RxCheckboxProps, 'asChild'> {
  */
  name?: string
  /** Event handler called when the checked state of the checkbox changes. */
- onCheckedChange?: (checked: CheckedState) => void
+ onCheckedChange?: (checked: CheckboxProps['checked']) => void
  /**
  * Prevent the user from interacting with the checkbox but keep a
  * non-disabled visual state.

packages/fractal/src/components/InputRadio/InputRadio.types.ts

@@ -1,6 +1,6 @@
 import {
  RadioGroupProps as RxRadioGroupProps,
- RadioProps as RxRadioProps,
+ RadioGroupItemProps as RxRadioProps,
 } from '@radix-ui/react-radio-group'
 import type { ReactNode } from 'react'
 

packages/fractal/src/components/Menu/SubMenu.tsx

@@ -2,7 +2,6 @@
 
 import AngleRightIcon from '@iconscout/react-unicons/icons/uil-angle-right'
 import * as RxScrollArea from '@radix-ui/react-scroll-area'
-import type { DismissableLayerProps } from '@radix-ui/react-select'
 import { useClickOutside } from '@react-hookz/web'
 import constant from 'lodash/fp/constant'
 import isEmpty from 'lodash/fp/isEmpty'
@@ -25,6 +24,7 @@ import { Typography } from '@/components/Typography/Typography'
 import { PREFIX } from '@/constants'
 import { alternatingBgColorLightClassNames, cj, cn } from '@/styles/helpers'
 
+import { PopoverProps } from '../Popover'
 import {
  DEFAULT_SUB_MENU_ELEVATION,
  GROUP_NAME,
@@ -139,24 +139,25 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
  const isDisabled = disabled || groupDisabled || menuDisabled
  const isCondensed = condensed || groupCondensed || menuCondensed
 
- const handleSubMenuInteractOutside: DismissableLayerProps['onInteractOutside'] =
- (event) => {
- const { target } = event
- if (target === window || target === null || target === undefined) {
- return
- }
+ const handleSubMenuInteractOutside: PopoverProps['onInteractOutside'] = (
+ event,
+ ) => {
+ const { target } = event
+ if (target === window || target === null || target === undefined) {
+ return
+ }
 
-  if (
-  triggerRef?.current?.contains(target as Element) ||
-  contentRef?.current?.contains(target as Element)
-  ) {
-  event.preventDefault()
-  }
+ if (
+ triggerRef?.current?.contains(target as Element) ||
+ contentRef?.current?.contains(target as Element)
+ ) {
+ event.preventDefault()
+ }
 
- if (isFunction(onInteractOutside)) {
- onInteractOutside(event)
- }
+ if (isFunction(onInteractOutside)) {
+ onInteractOutside(event)
  }
+ }
 
  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
  if (isFunction(props.onKeyDown)) {
@@ -288,7 +289,7 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
  className={`${PREFIX}-${GROUP_NAME}__sub-menu__content__scrollarea`}
  {...(props.dir === undefined
  ? {}
- : { dir: props.dir as RxScrollArea.Direction })}
+ : { dir: props.dir as RxScrollArea.ScrollAreaProps['dir'] })}
  type="hover"
  >
  <RxScrollArea.Viewport

packages/fractal/src/components/Popover/Popover.tsx

@@ -119,24 +119,25 @@ export const Popover = forwardRef<CombinedRefs, PopoverProps>(
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [children, open])
 
- const handleInteractOutside: RxPopover.DismissableLayerProps['onInteractOutside'] =
- (event) => {
- const { target } = event
- if (target === window || target === null || target === undefined) {
- return
- }
+ const handleInteractOutside: PopoverProps['onInteractOutside'] = (
+ event,
+ ) => {
+ const { target } = event
+ if (target === window || target === null || target === undefined) {
+ return
+ }
 
-  if (
-  containerRef?.current?.contains(target as Element) ||
-  contentRef?.current?.contains(target as Element)
-  ) {
-  event.preventDefault()
-  }
+ if (
+ containerRef?.current?.contains(target as Element) ||
+ contentRef?.current?.contains(target as Element)
+ ) {
+ event.preventDefault()
+ }
 
- if (isFunction(onInteractOutside)) {
- onInteractOutside(event)
- }
+ if (isFunction(onInteractOutside)) {
+ onInteractOutside(event)
  }
+ }
 
  let widthClassNames = 'max-w-[var(--radix-popper-available-width)]'
  let widthStyle: CSSProperties = {}
@@ -305,7 +306,9 @@ export const Popover = forwardRef<CombinedRefs, PopoverProps>(
  className={`${PREFIX}-${GROUP_NAME}__popover__scrollarea`}
  {...(props.dir === undefined
  ? {}
- : { dir: props.dir as RxScrollArea.Direction })}
+ : {
+ dir: props.dir as RxScrollArea.ScrollAreaProps['dir'],
+ })}
  type="hover"
  >
  <RxScrollArea.Viewport

packages/fractal/src/components/Select/Select.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import AngleDownIcon from '@iconscout/react-unicons/icons/uil-angle-down'
+import type { DismissableLayerProps } from '@radix-ui/react-dismissable-layer'
 import { Label as RxLabel } from '@radix-ui/react-label'
 import * as RxScrollArea from '@radix-ui/react-scroll-area'
 import * as RxSelect from '@radix-ui/react-select'
@@ -111,7 +112,7 @@ export const Select = forwardRef<CombinedRefs, SelectProps>(
  handleDropdownToggle(!isOpen)
  }
 
- const handlePointerDownOutside: RxSelect.DismissableLayerProps['onPointerDownOutside'] =
+ const handlePointerDownOutside: DismissableLayerProps['onPointerDownOutside'] =
  (event) => {
  if (isFunction(dropdown.onPointerDownOutside)) {
  dropdown.onPointerDownOutside(event)
@@ -157,7 +158,7 @@ export const Select = forwardRef<CombinedRefs, SelectProps>(
  className={`${PREFIX}-${GROUP_NAME}__dropdown__scrollarea`}
  {...(props.dir === undefined
  ? {}
- : { dir: props.dir as RxScrollArea.Direction })}
+ : { dir: props.dir as RxScrollArea.ScrollAreaProps['dir'] })}
  type="hover"
  >
  <RxSelect.Viewport asChild>
@@ -239,7 +240,7 @@ export const Select = forwardRef<CombinedRefs, SelectProps>(
  defaultOpen={autoFocus}
  {...(props.dir === undefined
  ? {}
- : { dir: props.dir as RxSelect.Direction })}
+ : { dir: props.dir as RxSelect.SelectProps['dir'] })}
  disabled={!writable}
  name={name || uniqueId}
  open={isOpen}