@tidbcloud/uikit 2.0.0-beta.63 → 2.0.0-beta.65

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.65
+
+### Patch Changes
+
+- add MediaQuery
+
+## 2.0.0-beta.64
+
+### Patch Changes
+
+- fix phone input filter conflict
+
 ## 2.0.0-beta.63
 
 ### Patch Changes

package/dist/biz/Form/PhoneInput/index.cjs

@@ -87,7 +87,7 @@ const FormPhoneInputV2 = ({
   ...rest
 }) => {
   const { watch, formState, getFieldState } = reactHookForm.useFormContext();
-  const { filter: onFilter, ...restProps } = selectProps;
+  const { filterData: onFilter, ...restProps } = selectProps;
   const { error: countryError } = getFieldState(countryKey, formState);
   const { error: phoneError } = getFieldState(phoneKey, formState);
   const country = watch(countryKey, "");

package/dist/biz/Form/PhoneInput/index.d.cts

@@ -17,7 +17,7 @@ export interface FormPhoneInputV2Props extends Omit<PhoneInputProps, 'onSelect'>
     countryRules?: RegisterOptions;
     onSelect?: (value: string, country: CountryData | {}) => void;
     selectProps: Omit<SelectProps, 'data'> & {
-        filter?: (data: {
+        filterData?: (data: {
             value: string;
             label: string;
         }, index: number, array: {

package/dist/biz/Form/PhoneInput/index.d.ts

@@ -17,7 +17,7 @@ export interface FormPhoneInputV2Props extends Omit<PhoneInputProps, 'onSelect'>
     countryRules?: RegisterOptions;
     onSelect?: (value: string, country: CountryData | {}) => void;
     selectProps: Omit<SelectProps, 'data'> & {
-        filter?: (data: {
+        filterData?: (data: {
             value: string;
             label: string;
         }, index: number, array: {

package/dist/biz/Form/PhoneInput/index.js

@@ -85,7 +85,7 @@ const FormPhoneInputV2 = ({
   ...rest
 }) => {
   const { watch, formState, getFieldState } = useFormContext();
-  const { filter: onFilter, ...restProps } = selectProps;
+  const { filterData: onFilter, ...restProps } = selectProps;
   const { error: countryError } = getFieldState(countryKey, formState);
   const { error: phoneError } = getFieldState(phoneKey, formState);
   const country = watch(countryKey, "");

package/dist/primitive/MediaQuery/index.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const styles = require("./styles.cjs");
+const useProps = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/MantineProvider/use-props/use-props.cjs");
+function MediaQuery(props) {
+  var _a;
+  const { children, smallerThan, largerThan, query, styles: styles$1, className } = useProps.useProps("MediaQuery", {}, props);
+  const { classes, cx } = styles.default({ smallerThan, largerThan, query, styles: styles$1 });
+  if (children === void 0) {
+    return void 0;
+  }
+  const child = React.Children.only(children);
+  if (typeof child === "object" && child !== null && "props" in child) {
+    return React.cloneElement(child, {
+      className: cx(classes.media, (_a = child.props) == null ? void 0 : _a.className, className)
+    });
+  }
+  return child;
+}
+exports.MediaQuery = MediaQuery;

package/dist/primitive/MediaQuery/index.d.cts

@@ -0,0 +1,18 @@
+import { MantineTheme } from '@mantine/core';
+import { CSSObject } from '@mantine/emotion';
+import { default as React } from 'react';
+import { MediaQueryNumberSize } from './styles.js';
+export interface MediaQueryProps {
+    className?: string;
+    /** Child that should be shown at given breakpoint, it must accept className prop */
+    children: React.ReactNode;
+    /** Styles applied to child when viewport is smaller than given breakpoint */
+    smallerThan?: MediaQueryNumberSize;
+    /** Styles applied to child when viewport is larger than given breakpoint */
+    largerThan?: MediaQueryNumberSize;
+    /** Any other media query */
+    query?: string;
+    /** Styles applied to child when breakpoint matches */
+    styles: CSSObject | ((theme: MantineTheme) => CSSObject);
+}
+export declare function MediaQuery(props: MediaQueryProps): string | number | boolean | Iterable<React.ReactNode> | React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;

package/dist/primitive/MediaQuery/index.d.ts

@@ -0,0 +1,18 @@
+import { MantineTheme } from '@mantine/core';
+import { CSSObject } from '@mantine/emotion';
+import { default as React } from 'react';
+import { MediaQueryNumberSize } from './styles.js';
+export interface MediaQueryProps {
+    className?: string;
+    /** Child that should be shown at given breakpoint, it must accept className prop */
+    children: React.ReactNode;
+    /** Styles applied to child when viewport is smaller than given breakpoint */
+    smallerThan?: MediaQueryNumberSize;
+    /** Styles applied to child when viewport is larger than given breakpoint */
+    largerThan?: MediaQueryNumberSize;
+    /** Any other media query */
+    query?: string;
+    /** Styles applied to child when breakpoint matches */
+    styles: CSSObject | ((theme: MantineTheme) => CSSObject);
+}
+export declare function MediaQuery(props: MediaQueryProps): string | number | boolean | Iterable<React.ReactNode> | React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;

package/dist/primitive/MediaQuery/index.js

@@ -0,0 +1,21 @@
+import React__default, { Children } from "react";
+import useStyles from "./styles.js";
+import { useProps } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/MantineProvider/use-props/use-props.js";
+function MediaQuery(props) {
+  var _a;
+  const { children, smallerThan, largerThan, query, styles, className } = useProps("MediaQuery", {}, props);
+  const { classes, cx } = useStyles({ smallerThan, largerThan, query, styles });
+  if (children === void 0) {
+    return void 0;
+  }
+  const child = Children.only(children);
+  if (typeof child === "object" && child !== null && "props" in child) {
+    return React__default.cloneElement(child, {
+      className: cx(classes.media, (_a = child.props) == null ? void 0 : _a.className, className)
+    });
+  }
+  return child;
+}
+export {
+  MediaQuery
+};

package/dist/primitive/MediaQuery/styles.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const createStyles = require("../../node_modules/.pnpm/@mantine_emotion@7.13.2_@emotion_cache@11.13.1_@emotion_react@11.13.3_@types_react@18.3.11_re_v5yho7ri2fgh4vhey6nnpomqsu/node_modules/@mantine/emotion/esm/create-styles.cjs");
+const rem = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/utils/units-converters/rem.cjs");
+const px = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/utils/units-converters/px.cjs");
+function getBreakpointValue(theme, breakpoint) {
+  return breakpoint in theme.breakpoints && typeof breakpoint !== "number" ? px.px(theme.breakpoints[breakpoint]) : px.px(breakpoint);
+}
+const useStyles = createStyles.createStyles((theme, { smallerThan, largerThan, query, styles }, u) => {
+  const media = {};
+  const _styles = typeof styles === "function" ? styles(theme) : styles;
+  if (largerThan !== void 0 && smallerThan !== void 0) {
+    media[`@media (min-width: ${rem.em(getBreakpointValue(theme, largerThan))}) and (max-width: ${rem.em(
+      getBreakpointValue(theme, smallerThan) - 0.1
+    )})`] = _styles;
+  } else {
+    if (largerThan !== void 0) {
+      media[u.largerThan(largerThan)] = _styles;
+    }
+    if (smallerThan !== void 0) {
+      media[u.smallerThan(smallerThan)] = _styles;
+    }
+  }
+  if (query) {
+    media[`@media ${query}`] = _styles;
+  }
+  return { media };
+});
+exports.default = useStyles;

package/dist/primitive/MediaQuery/styles.d.cts

@@ -0,0 +1,15 @@
+import { MantineTheme, MantineSize } from '@mantine/core';
+import { CSSObject } from '@mantine/emotion';
+export type MediaQueryNumberSize = MantineSize | number | (string & {});
+export interface MediaQueryStylesParams {
+    smallerThan?: MediaQueryNumberSize;
+    largerThan?: MediaQueryNumberSize;
+    styles?: CSSObject | ((theme: MantineTheme) => CSSObject);
+    query?: string;
+}
+declare const _default: (params: MediaQueryStylesParams) => {
+    classes: Record<"media", string>;
+    cx: (...args: any) => string;
+    theme: MantineTheme;
+};
+export default _default;

package/dist/primitive/MediaQuery/styles.d.ts

@@ -0,0 +1,15 @@
+import { MantineTheme, MantineSize } from '@mantine/core';
+import { CSSObject } from '@mantine/emotion';
+export type MediaQueryNumberSize = MantineSize | number | (string & {});
+export interface MediaQueryStylesParams {
+    smallerThan?: MediaQueryNumberSize;
+    largerThan?: MediaQueryNumberSize;
+    styles?: CSSObject | ((theme: MantineTheme) => CSSObject);
+    query?: string;
+}
+declare const _default: (params: MediaQueryStylesParams) => {
+    classes: Record<"media", string>;
+    cx: (...args: any) => string;
+    theme: MantineTheme;
+};
+export default _default;

package/dist/primitive/MediaQuery/styles.js

@@ -0,0 +1,29 @@
+import { createStyles } from "../../node_modules/.pnpm/@mantine_emotion@7.13.2_@emotion_cache@11.13.1_@emotion_react@11.13.3_@types_react@18.3.11_re_v5yho7ri2fgh4vhey6nnpomqsu/node_modules/@mantine/emotion/esm/create-styles.js";
+import { em } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/utils/units-converters/rem.js";
+import { px } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/utils/units-converters/px.js";
+function getBreakpointValue(theme, breakpoint) {
+  return breakpoint in theme.breakpoints && typeof breakpoint !== "number" ? px(theme.breakpoints[breakpoint]) : px(breakpoint);
+}
+const useStyles = createStyles((theme, { smallerThan, largerThan, query, styles }, u) => {
+  const media = {};
+  const _styles = typeof styles === "function" ? styles(theme) : styles;
+  if (largerThan !== void 0 && smallerThan !== void 0) {
+    media[`@media (min-width: ${em(getBreakpointValue(theme, largerThan))}) and (max-width: ${em(
+      getBreakpointValue(theme, smallerThan) - 0.1
+    )})`] = _styles;
+  } else {
+    if (largerThan !== void 0) {
+      media[u.largerThan(largerThan)] = _styles;
+    }
+    if (smallerThan !== void 0) {
+      media[u.smallerThan(smallerThan)] = _styles;
+    }
+  }
+  if (query) {
+    media[`@media ${query}`] = _styles;
+  }
+  return { media };
+});
+export {
+  useStyles as default
+};

package/dist/primitive/index.cjs

@@ -10,6 +10,7 @@ const useColorScheme = require("../hooks/useColorScheme.cjs");
 const index = require("../node_modules/.pnpm/@mantine_dropzone@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine__qr3rnaubensmzqdmx5ctws3cmy/node_modules/@mantine/dropzone/esm/index.cjs");
 const index$1 = require("./notifier/index.cjs");
 const index$2 = require("./Typography/index.cjs");
+const index$3 = require("./MediaQuery/index.cjs");
 const AppShell = require("../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/AppShell/AppShell.cjs");
 const AspectRatio = require("../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/AspectRatio/AspectRatio.cjs");
 const Center = require("../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Center/Center.cjs");
@@ -136,6 +137,7 @@ exports.Dropzone = index.Dropzone;
 exports.notifier = index$1.notifier;
 exports.TYPOGRAPHY_STYLES_MAP = index$2.TYPOGRAPHY_STYLES_MAP;
 exports.Typography = index$2.Typography;
+exports.MediaQuery = index$3.MediaQuery;
 exports.AppShell = AppShell.AppShell;
 exports.AspectRatio = AspectRatio.AspectRatio;
 exports.Center = Center.Center;

package/dist/primitive/index.d.cts

@@ -43,3 +43,4 @@ export type { CalendarProps, CalendarBaseProps, DatePickerType, DatePickerProps,
 export { TextInput, type TextInputProps } from './TextInput/index.js';
 export { notifier } from './notifier/index.js';
 export { Typography, TYPOGRAPHY_STYLES_MAP, type TypographyProps } from './Typography/index.js';
+export { MediaQuery, type MediaQueryProps } from './MediaQuery/index.js';

package/dist/primitive/index.d.ts

@@ -43,3 +43,4 @@ export type { CalendarProps, CalendarBaseProps, DatePickerType, DatePickerProps,
 export { TextInput, type TextInputProps } from './TextInput/index.js';
 export { notifier } from './notifier/index.js';
 export { Typography, TYPOGRAPHY_STYLES_MAP, type TypographyProps } from './Typography/index.js';
+export { MediaQuery, type MediaQueryProps } from './MediaQuery/index.js';

package/dist/primitive/index.js

@@ -8,6 +8,7 @@ import { useColorScheme } from "../hooks/useColorScheme.js";
 import { Dropzone } from "../node_modules/.pnpm/@mantine_dropzone@7.13.2_@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine__qr3rnaubensmzqdmx5ctws3cmy/node_modules/@mantine/dropzone/esm/index.js";
 import { notifier } from "./notifier/index.js";
 import { TYPOGRAPHY_STYLES_MAP, Typography } from "./Typography/index.js";
+import { MediaQuery } from "./MediaQuery/index.js";
 import { AppShell } from "../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/AppShell/AppShell.js";
 import { AspectRatio } from "../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/AspectRatio/AspectRatio.js";
 import { Center } from "../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Center/Center.js";
@@ -196,6 +197,7 @@ export {
   MS_POWERPOINT_MIME_TYPE,
   MS_WORD_MIME_TYPE,
   Mark,
+  MediaQuery,
   Menu,
   Modal,
   ModalsProvider,

package/dist/theme/theme.cjs

@@ -313,8 +313,7 @@ const theme = createTheme.createTheme({
             },
             "&:hover": {
               color: themeColor(theme2, "carbon", 9)
-            },
-            "&:focus": { outlineColor: "transparent" }
+            }
           }
         };
       }

package/dist/theme/theme.js

@@ -311,8 +311,7 @@ const theme = createTheme({
             },
             "&:hover": {
               color: themeColor(theme2, "carbon", 9)
-            },
-            "&:focus": { outlineColor: "transparent" }
+            }
           }
         };
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tidbcloud/uikit",
-  "version": "2.0.0-beta.63",
+  "version": "2.0.0-beta.65",
   "description": "tidbcloud uikit",
   "type": "module",
   "main": "dist/primitive/index.cjs",