@sanity/ui 3.0.0-static.0 → 3.0.0-static.10

package/src/core/primitives/textInput/textInput.tsx

@@ -1,440 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {composeClassNames, RadiusStyleProps, ResponsiveProp, textInput} from '@sanity/ui/css'
-import {FontTextSize, Space, ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, isValidElement, useCallback, useImperativeHandle, useMemo, useRef} from 'react'
-import {isValidElementType} from 'react-is'
-import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp, useCustomValidity} from '../../hooks'
-import {styled} from '../../lib/styled'
-// import {
-//   // responsiveRadiusStyle,
-//   // ResponsiveRadiusStyleProps,
-//   responsiveInputPaddingStyle,
-//   TextInputInputStyleProps,
-//   // TextInputRepresentationStyleProps,
-//   TextInputResponsivePaddingStyleProps,
-//   textInputBaseStyle,
-//   textInputFontSizeStyle,
-//   // textInputRepresentationStyle,
-//   // textInputRootStyle,
-// } from '../../styles/internal'
-import {useRootTheme} from '../../theme'
-import {Box} from '../box'
-import {Button, ButtonProps} from '../button'
-import {Card} from '../card'
-import {Text} from '../text'
-
-/**
- * @public
- */
-export type TextInputClearButtonProps = Omit<ButtonProps, 'as'> &
-  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'onClick' | 'onMouseDown' | 'ref'>
-
-/**
- * @public
- */
-export type TextInputType =
-  | 'date'
-  | 'datetime-local'
-  | 'email'
-  | 'url'
-  | 'month'
-  | 'number'
-  | 'password'
-  | 'tel'
-  | 'time'
-  | 'text'
-  | 'week'
-  | 'color'
-
-/**
- * @public
- */
-export interface TextInputProps extends RadiusStyleProps {
-  /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  border?: boolean
-  /**
-   * @beta
-   */
-  clearButton?: boolean | TextInputClearButtonProps
-  customValidity?: string
-  fontSize?: ResponsiveProp<FontTextSize>
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
-  /**
-   * @beta
-   */
-  onClear?: () => void
-  padding: ResponsiveProp<Space>
-  // padding?: number | number[]
-  prefix?: React.ReactNode
-  // radius?: Radius | Radius[]
-  // space?: number | number[]
-  space?: ResponsiveProp<Space>
-  suffix?: React.ReactNode
-  type?: TextInputType
-  weight?: ThemeFontWeightKey
-}
-
-const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {
-  backgroundColor: 'transparent',
-  top: 0,
-  right: 0,
-  zIndex: 2,
-}
-
-// const Root = styled(Card).attrs({forwardedAs: 'span'})(textInputRootStyle)
-
-// const InputRoot = styled.span`
-//   flex: 1;
-//   min-width: 0;
-//   display: block;
-//   position: relative;
-// `
-
-// const Prefix = styled(Card).attrs({forwardedAs: 'span'})`
-//   border-top-right-radius: 0;
-//   border-bottom-right-radius: 0;
-
-//   & > span {
-//     display: block;
-//     margin: -1px;
-//   }
-// `
-
-// const Suffix = styled(Card).attrs({forwardedAs: 'span'})`
-//   border-top-left-radius: 0;
-//   border-bottom-left-radius: 0;
-
-//   & > span {
-//     display: block;
-//     margin: -1px;
-//   }
-// `
-
-// const Input = styled.input<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
-//   responsiveInputPaddingStyle,
-//   textInputBaseStyle,
-//   textInputFontSizeStyle,
-// )
-
-// const Presentation = styled.span<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
-//   responsiveRadiusStyle,
-//   textInputRepresentationStyle,
-// )
-
-// const LeftBox = styled(Box)`
-//   position: absolute;
-//   top: 0;
-//   left: 0;
-// `
-
-// const RightBox = styled(Box)`
-//   position: absolute;
-//   top: 0;
-//   right: 0;
-// `
-
-// const RightCard = styled(Card)`
-//   background-color: transparent;
-//   position: absolute;
-//   top: 0;
-//   right: 0;
-// `
-
-const TextInputClearButton = styled(Button)({
-  '&:not([hidden])': {
-    display: 'block',
-  },
-})
-
-/**
- * Single line text input.
- *
- * @public
- */
-export const TextInput = forwardRef(function TextInput(
-  props: TextInputProps & Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'prefix' | 'type'>,
-  forwardedRef: React.Ref<HTMLInputElement>,
-) {
-  const {
-    __unstable_disableFocusRing,
-    border = true,
-    className,
-    clearButton,
-    disabled = false,
-    fontSize: fontSizeProp = 2,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    onClear,
-    padding: paddingProp = 3,
-    prefix,
-    radius: radiusProp = 2,
-    readOnly,
-    space: _space = 3,
-    suffix,
-    customValidity,
-    type = 'text',
-    weight: _width,
-    ...restProps
-  } = props
-  const ref = useRef<HTMLInputElement | null>(null)
-
-  const rootTheme = useRootTheme()
-
-  const fontSize = useArrayProp(fontSizeProp)
-  const padding = useArrayProp(paddingProp)
-  const radius = useArrayProp(radiusProp)
-  // const space = useArrayProp(spaceProp)
-
-  // Transient properties
-  const $hasClearButton = Boolean(clearButton)
-  // const $hasIcon = Boolean(IconComponent)
-  // const $hasIconRight = Boolean(IconRightComponent)
-  // const $hasSuffix = Boolean(suffix)
-  // const $hasPrefix = Boolean(prefix)
-
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  // Prevent the clear button from taking the focus away from the input
-  const handleClearMouseDown = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault()
-    event.stopPropagation()
-  }, [])
-
-  const handleClearClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault()
-      event.stopPropagation()
-
-      if (onClear) onClear()
-
-      // Focus the input, in case focus has been lost when clicking the clear button
-      ref.current?.focus()
-    },
-    [onClear, ref],
-  )
-
-  // Render prefix (memoized)
-  const prefixNode = useMemo(
-    () =>
-      prefix && (
-        <Card
-          as="span"
-          borderTop
-          borderLeft
-          borderBottom
-          className="text-input-prefix"
-          radius={radius}
-          sizing="border"
-          tone="inherit"
-        >
-          <span>{prefix}</span>
-        </Card>
-      ),
-    [prefix, radius],
-  )
-
-  // Render presentation (memoized)
-  const presentationNode = useMemo(
-    () => (
-      <Card
-        as="span"
-        // $hasPrefix={$hasPrefix}
-        // $unstableDisableFocusRing={__unstable_disableFocusRing}
-        // $hasSuffix={$hasSuffix}
-        // $radius={radius}
-        // $scheme={rootTheme.scheme}
-        // $tone={rootTheme.tone}
-        border={border}
-        className="text-input-presentation"
-        data-border={border ? '' : undefined}
-        data-disable-focus-ring={__unstable_disableFocusRing ? '' : undefined}
-        data-scheme={rootTheme.scheme}
-        data-tone={rootTheme.tone}
-        position="absolute"
-        radius={radius}
-      >
-        {IconComponent && (
-          <Box as="span" padding={padding} position="absolute" style={{top: 0, left: 0}}>
-            <Text size={fontSize}>
-              {isValidElement(IconComponent) && IconComponent}
-              {isValidElementType(IconComponent) && <IconComponent />}
-            </Text>
-          </Box>
-        )}
-
-        {!$hasClearButton && IconRightComponent && (
-          <Box as="span" padding={padding} position="absolute" style={{top: 0, right: 0}}>
-            <Text size={fontSize}>
-              {isValidElement(IconRightComponent) && IconRightComponent}
-              {isValidElementType(IconRightComponent) && <IconRightComponent />}
-            </Text>
-          </Box>
-        )}
-      </Card>
-    ),
-    [
-      __unstable_disableFocusRing,
-      border,
-      fontSize,
-      IconComponent,
-      IconRightComponent,
-      padding,
-      radius,
-      rootTheme,
-      $hasClearButton,
-      // $hasPrefix,
-      // $hasSuffix,
-    ],
-  )
-
-  // Render clear button (memoized)
-  const clearButtonBoxPadding = useMemo(
-    () =>
-      padding.map((v) => {
-        if (v === 0) return 0
-        if (v === 1) return 1
-        if (v === 2) return 1
-
-        return (v as Space) - 2
-      }),
-    [padding],
-  )
-
-  const clearButtonPadding = useMemo(
-    () =>
-      padding.map((v) => {
-        if (v === 0) return 0
-        if (v === 1) return 0
-        if (v === 2) return 1
-
-        return (v as Space) - 1
-      }),
-    [padding],
-  )
-  const clearButtonProps: TextInputClearButtonProps = useMemo(
-    () => (typeof clearButton === 'object' ? clearButton : EMPTY_RECORD),
-    [clearButton],
-  )
-  const clearButtonNode = useMemo(
-    () =>
-      !disabled &&
-      !readOnly &&
-      clearButton && (
-        <Card
-          // forwardedAs="span"
-          padding={clearButtonBoxPadding}
-          position="absolute"
-          style={CLEAR_BUTTON_BOX_STYLE}
-          tone={customValidity ? 'critical' : 'inherit'}
-
-          // position: absolute;
-          // top: 0;
-          // right: 0;
-        >
-          <TextInputClearButton
-            aria-label="Clear"
-            data-qa="clear-button"
-            fontSize={fontSize}
-            icon={CloseIcon}
-            mode="bleed"
-            padding={clearButtonPadding}
-            radius={radius}
-            {...clearButtonProps}
-            onClick={handleClearClick}
-            onMouseDown={handleClearMouseDown}
-          />
-        </Card>
-      ),
-    [
-      clearButton,
-      clearButtonBoxPadding,
-      clearButtonPadding,
-      clearButtonProps,
-      customValidity,
-      disabled,
-      fontSize,
-      handleClearClick,
-      handleClearMouseDown,
-      radius,
-      readOnly,
-    ],
-  )
-
-  // Render suffix (memoized)
-  const suffixNode = useMemo(
-    () =>
-      suffix && (
-        <Card
-          as="span"
-          borderTop
-          borderRight
-          borderBottom
-          className="text-input-suffix"
-          radius={radius}
-          sizing="border"
-          tone="inherit"
-        >
-          <span>{suffix}</span>
-        </Card>
-      ),
-    [radius, suffix],
-  )
-
-  return (
-    <Card
-      align="center"
-      as="span"
-      className={composeClassNames(className, textInput({size: fontSizeProp}))}
-      data-ui="TextInput"
-      display="flex"
-      tone={rootTheme.tone}
-    >
-      {prefixNode}
-
-      <Box
-        as="span"
-        className="text-input-wrapper"
-        flex={1}
-        // todo
-        // minWidth={0}
-        position="relative"
-      >
-        <input
-          data-as="input"
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
-          {...restProps}
-          // $fontSize={fontSize}
-          // $iconLeft={$hasIcon}
-          // $iconRight={$hasIconRight || $hasClearButton}
-          // $padding={padding}
-          // $scheme={rootTheme.scheme}
-          // $space={space}
-          // $tone={rootTheme.tone}
-          // $weight={weight}
-          disabled={disabled}
-          readOnly={readOnly}
-          ref={ref}
-          type={type}
-        />
-
-        {presentationNode}
-        {clearButtonNode}
-      </Box>
-
-      {suffixNode}
-    </Card>
-  )
-})
-
-TextInput.displayName = 'ForwardRef(TextInput)'

