chore: release v2.2.0 (#602)

* feat(slider): add option to hide slider value (#494) * feat(slider): hideValue prop added * test(slider): test added for hideValue prop docs(slider): add hideValue prop docs(slider): add hideValue prop for cn docs feat(slider): ensure the dot stays round when no content test(slider): update snapshots * feat(loading): apply width & height props (#500) * feat(loading): apply width & height props * test(loading): test case added & updating snapshots * fix(loading): add a string type for size prop test(loading): update test case & snapshots * feat(loading): support custom the ratio of spaces * docs(loading): append size and spaceRatio test(loading): update snapshots Co-authored-by: unix <unix.bio@gmail.com> * chore(deps): update styled-jsx to ^3.3.1 (#520) * chore(deps): update styled-jsx to ^3.3.1 update styled-jsx to ^3.3.1 to allow compatiblity with react@^17 * fix(modules): fix 695-issue to compatible with React 17 * docs: fix module error caused by styled-jsx update Co-authored-by: unix <unix.bio@gmail.com> * chore: release v2.2.0-rc.0 * fix(modal): disable backdrop even if actions missing (#532) * fix: upgrade to be compatible with React-17's event system (#533) * feat: useKeyboard hooks (#541) * feat(keyboard): create keyboard hooks * feat(usekeyboard): redesign event handler to match keyboard events from browser \ * test(usekeyboard): add testcase * docs(usekeyboard): create new hooks document * chore: release v2.2.0-rc.1 * feat(auto-complete): add forwardRef for input element (#542) * feat(auto-complete): add forwardRef for input element * test(auto-complete): add testcase to ensure ref is available * docs(auto-complete): append props for ref * chore: release v2.2.0-rc.2 * fix(auto-complete): fix size of loading icon (#546) * chore: release v2.2.0-rc.3 * fix(auto-complete): hide shadow when no content (#547) * chore: release v2.2.0-rc.4 * feat: add status prop in checkbox, radio, select, slider and toggle (#530) * feat: added status prop to set color by states test: check status success, warning and error * docs: added playground example and API reference fix: replaced ´_´ as it's not recommended to use fix: removed redundant return refactor: renamed prop from status to type test: update test with the renamed prop * docs: update prop references from status to type fix: status prop not updated to type fix: missing return * fix(select): set icons and hover state to follow the theme * test(slider): update snapshots * chore: always use relative paths when import types Co-authored-by: unix <unix.bio@gmail.com> * feat(auto-complete): add props for popup container (#558) * feat(auto-complete): add props for popup container * docs(auto-complete): add attribute for popup container * chore: release v2.2.0-rc.5 * fix: fix path error under esm * chore: release v2.2.0-rc.6 * feat(scaleable): add scaleable props to each component (#531) * feat(scaleable): add scaleable props to each component * chore(scaleable): update the exported type * feat: apply scaleable to components chore: remove with-default test: improve testcase for scaleable chore: resolve test warning ci: upgrade nodejs to latest lts docs: fix type error in document site * docs: update documents to be compatible with scaleable chore: fix build errors * chore: remove all size-related attributes docs: improve guide document * docs: add scaleable documentation test: update snapshots chore: remove unused * feat: add scaleable to grid components * docs: improve docs * test: update snapshots * fix(grid): fix basic component props * feat: export all types related to components (#562) * feat: export all types related to components fix(tooltip): fix the vertical offset of the arrow * refactor: optimize events of all popup related components * test: append testcases for popup base component * test: add testcase for visible events * test: update snapshots * fix(bundle): fix modules missing in yarn berry (#563) * chore: add peer dependencies * fix(bundle): fix modules missing in yarn berry * chore: upgrade configs for jest 27 * chore(examples): upgrade next examples for scaleable (#564) * chore: release v2.2.0-rc.7 * feat(rating): a new component rating indicator (#543) * chore(deps): bump lodash from 4.17.20 to 4.17.21 (#537) Bumps [lodash](https://github.com/lodash/lodash) from 4.17.20 to 4.17.21. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.20...4.17.21) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * (feature) rating state working and islocked working * (feature) custom emojis for the ratings added * refactor(rating): migrate component to scaleable * feat(rating): use inline icon component test(rating): update testcase * docs(rating): add document for zh-cn Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: unix <unix.bio@gmail.com> * refactor(table): redesign interfaces to improve the experience in TypeScript (#569) * refactor(table): redesign interfaces to improve the experience in TypeScript * docs: upgrade to new type exports * style: fix lint warnings * docs: fix sidebar text-transform (#570) * docs: improve the copywriting content of the document (#571) * docs: export individual style types for each component * docs: improve the copywriting content of the document * docs: optimize the document site experience on mobile devices * chore: release v2.2.0-rc.8 * feat(modal): responds to keyboard events when modal is displayed (#574) * docs: redesign mobile navigation (#576) * docs: redesign mobile navigation * docs: fix subheading active color * fix(avatar): fix margin on first child (#578) Co-authored-by: witt <unix.bio@gmail.com> * feat(select): imporve the focus events to export simulated ref (#579) * feat(select): imporve the focus events to export simulated ref * test: improve testcase and fix warnings * docs(select): add label and divider to props docs * fix: rename hymlType to htmlType (#599) * feat(drawer): create component (#575) * feat(drawer): create component * feat(drawer): refinement of drawer component * test: update tool chain for jest * test: simplify events case for jest * docs(drawer): add playground * docs(drawer): add api docs * docs: add home page (#573) * docs: add home page * docs(homepage): apply suggestions from code review * docs(homepage): make cards clickable Co-authored-by: witt <unix.bio@gmail.com> * test: update snapshots for scaleable * chore: update lock file * chore: upgrade styled-jsx * test: update snapshots for styled-jsx Co-authored-by: Deepankar <deep14bhade@gmail.com> Co-authored-by: Deepankar <statisticsaffinity@gmail.com> Co-authored-by: Florian Levis <levis.florian@gmail.com> Co-authored-by: gepd <guillermoepd@hotmail.com> Co-authored-by: Nils J <nils.jorek@gmx.de> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ofek Ashery <ofek.ashery@gmail.com> Co-authored-by: Sanna Jammeh <50969683+sannajammeh@users.noreply.github.com>
2026-04-29 04:35:32 +08:00 · 2021-08-13 17:31:45 +08:00
parent 89e82c88ed
commit 299f7741ea
504 changed files with 30398 additions and 21110 deletions
--- a/components/shared/tests/snapshots/transition.test.tsx.snap
+++ b/components/shared/tests/snapshots/transition.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`CSSTransition should render correctly 1`] = `"<span class=\\"undefined  transition-enter\\">test</span>"`;
+exports[`CssTransition should render correctly 1`] = `"<span class=\\"undefined  transition-enter\\">test</span>"`;
--- 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(
-      <Backdrop onClick={handler} visible>
+      <Backdrop visible onContentClick={handler}>
        <span>test-value</span>
      </Backdrop>,
    )
    wrapper.find('.content').simulate('click', nativeEvent)
-    expect(handler).not.toHaveBeenCalled()
+    expect(handler).toHaveBeenCalled()
    handler.mockRestore()
  })

