@midas-ds/components 1.2.3 → 2.0.0

package/layout/Layout.d.ts

@@ -1,51 +1,54 @@
 import { LucideIcon } from 'lucide-react';
-import { default as React } from 'react';
+import { Sidebar } from './components/Sidebar';
+import { Header } from './components/Header';
+import { SidebarLink } from './components/SidebarLink';
+import { Href } from '@react-types/shared';
+import { LayoutProvider } from './context/LayoutContext';
+import * as React from 'react';
 export interface SidebarLinkGroup {
     title?: string;
-    items: SidebarLink[];
+    items: SidebarLinkProps[];
 }
-export interface SidebarLink {
+export interface SidebarLinkProps {
     title: string;
     href: string;
     icon: LucideIcon;
+    active?: boolean;
+    isCollapsed?: boolean;
+    setIsOpened?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 export interface SidebarUser {
     name: string;
     title: string;
 }
 type HEX = `#${string}`;
-interface App {
+export interface App {
     name: string;
-    shortName: string;
     color?: HEX;
 }
 export interface MidasLayout {
+    /** The menu items/item groups */
     items: SidebarLinkGroup[];
+    /** Title displayed at the top of the application header */
     title: string;
     children: React.ReactNode;
-    headerChildren: React.ReactNode;
-    user: SidebarUser;
-    app: App;
-    clientSideRouter?: (path: string, routerOptions: undefined) => void;
-}
-export interface MidasHeader {
-    title: string;
-    headerChildren: React.ReactNode;
+    /** List of links in the top right of the application header */
+    headerChildren?: React.ReactNode;
+    /** Current user details */
     user: SidebarUser;
+    /** Name of the app */
     app: App;
-    isOpened?: boolean;
-    setIsOpened?: React.Dispatch<React.SetStateAction<boolean>>;
-    setIsCollapsed?: React.Dispatch<React.SetStateAction<boolean>>;
-}
-export interface MidasSidebar {
-    items: SidebarLinkGroup[];
-    app: App;
-    isOpened?: boolean;
-    isCollapsed: boolean;
-    setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+    /** Provide the layout with your router for client side navigation
+     *
+     * @see {@link https://designsystem.migrationsverket.se/dev/client-side-routing/}
+     */
     clientSideRouter?: (path: string, routerOptions: undefined) => void;
+    clientSideHref?: (href: Href) => string;
 }
-export declare const Layout: React.FC<MidasLayout>;
-export declare const Sidebar: React.FC<MidasSidebar>;
-export declare const Header: React.FC<MidasHeader>;
+export declare const Layout: React.FC<MidasLayout> & {
+    Provider: typeof LayoutProvider;
+    Header: typeof Header;
+    Sidebar: typeof Sidebar;
+    SidebarLink: typeof SidebarLink;
+};
 export {};

package/layout/components/Backdrop.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const Backdrop: React.FC;

package/layout/components/Header.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface MidasHeader {
+    headerChildren?: React.ReactNode;
+}
+export declare const Header: React.FC;

package/layout/components/Sidebar.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const Sidebar: React.FC;

package/layout/components/SidebarLink.d.ts

@@ -0,0 +1,3 @@
+import { SidebarLinkProps } from '../Layout';
+import * as React from 'react';
+export declare const SidebarLink: React.FC<SidebarLinkProps>;

package/layout/components/SkipLink.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface SkipLinkProps {
+    id?: string;
+}
+export declare const SkipLink: React.FC<SkipLinkProps>;
+export {};

package/layout/context/LayoutContext.d.ts

@@ -0,0 +1,21 @@
+import { SidebarLinkGroup, SidebarUser, App } from '../Layout';
+import { Href } from '@react-types/shared';
+import * as React from 'react';
+interface LayoutContextProps {
+    items: SidebarLinkGroup[];
+    title: string;
+    user: SidebarUser;
+    app: App;
+    headerChildren: React.ReactNode;
+    isCollapsed: boolean;
+    setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+    isOpened: boolean;
+    setIsOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    clientSideRouter?: (path: string, routerOptions: undefined) => void;
+    clientSideHref?: (href: Href) => string;
+}
+export declare const LayoutProvider: React.FC<LayoutContextProps & {
+    children: React.ReactNode;
+}>;
+export declare const useLayoutContext: () => LayoutContextProps;
+export {};

package/layout/index.d.ts

@@ -1 +1,4 @@
 export * from './Layout';
+export * from './components/Header';
+export * from './components/Sidebar';
+export * from './components/SidebarLink';

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "1.2.3",
+  "version": "2.0.0",
   "main": "./index.cjs",
   "module": "./index.js",
   "types": "./index.d.ts",
@@ -39,8 +39,12 @@
       "require": "./index.cjs"
     },
     "./theme": {
+      "types": "./theme/index.d.ts",
       "import": "./theme.js",
       "require": "./theme.cjs"
+    },
+    "./global.css": {
+      "import": "./global.css"
     }
   },
   "dependencies": {

package/skeleton/Skeleton.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+type SkeletonProps = {
+    width?: string | number;
+    height?: string | number;
+    variant?: 'circle' | 'rectangular';
+    animation?: 'wave' | false;
+};
+export declare const Skeleton: React.FC<SkeletonProps>;
+export {};

package/skeleton/index.d.ts

@@ -0,0 +1 @@
+export { Skeleton } from './Skeleton';

package/table/Table.d.ts

@@ -1,11 +1,10 @@
 import { RowProps, TableHeaderProps, ColumnProps, TableProps as AriaTableProps, CellProps, TableBody } from 'react-aria-components';
-export interface TableProps<T> extends AriaTableProps {
+export interface TableProps extends AriaTableProps {
     narrow?: boolean;
     striped?: boolean;
-    rows: T[];
 }
-export declare const Table: <T extends object>({ narrow, striped, ...rest }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
-export declare const TableHeader: <T extends object>({ columns, children }: TableHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: ({ narrow, striped, className, ...rest }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableHeader: <T extends object>({ columns, children, }: TableHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const Row: <T extends object>({ id, columns, children, ...rest }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const Column: ({ children, ...rest }: ColumnProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Cell: ({ ...rest }: CellProps) => import("react/jsx-runtime").JSX.Element;

package/textarea/TextArea.d.ts

@@ -7,8 +7,8 @@ export interface TextAreaProps extends AriaTextFieldProps {
     description?: string;
     /** Set number of rows for the TextArea */
     rows?: number;
-    /** Set number of characters that are allowed before the TextArea is put in an invalid state */
-    maxCharacters?: number;
+    /** Set minimum number of characters that are allowed before the TextArea is put in an invalid state */
+    minLength?: number;
     /**
      * Whether to show the character counter or not
      * @default

package/textfield/TextField.d.ts

@@ -1,16 +1,25 @@
-import { default as React, ReactNode } from 'react';
 import { TextFieldProps as AriaTextFieldProps, ValidationResult } from 'react-aria-components';
+import * as React from 'react';
 export interface TextFieldProps extends AriaTextFieldProps {
-    children?: ReactNode;
+    children?: React.ReactNode;
+    /** Specify label displayed above the TextField*/
     label?: string;
+    /** Specify description displayed below the label */
     description?: string;
+    /** Custom error messages */
     errorMessage?: string | ((validation: ValidationResult) => string) | undefined;
-    validationType?: 'ssn' | RegExp;
-    maxCharacters?: number;
+    /** Enable validations or add your own regex */
+    validationType?: 'ssn' | 'dossnr' | RegExp;
+    /**
+     * Whether to show the character counter or not
+     * @default
+     * false
+     */
     showCounter?: boolean;
 }
 export declare const TextField: React.FC<TextFieldProps>;
 type InputWrapperProps = Pick<TextFieldProps, 'label' | 'description' | 'errorMessage' | 'children'>;
-export declare const InputWrapper: ({ label, description, errorMessage, children }: InputWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputWrapper: ({ label, description, errorMessage, children, }: InputWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ssnRegEx: RegExp;
+export declare const dossNrRegEx: RegExp;
 export {};

package/tooltip/Tooltip.d.ts

@@ -0,0 +1,9 @@
+import { TooltipProps, TooltipTriggerComponentProps } from 'react-aria-components';
+import * as React from 'react';
+interface MidasTooltipProps extends Omit<TooltipProps, 'children'> {
+    children: React.ReactNode;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+}
+export declare function Tooltip({ children, placement, className, ...props }: MidasTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function TooltipTrigger({ children, delay, ...props }: TooltipTriggerComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip';