@midas-ds/components 3.1.0 → 4.0.0

package/modal/Dialog.d.ts

@@ -0,0 +1,18 @@
+import { AriaDialogProps } from 'react-aria';
+import { OverlayTriggerProps } from '@react-types/overlays';
+import * as React from 'react';
+interface DialogProps extends AriaDialogProps {
+    /**
+     * An optional title for the dialog. If omitted, please provide an aria-label for accessibility.
+     */
+    title?: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare const Dialog: React.FC<DialogProps>;
+export declare const ModalTrigger: React.FC<OverlayTriggerProps & {
+    isDismissable?: boolean;
+} & {
+    children: (close: () => void) => JSX.Element;
+    label?: string | undefined;
+}>;
+export {};

package/modal/index.d.ts

@@ -1 +1 @@
-export { Modal } from './Modal';
+export { Dialog, ModalTrigger } from './Dialog';

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "main": "./index.cjs",
   "module": "./index.js",
   "types": "./index.d.ts",

package/select/HiddenMultiSelect.d.ts

@@ -0,0 +1,47 @@
+import { FocusableElement, RefObject } from '@react-types/shared';
+import { default as React, ReactNode } from 'react';
+import { MultiSelectState } from './useMultiSelectState';
+export interface AriaHiddenMultiSelectProps {
+    /**
+     * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
+     */
+    autoComplete?: string;
+    /** The text label for the select. */
+    label?: ReactNode;
+    /** HTML form input name. */
+    name?: string;
+    /** Sets the disabled state of the select and input. */
+    isDisabled?: boolean;
+    /** Sets the required state of the select and input. */
+    isRequired?: boolean;
+}
+export interface HiddenMultiSelectProps<T> extends AriaHiddenMultiSelectProps {
+    /** State for the select. */
+    state: MultiSelectState<T>;
+    /** A ref to the trigger element. */
+    triggerRef: RefObject<FocusableElement | null>;
+}
+interface AriaHiddenMultiSelectOptions extends AriaHiddenMultiSelectProps {
+    /** A ref to the hidden `<select>` element. */
+    selectRef?: RefObject<HTMLSelectElement | null>;
+}
+interface HiddenMultiSelectAria {
+    /** Props for the container element. */
+    containerProps: React.HTMLAttributes<FocusableElement>;
+    /** Props for the hidden input element. */
+    inputProps: React.InputHTMLAttributes<HTMLInputElement>;
+    /** Props for the hidden select element. */
+    selectProps: React.SelectHTMLAttributes<HTMLSelectElement>;
+}
+/**
+ * Provides the behavior and accessibility implementation for a hidden `<select>` element, which
+ * can be used in combination with `useSelect` to support browser form autofill, mobile form
+ * navigation, and native HTML form submission.
+ */
+export declare function useHiddenMultiSelect<T>({ autoComplete, name, isDisabled, isRequired, selectRef, }: AriaHiddenMultiSelectOptions, state: MultiSelectState<T>, triggerRef: RefObject<FocusableElement | null>): HiddenMultiSelectAria;
+/**
+ * Renders a hidden native `<select>` element, which can be used to support browser
+ * form autofill, mobile form navigation, and native form submission.
+ */
+export declare function HiddenMultiSelect<T>(props: HiddenMultiSelectProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/select/Select.d.ts

@@ -1,11 +1,74 @@
-import { default as React } from 'react';
-import { ListBoxItemProps, SelectProps as AriaSelectProps, ValidationResult } from 'react-aria-components';
-export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, 'children'> {
-    label?: string;
+import { CollectionChildren } from '@react-types/shared';
+import { useMultiSelectState } from './useMultiSelectState';
+import * as React from 'react';
+export type OptionItem = {
+    children?: never;
+    id: string;
+    name: string | React.ReactNode;
+    /** Textual representation of `name` in case it is not a string. Used for searching. */
+    textValue?: string;
+    /** Allow additional properties for an option. */
+    [prop: string]: unknown;
+};
+type OptionSection = {
+    children: OptionItem[];
+    name: string;
+};
+export type Option = OptionItem | OptionSection;
+export type SelectionMode = 'single' | 'multiple';
+type SelectProps = {
+    /** Whether the element should receive focus on render. */
+    autoFocus?: boolean;
+    children: CollectionChildren<Option>;
+    /** Sets the CSS [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. */
+    className?: string;
+    /** Sets the default open state of the field (uncontrolled). */
+    defaultOpen?: boolean;
+    /** The initial selected keys in the collection (uncontrolled). */
+    defaultSelectedKeys?: Parameters<typeof useMultiSelectState>['0']['defaultSelectedKeys'];
+    /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
+    disabledKeys?: Parameters<typeof useMultiSelectState>['0']['disabledKeys'];
+    excludeFromTabOrder?: boolean;
+    items: Option[];
+    /** Whether the field can be emptied. */
+    isClearable?: boolean;
+    /** Whether the field is disabled. */
+    isDisabled?: boolean;
+    /** Whether to show a button to select all items. */
+    isSelectableAll?: boolean;
+    /** Sets the open state of the field (controlled). */
+    isOpen?: boolean;
+    /** The content to display as the label. */
+    label: string;
+    /** Optional description */
     description?: string;
-    errorMessage?: string | ((validation: ValidationResult) => string);
-    items?: Iterable<T>;
-    children: React.ReactNode | ((item: T) => React.ReactNode);
-}
-export declare function Select<T extends object>({ label, description, errorMessage, children, items, ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare function Item(props: ListBoxItemProps): import("react/jsx-runtime").JSX.Element;
+    /** Placeholder value */
+    placeholder?: string;
+    /** Show selected items as tags below select */
+    showTags?: boolean;
+    /** Handler that is called when the select's open state changes. */
+    onOpenChange?: Parameters<typeof useMultiSelectState>['0']['onOpenChange'];
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: Parameters<typeof useMultiSelectState>['0']['onSelectionChange'];
+    /** The currently selected keys in the collection (controlled). */
+    selectedKeys?: Parameters<typeof useMultiSelectState>['0']['selectedKeys'];
+    /**
+     * The type of selection that is allowed in the collection.
+     * @default 'single'
+     */
+    selectionMode: SelectionMode;
+    /** The selection is valid or not  */
+    isInvalid?: boolean;
+    /** Error message to be displayed in case of invalid state*/
+    errorMessage?: string;
+    /** Whether the field is required. */
+    isRequired?: boolean;
+    /** Name of the field, for uncontrolled use */
+    name?: string;
+};
+export declare const SelectComponent: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "children" | "items"> & {
+    /** Item objects in the collection. */
+    options: Option[];
+} & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/select/SelectListBox.d.ts

@@ -0,0 +1,9 @@
+import { MultiSelectState } from './useMultiSelectState';
+import { AriaListBoxOptions } from '@react-aria/listbox';
+import * as React from 'react';
+interface ListBoxProps<T> extends AriaListBoxOptions<T> {
+    listBoxRef?: React.RefObject<HTMLUListElement>;
+    state: MultiSelectState<T>;
+}
+export declare const SelectListBox: <T>(props: ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/select/SelectPopover.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+type PopoverProps = {
+    children: React.ReactNode;
+    className?: string;
+    isOpen?: boolean;
+    onClose: () => void;
+    triggerRef: React.RefObject<HTMLButtonElement>;
+};
+export declare const SelectPopover: React.VFC<PopoverProps>;
+export {};

package/select/useMultiSelect.d.ts

@@ -0,0 +1,21 @@
+import { AriaListBoxOptions } from 'react-aria';
+import { HTMLAttributes, RefObject } from 'react';
+import { MultiSelectProps as MultiSelectStateProps, MultiSelectState } from './useMultiSelectState';
+import { AriaButtonProps } from '@react-types/button';
+import { AriaSelectProps } from '@react-types/select';
+type MultiSelectProps<T> = Omit<AriaSelectProps<T>, 'onSelectionChange'> & {
+    disallowEmptySelection?: boolean;
+    onSelectionChange?: MultiSelectStateProps<T>['onSelectionChange'];
+};
+interface MultiSelectAria<T> {
+    /** Props for the label element. */
+    labelProps: HTMLAttributes<HTMLElement>;
+    /** Props for the popup trigger element. */
+    triggerProps: AriaButtonProps;
+    /** Props for the element representing the selected value. */
+    valueProps: HTMLAttributes<HTMLElement>;
+    /** Props for the popup. */
+    menuProps: AriaListBoxOptions<T>;
+}
+export declare function useMultiSelect<T>(props: MultiSelectProps<T>, state: MultiSelectState<T>, ref: RefObject<HTMLElement>): MultiSelectAria<T>;
+export {};

package/select/useMultiSelectListState.d.ts

@@ -0,0 +1,15 @@
+import { ListState } from '@react-stately/list';
+import { Key, CollectionBase, MultipleSelection, Node } from '@react-types/shared';
+export interface MultiSelectListProps<T> extends CollectionBase<T>, MultipleSelection {
+}
+export interface MultiSelectListState<T> extends ListState<T> {
+    /** The keys for the currently selected items. */
+    selectedKeys: Set<Key>;
+    /** Sets the selected keys. */
+    setSelectedKeys(keys: Iterable<Key>): void;
+    /** The value of the currently selected items. */
+    selectedItems: Node<T>[] | null;
+    /** The type of selection. */
+    selectionMode: MultipleSelection['selectionMode'];
+}
+export declare function useMultiSelectListState<T extends object>(props: MultiSelectListProps<T>): MultiSelectListState<T>;

package/select/useMultiSelectState.d.ts

@@ -0,0 +1,25 @@
+import { MenuTriggerState } from '@react-stately/menu';
+import { Key } from 'react-aria';
+import { MultiSelectListState } from './useMultiSelectListState';
+import { OverlayTriggerProps } from '@react-types/overlays';
+import { AsyncLoadable, CollectionBase, FocusableProps, InputBase, LabelableProps, MultipleSelection, TextInputBase, Validation, Selection } from '@react-types/shared';
+import { FormValidationState } from '@react-stately/form';
+/** Added this for a better output, will see how this plays out */
+interface ArraySelection extends Omit<MultipleSelection, 'onSelectionChange'> {
+    onSelectionChange?: (value: Selection | Key | Key[]) => void;
+}
+export interface MultiSelectProps<T> extends CollectionBase<T>, AsyncLoadable, Omit<InputBase, 'isReadOnly'>, Validation, LabelableProps, TextInputBase, ArraySelection, FocusableProps, OverlayTriggerProps {
+    /**
+     * Whether the menu should automatically flip direction when space is limited.
+     * @default true
+     */
+    shouldFlip?: boolean;
+}
+export interface MultiSelectState<T> extends MultiSelectListState<T>, MenuTriggerState, FormValidationState {
+    /** Whether the select is currently focused. */
+    isFocused: boolean;
+    /** Sets whether the select is focused. */
+    setFocused(isFocused: boolean): void;
+}
+export declare function useMultiSelectState<T extends object>(props: MultiSelectProps<T>): MultiSelectState<T>;
+export {};

package/table/Table.d.ts

@@ -1,5 +1,6 @@
 import { RowProps, TableHeaderProps, ColumnProps, TableProps as AriaTableProps, CellProps, TableBody } from 'react-aria-components';
 export interface TableProps extends AriaTableProps {
+    /** @deprecated This variant will be replaced with a new scaling api accross all components. */
     narrow?: boolean;
     striped?: boolean;
 }

package/utils/useObserveElement.d.ts

@@ -0,0 +1,4 @@
+export default function useObserveElement(element: HTMLElement | null): {
+    width: number;
+    height: number;
+};

package/modal/Modal.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-interface MidasModal extends React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> {
-    /** Id for accessibility */
-    id: string;
-    /** Heading for the modal window */
-    title: string;
-    /** Whether the modal is open or not */
-    isOpen: boolean;
-    /** State handler to toggle isOpen */
-    onOpenChange: (isOpen: boolean) => void;
-}
-export declare const Modal: React.FC<MidasModal>;
-export {};

package/multi-select/MultiSelect.d.ts

@@ -1,28 +0,0 @@
-import { ValidationResult } from 'react-aria-components';
-import { Key } from 'react-stately';
-import * as React from 'react';
-interface MidasMultiSelect {
-    /** Label for multiselect */
-    label: string;
-    /** Description for multiselect */
-    description?: string;
-    /** Array of items that will be included in the list */
-    items: {
-        name: string;
-        id: string;
-    }[];
-    /** Handler for when list of selected item is changed */
-    onSelectionChange?: (selectedKeys: Set<Key>) => void;
-    /** Control selected keys */
-    selectedKeys?: string[];
-    /** Set list of pre-selected keys, or 'all' */
-    defaultSelectedKeys?: string[] | 'all';
-    /** Set MultiSelect in disabled state */
-    isDisabled?: boolean;
-    /** Set MultiSelect in invalid state */
-    isInvalid?: boolean;
-    /** Set error message as string or as a validation function */
-    errorMessage?: string | ((validation: ValidationResult) => string) | undefined;
-}
-export declare const MultiSelect: React.FC<MidasMultiSelect>;
-export {};

package/multi-select/index.d.ts

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