@onewelcome/react-lib-components 4.3.0 → 5.1.0

package/package.json

@@ -1,11 +1,12 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "4.3.0",
+  "version": "5.1.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
-  "main": "dist/esm/src/index.esm.js",
-  "typings": "dist/esm/src/index.d.ts",
+  "main": "dist/cjs/src/index.cjs.js",
+  "module": "dist/esm/src/index.esm.js",
+  "typings": "dist/cjs/src/index.d.ts",
   "files": [
     "dist",
     "src"
@@ -42,46 +43,45 @@
     "storybook": "storybook dev -p 6006"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": ">=16",
+    "react-dom": ">=16"
   },
   "engines": {
     "node": ">=16"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
+    "@babel/core": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@mdx-js/react": "^3.0.0",
     "@onewelcome/eslint-config-shared-codestyle": "^9.1.0",
     "@onewelcome/storybook-addon-basestyling": "^1.0.0",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@size-limit/preset-small-lib": "^10.0.1",
-    "@storybook/addon-a11y": "^7.5.2",
-    "@storybook/addon-actions": "^7.5.2",
-    "@storybook/addon-docs": "^7.5.2",
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-interactions": "^7.5.2",
-    "@storybook/addon-links": "^7.5.2",
-    "@storybook/blocks": "^7.5.2",
-    "@storybook/components": "^7.5.2",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@storybook/addon-a11y": "^7.5.3",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-docs": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/components": "^7.5.3",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^7.5.2",
-    "@storybook/react": "^7.5.2",
-    "@storybook/react-webpack5": "^7.5.2",
+    "@storybook/manager-api": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.5.2",
+    "@storybook/theming": "^7.5.3",
     "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
-    "@tsconfig/recommended": "^1.0.3",
-    "@types/color-convert": "^2.0.2",
-    "@types/jest": "^29.5.6",
-    "@types/mdx": "^2.0.9",
-    "@types/react": "^18.2.33",
-    "@types/react-dom": "^18.2.14",
+    "@types/jest": "^29.5.8",
+    "@types/mdx": "^2.0.10",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
@@ -107,25 +107,26 @@
     "lint-staged": "^15.0.2",
     "mini-css-extract-plugin": "^2.7.6",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.31",
+    "postcss-modules": "^6.0.0",
     "postcss-url": "^10.1.3",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "react-router": "^6.17.0",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^6.19.0",
     "remark-gfm": "^4.0.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-styles": "^4.0.0",
+    "rollup": "^2.79.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.36.0",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "size-limit": "^10.0.1",
-    "storybook": "^7.5.2",
+    "storybook": "^7.5.3",
     "storybook-addon-pseudo-states": "^2.1.2",
     "style-loader": "^3.3.3",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.2.2"
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.2"
   }
 }

package/src/components/Form/Fieldset/Fieldset.tsx

@@ -41,7 +41,6 @@ export interface Props extends ComponentPropsWithRef<"fieldset"> {
   noPadding?: boolean;
   noBackground?: boolean;
   required?: boolean;
-  error?: boolean;
   disablePropagation?: boolean;
 }
 
@@ -57,7 +56,6 @@ const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> =
     noPadding = false,
     disabled = false,
     required = false,
-    error = false,
     disablePropagation = false,
     ...rest
   }: Props,
@@ -68,10 +66,10 @@ const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> =
       return;
     }
 
