@midas-ds/components 16.3.3 → 16.4.1

package/chunks/SearchField-Jqn3dKGs.js

@@ -0,0 +1,127 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { s as C } from "./TextField.module-DZslrEPC.js";
+import { B as F } from "./Button-BYrLbzir.js";
+import { C as N } from "./ClearButton-DavPe5uU.js";
+import { c as l } from "./clsx-AexbMWKp.js";
+import * as x from "react";
+import { useSearchFieldState as j } from "react-stately";
+import { useSearchField as p } from "react-aria";
+import { F as _ } from "./FieldError-Bra5aRT3.js";
+import { c as B } from "./createLucideIcon-D4r5Phnh.js";
+import { u as D } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import '../assets/SearchField.css';const E = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+], k = B("search", E), P = "_container_basio_1", T = "_inner_basio_10", w = "_inputContainer_basio_15", I = "_medium_basio_21", K = "_icon_basio_26", L = "_clear_basio_39", M = "_input_basio_15", a = {
+  container: P,
+  inner: T,
+  inputContainer: w,
+  medium: I,
+  icon: K,
+  clear: L,
+  input: M
+}, R = { search: "Search" }, V = { search: "Sök" }, O = {
+  en: R,
+  sv: V
+};
+function $(o) {
+  return !!o?.length;
+}
+const Z = ({
+  errorPosition: o = "top",
+  size: i = "large",
+  ...e
+}) => {
+  const { value: n, setValue: m } = j(e), f = D(O), d = x.useRef(null), { inputProps: r, isInvalid: s, validationErrors: h, clearButtonProps: v } = p(
+    {
+      ...e,
+      label: e.placeholder,
+      validationBehavior: "native"
+    },
+    { value: n, setValue: m },
+    d
+  ), S = ({ target: c }) => m(c.value), g = () => m(""), b = () => {
+    if (e.validate && $(e.validate(n)) || s || !n) {
+      d.current?.focus();
+      return;
+    }
+    e.onSubmit && e.onSubmit(n);
+  }, y = ({ key: c }) => {
+    c === "Enter" && b();
+  };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: l(a.container, e.className),
+      "data-disabled": r.disabled,
+      children: [
+        o === "top" && /* @__PURE__ */ t(_, { isInvalid: s, children: e.errorMessage ?? h.join(" ") }),
+        /* @__PURE__ */ u("div", { className: a.inner, children: [
+          /* @__PURE__ */ u(
+            "div",
+            {
+              className: l(a.inputContainer, {
+                [a.medium]: i === "medium"
+              }),
+              children: [
+                /* @__PURE__ */ t(
+                  k,
+                  {
+                    size: 20,
+                    className: a.icon
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  "input",
+                  {
+                    ...r,
+                    ...r.disabled && { "data-disabled": !0 },
+                    className: l(
+                      C.input,
+                      a.input,
+                      r.className,
+                      { [a.medium]: i === "medium" }
+                    ),
+                    ref: d,
+                    onChange: S,
+                    value: n,
+                    "aria-invalid": s,
+                    onKeyDown: y,
+                    "aria-label": e.placeholder,
+                    "aria-labelledby": ""
+                  }
+                ),
+                n.length > 0 && /* @__PURE__ */ t(
+                  N,
+                  {
+                    ...v,
+                    onPress: g,
+                    size: i,
+                    className: l(a.clear, {
+                      [a.medium]: i === "medium"
+                    })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            F,
+            {
+              size: i,
+              isDisabled: e.isDisabled,
+              excludeFromTabOrder: !0,
+              onPress: b,
+              type: "button",
+              children: e.buttonText ? e.buttonText : f.format("search")
+            }
+          )
+        ] }),
+        o === "bottom" && /* @__PURE__ */ t(_, { isInvalid: s, children: e.errorMessage ?? h.join(" ") })
+      ]
+    }
+  );
+};
+export {
+  Z as S
+};

package/clear-button/ClearButton.d.ts

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

package/clear-button/index.d.ts

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

package/clear-button/index.js

@@ -0,0 +1,4 @@
+import { C as t } from "../chunks/ClearButton-DavPe5uU.js";
+export {
+  t as ClearButton
+};

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ColorSchemeSwitch } from './ColorSchemeSwitch';
+declare const meta: Meta<typeof ColorSchemeSwitch>;
+export default meta;
+type Story = StoryObj<typeof ColorSchemeSwitch>;
+export declare const Primary: Story;

package/combobox/ComboBox.stories.d.ts

@@ -0,0 +1,44 @@
+import { StoryObj } from '@storybook/react-vite';
+import { optionsWithSections } from '../utils/tests';
+import { ComboBox } from './ComboBox';
+type Item = (typeof options)[0];
+type Section = (typeof optionsWithSections)[0];
+type Story<T extends object = Item> = StoryObj<typeof ComboBox<T>>;
+declare const options: {
+    id: number;
+    name: string;
+}[];
+declare const _default: {
+    component: typeof ComboBox;
+    title: string;
+    tags: string[];
+    args: {
+        label: string;
+        placeholder: string;
+        description: string;
+        errorMessage: string;
+        errorPosition: "top";
+        size: "large";
+    };
+    argTypes: {
+        placeholder: {
+            control: "text";
+        };
+    };
+    render: (args: import('./ComboBox').ComboBoxProps<{
+        id: number;
+        name: string;
+    }>) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;
+export declare const Primary: Story;
+export declare const Invalid: Story;
+export declare const DS1253: Story;
+export declare const MediumSizeInvalid: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Required: Story;
+export declare const Sectioned: Story<Section>;
+export declare const PerformanceTest: Story;
+export declare const AsynchronousLoadingWithEmptyMessage: Story;
+export declare const InfiniteScroll: Story;

package/date-field/DateField.d.ts

@@ -13,5 +13,9 @@ export interface DateFieldProps extends AriaDateFieldProps<DateValue> {
     size?: Size;
     /** An assistive text that helps the user understand the field better. Will be hidden in a popover with an info icon button. */
     popover?: InfoPopoverProps;
+    /** Show a clear button to remove the selected date
+     * @default false
+     */
+    isClearable?: boolean;
 }
 export declare const DateField: React.FC<DateFieldProps>;

package/date-field/DateField.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DateField } from './DateField';
+type Story = StoryObj<typeof DateField>;
+declare const _default: Meta<typeof DateField>;
+export default _default;
+/** Don't put format in description, it changes with browser language settings! */
+export declare const Primary: Story;
+export declare const Invalid: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+/** When using uncontrolled value */
+export declare const WithDefaultValue: Story;
+export declare const WithClearButton: Story;

package/date-field/index.js

@@ -1,4 +1,4 @@
-import { D as t } from "../chunks/DateField-DPJrihTz.js";
+import { D as t } from "../chunks/DateField-D9CEvqnd.js";
 import { a as r, b as o, D as p } from "../chunks/DateInputDivider-CkTB5q5k.js";
 export {
   t as DateField,

package/date-field/intl/translations.json.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+  "en": {
+    "clear": "Clear date"
+  },
+  "sv": {
+    "clear": "Rensa datum"
+  }
+}
+;
+
+export default _default;

package/date-picker/DatePicker.d.ts

@@ -13,5 +13,9 @@ export interface DatePickerProps extends AriaDatePickerProps<DateValue> {
     size?: Size;
     /** An assistive text that helps the user understand the field better. Will be hidden in a popover with an info icon button. */
     popover?: InfoPopoverProps;
+    /** Show a clear button to remove the selected date
+     * @default false
+     */
+    isClearable?: boolean;
 }
 export declare const DatePicker: React.FC<DatePickerProps>;

package/date-picker/DatePicker.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DatePicker } from './DatePicker';
+declare const meta: Meta<typeof DatePicker>;
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+export declare const Primary: Story;
+export declare const WithTime: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
+export declare const Required: Story;
+export declare const CustomValiation: Story;
+export declare const ControlledState: Story;
+export declare const WithClearButton: Story;

package/date-picker/DatePickerInputField.d.ts

@@ -1,6 +1,6 @@
 import { DatePickerProps } from './DatePicker';
 import * as React from 'react';
-interface DatePickerInputFieldProps extends Pick<DatePickerProps, 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'size'> {
+interface DatePickerInputFieldProps extends Pick<DatePickerProps, 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'size' | 'isClearable'> {
     children?: React.ReactNode;
 }
 export declare const DatePickerInputField: React.FC<DatePickerInputFieldProps>;

package/date-picker/DateRangePicker.d.ts

@@ -13,5 +13,9 @@ export interface DateRangePickerProps extends AriaDateRangePickerProps<DateValue
     size?: Size;
     /** An assistive text that helps the user understand the field better. Will be hidden in a popover with an info icon button. */
     popover?: InfoPopoverProps;
+    /** Show a clear button to remove the selected date range
+     * @default false
+     */
+    isClearable?: boolean;
 }
 export declare const DateRangePicker: React.FC<DateRangePickerProps>;

package/date-picker/DateRangePicker.stories.d.ts

@@ -0,0 +1,38 @@
+import { StoryObj } from '@storybook/react-vite';
+import { DateRangePicker } from './DateRangePicker';
+type Story = StoryObj<typeof DateRangePicker>;
+declare const _default: {
+    component: import('react').FC<import('./DateRangePicker').DateRangePickerProps>;
+    title: string;
+    tags: string[];
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    selector: string;
+                    enabled: boolean;
+                }[];
+            };
+            options: {
+                rules: {
+                    'color-contrast': {
+                        enabled: boolean;
+                    };
+                };
+            };
+        };
+    };
+    args: {
+        label: string;
+        description: string;
+        errorMessage: string;
+        errorPosition: "top";
+    };
+};
+export default _default;
+export declare const Primary: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
+export declare const WithClearButton: Story;

