@sanity/ui 0.37.5 → 0.37.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "0.37.5",
+  "version": "0.37.6",
   "sideEffects": false,
   "source": "./src/index.ts",
   "exports": {
@@ -29,24 +29,24 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@popperjs/core": "^2.11.2",
+    "@popperjs/core": "^2.11.4",
     "@reach/auto-id": "^0.16.0",
     "@sanity/color": "^2.1.8",
-    "@sanity/icons": "^1.2.5",
-    "framer-motion": "6.2.1",
+    "@sanity/icons": "^1.2.6",
+    "framer-motion": "6.2.8",
     "popper-max-size-modifier": "^0.2.0",
     "react-is": "^17.0.2",
     "react-popper": "^2.2.5",
-    "react-refractor": "^2.1.5"
+    "react-refractor": "^2.1.6"
   },
   "devDependencies": {
-    "@testing-library/dom": "^8.11.2",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/dom": "^8.12.0",
+    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/react": "^12.1.3",
     "@types/refractor": "^3.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.5"
   },
   "peerDependencies": {
     "react": "^16.9 || ^17",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "76a63b3f77763f28121655ef15485e6fb0f92786"
+  "gitHead": "d537879301eb41b50e56045bf4d7772720bf58d3"
 }

package/src/components/autocomplete/__workshop__/custom.tsx