-    /* All right, so the issue is that whenever we try to add disabled and error to a component that doesn't accept it,
-    React will throw an error. However, it might occur that we want a component inside of Fieldset because of aesthetic purposes
-    (fieldset applies a sort of container with white background and if we want to display it inside of this container... then yea).
-    So instead we supply an array of components that we want to add the disabled and error prop to and check if child.type equals one of these. */
+    /* All right, so the issue is that whenever we try to add disabled prop to a component that doesn't accept it,
+        React will throw an error. However, it might occur that we want a component inside Fieldset because of aesthetic purposes
+        (fieldset applies a sort of container with white background and if we want to display it inside of this container... then yea).
+        So instead we supply an array of components that we want to add the disabled prop to and check if child.type equals one of these. */
     const allowedComponents: React.ComponentPropsWithRef<any>[] = [
       Input,
       Select,
@@ -91,8 +89,7 @@ const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> =
     return React.Children.map(children, (child: ReactElement) => {
       if (allowedComponents.includes(child.type) && !disablePropagation) {
         return React.cloneElement(child, {
-          disabled: child.props.disabled ?? disabled,
-          error: child.props.error ?? error
+          disabled: child.props.disabled ?? disabled
         });
       }
 
@@ -114,9 +111,7 @@ const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> =
           variant={legendStyle}
           tag="span"
           aria-hidden="true"
-          className={`${classes["legend"]} ${required ? classes["required"] : ""} ${
-            error ? classes["error"] : ""
-          }`}
+          className={`${classes["legend"]} ${required ? classes["required"] : ""}`}
         >
           {legend}
         </Typography>

package/src/components/Form/FormControl/FormControl.tsx

@@ -21,12 +21,11 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   children?: ReactElement | ReactElement[] | null;
   grid?: 1 | 2 | 3;
   align?: "top" | "start" | "middle" | "center" | "bottom" | "end" | "stretch";
-  error?: boolean;
   disabled?: boolean;
 }
 
 const FormControlComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, disabled, error, className, grid, align = "center", ...rest }: Props,
+  { children, disabled, className, grid, align = "center", ...rest }: Props,
   ref
 ) => {
   const renderChildren = () =>
@@ -36,8 +35,7 @@ const FormControlComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       }
 
       const childElement = React.cloneElement(child, {
-        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled,
-        error: child.props.error !== undefined ? child.props.error : error
+        disabled: child.props.disabled !== undefined ? child.props.disabled : disabled
       });
 
       if (grid && grid > 1) {

package/src/components/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.tsx

@@ -57,7 +57,7 @@ const CheckboxWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
     );
 
   return (
-    <Fieldset {...fieldsetProps} error={error} required={rest.required}>
+    <Fieldset {...fieldsetProps} required={rest.required}>
       <Wrapper
         {...rest}
         ref={ref}

package/src/components/Form/Wrapper/RadioWrapper/RadioWrapper.tsx

@@ -72,7 +72,7 @@ const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     );
 
   return (
-    <Fieldset {...fieldsetProps} error={error} disabled={disabled}>
+    <Fieldset {...fieldsetProps} disabled={disabled}>
       <Wrapper
         {...rest}
         ref={ref}

package/src/index.ts

@@ -64,6 +64,7 @@ export type {
 
 /* Utils */
 export { useRepeater } from "./hooks/useRepeater";
+export { usePosition, Placement } from "./hooks/usePosition";
 export { useDebouncedCallback } from "./hooks/useDebouncedCallback";
 export { generateID, debounce, throttle } from "./util/helper";
 

package/src/mixins.module.scss

@@ -174,7 +174,7 @@
   font-size: var(--button-font-size);
   line-height: var(--button-font-size);
   margin: 0;
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 0.75rem;
   min-height: 2.5rem;
   cursor: pointer;
 

package/dist/esm/node_modules/rollup-plugin-styles/dist/runtime/inject-css.esm.js

@@ -1,2 +0,0 @@
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c()}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}export{n as default};
-//# sourceMappingURL=inject-css.esm.js.map

package/dist/esm/node_modules/rollup-plugin-styles/dist/runtime/inject-css.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inject-css.esm.js","sources":["../../../../../../node_modules/rollup-plugin-styles/dist/runtime/inject-css.js"],"sourcesContent":["var e=[],t=[];function n(n,r){if(n&&\"undefined\"!=typeof document){var a,s=!0===r.prepend?\"prepend\":\"append\",d=!0===r.singleTag,i=\"string\"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName(\"head\")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c()}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n))}function c(){var e=document.createElement(\"style\");if(e.setAttribute(\"type\",\"text/css\"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a=\"prepend\"===s?\"afterbegin\":\"beforeend\";return i.insertAdjacentElement(a,e),e}}export{n as default};\n"],"names":["e","t","n","r","document","a","s","prepend","d","singleTag","i","container","querySelector","getElementsByTagName","u","indexOf","push","c","charCodeAt","substring","styleSheet","cssText","appendChild","createTextNode","createElement","setAttribute","attributes","Object","keys","length","insertAdjacentElement"],"mappings":"AAAA,IAAIA,EAAE,GAAGC,EAAE,GAAG,SAASC,EAAEA,EAAEC,GAAG,GAAGD,GAAG,oBAAoBE,SAAS,CAAC,IAAIC,EAAEC,GAAE,IAAKH,EAAEI,QAAQ,UAAU,SAASC,GAAE,IAAKL,EAAEM,UAAUC,EAAE,iBAAiBP,EAAEQ,UAAUP,SAASQ,cAAcT,EAAEQ,WAAWP,SAASS,qBAAqB,QAAQ,GAAG,GAAGL,EAAE,CAAC,IAAIM,EAAEd,EAAEe,QAAQL,IAAI,IAAII,IAAIA,EAAEd,EAAEgB,KAAKN,GAAG,EAAET,EAAEa,GAAG,CAAE,GAAET,EAAEJ,EAAEa,IAAIb,EAAEa,GAAGR,GAAGL,EAAEa,GAAGR,GAAGL,EAAEa,GAAGR,GAAGW,GAAG,MAAMZ,EAAEY,IAAI,QAAQf,EAAEgB,WAAW,KAAKhB,EAAEA,EAAEiB,UAAU,IAAId,EAAEe,WAAWf,EAAEe,WAAWC,SAASnB,EAAEG,EAAEiB,YAAYlB,SAASmB,eAAerB,GAAG,CAAC,SAASe,IAAI,IAAIjB,EAAEI,SAASoB,cAAc,SAAS,GAAGxB,EAAEyB,aAAa,OAAO,YAAYtB,EAAEuB,WAAW,IAAI,IAAIzB,EAAE0B,OAAOC,KAAKzB,EAAEuB,YAAYxB,EAAE,EAAEA,EAAED,EAAE4B,OAAO3B,IAAIF,EAAEyB,aAAaxB,EAAEC,GAAGC,EAAEuB,WAAWzB,EAAEC,KAAK,IAAIG,EAAE,YAAYC,EAAE,aAAa,YAAY,OAAOI,EAAEoB,sBAAsBzB,EAAEL,GAAGA,CAAC,CAAC"}