enefit-design-system 0.8.4-preview.2 → 0.9.2-ds.0

package/README.md

@@ -9,3 +9,5 @@ See the documentation at https://enefit-design-system.pages.dev
 3. Prepare the changes as part of PR.
 4. **Merge and squash** the changes with commit like `RELEASE <VERSION>` e.g. `RELEASE 0.6.1` into the `main` branch
 5. Make sure [`the proper workflow`](https://github.com/Enefit-Web/enefit-design-system/actions/workflows/release.yml) has succeeded
+
+.

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface AccordionProps {
+    id?: string;
+    title: ReactNode;
+    isOpen?: boolean;
+    children: ReactNode;
+    className?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}
+declare const Accordion: (props: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export default Accordion;

package/dist/Accordion/Accordion.js

@@ -1,15 +1,18 @@
 "use client";
-import { jsxs as g, jsx as s } from "react/jsx-runtime";
-import { useContext as q, useRef as x, useState as y, useEffect as d } from "react";
-import p from "../_virtual/index.js";
+import { jsxs as g, jsx as p } from "react/jsx-runtime";
+import { useContext as q, useRef as y, useState as x, useEffect as d } from "react";
+import n from "../_virtual/index.js";
 /* empty css                                */
+/* empty css                                */
+/* empty css                               */
 /* empty css                                 */
 /* empty css                              */
+/* empty css                                   */
+/* empty css                                   */
 /* empty css                                 */
 /* empty css                            */
 /* empty css                                  */
 /* empty css                            */
-/* empty css                            */
 import z from "../output/icons/IconChevronDownAltSm.js";
 /* empty css                 */
 import { AccordionContext as T } from "../AccordionGroup/AccordionGroup.js";
@@ -25,16 +28,29 @@ import "../Choice/Choice.js";
 import "../ChoiceCard/ChoiceCard.js";
 import "../DatePicker/DatePicker.js";
 import "../Dialog/Dialog.js";
-import k from "../Heading/Heading.js";
+/* empty css                   */
+import "../DsButton/DsButton.js";
+import "../DsCalendar/DsCalendar.js";
+import "../DsCombobox/DsCombobox.js";
+import "../DsCheckbox/DsCheckbox.js";
+import "../DsChoice/DsChoice.js";
+import "../DsForm/DsForm.js";
+import "../DsForm/DsFormContext.js";
+import "../DsInput/DsInput.js";
+import "../DsInputDate/DsInputDate.js";
+import "../DsInputFile/DsInputFile.js";
+import "../DsInputPhone/DsInputPhone.js";
+import "../DsNotification/DsNotification.js";
+import "../DsRadio/DsRadio.js";
+import "../DsSelect/DsSelect.js";
+import "../DsStepper/DsStepper.js";
+import "../DsTextarea/DsTextarea.js";
+import V from "../Heading/Heading.js";
 import "../InfoHint/InfoHint.js";
 /* empty css                 */
 import "react-dom";
-import { useFocusRing as B } from "../external/@react-aria/focus/dist/useFocusRing.js";
-import { useId as $ } from "../external/@react-aria/utils/dist/useId.js";
-import { mergeProps as G } from "../external/@react-aria/utils/dist/mergeProps.js";
-import { usePress as J } from "../external/@react-aria/interactions/dist/usePress.js";
 /* empty css                     */
-/* empty css                             */
+/* empty css                       */
 /* empty css                               */
 import "../Phone/PhoneSelect.js";
 /* empty css                 */
@@ -48,15 +64,20 @@ import "../Select/Select.js";
 /* empty css                        */
 /* empty css                   */
 /* empty css                 */
+/* empty css                          */
+/* empty css                     */
 import "../Switch/Switch.js";
 import "../SwitchGroup/SwitchGroup.js";
+import "../DsSwitch/DsSwitch.js";
+import "../Tab/Tab.js";
+import "../TabPanel/TabPanel.js";
 import "../Tabs/Tabs.js";
-/* empty css             */
 import "../Textarea/Textarea.js";
 import "../Textfield/Textfield.js";
 import "../Toast/Toast.js";
 /* empty css                       */
-import "../ChartNew/ChartNew.js";
+import "../Chart/Chart.js";
+import "../Chart/ChartContext.js";
 import "../Badge/Badge.js";
 import "../Avatar/Avatar.js";
 import "../ActionListGroup/ActionListGroup.js";
@@ -69,88 +90,96 @@ import "react-dom/server";
 /* empty css                                   */
 /* empty css             */
 /* empty css                         */
-const po = (N) => {
-  const c = q(T), { mode: f, selectedKeys: i, setSelectedKeys: n } = c ?? {}, {
-    id: o = "",
-    title: v,
-    isOpen: C,
-    children: H,
-    className: L,
-    "aria-label": P,
-    "aria-labelledby": A,
-    "aria-describedby": E
-  } = N, l = x(null), m = x(null), { isFocusVisible: R, focusProps: S } = B(), [t, r] = y(C), [w, u] = y(0), b = $(), h = $();
+/* empty css                         */
+import "../Card/Card.js";
+import "../Card/CardHeader.js";
+import "../Card/CardBody.js";
+import "../Card/CardFooter.js";
+import "../FileUpload/FileUpload.js";
+import "../FormFields/FormFields.js";
+import { useId as N } from "../external/@react-aria/utils/dist/useId.js";
+import { usePress as k } from "../external/@react-aria/interactions/dist/usePress.js";
+const jr = (v) => {
+  const m = q(T), { mode: u, selectedKeys: e, setSelectedKeys: a } = m ?? {}, {
+    id: r = "",
+    title: C,
+    isOpen: H,
+    children: L,
+    className: $,
+    "aria-label": A,
+    "aria-labelledby": E,
+    "aria-describedby": S
+  } = v, c = y(null), l = y(null), [o, i] = x(H), [w, b] = x(0), f = N(), h = N();
   d(() => {
-    c && (i?.includes(o) && r(!0), !i?.includes(o) && r(!1));
-  }, [c]);
+    m && (e?.includes(r) && i(!0), !e?.includes(r) && i(!1));
+  }, [m]);
   const I = () => {
-    c ? (f === "single" && (i?.includes(o) && (n([]), r(!1)), !i?.includes(o) && (n([o]), r(!0))), f === "multiple" && (i?.includes(o) && (r(!1), n(
-      (e) => e.filter((a) => a !== o)
-    )), !i?.includes(o) && (r(!0), n((e) => [...e, o])))) : r((e) => !e);
-  }, { pressProps: O } = J({
+    m ? (u === "single" && (e?.includes(r) && (a([]), i(!1)), !e?.includes(r) && (a([r]), i(!0))), u === "multiple" && (e?.includes(r) && (i(!1), a(
+      (t) => t.filter((s) => s !== r)
+    )), !e?.includes(r) && (i(!0), a((t) => [...t, r])))) : i((t) => !t);
+  }, { pressProps: O } = k({
     onPress: I
   });
   d(() => {
-    l.current && l.current.querySelectorAll(
+    c.current && c.current.querySelectorAll(
       'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    ).forEach((a) => {
-      a.setAttribute("tabindex", t ? "0" : "-1");
+    ).forEach((s) => {
+      s.setAttribute("tabindex", o ? "0" : "-1");
     });
-  }, [t]), d(() => {
-    const e = m.current;
-    if (!e)
+  }, [o]), d(() => {
+    const t = l.current;
+    if (!t)
       return;
-    u(e.scrollHeight);
-    const a = (V) => {
-      u(V[0].target.scrollHeight);
-    }, _ = new ResizeObserver(a);
-    return _.observe(e), () => {
-      _.unobserve(e);
+    b(t.scrollHeight);
+    const s = (K) => {
+      b(K[0].target.scrollHeight);
+    }, _ = new ResizeObserver(s);
+    return _.observe(t), () => {
+      _.unobserve(t);
     };
-  }, [m]);
-  const j = p("eds-accordion", L), D = p("eds-accordion__button", {
-    "eds-accordion__button--open": t,
-    "eds-accordion__button--focused": R,
-    "eds-accordion__button--closed": !t
-  }), F = p("eds-accordion__icon", {
-    "eds-accordion__icon--rotate": t
-  }), K = p("eds-accordion__panel", {
-    "eds-accordion__panel--closed": !t
+  }, [l]);
+  const P = n("eds-accordion", $), R = n("eds-accordion__button", {
+    "eds-accordion__button--open": o,
+    "eds-accordion__button--closed": !o
+  }), j = n("eds-accordion__icon", {
+    "eds-accordion__icon--rotate": o
+  }), D = n("eds-accordion__panel", {
+    "eds-accordion__panel--closed": !o
   });
-  return /* @__PURE__ */ g("div", { className: j, children: [
-    /* @__PURE__ */ s(k, { variant: "h5", as: "h3", className: "eds-accordion__header", children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ g("div", { className: P, children: [
+    /* @__PURE__ */ p(V, { variant: "h5", as: "h3", className: "eds-accordion__header", children: /* @__PURE__ */ g(
       "button",
       {
-        ...G(S, O),
+        ...O,
         type: "button",
-        id: b,
-        className: D,
-        "aria-expanded": t,
+        id: f,
+        className: R,
+        "aria-expanded": o,
         "aria-controls": h,
-        "aria-label": P,
-        "aria-labelledby": A,
-        "aria-describedby": E,
+        "aria-label": A,
+        "aria-labelledby": E,
+        "aria-describedby": S,
         children: [
-          /* @__PURE__ */ s("span", { className: "eds-accordion__title", children: v }),
-          /* @__PURE__ */ s("span", { className: F, children: /* @__PURE__ */ s(z, { "aria-hidden": !0 }) })
+          /* @__PURE__ */ p("span", { className: "eds-accordion__title", children: C }),
+          /* @__PURE__ */ p("span", { className: j, children: /* @__PURE__ */ p(z, { "aria-hidden": !0 }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ p(
       "div",
       {
         role: "region",
         id: h,
-        className: K,
-        ref: l,
-        style: t ? { height: w } : { height: 0 },
-        "aria-labelledby": b,
-        "aria-hidden": !t,
-        children: /* @__PURE__ */ s("div", { className: "eds-accordion__panel-wrapper", ref: m, children: H })
+        className: D,
+        ref: c,
+        style: o ? { height: w } : { height: 0 },
+        "aria-labelledby": f,
+        "aria-hidden": !o,
+        children: /* @__PURE__ */ p("div", { className: "eds-accordion__panel-wrapper", ref: l, children: L })
       }
     )
   ] });
 };
 export {
-  po as default
+  jr as default
 };

package/dist/Accordion/Accordion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/AccordionGroup/AccordionGroup.d.ts

@@ -0,0 +1,15 @@
+import { default as React, Dispatch, ReactNode, SetStateAction } from 'react';
+export interface AccordionGroupProps {
+    mode?: 'single' | 'multiple';
+    selectedKeys?: string[];
+    children: ReactNode;
+    className?: string;
+}
+export interface AccordionGroupState {
+    mode: AccordionGroupProps['mode'];
+    selectedKeys: AccordionGroupProps['selectedKeys'];
+    setSelectedKeys: Dispatch<SetStateAction<string[]>>;
+}
+export declare const AccordionContext: React.Context<AccordionGroupState>;
+declare const AccordionGroup: (props: AccordionGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default AccordionGroup;

package/dist/AccordionGroup/AccordionGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ActionList/ActionList.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ActionListProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    variant?: Variant;
+}
+type Variant = 'default' | 'outline' | 'ghost';
+export declare const useActionListVariant: () => Variant;
+declare const ActionList: import('react').ForwardRefExoticComponent<ActionListProps & import('react').RefAttributes<HTMLDivElement>>;
+export default ActionList;

package/dist/ActionList/ActionList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ActionListGroup/ActionListGroup.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ActionListGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare const ActionListGroup: import('react').ForwardRefExoticComponent<ActionListGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export default ActionListGroup;

package/dist/ActionListGroup/ActionListGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ActionListItem/ActionListItem.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { AriaButtonProps } from 'react-aria';
+export interface ActionListItemBaseProps {
+    label?: string;
+    labelWeight?: 'bold' | 'regular';
+    description?: string;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    className?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    /**
+     * @deprecated Use `as` instead
+     */
+    element?: 'button' | 'div' | 'a' | 'label';
+    as?: 'button' | 'div' | 'a' | 'label';
+    isDisabled?: boolean;
+}
+type ButtonProps = AriaButtonProps<'button'>;
+type AnchorProps = AriaButtonProps<'a'>;
+type LabelProps = HTMLAttributes<HTMLDivElement>;
+type DivProps = HTMLAttributes<HTMLDivElement>;
+export type ActionListItemProps = ActionListItemBaseProps & (ButtonProps | AnchorProps | DivProps | LabelProps);
+declare const ActionListItem: import('react').ForwardRefExoticComponent<ActionListItemProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>>;
+export default ActionListItem;

package/dist/ActionListItem/ActionListItem.js

@@ -1,70 +1,67 @@
 "use client";
-import { jsx as e, jsxs as u, Fragment as E } from "react/jsx-runtime";
-import { forwardRef as O } from "react";
+import { jsx as e, jsxs as u, Fragment as y } from "react/jsx-runtime";
+import { forwardRef as B } from "react";
 /* empty css                   */
-import c from "../_virtual/index.js";
-import { useActionListVariant as T } from "../ActionList/ActionList.js";
-import { useFocusRing as W } from "../external/@react-aria/focus/dist/useFocusRing.js";
-import { mergeProps as $ } from "../external/@react-aria/utils/dist/mergeProps.js";
-import { useObjectRef as q } from "../external/@react-aria/utils/dist/useObjectRef.js";
-import { useButton as z } from "../external/@react-aria/button/dist/useButton.js";
-import { useLink as G } from "../external/@react-aria/link/dist/useLink.js";
-const H = O((o, h) => {
+import n from "../_virtual/index.js";
+import { useActionListVariant as D } from "../ActionList/ActionList.js";
+import { useObjectRef as E } from "../external/@react-aria/utils/dist/useObjectRef.js";
+import { useButton as F } from "../external/@react-aria/button/dist/useButton.js";
+import { useLink as O } from "../external/@react-aria/link/dist/useLink.js";
+const T = B((l, p) => {
   const {
-    label: N,
-    labelWeight: l = "bold",
-    description: n,
+    label: h,
+    labelWeight: c = "bold",
+    description: o,
     iconLeft: r,
     iconRight: d,
-    className: v,
-    labelClassName: g,
-    descriptionClassName: x,
-    element: L,
-    as: _,
-    isDisabled: P = !1,
+    className: N,
+    labelClassName: v,
+    descriptionClassName: _,
+    element: $,
+    as: L,
+    isDisabled: x = !1,
     ...m
-  } = o, f = T(), s = _ || L || "div", C = s === "button", R = s === "a", b = s === "label", A = C || R || b, { isFocusVisible: j, focusProps: p } = W(), i = c(
+  } = l, f = D(), t = L || $ || "div", g = t === "button", C = t === "a", b = t === "label", P = g || C || b, i = n(
     "eds-action-list-item",
     {
       [`eds-action-list-item--${f}`]: f,
       "eds-action-list-item--as-label": b,
-      "eds-action-list-item--focus": j,
-      "eds-action-list-item--interactive": A,
-      "eds-action-list-item--disabled": P === !0
+      "eds-action-list-item--interactive": P,
+      "eds-action-list-item--disabled": x === !0
     },
-    v
-  ), k = c(
+    N
+  ), A = n(
     "eds-action-list-item__label",
     {
-      "eds-label-default-600": l === "bold",
-      "eds-label-default-400": l === "regular"
+      "eds-label-default-600": c === "bold",
+      "eds-label-default-400": c === "regular"
     },
-    g
-  ), w = c(
+    v
+  ), R = n(
     "eds-action-list-item__description",
     "eds-text-line-small-400",
-    x
-  ), a = /* @__PURE__ */ u(E, { children: [
+    _
+  ), a = /* @__PURE__ */ u(y, { children: [
     r && /* @__PURE__ */ e("div", { className: "eds-action-list-item__leading", children: r }),
     /* @__PURE__ */ u("div", { className: "eds-action-list-item__text-section", children: [
-      /* @__PURE__ */ e("div", { className: k, children: N }),
-      n && /* @__PURE__ */ e("div", { className: w, children: n })
+      /* @__PURE__ */ e("div", { className: A, children: h }),
+      o && /* @__PURE__ */ e("div", { className: R, children: o })
     ] }),
     d && /* @__PURE__ */ e("div", { className: "eds-action-list-item__trailing", children: d })
-  ] }), t = q(h), { buttonProps: B } = z(
-    { elementType: s, ...o },
-    t
-  ), F = $(B, p), { linkProps: I } = G(
-    { ...o, elementType: s },
-    t
-  ), y = $(I, p), V = m, D = m;
-  switch (s) {
+  ] }), s = E(p), { buttonProps: j } = F(
+    { elementType: t, ...l },
+    s
+  ), { linkProps: w } = O(
+    { ...l, elementType: t },
+    s
+  ), I = m, k = m;
+  switch (t) {
     case "button":
       return /* @__PURE__ */ e(
         "button",
         {
-          ...F,
-          ref: t,
+          ...j,
+          ref: s,
           className: i,
           children: a
         }
@@ -73,8 +70,8 @@ const H = O((o, h) => {
       return /* @__PURE__ */ e(
         "a",
         {
-          ...y,
-          ref: t,
+          ...w,
+          ref: s,
           className: i,
           children: a
         }
@@ -83,8 +80,8 @@ const H = O((o, h) => {
       return /* @__PURE__ */ e(
         "div",
         {
-          ...V,
-          ref: t,
+          ...I,
+          ref: s,
           className: i,
           children: a
         }
@@ -93,15 +90,15 @@ const H = O((o, h) => {
       return /* @__PURE__ */ e(
         "div",
         {
-          ...D,
-          ref: t,
+          ...k,
+          ref: s,
           className: i,
           children: a
         }
       );
   }
 });
-H.displayName = "ActionListItem";
+T.displayName = "ActionListItem";
 export {
-  H as default
+  T as default
 };

package/dist/ActionListItem/ActionListItem.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { AriaComboBoxProps } from 'react-aria';
+type DescriptionSeverity = 'regular' | 'warning';
+export interface AutocompleteProps<T> extends AriaComboBoxProps<T> {
+    errorMessage?: string;
+    descriptionSeverity?: DescriptionSeverity;
+    labelSuffix?: string;
+    tooltipTrigger?: React.ReactNode;
+    clearButtonAriaLabel?: string;
+    isOpen?: boolean;
+    isNonModal?: boolean;
+}
+declare const Autocomplete: <T extends object>(props: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Autocomplete;