@biblioteksentralen/react 2.0.0 → 3.0.0-beta.1

package/dist/index.d.ts

@@ -1,18 +1,23 @@
-import { FlexProps, AlertProps, ComponentWithAs, ButtonProps, ThemeTypings, BoxProps, InputProps, FormLabelProps, LinkProps, ChakraTheme } from '@chakra-ui/react';
+import * as _chakra_ui_react from '@chakra-ui/react';
+import { AlertRootProps, ButtonProps, BoxProps, InputProps, FieldLabelProps, LinkProps } from '@chakra-ui/react';
 export * from '@chakra-ui/react';
-import React, { ReactNode, FunctionComponent, HTMLAttributes, ErrorInfo } from 'react';
 import { Modify } from '@biblioteksentralen/types';
+import React, { ReactNode, FunctionComponent, HTMLAttributes, ErrorInfo } from 'react';
+import { ComponentWithAs, ThemeTypings } from '@chakra-ui/system';
 export { colors } from '@biblioteksentralen/utils';
-import { ChakraTheme as ChakraTheme$1 } from '@chakra-ui/theme';
 
-type Status = Exclude<AlertProps["status"], undefined | "loading">;
-type Variants = "inline";
-interface Props$7 extends FlexProps {
+type Status = "info" | "warning" | "success" | "error";
+type CustomVariants = "inline";
+type Variants = AlertRootProps["variant"] | CustomVariants;
+interface Props$7 extends Modify<AlertRootProps, {
+    variant?: Variants;
+}> {
     children: ReactNode;
+    header?: ReactNode;
     status: Status;
     variant?: Variants;
 }
-declare function Alert({ status, children, variant, ...rest }: Props$7): React.JSX.Element;
+declare function Alert({ status, children, variant, header, ...rest }: Props$7): React.JSX.Element;
 
 type CustomButtonVariants = "primary" | "secondary" | "tertiary";
 
@@ -48,7 +53,7 @@ declare const HideWithCSS: FunctionComponent<Props$5>;
 interface Props$4 extends InputProps {
     label: string;
     hideLabel?: boolean;
-    labelProps?: FormLabelProps;
+    labelProps?: FieldLabelProps;
     helperText?: string;
     errorMessage?: string;
 }
@@ -56,9 +61,9 @@ interface Props$4 extends InputProps {
  * Creating custom input-component to make sure label is always set (for accessibility)
  * Also handles some common needs (helper text and error message. For more advanced input-components we leave it to the consumers to compose custom input-components based on Chakra
  */
-declare const Input: React.ForwardRefExoticComponent<Props$4 & React.RefAttributes<unknown>>;
+declare const Input: (props: Props$4) => React.JSX.Element;
 
-type CustomLinkVariants = "plain";
+type CustomLinkVariants = "plain" | "underline";
 
 /**
  * Re-exporting chackras Link with a customised types
@@ -76,7 +81,6 @@ declare function VisuallyHidden({ children, ...rest }: Props$3): React.JSX.Eleme
 
 interface Props$2 {
     children: ReactNode;
-    customTheme?: Partial<ChakraTheme>;
 }
 declare const BiblioteksentralenProvider: (props: Props$2) => React.JSX.Element;
 
@@ -95,7 +99,7 @@ declare class ErrorBoundary extends React.Component<Props$1, State> {
         hasError: boolean;
     };
     componentDidCatch(error: any, errorInfo: any): void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 }
 
 interface Props {
@@ -111,8 +115,8 @@ interface Props {
 }
 declare function HashLinkTarget(props: Props): React.JSX.Element;
 
-declare const withErrorBoundary: <Props>(Component: React.ComponentType<Props>, boundaryName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<unknown>>;
+declare const withErrorBoundary: <Props>(Component: React.ComponentType<Props>, boundaryName: string) => (props: Props & React.JSX.IntrinsicAttributes) => React.JSX.Element;
 
-declare const biblioteksentralenChakraTheme: Partial<ChakraTheme$1>;
+declare const biblioteksentralenChakraTheme: _chakra_ui_react.SystemContext;
 
 export { Alert, BiblioteksentralenProvider, Button, ConditionalWrapper, ErrorBoundary, HashLinkTarget, HideWithCSS, Input, Link, VisuallyHidden, biblioteksentralenChakraTheme, withErrorBoundary };

package/dist/index.js

@@ -414,33 +414,21 @@ var variantStyles = {
     }
 };
 function Alert(_param) {
-    var status = _param.status, children = _param.children, variant = _param.variant, rest = _object_without_properties(_param, [
+    var status = _param.status, children = _param.children, variant = _param.variant, header = _param.header, rest = _object_without_properties(_param, [
         "status",
         "children",
-        "variant"
+        "variant",
+        "header"
     ]);
     var colors2 = colorLookup[status];
-    return /* @__PURE__ */ import_react2.default.createElement(import_react.Flex, _object_spread({
-        role: "alert",
-        flexWrap: "wrap",
-        alignItems: "center",
-        gridGap: "0.5em 0.6em",
-        background: "white",
+    return /* @__PURE__ */ import_react2.default.createElement(import_react.Alert.Root, _object_spread({
+        status: status,
         border: "0.1rem solid",
         borderColor: colors2.color,
-        backgroundColor: colors2.bg,
-        padding: "0.75rem",
-        borderRadius: "0.3rem"
-    }, variant ? variantStyles[variant] : {}, rest), /* @__PURE__ */ import_react2.default.createElement(import_react.Box, {
-        color: colors2.color,
-        flex: "0 0",
-        marginLeft: "auto",
-        marginRight: "auto",
-        lineHeight: "1",
-        fontSize: "1.5em"
-    }, iconLookup[status]), /* @__PURE__ */ import_react2.default.createElement(import_react.Box, {
-        flex: "1"
-    }, children));
+        backgroundColor: colors2.bg
+    }, variant === "inline" ? variantStyles[variant] : {}, rest), /* @__PURE__ */ import_react2.default.createElement(import_react.Alert.Indicator, null, iconLookup[status]), /* @__PURE__ */ import_react2.default.createElement(import_react.Alert.Content, {
+        color: "black"
+    }, header && /* @__PURE__ */ import_react2.default.createElement(import_react.Alert.Title, null, header), /* @__PURE__ */ import_react2.default.createElement(import_react.Alert.Description, null, children)));
 }
 // src/components/Button.tsx
 var import_react3 = require("@chakra-ui/react");
@@ -503,7 +491,7 @@ function VisuallyHidden(_param) {
     }, children);
 }
 // src/components/Input.tsx
-var Input = (0, import_react10.forwardRef)(function(props, ref) {
+var Input = function(props) {
     var labelProps = props.labelProps, label = props.label, helperText = props.helperText, errorMessage = props.errorMessage, hideLabel = props.hideLabel, inputProps = _object_without_properties(props, [
         "labelProps",
         "label",
@@ -511,25 +499,19 @@ var Input = (0, import_react10.forwardRef)(function(props, ref) {
         "errorMessage",
         "hideLabel"
     ]);
-    return /* @__PURE__ */ import_react10.default.createElement(import_react9.FormControl, {
-        isInvalid: !!errorMessage
-    }, /* @__PURE__ */ import_react10.default.createElement(import_react9.FormLabel, _object_spread({}, labelProps), hideLabel ? /* @__PURE__ */ import_react10.default.createElement(VisuallyHidden, null, label) : label), helperText && /* @__PURE__ */ import_react10.default.createElement(import_react9.FormHelperText, {
-        marginTop: "-0.25em",
-        marginBottom: "0.25em"
-    }, helperText), /* @__PURE__ */ import_react10.default.createElement(import_react9.Input, _object_spread({
-        ref: ref
-    }, inputProps)), errorMessage && /* @__PURE__ */ import_react10.default.createElement(import_react9.FormErrorMessage, {
-        color: colors.statusRed,
-        fontWeight: 600
-    }, errorMessage));
-});
+    var formLabel = /* @__PURE__ */ import_react10.default.createElement(import_react9.Field.Label, _object_spread({}, labelProps), label);
+    return /* @__PURE__ */ import_react10.default.createElement(import_react9.Field.Root, {
+        invalid: !!errorMessage
+    }, hideLabel ? /* @__PURE__ */ import_react10.default.createElement(VisuallyHidden, null, formLabel) : formLabel, helperText && /* @__PURE__ */ import_react10.default.createElement(import_react9.Field.HelperText, null, helperText), /* @__PURE__ */ import_react10.default.createElement(import_react9.Input, _object_spread({}, inputProps)), errorMessage && /* @__PURE__ */ import_react10.default.createElement(import_react9.Field.ErrorText, null, errorMessage));
+};
 // src/components/Link.tsx
 var import_react11 = require("@chakra-ui/react");
 var Link = import_react11.Link;
 // src/BiblioteksentralenProvider.tsx
-var import_react14 = require("@chakra-ui/react");
-var import_react15 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
+var import_react20 = require("@chakra-ui/react");
 // src/styles/chakraTheme/ButtonStyles.ts
+var import_react12 = require("@chakra-ui/react");
 var variants = {
     primary: {
         backgroundColor: colors.black,
@@ -540,7 +522,7 @@ var variants = {
         }
     },
     secondary: {
-        borderColor: "currentColor",
+        borderColor: "currentColor !important",
         backgroundColor: "transparent",
         color: "currentColor",
         _hover: {
@@ -556,8 +538,8 @@ var variants = {
         }
     }
 };
-var ButtonStyles = {
-    baseStyle: {
+var ButtonStyles = (0, import_react12.defineRecipe)({
+    base: {
         border: "transparent 0.1em solid",
         borderRadius: "0.35em",
         fontWeight: 600,
@@ -567,181 +549,184 @@ var ButtonStyles = {
             opacity: 1
         }
     },
-    sizes: {
-        sm: {
-            padding: "0.2em 0.5em",
-            fontSize: "1rem"
+    variants: {
+        variant: _object_spread({}, variants),
+        sizes: {
+            sm: {
+                padding: "0.2em 0.5em",
+                fontSize: "1rem"
+            }
         }
     },
-    variants: variants,
-    defaultProps: {
+    defaultVariants: {
         variant: "primary"
     }
-};
-// src/styles/chakraTheme/CheckboxStyles.ts
-var import_react12 = require("@chakra-ui/react");
-var import_anatomy = require("@chakra-ui/anatomy");
-var _ref = (0, import_react12.createMultiStyleConfigHelpers)(import_anatomy.checkboxAnatomy.keys), definePartsStyle = _ref.definePartsStyle, defineMultiStyleConfigWithTypeIssue = _ref.defineMultiStyleConfig;
-var defineMultiStyleConfig = defineMultiStyleConfigWithTypeIssue;
-var baseStyle = definePartsStyle({
-    control: {
-        background: "white"
-    }
-});
-var CheckboxStyles = defineMultiStyleConfig({
-    baseStyle: baseStyle
 });
 // src/styles/chakraTheme/ContainerStyles.ts
-var ContainerStyles = {
-    baseStyle: {
+var import_react13 = require("@chakra-ui/react");
+var ContainerStyles = (0, import_react13.defineRecipe)({
+    base: {
         px: ".75rem"
     }
-};
+});
 // src/styles/chakraTheme/HeadingStyles.ts
-var HeadingStyles = {
-    baseStyle: {
+var import_react14 = require("@chakra-ui/react");
+var HeadingStyles = (0, import_react14.defineRecipe)({
+    base: {
         fontWeight: "600"
     }
-};
+});
 // src/styles/chakraTheme/InputStyles.ts
-var import_theme_tools = require("@chakra-ui/theme-tools");
-var InputStyles = {
-    baseStyle: function(props) {
-        return {
-            field: {
-                _placeholder: {
-                    color: (0, import_theme_tools.mode)("gray.500", "whiteAlpha.500")(props)
-                }
+var import_react15 = require("@chakra-ui/react");
+var variants2 = {
+    subtle: {
+        backgroundColor: {
+            _light: "gray.200",
+            _dark: "whiteAlpha.100"
+        },
+        _hover: {
+            bg: {
+                _light: "gray.300",
+                _dark: "whiteAlpha.200"
             }
-        };
+        }
     },
-    variants: {
-        filled: function(props) {
-            return {
-                field: {
-                    bg: (0, import_theme_tools.mode)("gray.200", "whiteAlpha.100")(props),
-                    _hover: {
-                        bg: (0, import_theme_tools.mode)("gray.300", "whiteAlpha.200")(props)
-                    }
-                }
-            };
+    outline: {
+        borderColor: {
+            _light: "gray.300",
+            _dark: "whiteAlpha.300"
         },
-        outline: function(props) {
-            return {
-                field: {
-                    borderColor: (0, import_theme_tools.mode)("gray.300", "whiteAlpha.300")(props),
-                    _hover: {
-                        borderColor: (0, import_theme_tools.mode)("gray.400", "whiteAlpha.400")(props)
-                    }
-                }
-            };
-        },
-        flushed: function(props) {
-            return {
-                field: {
-                    borderColor: (0, import_theme_tools.mode)("gray.300", "whiteAlpha.300")(props),
-                    _hover: {
-                        borderColor: (0, import_theme_tools.mode)("gray.400", "whiteAlpha.400")(props)
-                    }
-                }
-            };
+        _hover: {
+            borderColor: {
+                _light: "gray.400",
+                _dark: "whiteAlpha.400"
+            }
         }
     },
-    defaultProps: {
-        variant: "filled"
+    flushed: {
+        borderColor: {
+            _light: "gray.300",
+            _dark: "whiteAlpha.300"
+        },
+        _hover: {
+            borderColor: {
+                _light: "gray.400",
+                _dark: "whiteAlpha.400"
+            }
+        }
     }
 };
+var InputStyles = (0, import_react15.defineRecipe)({
+    base: {
+        _placeholder: {
+            color: {
+                _light: "gray.500",
+                _dark: "whiteAlpha.500"
+            }
+        }
+    },
+    variants: {
+        variant: _object_spread({}, variants2)
+    },
+    defaultVariants: {
+        variant: "subtle"
+    }
+});
 // src/styles/chakraTheme/LinkStyles.ts
-var variants2 = {
+var import_react16 = require("@chakra-ui/react");
+var variants3 = {
     plain: {
         textDecoration: "none",
         _hover: {
             textDecoration: "underline"
         }
-    }
-};
-var LinkStyles = {
-    baseStyle: {
+    },
+    underline: {
         textDecoration: "underline",
         _hover: {
             textDecoration: "none"
         }
-    },
-    variants: variants2
-};
-// src/styles/chakraTheme/ModalStyles.ts
-var ModalStyles = {
-    baseStyle: {
-        // Fix for modal height on Safari iOS:
-        // https://github.com/chakra-ui/chakra-ui/issues/4680#issuecomment-1301640929
-        dialogContainer: {
-            "@supports(height: -webkit-fill-available)": {},
-            height: "100%"
-        }
     }
 };
+var LinkStyles = (0, import_react16.defineRecipe)({
+    variants: {
+        variant: _object_spread({}, variants3)
+    },
+    defaultVariants: {
+        variant: "underline"
+    }
+});
 // src/styles/chakraTheme/SpinnerStyles.ts
-var import_react13 = require("@chakra-ui/react");
-var SpinnerStyles = {};
-import_react13.Spinner.defaultProps = _object_spread_props(_object_spread({}, import_react13.Spinner.defaultProps), {
-    speed: ".8s",
-    color: colors.accentBlueMedium,
-    emptyColor: "rgba(0,0,0,.2)",
-    thickness: ".175em"
+var import_react17 = require("@chakra-ui/react");
+var SpinnerStyles = (0, import_react17.defineRecipe)({
+    base: {
+        animationDuration: ".8s",
+        color: colors.accentBlueMedium,
+        // Todo: Legg til trackColor: https://chakra-ui.com/docs/components/spinner#track-color
+        borderWidth: ".175em"
+    }
 });
 // src/styles/chakraTheme/sizes.ts
 var container = {
-    sm: "40rem",
-    md: "48rem",
-    lg: "56rem",
+    sm: {
+        value: "40rem"
+    },
+    md: {
+        value: "48rem"
+    },
+    lg: {
+        value: "56rem"
+    },
     // Forsøker 56rem som standardbredde etter testing med Katrine
-    xl: "80rem"
+    xl: {
+        value: "80rem"
+    }
 };
 var sizes = {
     container: container
 };
 // src/styles/chakraTheme/biblioteksentralenChakraTheme.ts
-var biblioteksentralenChakraTheme = {
-    styles: {
-        global: {
-            html: {
-                fontSize: {
-                    base: "112.5%",
-                    md: "120%"
-                },
-                // Sørger for smooth scrolling for interne lenker som scroller til annet sted på siden,
-                // men ikke hvis fokus er utenfor viduet, feks ved søk i tekst (ctrl + f)
-                "&:focus-within": {
-                    scrollBehavior: "smooth !important"
-                }
-            }
+var import_react18 = require("@chakra-ui/react");
+var biblioteksentralenChakraTheme = (0, import_react18.createSystem)(import_react18.defaultConfig, {
+    theme: {
+        tokens: {
+            sizes: sizes
+        },
+        recipes: {
+            heading: HeadingStyles,
+            button: ButtonStyles,
+            input: InputStyles,
+            link: LinkStyles,
+            container: ContainerStyles,
+            spinner: SpinnerStyles
         }
     },
-    components: {
-        Heading: HeadingStyles,
-        Spinner: SpinnerStyles,
-        Link: LinkStyles,
-        Button: ButtonStyles,
-        Input: InputStyles,
-        Container: ContainerStyles,
-        Modal: ModalStyles,
-        Checkbox: CheckboxStyles
-    },
-    sizes: sizes
-};
+    globalCss: {
+        html: {
+            fontSize: {
+                base: "112.5%",
+                md: "120%"
+            },
+            // Sørger for smooth scrolling for interne lenker som scroller til annet sted på siden,
+            // men ikke hvis fokus er utenfor viduet, feks ved søk i tekst (ctrl + f)
+            "&:focus-within": {
+                scrollBehavior: "smooth !important"
+            }
+        }
+    }
+});
 // src/BiblioteksentralenProvider.tsx
-var emptyTheme = {};
-var BiblioteksentralenProvider = function(props) /* @__PURE__ */ {
-    var _props_customTheme;
-    return import_react15.default.createElement(import_react14.ChakraProvider, {
-        theme: (0, import_react14.extendTheme)(biblioteksentralenChakraTheme, (_props_customTheme = props.customTheme) !== null && _props_customTheme !== void 0 ? _props_customTheme : emptyTheme)
-    }, props.children);
+var import_system = require("@chakra-ui/system");
+var BiblioteksentralenProvider = function(props) {
+    return /* @__PURE__ */ import_react19.default.createElement(import_react20.ChakraProvider, {
+        value: biblioteksentralenChakraTheme
+    }, /* @__PURE__ */ import_react19.default.createElement(import_system.ColorModeProvider, _object_spread({}, props)));
 };
 // src/components/ErrorBoundary.tsx
-var import_react16 = require("@chakra-ui/react");
-var import_react17 = __toESM(require("react"));
+var import_react21 = require("@chakra-ui/react");
+var import_react22 = __toESM(require("react"));
 var StyledPre = function(props) {
-    return /* @__PURE__ */ import_react17.default.createElement(import_react16.Box, _object_spread({
+    return /* @__PURE__ */ import_react22.default.createElement(import_react21.Box, _object_spread({
         as: "pre",
         paddingTop: "0.5rem",
         wordBreak: "break-all",
@@ -749,8 +734,8 @@ var StyledPre = function(props) {
         fontSize: "0.8rem"
     }, props));
 };
-var ErrorBoundary = /*#__PURE__*/ function(_import_react17_default_Component) {
-    _inherits(ErrorBoundary, _import_react17_default_Component);
+var ErrorBoundary = /*#__PURE__*/ function(_import_react22_default_Component) {
+    _inherits(ErrorBoundary, _import_react22_default_Component);
     var _super = _create_super(ErrorBoundary);
     function ErrorBoundary(props) {
         _class_call_check(this, ErrorBoundary);
@@ -784,9 +769,9 @@ var ErrorBoundary = /*#__PURE__*/ function(_import_react17_default_Component) {
                     var stackTrace = (_this_state_errorInfo = this.state.errorInfo) === null || _this_state_errorInfo === void 0 ? void 0 : _this_state_errorInfo.componentStack;
                     var errormsg = (_this_state_error = this.state.error) === null || _this_state_error === void 0 ? void 0 : _this_state_error.message;
                     var info = this.props.boundaryName;
-                    return /* @__PURE__ */ import_react17.default.createElement("div", null, /* @__PURE__ */ import_react17.default.createElement(Alert, {
+                    return /* @__PURE__ */ import_react22.default.createElement("div", null, /* @__PURE__ */ import_react22.default.createElement(Alert, {
                         status: "error"
-                    }, /* @__PURE__ */ import_react17.default.createElement("p", null, "Beklager, det skjedde en teknisk feil."), isDevelopment() && (stackTrace || errormsg) && /* @__PURE__ */ import_react17.default.createElement("div", null, /* @__PURE__ */ import_react17.default.createElement(StyledPre, null, errormsg || ""), /* @__PURE__ */ import_react17.default.createElement(StyledPre, null, info || ""), /* @__PURE__ */ import_react17.default.createElement(StyledPre, null, stackTrace || ""))));
+                    }, /* @__PURE__ */ import_react22.default.createElement("p", null, "Beklager, det skjedde en teknisk feil."), isDevelopment() && (stackTrace || errormsg) && /* @__PURE__ */ import_react22.default.createElement("div", null, /* @__PURE__ */ import_react22.default.createElement(StyledPre, null, errormsg || ""), /* @__PURE__ */ import_react22.default.createElement(StyledPre, null, info || ""), /* @__PURE__ */ import_react22.default.createElement(StyledPre, null, stackTrace || ""))));
                 }
                 return this.props.children;
             }
@@ -802,12 +787,12 @@ var ErrorBoundary = /*#__PURE__*/ function(_import_react17_default_Component) {
         }
     ]);
     return ErrorBoundary;
-}(import_react17.default.Component);
+}(import_react22.default.Component);
 // src/components/HashLinkTarget.tsx
-var import_react18 = require("@chakra-ui/react");
-var import_react19 = __toESM(require("react"));
+var import_react23 = require("@chakra-ui/react");
+var import_react24 = __toESM(require("react"));
 var focusOnRelativeParentStyle = {
-    "&:focus-within": {
+    _focusWithin: {
         position: "static",
         boxShadow: "none",
         "&::after": {
@@ -824,10 +809,10 @@ var focusOnRelativeParentStyle = {
     }
 };
 function HashLinkTarget(props) {
-    return /* @__PURE__ */ import_react19.default.createElement(import_react18.Box, {
+    return /* @__PURE__ */ import_react24.default.createElement(import_react23.Box, {
         position: "relative",
-        sx: props.focusOnParent ? focusOnRelativeParentStyle : void 0
-    }, /* @__PURE__ */ import_react19.default.createElement(import_react18.Box, {
+        css: props.focusOnParent ? focusOnRelativeParentStyle : void 0
+    }, /* @__PURE__ */ import_react24.default.createElement(import_react23.Box, {
         id: props.id,
         tabIndex: props.focusOnParent ? -1 : void 0,
         position: "absolute",
@@ -838,15 +823,13 @@ function HashLinkTarget(props) {
     }));
 }
 // src/components/withErrorBoundary.tsx
-var import_react20 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var withErrorBoundary = function(Component, boundaryName) {
-    return import_react20.default.forwardRef(function(props, ref) {
-        return /* @__PURE__ */ import_react20.default.createElement(ErrorBoundary, {
+    return function(props) {
+        return /* @__PURE__ */ import_react25.default.createElement(ErrorBoundary, {
             boundaryName: boundaryName
-        }, /* @__PURE__ */ import_react20.default.createElement(Component, _object_spread_props(_object_spread({}, props), {
-            ref: ref
-        })));
-    });
+        }, /* @__PURE__ */ import_react25.default.createElement(Component, _object_spread({}, props)));
+    };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = _object_spread({