package/src/core/primitives/tooltip/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/core/primitives/tooltip/__workshop__/customPortal.tsx

@@ -1,101 +0,0 @@
-import {
-  BoundaryElementProvider,
-  Button,
-  Card,
-  Flex,
-  Portal,
-  PortalProvider,
-  Stack,
-  Text,
-  Tooltip,
-} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useMemo, useState} from 'react'
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
-
-const PORTAL_OPTIONS = {
-  '(true)': true,
-  '(false)': false,
-  'portal1': 'portal1',
-}
-
-export default function CustomPortalStory() {
-  const content = useText(
-    'Content',
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
-  )
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
-  const portal = useSelect('Portal', PORTAL_OPTIONS, undefined, 'Props')
-  const useBoundaryElement = useBoolean('Use boundary element', true)
-
-  const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-  const __unstable_elements = useMemo(
-    () => ({
-      portal1: portal1Element,
-    }),
-    [portal1Element],
-  )
-
-  return (
-    <PortalProvider __unstable_elements={__unstable_elements}>
-      <Flex align="center" height="fill" justify="center">
-        <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
-          <Card
-            border
-            padding={4}
-            ref={setBoundaryElement}
-            style={{
-              height: 'calc(100vh - 100px)',
-              position: 'relative',
-              width: '500px',
-            }}
-          >
-            <Text>Boundary element</Text>
-            <Flex align="center" height="fill" justify="center">
-              <Flex justify="center">
-                <Stack space={2}>
-                  <Tooltip
-                    boundaryElement={useBoundaryElement ? boundaryElement : null}
-                    content={<Text size={1}>{content}</Text>}
-                    padding={2}
-                    placement={placement}
-                    portal={portal}
-                  >
-                    <Button mode="bleed" text="Tooltip" />
-                  </Tooltip>
-                </Stack>
-              </Flex>
-            </Flex>
-          </Card>
-        </BoundaryElementProvider>
-      </Flex>
-
-      <Card
-        border
-        margin={4}
-        padding={4}
-        ref={setPortal1Element}
-        style={{
-          left: 0,
-          position: 'absolute',
-          top: 0,
-          width: '175px',
-        }}
-        tone="critical"
-      />
-
-      <Portal __unstable_name="portal1">
-        <Stack space={4}>
-          <Text size={1} weight="medium">
-            Portal 1 content
-          </Text>
-          <Text size={1}>
-            The tooltip's max-width should not exceed this container's width (minus padding) if it's
-            set to use this portal
-          </Text>
-        </Stack>
-      </Portal>
-    </PortalProvider>
-  )
-}

