@charcoal-ui/react-sandbox 3.0.0-beta.2 → 3.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react-sandbox",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.4",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -46,17 +46,17 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^3.0.0-beta.2",
-    "@charcoal-ui/react": "^3.0.0-beta.2",
-    "@charcoal-ui/styled": "^3.0.0-beta.2",
-    "@charcoal-ui/theme": "^3.0.0-beta.2",
-    "@charcoal-ui/utils": "^3.0.0-beta.2",
+    "@charcoal-ui/foundation": "^3.0.0-beta.4",
+    "@charcoal-ui/react": "^3.0.0-beta.4",
+    "@charcoal-ui/styled": "^3.0.0-beta.4",
+    "@charcoal-ui/theme": "^3.0.0-beta.4",
+    "@charcoal-ui/utils": "^3.0.0-beta.4",
     "polished": "^4.1.4",
     "react-spring": "^9.0.0",
     "warning": "^4.0.3"
   },
   "peerDependencies": {
-    "react": ">=16.13.1",
+    "react": ">=17.0.0",
     "react-dom": ">=16.13.1",
     "styled-components": ">=5.1.1"
   },
@@ -72,5 +72,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react-sandbox"
   },
-  "gitHead": "dbf33f97e67fc6eabc4283fa38ac9af0b89292f4"
+  "gitHead": "47ec80abac2b87e78417a06db4943b3cb0408b78"
 }

package/src/_lib/compat.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 /**
  * import { Story } from '@storybook/react/types-6-0'

package/src/components/Carousel/index.story.tsx

@@ -1,5 +1,4 @@
 import { boolean, number, select, withKnobs } from '@storybook/addon-knobs'
-import React from 'react'
 import styled, { css } from 'styled-components'
 import Carousel from '.'
 

package/src/components/Carousel/index.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState, useCallback, useRef } from 'react'
+import { useEffect, useState, useCallback, useRef } from 'react'
+import * as React from 'react'
 import { animated, useSpring } from 'react-spring'
 import styled, { css } from 'styled-components'
 import { useDebounceAnimationState } from '../../foundation/hooks'

package/src/components/CarouselButton/index.story.tsx

@@ -1,6 +1,5 @@
 import { action } from '@storybook/addon-actions'
 import { boolean, number, select, withKnobs } from '@storybook/addon-knobs'
-import React from 'react'
 import CarouselButton, { Direction, ScrollHintButton } from '.'
 
 export default {

package/src/components/CarouselButton/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled, { css } from 'styled-components'
 import { unreachable } from '../../foundation/utils'
 import NextIcon, { WedgeDirection } from '../icons/NextIcon'

package/src/components/Filter/index.story.tsx

@@ -1,6 +1,5 @@
 import { action } from '@storybook/addon-actions'
 import { boolean } from '@storybook/addon-knobs'
-import React from 'react'
 import {
   Link as RouterLink,
   MemoryRouter as Router,

package/src/components/Filter/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import styled, { css } from 'styled-components'
 import { useComponentAbstraction, LinkProps } from '@charcoal-ui/react'
 import { maxWidth } from '@charcoal-ui/utils'

package/src/components/HintText/index.story.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Story } from '../../_lib/compat'
 import HintText from '.'
 

package/src/components/HintText/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import styled, { css } from 'styled-components'
 import { theme } from '../../styled'
 import InfoIcon from '../icons/InfoIcon'

package/src/components/Layout/index.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import styled from 'styled-components'
 import { dummyText } from '../../misc/storybook-helper'
 import { theme } from '../../styled'

package/src/components/Layout/index.tsx

@@ -1,4 +1,5 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
+import * as React from 'react'
 import styled, { createGlobalStyle, css } from 'styled-components'
 import {
   MAIN_COLUMN_HORIZONTAL_MIN_MARGIN,

package/src/components/LeftMenu/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components'
 import { MenuListLinkItem } from '../MenuListItem'
 import { useComponentAbstraction } from '@charcoal-ui/react'

package/src/components/MenuListItem/index.story.tsx

@@ -1,6 +1,5 @@
 import { action } from '@storybook/addon-actions'
 import { boolean, select, text } from '@storybook/addon-knobs'
-import React from 'react'
 import styled from 'styled-components'
 import SwitchCheckbox from '../SwitchCheckbox'
 import WithIcon from '../WithIcon'

package/src/components/MenuListItem/index.tsx

@@ -1,4 +1,5 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
+import * as React from 'react'
 import styled, { css } from 'styled-components'
 import { theme } from '../../styled'
 import { TextEllipsis } from '../TextEllipsis'

package/src/components/Pager/index.story.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import {
   MemoryRouter as Router,
   Route,

package/src/components/Pager/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useDebugValue, useMemo } from 'react'
+import { memo, useCallback, useDebugValue, useMemo } from 'react'
 
 import styled, { css } from 'styled-components'
 import warning from 'warning'
@@ -75,11 +75,7 @@ export interface PagerProps extends CommonProps {
 }
 
 // this pager is just regular buttons; for links use LinkPager
-export default React.memo(function Pager({
-  page,
-  pageCount,
-  onChange,
-}: PagerProps) {
+export default memo(function Pager({ page, pageCount, onChange }: PagerProps) {
   // TODO: refactor Pager and LinkPager to use a common parent component
   const window = usePagerWindow(page, pageCount)
   const makeClickHandler = useCallback(

package/src/components/SwitchCheckbox/index.story.tsx

@@ -1,6 +1,5 @@
 import { action } from '@storybook/addon-actions'
 import { boolean } from '@storybook/addon-knobs'
-import React from 'react'
 import SwitchCheckbox from '.'
 
 export default {

package/src/components/SwitchCheckbox/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import styled, { css } from 'styled-components'
 import { applyEffect } from '@charcoal-ui/utils'

package/src/components/TextEllipsis/index.story.tsx

@@ -1,5 +1,4 @@
 import { number, text } from '@storybook/addon-knobs'
-import React from 'react'
 import styled from 'styled-components'
 import { TextEllipsis } from '.'
 

package/src/components/WithIcon/index.story.tsx

@@ -1,5 +1,5 @@
 import { boolean } from '@storybook/addon-knobs'
-import React from 'react'
+import * as React from 'react'
 import styled, { css } from 'styled-components'
 import { theme } from '../../styled'
 import WithIcon from '.'

package/src/components/WithIcon/index.tsx

@@ -1,4 +1,5 @@
-import React, { useRef } from 'react'
+import { useRef } from 'react'
+import * as React from 'react'
 import styled, { css } from 'styled-components'
 import { useElementSize } from '../../foundation/hooks'
 

package/src/components/icons/Base.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import styled from 'styled-components'
 
 export type IconSizes = 16 | 24 | 32

package/src/components/icons/DotsIcon.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components'
 
 interface Props {

package/src/components/icons/InfoIcon.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components'
 import IconBase from './Base'
 

package/src/components/icons/NextIcon.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { unreachable } from '../../foundation/utils'
 import IconBase from './Base'
 

package/src/components/icons/WedgeIcon.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components'
 
 import { unreachable } from '../../foundation/utils'