@obosbbl/grunnmuren-react 2.0.0-canary.33 → 2.0.0-canary.34

package/README.md

@@ -81,7 +81,7 @@ import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
 import { useRouter } from 'next/navigation';
 
 export function Providers({children, locale}: { children: React.ReactNode, locale: string}) {
-  let router = useRouter();
+  const router = useRouter();
 
   return (
     <GrunnmurenProvider locale={locale} navigate={router.push}>
@@ -116,6 +116,52 @@ export default function RootLayout({
 }
 ```
 
+#### Basepath
+
+If you're using a router such as Next's, then you can use the `useHref` prop to convert router-specific hrefs into native HTML hrefs. This is very useful for instance when using Next's [basepath](https://nextjs.org/docs/app/api-reference/next-config-js/basePath) setting, as you can use this to prepend the basepath to all links, similar to Next's `<Link>`.
+
+**Before**
+
+```tsx
+import Link from 'next/link';
+import { Button } from '@obosbbl/grunnmuren-react';
+
+// Notice how you have to handle the basepath yourself with Grunnmuren's component, but not with Next's.
+
+<Link href="/bli-medlem">Bli medlem</Link>
+<Button href="/medlem/bli-medlem">Bli medlem</Button>
+```
+
+**After**
+
+```js
+// app/providers.tsx
+'use client'
+import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
+import { useRouter } from 'next/navigation';
+
+export function Providers({children, locale}: { children: React.ReactNode, locale: string}) {
+  const router = useRouter();
+  const useHref = (href: string) => '/medlem' + href;
+
+  return (
+    <GrunnmurenProvider locale={locale} navigate={router.push} useHref={useHref}>
+      {children}
+    </GrunnmurenProvider>
+  )
+}
+```
+
+```tsx
+import Link from 'next/link';
+import { Button } from '@obosbbl/grunnmuren-react';
+
+// The hrefs are the same, as basepath is handled by the useHref hook in the provider.
+
+<Link href="/bli-medlem">Bli medlem</Link>
+<Button href="/bli-medlem">Bli medlem</Button>
+```
+
 ### 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:

package/dist/index.d.mts

@@ -1,10 +1,11 @@
-import { ButtonProps as ButtonProps$1, Link, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ListBoxItemProps, ComboBoxProps, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, SelectProps as SelectProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1, ContextValue, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1 } from 'react-aria-components';
+import { RouterProvider, ButtonProps as ButtonProps$1, Link, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ListBoxItemProps, ComboBoxProps, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, SelectProps as SelectProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1, ContextValue, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1 } from 'react-aria-components';
 export { ListBoxItemProps as ComboboxItemProps, Form, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { HTMLProps, ForwardedRef } from 'react';
 import { VariantProps } from 'cva';
 
+type RouterProviderProps = React.ComponentProps<typeof RouterProvider>;
 type GrunnmurenProviderProps = {
     children: React.ReactNode;
     /**
@@ -12,10 +13,12 @@ type GrunnmurenProviderProps = {
      *  @default nb
      */
     locale?: 'nb' | 'sv' | 'en';
-    /** The router to use for navigation */
-    navigate?: (path: string) => void;
+    /** The router to use for client side navigation */
+    navigate?: RouterProviderProps['navigate'];
+    /** Converts a router-specific href to a native HTML href, e.g. prepending a base path */
+    useHref?: RouterProviderProps['useHref'];
 };
-declare function GrunnmurenProvider({ children, locale, navigate, }: GrunnmurenProviderProps): react_jsx_runtime.JSX.Element;
+declare function GrunnmurenProvider({ children, locale, navigate, useHref, }: GrunnmurenProviderProps): react_jsx_runtime.JSX.Element;
 
 type AccordionProps = {
     children: react__default.ReactNode;
@@ -135,7 +138,7 @@ declare const _Checkbox: react.ForwardRefExoticComponent<{
     errorMessage?: React.ReactNode;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
-} & Omit<CheckboxProps$1, "children" | "style" | "isDisabled" | "isIndeterminate" | "isReadOnly"> & react.RefAttributes<HTMLLabelElement>>;
+} & Omit<CheckboxProps$1, "style" | "children" | "isDisabled" | "isIndeterminate" | "isReadOnly"> & react.RefAttributes<HTMLLabelElement>>;
 
 type CheckboxGroupProps = {
     children: React.ReactNode;
@@ -162,7 +165,7 @@ declare const _CheckboxGroup: react.ForwardRefExoticComponent<{
     label?: React.ReactNode;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
-} & Omit<CheckboxGroupProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
+} & Omit<CheckboxGroupProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
 
 declare const ListBoxItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
 
@@ -205,7 +208,7 @@ declare const _Combobox: react.ForwardRefExoticComponent<{
     placeholder?: string;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
-} & Omit<ComboBoxProps<object>, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
+} & Omit<ComboBoxProps<object>, "style" | "children" | "className" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
 
 type RadioGroupProps = {
     children: React.ReactNode;
@@ -232,7 +235,7 @@ declare const _RadioGroup: react.ForwardRefExoticComponent<{
     label?: React.ReactNode;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
-} & Omit<RadioGroupProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
+} & Omit<RadioGroupProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
 
 type RadioProps = {
     children: React.ReactNode;
@@ -251,7 +254,7 @@ declare const _Radio: react.ForwardRefExoticComponent<{
     description?: React.ReactNode;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
-} & Omit<RadioProps$1, "children" | "style" | "isDisabled"> & react.RefAttributes<HTMLLabelElement>>;
+} & Omit<RadioProps$1, "style" | "children" | "isDisabled"> & react.RefAttributes<HTMLLabelElement>>;
 
 type SelectProps<T extends object> = {
     children: React.ReactNode;
@@ -282,7 +285,7 @@ declare const _Select: react.ForwardRefExoticComponent<{
     placeholder?: string;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
-} & Omit<SelectProps$1<object>, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLButtonElement>>;
+} & Omit<SelectProps$1<object>, "style" | "children" | "className" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLButtonElement>>;
 
 type TextAreaProps = {
     /** Additional CSS className for the element. */
@@ -321,7 +324,7 @@ declare const _TextArea: react.ForwardRefExoticComponent<{
      * @default 2
      */
     rows?: number;
-} & Omit<TextFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLTextAreaElement>>;
+} & Omit<TextFieldProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLTextAreaElement>>;
 
 type TextFieldProps = {
     /** Additional CSS className for the element. */
@@ -376,7 +379,7 @@ declare const _TextField: react.ForwardRefExoticComponent<{
     withAddonDivider?: boolean;
     /** Defines the number of characters and determines the width of the input element */
     size?: number;
-} & Omit<TextFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
+} & Omit<TextFieldProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
 
 type NumberFieldProps = {
     /** Additional CSS className for the element. */
@@ -439,7 +442,7 @@ declare const _NumberField: react.ForwardRefExoticComponent<{
     maxValue?: number;
     /** Defines the minimum numeric value */
     minValue?: number;
-} & Omit<NumberFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "hideStepper"> & react.RefAttributes<HTMLInputElement>>;
+} & Omit<NumberFieldProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly" | "hideStepper"> & react.RefAttributes<HTMLInputElement>>;
 
 declare const alertVariants: (props?: ({
     variant?: "info" | "success" | "warning" | "danger" | undefined;
@@ -566,7 +569,7 @@ declare const _Breadcrumb: react.ForwardRefExoticComponent<{
     style?: React.CSSProperties;
     /** The URL to navigate to when clicking the breadcrumb. */
     href?: string;
-} & Omit<BreadcrumbProps$1, "className" | "style"> & react.RefAttributes<HTMLLIElement>>;
+} & Omit<BreadcrumbProps$1, "style" | "className"> & react.RefAttributes<HTMLLIElement>>;
 
 type BreadcrumbsProps = {
     /** Additional CSS className for the element. */
@@ -579,7 +582,7 @@ declare const _Breadcrumbs: react.ForwardRefExoticComponent<{
     className?: string;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
-} & Omit<BreadcrumbsProps$1<BreadcrumbProps>, "className" | "style"> & react.RefAttributes<HTMLOListElement>>;
+} & Omit<BreadcrumbsProps$1<BreadcrumbProps>, "style" | "className"> & react.RefAttributes<HTMLOListElement>>;
 
 type ButtonOrLinkProps = {
     children?: React.ReactNode;

package/dist/index.mjs

@@ -2,26 +2,22 @@
 import { I18nProvider, RouterProvider, useContextProps, Provider, Link, Button as Button$1, Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, FieldError, CheckboxGroup as CheckboxGroup$1, ListBoxItem as ListBoxItem$1, ListBox as ListBox$1, ComboBox, Group, Input, Popover, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1, NumberField as NumberField$1, useLocale, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1 } from 'react-aria-components';
 export { Form } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useLayoutEffect, createContext, forwardRef, Children, useId, useState, useRef } from 'react';
+import { createContext, forwardRef, Children, useId, useState, useRef } from 'react';
 import { cx, cva, compose } from 'cva';
 import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, CloseCircle, ChevronRight, ChevronLeft } from '@obosbbl/grunnmuren-icons-react';
-import { mergeRefs } from '@react-aria/utils';
+import { useLayoutEffect, mergeRefs } from '@react-aria/utils';
 
-function GrunnmurenProvider({ children, locale = 'nb', navigate }) {
+function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
     return /*#__PURE__*/ jsx(I18nProvider, {
         locale: locale,
         children: navigate ? /*#__PURE__*/ jsx(RouterProvider, {
             navigate: navigate,
+            useHref: useHref,
             children: children
         }) : children
     });
 }
 
-const canUseDOM = ()=>{
-    return typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
-};
-const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : ()=>{};
-
 const HeadingContext = /*#__PURE__*/ createContext({});
 const Heading = (props, ref)=>{
     [props, ref] = useContextProps(props, ref, HeadingContext);
@@ -80,7 +76,7 @@ function AccordionItem(props, ref) {
     //
     const [isOpen, setIsOpen] = useState(// If we are controlled, use that open state, otherwise use the uncontrolled
     isControlled ? controlledIsOpen : defaultOpen);
-    useClientLayoutEffect(()=>{
+    useLayoutEffect(()=>{
         if (isControlled) {
             setIsOpen(controlledIsOpen);
         }
@@ -194,7 +190,7 @@ const _AccordionItem = /*#__PURE__*/ forwardRef(AccordionItem);
         {
             color: 'green',
             variant: 'secondary',
-            className: 'bg-white text-black shadow-green hover:bg-green hover:text-white active:bg-green'
+            className: 'text-black shadow-green hover:bg-green hover:text-white active:bg-green'
         },
         {
             color: 'mint',
@@ -242,7 +238,7 @@ function Button(props, forwardedRef) {
     const [widthOverride, setWidthOverride] = useState();
     const ownRef = useRef(null);
     const ref = mergeRefs(ownRef, forwardedRef);
-    useClientLayoutEffect(()=>{
+    useLayoutEffect(()=>{
         if (isLoading) {
             const requestID = window.requestAnimationFrame(()=>{
                 setWidthOverride(ownRef.current?.getBoundingClientRect()?.width);
@@ -268,7 +264,7 @@ function Button(props, forwardedRef) {
     }) : _children;
     const style = {
         ..._style,
-        widthOverride
+        width: widthOverride
     };
     return isLinkProps$1(restProps) ? /*#__PURE__*/ jsx(Link, {
         ...restProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.33",
+  "version": "2.0.0-canary.34",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"