@midas-ds/components 7.1.0 → 8.1.0

package/CHANGELOG.md

@@ -1,3 +1,56 @@
+## 8.1.0
+
+### 🚀 Features
+
+- **accordion:** accordion status ✅ / 🚨 ([#485](https://github.com/migrationsverket/midas/pull/485))
+
+### 🩹 Fixes
+
+- **theme:** add dark mode focus ([#483](https://github.com/migrationsverket/midas/pull/483))
+- **modal:** make text in modal selectable ([#490](https://github.com/migrationsverket/midas/pull/490))
+- **accordion:** rename invalid token ([e4b13c928](https://github.com/migrationsverket/midas/commit/e4b13c928))
+- **select:** remove explicit size for indeterminate symbol ([5f805c134](https://github.com/migrationsverket/midas/commit/5f805c134))
+- **select:** change checkbox size to prevent disappearing border ([3ab520633](https://github.com/migrationsverket/midas/commit/3ab520633))
+
+# 8.0.0
+
+### 🚀 Features
+
+- **spinner:** change prop `dark` to `isOnColor` ([#443](https://github.com/migrationsverket/midas/pull/443))
+- ✨ add errorPosition to form fields ([#416](https://github.com/migrationsverket/midas/pull/416))
+- **layout:** new navbar component and external variant of layout ([ad54f5955](https://github.com/migrationsverket/midas/commit/ad54f5955))
+- ✨💄 add semantic z-index tokens ([#401](https://github.com/migrationsverket/midas/pull/401))
+
+### 🩹 Fixes
+
+- **calendar:** add high contrast styling for selected date ([a5af1cafe](https://github.com/migrationsverket/midas/commit/a5af1cafe))
+- **calendar:** sync calendars ([3e7b4fb06](https://github.com/migrationsverket/midas/commit/3e7b4fb06))
+- **calendar:** add border for high contrast mode ([7ed989df8](https://github.com/migrationsverket/midas/commit/7ed989df8))
+- **radio:** add support for horizontal orientation ([e5c9ad3eb](https://github.com/migrationsverket/midas/commit/e5c9ad3eb))
+- **link:** remove active styling in disabled state ([71c1e1400](https://github.com/migrationsverket/midas/commit/71c1e1400))
+- **heading:** set correct styles for heading and affected components ([#394](https://github.com/migrationsverket/midas/pull/394))
+- **accordion:** fix responsive content hiding when changing screen size ([#446](https://github.com/migrationsverket/midas/pull/446))
+- **button:** add cursor styling for disabled state ([1ab3f6c55](https://github.com/migrationsverket/midas/commit/1ab3f6c55))
+- **date-picker:** add missing disabled styles ([492a1b789](https://github.com/migrationsverket/midas/commit/492a1b789))
+- **combobox:** fix background color to input ([6ec2c1d3e](https://github.com/migrationsverket/midas/commit/6ec2c1d3e))
+- **theme:** replace invalid text and border colors in dark mode ([a6259f46c](https://github.com/migrationsverket/midas/commit/a6259f46c))
+
+### Documentation Changes
+
+- **calendar:** update docs ([#469](https://github.com/migrationsverket/midas/pull/469))
+- **link-button:** remove live-code from docs ([#451](https://github.com/migrationsverket/midas/pull/451))
+- **heading:** expose ElementType ([79b85f4e4](https://github.com/migrationsverket/midas/commit/79b85f4e4))
+- **tabs:** remove generic in prop interface ([d8bcf2b92](https://github.com/migrationsverket/midas/commit/d8bcf2b92))
+- **tabs:** remove live code and update documentation ([c4b2c2e47](https://github.com/migrationsverket/midas/commit/c4b2c2e47))
+- **tooltip:** update tooltip documentation 🔧 ([#439](https://github.com/migrationsverket/midas/pull/439))
+- **label:** remove live code and update documentation ([1803a3ee1](https://github.com/migrationsverket/midas/commit/1803a3ee1))
+- **table:** add prop comment ([6089593a4](https://github.com/migrationsverket/midas/commit/6089593a4))
+- new page explaining tokens and use of color + removed and updated tokens ([c970f0eb5](https://github.com/migrationsverket/midas/commit/c970f0eb5))
+- **text:** remove union type for documentation visibility ([675b94795](https://github.com/migrationsverket/midas/commit/675b94795))
+- define error types at component level ([14dc2b8da](https://github.com/migrationsverket/midas/commit/14dc2b8da))
+- update link docs with new code and examples ([a25a2def3](https://github.com/migrationsverket/midas/commit/a25a2def3))
+- use markdown links ([f1fb5714b](https://github.com/migrationsverket/midas/commit/f1fb5714b))
+
 ## 7.1.0
 
 ### 🚀 Features

package/accordion/Accordion.d.ts

@@ -4,7 +4,7 @@ export declare const ACCORDION_TEST_ID = "accordion";
 interface MidasAccordion extends DisclosureGroupProps {
     /** Display either the larger contained variant or a smaller uncontained variant */
     variant?: 'uncontained' | 'contained';
-    /** Weither to allow the user to have multiple accordions open at the same time */
+    /** @deprecated Use 'allowsMultipleExpanded' instead */
     type?: 'single' | 'multiple';
 }
 /**

package/accordion/AccordionItem.d.ts

@@ -1,11 +1,14 @@
-import { DisclosureProps, HeadingProps } from 'react-aria-components';
+import { DisclosureProps } from 'react-aria-components';
+import { HeadingProps } from '../heading';
 import * as React from 'react';
 interface MidasAccordionItem extends Omit<DisclosureProps, 'children'> {
     /** The text displayed in the collapsed state. If a ReactNode is proveded we're not adding a heading and you have to provide one yourself. */
     title?: string | React.ReactNode;
     children?: React.ReactNode;
     /** Adjust the titles heading level to your heading tag structure */
-    headingLevel?: HeadingProps['level'];
+    headingLevel?: HeadingProps['elementType'];
+    /** Display an accordion item in different status states */
+    type?: 'default' | 'success' | 'warning';
 }
 export declare const AccordionItem: React.FC<MidasAccordionItem>;
 export {};

package/breadcrumbs/Breadcrumbs.d.ts

@@ -1,9 +1,8 @@
 export interface BreadcrumbProps {
-    items: MidasBreadcrumb[];
-}
-export interface MidasBreadcrumb {
-    href: string;
-    title: string;
-    isDisabled?: boolean;
+    items: {
+        href: string;
+        title: string;
+        isDisabled?: boolean;
+    }[];
 }
 export declare const Breadcrumbs: React.FC<BreadcrumbProps>;

package/character-counter/CharacterCounter.d.ts

@@ -1,3 +1,6 @@
 import { InputProps } from 'react-aria-components';
 import * as React from 'react';
-export declare const CharacterCounter: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export interface CharacterCounterProps extends InputProps {
+    isLonely?: boolean;
+}
+export declare const CharacterCounter: React.ForwardRefExoticComponent<CharacterCounterProps & React.RefAttributes<HTMLInputElement>>;

package/checkbox/CheckboxGroup.d.ts

@@ -6,5 +6,6 @@ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'childr
     description?: string;
     showSelectAll?: boolean;
     errorMessage?: string | ((validation: ValidationResult) => string);
+    errorPosition?: 'top' | 'bottom';
 }
-export declare const CheckboxGroup: ({ label, description, errorMessage, showSelectAll, children, ...props }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxGroup: ({ label, description, errorMessage, showSelectAll, children, errorPosition, ...props }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;

package/color-scheme-switch/ColorSchemeSwitch.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface ColorSchemeSwitchProps {
+    /** Choose what element that should be affected by the scheme switch.
+     * @default body
+     */
+    selector?: string;
+    /** Set the default value for the color scheme. Default is "light dark" meaning follow system settings
+     *
+     * @default new Set(['light dark'])
+     */
+    defaultValue?: Set<'light' | 'dark' | 'light dark'>;
+}
+export declare const ColorSchemeSwitch: React.FC<ColorSchemeSwitchProps>;

package/color-scheme-switch/index.d.ts

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

package/combobox/ComboBox.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { ComboBoxProps as AriaComboBoxProps, ListBoxItemProps, ValidationResult } from 'react-aria-components';
+import { Item, Section } from './types';
 export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children'> {
     label?: string;
     description?: string;
@@ -7,6 +8,8 @@ export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<
     items?: Iterable<T>;
     children: React.ReactNode | ((item: T) => React.ReactNode);
     placeholder?: string;
+    errorPosition?: 'top' | 'bottom';
 }
-export declare function ComboBox<T extends object>({ label, description, errorMessage, children, items, className, ...props }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ComboBox<T extends object>({ label, description, errorMessage, children, items, className, errorPosition, ...props }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare function ComboBoxItem(props: ListBoxItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComboBoxSelection(props: Section<Item>): import("react/jsx-runtime").JSX.Element;

package/combobox/index.d.ts

@@ -1 +1,2 @@
-export { ComboBox, ComboBoxItem } from './ComboBox';
+export { ComboBox, ComboBoxItem, ComboBoxSelection } from './ComboBox';
+export type { Section, Item } from './types';

package/combobox/types.d.ts

@@ -2,3 +2,6 @@ export type Item = {
     id: number;
     name: string;
 };
+export type Section<T> = Item & {
+    children?: Iterable<T>;
+};

package/combobox/utils.d.ts

@@ -1,2 +1,10 @@
 import { Item } from './types';
 export declare function generateMockOptions(count: number): Iterable<Item>;
+export declare const optionsWithSections: {
+    name: string;
+    id: number;
+    children: {
+        name: string;
+        id: number;
+    }[];
+}[];

package/date-field/DateField.d.ts

@@ -3,6 +3,7 @@ interface DateFieldProps<T extends DateValue> extends AriaDateFieldProps<T> {
     label?: string;
     description?: string;
     errorMessage?: string | ((validation: ValidationResult) => string);
+    errorPosition?: 'top' | 'bottom';
 }
-export declare function DateField<T extends DateValue>({ label, description, errorMessage, className, ...props }: DateFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DateField<T extends DateValue>({ label, description, errorMessage, className, errorPosition, ...props }: DateFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/date-picker/DatePicker.d.ts

@@ -3,12 +3,14 @@ interface MidasDateRangePickerProps<T extends DateValue> extends DateRangePicker
     label?: string;
     description?: string;
     errorMessage?: string | ((validation: ValidationResult) => string);
+    errorPosition?: 'top' | 'bottom';
 }
-export declare const DateRangePicker: <T extends DateValue>({ label, description, errorMessage, ...props }: MidasDateRangePickerProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: <T extends DateValue>({ label, description, errorMessage, errorPosition, ...props }: MidasDateRangePickerProps<T>) => import("react/jsx-runtime").JSX.Element;
 interface MidasDatePickerProps<T extends DateValue> extends DatePickerProps<T> {
     label?: string;
     description?: string;
     errorMessage?: string | ((validation: ValidationResult) => string);
+    errorPosition?: 'top' | 'bottom';
 }
-export declare const DatePicker: <T extends DateValue>({ label, description, errorMessage, ...props }: MidasDatePickerProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: <T extends DateValue>({ label, description, errorMessage, errorPosition, ...props }: MidasDatePickerProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/field-error/index.d.ts

@@ -1 +1 @@
-export { FieldError } from './FieldError';
+export * from './FieldError';

package/heading/Heading.d.ts

@@ -1,11 +1,10 @@
 import { HeadingProps as AriaHeadingProps } from 'react-aria-components';
 import * as React from 'react';
-export type ElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export interface HeadingProps extends AriaHeadingProps {
     /**
      * Override the semantic element of the component but keep the look of the level property
      */
-    elementType?: ElementType;
+    elementType?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     /**
      * Use the external/expressive look
      */