reshaped 2.5.3 → 2.5.6

package/components/Toast/ToastProvider.js

@@ -54,7 +54,6 @@ const ToastProvider = (props) => {
     const [data, dispatch] = React.useReducer(toastReducer, defaultContextData.queues);
     const add = React.useCallback((toastProps) => {
         const id = generateId();
-        console.log("add");
         dispatch({ type: "add", payload: { toastProps, id } });
         return id;
     }, []);
@@ -62,7 +61,6 @@ const ToastProvider = (props) => {
         dispatch({ type: "show", payload: { id } });
     }, []);
     const hide = React.useCallback((id) => {
-        console.log("hide");
         dispatch({ type: "hide", payload: { id } });
     }, []);
     const remove = React.useCallback((id) => {

package/components/_private/Flyout/Flyout.module.css

@@ -1 +1 @@
-.content{--rs-flyout-gap:2;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%}.inner{opacity:0;transform:scale(.8);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y)}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1)}.content.--animated .inner{transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-timing-function:var(--rs-easing-decelerate)}
+.content{--rs-flyout-gap:2;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;position:absolute}.inner{opacity:0;transform:scale(.8);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y)}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1)}.content.--animated .inner{transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-timing-function:var(--rs-easing-decelerate)}

package/components/_private/Flyout/FlyoutContent.js

@@ -3,7 +3,7 @@ import React from "react";
 import { classNames } from "../../../utilities/helpers.js";
 import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
 import Portal from "../Portal/index.js";
-import { getClosestScrollableParent } from "../../../utilities/dom.js";
+import { getClosestFlyoutTarget } from "../../../utilities/dom.js";
 import { useFlyoutContext } from "./Flyout.context.js";
 import s from "./Flyout.module.css";
 const FlyoutContent = (props) => {
@@ -38,7 +38,7 @@ const FlyoutContent = (props) => {
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React.createElement("div", { className: contentClassNames, style: Object.assign(Object.assign({}, styles), { "--rs-flyout-gap": contentGap }), ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp },
         React.createElement("div", Object.assign({ role: role }, attributes, { id: id, "aria-modal": triggerType === "click", style: contentAttributes === null || contentAttributes === void 0 ? void 0 : contentAttributes.style, className: innerClassNames }), children)));
-    const closestScrollable = getClosestScrollableParent(triggerElRef.current);
+    const closestScrollable = getClosestFlyoutTarget(triggerElRef.current);
     return (React.createElement(Portal, { targetRef: closestScrollable === document.body ? undefined : { current: closestScrollable } }, content));
 };
 export default FlyoutContent;

package/components/_private/Flyout/tests/Flyout.stories.d.ts

@@ -13,5 +13,6 @@ export declare const modeActionMenuHover: () => React.JSX.Element;
 export declare const modeContentMenuHover: () => React.JSX.Element;
 export declare const testWidthOverflowOnMobile: () => React.JSX.Element;
 export declare const testInsideScrollArea: () => React.JSX.Element;
+export declare const testInsideFixed: () => React.JSX.Element;
 export declare const widthTrigger: () => React.JSX.Element;
 export declare const scopedTheming: () => React.JSX.Element;

package/components/_private/Flyout/tests/Flyout.stories.js

@@ -119,6 +119,29 @@ export const testInsideScrollArea = () => (<Example>
 			<div style={{ height: 2000 }}/>
 		</Example.Item>
 	</Example>);
