@stihl-design-system/components 1.0.0-RC.11 → 1.0.0-RC.13

package/chunks/Dialog.CudsqNag.js

@@ -0,0 +1,148 @@
+"use client";
+import { j as r } from "./jsx-runtime.C115EyI4.js";
+import { c as l } from "./index.CvOaL64Y.js";
+import { useRef as h, useState as x, useEffect as q } from "react";
+import { DSButton as j } from "../button.M4nXjcUn.js";
+import { g as B } from "./helpers.B1JT5ShS.js";
+import '../assets/Dialog.BgzebVk4.css';const E = "ds-dialog_root_1e2qq_5", C = "ds-dialog_content-wrapper_1e2qq_159", F = "ds-dialog_content-wrapper--no-footer_1e2qq_165", W = "ds-dialog_close-button_1e2qq_173", k = "ds-dialog_header_1e2qq_186", R = "ds-dialog_content_1e2qq_159", y = "ds-dialog_footer_1e2qq_188", z = "ds-dialog_header--scrollable_1e2qq_209", L = "ds-dialog_header--close-button_1e2qq_218", M = "ds-dialog_content--no-footer_1e2qq_231", H = "ds-dialog_footer--scrollable_1e2qq_238", o = {
+  root: E,
+  "content-wrapper": "ds-dialog_content-wrapper_1e2qq_159",
+  contentWrapper: C,
+  "content-wrapper--no-footer": "ds-dialog_content-wrapper--no-footer_1e2qq_165",
+  contentWrapperNoFooter: F,
+  "close-button": "ds-dialog_close-button_1e2qq_173",
+  closeButton: W,
+  header: k,
+  content: R,
+  footer: y,
+  "header--scrollable": "ds-dialog_header--scrollable_1e2qq_209",
+  headerScrollable: z,
+  "header--close-button": "ds-dialog_header--close-button_1e2qq_218",
+  headerCloseButton: L,
+  "content--no-footer": "ds-dialog_content--no-footer_1e2qq_231",
+  contentNoFooter: M,
+  "footer--scrollable": "ds-dialog_footer--scrollable_1e2qq_238",
+  footerScrollable: H
+}, I = ({ tabIndex: n }) => {
+  if (n || n === 0)
+    throw new Error(
+      B(
+        "DSDialog",
+        "Do not pass the tabindex property to the DSDialog component as it is not interactive and does not receive focus. The DSDialogs contents, including the close button contained in the DSDialog, can receive focus and be interactive."
+      )
+    );
+}, G = ({
+  children: n,
+  className: b,
+  closeButtonLabel: m = "Close dialog",
+  disableBackdropClose: D = !1,
+  footer: s,
+  header: S,
+  hideCloseButton: a = !1,
+  isOpen: d = !1,
+  onClose: c,
+  ...i
+}) => {
+  if (process.env.NODE_ENV !== "production") {
+    const { tabIndex: e } = i;
+    I({
+      tabIndex: e
+    });
+  }
+  const t = h(null), _ = h(null), [f, v] = x(!1);
+  q(() => {
+    const e = _.current;
+    if (e) {
+      const p = () => {
+        v(
+          e.scrollHeight > e.clientHeight
+        );
+      };
+      p();
+      const g = new ResizeObserver(p);
+      return g.observe(e), () => {
+        g.disconnect();
+      };
+    }
+  }, []), q(() => {
+    const e = t.current;
+    if (e)
+      return e.addEventListener("close", u), d ? e.showModal() : e.close(), () => {
+        e.removeEventListener("close", u);
+      };
+  }, [d, c]);
+  const u = () => {
+    c && c();
+  }, N = (e) => {
+    D || t.current && e.target === t.current && t.current.close();
+  }, w = () => {
+    t.current && t.current.close();
+  };
+  return /* @__PURE__ */ r.jsx(
+    "dialog",
+    {
+      ...i,
+      ref: t,
+      className: o.root,
+      onMouseDown: (e) => N(e),
+      "aria-modal": "true",
+      children: /* @__PURE__ */ r.jsxs(
+        "div",
+        {
+          className: l(o.contentWrapper, b, {
+            [o.contentWrapperNoFooter]: !s
+          }),
+          children: [
+            !a && /* @__PURE__ */ r.jsx(
+              j,
+              {
+                className: o.closeButton,
+                hideLabel: !0,
+                iconName: "cross",
+                size: "small",
+                type: "button",
+                variant: "ghost",
+                onClick: () => w(),
+                children: m
+              }
+            ),
+            /* @__PURE__ */ r.jsx(
+              "header",
+              {
+                className: l(o.header, {
+                  [o.headerCloseButton]: !a,
+                  [o.headerScrollable]: f
+                }),
+                children: S
+              }
+            ),
+            /* @__PURE__ */ r.jsx(
+              "div",
+              {
+                ref: _,
+                className: l(o.content, {
+                  [o.contentNoFooter]: !s
+                }),
+                tabIndex: 0,
+                children: n
+              }
+            ),
+            s && /* @__PURE__ */ r.jsx(
+              "footer",
+              {
+                className: l(o.footer, {
+                  [o.footerScrollable]: f
+                }),
+                children: s
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  G as D,
+  I as v
+};

package/chunks/Drawer.ueG2Bzr9.js

@@ -0,0 +1,154 @@
+"use client";
+import { j as t } from "./jsx-runtime.C115EyI4.js";
+import { c as n } from "./index.CvOaL64Y.js";
+import { useRef as w, useState as g, useEffect as b } from "react";
+import { DSButton as j } from "../button.M4nXjcUn.js";
+import { g as B } from "./helpers.B1JT5ShS.js";
+import '../assets/Drawer.Bauwxrk7.css';const R = "ds-drawer_root_1qhpc_10", W = "ds-drawer_root--end_1qhpc_68", C = "ds-drawer_content-wrapper_1qhpc_169", F = "ds-drawer_content-wrapper--no-footer_1qhpc_175", k = "ds-drawer_close-button_1qhpc_178", I = "ds-drawer_header_1qhpc_191", O = "ds-drawer_content_1qhpc_169", y = "ds-drawer_footer_1qhpc_193", z = "ds-drawer_header--scrollable_1qhpc_214", L = "ds-drawer_header--close-button_1qhpc_223", M = "ds-drawer_content--no-footer_1qhpc_237", H = "ds-drawer_footer--scrollable_1qhpc_244", o = {
+  root: R,
+  "root--end": "ds-drawer_root--end_1qhpc_68",
+  rootEnd: W,
+  "content-wrapper": "ds-drawer_content-wrapper_1qhpc_169",
+  contentWrapper: C,
+  "content-wrapper--no-footer": "ds-drawer_content-wrapper--no-footer_1qhpc_175",
+  contentWrapperNoFooter: F,
+  "close-button": "ds-drawer_close-button_1qhpc_178",
+  closeButton: k,
+  header: I,
+  content: O,
+  footer: y,
+  "header--scrollable": "ds-drawer_header--scrollable_1qhpc_214",
+  headerScrollable: z,
+  "header--close-button": "ds-drawer_header--close-button_1qhpc_223",
+  headerCloseButton: L,
+  "content--no-footer": "ds-drawer_content--no-footer_1qhpc_237",
+  contentNoFooter: M,
+  "footer--scrollable": "ds-drawer_footer--scrollable_1qhpc_244",
+  footerScrollable: H
+}, K = ["start", "end"], P = ({ tabIndex: c }) => {
+  if (c || c === 0)
+    throw new Error(
+      B(
+        "DSDrawer",
+        "Do not pass the tabindex property to the DSDrawer component as it is not interactive and does not receive focus. The DSDrawers contents, including the close button contained in the DSDrawer, can receive focus and be interactive."
+      )
+    );
+}, Q = ({
+  children: c,
+  className: m,
+  closeButtonLabel: q = "Close modal",
+  disableBackdropClose: D = !1,
+  footer: s,
+  header: S,
+  hideCloseButton: l = !1,
+  position: N = "start",
+  isOpen: d = !1,
+  onClose: a,
+  ..._
+}) => {
+  if (process.env.NODE_ENV !== "production") {
+    const { tabIndex: e } = _;
+    P({
+      tabIndex: e
+    });
+  }
+  const r = w(null), p = w(null), [h, v] = g(!1);
+  b(() => {
+    const e = p.current;
+    if (e) {
+      const f = () => {
+        v(
+          e.scrollHeight > e.clientHeight
+        );
+      };
+      f();
+      const u = new ResizeObserver(f);
+      return u.observe(e), () => {
+        u.disconnect();
+      };
+    }
+  }, []), b(() => {
+    const e = r.current;
+    if (e)
+      return e.addEventListener("close", i), d ? e.showModal() : e.close(), () => {
+        e.removeEventListener("close", i);
+      };
+  }, [d, a]);
+  const i = () => {
+    a && a();
+  }, E = (e) => {
+    D || r.current && e.target === r.current && r.current.close();
+  }, x = () => {
+    r.current && r.current.close();
+  };
+  return /* @__PURE__ */ t.jsx(
+    "dialog",
+    {
+      ..._,
+      ref: r,
+      className: n(o.root, {
+        [o.rootEnd]: N === "end"
+      }),
+      onMouseDown: (e) => E(e),
+      "aria-modal": "true",
+      children: /* @__PURE__ */ t.jsxs(
+        "div",
+        {
+          className: n(o.contentWrapper, m, {
+            [o.contentWrapperNoFooter]: !s
+          }),
+          children: [
+            !l && /* @__PURE__ */ t.jsx(
+              j,
+              {
+                className: o.closeButton,
+                hideLabel: !0,
+                iconName: "cross",
+                size: "small",
+                type: "button",
+                variant: "ghost",
+                onClick: () => x(),
+                children: q
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              "header",
+              {
+                className: n(o.header, {
+                  [o.headerCloseButton]: !l,
+                  [o.headerScrollable]: h
+                }),
+                children: S
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              "div",
+              {
+                ref: p,
+                className: n(o.content, {
+                  [o.contentNoFooter]: !s
+                }),
+                tabIndex: 0,
+                children: c
+              }
+            ),
+            s && /* @__PURE__ */ t.jsx(
+              "footer",
+              {
+                className: n(o.footer, {
+                  [o.footerScrollable]: h
+                }),
+                children: s
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  Q as D,
+  K as a,
+  P as v
+};

package/chunks/{Fieldset.C9K8BYmH.js → Fieldset.Cjmkgxxk.js}

@@ -2,36 +2,36 @@
 import { j as e } from "./jsx-runtime.C115EyI4.js";
 import { c } from "./index.CvOaL64Y.js";
 import "react";
-import { Asterisk as y } from "../asterisk.DDn-yX4P.js";
-import { DSHeading as v } from "../heading.CAkraI2D.js";
-import { DSSystemFeedback as w } from "../systemfeedback.ZzRUAVYX.js";
+import { Asterisk as y } from "../asterisk.DpzETKdT.js";
+import { DSHeading as v } from "../heading.IPIYc5vW.js";
+import { DSSystemFeedback as w } from "../systemfeedback.C3Pfxxpp.js";
 import { g as j } from "./helpers.B1JT5ShS.js";
-import '../assets/Fieldset.CwDhKRUL.css';const N = "_root_2e6a5_76", E = "_child-wrapper_2e6a5_172", M = "_legend_2e6a5_179", q = "_legend--utility--m_2e6a5_183", C = "_description_2e6a5_196", P = "_description--small_2e6a5_211", T = "_system-feedback_2e6a5_215", i = {
+import '../assets/Fieldset.DOdTbb7C.css';const N = "ds-fieldset_root_1opm7_1", E = "ds-fieldset_child-wrapper_1opm7_95", M = "ds-fieldset_legend_1opm7_102", q = "ds-fieldset_legend--utility--m_1opm7_106", C = "ds-fieldset_description_1opm7_118", P = "ds-fieldset_description--small_1opm7_132", T = "ds-fieldset_system-feedback_1opm7_136", i = {
   root: N,
-  "child-wrapper": "_child-wrapper_2e6a5_172",
+  "child-wrapper": "ds-fieldset_child-wrapper_1opm7_95",
   childWrapper: E,
   legend: M,
-  "legend--utility--m": "_legend--utility--m_2e6a5_183",
+  "legend--utility--m": "ds-fieldset_legend--utility--m_1opm7_106",
   legendUtilityM: q,
   description: C,
-  "description--small": "_description--small_2e6a5_211",
+  "description--small": "ds-fieldset_description--small_1opm7_132",
   descriptionSmall: P,
-  "system-feedback": "_system-feedback_2e6a5_215",
+  "system-feedback": "ds-fieldset_system-feedback_1opm7_136",
   systemFeedback: T
 }, U = ({
-  description: l,
+  description: r,
   id: s,
-  legend: n,
+  legend: a,
   systemFeedback: t
 }) => {
-  if (!s && (l || t))
+  if (!s && (r || t))
     throw new Error(
       j(
         "DSFieldset",
         'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSFieldset component.'
       )
     );
-  if (!n)
+  if (!a)
     throw new Error(
       j(
         "DSFieldset",
@@ -39,26 +39,26 @@ import '../assets/Fieldset.CwDhKRUL.css';const N = "_root_2e6a5_76", E = "_child
       )
     );
 }, H = ({
-  children: l,
+  children: r,
   legend: s,
-  className: n,
+  className: a,
   description: t,
   disabled: S = !1,
-  id: d,
+  id: n,
   invalid: p = !1,
   required: m = !1,
-  systemFeedback: a,
+  systemFeedback: o,
   ...b
 }) => {
-  process.env.NODE_ENV !== "production" && U({ description: t, id: d, legend: s, systemFeedback: a });
-  let o, _, g;
-  const r = typeof s == "object" && s !== void 0;
-  r && ({ headingSize: o, headingTag: _, headingText: g } = s);
-  const h = `${d}-feedback`, f = `${d}-description`, u = [
-    a && h,
-    t && f
-  ].filter(Boolean).join(" "), x = !r || o === "small" || o === "small-uppercase", D = c(i.root, n), F = c(i.legend, {
-    [i.legendUtilityM]: !r
+  process.env.NODE_ENV !== "production" && U({ description: t, id: n, legend: s, systemFeedback: o });
+  let d, _, f;
+  const l = typeof s == "object" && s !== void 0;
+  l && ({ headingSize: d, headingTag: _, headingText: f } = s);
+  const g = `${n}-feedback`, h = `${n}-description`, u = [
+    o && g,
+    t && h
+  ].filter(Boolean).join(" "), x = !l || d === "small" || d === "small-uppercase", D = c(i.root, a), F = c(i.legend, {
+    [i.legendUtilityM]: !l
   }), k = c(i.description, {
     [i.descriptionSmall]: x
   });
@@ -71,24 +71,24 @@ import '../assets/Fieldset.CwDhKRUL.css';const N = "_root_2e6a5_76", E = "_child
       "aria-invalid": p,
       "aria-describedby": u || void 0,
       children: [
-        /* @__PURE__ */ e.jsx("legend", { className: F, children: r ? /* @__PURE__ */ e.jsxs(v, { tag: _, size: o, children: [
-          g,
+        /* @__PURE__ */ e.jsx("legend", { className: F, children: l ? /* @__PURE__ */ e.jsxs(v, { tag: _, size: d, children: [
+          f,
           m && /* @__PURE__ */ e.jsx(y, {})
         ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
           s,
           m && /* @__PURE__ */ e.jsx(y, {})
         ] }) }),
-        t && /* @__PURE__ */ e.jsx("span", { id: f, className: k, children: t }),
-        p && a && /* @__PURE__ */ e.jsx(
+        t && /* @__PURE__ */ e.jsx("span", { id: h, className: k, children: t }),
+        p && o && /* @__PURE__ */ e.jsx(
           w,
           {
-            id: h,
+            id: g,
             type: "invalid",
-            message: a,
+            message: o,
             className: i.systemFeedback
           }
         ),
-        /* @__PURE__ */ e.jsx("div", { className: i.childWrapper, children: l })
+        /* @__PURE__ */ e.jsx("div", { className: i.childWrapper, children: r })
       ]
     }
   );