@sanity/ui 1.0.0-next.3 → 1.0.1

package/src/primitives/tooltip/tooltipArrow.tsx

@@ -1,64 +1,74 @@
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 
-const Root = memo(
-  styled.div({
-    position: 'absolute',
-    pointerEvents: 'none',
-    width: '15px',
-    height: '15px',
-    fill: 'none',
-
-    ':empty + &': {
-      display: 'none',
-    },
-
-    '& > svg': {
-      display: 'block',
-      transformOrigin: '7.5px 7.5px',
-    },
-
-    '[data-placement^="top"] > &': {
-      bottom: '-27px',
-    },
-
-    '[data-placement^="right"] > &': {
-      left: '-27px',
-
-      '& > svg': {
-        transform: 'rotate(90deg)',
-      },
-    },
-
-    '[data-placement^="left"] > &': {
-      right: '-27px',
-
-      '& > svg': {
-        transform: 'rotate(-90deg)',
-      },
-    },
-
-    '[data-placement^="bottom"] > &': {
-      top: '-27px',
-
-      '& > svg': {
-        transform: 'rotate(180deg)',
-      },
-    },
-  })
-)
-
-const Border = memo(
-  styled.path({
-    fill: 'var(--card-shadow-outline-color)',
-  })
-)
-
-const Shape = memo(
-  styled.path({
-    fill: 'var(--card-bg-color)',
-  })
-)
+const Root = styled.div`
+  position: absolute;
+  pointer-events: none;
+  width: 15px;
+  height: 15px;
+  fill: none;
+
+  :empty + & {
+    display: none;
+  }
+
+  & > svg {
+    display: block;
+    transform-origin: 7.5px 7.5px;
+  }
+
+  /* position: absolute;
+  width: 15px;
+  height: 15px;
+  fill: none;
+
+  :empty + & {
+    display: none;
+  }
+
+  & > svg {
+    &:not([hidden]) {
+      display: block;
+    }
+    transform-origin: 7.5px 7.5px;
+  } */
+
+  [data-placement^='top'] > & {
+    bottom: -27px;
+  }
+
+  [data-placement^='right'] > & {
+    left: -27px;
+
+    & > svg {
+      transform: rotate(90deg);
+    }
+  }
+
+  [data-placement^='left'] > & {
+    right: -27px;
+
+    & > svg {
+      transform: rotate(-90deg);
+    }
+  }
+
+  [data-placement^='bottom'] > & {
+    top: -27px;
+
+    & > svg {
+      transform: rotate(180deg);
+    }
+  }
+`
+
+const Border = styled.path`
+  fill: var(--card-shadow-outline-color);
+`
+
+const Shape = styled.path`
+  fill: var(--card-bg-color);
+`
 
 interface TooltipArrowProps {}
 

package/src/styles/border/borderStyle.ts

@@ -5,13 +5,13 @@ import {ResponsiveBorderStyleProps} from './types'
 
 const BORDER_VALUE = '1px solid var(--card-border-color)'
 
-// export function responsiveBorderStyle(): Array<
-//   (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]
-// > {
-//   return [responsiveBorderStyle, borderTop, borderRight, borderBottom, borderLeft]
-// }
+export function responsiveBorderStyle(): Array<
+  (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]
+> {
+  return [border, borderTop, borderRight, borderBottom, borderLeft]
+}
 
-export function responsiveBorderStyle(props: ResponsiveBorderStyleProps & ThemeProps): CSSObject[] {
+function border(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -20,9 +20,7 @@ export function responsiveBorderStyle(props: ResponsiveBorderStyleProps & ThemeP
   )
 }
 
-export function responsiveBorderTopStyle(
-  props: ResponsiveBorderStyleProps & ThemeProps
-): CSSObject[] {
+function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -31,9 +29,7 @@ export function responsiveBorderTopStyle(
   )
 }
 
-export function responsiveBorderRightStyle(
-  props: ResponsiveBorderStyleProps & ThemeProps
-): CSSObject[] {
+function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -42,9 +38,7 @@ export function responsiveBorderRightStyle(
   )
 }
 
-export function responsiveBorderBottomStyle(
-  props: ResponsiveBorderStyleProps & ThemeProps
-): CSSObject[] {
+function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -53,9 +47,7 @@ export function responsiveBorderBottomStyle(
   )
 }
 
-export function responsiveBorderLeftStyle(
-  props: ResponsiveBorderStyleProps & ThemeProps
-): CSSObject[] {
+function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 

package/src/styles/box/boxStyle.ts

@@ -24,20 +24,18 @@ export function boxStyle(): CSSObject {
   return BASE_STYLE
 }
 
-// export function responsiveBoxStyle(): Array<
-//   (props: ResponsiveBoxStyleProps & ThemeProps) => CSSObject[]
-// > {
-//   return [
-//     responsiveBoxSizingStyle,
-//     responsiveBoxHeightStyle,
-//     responsiveBoxOverflowStyle,
-//     responsiveBoxDisplayStyle,
-//   ]
-// }
+export function responsiveBoxStyle(): Array<
+  (props: ResponsiveBoxStyleProps & ThemeProps) => CSSObject[]
+> {
+  return [
+    responsiveBoxSizingStyle,
+    responsiveBoxHeightStyle,
+    responsiveBoxOverflowStyle,
+    responsiveBoxDisplayStyle,
+  ]
+}
 
-export function responsiveBoxDisplayStyle(
-  props: ResponsiveBoxStyleProps & ThemeProps
-): CSSObject[] {
+function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -46,7 +44,7 @@ export function responsiveBoxDisplayStyle(
   }))
 }
 
