diff --git a/package.json b/package.json index c851c18..97b014d 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,22 @@ { "name": "@solved-ac/ui-react", - "version": "0.6.3", + "version": "0.7.0", "description": "React component library used by solved.ac", "author": "shiftpsh", "license": "MIT", "repository": "solved-ac/ui-react", "homepage": "https://github.com/solved-ac/ui-react", - "main": "dist/index.js", - "source": "src/index.tsx", + "main": "./dist/index.js", + "source": "./src/index.tsx", + "module": "./dist/index.modern.mjs", + "types": "./dist/index.d.ts", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.modern.mjs", + "require": "./dist/index.js" + } + }, "engines": { "node": ">=10" }, @@ -57,7 +66,6 @@ "babel-plugin-inline-react-svg": "^2.0.1", "babel-plugin-transform-react-jsx": "^6.24.1", "cross-env": "^7.0.2", - "emotion-reset": "^3.0.1", "eslint": "^8.15.0", "eslint-config-airbnb": "^18.2.1", "eslint-config-prettier": "^6.7.0", diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx index c0c0508..48293da 100644 --- a/src/components/Tooltip.tsx +++ b/src/components/Tooltip.tsx @@ -16,7 +16,13 @@ import { } from '@floating-ui/react' import { AnimatePresence, motion } from 'framer-motion' import { transparentize } from 'polished' -import React, { CSSProperties, ReactNode, useRef, useState } from 'react' +import React, { + CSSProperties, + ReactNode, + useRef, + useState, + useMemo, +} from 'react' import { SolvedTheme, solvedThemes } from '../styles' import { Card, CardProps } from './Card' @@ -74,6 +80,7 @@ export type TooltipProps = { activateOnClick?: boolean noThemeChange?: boolean zIndex?: number + onOpenChange?: (open: boolean) => void } & ( | { noDefaultStyles: false @@ -133,6 +140,7 @@ export const Tooltip: React.FC = (props) => { activateOnClick = false, noThemeChange = false, zIndex, + onOpenChange, ...cardProps } = props const [isOpen, setIsOpen] = useState(false) @@ -140,6 +148,13 @@ export const Tooltip: React.FC = (props) => { const arrowRef = useRef(null) + const handleOpenChange = (open: boolean): void => { + setIsOpen(open) + if (onOpenChange) { + onOpenChange(open) + } + } + const { x, y, @@ -152,7 +167,7 @@ export const Tooltip: React.FC = (props) => { placement: place, strategy: 'fixed', open: isOpen, - onOpenChange: setIsOpen, + onOpenChange: handleOpenChange, middleware: [ offset(16), shift({ padding: 16 }), @@ -183,8 +198,18 @@ export const Tooltip: React.FC = (props) => { ]) const RenderComponent = noBackground ? motion.div : TooltipContainer - const ThemeProviderComponent = - noThemeChange || noBackground ? React.Fragment : ThemeProvider + const ThemeProviderComponent = useMemo( + () => + noThemeChange || noBackground + ? React.Fragment + : ({ children }: { children?: ReactNode }) => ( + // eslint-disable-next-line react/jsx-indent + + {children} + + ), + [noThemeChange, noBackground, theme] + ) const arrowPosition = renderSide[placement.split('-')[0] as keyof typeof renderSide] @@ -195,7 +220,7 @@ export const Tooltip: React.FC = (props) => { {children} - + {renderTooltip && ( diff --git a/src/styles/GlobalStyles.tsx b/src/styles/GlobalStyles.tsx index b854571..c7c4319 100644 --- a/src/styles/GlobalStyles.tsx +++ b/src/styles/GlobalStyles.tsx @@ -1,11 +1,136 @@ import { css, Global, SerializedStyles, useTheme } from '@emotion/react' -import emotionReset from 'emotion-reset' import { buttons, textInputs, transparentize } from 'polished' import React from 'react' import { SolvedTheme } from './Themes' +const reset = css` + html, + body, + div, + span, + applet, + object, + iframe, + h1, + h2, + h3, + h4, + h5, + h6, + p, + blockquote, + pre, + a, + abbr, + acronym, + address, + big, + cite, + code, + del, + dfn, + em, + img, + ins, + kbd, + q, + s, + samp, + small, + strike, + strong, + sub, + sup, + tt, + var, + b, + u, + i, + center, + dl, + dt, + dd, + ol, + ul, + li, + fieldset, + form, + label, + legend, + table, + caption, + tbody, + tfoot, + thead, + tr, + th, + td, + article, + aside, + canvas, + details, + embed, + figure, + figcaption, + footer, + header, + hgroup, + menu, + nav, + output, + ruby, + section, + summary, + time, + mark, + audio, + video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + article, + aside, + details, + figcaption, + figure, + footer, + header, + hgroup, + menu, + nav, + section { + display: block; + } + body { + line-height: 1; + } + ol, + ul { + list-style: none; + } + blockquote, + q { + quotes: none; + } + blockquote:before, + blockquote:after, + q:before, + q:after { + content: ''; + content: none; + } + table { + border-collapse: collapse; + border-spacing: 0; + } +` + const globalCss = (theme: SolvedTheme): SerializedStyles => css` - ${emotionReset} + ${reset} * { box-sizing: border-box; diff --git a/tsconfig.json b/tsconfig.json index 35b5ee6..afeea5c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,8 @@ { "compilerOptions": { "outDir": "dist", - "module": "esnext", + "module": "ESNext", + "target": "ESNext", "lib": ["dom", "esnext"], "moduleResolution": "node", "jsx": "react", diff --git a/yarn.lock b/yarn.lock index d069886..baa24d4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4475,11 +4475,6 @@ emojis-list@^3.0.0: resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q== -emotion-reset@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/emotion-reset/-/emotion-reset-3.0.1.tgz#1445e66bab7e8fd9975ce0d8cd3324589981f0a6" - integrity sha512-v6scW83qSu+wtxg7lX1s0+/2U4EAAGFxDQMkvXE10jhKtyuXCzy3/su5/MU9ZjXeNv6ZjxZH51WktrKosKUy9g== - encodeurl@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"