fix: improve typings

Author: tenphi

src/components/actions/Action/Action.tsx

@@ -1,24 +1,22 @@
-import { forwardRef, MouseEventHandler } from 'react';
+import { forwardRef } from 'react';
 import { AriaButtonProps } from 'react-aria';
 import { FocusableRef } from '@react-types/shared';
 
 import {
-  BaseProps,
+  AllBaseProps,
   BaseStyleProps,
   CONTAINER_STYLES,
   ContainerStyleProps,
   extractStyles,
   Styles,
-  TagNameProps,
   TEXT_STYLES,
   TextStyleProps,
   tasty,
 } from '../../../tasty';
 import { useAction } from '../use-action';
 
 export interface CubeActionProps
-  extends BaseProps,
-    TagNameProps,
+  extends Omit<AllBaseProps, 'htmlType'>,
     BaseStyleProps,
     ContainerStyleProps,
     TextStyleProps,
@@ -27,9 +25,6 @@ export interface CubeActionProps
   label?: string;
   htmlType?: 'button' | 'submit' | 'reset' | undefined;
   download?: string;
-  onClick?: MouseEventHandler;
-  onMouseEnter?: MouseEventHandler;
-  onMouseLeave?: MouseEventHandler;
 }
 
 const DEFAULT_ACTION_STYLES: Styles = {

src/components/actions/use-action.ts

@@ -6,16 +6,15 @@ import { FocusableRef, PressEvent } from '@react-types/shared';
 import { UIKitContext } from '../../provider';
 import { mergeProps } from '../../utils/react';
 import { useFocus } from '../../utils/react/interactions';
-import { BaseProps, filterBaseProps, TagNameProps } from '../../tasty';
+import { AllBaseProps, filterBaseProps, TagName } from '../../tasty';
 import { useTracking } from '../../providers/TrackingProvider';
 import { useEvent } from '../../_internal';
 
 const LINK_PRESS_EVENT = 'Link Press';
 const BUTTON_PRESS_EVENT = 'Button Press';
 
-export interface CubeUseActionProps
-  extends BaseProps,
-    TagNameProps,
+export interface CubeUseActionProps<T extends TagName = TagName>
+  extends AllBaseProps<T>,
     Omit<AriaButtonProps, 'type'> {
   to?: string;
   label?: string;

src/components/content/ActiveZone/ActiveZone.tsx

@@ -12,15 +12,13 @@ import {
   extractStyles,
   filterBaseProps,
   Styles,
-  TagNameProps,
   TEXT_STYLES,
   TextStyleProps,
 } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
 
 export interface CubeActiveZoneProps
   extends BaseProps,
-    TagNameProps,
     BaseStyleProps,
     ContainerStyleProps,
     TextStyleProps,

src/components/content/Text.tsx

@@ -2,14 +2,14 @@ import { CSSProperties, forwardRef } from 'react';
 
 import {
   BASE_STYLES,
-  BaseProps,
+  AllBaseProps,
   BaseStyleProps,
   COLOR_STYLES,
   ColorStyleProps,
   extractStyles,
   filterBaseProps,
   ResponsiveStyleValue,
-  TagNameProps,
+  TagName,
   tasty,
   TEXT_STYLES,
   TextStyleProps,
@@ -24,9 +24,8 @@ export const TEXT_PROP_MAP = {
   italic: 'fontStyle',
 } as const;
 
-export interface CubeTextProps
-  extends BaseProps,
-    TagNameProps,
+export interface CubeTextProps<T extends TagName = TagName>
+  extends AllBaseProps<T>,
     TextStyleProps,
     BaseStyleProps,
     ColorStyleProps {
@@ -111,14 +110,11 @@ const _Text = Object.assign(Text, {
   Success: forwardRef(function SuccessText(props: CubeTextProps, ref) {
     return <Text ref={ref} color="#success-text" {...props} />;
   }),
-  Strong: forwardRef(function StrongText(props: CubeTextProps, ref) {
+  Strong: forwardRef(function StrongText(props: CubeTextProps<'strong'>, ref) {
     return (
       <Text ref={ref} as="strong" preset="strong" color="#dark" {...props} />
     );
   }),
-  Emphasis: forwardRef(function EmphasisText(props: CubeTextProps, ref) {
-    return <Text ref={ref} as="em" preset="em" {...props} />;
-  }),
   Selection: forwardRef(function SelectionText(props: CubeTextProps, ref) {
     return <Text ref={ref} color="#dark" fill="#note.30" {...props} />;
   }),

src/components/content/Title.tsx

@@ -7,7 +7,6 @@ import {
   extractStyles,
   filterBaseProps,
   PositionStyleProps,
-  TagNameProps,
   tasty,
   TEXT_STYLES,
 } from '../../tasty';
@@ -20,7 +19,6 @@ const STYLE_LIST = [...TEXT_STYLES, ...CONTAINER_STYLES];
 export interface CubeTitleProps
   extends BaseProps,
     CubeTextProps,
-    TagNameProps,
     ContainerStyleProps,
     PositionStyleProps {
   /** The level of the heading **/

src/components/fields/Select/Select.tsx

@@ -22,7 +22,7 @@ import {
   AriaSelectProps,
 } from 'react-aria';
 import styled from 'styled-components';
-import { CollectionBase, DOMRef } from '@react-types/shared';
+import { AriaLabelingProps, CollectionBase, DOMRef } from '@react-types/shared';
 
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { useProviderProps } from '../../../provider';
@@ -243,6 +243,7 @@ const StyledOverlayElement = styled(OverlayElement)`
 
 export interface CubeSelectBaseProps<T>
   extends BasePropsWithoutChildren,
+    AriaLabelingProps,
     OuterStyleProps,
     FieldBaseProps,
     BlockStyleProps,

src/components/form/Label.tsx

@@ -9,7 +9,6 @@ import {
   extractStyles,
   filterBaseProps,
   Styles,
-  TagNameProps,
   tasty,
 } from '../../tasty/index';
 import {
@@ -78,10 +77,7 @@ const LabelElement = tasty({
   styles: LABEL_STYLES,
 });
 
-export interface CubeLabelProps
-  extends BaseProps,
-    TagNameProps,
-    ContainerStyleProps {
+export interface CubeLabelProps extends BaseProps, ContainerStyleProps {
   labelPosition?: LabelPosition;
   necessityIndicator?: NecessityIndicator;
   isRequired?: boolean;

src/index.ts

@@ -138,7 +138,6 @@ export * from './components/fields';
 
 export type {
   TagName,
-  TagNameProps,
   AllBaseProps,
   BaseProps,
   BaseStyleProps,

src/tasty/index.ts

@@ -32,7 +32,6 @@ export type {
   FlowStyleProps,
   ShortGridStyles,
   GlobalStyledProps,
-  TagNameProps,
   TagName,
 } from './types';
 export type {

src/tasty/types.ts

@@ -46,8 +46,9 @@ type Caps =
   | 'Y'
   | 'Z';
 
-export interface BasePropsWithoutChildren
+export interface BasePropsWithoutChildren<K extends TagName = TagName>
   extends Pick<AllHTMLAttributes<HTMLElement>, 'className' | 'role' | 'id'> {
+  as?: K;
   /** QA ID for e2e testing. An alias for `data-qa` attribute. */
   qa?: string;
   /** QA value for e2e testing. An alias for `data-qaval` attribute. */
@@ -80,13 +81,13 @@ export interface BasePropsWithoutChildren
   theme?: 'default' | 'danger' | 'special' | (string & {});
 }
 
-export interface BaseProps<K extends keyof HTMLElementTagNameMap = 'div'>
+export interface BaseProps<K extends TagName = TagName>
   extends AriaLabelingProps,
-    BasePropsWithoutChildren,
+    BasePropsWithoutChildren<K>,
     Pick<AllHTMLAttributes<HTMLElementTagNameMap[K]>, 'children'> {}
 
-export interface AllBaseProps<K extends keyof HTMLElementTagNameMap = 'div'>
-  extends BaseProps,
+export interface AllBaseProps<K extends TagName = TagName>
+  extends BaseProps<K>,
     Omit<
       AllHTMLAttributes<HTMLElementTagNameMap[K]>,
       | 'style'
@@ -99,9 +100,9 @@ export interface AllBaseProps<K extends keyof HTMLElementTagNameMap = 'div'>
       | 'width'
       | 'content'
       | 'translate'
-    > {
-  as?: K;
-}
+      | 'as'
+      | 'form'
+    > {}
 
 export type BaseStyleProps = Pick<Styles, (typeof BASE_STYLES)[number]>;
 export type PositionStyleProps = Pick<Styles, (typeof POSITION_STYLES)[number]>;
@@ -131,8 +132,3 @@ export interface Props {
 }
 
 export type TagName = keyof HTMLElementTagNameMap;
-
-export interface TagNameProps {
-  /** The tag name you want to use for the element */
-  as?: TagName;
-}