package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx

@@ -1,73 +0,0 @@
-import {BoundaryElementProvider, Button, Card, Code, Flex, Stack, Text, Tooltip} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useCallback, useState} from 'react'
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
-
-export default function OverflowingBoundaryStory() {
-  const content = useText(
-    'Content',
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
-  )
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
-  const portal = useBoolean('Portal', false)
-  const useBoundaryElement = useBoolean('Use boundary element', true)
-
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-  const [buttonsVisible, setButtonsVisible] = useState(true)
-
-  const handleHideButtons = useCallback(() => {
-    setButtonsVisible(false)
-  }, [])
-
-  const handleShowButtons = useCallback(() => {
-    setButtonsVisible(true)
-  }, [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" style={{height: '200vh'}}>
-      <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
-        <Card
-          border
-          ref={setBoundaryElement}
-          style={{
-            height: 'calc(100vh - 100px)',
-            overflow: 'hidden',
-            position: 'relative',
-            resize: 'both',
-            width: '500px',
-          }}
-        >
-          <Flex align="center" height="fill" justify="center">
-            <Flex justify="center">
-              <Stack space={2}>
-                <Code size={1}>Placement: {placement}</Code>
-                <Button
-                  disabled={buttonsVisible}
-                  fontSize={1}
-                  onClick={handleShowButtons}
-                  text="Show buttons"
-                />
-              </Stack>
-            </Flex>
-          </Flex>
-
-          {buttonsVisible && (
-            <Tooltip
-              content={<Text size={1}>{content}</Text>}
-              padding={2}
-              placement={placement}
-              portal={portal}
-            >
-              <Button
-                mode="bleed"
-                onClick={handleHideButtons}
-                style={{position: 'absolute', top: 10, right: 10}}
-                text="Tooltip"
-              />
-            </Tooltip>
-          )}
-        </Card>
-      </BoundaryElementProvider>
-    </Flex>
-  )
-}