package/date-picker/index.js

@@ -1,4 +1,4 @@
-import { D as r, a as t } from "../chunks/DateRangePicker-DzgK_p0d.js";
+import { D as r, a as t } from "../chunks/DateRangePicker-DGfdhIjR.js";
 export {
   r as DatePicker,
   t as DateRangePicker

package/date-picker/intl/translations.json.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+  "en": {
+    "clear": "Clear date"
+  },
+  "sv": {
+    "clear": "Rensa datum"
+  }
+}
+;
+
+export default _default;

package/date-picker/utils.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerState, DateRangePickerState } from 'react-aria-components';
+export declare const isRangePickerState: (state: DateRangePickerState | DatePickerState | null) => state is DateRangePickerState;

package/file-upload/DropZone.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DropZone } from './FileUpload';
+declare const meta: Meta<typeof DropZone>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/file-upload/FileUpload.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react-vite';
+import { DropZone } from './FileUpload';
+type Story = StoryObj<typeof DropZone>;
+declare const _default: {
+    component: import('react').FC<import('react-aria-components').DropZoneProps>;
+    title: string;
+    tags: string[];
+    args: {};
+};
+export default _default;
+export declare const DropIt: Story;

package/grid/Grid.stories.d.ts

@@ -0,0 +1,30 @@
+declare const _default: {
+    component: import('react').FC<import('./Grid').GridProps>;
+    subcomponents: {
+        GridItem: import('react').FC<import('./GridItem').GridItemProps>;
+    };
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        isContained: {
+            control: {
+                type: "boolean";
+            };
+        };
+        removeMargins: {
+            control: {
+                type: "boolean";
+            };
+        };
+    };
+};
+export default _default;
+export declare const Primary: {
+    args: {};
+    render: ({ ...args }: {
+        [x: string]: any;
+    }) => import("react/jsx-runtime").JSX.Element;
+};

