react-miui 0.22.0 → 0.23.1

package/src/components/form/Checkbox.tsx

@@ -22,14 +22,14 @@ const Checkbox: React.FC<Props> = (props) => {
     props.color && (style.color = props.color);
 
     const cls = classnames(props.className, styles.checkbox, {
-        [styles.disabled]: props.disabled,
-        [styles.readOnly]: props.readOnly,
+        [styles.disabled as string]: props.disabled,
+        [styles.readOnly as string]: props.readOnly,
     });
 
     const checkmarkCls = classnames(styles.checkmark, {
-        [styles.checkmarkDisabled]: props.disabled,
-        [styles.checkmarkChecked]: props.checked,
-        [styles.checkmarkReadOnly]: props.readOnly,
+        [styles.checkmarkDisabled as string]: props.disabled,
+        [styles.checkmarkChecked as string]: props.checked,
+        [styles.checkmarkReadOnly as string]: props.readOnly,
     });
 
     return (

package/src/components/form/Label.tsx

@@ -17,7 +17,7 @@ const Label: React.FC<Props> = (props) => {
     const v = makeVariants(props.variant);
 
     const labelCls = classnames(styles.text, {
-        [styles.textBig]: v.includes("big"),
+        [styles.textBig as string]: v.includes("big"),
     });
 
     const label = props.label ? <div className={labelCls}>{props.label}</div> : null;

package/src/components/form/Toggle.tsx

@@ -26,7 +26,7 @@ const Toggle: React.FC<Props> = (props) => {
     }, [props.onChange, props.value]);
 
     const cls = classnames(props.className, styles.container, {
-        [styles.disabled]: props.disabled,
+        [styles.disabled as string]: props.disabled,
     });
 
     return (

package/src/components/form/choice/Choice.tsx

@@ -7,6 +7,7 @@ import type { ObjectValue, Value } from "../../../types/form";
 import { makeVariants, toObjectValue } from "../../../utils/index.js";
 
 import { ChoiceItem } from "./ChoiceItem.js";
+
 import styles from "./Choice.module.scss";
 
 type Variant = "wide" | "left";
@@ -41,8 +42,8 @@ const Choice = <T extends string>(props: Props<T>): ReturnType<React.FC<Props<T>
 
     const cls = classnames(
         styles.choice, props.className,
-        { [styles.wide]: v.includes("wide") },
-        { [styles.left]: v.includes("left") },
+        { [styles.wide as string]: v.includes("wide") },
+        { [styles.left as string]: v.includes("left") },
     );
 
     return <div className={cls}>{opts}</div>;

package/src/components/form/input/Input.tsx

@@ -4,9 +4,10 @@ import type { ObjectValue, Value } from "../../../types/form";
 
 import { Suggestions } from "../Suggestions.js";
 
-import styles from "./Input.module.scss";
 import { StyledInput, StyledWrapper, StyledPrefix, StyledSuffix } from "./Input.styled";
 
+import styles from "./Input.module.scss";
+
 interface CustomProps<T extends string> {
     children?: never;
     prefix?: React.ReactNode;

package/src/components/form/textarea/TextArea.styled.ts

@@ -1,4 +1,5 @@
 import { dimensionsPxToRem, styled } from "../../../theme.js";
+
 import { input, wrapper } from "../input/Input.css";
 import { miuiScrollbars } from "../../../scrollbars.css";
 

package/src/components/layout/card/Card.tsx

@@ -17,7 +17,7 @@ interface Props {
 const Card: React.FC<Props> = (props) => {
     const v = makeVariants(props.variant);
     const cls = classnames(props.className, styles.card, {
-        [styles.margin]: v.includes("margin"),
+        [styles.margin as string]: v.includes("margin"),
     });
 
     // @TODO auto wrap some children in Section

package/src/components/layout/header/Header.tsx

@@ -31,15 +31,15 @@ const Header: React.FC<Props> = (props) => {
     });
 
     const cls = classnames(styles.header, {
-        [styles["header--center"]]: center,
-        [styles["header--toolbar"]]: variant === "toolbar",
-        [styles["header--colored"]]: variant === "colored",
+        [styles["header--center"] as string]: center,
+        [styles["header--toolbar"] as string]: variant === "toolbar",
+        [styles["header--colored"] as string]: variant === "colored",
     }, styles[`header--${position}`], props.className);
 
     let contents = children;
     if (justActions) {
         const mode = position === "top" || position === "bottom" ? "horizontal" : "vertical";
-        contents = <EqualActions className={styles.actions} mode={mode}>{contents}</EqualActions>;
+        contents = <EqualActions className={styles.actions as string} mode={mode}>{contents}</EqualActions>;
     }
 
     let before: ReactNode;

package/src/components/layout/header/HeaderIconAction.tsx

@@ -29,7 +29,7 @@ const HeaderIconAction: React.FC<Props> = (props) => {
 
     let content: ReactNode = icon;
     if (typeof icon === "string") {
-        content = <Icon className={styles.icon} name={icon as ICON} />;
+        content = <Icon className={styles.icon as string} name={icon as ICON} />;
     }
 
     if (to) {

package/src/components/layout/header/StickyHeader.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import classnames from "classnames";
 
 import { Header } from "./Header.js";
+
 import styles from "./StickyHeader.module.scss";
 
 const err = new TypeError("StickyHeader needs two children - Header and StickyHeader.Content");

package/src/components/layout/table/Table.tsx

@@ -18,10 +18,10 @@ const Table: React.FC<React.TableHTMLAttributes<HTMLTableElement> & Props> = (
     const v = makeVariants(variant);
 
     const cls = classnames(className, {
-        [styles.table]: !v.includes("raw"),
-        [styles.striped]: v.includes("striped"),
-        [styles.wide]: v.includes("wide"),
-        [styles.centered]: v.includes("centered"),
+        [styles.table as string]: !v.includes("raw"),
+        [styles.striped as string]: v.includes("striped"),
+        [styles.wide as string]: v.includes("wide"),
+        [styles.centered as string]: v.includes("centered"),
     });
     return <table className={cls} {...props}>{children}</table>;
 };

package/src/components/ui/action/Action.tsx

@@ -61,3 +61,5 @@ const Action: React.FC<Props> = (props) => {
 };
 
 export { Action };
+
+export type { Props as ActionProps };

package/src/components/ui/action/EqualActions.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import classnames from "classnames";
 
 import { Action } from "./Action.js";
+
 import styles from "./EqualActions.module.scss";
 
 interface Props {
@@ -23,7 +24,7 @@ const EqualActions: React.FC<Props> = (props) => {
         "--actions-count": React.Children.count(props.children),
     } as React.CSSProperties;
 
-    const cls = classnames(styles.actions, props.className, { [styles.vertical]: props.mode === "vertical" });
+    const cls = classnames(styles.actions, props.className, { [styles.vertical as string]: props.mode === "vertical" });
 
     return (
         <div className={cls} style={style}>

package/src/components/ui/directionPad/Pad.tsx

@@ -4,6 +4,7 @@ import classnames from "classnames";
 
 import { PadButton as Button } from "./Button.js";
 import { PadMiddle as Middle } from "./Middle.js";
+
 import styles from "./Pad.module.scss";
 
 interface Props {

package/src/components/ui/keyValue/KeyValue.tsx

@@ -25,8 +25,8 @@ const KeyValue: React.FC<Props> = (props) => {
         const isFirstRow = key < cols;
         const isFirstCol = (key % cols) === 0;
         const className = classnames(styles.item, {
-            [styles.itemNotFirstRow]: !isFirstRow,
-            [styles.itemNotFirstCol]: !isFirstCol,
+            [styles.itemNotFirstRow as string]: !isFirstRow,
+            [styles.itemNotFirstCol as string]: !isFirstCol,
         });
 
         const kvKey = value.key != null ? <div className={styles.key}>{value.key}</div> : null;

package/src/components/ui/modal/Modal.tsx

@@ -128,7 +128,6 @@ const Modal: React.FC<Props> & SubComponents = ({
     const chld = React.Children.map(children, (child, index) => {
         if (React.isValidElement(child)) {
             if (child.type === RemovePadding) {
-                // eslint-disable-next-line max-len
                 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
                 const css: ThemeCSS = child.props.css ?? {};
                 if (index === 0 && titleElem == null) {

package/src/components/ui/modal/ModalButton.tsx

@@ -18,7 +18,7 @@ const ModalButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & Prop
     const v = makeVariants(variant);
 
     const cls = classnames(styles.button, {
-        [styles.buttonMain]: v.includes("main"),
+        [styles.buttonMain as string]: v.includes("main"),
     }, className);
 
     return <button {...props} className={cls}>{children}</button>;

package/src/components/ui/pop/Pop.tsx

@@ -6,6 +6,7 @@ import { HandleEsc } from "../../utils/HandleEsc.js";
 
 import { OnButtonClick } from "./OnButtonClick.js";
 import { PopOption } from "./PopOption.js";
+
 import styles from "./Pop.module.scss";
 
 interface Props {

package/src/components/ui/stats/Stats.tsx

@@ -31,7 +31,7 @@ const Stats: React.FC<Props> = (props) => {
     }
 
     const cls = classnames(styles.stats, {
-        [styles["stats-dark"]]: props.variant === "dark",
+        [styles["stats-dark"] as string]: props.variant === "dark",
     }, props.className);
 
     return (

package/src/components/ui/tabs/Item.tsx

@@ -18,7 +18,7 @@ const Item: React.FC<Props> = (props) => {
     }, [props.onClick, props.value.value, props.value.label]);
 
     const cls = classnames(styles.button, {
-        [styles.active]: props.active,
+        [styles.active as string]: props.active,
     });
 
     return <button onClick={handleClick} className={cls} type={"button"}>{props.value.label}</button>;

package/src/components/ui/tabs/Selector.tsx

@@ -7,6 +7,7 @@ import type { Value } from "../../../types/form";
 import { toObjectValue } from "../../../utils/index.js";
 
 import { Item } from "./Item.js";
+
 import styles from "./Selector.module.scss";
 
 interface Props<T extends string> {

package/src/components/ui/toaster/Notification.tsx

@@ -25,7 +25,7 @@ const Notification: React.FC<Props> = (props) => {
     return (
         <div
             className={classnames(styles.toast, {
-                [styles.hide]: props.toast.hide || forceHide,
+                [styles.hide as string]: props.toast.hide || forceHide,
             })}
             key={props.toast.id}
             onTransitionEnd={handleRemove}

package/src/demo/Demo.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 
-import "@icon-park/react/styles/index.css";
-
 import { ToasterProvider } from "../components/ui/toaster/Toaster.js";
 
-import styles from "./Demo.module.scss";
 import { Menu } from "./Menu.js";
 import { Main } from "./Main.js";
 import { componentsMap } from "./componentsMap.js";
 
+import "@icon-park/react/styles/index.css";
+import styles from "./Demo.module.scss";
+
 const Demo: React.FC = (props) => {
     return (
         <ToasterProvider>

package/src/demo/Main.tsx

@@ -7,10 +7,11 @@ import type { TheMap, TheMapItem } from "./componentsMap";
 
 import { Choice } from "../components/form/choice/Choice.js";
 
-import styles from "./Main.module.scss";
 import { safeUseHash } from "./utils/safeUseHash.js";
 import { componentsMap } from "./componentsMap.js";
 
+import styles from "./Main.module.scss";
+
 type BG = "white" | "transparent" | "mobile";
 
 interface ComponentInfo {
@@ -64,8 +65,8 @@ const Main: React.FC = (props) => {
     const Component = info.Component;
 
     const componentCls = classnames(styles.component, {
-        [styles["component--transparent"]]: bg === "transparent",
-        [styles["component--mobile"]]: bg === "mobile",
+        [styles["component--transparent"] as string]: bg === "transparent",
+        [styles["component--mobile"] as string]: bg === "mobile",
     });
 
     return (

package/src/demo/components/form/Choice.tsx

@@ -9,7 +9,7 @@ interface Props {}
 const values: ("Single" | "Multiple words")[] = ["Single", "Multiple words"];
 
 const ChoiceDemo: React.FC<Props> = () => {
-    const [current, handleCurrent] = useState(values[0]);
+    const [current, handleCurrent] = useState(values[0]!);
 
     return (
         <Section vertical={true} horizontal={true}>
@@ -30,7 +30,7 @@ const values2 = [
 ];
 
 const ChoiceDemo2: React.FC<Props> = () => {
-    const [current, handleCurrent] = useState(values2[0].value);
+    const [current, handleCurrent] = useState(values2[0]!.value);
 
     return (
         <>
@@ -40,7 +40,7 @@ const ChoiceDemo2: React.FC<Props> = () => {
                     value={current}
                     name={"rnd"}
                     onChange={handleCurrent}
-                    className={styles.darker}
+                    className={styles.darker as string}
                     variant={"wide"}
                 />
 

package/src/demo/components/layout/header/StickyHeader.tsx

@@ -91,7 +91,7 @@ const StickyColoredBg = () => {
                 variant={"colored"}
                 before={<HeaderIconAction icon={ICON.back} onClick={handleNoop} />}
                 after={"Text"}
-                className={styles.header}
+                className={styles.header as string}
             >
                 Some text
             </Header>

package/src/demo/components/ui/action/Action.tsx

@@ -32,7 +32,7 @@ const ActionDemo: React.FC = () => {
 const ActionsOnLeft = () => {
     return (
         <StickyHeader position={"left"}>
-            <Header center={true} className={styles.header}>
+            <Header center={true} className={styles.header as string}>
                 <Action icon={ICON.checkmark} />
                 <Action icon={ICON.checkmark} />
                 <Action icon={ICON.checkmark} />
@@ -48,7 +48,7 @@ const ActionsOnLeft = () => {
 const ActionsOnBottom = () => {
     return (
         <StickyHeader position={"bottom"}>
-            <Header center={true} className={styles.header}>
+            <Header center={true} className={styles.header as string}>
                 <Action icon={ICON.checkmark} />
                 <Action icon={ICON.checkmark} />
                 <Action icon={ICON.checkmark} />
@@ -64,14 +64,14 @@ const ActionsOnBottom = () => {
 const ActionLabelsOnBottom = () => {
     return (
         <StickyHeader position={"bottom"}>
-            <Header center={true} className={styles.header}>
+            <Header center={true} className={styles.header as string}>
                 <Action icon={ICON.checkmark} label={"Add"} />
                 <Action icon={ICON.checkmark} label={"Delete"} />
                 <Action icon={ICON.checkmark} label={"Share on Web"} />
             </Header>
             <StickyHeader.Content>
                 <StickyHeader position={"top"}>
-                    <Header center={true} className={styles.header}>
+                    <Header center={true} className={styles.header as string}>
                         <Action icon={ICON.checkmark} label={"Add"} />
                         <Action icon={ICON.checkmark} label={"Delete"} />
                         <Action icon={ICON.checkmark} label={"Share"} />

package/src/demo/components/ui/stats/Stats.tsx

@@ -27,7 +27,7 @@ const StatsDemo: React.FC<Props> = (props) => {
             <Header
                 center={true}
                 variant={"colored"}
-                className={styles.header}
+                className={styles.header as string}
             >
                 Battery
             </Header>
@@ -45,7 +45,7 @@ const StatsDarkDemo = () => (
         <Header
             center={true}
             variant={"colored"}
-            className={styles.header2}
+            className={styles.header2 as string}
         >
             Battery
         </Header>

package/src/pages/_app.tsx

@@ -4,10 +4,11 @@ import Head from "next/head";
 
 import type { AppProps } from "next/app";
 
+import { cssReset } from "../theme.css-reset";
+
 import "../global.scss";
 import "../demo-global.scss";
 import "../scrollbars.scss";
-import { cssReset } from "../theme.css-reset";
 
 const MyApp = ({ Component, pageProps }: AppProps) => (
     <>