@@ -1,7 +1,11 @@
 import {Autocomplete, Box, Button, Card, Code, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import React, {useCallback, useState} from 'react'
-import {WORKSHOP_RADIUS_OPTIONS, WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../__workshop__/constants'
+import {
+  WORKSHOP_RADIUS_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+  WORKSHOP_TEXT_SIZE_OPTIONS,
+} from '../../../__workshop__/constants'
 import countries from '../__fixtures__/countries'
 import {ExampleOption} from './types'
 
@@ -11,6 +15,7 @@ export default function CustomStory() {
   const disabled = useBoolean('Disabled', false, 'Props')
   const fontSize = Number(useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props'))
   const openButton = useBoolean('Open button', true, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const radius = Number(useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props'))
   const readOnly = useBoolean('Read only', false, 'Props')
   const [value, setValue] = useState('')
@@ -23,13 +28,13 @@ export default function CustomStory() {
         href="#"
         key={option.value}
         onClick={(event) => event.preventDefault()}
-        padding={3}
+        padding={padding}
         radius={radius - 1}
       >
-        <Text>{option.title}</Text>
+        <Text size={fontSize}>{option.title}</Text>
       </Card>
     ),
-    [radius]
+    [fontSize, padding, radius]
   )
 
   const renderValue = useCallback((currentValue: string, option?: ExampleOption) => {
@@ -58,6 +63,7 @@ export default function CustomStory() {
           onChange={setValue}
           openButton={openButton}
           options={options}
+          padding={padding}
           placeholder="Search"
           radius={radius}
           readOnly={readOnly}

package/src/components/autocomplete/__workshop__/example.tsx

@@ -1,5 +1,7 @@
 import {Autocomplete, Box, Card, Container, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop'
+import {fireEvent} from '@testing-library/dom'
 import React, {useCallback, useMemo, useState} from 'react'
 import {
   WORKSHOP_CARD_TONE_OPTIONS,
@@ -9,7 +11,25 @@ import {
 } from '../../../__workshop__/constants'
 import countries from '../__fixtures__/countries'
 
+const typingPerfTest: PerfTestProps<HTMLInputElement> = {
+  name: 'typing',
+  title: 'Typing',
+  description: 'This test types one character at a time',
+  run({target}) {
+    const text = 'Hello, world & Hello, world & Hello, world'
+    const len = text.length
+
+    for (let i = 0; i < len; i += 1) {
+      const value = text.slice(0, i + 1)
+
+      fireEvent.change(target, {target: {value}})
+    }
+  },
+}
+
 export default function ExampleStory() {
+  const {ref, Wrapper} = usePerfTest(typingPerfTest)
+
   const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Layout')
   const options = useMemo(() => countries.map((country) => ({value: country.code})), [])
   const border = useBoolean('Border', true, 'Props')
@@ -32,21 +52,24 @@ export default function ExampleStory() {
             <Text as="label" htmlFor="default" size={1} weight="semibold">
               Country code
             </Text>
-            <Autocomplete
-              border={border}
-              customValidity={customValidity}
-              disabled={disabled}
-              fontSize={fontSize}
-              onChange={handleChange}
-              id="default"
-              openButton={openButton}
-              options={options}
-              padding={padding}
-              placeholder="Search"
-              radius={radius}
-              readOnly={readOnly}
-              value={value}
-            />
+            <Wrapper>
+              <Autocomplete
+                border={border}
+                customValidity={customValidity}
+                disabled={disabled}
+                fontSize={fontSize}
+                onChange={handleChange}
+                id="default"
+                openButton={openButton}
+                options={options}
+                padding={padding}
+                placeholder="Search"
+                radius={radius}
+                readOnly={readOnly}
+                ref={ref}
+                value={value}
+              />
+            </Wrapper>
           </Stack>
         </Box>
       </Container>

package/src/components/autocomplete/__workshop__/fullscreen.tsx

@@ -183,7 +183,7 @@ export default function Fullscreen() {
               <Button
                 aria-label="Open search"
                 icon={SearchIcon}
-                mode="bleed"
+                mode="ghost"
                 onClick={handleOpen}
                 ref={openSearchButtonElementRef}
               />
@@ -191,35 +191,36 @@ export default function Fullscreen() {
           </Card>
           <Layer hidden={!open} style={{position: 'sticky', top: 0}}>
             <Card padding={2} shadow={1}>
-              <Flex align="center">
-                <Box flex={1} paddingRight={2}>
-                  <Autocomplete
-                    filterOption={filterOption}
-                    icon={SearchIcon}
-                    id="fullsceen-example"
-                    listBox={{padding: 2}}
-                    loading={loading}
-                    onQueryChange={handleQueryChange}
-                    onSelect={handleSelect}
-                    options={options}
-                    placeholder="Search"
-                    radius={2}
-                    ref={inputRef}
-                    relatedElements={relatedElements}
-                    renderOption={renderOption}
-                    renderPopover={renderPopover}
-                    renderValue={renderValue}
-                    value={value}
-                  />
-                </Box>
-                <Button
-                  aria-label="Close search"
-                  icon={CloseIcon}
-                  onClick={handleClose}
-                  mode="bleed"
-                  ref={setCloseSearchButtonElement}
-                />
-              </Flex>
+              <Autocomplete
+                filterOption={filterOption}
+                icon={SearchIcon}
+                id="fullsceen-example"
+                listBox={{padding: 2}}
+                loading={loading}
+                onQueryChange={handleQueryChange}
+                onSelect={handleSelect}
+                options={options}
+                placeholder="Search"
+                radius={2}
+                ref={inputRef}
+                relatedElements={relatedElements}
+                renderOption={renderOption}
+                renderPopover={renderPopover}
+                renderValue={renderValue}
+                suffix={
+                  <Box padding={1}>
+                    <Button
+                      aria-label="Close search"
+                      icon={CloseIcon}
+                      onClick={handleClose}
+                      padding={2}
+                      mode="bleed"
+                      ref={setCloseSearchButtonElement}
+                    />
+                  </Box>
+                }
+                value={value}
+              />
             </Card>
           </Layer>
           <Card flex={1} hidden={!open} ref={setPortalElement} style={{position: 'relative'}} />

package/src/components/autocomplete/autocomplete.styles.tsx

@@ -7,6 +7,7 @@ import {Box, Popover} from '../../primitives'
  */
 export const Root = styled.div`
   /* position: relative; */
+  line-height: 0;
 `
 
 /**

package/src/components/autocomplete/autocomplete.tsx

@@ -134,6 +134,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     renderOption: renderOptionProp,
     renderPopover,
     renderValue = defaultRenderValue,
+    suffix,
     value: valueProp,
     ...restProps
   } = props
@@ -429,8 +430,28 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     return undefined
   }, [disabled, handleClearButtonFocus, loading, value])
 
-  const openButtonBoxPadding = useMemo(() => padding.map((v) => v - 2), [padding])
-  const openButtonPadding = useMemo(() => padding.map((v) => v - 1), [padding])
+  const openButtonBoxPadding = useMemo(
+    () =>
+      padding.map((v) => {
+        if (v === 0) return 0
+        if (v === 1) return 1
+        if (v === 2) return 1
+
+        return v - 2
+      }),
+    [padding]
+  )
+  const openButtonPadding = useMemo(
+    () =>
+      padding.map((v) => {
+        if (v === 0) return 0
+        if (v === 1) return 0
+        if (v === 2) return 1
+
+        return v - 1
+      }),
+    [padding]
+  )
   const openButtonProps: AutocompleteOpenButtonProps = useMemo(
     () => (typeof openButton === 'object' ? openButton : EMPTY_RECORD),
     [openButton]
@@ -520,7 +541,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       ref={setRef}
       role="combobox"
       spellCheck={false}
-      suffix={openButtonNode}
+      suffix={suffix || openButtonNode}
       value={inputValue}
     />
   )

package/src/components/menu/useMenuController.ts

@@ -26,15 +26,11 @@ export function useMenuController(props: {
   shouldFocus: 'first' | 'last' | null
 }): MenuController {
   const {onKeyDown, originElement, shouldFocus} = props
-
   const elementsRef = useRef<HTMLElement[]>([])
-
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const [activeIndex, _setActiveIndex] = useState(-1)
-
-  const activeElement = elementsRef.current[activeIndex] || null
   const activeIndexRef = useRef(activeIndex)
-
+  const activeElement = elementsRef.current[activeIndex] || null
   const mounted = Boolean(rootElement)
 
   const setActiveIndex = useCallback((nextActiveIndex) => {
@@ -122,7 +118,7 @@ export function useMenuController(props: {
 
         if (focusableLen === 0) return
 
-        const focusedElement = elementsRef.current[activeIndex]
+        const focusedElement = elementsRef.current[activeIndexRef.current]
 
         let focusedIndex = focusableElements.indexOf(focusedElement)
 
@@ -145,7 +141,7 @@ export function useMenuController(props: {
 
         if (focusableLen === 0) return
 
-        const focusedElement = elementsRef.current[activeIndex]
+        const focusedElement = elementsRef.current[activeIndexRef.current]
 
         let focusedIndex = focusableElements.indexOf(focusedElement)
 
@@ -163,7 +159,7 @@ export function useMenuController(props: {
         onKeyDown(event)
       }
     },
-    [activeIndex, onKeyDown, originElement, setActiveIndex]
+    [onKeyDown, originElement, setActiveIndex]
   )
 
   const handleItemMouseEnter = useCallback(

package/src/components/tab/tab.tsx

@@ -26,7 +26,7 @@ export interface TabProps {
  */
 export const Tab = forwardRef(function Tab(
   props: TabProps &
-    Omit<React.HTMLProps<HTMLButtonElement>, 'aria-controls' | 'as' | 'id' | 'type'>,
+    Omit<React.HTMLProps<HTMLButtonElement>, 'aria-controls' | 'as' | 'id' | 'label' | 'type'>,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>
 ) {
   const {

package/src/components/tree/__workshop__/basic.perf.ts

@@ -0,0 +1,32 @@
+import {PerfTestProps, PerfTestRunFn} from '@sanity/ui-workshop'
+import {findByTestId, fireEvent} from '@testing-library/dom'
+
+// // function delay(ms: number) {
+// //   return new Promise((resolve) => setTimeout(resolve, ms))
+// // }
+
+function test<ElementType = unknown>(
+  title: string,
+  run: PerfTestRunFn<ElementType>
+): PerfTestProps<ElementType> {
+  return {name: title, run}
+}
+
+// export const toggleTreeGroupsTest = perfTest(
+//   'Toggle tree groups',
+//   async ({target}: {target: HTMLDivElement}) => {
+
+//   }
+// )
+
+export const perfTests = [
+  test('Toggle tree groups', async ({target}: {target: HTMLDivElement}) => {
+    // await delay(50)
+
+    const apples = await findByTestId(target, 'apples')
+    const oranges = await findByTestId(target, 'oranges')
+
+    fireEvent.click(apples)
+    fireEvent.click(oranges)
+  }),
+]

package/src/components/tree/__workshop__/basic.tsx

@@ -1,68 +1,104 @@
 import {LinkIcon} from '@sanity/icons'
 import {Box, Tree, TreeItem} from '@sanity/ui'
-import React from 'react'
+import {usePerfTest} from '@sanity/ui-workshop'
+import React, {useCallback, useState} from 'react'
+import {perfTests} from './basic.perf'
 
 export default function BasicStory() {
+  const {ref, Wrapper} = usePerfTest(perfTests[0])
+
+  const [id, setId] = useState('')
+
+  const handleClick = useCallback((event: React.MouseEvent) => {
+    event.preventDefault()
+
+    const testid = event.currentTarget.getAttribute('data-testid')
+
+    if (testid) setId(testid)
+  }, [])
+
   return (
     <Box padding={[4, 5, 6]}>
-      <Tree space={1}>
-        <TreeItem expanded text="Fruit">
-          <TreeItem text="Oranges" />
-          <TreeItem text="Pineapple" selected />
-          <TreeItem text="Apples">
-            <TreeItem href="#apples-macintosh" icon={LinkIcon} text="Macintosh" />
-            <TreeItem text="Granny Smith" />
-            <TreeItem text="Fuji" />
-          </TreeItem>
-          <TreeItem text="Bananas" />
-          <TreeItem text="Pears">
-            <TreeItem text="Anjou" />
-            <TreeItem text="Bartlett" />
-            <TreeItem text="Bosc" />
-            <TreeItem text="Concorde" />
-            <TreeItem text="Seckel" />
-            <TreeItem text="Starkrimson" />
-          </TreeItem>
-        </TreeItem>
-        <TreeItem text="Vegetables">
-          <TreeItem text="Podded vegetables">
-            <TreeItem text="Lentil" />
-            <TreeItem text="Pea" />
-            <TreeItem text="Peanut" />
-          </TreeItem>
-          <TreeItem text="Bulb and stem vegetables">
-            <TreeItem text="Asparagus" />
-            <TreeItem text="Celery" />
-            <TreeItem text="Leek" />
-            <TreeItem text="Onion" />
-          </TreeItem>
-          <TreeItem text="Root and tuberous vegetables">
-            <TreeItem text="Carrot" />
-            <TreeItem text="Ginger" />
-            <TreeItem text="Parsnip" />
-            <TreeItem text="Potato" />
-          </TreeItem>
-        </TreeItem>
-        <TreeItem text="Grains">
-          <TreeItem text="Cereal grains">
-            <TreeItem text="Barley" />
-            <TreeItem text="Oats" />
-            <TreeItem text="Rice" />
+      <Wrapper>
+        <Tree ref={ref} space={1}>
+          <TreeItem onClick={handleClick} expanded text="Fruit">
+            <TreeItem
+              data-testid="oranges"
+              onClick={handleClick}
+              selected={id === 'oranges'}
+              text="Oranges"
+            />
+            <TreeItem
+              data-testid="pineapples"
+              onClick={handleClick}
+              text="Pineapples"
+              selected={id === 'pineapples'}
+            />
+            <TreeItem data-testid="apples" onClick={handleClick} text="Apples">
+              <TreeItem
+                data-testid="apples/macintosh"
+                onClick={handleClick}
+                href="/apples/macintosh"
+                icon={LinkIcon}
+                text="Macintosh"
+              />
+              <TreeItem
+                data-testid="apples/granny-smith"
+                onClick={handleClick}
+                text="Granny Smith"
+              />
+              <TreeItem data-testid="apples/fuji" onClick={handleClick} text="Fuji" />
+            </TreeItem>
+            <TreeItem onClick={handleClick} text="Bananas" />
+            <TreeItem onClick={handleClick} text="Pears">
+              <TreeItem onClick={handleClick} text="Anjou" />
+              <TreeItem onClick={handleClick} text="Bartlett" />
+              <TreeItem onClick={handleClick} text="Bosc" />
+              <TreeItem onClick={handleClick} text="Concorde" />
+              <TreeItem onClick={handleClick} text="Seckel" />
+              <TreeItem onClick={handleClick} text="Starkrimson" />
+            </TreeItem>
           </TreeItem>
-          <TreeItem text="Pseudocereal grains">
-            <TreeItem text="Amaranth" />
-            <TreeItem text="Buckwheat" />
-            <TreeItem text="Chia" />
-            <TreeItem text="Quinoa" />
+          <TreeItem onClick={handleClick} text="Vegetables">
+            <TreeItem onClick={handleClick} text="Podded vegetables">
+              <TreeItem onClick={handleClick} text="Lentil" />
+              <TreeItem onClick={handleClick} text="Pea" />
+              <TreeItem onClick={handleClick} text="Peanut" />
+            </TreeItem>
+            <TreeItem onClick={handleClick} text="Bulb and stem vegetables">
+              <TreeItem onClick={handleClick} text="Asparagus" />
+              <TreeItem onClick={handleClick} text="Celery" />
+              <TreeItem onClick={handleClick} text="Leek" />
+              <TreeItem onClick={handleClick} text="Onion" />
+            </TreeItem>
+            <TreeItem onClick={handleClick} text="Root and tuberous vegetables">
+              <TreeItem onClick={handleClick} text="Carrot" />
+              <TreeItem onClick={handleClick} text="Ginger" />
+              <TreeItem onClick={handleClick} text="Parsnip" />
+              <TreeItem onClick={handleClick} text="Potato" />
+            </TreeItem>
           </TreeItem>
-          <TreeItem text="Oilseeds">
-            <TreeItem text="India mustard" />
-            <TreeItem text="Safflower" />
-            <TreeItem text="Flax seed" />
-            <TreeItem text="Poppy seed" />
+          <TreeItem onClick={handleClick} text="Grains">
+            <TreeItem onClick={handleClick} text="Cereal grains">
+              <TreeItem onClick={handleClick} text="Barley" />
+              <TreeItem onClick={handleClick} text="Oats" />
+              <TreeItem onClick={handleClick} text="Rice" />
+            </TreeItem>
+            <TreeItem onClick={handleClick} text="Pseudocereal grains">
+              <TreeItem onClick={handleClick} text="Amaranth" />
+              <TreeItem onClick={handleClick} text="Buckwheat" />
+              <TreeItem onClick={handleClick} text="Chia" />
+              <TreeItem onClick={handleClick} text="Quinoa" />
+            </TreeItem>
+            <TreeItem onClick={handleClick} text="Oilseeds">
+              <TreeItem onClick={handleClick} text="India mustard" />
+              <TreeItem onClick={handleClick} text="Safflower" />
+              <TreeItem onClick={handleClick} text="Flax seed" />
+              <TreeItem onClick={handleClick} text="Poppy seed" />
+            </TreeItem>
           </TreeItem>
-        </TreeItem>
-      </Tree>
+        </Tree>
+      </Wrapper>
     </Box>
   )
 }

package/src/components/tree/__workshop__/index.ts

@@ -2,5 +2,10 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope('components/tree', 'Tree', [
-  {name: 'basic', title: 'Basic', component: lazy(() => import('./basic'))},
+  {
+    name: 'basic',
+    title: 'Basic',
+    component: lazy(() => import('./basic')),
+    // options: {perfTests: () => import('./basic.perf')},
+  },
 ])