package/heading/Heading.stories.d.ts

@@ -0,0 +1,30 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Heading } from './Heading';
+type Story = StoryObj<typeof Heading>;
+declare const _default: {
+    component: import('react').FC<import('./Heading').HeadingProps>;
+    title: string;
+    tags: string[];
+    args: {
+        isExpressive: false;
+        enableMargins: false;
+    };
+    argTypes: {
+        level: {
+            control: {
+                max: number;
+                min: number;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Heading1: Story;
+export declare const ExpressiveHeading1: Story;
+export declare const Heading2: Story;
+export declare const ExpressiveHeading2: Story;
+export declare const Heading3: Story;
+export declare const ExpressiveHeading3: Story;
+export declare const ExpressiveHeading4: Story;
+export declare const ExpressiveHeading5: Story;
+export declare const ChangeSemanticElement: Story;

package/index.js

@@ -10,9 +10,9 @@ import { C as R } from "./chunks/Checkbox-BTAfwDxU.js";
 import { C as F } from "./chunks/CheckboxGroup-C6LIpj_R.js";
 import { C as v } from "./chunks/ColorSchemeSwitch-CaqrCGTA.js";
 import { C as h, a as H, b as y } from "./chunks/ComboBox-BXcuyHPd.js";
-import { D as N } from "./chunks/DateField-DPJrihTz.js";
+import { D as N } from "./chunks/DateField-D9CEvqnd.js";
 import { a as E, b as Q, D as Z } from "./chunks/DateInputDivider-CkTB5q5k.js";
-import { D as q, a as J } from "./chunks/DateRangePicker-DzgK_p0d.js";
+import { D as q, a as J } from "./chunks/DateRangePicker-DGfdhIjR.js";
 import { F as O } from "./chunks/FieldError-Bra5aRT3.js";
 import { D as V, F as W } from "./chunks/FileUpload-h1PxqQmb.js";
 import { G as Y } from "./chunks/Grid-B-WgMwON.js";
@@ -28,7 +28,7 @@ import { M as Bo } from "./chunks/Dialog-DprWZBKT.js";
 import { P as So } from "./chunks/Popover-BcEtFiU1.js";
 import { P as Io } from "./chunks/ProgressBar-67lCngwJ.js";
 import { R as Po, a as Ro } from "./chunks/Radio-XQA8CylD.js";
-import { S as Fo } from "./chunks/SearchField-CxoPi6Ql.js";
+import { S as Fo } from "./chunks/SearchField-Jqn3dKGs.js";
 import { S as vo } from "./chunks/Select-BNCz_ox4.js";
 import { S as ho } from "./chunks/Select-CyYUhMOg.js";
 import { S as yo } from "./chunks/Skeleton-DqIHQLQl.js";

package/info-banner/InfoBanner.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react-vite';
+import { default as React } from 'react';
+import { InfoBanner } from './InfoBanner';
+type Story = StoryObj<typeof InfoBanner>;
+declare const _default: {
+    component: React.FC<import('./InfoBanner').InfoBannerProps>;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Info: Story;
+export declare const Important: Story;
+export declare const Dismissable: Story;
+export declare const Controlled: Story;

package/label/Label.stories.d.ts

@@ -0,0 +1,10 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Label } from './Label';
+type Story = StoryObj<typeof Label>;
+declare const _default: {
+    component: import('react').FC<import('react-aria-components').LabelProps>;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Primary: Story;

package/layout/Layout.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Layout } from './Layout';
+declare const meta: Meta<typeof Layout>;
+export default meta;
+type Story = StoryObj<typeof Layout>;
+export declare const Primary: Story;
+export declare const External: Story;
+export declare const OnlyHeader: Story;
+export declare const Navbar: Story;

package/legacy-select/LegacySelect.stories.d.ts

@@ -0,0 +1,27 @@
+import { StoryObj } from '@storybook/react-vite';
+import { LegacySelect } from '.';
+type Story = StoryObj<typeof LegacySelect>;
+declare const _default: {
+    component: import('react').ForwardRefExoticComponent<Omit<import('./types').SelectProps, "children" | "items"> & {
+        options: import('..').ListBoxOption[];
+    } & import('react').RefAttributes<HTMLButtonElement>>;
+    title: string;
+    tags: string[];
+    args: {
+        description: string;
+        isDisabled: false;
+        isSelectableAll: false;
+        label: string;
+        options: {
+            name: string;
+            id: string;
+        }[];
+        placeholder: string;
+        selectionMode: "single";
+        showTags: false;
+        errorPosition: "top";
+        size: "large";
+    };
+};
+export default _default;
+export declare const Primary: Story;

package/link/Link.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Link } from './Link';
+declare const meta: Meta<typeof Link>;
+export default meta;
+type Story = StoryObj<typeof Link>;
+export declare const Primary: Story;
+export declare const PrimaryDisabled: Story;
+export declare const ExternalLink: Story;
+export declare const DownloadLink: Story;
+export declare const Standalone: Story;
+export declare const StandaloneDisabled: Story;
+export declare const ExternalLinkStandalone: Story;
+export declare const DownloadLinkStandalone: Story;
+export declare const CustomIcon: Story;

package/link-button/LinkButton.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { LinkButton } from './LinkButton';
+declare const meta: Meta<typeof LinkButton>;
+export default meta;
+type Story = StoryObj<typeof LinkButton>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const Previous: Story;
+export declare const Disabled: Story;
+export declare const AppLink: Story;
+export declare const Danger: Story;

package/logo/Logo.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Logo } from './Logo';
+declare const meta: Meta<typeof Logo>;
+export default meta;
+type Story = StoryObj<typeof Logo>;
+export declare const Primary: Story;
+export declare const Monochrome: Story;

package/menu/Menu.stories.d.ts

@@ -0,0 +1,34 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Menu } from './Menu';
+interface Item {
+    id: string | number;
+    name: string;
+    children?: Item[];
+    [prop: string]: unknown;
+}
+type Story = StoryObj<typeof Menu<Item>>;
+declare const _default: {
+    title: string;
+    component: <T extends import('./Menu').MenuItemObject>({ className, size, ...rest }: import('./Menu').MenuProps<T>) => import("react/jsx-runtime").JSX.Element;
+    subcomponents: {
+        MenuItem: <T extends import('./Menu').MenuItemObject>(props: import('./MenuItem').MenuItemProps<T>) => import("react/jsx-runtime").JSX.Element;
+    };
+    render: (args: import('./Menu').MenuProps<import('./Menu').MenuItemObject>) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        children: (item: import('./Menu').MenuItemObject) => import("react/jsx-runtime").JSX.Element;
+        items: {
+            id: number;
+            name: string;
+        }[];
+    };
+};
+export default _default;
+export declare const Primary: Story;
+export declare const ControlledSingleSelection: Story;
+export declare const ControlledMultipleSelection: Story;
+export declare const Sections: Story;
+export declare const Separators: Story;
+export declare const TextSlots: Story;
+export declare const MultiSelectWithDescriptions: Story;
+export declare const DisabledItems: Story;
+export declare const SubMenus: Story;