--- a/components/shared/tests/transition.test.tsx
+++ b/components/shared/tests/transition.test.tsx
@@ -1,14 +1,14 @@
 import React from 'react'
 import { mount } from 'enzyme'
-import CSSTransition from '../css-transition'
+import CssTransition from '../css-transition'
 import { updateWrapper } from 'tests/utils'

-describe('CSSTransition', () => {
+describe('CssTransition', () => {
  it('should render correctly', () => {
    const wrapper = mount(
-      <CSSTransition visible>
+      <CssTransition visible>
        <span>test</span>
-      </CSSTransition>,
+      </CssTransition>,
    )
    expect(wrapper.text()).toContain('test')
    expect(wrapper.html()).toMatchSnapshot()
@@ -17,9 +17,9 @@ describe('CSSTransition', () => {

  it('should work correctly with time props', async () => {
    const wrapper = mount(
-      <CSSTransition enterTime={300} leaveTime={300}>
+      <CssTransition enterTime={300} leaveTime={300}>
        <span id="test">test</span>
-      </CSSTransition>,
+      </CssTransition>,
    )
    expect(wrapper.find('.transition-enter-active').length).toBe(0)

@@ -34,9 +34,9 @@ describe('CSSTransition', () => {

  it('should clear css-transition classes after hidden', async () => {
    const wrapper = mount(
-      <CSSTransition visible>
+      <CssTransition visible>
        <span>test</span>
-      </CSSTransition>,
+      </CssTransition>,
    )
    // don't remove classes after shown
    await updateWrapper(wrapper, 60)
@@ -57,9 +57,9 @@ describe('CSSTransition', () => {

  it('custom class names should be rendered', async () => {
    const wrapper = mount(
-      <CSSTransition name="test">
+      <CssTransition name="test">
        <span id="test">test</span>
-      </CSSTransition>,
+      </CssTransition>,
    )

    expect(wrapper.find('.test-enter-active').length).toBe(0)
--- a/components/shared/backdrop.tsx
+++ b/components/shared/backdrop.tsx
@@ -1,34 +1,39 @@
-import React, { MouseEvent, useCallback } from 'react'
-import withDefaults from '../utils/with-defaults'
+import React, { MouseEvent } from 'react'
 import useTheme from '../use-theme'
-import CSSTransition from './css-transition'
+import CssTransition from './css-transition'
 import useCurrentState from '../utils/use-current-state'

 interface Props {
  onClick?: (event: MouseEvent<HTMLElement>) => void
  visible?: boolean
  width?: string
+  onContentClick?: (event: MouseEvent<HTMLElement>) => void
 }

 const defaultProps = {
  onClick: () => {},
  visible: false,
+  onContentClick: () => {},
 }

 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
-export type BackdropProps = Props & typeof defaultProps & NativeAttrs
+export type BackdropProps = Props & NativeAttrs

 const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
-  ({ children, onClick, visible, width, ...props }) => {
+  ({
+    children,
+    onClick,
+    visible,
+    width,
+    onContentClick,
+    ...props
+  }: React.PropsWithChildren<BackdropProps> & typeof defaultProps) => {
    const theme = useTheme()
    const [, setIsContentMouseDown, IsContentMouseDownRef] = useCurrentState(false)
    const clickHandler = (event: MouseEvent<HTMLElement>) => {
      if (IsContentMouseDownRef.current) return
      onClick && onClick(event)
    }
-    const childrenClickHandler = useCallback((event: MouseEvent<HTMLElement>) => {
-      event.stopPropagation()
-    }, [])
    const mouseUpHandler = () => {
      if (!IsContentMouseDownRef.current) return
      const timer = setTimeout(() => {
@@ -38,7 +43,7 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
    }

    return (
-      <CSSTransition name="backdrop-wrapper" visible={visible} clearTime={300}>
+      <CssTransition name="backdrop-wrapper" visible={visible} clearTime={300}>
        <div
          className="backdrop"
          onClick={clickHandler}
@@ -46,7 +51,7 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
          {...props}>
          <div className="layer" />
          <div
-            onClick={childrenClickHandler}
+            onClick={onContentClick}
            className="content"
            onMouseDown={() => setIsContentMouseDown(true)}>
            {children}
@@ -116,9 +121,11 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
            }
          `}</style>
        </div>
-      </CSSTransition>
+      </CssTransition>
    )
  },
 )

-export default withDefaults(Backdrop, defaultProps)
+Backdrop.defaultProps = defaultProps
+Backdrop.displayName = 'GeistBackdrop'
+export default Backdrop
--- a/components/shared/css-transition.tsx
+++ b/components/shared/css-transition.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import withDefaults from '../utils/with-defaults'

 interface Props {
  visible?: boolean
@@ -19,9 +18,9 @@ const defaultProps = {
  name: 'transition',
 }

-export type CSSTransitionProps = Props & typeof defaultProps
+export type CssTransitionProps = Props

-const CSSTransition: React.FC<React.PropsWithChildren<CSSTransitionProps>> = ({
+const CssTransition: React.FC<React.PropsWithChildren<CssTransitionProps>> = ({
  children,
  className,
  visible,
@@ -30,7 +29,7 @@ const CSSTransition: React.FC<React.PropsWithChildren<CSSTransitionProps>> = ({
  clearTime,
  name,
  ...props
-}) => {
+}: React.PropsWithChildren<CssTransitionProps> & typeof defaultProps) => {
  const [classes, setClasses] = useState<string>('')
  const [renderable, setRenderable] = useState<boolean>(visible)

@@ -71,4 +70,6 @@ const CSSTransition: React.FC<React.PropsWithChildren<CSSTransitionProps>> = ({
  })
 }

-export default withDefaults(CSSTransition, defaultProps)
+CssTransition.defaultProps = defaultProps
+CssTransition.displayName = 'GeistCssTransition'
+export default CssTransition
--- a/components/shared/dropdown.tsx
+++ b/components/shared/dropdown.tsx
@@ -2,9 +2,10 @@ import React, { MutableRefObject, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import usePortal from '../utils/use-portal'
 import useResize from '../utils/use-resize'
-import CSSTransition from './css-transition'
+import CssTransition from './css-transition'
 import useClickAnyWhere from '../utils/use-click-anywhere'
 import useDOMObserver from '../utils/use-dom-observer'
+import useWarning from '../utils/use-warning'

 interface Props {
  parent?: MutableRefObject<HTMLElement | null> | undefined
@@ -61,6 +62,19 @@ const Dropdown: React.FC<React.PropsWithChildren<Props>> = React.memo(
    const [rect, setRect] = useState<ReactiveDomReact>(defaultRect)
    if (!parent) return null

+    /* istanbul ignore next */
+    if (process.env.NODE_ENV !== 'production') {
+      if (getPopupContainer && getPopupContainer()) {
+        const el = getPopupContainer()
+        const style = window.getComputedStyle(el as HTMLDivElement)
+        if (style.position === 'static') {
+          useWarning(
+            'The element specified by "getPopupContainer" must have "position" set.',
+          )
+        }
+      }
+    }
+
    const updateRect = () => {
      const { top, left, right, width: nativeWidth } = getRect(parent, getPopupContainer)
      setRect({ top, left, right, width: nativeWidth })
@@ -88,15 +102,20 @@ const Dropdown: React.FC<React.PropsWithChildren<Props>> = React.memo(

    const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
      event.stopPropagation()
+      event.nativeEvent.stopImmediatePropagation()
+      event.preventDefault()
+    }
+    const mouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {
      event.preventDefault()
    }

    if (!el) return null
    return createPortal(
-      <CSSTransition visible={visible}>
+      <CssTransition visible={visible}>
        <div
          className={`dropdown ${disableMatchWidth ? 'disable-match' : 'width-match'}`}
-          onClick={clickHandler}>
+          onClick={clickHandler}
+          onMouseDown={mouseDownHandler}>
          {children}
          <style jsx>{`
            .dropdown {
@@ -115,7 +134,7 @@ const Dropdown: React.FC<React.PropsWithChildren<Props>> = React.memo(
            }
          `}</style>
        </div>
-      </CSSTransition>,
+      </CssTransition>,
      el,
    )
  },
--- a/components/shared/expand.tsx
+++ b/components/shared/expand.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
-import withDefaults from '../utils/with-defaults'
 import useRealShape from '../utils/use-real-shape'

-interface Props {
+export type ExpandProps = {
  isExpanded?: boolean
  delay?: number
 }
@@ -12,13 +11,11 @@ const defaultProps = {
  delay: 200,
 }

-export type ExpandProps = Props & typeof defaultProps
-
 const Expand: React.FC<React.PropsWithChildren<ExpandProps>> = ({
  isExpanded,
  delay,
  children,
-}) => {
+}: React.PropsWithChildren<ExpandProps> & typeof defaultProps) => {
  const [height, setHeight] = useState<string>(isExpanded ? 'auto' : '0')
  const [selfExpanded, setSelfExpanded] = useState<boolean>(isExpanded)
  const [visible, setVisible] = useState<boolean>(isExpanded)
@@ -91,4 +88,6 @@ const Expand: React.FC<React.PropsWithChildren<ExpandProps>> = ({
  )
 }

-export default withDefaults(Expand, defaultProps)
+Expand.defaultProps = defaultProps
+Expand.displayName = 'GeistExpand'
+export default Expand