react-miui 0.26.0 → 0.27.1

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

@@ -61,6 +61,7 @@ const StickyHeaderRaw = forwardRef<HTMLDivElement, Props>((props, ref) => {
         </StyledStickyHeader>
     );
 });
+StickyHeaderRaw.displayName = "StickyHeader";
 
 type StickyHeaderType = React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>> & ContentComponent;
 

package/src/components/layout/list/Item.tsx

@@ -145,7 +145,6 @@ const Item: React.FC<StyledItemProps & Props> & SubComponents = ({ href, to, onC
     if (href) {
         return (
             <StyledItem {...props}>
-                {/* eslint-disable-next-line react/jsx-handler-names */}
                 <StyledInnerContainer as={"a"} href={href} onClick={onClick}>{ren}</StyledInnerContainer>
             </StyledItem>
         );
@@ -154,7 +153,6 @@ const Item: React.FC<StyledItemProps & Props> & SubComponents = ({ href, to, onC
     if (onClick) {
         return (
             <StyledItem {...props}>
-                {/* eslint-disable-next-line react/jsx-handler-names */}
                 <StyledInnerContainer as={"button"} onClick={onClick}>{ren}</StyledInnerContainer>
             </StyledItem>
         );

package/src/components/layout/list/Label.tsx

@@ -26,7 +26,7 @@ const Label: React.FC<StyledLabelProps & { sub?: ReactNode }> = ({ sub, ...props
     return (
         <StyledLabel {...props}>
             <div>{props.children}</div>
-            {sub && <SubLabel>{sub}</SubLabel>}
+            {sub != null && <SubLabel>{sub}</SubLabel>}
         </StyledLabel>
     );
 };

package/src/components/ui/drawer/Drawer.tsx

@@ -32,7 +32,6 @@ class Drawer extends Component<Props, State> {
 
     public override componentDidMount() {
         this.timeout = new Timeout(() => {
-            // eslint-disable-next-line react/no-did-mount-set-state
             this.setState({ shouldRenderWhenClosed: false });
         }, RENDER_TIMEOUT);
     }
@@ -85,6 +84,7 @@ class Drawer extends Component<Props, State> {
             <div className={cls} style={style}>
                 {esc}
                 <div className={styles.content}>
+                    {/* eslint-disable-next-line react/jsx-no-leaked-render */}
                     {shouldRender && this.props.children}
                 </div>
             </div>

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

@@ -17,7 +17,8 @@ interface Props {
 
 const Stats: React.FC<Props> = (props) => {
     const list = props.stats.map((s, k) => (
-        <li key={String(k)} className={styles.item}>
+        // eslint-disable-next-line react/no-array-index-key
+        <li key={k} className={styles.item}>
             <span className={styles.value}>{s.value}</span>
             <span className={styles.label}>{s.label}</span>
         </li>

package/src/components/ui/toolButton/ToolButton.stories.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Div } from "../../native";
+
+import { ToolButton } from "./ToolButton";
+
+const meta: Meta = {
+    title: "Components/UI/ToolButton",
+    component: ToolButton,
+    tags: ["autodocs", "ui"],
+    argTypes: {
+        variant: {
+            control: {
+                type: "select",
+            },
+            options: ["default", "secondary", "secondaryOnLight"],
+        },
+    },
+};
+
+type Story = StoryObj<typeof ToolButton>;
+
+const Primary: Story = {
+    args: {
+        children: "Click me",
+        onClick: () => { alert("Clicked"); },
+    },
+    render: args => {
+        return (
+            <Div css={{ background: args.variant === "secondaryOnLight" ? "white" : "$blue5", padding: 50 }}>
+                <ToolButton {...args} />
+            </Div>
+        );
+    },
+};
+export default meta;
+export {
+    Primary,
+};

package/src/components/ui/toolButton/ToolButton.styled.ts

@@ -0,0 +1,56 @@
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme";
+
+/**
+ * Small buttons for toolbars
+ */
+const ToolButton = styled("button", {
+    "height": dimensionsPxToRem(79),
+    "borderRadius": dimensionsPxToRem(10),
+    "fontWeight": "bold",
+    "fontSize": fontPxToRem(23),
+    "display": "flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "paddingInline": dimensionsPxToRem(16),
+    "background": "white",
+    "boxSizing": "border-box",
+    "border": `${dimensionsPxToRem(6)} solid transparent`,
+
+    "color": "$toolButtonText",
+    "&:hover": {
+        background: "#ffffffcc",
+    },
+
+    "variants": {
+        inline: {
+            true: {
+                width: "auto",
+                display: "inline-flex",
+            },
+        },
+        variant: {
+            secondary: {
+                "border": `${dimensionsPxToRem(6)} solid #ffffff42`,
+                "background": "none",
+
+                "&:hover": {
+                    background: "#ffffff22",
+                },
+                "color": "white",
+            },
+            secondaryOnLight: {
+                "border": `${dimensionsPxToRem(6)} solid $border`,
+                "background": "none",
+                "color": "$text",
+
+                "&:hover": {
+                    borderColor: "$buttonBorder",
+                },
+            },
+        },
+    },
+});
+
+export {
+    ToolButton,
+};

package/src/components/ui/toolButton/ToolButton.ts

@@ -0,0 +1 @@
+export { ToolButton } from "./ToolButton.styled";

package/src/index.ts

@@ -38,9 +38,9 @@ export * from "./components/ui/progress/Progress";
 export * from "./components/ui/pop/Pop";
 export * from "./components/ui/pop/PopOption";
 export * from "./components/ui/stats/Stats";
-
 export * from "./components/ui/tabs/Selector";
 export * from "./components/ui/toaster/Toaster";
+export * from "./components/ui/toolButton/ToolButton";
 
 export * from "./components/utils/HandleEsc";
 export * from "./components/utils/If";

package/src/theme.css-reset.ts

@@ -120,6 +120,10 @@ body {
 body {
   font-family: sans-serif;
 }
+
+small {
+  font-size: smaller;
+}
 `;
 
 /**

package/src/theme.ts

@@ -97,6 +97,8 @@ const {
             scrollbarsThumb: "#737373",
             scrollbarsBg: "transparent",
             tableStripedBg: "#fafafa",
+
+            toolButtonText: "#666e80",
         },
     },
     utils: {