package/modal/Dialog.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Modal } from './Dialog';
+type Story = StoryObj<typeof Modal>;
+declare const _default: Meta<typeof Modal>;
+export default _default;
+export declare const Default: Story;
+export declare const NotDismissable: Story;
+/**
+ * For special cases when modal should not be closable without taking further action
+ */
+export declare const HiddenCloseButton: Story;
+export declare const EmptyTitle: Story;
+export declare const Scrollable: Story;
+export declare const DS1282: Story;
+export declare const LongTitle: Story;

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "16.3.3",
+  "version": "16.4.1",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",

package/popover/Popover.stories.d.ts

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Popover } from './Popover';
+import { DialogTrigger } from 'react-aria-components';
+type Story = StoryObj<typeof Popover>;
+declare const _default: {
+    component: typeof Popover;
+    subcomponents: {
+        DialogTrigger: typeof DialogTrigger;
+    };
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const Primary: Story;
+export declare const Placement: Story;

package/progress-bar/ProgressBar.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ProgressBar } from './ProgressBar';
+type Story = StoryObj<typeof ProgressBar>;
+declare const _default: {
+    component: import('react').FC<import('./ProgressBar').ProgressBarProps>;
+    title: string;
+    tags: string[];
+    args: {
+        isIndeterminate: false;
+    };
+};
+export default _default;
+export declare const Primary: Story;
+export declare const WithoutLabels: Story;
+export declare const IsIndeterminate: Story;