@mantine/core - npm Package Compare versions

Comparing version 0.6.2 to 0.7.0

dist/mantine-core/src/index.d.ts

@@ -12,2 +12,3 @@ export * from "../../mantine-theme/src";
 export { Button, BUTTON_SIZES } from './Button/Button';
+export { Card, CardsGrid } from './Card/Card';
 export { Checkbox, CHECKBOX_SIZES } from './Checkbox/Checkbox';
@@ -21,2 +22,3 @@ export { Code } from './Code/Code';
 export { Hr, HR_SIZES } from './Hr/Hr';
+export { Image } from './Image/Image';
 export { Input } from './Input/Input';
@@ -48,4 +50,4 @@ export { InputWrapper } from './InputWrapper/InputWrapper';
 export { Tooltip } from './Tooltip/Tooltip';
-export { Transition, GroupedTransition } from './Transition/Transition';
+export { Transition, GroupedTransition, AVAILABLE_TRANSITIONS } from './Transition/Transition';
 export { TypographyStylesProvider } from './TypographyStylesProvider/TypographyStylesProvider';
 //# sourceMappingURL=index.d.ts.map

dist/mantine-core/src/Table/Table.styles.d.ts

@@ -8,4 +8,4 @@ import { MantineTheme } from "../../../mantine-theme/src";
     theme?: MantineTheme;
-}) => import("jss").Classes<"table" | "hover" | "striped">;
+}) => import("jss").Classes<"table" | "striped" | "hover">;
 export default _default;
 //# sourceMappingURL=Table.styles.d.ts.map

dist/mantine-core/src/Tooltip/Tooltip.d.ts

@@ -19,4 +19,6 @@ import React from 'react';
     disabled?: boolean;
-    /** Remove arrow */
-    noArrow?: boolean;
+    /** Adds arrow, arrow position depends on position and placement props */
+    withArrow?: boolean;
+    /** Arrow size in px */
+    arrowSize?: number;
     /** Tooltip position relative to children */
@@ -40,4 +42,10 @@ position?: 'top' | 'left' | 'right' | 'bottom';
     transitionTimingFunction?: string;
+    /** Get wrapper ref */
+    elementRef?: React.ForwardedRef<HTMLDivElement>;
+    /** Get tooltip ref */
+    tooltipRef?: React.ForwardedRef<HTMLDivElement>;
+    /** Tooltip id to bind aria-describedby */
+    tooltipId?: string;
 }
-export declare function Tooltip({ className, themeOverride, label, children, opened, delay, gutter, color, disabled, noArrow, position, placement, transition, transitionDuration, zIndex, transitionTimingFunction, width, wrapLines, allowPointerEvents, ...others }: TooltipProps): JSX.Element;
+export declare function Tooltip({ className, themeOverride, label, children, opened, delay, gutter, color, disabled, withArrow, arrowSize, position, placement, transition, transitionDuration, zIndex, transitionTimingFunction, width, wrapLines, allowPointerEvents, elementRef, tooltipRef, tooltipId, ...others }: TooltipProps): JSX.Element;
 export declare namespace Tooltip {
@@ -44,0 +52,0 @@ var displayName: string;

dist/mantine-core/src/Tooltip/Tooltip.styles.d.ts

@@ -6,2 +6,3 @@ import { MantineTheme } from "../../../mantine-theme/src";
     gutter: number;
+    arrowSize: number;
 }
@@ -8,0 +9,0 @@ declare const _default: (data?: TooltipStylesProps & {

dist/mantine-core/src/Transition/Transition.d.ts

@@ -5,2 +5,3 @@ import React from 'react';
 export { GroupedTransition } from './GroupedTransition';
+export declare const AVAILABLE_TRANSITIONS: import("./transitions").MantineTransitionName[];
 export type { MantineTransition };
@@ -18,4 +19,12 @@ interface TransitionProps extends Omit<DefaultProps, 'className'> {
     children(styles: React.CSSProperties): React.ReactNode;
+    /** Calls when exit transition ends */
+    onExited?: () => void;
+    /** Calls when exit transition starts */
+    onExit?: () => void;
+    /** Calls when enter transition starts */
+    onEnter?: () => void;
+    /** Calls when enter transition ends */
+    onEntered?: () => void;
 }
-export declare function Transition({ transition, duration, mounted, children, themeOverride, timingFunction, }: TransitionProps): JSX.Element;
+export declare function Transition({ transition, duration, mounted, children, themeOverride, timingFunction, onExit, onEntered, onEnter, onExited, }: TransitionProps): JSX.Element;
 export declare namespace Transition {
@@ -22,0 +31,0 @@ var displayName: string;

dist/mantine-core/src/Transition/transitions.d.ts

@@ -8,5 +8,5 @@ import React from 'react';
 }
-export declare type MantineTransitionName = 'fade' | 'skew-up' | 'skew-down' | 'rotate-up' | 'rotate-down' | 'slide-down' | 'slide-up' | 'slide-right' | 'slide-left';
+export declare type MantineTransitionName = 'fade' | 'skew-up' | 'skew-down' | 'rotate-right' | 'rotate-left' | 'slide-down' | 'slide-up' | 'slide-right' | 'slide-left';
 export declare type MantineTransition = MantineTransitionName | MantineTransitionStyles;
 export declare const transitions: Record<MantineTransitionName, MantineTransitionStyles>;
 //# sourceMappingURL=transitions.d.ts.map

dist/mantine-demos/src/ColorInput/ColorInput.d.ts

@@ -7,6 +7,5 @@ import React from 'react';
     data: string[];
-    transitionDuration?: number;
 }
-export declare function ColorInput({ id, value, placeholder, transitionDuration, onChange, data, }: ColorInputProps): JSX.Element;
+export declare function ColorInput({ id, value, placeholder, onChange, data, required, description, label, error, ...others }: ColorInputProps): JSX.Element;
 export {};
 //# sourceMappingURL=ColorInput.d.ts.map

package.json

 {
   "name": "@mantine/core",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "main": "dist/lib.js",
@@ -10,3 +10,3 @@ "license": "MIT",
   "peerDependencies": {
-    "@mantine/hooks": "0.6.2",
+    "@mantine/hooks": "0.7.0",
     "react": ">=16.8.0",
@@ -13,0 +13,0 @@ "react-dom": ">=16.8.0",

README.md

 # Mantine
 
-![Github banner](https://github.com/mantinedev/mantine/raw/master/github-banner.svg)
+Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.
 
-Build better React applications. Mantine is a customizable component library with focus on accessibility and developer experience.
-
 ## Links
 
 - [Documentation](https://mantine.dev/)
-- [Getting Started](https://mantine.dev/getting-started/)
-- [Examples](https://mantine.dev/examples/)
-- [Contributing](https://mantine.dev/source/)
+- [Examples](https://mantine.dev/pages/examples/)
+- [Components by category](https://mantine.dev/core/getting-started/#components-by-category)
+- [Hooks list](https://mantine.dev/hooks/getting-started/#included-hooks)
+- [Notifications system](https://mantine.dev/others/notifications/)
+- [Contributing](https://mantine.dev/pages/contribute/)
+- [Ask question or give feedback](https://github.com/mantinedev/mantine/discussions)
+- [Sign up for monthly newsletter](https://buttondown.email/mantine)
+- [Follow Mantine on Twitter](https://twitter.com/mantinedev)
 
+## Features
+
+- **Customization** – colors, fonts, shadows and many other parts are customizable to fit your design needs
+- **Dark theme** – mantine supports dark theme by default in all components
+- **Accessibility and usability** – all components follow accessibility best practices and feature full keyboard support
+- **TypeScript** – all @mantine/ scoped packages are built with TypeScript and support it by default
+- **Ready for production** – mantine is well tested and works in all modern browsers
+- **Developer experience** – mantine comes with more than 50 components and 15 hooks to cover you in most cases
+- **No annoying focus ring** – with new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard
+- **React JSS** – take advantage of all react-jss features: automatic critical css extraction during ssr, lazy evaluation, dynamic theming and others
+- **React and Preact** – mantine works flawlessly with preact
+
 ## Installation
 
-To start using Mantine you need to install [`@mantine/core`](https://www.npmjs.com/package/@mantine/core) and its peer dependencies:
-
 ```sh
@@ -43,2 +56,2 @@ # With yarn
 
-All @mantine/ scoped packages, dependencies and peer dependencies have MIT licence.
+All Mantine packages have MIT licence. All Mantine dependencies also have MIT licence, except react-transition-group package which has BSD-3-Clause license.

src/ActionIcon/ActionIcon.styles.ts

@@ -88,3 +88,5 @@ import { createUseStyles } from 'react-jss';
     height: getSizeValue({ size, sizes }),
+    minHeight: getSizeValue({ size, sizes }),
     width: getSizeValue({ size, sizes }),
+    minWidth: getSizeValue({ size, sizes }),
     borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
@@ -91,0 +93,0 @@ padding: 0,

src/index.ts

@@ -14,2 +14,3 @@ export * from '@mantine/theme';
 export { Button, BUTTON_SIZES } from './Button/Button';
+export { Card, CardsGrid } from './Card/Card';
 export { Checkbox, CHECKBOX_SIZES } from './Checkbox/Checkbox';
@@ -23,2 +24,3 @@ export { Code } from './Code/Code';
 export { Hr, HR_SIZES } from './Hr/Hr';
+export { Image } from './Image/Image';
 export { Input } from './Input/Input';
@@ -50,3 +52,3 @@ export { InputWrapper } from './InputWrapper/InputWrapper';
 export { Tooltip } from './Tooltip/Tooltip';
-export { Transition, GroupedTransition } from './Transition/Transition';
+export { Transition, GroupedTransition, AVAILABLE_TRANSITIONS } from './Transition/Transition';
 export { TypographyStylesProvider } from './TypographyStylesProvider/TypographyStylesProvider';

src/Menu/MenuButton/MenuButton.styles.ts

@@ -31,3 +31,3 @@ import { MantineTheme, getFontStyles, getThemeColor } from '@mantine/theme';
     '&:disabled': {
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[5],
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[5],
       cursor: 'not-allowed',
@@ -34,0 +34,0 @@ },

src/Tooltip/Tooltip.styles.ts

@@ -8,2 +8,3 @@ import { createUseStyles } from 'react-jss';
   gutter: number;
+  arrowSize: number;
 }
@@ -60,2 +61,12 @@
     color: theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white,
+    position: 'relative',
+
+    '&$withArrow::before': {
+      display: 'block',
+      position: 'absolute',
+      content: '""',
+      width: 0,
+      height: 0,
+      borderStyle: 'solid',
+    },
   }),
@@ -68,21 +79,109 @@
 
-  top: ({ gutter }: TooltipStylesProps) => ({
+  top: ({ gutter, theme, color, arrowSize }: TooltipStylesProps) => ({
     ...verticalPlacement,
     bottom: `calc(100% + ${gutter}px)`,
+
+    '& $tooltipInner$withArrow::before': {
+      top: '100%',
+      borderWidth: `${arrowSize}px ${arrowSize}px 0 ${arrowSize}px`,
+      borderColor: `${getThemeColor({
+        theme,
+        color,
+        shade: theme.colorScheme === 'dark' ? 3 : 9,
+      })} transparent transparent transparent`,
+    },
+
+    '&$center $tooltipInner$withArrow::before': {
+      left: `calc(50% - ${arrowSize}px)`,
+    },
+
+    '&$start $tooltipInner$withArrow::before': {
+      left: arrowSize,
+    },
+
+    '&$end $tooltipInner$withArrow::before': {
+      right: arrowSize,
+    },
   }),
 
-  bottom: ({ gutter }: TooltipStylesProps) => ({
+  bottom: ({ gutter, theme, color, arrowSize }: TooltipStylesProps) => ({
     ...verticalPlacement,
     top: `calc(100% + ${gutter}px)`,
+
+    '& $tooltipInner$withArrow::before': {
+      bottom: '100%',
+      borderWidth: `0 ${arrowSize}px ${arrowSize}px ${arrowSize}px`,
+      borderColor: `transparent transparent ${getThemeColor({
+        theme,
+        color,
+        shade: theme.colorScheme === 'dark' ? 3 : 9,
+      })} transparent`,
+    },
+
+    '&$center $tooltipInner$withArrow::before': {
+      left: `calc(50% - ${arrowSize}px)`,
+    },
+
+    '&$start $tooltipInner$withArrow::before': {
+      left: arrowSize,
+    },
+
+    '&$end $tooltipInner$withArrow::before': {
+      right: arrowSize,
+    },
   }),
 
-  right: ({ gutter }: TooltipStylesProps) => ({
+  right: ({ gutter, theme, color, arrowSize }: TooltipStylesProps) => ({
     ...horizontalPlacement,
     left: `calc(100% + ${gutter}px)`,
+
+    '& $tooltipInner$withArrow::before': {
+      right: '100%',
+      borderWidth: `${arrowSize}px ${arrowSize}px ${arrowSize}px 0`,
+      borderColor: `transparent ${getThemeColor({
+        theme,
+        color,
+        shade: theme.colorScheme === 'dark' ? 3 : 9,
+      })} transparent transparent`,
+    },
+
+    '&$center $tooltipInner$withArrow::before': {
+      top: `calc(50% - ${arrowSize}px)`,
+    },
+
+    '&$start $tooltipInner$withArrow::before': {
+      top: arrowSize,
+    },
+
+    '&$end $tooltipInner$withArrow::before': {
+      top: arrowSize,
+    },
   }),
 
-  left: ({ gutter }: TooltipStylesProps) => ({
+  left: ({ gutter, theme, color, arrowSize }: TooltipStylesProps) => ({
     ...horizontalPlacement,
     right: `calc(100% + ${gutter}px)`,
+
+    '& $tooltipInner$withArrow::before': {
+      left: '100%',
+      borderWidth: `${arrowSize}px 0 ${arrowSize}px ${arrowSize}px`,
+      borderColor: `transparent transparent transparent ${getThemeColor({
+        theme,
+        color,
+        shade: theme.colorScheme === 'dark' ? 3 : 9,
+      })}`,
+    },
+
+    '&$center $tooltipInner$withArrow::before': {
+      top: `calc(50% - ${arrowSize}px)`,
+    },
+
+    '&$start $tooltipInner$withArrow::before': {
+      top: arrowSize,
+    },
+
+    '&$end $tooltipInner$withArrow::before': {
+      top: arrowSize,
+    },
   }),
 });

src/Transition/transitions.ts

@@ -14,4 +14,4 @@ import React from 'react';
   | 'skew-down'
-  | 'rotate-up'
-  | 'rotate-down'
+  | 'rotate-right'
+  | 'rotate-left'
   | 'slide-down'
@@ -45,3 +45,3 @@ | 'slide-up'
 
-  'rotate-down': {
+  'rotate-left': {
     in: { opacity: 1, transform: 'translateY(0) rotate(0deg)' },
@@ -53,3 +53,3 @@ out: { opacity: 0, transform: 'translateY(20px) rotate(-5deg)' },
 
-  'rotate-up': {
+  'rotate-right': {
     in: { opacity: 1, transform: 'translateY(0) rotate(0deg)' },
@@ -56,0 +56,0 @@ out: { opacity: 0, transform: 'translateY(20px) rotate(5deg)' },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1439742

increased by5.41%

Number of package files

740

increased by5.11%

Lines of code

15249

increased by5.31%

Number of lines in readme file

57

increased by29.55%

No dependency changes