@obosbbl/grunnmuren-react 2.0.0-canary.3 → 2.0.0-canary.4

package/README.md

@@ -50,6 +50,42 @@ export default function RootLayout({
 
 See the [RAC internationalization docs](https://react-spectrum.adobe.com/react-aria/internationalization.html) for more information.
 
+### Optimize bundle size by removing unused locales
+
+React Aria Components has built in support for over 30 languages, most of which will be unused in your application. To optimize your applications bundle size, it is recommended to use React Aria's build plugin to remove all the unused locales. Here is a quick example for Next.js:
+
+#### Install
+
+```sh
+# npm
+npm install @react-aria/optimize-locales-plugin --save-dev
+
+# pnpm
+pnpm add -D @react-aria/optimize-locales-plugin
+```
+
+#### Configuration
+
+```js
+// next.config.js
+const optimizeLocales = require('@react-aria/optimize-locales-plugin');
+
+module.exports = {
+  webpack(config) {
+    config.plugins.push(
+      optimizeLocales.webpack({
+        // If you have a multitenant app, include both Norwegian and Swedish
+        // If your app only serves one language, adjust accordingly
+        locales: ['nb-NO', 'sv-SE'],
+      }),
+    );
+    return config;
+  },
+};
+```
+
+The plugin works with several different bundlers. See [React Aria's bundle size optimization docs](https://react-spectrum.adobe.com/react-aria/internationalization.html#optimizing-bundle-size) for more information.
+
 ## Usage
 
 Before you start using the components you need to configure the [Tailwind preset](../tailwind/). Remember to add this package to the content scan.

package/dist/index.d.mts

@@ -1,7 +1,8 @@
 import { CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ComboBoxProps, ListBoxItemProps, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, SelectProps as SelectProps$1, TextFieldProps as TextFieldProps$1 } from 'react-aria-components';
 export { ListBoxItemProps as ComboboxItemProps, Form, I18nProvider, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { VariantProps } from 'cva';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
@@ -80,7 +81,7 @@ type ButtonProps = VariantProps<typeof buttonVariants> & {
     isLoading?: boolean;
     style?: React.CSSProperties;
 } & ButtonOrLinkProps;
-declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
+declare const _Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
 type CheckboxProps = {
     children: React.ReactNode;
@@ -93,7 +94,7 @@ type CheckboxProps = {
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
 } & Omit<CheckboxProps$1, 'isDisabled' | 'style' | 'children' | 'isIndeterminate' | 'isReadOnly'>;
-declare function Checkbox(props: CheckboxProps): react_jsx_runtime.JSX.Element;
+declare const _Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & react.RefAttributes<HTMLLabelElement>>;
 
 type CheckboxGroupProps = {
     children: React.ReactNode;
@@ -108,7 +109,7 @@ type CheckboxGroupProps = {
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
 } & Omit<CheckboxGroupProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'orientation'>;
-declare function CheckboxGroup(props: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+declare const _CheckboxGroup: react.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
 type ComboboxProps<T extends object> = {
     children: React.ReactNode;
@@ -130,8 +131,8 @@ type ComboboxProps<T extends object> = {
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
 } & Omit<ComboBoxProps<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
-declare function Combobox<T extends object>(props: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
 declare const ComboboxItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
+declare const _Combobox: react.ForwardRefExoticComponent<Omit<ComboboxProps<object>, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
 type RadioGroupProps = {
     children: React.ReactNode;
@@ -146,7 +147,7 @@ type RadioGroupProps = {
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
 } & Omit<RadioGroupProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'orientation'>;
-declare function RadioGroup(props: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare const _RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
 type RadioProps = {
     children: React.ReactNode;
@@ -157,7 +158,7 @@ type RadioProps = {
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
 } & Omit<RadioProps$1, 'isDisabled' | 'children' | 'style'>;
-declare function Radio(props: RadioProps): react_jsx_runtime.JSX.Element;
+declare const _Radio: react.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & react.RefAttributes<HTMLLabelElement>>;
 
 type SelectProps<T extends object> = {
     children: React.ReactNode;
@@ -174,8 +175,8 @@ type SelectProps<T extends object> = {
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
 } & Omit<SelectProps$1<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
-declare function Select<T extends object>(props: SelectProps<T>): react_jsx_runtime.JSX.Element;
 declare const SelectItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
+declare const _Select: react.ForwardRefExoticComponent<Omit<SelectProps<object>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 type TextAreaProps = {
     /** Additional CSS className for the element. */
@@ -196,7 +197,7 @@ type TextAreaProps = {
      */
     rows?: number;
 } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
-declare function TextArea(props: TextAreaProps): react_jsx_runtime.JSX.Element;
+declare const _TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
 
 type TextFieldProps = {
     /** Additional CSS className for the element. */
@@ -223,6 +224,6 @@ type TextFieldProps = {
     /** Add a divider between the left/right addons and the input */
     withAddonDivider?: boolean;
 } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
-declare function TextField(props: TextFieldProps): react_jsx_runtime.JSX.Element;
+declare const _TextField: react.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
-export { Button, type ButtonProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Combobox, ComboboxItem, type ComboboxProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, SelectItem, type SelectProps, TextArea, type TextAreaProps, TextField, type TextFieldProps };
+export { _Button as Button, type ButtonProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ComboboxItem, type ComboboxProps, _Radio as Radio, _RadioGroup as RadioGroup, type RadioGroupProps, type RadioProps, _Select as Select, SelectItem, type SelectProps, _TextArea as TextArea, type TextAreaProps, _TextField as TextField, type TextFieldProps };

package/dist/index.mjs

@@ -1,9 +1,10 @@
-import { Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, CheckboxGroup as CheckboxGroup$1, FieldError, ComboBox, Group, Input, Button as Button$1, Popover, ListBox, ListBoxItem, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
+import { Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, CheckboxGroup as CheckboxGroup$1, FieldError, ListBoxItem, ComboBox, Group, Input, Button as Button$1, Popover, ListBox, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
 export { Form, I18nProvider } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useRef, useState, useId } from 'react';
+import { forwardRef, useState, useRef, useId } from 'react';
 import { cva, cx, compose } from 'cva';
 import { LoadingSpinner, Check, ChevronDown } from '@obosbbl/grunnmuren-icons-react';
+import { mergeRefs } from '@react-aria/utils';
 import { u as useClientLayoutEffect } from './useClientLayoutEffect-client-2_5nawgR.js';
 
 /**
@@ -89,15 +90,15 @@ import { u as useClientLayoutEffect } from './useClientLayoutEffect-client-2_5na
         isIconOnly: false
     }
 });
-function Button(props) {
+function Button(props, forwardedRef) {
     const { children, className, color, isIconOnly, isLoading, variant, style, ...restProps } = props;
-    // TODO: Merge refs when we use RAC
-    const buttonRef = useRef(null);
     const [widthOverride, setWidthOverride] = useState();
+    const ownRef = useRef(null);
+    const ref = mergeRefs(ownRef, forwardedRef);
     useClientLayoutEffect(()=>{
         if (isLoading) {
             const requestID = window.requestAnimationFrame(()=>{
-                setWidthOverride(buttonRef?.current?.getBoundingClientRect()?.width);
+                setWidthOverride(ownRef.current?.getBoundingClientRect()?.width);
             });
             return ()=>{
                 setWidthOverride(undefined);
@@ -123,7 +124,7 @@ function Button(props) {
             isIconOnly,
             variant
         }),
-        ref: buttonRef,
+        ref: ref,
         style: {
             ...style,
             width: widthOverride
@@ -135,6 +136,7 @@ function Button(props) {
         }) : children
     }));
 }
+const _Button = /*#__PURE__*/ forwardRef(Button);
 
 const formField = cx('group flex flex-col gap-2');
 const formFieldError = cx('w-fit rounded-sm bg-red-light px-2 py-1 text-sm leading-6 text-red');
@@ -216,7 +218,7 @@ function CheckmarkBox() {
         })
     });
 }
-function Checkbox(props) {
+function Checkbox(props, ref) {
     const { children, className, description, errorMessage, isInvalid: _isInvalid, ...restProps } = props;
     const id = useId();
     const descriptionId = 'desc' + id;
@@ -233,6 +235,7 @@ function Checkbox(props) {
                     ...restProps,
                     className: cx(className, defaultClasses$1),
                     isInvalid: isInvalid,
+                    ref: ref,
                     children: [
                         /*#__PURE__*/ jsx("div", {
                             className: "absolute -left-2.5 top-0 z-10 h-11 w-11"
@@ -255,6 +258,7 @@ function Checkbox(props) {
         })
     });
 }
+const _Checkbox = /*#__PURE__*/ forwardRef(Checkbox);
 
 function Label(props) {
     const { children, className, ...restProps } = props;
@@ -265,7 +269,7 @@ function Label(props) {
     });
 }
 
-function CheckboxGroup(props) {
+function CheckboxGroup(props, ref) {
     const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
     const isInvalid = _isInvalid || errorMessage != null;
     return /*#__PURE__*/ jsxs(CheckboxGroup$1, {
@@ -273,6 +277,7 @@ function CheckboxGroup(props) {
         className: cx(className, 'flex flex-col gap-2'),
         isInvalid: isInvalid,
         isRequired: isRequired,
+        ref: ref,
         children: [
             label && /*#__PURE__*/ jsx(Label, {
                 children: label
@@ -287,6 +292,7 @@ function CheckboxGroup(props) {
         ]
     });
 }
+const _CheckboxGroup = /*#__PURE__*/ forwardRef(CheckboxGroup);
 
 /**
  * This component handles renders a custom error message (if provided), otherwise it falls back to the browser's native validation.
@@ -299,7 +305,7 @@ function CheckboxGroup(props) {
     });
 }
 
-function Combobox(props) {
+function Combobox(props, ref) {
     const { className, children, description, errorMessage, isLoading, label, isInvalid: _isInvalid, ...restProps } = props;
     const isInvalid = _isInvalid || errorMessage != null;
     return /*#__PURE__*/ jsxs(ComboBox, {
@@ -319,7 +325,8 @@ function Combobox(props) {
                     /*#__PURE__*/ jsx(Input, {
                         className: input({
                             isGrouped: true
-                        })
+                        }),
+                        ref: ref
                     }),
                     /*#__PURE__*/ jsx(Button$1, {
                         children: isLoading ? /*#__PURE__*/ jsx(LoadingSpinner, {
@@ -370,8 +377,9 @@ const ComboboxItem = (props)=>{
             })
     });
 };
+const _Combobox = /*#__PURE__*/ forwardRef(Combobox);
 
-function RadioGroup(props) {
+function RadioGroup(props, ref) {
     const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
     const isInvalid = _isInvalid || errorMessage != null;
     return /*#__PURE__*/ jsxs(RadioGroup$1, {
@@ -379,6 +387,7 @@ function RadioGroup(props) {
         className: cx(className, 'flex flex-col gap-2'),
         isInvalid: isInvalid,
         isRequired: isRequired,
+        ref: ref,
         children: [
             label && /*#__PURE__*/ jsx(Label, {
                 children: label
@@ -393,6 +402,7 @@ function RadioGroup(props) {
         ]
     });
 }
+const _RadioGroup = /*#__PURE__*/ forwardRef(RadioGroup);
 
 const defaultClasses = cx([
     'relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 leading-7',
@@ -413,11 +423,12 @@ const defaultClasses = cx([
     // so we use an inner outline to artifically pad the border
     'data-[invalid]:before:outline-solid data-[invalid]:before:border-red data-[invalid]:data-[selected]:before:!bg-red data-[invalid]:before:outline data-[invalid]:before:outline-[3px] data-[invalid]:before:outline-offset-[-3px] data-[invalid]:before:outline-red'
 ]);
-function Radio(props) {
+function Radio(props, ref) {
     const { children, className, description, ...restProps } = props;
     return /*#__PURE__*/ jsxs(Radio$1, {
         ...restProps,
         className: cx(className, defaultClasses),
+        ref: ref,
         children: [
             /*#__PURE__*/ jsx("div", {
                 className: "absolute -left-2.5 top-0 z-10 h-11 w-11 "
@@ -434,8 +445,9 @@ function Radio(props) {
         ]
     });
 }
+const _Radio = /*#__PURE__*/ forwardRef(Radio);
 
-function Select(props) {
+function Select(props, ref) {
     const { className, children, description, errorMessage, label, isInvalid: _isInvalid, ...restProps } = props;
     const isInvalid = _isInvalid || errorMessage != null;
     return /*#__PURE__*/ jsxs(Select$1, {
@@ -454,6 +466,8 @@ function Select(props) {
                     focusModifier: 'visible'
                 }), // How to reuse placeholder text?
                 'inline-flex cursor-default items-center gap-2'),
+                // See https://github.com/adobe/react-spectrum/discussions/4792#discussioncomment-6492305
+                ref: ref,
                 children: [
                     /*#__PURE__*/ jsx(SelectValue, {
                         className: "flex-1 truncate text-left data-[placeholder]:text-[#727070]"
@@ -498,8 +512,9 @@ const SelectItem = (props)=>{
             })
     });
 };
+const _Select = /*#__PURE__*/ forwardRef(Select);
 
-function TextArea(props) {
+function TextArea(props, ref) {
     const { className, description, errorMessage, label, isInvalid: _isInvalid, rows, ...restProps } = props;
     const isInvalid = _isInvalid || errorMessage != null;
     return /*#__PURE__*/ jsxs(TextField$1, {
@@ -515,7 +530,8 @@ function TextArea(props) {
             }),
             /*#__PURE__*/ jsx(TextArea$1, {
                 className: input(),
-                rows: rows
+                rows: rows,
+                ref: ref
             }),
             /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
                 errorMessage: errorMessage
@@ -523,6 +539,7 @@ function TextArea(props) {
         ]
     });
 }
+const _TextArea = /*#__PURE__*/ forwardRef(TextArea);
 
 const inputWithAlignment = compose(input, cva({
     base: '',
@@ -533,7 +550,7 @@ const inputWithAlignment = compose(input, cva({
         }
     }
 }));
-function TextField(props) {
+function TextField(props, ref) {
     const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, ...restProps } = props;
     const isInvalid = _isInvalid || errorMessage != null;
     return /*#__PURE__*/ jsxs(TextField$1, {
@@ -558,7 +575,8 @@ function TextField(props) {
                         className: inputWithAlignment({
                             textAlign,
                             isGrouped: true
-                        })
+                        }),
+                        ref: ref
                     }),
                     withAddonDivider && rightAddon && /*#__PURE__*/ jsx(Divider, {
                         className: "mr-3"
@@ -568,7 +586,8 @@ function TextField(props) {
             }) : /*#__PURE__*/ jsx(Input, {
                 className: inputWithAlignment({
                     textAlign
-                })
+                }),
+                ref: ref
             }),
             /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
                 errorMessage: errorMessage
@@ -581,5 +600,6 @@ function Divider({ className }) {
         className: cx(className, 'block h-6 w-px flex-none bg-black')
     });
 }
+const _TextField = /*#__PURE__*/ forwardRef(TextField);
 
-export { Button, Checkbox, CheckboxGroup, Combobox, ComboboxItem, Radio, RadioGroup, Select, SelectItem, TextArea, TextField };
+export { _Button as Button, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ComboboxItem, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, SelectItem, _TextArea as TextArea, _TextField as TextField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.3",
+  "version": "2.0.0-canary.4",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -19,6 +19,7 @@
   ],
   "dependencies": {
     "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.1",
+    "@react-aria/utils": "^3.23.0",
     "cva": "1.0.0-beta.1",
     "react-aria-components": "^1.0.0"
   },