reshaped 3.6.1 → 3.6.3

package/dist/components/Grid/Grid.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames, responsiveVariables, responsivePropDependency } from "../../utilities/props.js";
 import getAlignStyles from "../../styles/align/index.js";
 import getJustifyStyles from "../../styles/justify/index.js";
+import getMaxWidthStyles from "../../styles/maxWidth/index.js";
 import s from "./Grid.module.css";
 const GridItem = (props) => {
     const { area, colStart, colEnd, colSpan, rowStart, rowEnd, rowSpan, children, className, 
@@ -25,19 +26,20 @@ const GridItem = (props) => {
     return (_jsx(TagName, { ...attributes, className: itemClassNames, style: rootVariables, children: children }));
 };
 const Grid = (props) => {
-    const { areas, columns, rows, gap, align, justify, autoColumns, autoRows, autoFlow, children, className, 
+    const { areas, columns, rows, gap, align, justify, autoColumns, autoRows, autoFlow, children, className, maxWidth, 
     // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     as: TagName = "div", attributes, } = props;
     const alignStyles = getAlignStyles(align);
     const justifyStyles = getJustifyStyles(justify);
+    const maxWidthStyles = getMaxWidthStyles(maxWidth);
     const resolvedRows = responsivePropDependency(rows, (value) => typeof value === "number" ? `repeat(${value}, 1fr)` : value);
     const resolvedColumns = responsivePropDependency(columns, (value) => typeof value === "number" ? `repeat(${value}, 1fr)` : value);
     const resolvedAreas = responsivePropDependency(areas, (value) => value
         ? `"${value?.join('" "')}"
 	`
         : undefined);
-    const rootClassNames = classNames(s.root, className);
+    const rootClassNames = classNames(s.root, maxWidthStyles?.classNames, className);
     const rootVariables = {
         ...attributes?.style,
         ...responsiveVariables("--rs-grid-gap", gap),
@@ -49,6 +51,7 @@ const Grid = (props) => {
         ...responsiveVariables("--rs-grid-auto-rows", autoRows),
         ...alignStyles?.variables,
         ...justifyStyles?.variables,
+        ...maxWidthStyles?.variables,
     };
     return (_jsx(TagName, { ...attributes, className: rootClassNames, style: rootVariables, children: children }));
 };

package/dist/components/Grid/Grid.types.d.ts

@@ -12,6 +12,7 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     autoFlow?: G.Responsive<Property.GridAutoFlow>;
     autoColumns?: G.Responsive<Property.GridAutoColumns>;
     autoRows?: G.Responsive<Property.GridAutoRows>;
+    maxWidth?: G.Responsive<string | number>;
     children?: React.ReactNode;
     as?: TagName;
     className?: G.ClassName;

package/dist/components/Grid/tests/Grid.stories.js

@@ -11,7 +11,7 @@ export default {
     },
 };
 export const base = {
-    name: "gap, align, justify",
+    name: "gap, align, justify, maxWidth",
     render: () => (<Example>
 			<Example.Item title="gap: 2">
 				<Grid gap={2} columns={2}>
@@ -40,6 +40,17 @@ export const base = {
 					</View>
 				</Grid>
 			</Example.Item>
+
+			<Example.Item title="maxWidth: 400px">
+				<Grid gap={2} columns="200px 200px" maxWidth="400px">
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+						1
+					</View>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+						2
+					</View>
+				</Grid>
+			</Example.Item>
 		</Example>),
 };
 export const layout = {

package/dist/components/TextField/TextField.js

@@ -23,7 +23,7 @@ const TextFieldSlot = (props) => {
                 if (size === "xlarge")
                     return 6;
                 return 4;
-            }), svg: icon }) }, "icon"));
+            }), svg: icon, autoWidth: true }) }, "icon"));
     const affixNode = affix && (_jsx("label", { className: classNames(s.affix, s[`affix--position-${position}`]), htmlFor: id, children: affix }, "affix"));
     /**
      * Start position:

package/dist/components/TextField/tests/TextField.stories.js

@@ -17,7 +17,7 @@ export default {
 };
 export const value = () => (<Example>
 		<Example.Item title="no value, placeholder">
-			<TextField name="Name" placeholder="Enter your name" icon={IconZap}/>
+			<TextField name="Name" placeholder="Enter your name" icon={IconZap} endIcon={<div>EndIconHere</div>}/>
 		</Example.Item>
 
 		<Example.Item title="value, uncontrolled">

package/dist/components/Tooltip/Tooltip.types.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { FlyoutProps, FlyoutTriggerProps } from "../Flyout";
-export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "contentGap" | "contentShift" | "originCoordinates"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "contentGap" | "contentShift" | "originCoordinates" | "contentAttributes" | "contentClassName"> & {
     children: (attributes: Parameters<FlyoutTriggerProps["children"]>[0] | {}) => React.ReactNode;
     text?: React.ReactNode;
 };

package/dist/hooks/useToggle.js

@@ -9,7 +9,9 @@ const useToggle = (defaultValue) => {
         setActive(false);
     }, []);
     const toggle = React.useCallback((targetValue) => {
-        setActive(targetValue ?? ((active) => !active));
+        // Checking the targetValue type for backwards compatibility if something like handler events
+        // are passed automatically e.g. onClick={toggle}
+        setActive(typeof targetValue === "boolean" ? targetValue : (active) => !active);
     }, []);
     return React.useMemo(() => ({ active, activate, deactivate, toggle }), [activate, deactivate, toggle, active]);
 };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.6.1",
+	"version": "3.6.3",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",