-export function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps): CSSObject[] {
+function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -55,7 +53,7 @@ export function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeP
   }))
 }
 
-export function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps): CSSObject[] {
+function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -64,9 +62,7 @@ export function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeP
   }))
 }
 
-export function responsiveBoxOverflowStyle(
-  props: ResponsiveBoxStyleProps & ThemeProps
-): CSSObject[] {
+function responsiveBoxOverflowStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 

package/src/styles/flex/flexItemStyle.ts

@@ -4,11 +4,17 @@ import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexItemStyleProps} from './types'
 
-export const __tmp_flexItemStyle: CSSObject = {
+const BASE_STYLE: CSSObject = {
   minWidth: 0,
   minHeight: 0,
 }
 
+export function flexItemStyle(): Array<
+  CSSObject | ((props: ResponsiveFlexItemStyleProps & ThemeProps) => CSSObject[])
+> {
+  return [BASE_STYLE, responsiveFlexItemStyle]
+}
+
 export function responsiveFlexItemStyle(
   props: ResponsiveFlexItemStyleProps & ThemeProps
 ): CSSObject[] {

package/src/styles/flex/flexStyle.ts

@@ -3,19 +3,24 @@ import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexStyleProps} from './types'
 
-export const __tmp_flexStyle: CSSObject = {
+const BASE_STYLE: CSSObject = {
   '&&:not([hidden])': {
     display: 'flex',
   },
 }
 
-// export function responsiveFlexStyle(): Array<
-//   CSSObject | ((props: ResponsiveFlexStyleProps & ThemeProps) => CSSObject[])
-// > {
-//   return [
-
-//   ]
-// }
+export function responsiveFlexStyle(): Array<
+  CSSObject | ((props: ResponsiveFlexStyleProps & ThemeProps) => CSSObject[])
+> {
+  return [
+    BASE_STYLE,
+    responsiveFlexAlignStyle,
+    responsiveFlexGapStyle,
+    responsiveFlexWrapStyle,
+    responsiveFlexJustifyStyle,
+    responsiveFlexDirectionStyle,
+  ]
+}
 
 export function responsiveFlexAlignStyle(
   props: ResponsiveFlexStyleProps & ThemeProps
@@ -28,7 +33,7 @@ export function responsiveFlexAlignStyle(
   })
 }
 
-export function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {
+function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
   const {theme} = props
   const {media, space} = theme.sanity
 

package/src/styles/grid/gridItemStyle.ts

@@ -3,18 +3,18 @@ import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridItemStyleProps} from './types'
 
-// export function responsiveGridItemStyle(): Array<
-//   (props: ResponsiveGridItemStyleProps & ThemeProps) => CSSObject[]
-// > {
-//   return [
-//     responsiveGridItemRowStyle,
-//     responsiveGridItemRowStartStyle,
-//     responsiveGridItemRowEndStyle,
-//     responsiveGridItemColumnStyle,
-//     responsiveGridItemColumnStartStyle,
-//     responsiveGridItemColumnEndStyle,
-//   ]
-// }
+export function responsiveGridItemStyle(): Array<
+  (props: ResponsiveGridItemStyleProps & ThemeProps) => CSSObject[]
+> {
+  return [
+    responsiveGridItemRowStyle,
+    responsiveGridItemRowStartStyle,
+    responsiveGridItemRowEndStyle,
+    responsiveGridItemColumnStyle,
+    responsiveGridItemColumnStartStyle,
+    responsiveGridItemColumnEndStyle,
+  ]
+}
 
 const GRID_ITEM_ROW = {
   auto: 'auto',
@@ -26,9 +26,7 @@ const GRID_ITEM_COLUMN = {
   full: '1 / -1',
 }
 
-export function responsiveGridItemRowStyle(
-  props: ResponsiveGridItemStyleProps & ThemeProps
-): CSSObject[] {
+function responsiveGridItemRowStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -41,9 +39,7 @@ export function responsiveGridItemRowStyle(
   })
 }
 
-export function responsiveGridItemRowStartStyle(
-  props: ResponsiveGridItemStyleProps & ThemeProps
-): CSSObject[] {
+function responsiveGridItemRowStartStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -52,18 +48,14 @@ export function responsiveGridItemRowStartStyle(
   }))
 }
 
