diff --git a/components/auto-complete/auto-complete.tsx b/components/auto-complete/auto-complete.tsx index ea6d3fe..dc1201a 100644 --- a/components/auto-complete/auto-complete.tsx +++ b/components/auto-complete/auto-complete.tsx @@ -18,6 +18,8 @@ import { pickChild } from '../utils/collections' import useCurrentState from '../utils/use-current-state' import useScaleable, { filterScaleableProps, withScaleable } from '../use-scaleable' +export type AutoCompleteTypes = NormalTypes + export type AutoCompleteOption = { label: string value: string @@ -29,7 +31,7 @@ export type AutoCompleteOptions = Array< interface Props { options?: AutoCompleteOptions - type?: NormalTypes + type?: AutoCompleteTypes initialValue?: string value?: string onChange?: (value: string) => void @@ -50,7 +52,7 @@ const defaultProps = { initialValue: '', disabled: false, clearable: false, - type: 'default' as NormalTypes, + type: 'default' as AutoCompleteTypes, disableMatchWidth: false, disableFreeSolo: false, className: '', @@ -135,10 +137,10 @@ const AutoCompleteComponent = React.forwardRef< } return childrenToOptionsNode(options as Array) }, [searching, options]) - const showClearIcon = useMemo(() => clearable && searching === undefined, [ - clearable, - searching, - ]) + const showClearIcon = useMemo( + () => clearable && searching === undefined, + [clearable, searching], + ) const updateValue = (val: string) => { if (disabled) return diff --git a/components/auto-complete/index.ts b/components/auto-complete/index.ts index fd1d43c..ca95d11 100644 --- a/components/auto-complete/index.ts +++ b/components/auto-complete/index.ts @@ -14,4 +14,10 @@ export type AutoCompleteComponentType = typeof AutoComplete & { ;(AutoComplete as AutoCompleteComponentType).Searching = AutoCompleteSearching ;(AutoComplete as AutoCompleteComponentType).Empty = AutoCompleteEmpty +export type { + AutoCompleteOption, + AutoCompleteOptions, + AutoCompleteProps, + AutoCompleteTypes, +} from './auto-complete' export default AutoComplete as AutoCompleteComponentType diff --git a/components/avatar/index.ts b/components/avatar/index.ts index 499d23c..7130380 100644 --- a/components/avatar/index.ts +++ b/components/avatar/index.ts @@ -6,4 +6,7 @@ export type AvatarComponentType = typeof Avatar & { } ;(Avatar as AvatarComponentType).Group = AvatarGroup +export type { AvatarProps } from './avatar' +export type { AvatarGroupProps } from './avatar-group' + export default Avatar as AvatarComponentType diff --git a/components/badge/badge-anchor.tsx b/components/badge/badge-anchor.tsx index 581fd07..d8dd97c 100644 --- a/components/badge/badge-anchor.tsx +++ b/components/badge/badge-anchor.tsx @@ -5,7 +5,7 @@ import Badge from './badge' const placement = tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight') -type BadgeAnchorPlacement = typeof placement[number] +export type BadgeAnchorPlacement = typeof placement[number] interface Props { placement?: BadgeAnchorPlacement diff --git a/components/badge/badge.tsx b/components/badge/badge.tsx index 4dea7a4..30b061a 100644 --- a/components/badge/badge.tsx +++ b/components/badge/badge.tsx @@ -4,14 +4,16 @@ import { NormalTypes } from '../utils/prop-types' import { GeistUIThemesPalette } from '../themes/presets' import useScaleable, { withScaleable } from '../use-scaleable' +export type BadgeTypes = NormalTypes + interface Props { - type?: NormalTypes + type?: BadgeTypes dot?: boolean className?: string } const defaultProps = { - type: 'default' as NormalTypes, + type: 'default' as BadgeTypes, dot: false, className: '', } diff --git a/components/badge/index.ts b/components/badge/index.ts index bc55c55..6061e3a 100644 --- a/components/badge/index.ts +++ b/components/badge/index.ts @@ -6,4 +6,6 @@ export type BadgeComponentType = typeof Badge & { } ;(Badge as BadgeComponentType).Anchor = BadgeAnchor +export type { BadgeProps, BadgeTypes } from './badge' +export type { BadgeAnchorProps, BadgeAnchorPlacement } from './badge-anchor' export default Badge as BadgeComponentType diff --git a/components/breadcrumbs/index.ts b/components/breadcrumbs/index.ts index cf8cde3..bfcbafd 100644 --- a/components/breadcrumbs/index.ts +++ b/components/breadcrumbs/index.ts @@ -9,4 +9,7 @@ export type BreadcrumbsComponentType = typeof Breadcrumbs & { ;(Breadcrumbs as BreadcrumbsComponentType).Item = BreadcrumbsItem ;(Breadcrumbs as BreadcrumbsComponentType).Separator = BreadcrumbsSeparator +export type { BreadcrumbsProps } from './breadcrumbs' +export type { BreadcrumbsItemProps } from './breadcrumbs-item' +export type { BreadcrumbsSeparatorProps } from './breadcrumbs-separator' export default Breadcrumbs as BreadcrumbsComponentType diff --git a/components/button-dropdown/button-dropdown-item.tsx b/components/button-dropdown/button-dropdown-item.tsx index 5138389..7664cbb 100644 --- a/components/button-dropdown/button-dropdown-item.tsx +++ b/components/button-dropdown/button-dropdown-item.tsx @@ -5,16 +5,18 @@ import { useButtonDropdown } from './button-dropdown-context' import Loading from '../loading' import { NormalTypes } from '../utils/prop-types' +export type ButtonDropdownItemTypes = NormalTypes + interface Props { main?: boolean - type?: NormalTypes + type?: ButtonDropdownItemTypes onClick?: React.MouseEventHandler className?: string } const defaultProps = { main: false, - type: 'default' as NormalTypes, + type: 'default' as ButtonDropdownItemTypes, onClick: () => {}, className: '', } diff --git a/components/button-dropdown/button-dropdown.tsx b/components/button-dropdown/button-dropdown.tsx index cc4cc22..bd13d32 100644 --- a/components/button-dropdown/button-dropdown.tsx +++ b/components/button-dropdown/button-dropdown.tsx @@ -9,8 +9,10 @@ import { NormalTypes } from '../utils/prop-types' import { pickChild, pickChildByProps } from '../utils/collections' import useScaleable, { withScaleable } from '../use-scaleable' +export type ButtonDropdownTypes = NormalTypes + interface Props { - type?: NormalTypes + type?: ButtonDropdownTypes auto?: boolean loading?: boolean disabled?: boolean @@ -18,7 +20,7 @@ interface Props { } const defaultProps = { - type: 'default' as NormalTypes, + type: 'default' as ButtonDropdownTypes, auto: false, loading: false, disabled: false, diff --git a/components/button-dropdown/index.ts b/components/button-dropdown/index.ts index dfc2586..845f6c2 100644 --- a/components/button-dropdown/index.ts +++ b/components/button-dropdown/index.ts @@ -6,4 +6,9 @@ type ButtonDropdownType = typeof ButtonDropdown & { } ;(ButtonDropdown as ButtonDropdownType).Item = ButtonDropdownItem +export type { ButtonDropdownProps, ButtonDropdownTypes } from './button-dropdown' +export type { + ButtonDropdownItemProps, + ButtonDropdownItemTypes, +} from './button-dropdown-item' export default ButtonDropdown as ButtonDropdownType diff --git a/components/button-group/index.ts b/components/button-group/index.ts index cc398ed..9e00b24 100644 --- a/components/button-group/index.ts +++ b/components/button-group/index.ts @@ -1,3 +1,5 @@ import ButtonGroup from './button-group' +export type { ButtonGroupProps } from './button-group' +export type { ButtonTypes } from '../utils/prop-types' export default ButtonGroup diff --git a/components/button/index.ts b/components/button/index.ts index 6e408be..0119f53 100644 --- a/components/button/index.ts +++ b/components/button/index.ts @@ -1,3 +1,5 @@ import Button from './button' +export type { ButtonProps } from './button' +export type { ButtonTypes } from '../utils/prop-types' export default Button diff --git a/components/capacity/index.ts b/components/capacity/index.ts index 6a49485..2f3d515 100644 --- a/components/capacity/index.ts +++ b/components/capacity/index.ts @@ -1,3 +1,4 @@ import Capacity from './capacity' +export type { CapacityProps } from './capacity' export default Capacity diff --git a/components/card/index.ts b/components/card/index.ts index d8ae2ff..328b504 100644 --- a/components/card/index.ts +++ b/components/card/index.ts @@ -13,4 +13,8 @@ export type CardComponentType = typeof Card & { ;(Card as CardComponentType).Content = CardContent ;(Card as CardComponentType).Body = CardContent +export type { CardProps } from './card' +export type { CardContentProps } from './card-content' +export type { CardFooterProps } from './card-footer' +export type { CardTypes } from '../utils/prop-types' export default Card as CardComponentType diff --git a/components/checkbox/checkbox.tsx b/components/checkbox/checkbox.tsx index 4e580f3..35cc27a 100644 --- a/components/checkbox/checkbox.tsx +++ b/components/checkbox/checkbox.tsx @@ -7,10 +7,10 @@ import { getColors } from './styles' import useTheme from '../use-theme' import useScaleable, { withScaleable } from '../use-scaleable' -interface CheckboxEventTarget { +export type CheckboxTypes = NormalTypes +export interface CheckboxEventTarget { checked: boolean } - export interface CheckboxEvent { target: CheckboxEventTarget stopPropagation: () => void @@ -21,7 +21,7 @@ export interface CheckboxEvent { interface Props { checked?: boolean disabled?: boolean - type?: NormalTypes + type?: CheckboxTypes initialChecked?: boolean onChange?: (e: CheckboxEvent) => void className?: string @@ -30,7 +30,7 @@ interface Props { const defaultProps = { disabled: false, - type: 'default' as NormalTypes, + type: 'default' as CheckboxTypes, initialChecked: false, className: '', value: '', @@ -70,10 +70,10 @@ const CheckboxComponent: React.FC = ({ }, [values.join(',')]) } - const { fill, bg } = useMemo(() => getColors(theme.palette, type), [ - theme.palette, - type, - ]) + const { fill, bg } = useMemo( + () => getColors(theme.palette, type), + [theme.palette, type], + ) const changeHandle = useCallback( (ev: React.ChangeEvent) => { diff --git a/components/checkbox/index.ts b/components/checkbox/index.ts index 372d189..76d7b74 100644 --- a/components/checkbox/index.ts +++ b/components/checkbox/index.ts @@ -6,4 +6,11 @@ export type CheckboxComponentType = typeof Checkbox & { } ;(Checkbox as CheckboxComponentType).Group = CheckboxGroup +export type { + CheckboxProps, + CheckboxEvent, + CheckboxEventTarget, + CheckboxTypes, +} from './checkbox' +export type { CheckboxGroupProps } from './checkbox-group' export default Checkbox as CheckboxComponentType diff --git a/components/code/index.ts b/components/code/index.ts index 4d183b1..7bdab30 100644 --- a/components/code/index.ts +++ b/components/code/index.ts @@ -1,5 +1,4 @@ import Code from './code' -import { CodeProps } from './code' -export type Props = CodeProps +export type { CodeProps } from './code' export default Code diff --git a/components/col/index.ts b/components/col/index.ts index acf65aa..2aea13a 100644 --- a/components/col/index.ts +++ b/components/col/index.ts @@ -1,5 +1,4 @@ import Col from './col' -import { ColProps } from './col' -export type Props = ColProps +export type { ColProps } from './col' export default Col diff --git a/components/collapse/index.ts b/components/collapse/index.ts index e6fd7de..90f3ee8 100644 --- a/components/collapse/index.ts +++ b/components/collapse/index.ts @@ -6,4 +6,6 @@ export type CollapseComponentType = typeof Collapse & { } ;(Collapse as CollapseComponentType).Group = CollapseGroup -export default Collapse +export type { CollapseProps } from './collapse' +export type { CollapseGroupProps } from './collapse-group' +export default Collapse as CollapseComponentType diff --git a/components/description/index.ts b/components/description/index.ts index 32fa8d9..a3c84c9 100644 --- a/components/description/index.ts +++ b/components/description/index.ts @@ -1,5 +1,4 @@ import Description from './description' -import { DescriptionProps } from './description' -export type Props = DescriptionProps +export type { DescriptionProps } from './description' export default Description diff --git a/components/display/index.ts b/components/display/index.ts index 7929abb..fcb9fbd 100644 --- a/components/display/index.ts +++ b/components/display/index.ts @@ -1,5 +1,4 @@ import Display from './display' -import { DisplayProps } from './display' -export type Props = DisplayProps +export type { DisplayProps } from './display' export default Display diff --git a/components/divider/__tests__/__snapshots__/index.test.tsx.snap b/components/divider/__tests__/__snapshots__/index.test.tsx.snap index c6aaebf..71a7756 100644 --- a/components/divider/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/divider/__tests__/__snapshots__/index.test.tsx.snap @@ -549,8 +549,8 @@ initialize { "next": Node { "attribs": Object { "class": "divider ", + "h": "2", "role": "separator", - "volume": "2", }, "children": Array [ Node { @@ -579,7 +579,7 @@ initialize { position: relative; font-size: calc(1 * 16px); width: auto; - height: calc(0.0625 * 16px); + height: calc(0.125 * 16px); padding: 0 0 0 0; margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0; } @@ -649,7 +649,7 @@ initialize { position: relative; font-size: calc(1 * 16px); width: auto; - height: calc(0.0625 * 16px); + height: calc(0.125 * 16px); padding: 0 0 0 0; margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0; } @@ -732,13 +732,13 @@ initialize { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "h": undefined, "role": undefined, - "volume": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "h": undefined, "role": undefined, - "volume": undefined, }, }, "parent": [Circular], @@ -1138,8 +1138,8 @@ initialize { "next": Node { "attribs": Object { "class": "divider ", + "h": "2", "role": "separator", - "volume": "2", }, "children": Array [ Node { @@ -1168,7 +1168,7 @@ initialize { position: relative; font-size: calc(1 * 16px); width: auto; - height: calc(0.0625 * 16px); + height: calc(0.125 * 16px); padding: 0 0 0 0; margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0; } @@ -1238,7 +1238,7 @@ initialize { position: relative; font-size: calc(1 * 16px); width: auto; - height: calc(0.0625 * 16px); + height: calc(0.125 * 16px); padding: 0 0 0 0; margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0; } @@ -1321,13 +1321,13 @@ initialize { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "h": undefined, "role": undefined, - "volume": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "h": undefined, "role": undefined, - "volume": undefined, }, }, "parent": [Circular], @@ -1727,8 +1727,8 @@ initialize { "next": Node { "attribs": Object { "class": "divider ", + "h": "2", "role": "separator", - "volume": "2", }, "children": Array [ Node { @@ -1757,7 +1757,7 @@ initialize { position: relative; font-size: calc(1 * 16px); width: auto; - height: calc(0.0625 * 16px); + height: calc(0.125 * 16px); padding: 0 0 0 0; margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0; } @@ -1827,7 +1827,7 @@ initialize { position: relative; font-size: calc(1 * 16px); width: auto; - height: calc(0.0625 * 16px); + height: calc(0.125 * 16px); padding: 0 0 0 0; margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0; } @@ -1910,13 +1910,13 @@ initialize { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "h": undefined, "role": undefined, - "volume": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "h": undefined, "role": undefined, - "volume": undefined, }, }, "parent": [Circular], @@ -2316,8 +2316,8 @@ initialize { Node { "attribs": Object { "class": "divider ", + "h": "2", "role": "separator", - "volume": "2", }, "children": Array [ Node { @@ -2346,7 +2346,7 @@ initialize { position: relative; font-size: calc(1 * 16px); width: auto; - height: calc(0.0625 * 16px); + height: calc(0.125 * 16px); padding: 0 0 0 0; margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0; } @@ -2416,7 +2416,7 @@ initialize { position: relative; font-size: calc(1 * 16px); width: auto; - height: calc(0.0625 * 16px); + height: calc(0.125 * 16px); padding: 0 0 0 0; margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0; } @@ -3072,13 +3072,13 @@ initialize { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "h": undefined, "role": undefined, - "volume": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "h": undefined, "role": undefined, - "volume": undefined, }, }, ], @@ -3874,7 +3874,7 @@ initialize { } `; -exports[`Divider should work with x and y 1`] = ` +exports[`Divider should work with w and h 1`] = ` initialize { "0": Node { "attribs": Object {}, @@ -3883,7 +3883,7 @@ initialize { "attribs": Object { "class": "divider ", "role": "separator", - "x": "3", + "w": "3", }, "children": Array [ Node { @@ -3896,7 +3896,7 @@ initialize { background-color: #eaeaea; position: relative; font-size: calc(1 * 16px); - width: auto; + width: calc(3 * 16px); height: calc(0.0625 * 16px); padding: 0 0 0 0; margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0; @@ -3952,8 +3952,8 @@ initialize { "next": Node { "attribs": Object { "class": "divider ", + "h": "3", "role": "separator", - "y": "3", }, "children": Array [ Node { @@ -3967,7 +3967,7 @@ initialize { position: relative; font-size: calc(1 * 16px); width: auto; - height: calc(0.0625 * 16px); + height: calc(0.1875 * 16px); padding: 0 0 0 0; margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0; } @@ -4025,13 +4025,13 @@ initialize { "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "h": undefined, "role": undefined, - "y": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "h": undefined, "role": undefined, - "y": undefined, }, }, "parent": [Circular], @@ -4040,19 +4040,19 @@ initialize { "x-attribsNamespace": Object { "class": undefined, "role": undefined, - "x": undefined, + "w": undefined, }, "x-attribsPrefix": Object { "class": undefined, "role": undefined, - "x": undefined, + "w": undefined, }, }, Node { "attribs": Object { "class": "divider ", + "h": "3", "role": "separator", - "y": "3", }, "children": Array [ Node { @@ -4066,7 +4066,7 @@ initialize { position: relative; font-size: calc(1 * 16px); width: auto; - height: calc(0.0625 * 16px); + height: calc(0.1875 * 16px); padding: 0 0 0 0; margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0; } @@ -4124,7 +4124,7 @@ initialize { "attribs": Object { "class": "divider ", "role": "separator", - "x": "3", + "w": "3", }, "children": Array [ Node { @@ -4137,7 +4137,7 @@ initialize { background-color: #eaeaea; position: relative; font-size: calc(1 * 16px); - width: auto; + width: calc(3 * 16px); height: calc(0.0625 * 16px); padding: 0 0 0 0; margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0; @@ -4197,24 +4197,24 @@ initialize { "x-attribsNamespace": Object { "class": undefined, "role": undefined, - "x": undefined, + "w": undefined, }, "x-attribsPrefix": Object { "class": undefined, "role": undefined, - "x": undefined, + "w": undefined, }, }, "type": "tag", "x-attribsNamespace": Object { "class": undefined, + "h": undefined, "role": undefined, - "y": undefined, }, "x-attribsPrefix": Object { "class": undefined, + "h": undefined, "role": undefined, - "y": undefined, }, }, ], diff --git a/components/divider/__tests__/index.test.tsx b/components/divider/__tests__/index.test.tsx index 71b09a5..b129d4f 100644 --- a/components/divider/__tests__/index.test.tsx +++ b/components/divider/__tests__/index.test.tsx @@ -9,11 +9,11 @@ describe('Divider', () => { expect(() => wrapper.unmount()).not.toThrow() }) - it('should work with x and y', () => { + it('should work with w and h', () => { const wrapper = render(
- - + +
, ) expect(wrapper).toMatchSnapshot() @@ -36,7 +36,7 @@ describe('Divider', () => { start left end - + start , @@ -47,8 +47,8 @@ describe('Divider', () => { it('should support float', () => { const wrapper = mount(
- - + +
, ) expect(wrapper).toMatchSnapshot() diff --git a/components/divider/index.ts b/components/divider/index.ts index eed3670..ed48740 100644 --- a/components/divider/index.ts +++ b/components/divider/index.ts @@ -1,3 +1,5 @@ import Divider from './divider' +export type { DividerProps, DividerTypes } from './divider' +export type { DividerAlign } from '../utils/prop-types' export default Divider diff --git a/components/dot/dot.tsx b/components/dot/dot.tsx index 4512344..39b99a6 100644 --- a/components/dot/dot.tsx +++ b/components/dot/dot.tsx @@ -4,21 +4,22 @@ import { NormalTypes } from '../utils/prop-types' import { GeistUIThemes } from '../themes/presets' import useScaleable, { withScaleable } from '../use-scaleable' +export type DotTypes = NormalTypes interface Props { - type?: NormalTypes + type?: DotTypes className?: string } const defaultProps = { - type: 'default' as NormalTypes, + type: 'default' as DotTypes, className: '', } type NativeAttrs = Omit, keyof Props> export type DotProps = Props & NativeAttrs -const getColor = (type: NormalTypes, theme: GeistUIThemes): string => { - const colors: { [key in NormalTypes]?: string } = { +const getColor = (type: DotTypes, theme: GeistUIThemes): string => { + const colors: { [key in DotTypes]?: string } = { default: theme.palette.accents_2, success: theme.palette.success, warning: theme.palette.warning, diff --git a/components/dot/index.ts b/components/dot/index.ts index 99dcafe..1c9641b 100644 --- a/components/dot/index.ts +++ b/components/dot/index.ts @@ -1,5 +1,4 @@ import Dot from './dot' -import { DotProps } from './dot' -export type Props = DotProps +export type { DotProps, DotTypes } from './dot' export default Dot diff --git a/components/fieldset/index.ts b/components/fieldset/index.ts index 0a4d7ad..60f4d28 100644 --- a/components/fieldset/index.ts +++ b/components/fieldset/index.ts @@ -20,4 +20,10 @@ export type FieldsetComponentType = typeof Fieldset & { ;(Fieldset as FieldsetComponentType).Content = FieldsetContent ;(Fieldset as FieldsetComponentType).Body = FieldsetContent +export type { FieldsetProps } from './fieldset' +export type { FieldsetTitleProps } from './fieldset-title' +export type { FieldsetSubtitleProps } from './fieldset-subtitle' +export type { FieldsetGroupProps } from './fieldset-group' +export type { FieldsetFooterProps } from './fieldset-footer' +export type { FieldsetContentProps } from './fieldset-content' export default Fieldset as FieldsetComponentType diff --git a/components/geist-provider/geist-provider.tsx b/components/geist-provider/geist-provider.tsx index cbd2f9d..2514348 100644 --- a/components/geist-provider/geist-provider.tsx +++ b/components/geist-provider/geist-provider.tsx @@ -9,12 +9,12 @@ import useCurrentState from '../utils/use-current-state' import ToastContainer, { ToastWithID } from '../use-toasts/toast-container' import { GeistUIThemes } from '../themes/presets' -export interface Props { +export type GeistProviderProps = { themes?: Array themeType?: string | 'dark' | 'light' } -const GeistProvider: React.FC> = ({ +const GeistProvider: React.FC> = ({ themes, themeType, children, diff --git a/components/geist-provider/index.ts b/components/geist-provider/index.ts index c4afe8a..4d4f365 100644 --- a/components/geist-provider/index.ts +++ b/components/geist-provider/index.ts @@ -1,3 +1,4 @@ import GeistProvider from './geist-provider' +export type { GeistProviderProps } from './geist-provider' export default GeistProvider diff --git a/components/grid/basic-item.tsx b/components/grid/basic-item.tsx index 4dd9453..22878da 100644 --- a/components/grid/basic-item.tsx +++ b/components/grid/basic-item.tsx @@ -1,28 +1,33 @@ import React, { useMemo } from 'react' import useTheme from '../use-theme' -import { Justify, Direction, AlignItems, AlignContent } from './grid-types' +import { + GridJustify, + GridDirection, + GridAlignItems, + GridAlignContent, +} from './grid-types' import useScaleable from '../use-scaleable' -type BreakpointsValue = number | boolean +export type GridBreakpointsValue = number | boolean export interface GridBasicComponentProps { - xs?: BreakpointsValue - sm?: BreakpointsValue - md?: BreakpointsValue - lg?: BreakpointsValue - xl?: BreakpointsValue - justify?: Justify - direction?: Direction - alignItems?: AlignItems - alignContent?: AlignContent + xs?: GridBreakpointsValue + sm?: GridBreakpointsValue + md?: GridBreakpointsValue + lg?: GridBreakpointsValue + xl?: GridBreakpointsValue + justify?: GridJustify + direction?: GridDirection + alignItems?: GridAlignItems + alignContent?: GridAlignContent className?: string } const defaultProps = { - xs: false as BreakpointsValue, - sm: false as BreakpointsValue, - md: false as BreakpointsValue, - lg: false as BreakpointsValue, - xl: false as BreakpointsValue, + xs: false as GridBreakpointsValue, + sm: false as GridBreakpointsValue, + md: false as GridBreakpointsValue, + lg: false as GridBreakpointsValue, + xl: false as GridBreakpointsValue, className: '', } @@ -35,7 +40,7 @@ type ItemLayoutValue = { basis: string display: string } -const getItemLayout = (val: BreakpointsValue): ItemLayoutValue => { +const getItemLayout = (val: GridBreakpointsValue): ItemLayoutValue => { const display = val === 0 ? 'display: none;' : 'display: inherit;' if (typeof val === 'number') { const width = (100 / 24) * val diff --git a/components/grid/grid-container.tsx b/components/grid/grid-container.tsx index a9b1451..56f3f8e 100644 --- a/components/grid/grid-container.tsx +++ b/components/grid/grid-container.tsx @@ -1,18 +1,18 @@ import React, { useMemo } from 'react' import GridBasicItem, { GridBasicItemProps } from './basic-item' -import { Wrap } from './grid-types' +import { GridWrap } from './grid-types' import { css } from 'styled-jsx/css' import useScaleable, { withScaleable } from '../use-scaleable' interface Props { gap?: number - wrap?: Wrap + wrap?: GridWrap className?: string } const defaultProps = { gap: 0, - wrap: 'wrap' as Wrap, + wrap: 'wrap' as GridWrap, className: '', } diff --git a/components/grid/grid-types.ts b/components/grid/grid-types.ts index 9ad0b0c..c097f4f 100644 --- a/components/grid/grid-types.ts +++ b/components/grid/grid-types.ts @@ -9,11 +9,11 @@ const justify = tuple( 'space-evenly', ) -export type Justify = typeof justify[number] +export type GridJustify = typeof justify[number] const alignItems = tuple('flex-start', 'center', 'flex-end', 'stretch', 'baseline') -export type AlignItems = typeof alignItems[number] +export type GridAlignItems = typeof alignItems[number] const alignContent = tuple( 'stretch', @@ -24,12 +24,12 @@ const alignContent = tuple( 'space-around', ) -export type AlignContent = typeof alignContent[number] +export type GridAlignContent = typeof alignContent[number] const direction = tuple('row', 'row-reverse', 'column', 'column-reverse') -export type Direction = typeof direction[number] +export type GridDirection = typeof direction[number] const wrap = tuple('nowrap', 'wrap', 'wrap-reverse') -export type Wrap = typeof wrap[number] +export type GridWrap = typeof wrap[number] diff --git a/components/grid/index.ts b/components/grid/index.ts index db15172..014158d 100644 --- a/components/grid/index.ts +++ b/components/grid/index.ts @@ -6,4 +6,14 @@ export type GridComponentType = typeof Grid & { } ;(Grid as GridComponentType).Container = GridContainer +export type { GridContainerProps } from './grid-container' +export type { GridProps } from './grid' +export type { GridBreakpointsValue } from './basic-item' +export type { + GridAlignContent, + GridAlignItems, + GridDirection, + GridJustify, + GridWrap, +} from './grid-types' export default Grid as GridComponentType diff --git a/components/image/image-browser.tsx b/components/image/image-browser.tsx index bd172be..b5c1a1b 100644 --- a/components/image/image-browser.tsx +++ b/components/image/image-browser.tsx @@ -6,21 +6,21 @@ import ImageBrowserHttpsIcon from './image-browser-https-icon' import { getBrowserColors, BrowserColors } from './styles' import useScaleable, { withScaleable } from '../use-scaleable' -type AnchorProps = Omit, keyof LinkProps> +export type ImageAnchorProps = Omit, keyof LinkProps> interface Props { title?: string url?: string showFullLink?: boolean invert?: boolean - anchorProps?: AnchorProps + anchorProps?: ImageAnchorProps className?: string } const defaultProps = { className: '', showFullLink: false, - anchorProps: {} as AnchorProps, + anchorProps: {} as ImageAnchorProps, invert: false, } @@ -51,7 +51,7 @@ const getAddressInput = ( url: string, showFullLink: boolean, colors: BrowserColors, - anchorProps: AnchorProps, + anchorProps: ImageAnchorProps, ) => (
@@ -124,10 +124,10 @@ const ImageBrowserComponent = React.forwardRef< ) => { const theme = useTheme() const { SCALES } = useScaleable() - const colors = useMemo(() => getBrowserColors(invert, theme.palette), [ - invert, - theme.palette, - ]) + const colors = useMemo( + () => getBrowserColors(invert, theme.palette), + [invert, theme.palette], + ) const input = useMemo(() => { if (url) return getAddressInput(url, showFullLink, colors, anchorProps) if (title) return getTitle(title, colors) diff --git a/components/image/index.ts b/components/image/index.ts index e45488f..112f1bf 100644 --- a/components/image/index.ts +++ b/components/image/index.ts @@ -6,4 +6,6 @@ export type ImageComponentType = typeof Image & { } ;(Image as ImageComponentType).Browser = ImageBrowser +export type { ImageProps } from './image' +export type { ImageBrowserProps, ImageAnchorProps } from './image-browser' export default Image as ImageComponentType diff --git a/components/index.ts b/components/index.ts index 9f03483..dedca1f 100644 --- a/components/index.ts +++ b/components/index.ts @@ -1,61 +1,190 @@ /// -export * from './themes/presets' -export { default as Themes } from './themes' -export { default as useTheme } from './use-theme' -export { default as useAllThemes } from './use-all-themes' +export { default as AutoComplete } from './auto-complete' +export type { AutoCompleteProps } from './auto-complete' + +export { default as Avatar } from './avatar' +export type { AvatarProps, AvatarGroupProps } from './avatar' + +export { default as Badge } from './badge' +export type { BadgeProps, BadgeAnchorProps } from './badge' + +export { default as Breadcrumbs } from './breadcrumbs' +export type { + BreadcrumbsProps, + BreadcrumbsItemProps, + BreadcrumbsSeparatorProps, +} from './breadcrumbs' + +export { default as Button } from './button' +export type { ButtonProps } from './button' + +export { default as ButtonDropdown } from './button-dropdown' +export type { ButtonDropdownProps, ButtonDropdownItemProps } from './button-dropdown' + +export { default as ButtonGroup } from './button-group' +export type { ButtonGroupProps } from './button-group' + +export { default as Capacity } from './capacity' +export type { CapacityProps } from './capacity' + +export { default as Card } from './card' +export type { CardProps, CardContentProps, CardFooterProps } from './card' + +export { default as Checkbox } from './checkbox' +export type { CheckboxProps, CheckboxGroupProps } from './checkbox' + +export { default as Code } from './code' +export type { CodeProps } from './code' + +export { default as Collapse } from './collapse' +export type { CollapseProps, CollapseGroupProps } from './collapse' + +export { default as Description } from './description' +export type { DescriptionProps } from './description' + +export { default as Display } from './display' +export type { DisplayProps } from './display' + +export { default as Divider } from './divider' +export type { DividerProps } from './divider' + +export { default as Dot } from './dot' +export type { DotProps } from './dot' + +export { default as Fieldset } from './fieldset' +export type { + FieldsetProps, + FieldsetTitleProps, + FieldsetSubtitleProps, + FieldsetGroupProps, + FieldsetFooterProps, + FieldsetContentProps, +} from './fieldset' + export { default as GeistProvider } from './geist-provider' -export { default as CssBaseline } from './css-baseline' +export type { GeistProviderProps } from './geist-provider' + +export { default as Grid } from './grid' +export type { GridProps, GridContainerProps } from './grid' + +export { default as Image } from './image' +export type { ImageProps, ImageBrowserProps } from './image' + +export { default as Input } from './input' +export type { InputProps, InputPasswordProps } from './input' + +export { default as Keyboard } from './keyboard' +export type { KeyboardProps } from './keyboard' + +export { default as Link } from './link' +export type { LinkProps } from './link' + +export { default as Loading } from './loading' +export type { LoadingProps } from './loading' + +export { default as Modal } from './modal' +export type { + ModalProps, + ModalTitleProps, + ModalSubtitleProps, + ModalContentProps, + ModalActionProps, +} from './modal' + +export { default as Note } from './note' +export type { NoteProps } from './note' + +export { default as Page } from './page' +export type { + PageProps, + PageHeaderProps, + PageContentProps, + PageFooterProps, +} from './page' + +export { default as Pagination } from './pagination' +export type { + PaginationProps, + PaginationNextProps, + PaginationPreviousProps, +} from './pagination' + +export { default as Popover } from './popover' +export type { PopoverProps, PopoverItemProps } from './popover' + +export { default as Progress } from './progress' +export type { ProgressProps } from './progress' + +export { default as Radio } from './radio' +export type { RadioProps, RadioGroupProps, RadioDescriptionProps } from './radio' + +export { default as Select } from './select' +export type { SelectProps, SelectOptionProps } from './select' + +export { default as Slider } from './slider' +export type { SliderProps } from './slider' + +export { default as Snippet } from './snippet' +export type { SnippetProps } from './snippet' + +export { default as Spacer } from './spacer' +export type { SpacerProps } from './spacer' + +export { default as Spinner } from './spinner' +export type { SpinnerProps } from './spinner' + +export { default as Table } from './table' +export type { TableProps, TableColumnProps } from './table' + +export { default as Tabs } from './tabs' +export type { TabsProps } from './tabs' + +export { default as Tag } from './tag' +export type { TagProps } from './tag' + +export { default as Text } from './text' +export type { TextProps } from './text' + +export { default as Textarea } from './textarea' +export type { TextareaProps } from './textarea' + +export { default as Themes } from './themes' +export type { GeistUIThemes, GeistUserTheme } from './themes' + +export { default as Toggle } from './toggle' +export type { ToggleProps } from './toggle' + +export { default as Tooltip } from './tooltip' +export type { TooltipProps } from './tooltip' + +export { default as Tree } from './tree' +export type { TreeProps } from './tree' + +export { default as useAllThemes } from './use-all-themes' +export type { AllThemesConfig } from './use-all-themes' + export { default as useToasts } from './use-toasts' +export type { Toast } from './use-toasts' + +export { default as User } from './user' +export type { UserProps } from './user' + +export { default as useBodyScroll } from './use-body-scroll' +export type { BodyScrollOptions } from './use-body-scroll' + +export { default as useClipboard } from './use-clipboard' +export type { UseClipboardOptions } from './use-clipboard' + +export { default as useMediaQuery } from './use-media-query' +export type { ResponsiveOptions, ResponsiveBreakpoint } from './use-media-query' + +export { default as useKeyboard, KeyMod, KeyCode } from './use-keyboard' +export type { KeyboardOptions, UseKeyboardHandler } from './use-keyboard' + export { default as useInput } from './input/use-input' export { default as useModal } from './modal/use-modal' export { default as useTabs } from './tabs/use-tabs' -export { default as useBodyScroll } from './use-body-scroll' export { default as useClickAway } from './use-click-away' -export { default as useClipboard } from './use-clipboard' export { default as useCurrentState } from './use-current-state' -export { default as useMediaQuery } from './use-media-query' -export { default as useKeyboard, KeyMod, KeyCode } from './use-keyboard' -export { default as Avatar } from './avatar' -export { default as Text } from './text' -export { default as Note } from './note' -export { default as Link } from './link' -export { default as Button } from './button' -export { default as Card } from './card' -export { default as Code } from './code' -export { default as Display } from './display' -export { default as Description } from './description' -export { default as Image } from './image' -export { default as Spacer } from './spacer' -export { default as Tag } from './tag' -export { default as Dot } from './dot' -export { default as Keyboard } from './keyboard' -export { default as Checkbox } from './checkbox' -export { default as Fieldset } from './fieldset' -export { default as Modal } from './modal' -export { default as Spinner } from './spinner' -export { default as ButtonDropdown } from './button-dropdown' -export { default as Capacity } from './capacity' -export { default as Input } from './input' -export { default as Radio } from './radio' -export { default as Select } from './select' -export { default as Tabs } from './tabs' -export { default as Progress } from './progress' -export { default as Tree } from './tree' -export { default as Badge } from './badge' -export { default as AutoComplete } from './auto-complete' -export { default as Collapse } from './collapse' -export { default as Loading } from './loading' -export { default as Textarea } from './textarea' -export { default as Table } from './table' -export { default as Toggle } from './toggle' -export { default as Snippet } from './snippet' -export { default as Tooltip } from './tooltip' -export { default as Popover } from './popover' -export { default as Slider } from './slider' -export { default as Divider } from './divider' -export { default as User } from './user' -export { default as Page } from './page' -export { default as Grid } from './grid' -export { default as ButtonGroup } from './button-group' -export { default as Breadcrumbs } from './breadcrumbs' -export { default as Pagination } from './pagination' +export { default as CssBaseline } from './css-baseline' +export { default as useTheme } from './use-theme' diff --git a/components/input/index.ts b/components/input/index.ts index 428feed..8ee0803 100644 --- a/components/input/index.ts +++ b/components/input/index.ts @@ -9,4 +9,9 @@ export type InputComponentType = typeof Input & { ;(Input as InputComponentType).Textarea = Textarea ;(Input as InputComponentType).Password = InputPassword +export type { InputProps } from './input' +export type { InputTypes } from './input-props' +export type { InputPasswordProps } from './password' +export type { TextareaProps } from '../textarea/textarea' +export type { BindingsChangeTarget } from './use-input' export default Input as InputComponentType diff --git a/components/input/input-props.ts b/components/input/input-props.ts index 75c3dca..7c821a9 100644 --- a/components/input/input-props.ts +++ b/components/input/input-props.ts @@ -1,11 +1,12 @@ import React from 'react' import { NormalTypes } from '../utils/prop-types' +export type InputTypes = NormalTypes export interface Props { value?: string initialValue?: string placeholder?: string - type?: NormalTypes + type?: InputTypes hymlType?: string readOnly?: boolean disabled?: boolean @@ -29,7 +30,7 @@ export const defaultProps = { readOnly: false, clearable: false, iconClickable: false, - type: 'default' as NormalTypes, + type: 'default' as InputTypes, htmlType: 'text', autoComplete: 'off', className: '', diff --git a/components/keyboard/index.ts b/components/keyboard/index.ts index aa90ed7..58dbe29 100644 --- a/components/keyboard/index.ts +++ b/components/keyboard/index.ts @@ -1,3 +1,4 @@ import Keyboard from './keyboard' +export type { KeyboardProps } from './keyboard' export default Keyboard diff --git a/components/link/index.ts b/components/link/index.ts index 1fbf447..c676010 100644 --- a/components/link/index.ts +++ b/components/link/index.ts @@ -1,3 +1,4 @@ import Link from './link' +export type { LinkProps } from './link' export default Link diff --git a/components/loading/index.ts b/components/loading/index.ts index 0f2714d..fd386fd 100644 --- a/components/loading/index.ts +++ b/components/loading/index.ts @@ -1,3 +1,4 @@ import Loading from './loading' +export type { LoadingProps, LoadingTypes } from './loading' export default Loading diff --git a/components/loading/loading.tsx b/components/loading/loading.tsx index 10fce6c..4648660 100644 --- a/components/loading/loading.tsx +++ b/components/loading/loading.tsx @@ -4,15 +4,16 @@ import { NormalTypes } from '../utils/prop-types' import { GeistUIThemesPalette } from '../themes/presets' import useScaleable, { withScaleable } from '../use-scaleable' +export type LoadingTypes = NormalTypes interface Props { - type?: NormalTypes + type?: LoadingTypes color?: string className?: string spaceRatio?: number } const defaultProps = { - type: 'default' as NormalTypes, + type: 'default' as LoadingTypes, className: '', spaceRatio: 1, } @@ -21,11 +22,11 @@ type NativeAttrs = Omit, keyof Props> export type LoadingProps = Props & NativeAttrs const getIconBgColor = ( - type: NormalTypes, + type: LoadingTypes, palette: GeistUIThemesPalette, color?: string, ) => { - const colors: { [key in NormalTypes]: string } = { + const colors: { [key in LoadingTypes]: string } = { default: palette.accents_6, secondary: palette.secondary, success: palette.success, @@ -46,11 +47,10 @@ const LoadingComponent: React.FC> = ({ }: React.PropsWithChildren & typeof defaultProps) => { const theme = useTheme() const { SCALES } = useScaleable() - const bgColor = useMemo(() => getIconBgColor(type, theme.palette, color), [ - type, - theme.palette, - color, - ]) + const bgColor = useMemo( + () => getIconBgColor(type, theme.palette, color), + [type, theme.palette, color], + ) return (
diff --git a/components/modal/index.ts b/components/modal/index.ts index e8a494c..ad77617 100644 --- a/components/modal/index.ts +++ b/components/modal/index.ts @@ -15,4 +15,9 @@ export type ModalComponentType = typeof Modal & { ;(Modal as ModalComponentType).Content = ModalContent ;(Modal as ModalComponentType).Action = ModalAction +export type { ModalProps } from './modal' +export type { ModalTitleProps } from './modal-title' +export type { ModalSubtitleProps } from './modal-subtitle' +export type { ModalActionProps } from './modal-action' +export type { ModalContentProps } from './modal-content' export default Modal as ModalComponentType diff --git a/components/modal/modal.tsx b/components/modal/modal.tsx index 8b87b51..5facc2d 100644 --- a/components/modal/modal.tsx +++ b/components/modal/modal.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo } from 'react' +import React, { MouseEvent, useEffect, useMemo } from 'react' import { createPortal } from 'react-dom' import usePortal from '../utils/use-portal' import ModalWrapper from './modal-wrapper' @@ -15,6 +15,7 @@ interface Props { disableBackdropClick?: boolean onClose?: () => void onOpen?: () => void + onContentClick?: (event: MouseEvent) => void open?: boolean wrapClassName?: string } @@ -28,12 +29,13 @@ type NativeAttrs = Omit, keyof Props> export type ModalProps = Props & NativeAttrs const ModalComponent: React.FC> = ({ - children, - disableBackdropClick, - onClose, - onOpen, open, + onOpen, + onClose, + children, wrapClassName, + onContentClick, + disableBackdropClick, }: React.PropsWithChildren & typeof defaultProps) => { const portal = usePortal('modal') const { SCALES } = useScaleable() @@ -76,7 +78,11 @@ const ModalComponent: React.FC> = ({ if (!portal) return null return createPortal( - + {withoutActionsChildren} {hasActions && {ActionsChildren}} diff --git a/components/note/index.ts b/components/note/index.ts index c04f929..09e64ad 100644 --- a/components/note/index.ts +++ b/components/note/index.ts @@ -1,5 +1,4 @@ import Note from './note' -import { NoteProps } from './note' -export type Props = NoteProps +export type { NoteProps, NoteTypes } from './note' export default Note diff --git a/components/note/note.tsx b/components/note/note.tsx index 18370bd..e6cfe00 100644 --- a/components/note/note.tsx +++ b/components/note/note.tsx @@ -4,15 +4,16 @@ import { NormalTypes } from '../utils/prop-types' import { GeistUIThemes } from '../themes/presets' import useScaleable, { withScaleable } from '../use-scaleable' +export type NoteTypes = NormalTypes interface Props { - type?: NormalTypes + type?: NoteTypes label?: string | boolean filled?: boolean className?: string } const defaultProps = { - type: 'default' as NormalTypes, + type: 'default' as NoteTypes, label: 'note' as string | boolean, filled: false, className: '', @@ -21,8 +22,8 @@ const defaultProps = { type NativeAttrs = Omit, keyof Props> export type NoteProps = Props & NativeAttrs -const getStatusColor = (type: NormalTypes, filled: boolean, theme: GeistUIThemes) => { - const colors: { [key in NormalTypes]?: string } = { +const getStatusColor = (type: NoteTypes, filled: boolean, theme: GeistUIThemes) => { + const colors: { [key in NoteTypes]?: string } = { secondary: theme.palette.secondary, success: theme.palette.success, warning: theme.palette.warning, diff --git a/components/page/index.ts b/components/page/index.ts index 1aacf97..75817e5 100644 --- a/components/page/index.ts +++ b/components/page/index.ts @@ -14,4 +14,8 @@ export type PageComponentType = typeof Page & { ;(Page as PageComponentType).Body = PageContent ;(Page as PageComponentType).Footer = PageFooter +export type { PageProps, PageRenderMode } from './page' +export type { PageHeaderProps } from './page-header' +export type { PageContentProps } from './page-content' +export type { PageFooterProps } from './page-footer' export default Page as PageComponentType diff --git a/components/page/page-footer.tsx b/components/page/page-footer.tsx index 7008639..b385a6b 100644 --- a/components/page/page-footer.tsx +++ b/components/page/page-footer.tsx @@ -10,12 +10,12 @@ const defaultProps = { } type NativeAttrs = Omit, keyof Props> -export type PageHeaderProps = Props & NativeAttrs +export type PageFooterProps = Props & NativeAttrs -const PageFooterComponent: React.FC> = ({ +const PageFooterComponent: React.FC> = ({ children, ...props -}: React.PropsWithChildren & typeof defaultProps) => { +}: React.PropsWithChildren & typeof defaultProps) => { const { SCALES } = useScaleable() return ( diff --git a/components/page/page.tsx b/components/page/page.tsx index 8cefc51..49bba26 100644 --- a/components/page/page.tsx +++ b/components/page/page.tsx @@ -34,15 +34,15 @@ const DotStyles: React.FC = () => ( ) type NativeAttrs = Omit, keyof Props> -export type NoteProps = Props & NativeAttrs +export type PageProps = Props & NativeAttrs -const PageComponent: React.FC> = ({ +const PageComponent: React.FC> = ({ children, render, dotBackdrop, className, ...props -}: React.PropsWithChildren & typeof defaultProps) => { +}: React.PropsWithChildren & typeof defaultProps) => { const theme = useTheme() const { SCALES } = useScaleable() const showDot = useMemo(() => { diff --git a/components/pagination/index.ts b/components/pagination/index.ts index 924549b..f89f691 100644 --- a/components/pagination/index.ts +++ b/components/pagination/index.ts @@ -9,4 +9,7 @@ export type PaginationComponentType = typeof Pagination & { ;(Pagination as PaginationComponentType).Previous = PaginationPrevious ;(Pagination as PaginationComponentType).Next = PaginationNext +export type { PaginationProps } from './pagination' +export type { PaginationPreviousProps } from './pagination-previous' +export type { PaginationNextProps } from './pagination-next' export default Pagination as PaginationComponentType diff --git a/components/pagination/pagination-previous.tsx b/components/pagination/pagination-previous.tsx index fd6fab4..1333c9b 100644 --- a/components/pagination/pagination-previous.tsx +++ b/components/pagination/pagination-previous.tsx @@ -2,9 +2,9 @@ import React from 'react' import PaginationItem from './pagination-item' import { usePaginationContext } from './pagination-context' -export type PaginationNextProps = React.ButtonHTMLAttributes +export type PaginationPreviousProps = React.ButtonHTMLAttributes -const PaginationPrevious: React.FC> = ({ +const PaginationPrevious: React.FC> = ({ children, ...props }) => { diff --git a/components/popover/__tests__/__snapshots__/index.test.tsx.snap b/components/popover/__tests__/__snapshots__/index.test.tsx.snap index b673ec6..00260f3 100644 --- a/components/popover/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/popover/__tests__/__snapshots__/index.test.tsx.snap @@ -2,11 +2,10 @@ exports[`Popover should render react-node 1`] = ` "
- {title && } + {title && } ) } -PopoverItem.defaultProps = defaultProps -PopoverItem.displayName = 'GeistPopoverItem' +PopoverItemComponent.defaultProps = defaultProps +PopoverItemComponent.displayName = 'GeistPopoverItem' +const PopoverItem = withScaleable(PopoverItemComponent) export default PopoverItem diff --git a/components/popover/popover.tsx b/components/popover/popover.tsx index e679da3..54ea3ad 100644 --- a/components/popover/popover.tsx +++ b/components/popover/popover.tsx @@ -1,20 +1,36 @@ -import React, { useMemo } from 'react' -import useTheme from '../use-theme' -import Tooltip, { TooltipProps } from '../tooltip/tooltip' -import PopoverItem from '../popover/popover-item' +import React, { useEffect, useMemo, useState } from 'react' +import Tooltip, { + TooltipOnVisibleChange, + TooltipProps, + TooltipTypes, +} from '../tooltip/tooltip' import { Placement, TriggerTypes } from '../utils/prop-types' import { getReactNode } from '../utils/collections' +import useScaleable, { withScaleable } from '../use-scaleable' +import { PopoverContext, PopoverConfig } from './popover-context' +export type PopoverTriggerTypes = TriggerTypes +export type PopoverPlacement = Placement interface Props { content?: React.ReactNode | (() => React.ReactNode) - trigger?: TriggerTypes + trigger?: PopoverTriggerTypes placement?: Placement + disableItemsAutoClose?: boolean } const defaultProps = { - trigger: 'click' as TriggerTypes, + disableItemsAutoClose: false, + trigger: 'click' as PopoverTriggerTypes, placement: 'bottom' as Placement, portalClassName: '', + initialVisible: false, + hideArrow: false, + type: 'default' as TooltipTypes, + enterDelay: 100, + leaveDelay: 150, + offset: 12, + className: '', + onVisibleChange: (() => {}) as TooltipOnVisibleChange, } type ExcludeTooltipProps = { @@ -26,43 +42,62 @@ type ExcludeTooltipProps = { export type PopoverProps = Props & Omit -const Popover: React.FC> = ({ +const PopoverComponent: React.FC> = ({ content, children, trigger, placement, + initialVisible, portalClassName, + disableItemsAutoClose, + onVisibleChange, + visible: customVisible, ...props -}) => { - const theme = useTheme() +}: React.PropsWithChildren & typeof defaultProps) => { + const { SCALES } = useScaleable() + const [visible, setVisible] = useState(initialVisible) const textNode = useMemo(() => getReactNode(content), [content]) + const onChildClick = () => { + onPopoverVisibleChange(false) + } + const value = useMemo( + () => ({ + onItemClick: onChildClick, + disableItemsAutoClose, + }), + [disableItemsAutoClose], + ) + const onPopoverVisibleChange = (next: boolean) => { + setVisible(next) + onVisibleChange(next) + } + useEffect(() => { + if (customVisible === undefined) return + onPopoverVisibleChange(customVisible) + }, [customVisible]) return ( - - {children} - - + + + {children} + + + ) } -type PopoverComponent

= React.FC

& { - Item: typeof PopoverItem - Option: typeof PopoverItem -} -type ComponentProps = Partial & - Omit & - Partial> - -Popover.defaultProps = defaultProps - -export default Popover as PopoverComponent +PopoverComponent.defaultProps = defaultProps +PopoverComponent.displayName = 'GeistPopover' +const Popover = withScaleable(PopoverComponent) +export default Popover diff --git a/components/progress/index.ts b/components/progress/index.ts index c98e079..b877e1a 100644 --- a/components/progress/index.ts +++ b/components/progress/index.ts @@ -1,3 +1,4 @@ import Progress from './progress' +export type { ProgressProps, ProgressColors, ProgressTypes } from './progress' export default Progress diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index 6e834f7..843f0fc 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -8,6 +8,7 @@ import useScaleable, { withScaleable } from '../use-scaleable' export type ProgressColors = { [key: number]: string } +export type ProgressTypes = NormalTypes interface Props { value?: number @@ -15,14 +16,14 @@ interface Props { fixedTop?: boolean fixedBottom?: boolean colors?: ProgressColors - type?: NormalTypes + type?: ProgressTypes className?: string } const defaultProps = { value: 0, max: 100, - type: 'default' as NormalTypes, + type: 'default' as ProgressTypes, fixedTop: false, fixedBottom: false, className: '', @@ -34,10 +35,10 @@ export type ProgressProps = Props & NativeAttrs const getCurrentColor = ( ratio: number, palette: GeistUIThemesPalette, - type: NormalTypes, + type: ProgressTypes, colors: ProgressColors = {}, ): string => { - const defaultColors: { [key in NormalTypes]: string } = { + const defaultColors: { [key in ProgressTypes]: string } = { default: palette.foreground, success: palette.success, secondary: palette.secondary, diff --git a/components/radio/index.ts b/components/radio/index.ts index 531cd43..9bc3705 100644 --- a/components/radio/index.ts +++ b/components/radio/index.ts @@ -11,4 +11,7 @@ export type RadioComponentType = typeof Radio & { ;(Radio as RadioComponentType).Description = RadioDescription ;(Radio as RadioComponentType).Desc = RadioDescription +export type { RadioProps, RadioEvent, RadioEventTarget, RadioTypes } from './radio' +export type { RadioGroupProps } from './radio-group' +export type { RadioDescriptionProps } from './radio-description' export default Radio as RadioComponentType diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx index 35e5582..69b87ca 100644 --- a/components/radio/radio.tsx +++ b/components/radio/radio.tsx @@ -8,10 +8,10 @@ import { NormalTypes } from '../utils/prop-types' import { getColors } from './styles' import useScaleable, { withScaleable } from '../use-scaleable' -interface RadioEventTarget { +export type RadioTypes = NormalTypes +export interface RadioEventTarget { checked: boolean } - export interface RadioEvent { target: RadioEventTarget stopPropagation: () => void @@ -22,14 +22,14 @@ export interface RadioEvent { interface Props { checked?: boolean value?: string | number - type?: NormalTypes + type?: RadioTypes className?: string disabled?: boolean onChange?: (e: RadioEvent) => void } const defaultProps = { - type: 'default' as NormalTypes, + type: 'default' as RadioTypes, disabled: false, className: '', } @@ -65,10 +65,10 @@ const RadioComponent: React.FC> = ({ }, [groupValue, radioValue]) } - const { label, border, bg } = useMemo(() => getColors(theme.palette, type), [ - theme.palette, - type, - ]) + const { label, border, bg } = useMemo( + () => getColors(theme.palette, type), + [theme.palette, type], + ) const isDisabled = useMemo(() => disabled || disabledAll, [disabled, disabledAll]) const changeHandler = (event: React.ChangeEvent) => { diff --git a/components/row/index.ts b/components/row/index.ts index d09a84d..7d38a60 100644 --- a/components/row/index.ts +++ b/components/row/index.ts @@ -1,5 +1,4 @@ import Row from './row' -import { RowProps } from './row' -export type Props = RowProps +export type { RowProps } from './row' export default Row diff --git a/components/select/index.ts b/components/select/index.ts index f1e9232..bff943b 100644 --- a/components/select/index.ts +++ b/components/select/index.ts @@ -6,4 +6,6 @@ export type SelectComponentType = typeof Select & { } ;(Select as SelectComponentType).Option = SelectOption +export type { SelectProps, SelectTypes } from './select' +export type { SelectOptionProps } from './select-option' export default Select as SelectComponentType diff --git a/components/select/select.tsx b/components/select/select.tsx index e1ce6ba..35a5e29 100644 --- a/components/select/select.tsx +++ b/components/select/select.tsx @@ -13,9 +13,10 @@ import { getColors } from './styles' import Ellipsis from '../shared/ellipsis' import useScaleable, { withScaleable } from '../use-scaleable' +export type SelectTypes = NormalTypes interface Props { disabled?: boolean - type?: NormalTypes + type?: SelectTypes value?: string | string[] initialValue?: string | string[] placeholder?: React.ReactNode | string @@ -33,7 +34,7 @@ interface Props { const defaultProps = { disabled: false, - type: 'default' as NormalTypes, + type: 'default' as SelectTypes, icon: SelectIcon as React.ComponentType, pure: false, multiple: false, diff --git a/components/shared/__tests__/backdrop.test.tsx b/components/shared/__tests__/backdrop.test.tsx index 1e6b181..435a0ed 100644 --- a/components/shared/__tests__/backdrop.test.tsx +++ b/components/shared/__tests__/backdrop.test.tsx @@ -48,15 +48,15 @@ describe('Backdrop', () => { expect(() => wrapper.unmount()).not.toThrow() }) - it('should be prevent event from the container', () => { + it('should be pass event from the container', () => { const handler = jest.fn() const wrapper = mount( - + test-value , ) wrapper.find('.content').simulate('click', nativeEvent) - expect(handler).not.toHaveBeenCalled() + expect(handler).toHaveBeenCalled() handler.mockRestore() }) diff --git a/components/shared/backdrop.tsx b/components/shared/backdrop.tsx index 6598b68..85d95c4 100644 --- a/components/shared/backdrop.tsx +++ b/components/shared/backdrop.tsx @@ -1,4 +1,4 @@ -import React, { MouseEvent, useCallback } from 'react' +import React, { MouseEvent } from 'react' import useTheme from '../use-theme' import CssTransition from './css-transition' import useCurrentState from '../utils/use-current-state' @@ -7,11 +7,13 @@ interface Props { onClick?: (event: MouseEvent) => void visible?: boolean width?: string + onContentClick?: (event: MouseEvent) => void } const defaultProps = { onClick: () => {}, visible: false, + onContentClick: () => {}, } type NativeAttrs = Omit, keyof Props> @@ -23,6 +25,7 @@ const Backdrop: React.FC> = React.memo( onClick, visible, width, + onContentClick, ...props }: React.PropsWithChildren & typeof defaultProps) => { const theme = useTheme() @@ -31,9 +34,6 @@ const Backdrop: React.FC> = React.memo( if (IsContentMouseDownRef.current) return onClick && onClick(event) } - const childrenClickHandler = useCallback((event: MouseEvent) => { - event.stopPropagation() - }, []) const mouseUpHandler = () => { if (!IsContentMouseDownRef.current) return const timer = setTimeout(() => { @@ -51,7 +51,7 @@ const Backdrop: React.FC> = React.memo( {...props}>

setIsContentMouseDown(true)}> {children} diff --git a/components/slider/index.ts b/components/slider/index.ts index 712f419..fe063f9 100644 --- a/components/slider/index.ts +++ b/components/slider/index.ts @@ -1,3 +1,4 @@ import Slider from './slider' +export type { SliderProps, SliderTypes } from './slider' export default Slider diff --git a/components/slider/slider.tsx b/components/slider/slider.tsx index 0f02331..d35a6c7 100644 --- a/components/slider/slider.tsx +++ b/components/slider/slider.tsx @@ -15,10 +15,11 @@ import { getColors } from './styles' import { NormalTypes } from '../utils/prop-types' import useScaleable, { withScaleable } from '../use-scaleable' +export type SliderTypes = NormalTypes interface Props { hideValue?: boolean value?: number - type?: NormalTypes + type?: SliderTypes initialValue?: number step?: number max?: number @@ -31,7 +32,7 @@ interface Props { const defaultProps = { hideValue: false, - type: 'default' as NormalTypes, + type: 'default' as SliderTypes, initialValue: 0, step: 1, min: 0, @@ -92,11 +93,10 @@ const SliderComponent: React.FC> = ({ const sliderRef = useRef(null) const dotRef = useRef(null) - const currentRatio = useMemo(() => ((value - min) / (max - min)) * 100, [ - value, - max, - min, - ]) + const currentRatio = useMemo( + () => ((value - min) / (max - min)) * 100, + [value, max, min], + ) const setLastOffsetManually = (val: number) => { const width = getRefWidth(sliderRef) diff --git a/components/snippet/index.ts b/components/snippet/index.ts index d2adc90..5c100f8 100644 --- a/components/snippet/index.ts +++ b/components/snippet/index.ts @@ -1,3 +1,5 @@ import Snippet from './snippet' +export type { SnippetProps, ToastTypes } from './snippet' +export type { CopyTypes, SnippetTypes } from '../utils/prop-types' export default Snippet diff --git a/components/snippet/snippet.tsx b/components/snippet/snippet.tsx index 5e9fe61..a11cb36 100644 --- a/components/snippet/snippet.tsx +++ b/components/snippet/snippet.tsx @@ -7,11 +7,12 @@ import useClipboard from '../utils/use-clipboard' import useToasts from '../use-toasts' import useScaleable, { withScaleable } from '../use-scaleable' +export type ToastTypes = NormalTypes interface Props { text?: string | string[] symbol?: string toastText?: string - toastType?: NormalTypes + toastType?: ToastTypes filled?: boolean copy?: CopyTypes type?: SnippetTypes @@ -22,7 +23,7 @@ const defaultProps = { filled: false, symbol: '$', toastText: 'Copied to clipboard!', - toastType: 'success' as NormalTypes, + toastType: 'success' as ToastTypes, copy: 'default' as CopyTypes, type: 'default' as SnippetTypes, className: '', @@ -57,11 +58,10 @@ const SnippetComponent: React.FC> = ({ const ref = useRef(null) const isMultiLine = text && Array.isArray(text) - const style = useMemo(() => getStyles(type, theme.palette, filled), [ - type, - theme.palette, - filled, - ]) + const style = useMemo( + () => getStyles(type, theme.palette, filled), + [type, theme.palette, filled], + ) const showCopyIcon = useMemo(() => copyType !== 'prevent', [copyType]) const childText = useMemo(() => { if (isMultiLine) return textArrayToString(text as string[]) diff --git a/components/spacer/index.ts b/components/spacer/index.ts index 2f2541a..c277a3b 100644 --- a/components/spacer/index.ts +++ b/components/spacer/index.ts @@ -1,5 +1,4 @@ import Spacer from './spacer' -import { SpacerProps } from './spacer' -export type Props = SpacerProps +export type { SpacerProps } from './spacer' export default Spacer diff --git a/components/spinner/index.ts b/components/spinner/index.ts index 12d8e2b..1afa933 100644 --- a/components/spinner/index.ts +++ b/components/spinner/index.ts @@ -1,3 +1,4 @@ import Spinner from './spinner' +export type { SpinnerProps } from './spinner' export default Spinner diff --git a/components/table/index.ts b/components/table/index.ts index 786dabe..de2b11e 100644 --- a/components/table/index.ts +++ b/components/table/index.ts @@ -6,4 +6,19 @@ export type TableComponentType = typeof Table & { } ;(Table as TableComponentType).Column = TableColumn +export type { + TableProps, + TableOnRow, + TableOnChange, + TableOnCell, + TableDataSource, +} from './table' +export type { TableColumnProps } from './table-column' +export type { + TableOperation, + TableCellActions, + TableCellActionRemove, + TableCellActionUpdate, + TableCellData, +} from './table-cell' export default Table as TableComponentType diff --git a/components/tabs/index.ts b/components/tabs/index.ts index 35c39a0..4664ce6 100644 --- a/components/tabs/index.ts +++ b/components/tabs/index.ts @@ -8,4 +8,5 @@ export type TabsComponentType = typeof Tabs & { ;(Tabs as TabsComponentType).Item = TabsItem ;(Tabs as TabsComponentType).Tab = TabsItem +export type { TabsProps } from './tabs' export default Tabs as TabsComponentType diff --git a/components/tag/index.ts b/components/tag/index.ts index 36d4267..2c8f2d7 100644 --- a/components/tag/index.ts +++ b/components/tag/index.ts @@ -1,5 +1,4 @@ import Tag from './tag' -import { TagProps } from './tag' -export type Props = TagProps +export type { TagProps, TagColors, TagTypes } from './tag' export default Tag diff --git a/components/tag/tag.tsx b/components/tag/tag.tsx index 2a9c66a..9d72203 100644 --- a/components/tag/tag.tsx +++ b/components/tag/tag.tsx @@ -4,14 +4,15 @@ import { SnippetTypes } from '../utils/prop-types' import { GeistUIThemesPalette } from '../themes/presets' import useScaleable, { withScaleable } from '../use-scaleable' +export type TagTypes = SnippetTypes interface Props { - type?: SnippetTypes + type?: TagTypes invert?: boolean className?: string } const defaultProps = { - type: 'default' as SnippetTypes, + type: 'default' as TagTypes, invert: false, className: '', } @@ -25,13 +26,9 @@ export type TagColors = { borderColor: string } -const getColors = ( - type: SnippetTypes, - palette: GeistUIThemesPalette, - invert: boolean, -) => { +const getColors = (type: TagTypes, palette: GeistUIThemesPalette, invert: boolean) => { const colors: { - [key in SnippetTypes]: Pick & Partial + [key in TagTypes]: Pick & Partial } = { default: { color: palette.foreground, diff --git a/components/text/index.ts b/components/text/index.ts index e6ad652..07f7658 100644 --- a/components/text/index.ts +++ b/components/text/index.ts @@ -1,3 +1,4 @@ import Text from './text' +export type { TextProps, TextTypes } from './text' export default Text diff --git a/components/text/text.tsx b/components/text/text.tsx index 4541495..6f8c528 100644 --- a/components/text/text.tsx +++ b/components/text/text.tsx @@ -3,6 +3,7 @@ import { NormalTypes } from '../utils/prop-types' import TextChild from './child' import { withScaleable } from '../use-scaleable' +export type TextTypes = NormalTypes interface Props { h1?: boolean h2?: boolean @@ -19,7 +20,7 @@ interface Props { em?: boolean blockquote?: boolean className?: string - type?: NormalTypes + type?: TextTypes } const defaultProps = { @@ -38,7 +39,7 @@ const defaultProps = { em: false, blockquote: false, className: '', - type: 'default' as NormalTypes, + type: 'default' as TextTypes, } type ElementMap = { [key in keyof JSX.IntrinsicElements]?: boolean } diff --git a/components/textarea/__tests__/__snapshots__/index.test.tsx.snap b/components/textarea/__tests__/__snapshots__/index.test.tsx.snap index f77c47b..2d61f08 100644 --- a/components/textarea/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/textarea/__tests__/__snapshots__/index.test.tsx.snap @@ -37,7 +37,6 @@ exports[`Textarea should render correctly 1`] = ` font-size: var(--textarea-font-size); width: 100%; height: var(--textarea-height); - resize: none; border: none; outline: none; padding: calc(0.5 * 16px) calc(0.5 * 16px) calc(0.5 * 16px) @@ -95,7 +94,6 @@ exports[`Textarea should work with different styles 1`] = ` font-size: var(--textarea-font-size); width: 100%; height: var(--textarea-height); - resize: none; border: none; outline: none; padding: calc(0.5 * 16px) calc(0.5 * 16px) calc(0.5 * 16px) @@ -149,7 +147,6 @@ exports[`Textarea should work with different styles 1`] = ` font-size: var(--textarea-font-size); width: 100%; height: var(--textarea-height); - resize: none; border: none; outline: none; padding: calc(0.5 * 16px) calc(0.5 * 16px) calc(0.5 * 16px) @@ -167,7 +164,7 @@ exports[`Textarea should work with different styles 1`] = ` textarea:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px #fff inset !important; } -
diff --git a/components/tooltip/tooltip-icon.tsx b/components/tooltip/tooltip-icon.tsx index 20da26c..ae42284 100644 --- a/components/tooltip/tooltip-icon.tsx +++ b/components/tooltip/tooltip-icon.tsx @@ -5,20 +5,24 @@ import useTheme from '../use-theme' interface Props { placement: Placement - bgColor: string shadow: boolean } -const TooltipIcon: React.FC = ({ placement, bgColor, shadow }) => { +const TooltipIcon: React.FC = ({ placement, shadow }) => { const theme = useTheme() const { transform, top, left, right, bottom } = useMemo( - () => getIconPosition(placement, 3), + () => + getIconPosition( + placement, + 'var(--tooltip-icon-offset-x)', + 'var(--tooltip-icon-offset-y)', + ), [placement], ) const bgColorWithDark = useMemo(() => { - if (!shadow || theme.type !== 'dark') return bgColor + if (!shadow || theme.type !== 'dark') return 'var(--tooltip-content-bg)' return theme.palette.accents_2 - }, [theme.type, bgColor, shadow]) + }, [theme.type, shadow]) return ( @@ -41,4 +45,4 @@ const TooltipIcon: React.FC = ({ placement, bgColor, shadow }) => { ) } -export default React.memo(TooltipIcon) +export default TooltipIcon diff --git a/components/tooltip/tooltip.tsx b/components/tooltip/tooltip.tsx index f754040..c800421 100644 --- a/components/tooltip/tooltip.tsx +++ b/components/tooltip/tooltip.tsx @@ -1,18 +1,22 @@ -import React, { useEffect, useRef, useState } from 'react' -import TooltipContent from './tooltip-content' +import React, { useEffect, useMemo, useRef, useState } from 'react' +import TooltipContent, { TooltipIconOffset } from './tooltip-content' import useClickAway from '../utils/use-click-away' import { TriggerTypes, Placement, SnippetTypes } from '../utils/prop-types' +import { withScaleable } from '../use-scaleable' +import { getRect } from './helper' export type TooltipOnVisibleChange = (visible: boolean) => void - +export type TooltipTypes = SnippetTypes +export type TooltipTriggers = TriggerTypes +export type TooltipPlacement = Placement interface Props { text: string | React.ReactNode - type?: SnippetTypes - placement?: Placement + type?: TooltipTypes + placement?: TooltipPlacement visible?: boolean initialVisible?: boolean hideArrow?: boolean - trigger?: TriggerTypes + trigger?: TooltipTriggers enterDelay?: number leaveDelay?: number offset?: number @@ -24,11 +28,11 @@ interface Props { const defaultProps = { initialVisible: false, hideArrow: false, - type: 'default' as SnippetTypes, - trigger: 'hover' as TriggerTypes, - placement: 'top' as Placement, + type: 'default' as TooltipTypes, + trigger: 'hover' as TooltipTriggers, + placement: 'top' as TooltipPlacement, enterDelay: 100, - leaveDelay: 0, + leaveDelay: 150, offset: 12, className: '', portalClassName: '', @@ -38,7 +42,7 @@ const defaultProps = { type NativeAttrs = Omit, keyof Props> export type TooltipProps = Props & NativeAttrs -const Tooltip: React.FC> = ({ +const TooltipComponent: React.FC> = ({ children, initialVisible, text, @@ -58,12 +62,21 @@ const Tooltip: React.FC> = ({ const timer = useRef() const ref = useRef(null) const [visible, setVisible] = useState(initialVisible) + const iconOffset = useMemo(() => { + if (!ref?.current) return { x: '0.75em', y: '0.75em' } + const rect = getRect(ref) + return { + x: `${rect.width ? rect.width / 2 : 0}px`, + y: `${rect.height ? rect.height / 2 : 0}px`, + } + }, [ref?.current]) const contentProps = { type, visible, offset, placement, hideArrow, + iconOffset, parent: ref, className: portalClassName, } @@ -83,14 +96,14 @@ const Tooltip: React.FC> = ({ timer.current = window.setTimeout(() => handler(true), enterDelay) return } - timer.current = window.setTimeout(() => handler(false), leaveDelay) + const leaveDelayWithoutClick = trigger === 'click' ? 0 : leaveDelay + timer.current = window.setTimeout(() => handler(false), leaveDelayWithoutClick) } const mouseEventHandler = (next: boolean) => trigger === 'hover' && changeVisible(next) const clickEventHandler = () => trigger === 'click' && changeVisible(!visible) useClickAway(ref, () => trigger === 'click' && changeVisible(false)) - useEffect(() => { if (customVisible === undefined) return changeVisible(customVisible) @@ -116,6 +129,7 @@ const Tooltip: React.FC> = ({ ) } -Tooltip.defaultProps = defaultProps -Tooltip.displayName = 'GiestTooltip' +TooltipComponent.defaultProps = defaultProps +TooltipComponent.displayName = 'GiestTooltip' +const Tooltip = withScaleable(TooltipComponent) export default Tooltip diff --git a/components/tree/__tests__/index.test.tsx b/components/tree/__tests__/index.test.tsx index 5db7f0b..ba972e2 100644 --- a/components/tree/__tests__/index.test.tsx +++ b/components/tree/__tests__/index.test.tsx @@ -2,9 +2,9 @@ import React from 'react' import { mount } from 'enzyme' import { Tree } from 'components' import { nativeEvent } from 'tests/utils' -import { FileTreeValue } from '../tree' +import { TreeFile } from '../tree' -const mockFiles: Array = [ +const mockFiles: Array = [ { type: 'file', name: 'cs.js', diff --git a/components/tree/index.ts b/components/tree/index.ts index 2285c85..7e38f97 100644 --- a/components/tree/index.ts +++ b/components/tree/index.ts @@ -9,4 +9,5 @@ export type TreeComponentType = typeof Tree & { ;(Tree as TreeComponentType).File = TreeFile ;(Tree as TreeComponentType).Folder = TreeFolder +export type { TreeProps, TreeFile } from './tree' export default Tree as TreeComponentType diff --git a/components/tree/tree.tsx b/components/tree/tree.tsx index 3ece233..6ae7088 100644 --- a/components/tree/tree.tsx +++ b/components/tree/tree.tsx @@ -3,21 +3,21 @@ import TreeFile from './tree-file' import TreeFolder from './tree-folder' import { TreeContext } from './tree-context' import { tuple } from '../utils/prop-types' -import { sortChildren } from './/tree-help' +import { sortChildren } from './tree-help' const FileTreeValueType = tuple('directory', 'file') const directoryType = FileTreeValueType[0] -export type FileTreeValue = { +export type TreeFile = { type: typeof FileTreeValueType[number] name: string extra?: string - files?: Array + files?: Array } interface Props { - value?: Array + value?: Array initialExpand?: boolean onClick?: (path: string) => void className?: string @@ -31,7 +31,7 @@ const defaultProps = { type NativeAttrs = Omit, keyof Props> export type TreeProps = Props & NativeAttrs -const makeChildren = (value: Array = []) => { +const makeChildren = (value: Array = []) => { if (!value || !value.length) return null return value .sort((a, b) => { diff --git a/components/use-all-themes/index.ts b/components/use-all-themes/index.ts index 7f04c21..947e11a 100644 --- a/components/use-all-themes/index.ts +++ b/components/use-all-themes/index.ts @@ -1,3 +1,4 @@ import { useAllThemes } from './all-themes-context' +export type { AllThemesConfig } from './all-themes-context' export default useAllThemes diff --git a/components/use-body-scroll/index.ts b/components/use-body-scroll/index.ts index f65551d..23bbbbb 100644 --- a/components/use-body-scroll/index.ts +++ b/components/use-body-scroll/index.ts @@ -1,3 +1,4 @@ import useBodyScroll from './use-body-scroll' +export type { BodyScrollOptions } from './use-body-scroll' export default useBodyScroll diff --git a/components/use-click-away/use-click-away.ts b/components/use-click-away/use-click-away.ts index e40d54f..288bb7e 100644 --- a/components/use-click-away/use-click-away.ts +++ b/components/use-click-away/use-click-away.ts @@ -1,19 +1,26 @@ -import { MutableRefObject, useEffect } from 'react' +import { MutableRefObject, useEffect, useRef } from 'react' + +export type ClickAwayGetContainer = () => HTMLElement | null const useClickAway = ( ref: MutableRefObject, handler: (event: Event) => void, ) => { + const handlerRef = useRef(handler) + useEffect(() => { + handlerRef.current = handler + }, [handlerRef]) + useEffect(() => { const callback = (event: Event) => { const el = ref.current if (!event || !el || el.contains((event as any).target)) return - handler(event) + handlerRef.current(event) } - document.addEventListener('click', callback, { capture: true }) - return () => document.removeEventListener('click', callback, { capture: true }) - }, [ref, handler]) + document.addEventListener('click', callback) + return () => document.removeEventListener('click', callback) + }, [ref]) } export default useClickAway diff --git a/components/use-clipboard/index.ts b/components/use-clipboard/index.ts index 3c09962..8b504e1 100644 --- a/components/use-clipboard/index.ts +++ b/components/use-clipboard/index.ts @@ -1,3 +1,4 @@ import useClipboard from './use-clipboard' +export type { UseClipboardOptions, UseClipboardResult } from './use-clipboard' export default useClipboard diff --git a/components/use-keyboard/index.ts b/components/use-keyboard/index.ts index e7fb882..752122b 100644 --- a/components/use-keyboard/index.ts +++ b/components/use-keyboard/index.ts @@ -1,5 +1,11 @@ import useKeyboard from './use-keyboard' import { KeyMod, KeyCode } from './codes' -export default useKeyboard export { KeyMod, KeyCode } +export type { + UseKeyboardHandler, + KeyboardOptions, + KeyboardResult, + UseKeyboard, +} from './use-keyboard' +export default useKeyboard diff --git a/components/use-media-query/index.ts b/components/use-media-query/index.ts index 0a6879a..0f6bb71 100644 --- a/components/use-media-query/index.ts +++ b/components/use-media-query/index.ts @@ -1,3 +1,4 @@ import useMediaQuery from './use-media-query' +export type { ResponsiveBreakpoint, ResponsiveOptions } from './use-media-query' export default useMediaQuery diff --git a/components/use-theme/theme-context.ts b/components/use-theme/theme-context.ts index 7083e5a..da281f3 100644 --- a/components/use-theme/theme-context.ts +++ b/components/use-theme/theme-context.ts @@ -1,10 +1,9 @@ import React from 'react' import Themes from '../themes' -import { GeistUIThemes } from '../themes/presets/index' +import { GeistUIThemes } from '../themes/presets' const defaultTheme = Themes.getPresetStaticTheme() -export const ThemeContext: React.Context = React.createContext( - defaultTheme, -) +export const ThemeContext: React.Context = + React.createContext(defaultTheme) export const useTheme = (): GeistUIThemes => React.useContext(ThemeContext) diff --git a/components/use-toasts/index.ts b/components/use-toasts/index.ts index 3d7f07d..a559ff2 100644 --- a/components/use-toasts/index.ts +++ b/components/use-toasts/index.ts @@ -1,3 +1,4 @@ import useToasts from './use-toast' +export type { ToastAction, Toast, ToastType } from './use-toast' export default useToasts diff --git a/components/use-toasts/use-toast.tsx b/components/use-toasts/use-toast.tsx index 165ea6f..bca6d9b 100644 --- a/components/use-toasts/use-toast.tsx +++ b/components/use-toasts/use-toast.tsx @@ -10,10 +10,10 @@ export interface ToastAction { handler: (event: React.MouseEvent, cancel: () => void) => void passive?: boolean } - +export type ToastType = NormalTypes export interface Toast { text?: string | React.ReactNode - type?: NormalTypes + type?: ToastType delay?: number actions?: Array } diff --git a/components/user/index.ts b/components/user/index.ts index 2c9b7cc..7558209 100644 --- a/components/user/index.ts +++ b/components/user/index.ts @@ -6,4 +6,5 @@ export type UserComponentType = typeof User & { } ;(User as UserComponentType).Link = UserLink +export type { UserProps } from './user' export default User as UserComponentType diff --git a/lib/components/customization/editor-color-item.tsx b/lib/components/customization/editor-color-item.tsx index 7236c40..b0ff3b2 100644 --- a/lib/components/customization/editor-color-item.tsx +++ b/lib/components/customization/editor-color-item.tsx @@ -1,7 +1,8 @@ import React, { useMemo } from 'react' -import { useTheme, GeistUIThemesPalette, Popover, Themes } from 'components' +import { useTheme, Popover, Themes } from 'components' import { ColorResult, TwitterPicker } from 'react-color' import { useConfigs } from 'lib/config-context' +import { GeistUIThemesPalette } from 'components/themes' const DefaultTheme = Themes.getPresetStaticTheme() interface Props { diff --git a/lib/components/customization/editor.tsx b/lib/components/customization/editor.tsx index eafade5..089235e 100644 --- a/lib/components/customization/editor.tsx +++ b/lib/components/customization/editor.tsx @@ -1,16 +1,13 @@ import React from 'react' -import { - Text, - Button, - useTheme, - Themes, - GeistUIThemesPalette, - GeistUIThemesExpressiveness, - GeistUIThemesLayout, -} from 'components' +import { Text, Button, useTheme, Themes } from 'components' import EditorColorItem from './editor-color-item' import EditorInputItem from './editor-input-item' import { useConfigs } from 'lib/config-context' +import { + GeistUIThemesExpressiveness, + GeistUIThemesLayout, + GeistUIThemesPalette, +} from 'components/themes' const basicColors: Array = [ 'accents_1', diff --git a/lib/components/displays/colors.tsx b/lib/components/displays/colors.tsx index ad9dac6..fcf2961 100644 --- a/lib/components/displays/colors.tsx +++ b/lib/components/displays/colors.tsx @@ -1,7 +1,8 @@ import React, { useMemo } from 'react' -import { useTheme, useToasts, Code, Grid, GeistUIThemesPalette } from 'components' +import { useTheme, useToasts, Code, Grid } from 'components' import useClipboard from 'components/utils/use-clipboard' import { getColorData, getCurrentColor } from './colors-data' +import { GeistUIThemesPalette } from 'components/themes' interface Props { type: string @@ -57,10 +58,10 @@ const Colors: React.FC = ({ type }) => { ), }) } - const colorItems = useMemo(() => getColorItem(type, theme.palette, copyText), [ - type, - theme.palette, - ]) + const colorItems = useMemo( + () => getColorItem(type, theme.palette, copyText), + [type, theme.palette], + ) return (
diff --git a/package.json b/package.json index 00c1c1d..a102b91 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,8 @@ "build:esm": "babel --config-file ./scripts/babel.config.js --extensions \".js,.ts,.tsx\" ./components --out-dir ./esm --ignore \"**/__tests__/**/*,**/*.d.ts\"", "build:webpack": "webpack --config scripts/webpack.config.js", "build:types": "ttsc -p ./scripts", - "build": "yarn clear && yarn build:esm && yarn build:webpack && yarn build:types", + "build:esm-types": "ttsc -p ./scripts --outDir ./esm", + "build": "yarn clear && yarn build:esm && yarn build:webpack && yarn build:types && yarn build:esm-types", "release": "yarn build && yarn publish --access public --non-interactive" }, "files": [ diff --git a/pages/en-us/components/modal.mdx b/pages/en-us/components/modal.mdx index 49f0a7f..60ed3c6 100644 --- a/pages/en-us/components/modal.mdx +++ b/pages/en-us/components/modal.mdx @@ -231,14 +231,15 @@ Display popup content that requires attention or provides additional information Modal.Props -| Attribute | Description | Type | Accepted values | Default | -| ------------------------ | -------------------------------- | ---------------- | --------------------------------------- | ------- | -| **open** | open or close | `boolean` | - | `false` | -| **onOpen** | open event | `() => void` | - | - | -| **onClose** | open event | `() => void` | - | - | -| **wrapClassName** | className of the modal dialog | `string` | - | - | -| **disableBackdropClick** | click background and don't close | `boolean` | - | `false` | -| ... | native props | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | +| Attribute | Description | Type | Accepted values | Default | +| ------------------------ | -------------------------------- | ------------------------- | --------------------------------------- | ------- | +| **open** | open or close | `boolean` | - | `false` | +| **onOpen** | open event | `() => void` | - | - | +| **onClose** | open event | `() => void` | - | - | +| **onContentClick** | event from modal content | `(e: MouseEvent) => void` | - | - | +| **wrapClassName** | className of the modal dialog | `string` | - | - | +| **disableBackdropClick** | click background and don't close | `boolean` | - | `false` | +| ... | native props | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | Modal.Title.Props @@ -260,20 +261,18 @@ Display popup content that requires attention or provides additional information Modal.Action.Props -| Attribute | Description | Type | Accepted values | Default | -| ------------ | ---------------------- | ------------------------------------------------------ | ------------------------ | ------- | -| **passive** | display passive mode | `boolean` | - | `false` | -| **disabled** | disable current action | `boolean` | - | `false` | -| **onClick** | click handler | [(event: ModalActionEvent) => void](#modalactionevent) | - | - | -| **loading** | show loading | `boolean` | - | `false` | -| ... | native props | `ButtonHTMLAttributes` | `'id', 'className', ...` | - | +| Attribute | Description | Type | Accepted values | Default | +| ------------ | ---------------------- | -------------------------------------------------- | ------------------------ | ------- | +| **passive** | display passive mode | `boolean` | - | `false` | +| **disabled** | disable current action | `boolean` | - | `false` | +| **onClick** | click handler | [(e: ModalActionEvent) => void](#modalactionevent) | - | - | +| **loading** | show loading | `boolean` | - | `false` | +| ... | native props | `ButtonHTMLAttributes` | `'id', 'className', ...` | - | useModal ```ts -type useModal = ( - initialVisible: boolean, -) => { +type useModal = (initialVisible: boolean) => { visible: boolean setVisible: Dispatch> currentRef: MutableRefObject diff --git a/pages/en-us/components/popover.mdx b/pages/en-us/components/popover.mdx index 9d908a4..eb1264f 100644 --- a/pages/en-us/components/popover.mdx +++ b/pages/en-us/components/popover.mdx @@ -93,27 +93,29 @@ The floating box popped by clicking or hovering. Popover.Props -| Attribute | Description | Type | Accepted values | Default | -| ------------------- | ---------------------------------------------- | ----------------------------- | -------------------------------- | -------- | -| **content** | content of pop-up | `ReactNode` `() => ReactNode` | - | - | -| **visible** | visible or not | `boolean` | - | `false` | -| **initialVisible** | visible on initial | `boolean` | - | `false` | -| **hideArrow** | hide arrow icon | `boolean` | - | `false` | -| **placement** | position of the popover relative to the target | [Placement](#placement) | - | `bottom` | -| **trigger** | tooltip trigger mode | `'click' / 'hover'` | - | `click` | -| **enterDelay**(ms) | delay before popover is shown | `number` | - | `100` | -| **leaveDelay**(ms) | delay before popover is hidden | `number` | - | `0` | -| **offset**(px) | distance between pop-up and target | `number` | - | `12` | -| **portalClassName** | className of pop-up box | `string` | - | - | -| **onVisibleChange** | call when visibility of the popover is changed | `(visible: boolean) => void` | - | - | -| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - | +| Attribute | Description | Type | Accepted values | Default | +| ------------------------- | ---------------------------------------------- | ----------------------------- | ------------------- | -------- | +| **content** | content of pop-up | `ReactNode` `() => ReactNode` | - | - | +| **visible** | visible or not | `boolean` | - | `false` | +| **initialVisible** | visible on initial | `boolean` | - | `false` | +| **hideArrow** | hide arrow icon | `boolean` | - | `false` | +| **placement** | position of the popover relative to the target | [Placement](#placement) | - | `bottom` | +| **trigger** | tooltip trigger mode | `'click' / 'hover'` | - | `click` | +| **enterDelay**(ms) | delay before popover is shown | `number` | - | `100` | +| **leaveDelay**(ms) | delay before popover is hidden | `number` | - | `0` | +| **offset**(px) | distance between pop-up and target | `number` | - | `12` | +| **portalClassName** | className of pop-up box | `string` | - | - | +| **onVisibleChange** | call when visibility of the popover is changed | `(visible: boolean) => void` | - | - | +| **disableItemsAutoClose** | prevent close Popover when Items clicked | `boolean` | - | - | +| ... | native props | `HTMLAttributes` | `'id', 'name', ...` | - | Popover.Item -| Attribute | Description | Type | Accepted values | Default | -| --------- | -------------------------- | --------- | --------------- | ------- | -| **line** | show a line | `boolean` | - | `false` | -| **title** | show text with title style | `boolean` | - | `false` | +| Attribute | Description | Type | Accepted values | Default | +| -------------------- | ---------------------------------- | --------- | --------------- | ------- | +| **line** | show a line | `boolean` | - | `false` | +| **title** | show text with title style | `boolean` | - | `false` | +| **disableAutoClose** | prevent close Popover when clicked | `boolean` | - | `false` | Placement diff --git a/pages/en-us/components/tooltip.mdx b/pages/en-us/components/tooltip.mdx index d11c1a0..5f7cfdd 100644 --- a/pages/en-us/components/tooltip.mdx +++ b/pages/en-us/components/tooltip.mdx @@ -170,21 +170,21 @@ Displays additional information on hover. Tooltip.Props -| Attribute | Description | Type | Accepted values | Default | -| ------------------- | ---------------------------------------------- | ----------------------------- | -------------------------------- | --------- | -| **text** | text of pop-up | `string` `React.ReactNode` | - | - | -| **visible** | visible or not | `boolean` | - | `false` | -| **initialVisible** | visible on initial | `boolean` | - | `false` | -| **hideArrow** | hide arrow icon | `boolean` | - | `false` | -| **type** | preset style type | [TooltipTypes](#tooltiptypes) | - | `default` | -| **placement** | position of the tooltip relative to the target | [Placement](#placement) | - | `top` | -| **trigger** | tooltip trigger mode | `'click' / 'hover'` | - | `hover` | -| **enterDelay**(ms) | delay before tooltip is shown | `number` | - | `100` | -| **leaveDelay**(ms) | delay before tooltip is hidden | `number` | - | `0` | -| **offset**(px) | distance between pop-up and target | `number` | - | `12` | -| **portalClassName** | className of pop-up box | `string` | - | - | -| **onVisibleChange** | call when visibility of the tooltip is changed | `(visible: boolean) => void` | - | - | -| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - | +| Attribute | Description | Type | Accepted values | Default | +| ------------------- | ---------------------------------------------------------- | ----------------------------- | --------------- | --------- | +| **text** | text of pop-up | `string` `React.ReactNode` | - | - | +| **visible** | visible or not | `boolean` | - | `false` | +| **initialVisible** | visible on initial | `boolean` | - | `false` | +| **hideArrow** | hide arrow icon | `boolean` | - | `false` | +| **type** | preset style type | [TooltipTypes](#tooltiptypes) | - | `default` | +| **placement** | position of the tooltip relative to the target | [Placement](#placement) | - | `top` | +| **trigger** | tooltip trigger mode | `'click' / 'hover'` | - | `hover` | +| **enterDelay**(ms) | delay before tooltip is shown | `number` | - | `100` | +| **leaveDelay**(ms) | delay before tooltip is hidden (only work in 'hover' mode) | `number` | - | `150` | +| **offset**(px) | distance between pop-up and target | `number` | - | `12` | +| **portalClassName** | className of pop-up box | `string` | - | - | +| **onVisibleChange** | call when visibility of the tooltip is changed | `(visible: boolean) => void` | - | - | +| ... | native props | `HTMLAttributes` | `'id' ...` | - | TooltipTypes diff --git a/pages/zh-cn/components/modal.mdx b/pages/zh-cn/components/modal.mdx index 68d8362..1e8b385 100644 --- a/pages/zh-cn/components/modal.mdx +++ b/pages/zh-cn/components/modal.mdx @@ -185,14 +185,15 @@ export const meta = { Modal.Props -| 属性 | 描述 | 类型 | 推荐值 | 默认 | -| ------------------------ | -------------------------- | ---------------- | --------------------------------------- | ------- | -| **open** | 打开或关闭对话框 | `boolean` | - | `false` | -| **onOpen** | 对话框打开的事件 | `() => void` | - | - | -| **onClose** | 对话框关闭的事件 | `() => void` | - | - | -| **wrapClassName** | 对话框的自定义样式类名 | `string` | - | - | -| **disableBackdropClick** | 点击背景层时是否关闭对话框 | `boolean` | - | `false` | -| ... | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | +| 属性 | 描述 | 类型 | 推荐值 | 默认 | +| ------------------------ | -------------------------- | ------------------------- | --------------------------------------- | ------- | +| **open** | 打开或关闭对话框 | `boolean` | - | `false` | +| **onOpen** | 打开的事件 | `() => void` | - | - | +| **onClose** | 关闭的事件 | `() => void` | - | - | +| **onContentClick** | 对话框内部点击事件 | `(e: MouseEvent) => void` | - | - | +| **wrapClassName** | 对话框的自定义样式类名 | `string` | - | - | +| **disableBackdropClick** | 点击背景层时是否关闭对话框 | `boolean` | - | `false` | +| ... | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | Modal.Title.Props @@ -225,9 +226,7 @@ export const meta = { useModal ```ts -type useModal = ( - initialVisible: boolean, -) => { +type useModal = (initialVisible: boolean) => { visible: boolean setVisible: Dispatch> currentRef: MutableRefObject diff --git a/pages/zh-cn/components/popover.mdx b/pages/zh-cn/components/popover.mdx index bb0875b..0a27062 100644 --- a/pages/zh-cn/components/popover.mdx +++ b/pages/zh-cn/components/popover.mdx @@ -94,27 +94,29 @@ export const meta = { Popover.Props -| 属性 | 描述 | 类型 | 推荐值 | 默认 | -| ------------------- | ------------------------ | ----------------------------- | -------------------------------- | -------- | -| **content** | 气泡卡片内容 | `ReactNode` `() => ReactNode` | - | - | -| **visible** | 手动控制气泡的显示与隐藏 | `boolean` | - | `false` | -| **initialVisible** | 初始是否可见 | `boolean` | - | `false` | -| **hideArrow** | 隐藏箭头 | `boolean` | - | `false` | -| **placement** | 气泡卡片与目标的对齐方式 | [Placement](#placement) | - | `bottom` | -| **trigger** | 触发气泡卡片的方式 | `'click' / 'hover'` | - | `click` | -| **enterDelay**(ms) | 在提示显示前的延迟 | `number` | - | `100` | -| **leaveDelay**(ms) | 关闭提示前的延迟 | `number` | - | `0` | -| **offset**(px) | 提示框与目标之间的偏移 | `number` | - | `12` | -| **portalClassName** | 气泡卡片的类名 | `string` | - | - | -| **onVisibleChange** | 当气泡卡片状态改变时触发 | `(visible: boolean) => void` | - | - | -| ... | 原生属性 | `HTMLAttributes` | `'id', 'name', 'className', ...` | - | +| 属性 | 描述 | 类型 | 推荐值 | 默认 | +| ------------------------- | ---------------------------- | ----------------------------- | ----------- | -------- | +| **content** | 气泡卡片内容 | `ReactNode` `() => ReactNode` | - | - | +| **visible** | 手动控制气泡的显示与隐藏 | `boolean` | - | `false` | +| **initialVisible** | 初始是否可见 | `boolean` | - | `false` | +| **hideArrow** | 隐藏箭头 | `boolean` | - | `false` | +| **placement** | 气泡卡片与目标的对齐方式 | [Placement](#placement) | - | `bottom` | +| **trigger** | 触发气泡卡片的方式 | `'click' / 'hover'` | - | `click` | +| **enterDelay**(ms) | 在提示显示前的延迟 | `number` | - | `100` | +| **leaveDelay**(ms) | 关闭提示前的延迟 | `number` | - | `0` | +| **offset**(px) | 提示框与目标之间的偏移 | `number` | - | `12` | +| **portalClassName** | 气泡卡片的类名 | `string` | - | - | +| **onVisibleChange** | 当气泡卡片状态改变时触发 | `(visible: boolean) => void` | - | - | +| **disableItemsAutoClose** | 当 Item 被点击时阻止气泡关闭 | `boolean` | - | `false` | +| ... | 原生属性 | `HTMLAttributes` | `'id', ...` | - | Popover.Item -| 属性 | 描述 | 类型 | 推荐值 | 默认 | -| --------- | -------------------- | --------- | ------ | ------- | -| **line** | 显示线条 | `boolean` | - | `false` | -| **title** | 用标题的样式展示文字 | `boolean` | - | `false` | +| 属性 | 描述 | 类型 | 推荐值 | 默认 | +| -------------------- | ---------------------------- | --------- | ------ | ------- | +| **line** | 显示线条 | `boolean` | - | `false` | +| **title** | 用标题的样式展示文字 | `boolean` | - | `false` | +| **disableAutoClose** | 触发点击事件时也不要关闭气泡 | `boolean` | - | `false` | Placement diff --git a/pages/zh-cn/components/slider.mdx b/pages/zh-cn/components/slider.mdx index bfae1dd..2ec5640 100644 --- a/pages/zh-cn/components/slider.mdx +++ b/pages/zh-cn/components/slider.mdx @@ -1,5 +1,5 @@ import { Layout, Playground, Attributes } from 'lib/components' -import { Slider, Row, Spacer } from 'components' +import { Slider, Spacer } from 'components' import { useState } from 'react' export const meta = { @@ -31,11 +31,9 @@ export const meta = { - - + `} /> @@ -55,7 +53,7 @@ export const meta = { { const [value, setValue] = useState() @@ -64,9 +62,7 @@ export const meta = { setValue(val) } return ( - - - + ) } `} diff --git a/pages/zh-cn/components/spacer.mdx b/pages/zh-cn/components/spacer.mdx index a859070..c953bcf 100644 --- a/pages/zh-cn/components/spacer.mdx +++ b/pages/zh-cn/components/spacer.mdx @@ -1,5 +1,5 @@ import { Layout, Playground, Attributes } from 'lib/components' -import { Spacer, Container, Col } from 'components' +import { Spacer, Grid } from 'components' export const meta = { title: '间距 Spacer', @@ -12,33 +12,33 @@ export const meta = { - - - - - + + - - - + + + - - + + + + + + `} /> - + + - - + + `} /> diff --git a/pages/zh-cn/components/tooltip.mdx b/pages/zh-cn/components/tooltip.mdx index 5ff978d..3f3fee7 100644 --- a/pages/zh-cn/components/tooltip.mdx +++ b/pages/zh-cn/components/tooltip.mdx @@ -170,21 +170,21 @@ export const meta = { Tooltip.Props -| 属性 | 描述 | 类型 | 推荐值 | 默认 | -| ------------------- | -------------------------- | ----------------------------- | -------------------------------- | --------- | -| **text** | 弹出框文字 | `string` `React.ReactNode` | - | - | -| **visible** | 手动控制提示框的显示与隐藏 | `boolean` | - | `false` | -| **initialVisible** | 初始是否可见 | `boolean` | - | `false` | -| **hideArrow** | 隐藏箭头 | `boolean` | - | `false` | -| **type** | 不同的文字提示类型 | [TooltipTypes](#tooltiptypes) | - | `default` | -| **placement** | 提示框与目标的对齐方式 | [Placement](#placement) | - | `top` | -| **trigger** | 触发提示框的方式 | `'click' / 'hover'` | - | `hover` | -| **enterDelay**(ms) | 在提示显示前的延迟 | `number` | - | `100` | -| **leaveDelay**(ms) | 关闭提示前的延迟 | `number` | - | `0` | -| **offset**(px) | 提示框与目标之间的偏移 | `number` | - | `12` | -| **portalClassName** | 弹出框的类名 | `string` | - | - | -| **onVisibleChange** | 当提示框状态改变时触发 | `(visible: boolean) => void` | - | - | -| ... | 原生属性 | `HTMLAttributes` | `'id', 'name', 'className', ...` | - | +| 属性 | 描述 | 类型 | 推荐值 | 默认 | +| ------------------- | ---------------------------------- | ----------------------------- | ---------- | --------- | +| **text** | 弹出框文字 | `string` `React.ReactNode` | - | - | +| **visible** | 手动控制提示框的显示与隐藏 | `boolean` | - | `false` | +| **initialVisible** | 初始是否可见 | `boolean` | - | `false` | +| **hideArrow** | 隐藏箭头 | `boolean` | - | `false` | +| **type** | 不同的文字提示类型 | [TooltipTypes](#tooltiptypes) | - | `default` | +| **placement** | 提示框与目标的对齐方式 | [Placement](#placement) | - | `top` | +| **trigger** | 触发提示框的方式 | `'click' / 'hover'` | - | `hover` | +| **enterDelay**(ms) | 在提示显示前的延迟 | `number` | - | `100` | +| **leaveDelay**(ms) | 关闭提示前的延迟 (仅 'hover' 模式) | `number` | - | `150` | +| **offset**(px) | 提示框与目标之间的偏移 | `number` | - | `12` | +| **portalClassName** | 弹出框的类名 | `string` | - | - | +| **onVisibleChange** | 当提示框状态改变时触发 | `(visible: boolean) => void` | - | - | +| ... | 原生属性 | `HTMLAttributes` | `'id' ...` | - | TooltipTypes