@5ive-souls/controls 0.0.2 → 0.0.4

package/dist/components/JumpList/JumpList.js

@@ -0,0 +1,178 @@
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import { makeStyles as V, tokens as h, mergeClasses as l, Text as w, Button as F, Input as X } from "@fluentui/react-components";
+import i from "react";
+import { FlexBox as v } from "../FlexBox/FlexBox.js";
+import { FlexBoxItem as N } from "../FlexBox/FlexBoxItem/FlexBoxItem.js";
+import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
+import { Grid as Y, ColumnDefinition as K } from "../Grid/Grid.js";
+import "../Grid/GridCell/GridCell.js";
+import "../Grid/ResizableGridCell/ResizableGridCell.js";
+import "../Grid/GridContext.js";
+import { Section as z } from "../Section/Section.js";
+import { ClassNames as m } from "../ClassNames.js";
+import { c as G } from "../../createFluentIcon-CwLxkjIW.js";
+const Q = /* @__PURE__ */ G("AppsListRegular", "1em", ["M2 3.5C2 2.67 2.67 2 3.5 2h1C5.33 2 6 2.67 6 3.5v1C6 5.33 5.33 6 4.5 6h-1A1.5 1.5 0 0 1 2 4.5v-1ZM3.5 3a.5.5 0 0 0-.5.5v1c0 .28.22.5.5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM2 9.5C2 8.67 2.67 8 3.5 8h1C5.33 8 6 8.67 6 9.5v1c0 .83-.67 1.5-1.5 1.5h-1A1.5 1.5 0 0 1 2 10.5v-1ZM3.5 9a.5.5 0 0 0-.5.5v1c0 .28.22.5.5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM2 15.5c0-.83.67-1.5 1.5-1.5h1c.83 0 1.5.67 1.5 1.5v1c0 .83-.67 1.5-1.5 1.5h-1A1.5 1.5 0 0 1 2 16.5v-1Zm1.5-.5a.5.5 0 0 0-.5.5v1c0 .28.22.5.5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM8 4.5c0-.28.22-.5.5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 6c0-.28.22-.5.5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 6c0-.28.22-.5.5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Z"]), U = /* @__PURE__ */ G("FilterRegular", "1em", ["M7.5 13h5a.5.5 0 0 1 .09 1H7.5a.5.5 0 0 1-.09-1h5.09-5Zm-2-4h9a.5.5 0 0 1 .09 1H5.5a.5.5 0 0 1-.09-1h9.09-9Zm-2-4h13a.5.5 0 0 1 .09 1H3.5a.5.5 0 0 1-.09-1H16.5h-13Z"]), a = 36, ee = V({
+  root: {
+    position: "relative"
+  },
+  list: {
+    padding: "0px",
+    margin: "0px",
+    boxSizing: "border-box",
+    listStyle: "none"
+  },
+  listItem: {
+    height: a + "px",
+    maxHeight: a + "px",
+    alignContent: "center",
+    ":hover": {
+      backgroundColor: h.colorBrandBackgroundHover
+    }
+  },
+  listItemIcon: {
+    textAlign: "center",
+    alignContent: "center"
+  },
+  listItemContent: {
+    paddingLeft: h.spacingHorizontalS
+  },
+  selectedListItem: {
+    backgroundColor: h.colorBrandBackgroundSelected
+  },
+  capitalize: {
+    textTransform: "capitalize"
+  },
+  baseSize: {
+    minWidth: `${a}px`,
+    width: `${a}px`,
+    height: `${a}px`,
+    minHeight: `${a}px`
+  },
+  headerButton: {
+    width: "100%",
+    justifyContent: "left",
+    height: `${a}px`
+  },
+  menuRoot: {
+    overflowY: "auto",
+    overflowX: "hidden",
+    height: "100%",
+    width: "100%",
+    backgroundColor: h.colorNeutralBackground1,
+    position: "absolute",
+    inset: "0px"
+  },
+  hidden: {
+    display: "none"
+  }
+}), R = ["#", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"], pe = (y) => {
+  const { style: B, className: k, items: u, headerProp: c, renderItem: L, renderIcon: M, onSelectionChanged: Z, strings: H } = y, s = ee(), [p, J] = i.useState(), [T, $] = i.useState(-1), [f, A] = i.useState(), [x, O] = i.useState(), E = i.useId(), d = i.useId(), W = i.useCallback(() => {
+    const e = window.document.getElementById(E);
+    console.log("TESTING:	Offset width:	" + e.offsetWidth);
+    const t = Math.min(~~((e.offsetWidth - 24) / (a + 8)), 4), n = {
+      columns: []
+    };
+    for (let r = 0; r < t; r++)
+      n.columns.push(/* @__PURE__ */ o(K, {}, `column-${r}`));
+    console.log("TESTING:	Columns:	" + n.columns.length), A(n);
+  }, [d]), _ = i.useCallback((e) => {
+    A(void 0);
+    const t = window.document.getElementById(d), n = t.querySelector("#header-button-" + e);
+    t.scrollTo({ top: n.offsetTop, behavior: "smooth" });
+  }, [d]), q = i.useCallback((e, t) => {
+    const n = e[c], r = t[c];
+    return n.localeCompare(r);
+  }, [c]);
+  if (i.useEffect(() => {
+    if (!u || u.length == 0 || !c)
+      return;
+    const e = {};
+    R.forEach((t) => {
+      e[t] = new Array();
+    }), u.forEach((t) => {
+      const n = t[c];
+      if (x && !new RegExp(x, "i").test(n))
+        return;
+      const r = n.charAt(0).toLowerCase();
+      (Object.hasOwn(e, r) ? e[r] : e["#"]).push(t);
+    }), J(e);
+  }, [c, u, x]), !p)
+    return /* @__PURE__ */ o(z, { className: l(m.JumpList, s.root, k), style: B, id: d, children: /* @__PURE__ */ g(v, { fill: !0, justifyContent: "center", alignItems: "center", children: [
+      /* @__PURE__ */ o(Q, { fontSize: 48 }),
+      /* @__PURE__ */ o(w, { children: H ? H.emptyList : "No items." })
+    ] }) });
+  const I = [];
+  let C = 0;
+  Object.keys(p).forEach((e) => {
+    const t = p[e];
+    t.length != 0 && (I.push(
+      /* @__PURE__ */ o("li", { className: m.JumpListHeader, children: /* @__PURE__ */ o(
+        F,
+        {
+          id: "header-button-" + e,
+          className: l(s.headerButton, s.capitalize),
+          appearance: "subtle",
+          onClick: W,
+          children: e
+        }
+      ) }, e)
+    ), t.sort(q).forEach((n) => {
+      const r = C == T, j = n[c], b = C + 0, D = L ? L(n, r) : /* @__PURE__ */ o(w, { children: j });
+      let S = l(m.JumpListItem, s.listItem);
+      r && (S = l(S, s.selectedListItem)), I.push(
+        /* @__PURE__ */ o(
+          "li",
+          {
+            className: S,
+            onClick: () => {
+              Z && T != b && (Z(n), $(b));
+            },
+            children: /* @__PURE__ */ g(v, { horizontal: !0, alignItems: "center", children: [
+              M && /* @__PURE__ */ o(N, { className: l(s.baseSize, s.listItemIcon), children: M(n, r) }),
+              /* @__PURE__ */ o(N, { grow: 1, className: s.listItemContent, children: D })
+            ] })
+          },
+          b
+        )
+      ), C++;
+    }));
+  });
+  const P = (e, t) => {
+    O(t.value);
+  };
+  return /* @__PURE__ */ g(v, { className: l(m.JumpList, s.root, k), style: B, id: E, childrenGap: h.spacingVerticalM, children: [
+    y.enableFiltering && /* @__PURE__ */ o(N, { children: /* @__PURE__ */ o(
+      X,
+      {
+        type: "search",
+        contentAfter: /* @__PURE__ */ o(U, {}),
+        placeholder: "Filter",
+        style: { width: "100%" },
+        onChange: P
+      }
+    ) }),
+    /* @__PURE__ */ o(z, { scrollable: !0, flexBoxItemProps: { grow: 1 }, id: d, children: /* @__PURE__ */ o("ul", { className: s.list, children: I }) }),
+    /* @__PURE__ */ o(z, { className: l(m.JumpListMenu, s.menuRoot, !f && s.hidden), scrollable: !0, role: "menu", children: /* @__PURE__ */ g(Y, { gap: h.spacingHorizontalS, justifyContent: "center", alignContent: "center", children: [
+      f && f.columns,
+      R.map((e) => {
+        const t = p[e].length == 0;
+        return /* @__PURE__ */ o(
+          F,
+          {
+            appearance: "subtle",
+            className: s.baseSize,
+            disabled: t,
+            onClick: () => {
+              _(e);
+            },
+            children: /* @__PURE__ */ o(w, { weight: "bold", size: 400, className: s.capitalize, children: e })
+          },
+          e
+        );
+      })
+    ] }) })
+  ] });
+};
+export {
+  pe as JumpList
+};

package/dist/components/JumpList/index.js

@@ -0,0 +1,4 @@
+import { JumpList as p } from "./JumpList.js";
+export {
+  p as JumpList
+};