-export function responsiveGridItemRowEndStyle(
-  props: ResponsiveGridItemStyleProps & ThemeProps
-): CSSObject[] {
+function responsiveGridItemRowEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
   return _responsive(media, props.$rowEnd, (rowEnd) => ({gridRowEnd: rowEnd}))
 }
 
-export function responsiveGridItemColumnStyle(
-  props: ResponsiveGridItemStyleProps & ThemeProps
-): CSSObject[] {
+function responsiveGridItemColumnStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -76,9 +68,7 @@ export function responsiveGridItemColumnStyle(
   })
 }
 
-export function responsiveGridItemColumnStartStyle(
-  props: ResponsiveGridItemStyleProps & ThemeProps
-): CSSObject[] {
+function responsiveGridItemColumnStartStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -87,9 +77,7 @@ export function responsiveGridItemColumnStartStyle(
   }))
 }
 
-export function responsiveGridItemColumnEndStyle(
-  props: ResponsiveGridItemStyleProps & ThemeProps
-): CSSObject[] {
+function responsiveGridItemColumnEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 

package/src/styles/grid/gridStyle.ts

@@ -3,7 +3,7 @@ import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridStyleProps} from './types'
 
-export const __tmp_gridStyle: CSSObject = {
+const GRID_CSS = {
   '&&:not([hidden])': {
     display: 'grid',
   },
@@ -26,25 +26,23 @@ const GRID_AUTO_ROWS = {
   fr: 'minmax(0, 1fr)',
 }
 
-// export function responsiveGridStyle(): Array<
-//   CSSObject | ((props: ResponsiveGridStyleProps & ThemeProps) => CSSObject[])
-// > {
-//   return [
-//     __tmp_gridStyle,
-//     responsiveGridAutoFlowStyle,
-//     responsiveGridAutoRowsStyle,
-//     responsiveGridAutoColsStyle,
-//     responsiveGridColumnsStyle,
-//     responsiveGridRowsStyle,
-//     responsiveGridGapStyle,
-//     responsiveGridGapXStyle,
-//     responsiveGridGapYStyle,
-//   ]
-// }
-
-export function responsiveGridAutoFlowStyle(
-  props: ResponsiveGridStyleProps & ThemeProps
-): CSSObject[] {
+export function responsiveGridStyle(): Array<
+  CSSObject | ((props: ResponsiveGridStyleProps & ThemeProps) => CSSObject[])
+> {
+  return [
+    GRID_CSS,
+    responsiveGridAutoFlowStyle,
+    responsiveGridAutoRowsStyle,
+    responsiveGridAutoColsStyle,
+    responsiveGridColumnsStyle,
+    responsiveGridRowsStyle,
+    responsiveGridGapStyle,
+    responsiveGridGapXStyle,
+    responsiveGridGapYStyle,
+  ]
+}
+
+function responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -53,9 +51,7 @@ export function responsiveGridAutoFlowStyle(
   }))
 }
 
-export function responsiveGridAutoRowsStyle(
-  props: ResponsiveGridStyleProps & ThemeProps
-): CSSObject[] {
+function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -64,9 +60,7 @@ export function responsiveGridAutoRowsStyle(
   }))
 }
 
-export function responsiveGridAutoColsStyle(
-  props: ResponsiveGridStyleProps & ThemeProps
-): CSSObject[] {
+function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -75,9 +69,7 @@ export function responsiveGridAutoColsStyle(
   }))
 }
 
-export function responsiveGridColumnsStyle(
-  props: ResponsiveGridStyleProps & ThemeProps
-): CSSObject[] {
+function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -86,7 +78,7 @@ export function responsiveGridColumnsStyle(
   }))
 }
 
-export function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps): CSSObject[] {
+function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
@@ -95,7 +87,7 @@ export function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeP
   }))
 }
 
-export function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps): CSSObject[] {
+function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media, space} = theme.sanity
 
@@ -104,7 +96,7 @@ export function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemePr
   }))
 }
 
-export function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps): CSSObject[] {
+function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media, space} = theme.sanity
 
@@ -113,7 +105,7 @@ export function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeP
   }))
 }
 
-export function responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps): CSSObject[] {
+function responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media, space} = theme.sanity
 

package/src/styles/helpers.ts

@@ -55,13 +55,13 @@ export function _getResponsiveSpace(
   theme: Theme,
   props: string[],
   spaceIndexes: number[] = EMPTY_ARRAY
-): CSSObject[] {
+): CSSObject[] | null {
   if (!Array.isArray(spaceIndexes)) {
     throw new Error('the property must be array of numbers')
   }
 
   if (spaceIndexes.length === 0) {
-    return []
+    return null
   }
 
   return _responsive(theme.sanity.media, spaceIndexes, (spaceIndex) =>

package/src/styles/index.ts

@@ -1,4 +1,3 @@
-export * from './compose'
 export * from './helpers'
 export * from './types'