Add TypeScript definitions and remove PropTypes

tnajdek · tnajdek · commit 66433cf821a0 · 2026-03-18T17:27:34.000+01:00
diff --git a/.editorconfig b/.editorconfig
@@ -11,3 +11,8 @@ insert_final_newline = true
 indent_style = tab
 trim_trailing_whitespace = true
 insert_final_newline = true
+
+[*.{ts,d.ts}]
+indent_style = tab
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/components/button.d.ts b/components/button.d.ts
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	children?: React.ReactNode;
+	className?: string;
+	icon?: boolean;
+}
+
+export const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
diff --git a/components/button.jsx b/components/button.jsx
@@ -1,5 +1,4 @@
 import cx from 'classnames';
-import PropTypes from 'prop-types';
 import { forwardRef, memo } from 'react';
 
 const Button = memo(forwardRef((props, ref) => {
@@ -20,10 +19,4 @@ const Button = memo(forwardRef((props, ref) => {
 
 Button.displayName = "Button";
 
-Button.propTypes = {
-	children: PropTypes.node,
-	className: PropTypes.string,
-	icon: PropTypes.bool
-};
-
 export { Button };
diff --git a/components/dropdown.d.ts b/components/dropdown.d.ts
@@ -0,0 +1,69 @@
+import React from 'react';
+
+export interface DropdownContextValue {
+	handleToggle: (ev: React.SyntheticEvent) => void;
+	isOpen: boolean;
+	x: number | null;
+	y: number | null;
+	refs: {
+		setReference: (el: HTMLElement | null) => void;
+		setFloating: (el: HTMLElement | null) => void;
+		floating: React.MutableRefObject<HTMLElement | null>;
+	};
+	strategy: 'absolute' | 'fixed';
+	update: () => void;
+	isReady: boolean;
+	portal: boolean | HTMLElement;
+}
+
+export const DropdownContext: React.Context<DropdownContextValue>;
+
+export interface DropdownProps {
+	children?: React.ReactNode;
+	className?: string;
+	disabled?: boolean;
+	isOpen?: boolean;
+	maxHeight?: number | boolean;
+	onToggle?: (ev: React.SyntheticEvent) => void;
+	portal?: boolean | HTMLElement;
+	placement?: string;
+	strategy?: 'absolute' | 'fixed';
+}
+
+export const Dropdown: React.FC<DropdownProps>;
+
+export interface DropdownToggleProps {
+	tag?: React.ElementType;
+	children?: React.ReactNode;
+	className?: string;
+	onClick?: (ev: React.MouseEvent) => void;
+	onKeyDown?: (ev: React.KeyboardEvent) => void;
+	tabIndex?: number;
+	title?: string;
+}
+
+export const DropdownToggle: React.ForwardRefExoticComponent<DropdownToggleProps & React.RefAttributes<HTMLElement>>;
+
+export interface DropdownMenuProps {
+	children?: React.ReactNode;
+	className?: string;
+	onKeyDown?: (ev: React.KeyboardEvent) => void;
+}
+
+export const DropdownMenu: React.FC<DropdownMenuProps>;
+
+export interface DropdownItemProps {
+	disabled?: boolean;
+	divider?: boolean;
+	role?: string;
+	children?: React.ReactNode;
+	className?: string;
+	onClick?: (ev: React.MouseEvent | React.KeyboardEvent) => void;
+	tag?: React.ElementType;
+}
+
+export const DropdownItem: React.FC<DropdownItemProps>;
+
+export interface UncontrolledDropdownProps extends Omit<DropdownProps, 'isOpen' | 'onToggle'> {}
+
+export const UncontrolledDropdown: React.FC<UncontrolledDropdownProps>;
diff --git a/components/dropdown.jsx b/components/dropdown.jsx
@@ -2,7 +2,6 @@ import {
 	createContext, forwardRef, memo, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState,
 } from 'react';
 import {createPortal} from 'react-dom';
-import PropTypes from 'prop-types';
 import {flip, shift, size, useFloating} from '@floating-ui/react-dom';
 import cx from 'classnames';
 
@@ -165,19 +164,6 @@ export const Dropdown = memo(props => {
 
 Dropdown.displayName = 'Dropdown';
 
-Dropdown.propTypes = {
-	children: PropTypes.node,
-	className: PropTypes.string,
-	disabled: PropTypes.bool,
-	isOpen: PropTypes.bool,
-	maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-	modifiers: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
-	onToggle: PropTypes.func,
-	portal: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-	placement: PropTypes.string,
-	strategy: PropTypes.oneOf(['absolute', 'fixed'])
-};
-
 export const DropdownToggle = memo(forwardRef((props, ref) => {
 	const {className, tabIndex, title, onKeyDown, onClick, ...rest} = props;
 	const Tag = props.tag || Button;
@@ -222,16 +208,6 @@ export const DropdownToggle = memo(forwardRef((props, ref) => {
 
 DropdownToggle.displayName = 'DropdownToggle';
 
-DropdownToggle.propTypes = {
-	tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-	children: PropTypes.node,
-	className: PropTypes.string,
-	onClick: PropTypes.func,
-	onKeyDown: PropTypes.func,
-	tabIndex: PropTypes.number,
-	title: PropTypes.string,
-};
-
 export const DropdownMenu = memo(props => {
 	const {className, onKeyDown: onKeyDownProp, ...rest} = props;
 	const ref = useRef(null);
@@ -309,16 +285,6 @@ export const DropdownMenu = memo(props => {
 
 DropdownMenu.displayName = 'DropdownMenu';
 
-DropdownMenu.propTypes = {
-	children: PropTypes.node,
-	className: PropTypes.string,
-	isOpen: PropTypes.bool,
-	keepOpenOnInteraction: PropTypes.bool,
-	onKeyDown: PropTypes.func,
-	right: PropTypes.bool,
-	tabIndex: PropTypes.string
-};
-
 export const DropdownItem = memo(props => {
 	const ref = useRef(null);
 	const {children, className, onClick, disabled = false, role = 'menuitem', tag, divider, ...rest} = props;
@@ -379,16 +345,6 @@ export const DropdownItem = memo(props => {
 
 DropdownItem.displayName = 'DropdownItem';
 
-DropdownItem.propTypes = {
-	disabled: PropTypes.bool,
-	divider: PropTypes.bool,
-	role: PropTypes.string,
-	children: PropTypes.node,
-	className: PropTypes.string,
-	onClick: PropTypes.func,
-	tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-};
-
 export const UncontrolledDropdown = memo(props => {
 	const [isOpen, setIsOpen] = useState(false);
 
@@ -409,7 +365,3 @@ export const UncontrolledDropdown = memo(props => {
 
 UncontrolledDropdown.displayName = 'UncontrolledDropdown';
 
-UncontrolledDropdown.propTypes = {
-	children: PropTypes.node,
-}
-
diff --git a/components/icon.d.ts b/components/icon.d.ts
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export interface IconProps {
+	type: string;
+	className?: string;
+	color?: string;
+	colorScheme?: string;
+	height?: number | string;
+	width?: number | string;
+	label?: string;
+	role?: string;
+	style?: React.CSSProperties;
+	symbol?: string;
+	usePixelRatio?: boolean;
+	useColorScheme?: boolean;
+	viewBox?: string;
+}
+
+export const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
diff --git a/components/icon.jsx b/components/icon.jsx
@@ -1,5 +1,4 @@
 import { memo, forwardRef, useContext, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { useForceUpdate } from '../hooks';
 import { pick } from '../utils';
@@ -95,19 +94,3 @@ export const Icon = memo(forwardRef((props, ref) => {
 }));
 
 Icon.displayName = 'Icon';
-
-Icon.propTypes = {
-	className: PropTypes.string,
-	color: PropTypes.string,
-	colorScheme: PropTypes.string,
-	height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-	label: PropTypes.string,
-	role: PropTypes.string,
-	style: PropTypes.object,
-	symbol: PropTypes.string,
-	type: PropTypes.string.isRequired,
-	usePixelRatio: PropTypes.bool,
-	useColorScheme: PropTypes.bool,
-	viewBox: PropTypes.string,
-	width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-};
diff --git a/components/index.d.ts b/components/index.d.ts
@@ -0,0 +1,7 @@
+export * from './button';
+export * from './dropdown';
+export * from './icon';
+export * from './select';
+export * from './spinner';
+export * from './static';
+export * from './tabs';
diff --git a/components/select.d.ts b/components/select.d.ts
@@ -0,0 +1,40 @@
+import React from 'react';
+
+export interface SelectOption {
+	value: string;
+	label: string;
+}
+
+export interface SelectOptionProps {
+	isHighlighted?: boolean;
+	onMouseDown?: (ev: React.MouseEvent) => void;
+	option?: SelectOption;
+	isSelected?: boolean;
+	onTrigger?: (ev: React.SyntheticEvent) => void;
+}
+
+export const SelectOption: React.FC<SelectOptionProps>;
+
+export const SelectDivider: React.FC;
+
+export interface SelectImperativeHandle {
+	getElement(): HTMLDivElement | null;
+	focus(): void;
+}
+
+export interface SelectProps {
+	children?: React.ReactNode;
+	className?: string;
+	disabled?: boolean;
+	id?: string;
+	onBlur?: (ev: React.FocusEvent) => void;
+	onChange?: (value: string) => void;
+	onFocus?: (ev: React.FocusEvent) => void;
+	options?: SelectOption[];
+	readOnly?: boolean;
+	searchable?: boolean;
+	tabIndex?: number;
+	value?: string;
+}
+
+export const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<SelectImperativeHandle>>;
diff --git a/components/select.jsx b/components/select.jsx
@@ -1,7 +1,6 @@
 import {
 	cloneElement, forwardRef, memo, useCallback, useImperativeHandle, useRef, useReducer, useEffect, useMemo, useId
 } from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 import deepEqual from 'deep-equal';
 
@@ -30,13 +29,6 @@ const SelectOption = memo(({ option, isSelected, isHighlighted, onMouseDown }) =
 
 SelectOption.displayName = 'SelectOption';
 
-SelectOption.propTypes = {
-	isHighlighted: PropTypes.bool,
-	onMouseDown: PropTypes.func,
-	option: PropTypes.object,
-	isSelected: PropTypes.bool,
-};
-
 const SelectDivider = memo(() => <div className="select-option select-divider" />);
 
 SelectDivider.displayName = 'SelectDivider';
@@ -335,19 +327,4 @@ const Select = memo(forwardRef((props, ref) => {
 
 Select.displayName = 'Select';
 
-Select.propTypes = {
-	children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-	className: PropTypes.string,
-	disabled: PropTypes.bool,
-	id: PropTypes.string,
-	onBlur: PropTypes.func,
-	onChange: PropTypes.func,
-	onFocus: PropTypes.func,
-	options: PropTypes.array,
-	readOnly: PropTypes.bool,
-	searchable: PropTypes.bool,
-	tabIndex: PropTypes.number,
-	value: PropTypes.string,
-};
-
 export { Select, SelectDivider, SelectOption };
diff --git a/components/spinner.d.ts b/components/spinner.d.ts
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export interface SpinnerProps {
+	className?: string;
+}
+
+export const Spinner: React.FC<SpinnerProps>;
diff --git a/components/spinner.jsx b/components/spinner.jsx
@@ -1,13 +1,8 @@
 import { memo } from 'react';
-import PropTypes from 'prop-types';
 import { Icon } from './icon';
 
 export const Spinner = memo(props => (
 	<Icon {...props} role="progressbar" type="16/spin" width="16" height="16" />
 ));
 
 Spinner.displayName = 'Spinner';
-
-Spinner.propTypes = {
-	className: PropTypes.string,
-}
diff --git a/components/static.d.ts b/components/static.d.ts
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const StaticContext: React.Context<string>;
diff --git a/components/tabs.d.ts b/components/tabs.d.ts
@@ -0,0 +1,35 @@
+import React from 'react';
+
+export interface TabProps {
+	activateOnFocus?: boolean;
+	asSections?: boolean;
+	children?: React.ReactNode;
+	isActive?: boolean;
+	isDisabled?: boolean;
+	onActivate: (el: HTMLElement) => void;
+	focusNext?: (ev: React.KeyboardEvent) => HTMLElement;
+	focusPrev?: (ev: React.KeyboardEvent) => HTMLElement;
+	resetLastFocused?: () => void;
+}
+
+export const Tab: React.FC<TabProps>;
+
+export interface TabsProps {
+	asSections?: boolean;
+	children?: React.ReactNode;
+	className?: string;
+	compact?: boolean;
+	justified?: boolean;
+	activateOnFocus?: boolean;
+}
+
+export const Tabs: React.FC<TabsProps>;
+
+export interface TabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
+	children?: React.ReactNode;
+	className?: string;
+	isActive?: boolean;
+	isLoading?: boolean;
+}
+
+export const TabPane: React.ForwardRefExoticComponent<TabPaneProps & React.RefAttributes<HTMLDivElement>>;
diff --git a/components/tabs.jsx b/components/tabs.jsx
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/test/fixtures/citeproc-wrapper-fixture.jsx b/test/fixtures/citeproc-wrapper-fixture.jsx
diff --git a/test/fixtures/focus-manager-fixture.jsx b/test/fixtures/focus-manager-fixture.jsx
diff --git a/tsconfig.json b/tsconfig.json