+export const testInsideFixed = () => (<Example>
+		<Example.Item title="should move the content on page scroll">
+			<View position="fixed" insetTop={20} insetStart={0} insetEnd={0} backgroundColor="neutral-faded" padding={4}>
+				<Flyout triggerType="click" position="bottom-start">
+					<Flyout.Trigger>{(attributes) => <button {...attributes}>Foo</button>}</Flyout.Trigger>
+					<Flyout.Content>
+						<div style={{
+        background: "var(--rs-color-background-elevation-overlay)",
+        padding: "var(--rs-unit-x4)",
+        height: 100,
+        width: 160,
+        borderRadius: "var(--rs-unit-radius-medium)",
+        border: "1px solid var(--rs-color-border-neutral-faded)",
+        boxSizing: "border-box",
+    }}>
+							{"Content"}
+						</div>
+					</Flyout.Content>
+				</Flyout>
+			</View>
+			<div style={{ height: 2000 }}/>
+		</Example.Item>
+	</Example>);
 export const widthTrigger = () => (<Flyout triggerType="click" width="trigger" position="bottom">
 		<Flyout.Trigger>
 			{(attributes) => <button {...attributes}>Trigger with long text</button>}

package/hooks/_private/useFlyout.js

@@ -1,7 +1,7 @@
 import React from "react";
 import useRTL from "../useRTL.js";
 import { onNextFrame } from "../../utilities/animation.js";
-import { getClosestScrollableParent } from "../../utilities/dom.js";
+import { getClosestFlyoutTarget } from "../../utilities/dom.js";
 const SCREEN_OFFSET = 16;
 const topPos = ["top-start", "top", "top-end"];
 const bottomPos = ["bottom-start", "bottom", "bottom-end"];
@@ -138,7 +138,6 @@ const defaultStyles = {
     top: 0,
     width: "auto",
     height: "auto",
-    position: "absolute",
     // z-index doesn't accept strings
     zIndex: "var(--rs-z-index-flyout)",
 };
@@ -146,7 +145,8 @@ const resetStyles = {
     left: 0,
     top: 0,
     position: "fixed",
-    opacity: 0,
+    // opacity: 0,
+    visibility: "hidden",
     animation: "none",
     transition: "none",
     zIndex: "var(--rs-z-index-tooltip)",
@@ -174,7 +174,7 @@ const flyout = (origin, target, options) => {
     }
     document.body.appendChild(targetClone);
     const targetBounds = targetClone.getBoundingClientRect();
-    const scrollableParent = getClosestScrollableParent(origin);
+    const scrollableParent = getClosestFlyoutTarget(origin);
     const boundsDelta = scrollableParent.getBoundingClientRect();
     const parentOffset = {
         top: boundsDelta.top + document.documentElement.scrollTop - scrollableParent.scrollTop,

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": "2.5.3",
+	"version": "2.5.6",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -23,7 +23,7 @@
 	},
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/formaat-design/reshaped"
+		"url": "https://github.com/formaat-design/reshaped-source"
 	},
 	"main": "./index.js",
 	"module": "./index.js",
@@ -62,7 +62,7 @@
 		"build:storybook": "storybook build -c tools/storybook -o dist/app --disable-telemetry",
 		"build:chromatic": "STORYBOOK_ENV=chromatic storybook build -c tools/storybook",
 		"release": "read -p 'Have you updated chromatic tests?' && yarn release:lib && yarn release:source && yarn build:storybook && yarn release:copy",
-		"release:lib": "yarn build && yarn publish",
+		"release:lib": "yarn build && npx semantic-release --no-ci",
 		"release:beta": "yarn build && yarn publish --tag beta",
 		"release:test": "yarn build && yarn pack --filename reshaped-test.tgz",
 		"release:source": "sh ./bin/release-source.sh",
@@ -73,12 +73,16 @@
 		"test:size": "size-limit",
 		"lint": "yarn lint:js && yarn lint:css",
 		"lint:js": "eslint --ext .ts,.tsx src/**/*.ts src/**/*.tsx --quiet --fix",
-		"lint:css": "stylelint 'src/**/*.css'"
+		"lint:css": "stylelint 'src/**/*.css'",
+		"commit": "git-cz"
 	},
 	"browserslist": [
 		"defaults and not IE 11"
 	],
 	"devDependencies": {
+		"@commitlint/cli": "18.2.0",
+		"@commitlint/config-conventional": "18.1.0",
+		"@commitlint/types": "18.1.0",
 		"@size-limit/preset-big-lib": "9.0.0",
 		"@storybook/addon-a11y": "7.4.6",
 		"@storybook/react": "7.4.6",
@@ -86,16 +90,17 @@
 		"@testing-library/jest-dom": "6.1.4",
 		"@testing-library/react": "14.0.0",
 		"@testing-library/user-event": "14.5.1",
-		"@types/events": "3.0.0",
-		"@types/jest": "29.5.5",
-		"@types/node": "20.8.6",
+		"@types/events": "3.0.2",
+		"@types/jest": "29.5.7",
+		"@types/node": "20.8.10",
 		"@types/react": "18.2.28",
 		"@types/react-dom": "18.2.13",
-		"@typescript-eslint/eslint-plugin": "6.7.5",
-		"@typescript-eslint/parser": "6.7.5",
-		"@vitejs/plugin-react": "4.0.4",
-		"chromatic": "7.1.0",
-		"eslint": "8.49.0",
+		"@typescript-eslint/eslint-plugin": "6.9.1",
+		"@typescript-eslint/parser": "6.9.1",
+		"@vitejs/plugin-react": "4.1.0",
+		"chromatic": "7.6.0",
+		"cz-conventional-changelog": "3.3.0",
+		"eslint": "8.52.0",
 		"eslint-config-airbnb-typescript": "17.1.0",
 		"eslint-config-prettier": "9.0.0",
 		"eslint-plugin-import": "2.28.1",
@@ -116,7 +121,7 @@
 		"prettier": "3.0.3",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"resolve-tspaths": "0.8.15",
+		"resolve-tspaths": "0.8.17",
 		"size-limit": "9.0.0",
 		"storybook": "7.4.6",
 		"stylelint": "15.10.3",
@@ -124,8 +129,11 @@
 		"stylelint-config-standard": "34.0.0",
 		"ts-jest": "29.1.1",
 		"typescript": "5.2.2",
-		"vite": "4.4.9",
-		"vite-tsconfig-paths": "4.2.1"
+		"vite": "4.5.0",
+		"vite-tsconfig-paths": "4.2.1",
+		"@semantic-release/changelog": "6.0.3",
+		"@semantic-release/git": "10.0.1",
+		"semantic-release": "22.0.6"
 	},
 	"peerDependencies": {
 		"postcss": "^8.0.0",
@@ -133,7 +141,7 @@
 		"react-dom": "^18.0.0"
 	},
 	"dependencies": {
-		"autoprefixer": "10.4.15",
+		"autoprefixer": "10.4.16",
 		"chalk": "4.1.2",
 		"commander": "11.0.0",
 		"cssnano": "6.0.1",

package/themes/index.d.ts

@@ -1,8 +1,6 @@
 import type * as T from "./_generator/types";
 import type { FullThemeDefinition } from "./_generator/tokens/types";
-export declare const baseThemeDefinition: {
-    [key: string]: unknown;
-};
+export declare const baseThemeDefinition: FullThemeDefinition;
 export declare const generateThemeColors: (options: {
     primary: string;
     critical?: string;

package/utilities/dom.d.ts

@@ -1 +1 @@
-export declare const getClosestScrollableParent: (el: HTMLElement | null) => HTMLElement;
+export declare const getClosestFlyoutTarget: (el: HTMLElement | null) => HTMLElement;

package/utilities/dom.js

@@ -1,9 +1,12 @@
-export const getClosestScrollableParent = (el) => {
-    const overflowY = el && window.getComputedStyle(el).overflowY;
+export const getClosestFlyoutTarget = (el) => {
+    const style = el && window.getComputedStyle(el);
+    const overflowY = style === null || style === void 0 ? void 0 : style.overflowY;
+    const position = style === null || style === void 0 ? void 0 : style.position;
     const isScrollable = overflowY === null || overflowY === void 0 ? void 0 : overflowY.includes("scroll");
+    const isFixed = position === "fixed";
     if (el === document.body || !el)
         return document.body;
-    if (isScrollable && el.scrollHeight > el.clientHeight)
+    if ((isScrollable && el.scrollHeight > el.clientHeight) || isFixed)
         return el;
-    return getClosestScrollableParent(el.parentElement);
+    return getClosestFlyoutTarget(el.parentElement);
 };

package/CHANGELOG.md

@@ -1,7 +0,0 @@
-2.6
-
-- TextArea
-  - Added support for passing `rows` to `inputAttributes`
-  - Updated onFocus and onBlur typings to use correct html element reference
-- TextField
-  - Updated onFocus and onBlur typings to use correct html element reference

package/LICENSE-SOURCE.md

@@ -1,40 +0,0 @@
-# Reshaped Pro License
-
-Reshaped grants you a non-exclusive license and permission to use the Design system.
-When using the Reshaped Pro License it grants the same permissions to all Employees and Contractors of the Licensee to access and use the Design system.
-
-Reshaped Pro license is only including the Design system source code.
-Reshaped package publicly distributed on NPM is using a separate MIT license and is provided together with the package when it's installed.
-
-You can:
-
-- Modify the Design system components to create custom components. Those components are subject to this license.
-- Use the Design system to create unlimited Products for yourself, your company or a Client.
-- Sell products created with the Design system to the Users.
-
-You cannot:
-
-- Share your access to the Design system with other people.
-- Redistribute the Design System under other names.
-- Reimplement the Design System using other frameworks and make it available publicly or for sale.
-- Distribute design kits based on the Design system.
-- Distribute design or development tools for building Products using the Design system components.
-- Distribute page templates or UI libraries based on the Design system.
-- Create any Product that is not the sole property of either you, your company or a Client. For example your Employees and Contractors can't use your company Reshaped Pro license to build their own websites or side projects.
-
-## License Definitions
-
-- Licensee is a person or a business entity who has purchased a License.
-- Design system is the source code and design assets made available to the Licensee after purchasing an Reshaped license.
-- Product is any artifact produced that incorporates the Design system.
-- User is a user of a Product.
-- Employee is a full-time or part-time employee of the Licensee.
-- Contractor is an individual or business entity contracted to perform services for the Licensee.
-- Client is an individual or entity receiving custom professional services directly from the Licensee, produced specifically for that individual or entity.
-
-The ownership of the Design system remains with the Reshaped development team.
-You are required to abide by the licensing terms to avoid termination in case of non-compliance with the agreed terms.
-
----
-
-Got any further questions? [Send us an email](mailto:hello@reshaped.so)