@5ive-souls/controls 0.0.2 → 0.0.3

package/dist/{Section-Br38kDAa.js → Section-Bw_kuHpK.js}

@@ -733,7 +733,7 @@ const at = ge({
   const y = xe.buildSectionStyles(e);
   m || (y.height = "fit-content");
   const g = m ? /* @__PURE__ */ x(we, {}) : /* @__PURE__ */ x(Pe, {});
-  return /* @__PURE__ */ re(oe, { id: c, className: C, style: y, ref: l, children: [
+  return /* @__PURE__ */ re(oe, { id: c, className: C, style: y, ref: l, role: e.role, children: [
     /* @__PURE__ */ x(Y, { className: Q.SectionHeader, children: /* @__PURE__ */ re(oe, { fill: !0, horizontal: !0, alignItems: "center", children: [
       n && /* @__PURE__ */ x(Y, { padding: 8, children: n }),
       /* @__PURE__ */ x(Y, { grow: 1, children: o && o }),

package/dist/components/ClassNames.js

@@ -1,6 +1,6 @@
 const t = class t {
 };
-t.FlexBox = "5s-flex-box", t.FlexBoxItem = "5s-flex-box-item", t.FlexBoxItemResizer = "5s-flex-box-item-resizer", t.Section = "5s-section", t.SectionHeader = "5s-section-header", t.SectionContent = "5s-section-content", t.Wizard = "5s-wizard", t.WizardPanel = "5s-wizard-panel", t.DynamicForm = "5s-dynamic-form", t.FormField = "5s-form-field", t.FormFieldGroup = "5s-form-field-group", t.ThemePicker = "5s-theme-picker", t.RichText = "5s-rich-text", t.Grid = "5s-grid", t.GridCell = "5s-grid-cell", t.GridCellResizer = "5s-grid-cell-resizer";
+t.FlexBox = "5s-flex-box", t.FlexBoxItem = "5s-flex-box-item", t.FlexBoxItemResizer = "5s-flex-box-item-resizer", t.Section = "5s-section", t.SectionHeader = "5s-section-header", t.SectionContent = "5s-section-content", t.Wizard = "5s-wizard", t.WizardPanel = "5s-wizard-panel", t.DynamicForm = "5s-dynamic-form", t.FormField = "5s-form-field", t.FormFieldGroup = "5s-form-field-group", t.ThemePicker = "5s-theme-picker", t.RichText = "5s-rich-text", t.Grid = "_5s-grid", t.GridCell = "5s-grid-cell", t.GridCellResizer = "5s-grid-cell-resizer", t.JumpList = "5s-jl", t.JumpListMenu = "5s-jlm", t.JumpListHeader = "5s-jlh", t.JumpListItem = "5s-jli";
 let i = t;
 export {
   i as ClassNames

package/dist/components/FlexBox/FlexBox.js

@@ -41,8 +41,8 @@ const j = g({
     flexWrap: "wrap"
   }
 }), C = (a) => {
-  const { children: c, horizontal: f, alignItems: s, wrap: m, justifyContent: i, reverse: l, className: n, ref: x, id: y } = a, t = j(), d = v.buildFlexBoxStyles(a);
-  let e = f ? r(o.FlexBox, t.root, n, l ? t.horizontalReverse : t.horizontal) : r(o.FlexBox, t.root, n, l ? t.verticalReverse : t.vertical);
+  const { children: c, horizontal: f, alignItems: s, wrap: m, justifyContent: l, reverse: i, className: n, ref: x, id: y } = a, t = j(), d = v.buildFlexBoxStyles(a);
+  let e = f ? r(o.FlexBox, t.root, n, i ? t.horizontalReverse : t.horizontal) : r(o.FlexBox, t.root, n, i ? t.verticalReverse : t.vertical);
   if (s)
     switch (s) {
       case "start":
@@ -55,8 +55,8 @@ const j = g({
         e = r(e, t.alignEnd);
         break;
     }
-  if (i)
-    switch (i) {
+  if (l)
+    switch (l) {
       case "start":
         e = r(e, t.justifyStart);
         break;
@@ -67,7 +67,7 @@ const j = g({
         e = r(e, t.justifyEnd);
         break;
     }
-  return m && (e = r(e, t.wrap)), /* @__PURE__ */ u("div", { id: y, className: e, style: d, ref: x, children: c });
+  return m && (e = r(e, t.wrap)), /* @__PURE__ */ u("div", { id: y, className: e, style: d, ref: x, role: a.role, children: c });
 };
 C.displayName = "FlexBox";
 export {

package/dist/components/Grid/Grid.js

@@ -1,10 +1,10 @@
 import { jsx as c, Fragment as k } from "react/jsx-runtime";
-import a, { createElement as v } from "react";
-import { makeStyles as T, mergeClasses as m } from "@fluentui/react-components";
-import { ClassNames as _ } from "../ClassNames.js";
+import r, { createElement as T } from "react";
+import { makeStyles as _, mergeClasses as d } from "@fluentui/react-components";
+import { ClassNames as A } from "../ClassNames.js";
 import { ResizableGridCell as z } from "./ResizableGridCell/ResizableGridCell.js";
-import { GridContext as A } from "./GridContext.js";
-const U = T({
+import { GridContext as U } from "./GridContext.js";
+const E = _({
   grid: {
     display: "grid",
     boxSizing: "border-box"
@@ -17,26 +17,24 @@ const U = T({
     width: "100%",
     height: "100%"
   }
-}), E = (i) => /* @__PURE__ */ c(k, {});
-E.displayName = "RowDefinition";
-const M = (i) => /* @__PURE__ */ c(k, {});
-M.displayName = "ColumnDefinition";
-const $ = (i) => {
-  const { children: S, fill: x, inline: D, ref: P, style: R, defaultUnit: p, defaultUnitSize: g, gap: y, id: N } = i, d = U();
-  let n = _.Grid;
-  const f = a.useMemo(() => [], []), u = a.useMemo(() => [], []);
+}), M = (i) => /* @__PURE__ */ c(k, {});
+M.displayName = "RowDefinition";
+const $ = (i) => /* @__PURE__ */ c(k, {});
+$.displayName = "ColumnDefinition";
+const F = (i) => {
+  const { children: S, fill: x, inline: N, ref: D, style: P, defaultUnit: p, defaultUnitSize: g, gap: y, id: R, className: j } = i, u = E(), f = r.useMemo(() => [], []), m = r.useMemo(() => [], []);
   let C = "", h = "";
-  const r = [], G = a.useCallback((e) => {
+  const a = [], G = r.useCallback((e) => {
     const t = e.size ?? g;
     if (t == null)
       return " auto";
     const s = e.unit ?? p ?? "pixel";
     return ` ${t}${s == "fraction" ? "fr" : "px"}`;
-  }, [p, g]), b = a.useCallback((e, t) => {
+  }, [p, g]), b = r.useCallback((e, t) => {
     const s = e.props;
-    return t ? u.push(s) : f.push(s), G(s);
-  }, [u, G, f]);
-  a.Children.toArray(S).forEach((e, t) => {
+    return t ? m.push(s) : f.push(s), G(s);
+  }, [m, G, f]);
+  r.Children.toArray(S).forEach((e, t) => {
     var w;
     switch (e.type.displayName) {
       case "RowDefinition": {
@@ -49,7 +47,7 @@ const $ = (i) => {
       }
       case "ResizableGridCell": {
         const l = e.props;
-        r.push(
+        a.push(
           /* @__PURE__ */ c(
             z,
             {
@@ -63,8 +61,8 @@ const $ = (i) => {
       }
       case "Section": {
         const l = e.props;
-        (w = l.cellProps) != null && w.resizable ? r.push(
-          /* @__PURE__ */ v(
+        (w = l.cellProps) != null && w.resizable ? a.push(
+          /* @__PURE__ */ T(
             z,
             {
               ...l.cellProps,
@@ -73,25 +71,27 @@ const $ = (i) => {
             },
             e
           )
-        ) : r.push(e);
+        ) : a.push(e);
         break;
       }
       default:
-        r.push(e);
+        a.push(e);
         break;
     }
-  }), x && (n = m(n, d.fill)), D ? n = m(n, d.inlineGrid) : n = m(n, d.grid);
+  });
+  let n = A.Grid;
+  x && (n = d(n, u.fill)), N ? n = d(n, u.inlineGrid) : n = d(n, u.grid);
   const o = {
     gridTemplateRows: C,
     gridTemplateColumns: h
   };
   i.gap && (o.gap = i.gap), i.columnGap && (o.columnGap = i.columnGap), i.rowGap && (o.rowGap = i.rowGap), i.padding && (o.padding = i.padding), i.justifyContent && (o.justifyContent = i.justifyContent), i.alignContent && (o.alignContent = i.alignContent);
-  const j = Object.assign({}, R, o);
-  return /* @__PURE__ */ c(A.Provider, { value: { rows: f, columns: u }, children: /* @__PURE__ */ c("div", { id: N, className: n, style: j, ref: P, children: r }) });
+  const v = Object.assign({}, P, o);
+  return /* @__PURE__ */ c(U.Provider, { value: { rows: f, columns: m }, children: /* @__PURE__ */ c("div", { id: R, className: d(n, j), style: v, ref: D, children: a }) });
 };
-$.displayName = "Grid";
+F.displayName = "Grid";
 export {
-  M as ColumnDefinition,
-  $ as Grid,
-  E as RowDefinition
+  $ as ColumnDefinition,
+  F as Grid,
+  M as RowDefinition
 };

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 { S as z } from "../../Section-Bw_kuHpK.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
+};

package/dist/components/Section/Section.js

@@ -6,7 +6,7 @@ import "../FlexBox/FlexBoxItem/FlexBoxItem.js";
 import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
 import "../ClassNames.js";
 import "./SectionUtils.js";
-import { S as f } from "../../Section-Br38kDAa.js";
+import { S as f } from "../../Section-Bw_kuHpK.js";
 export {
   f as Section
 };

package/dist/components/Section/SectionUtils.js

@@ -1,15 +1,15 @@
 import { tokens as s } from "@fluentui/react-components";
-import { GridUtils as a } from "../Grid/GridUtils.js";
-import { FlexBoxUtils as d } from "../FlexBox/FlexBoxUtils.js";
-const r = class r {
+import { GridUtils as d } from "../Grid/GridUtils.js";
+import { FlexBoxUtils as a } from "../FlexBox/FlexBoxUtils.js";
+const l = class l {
 };
-r.buildSectionStyles = (l) => {
-  const { flexBoxItemProps: e, cellProps: t, scrollable: c } = l, o = {
+l.buildSectionStyles = (r) => {
+  const { flexBoxItemProps: e, cellProps: t, scrollable: c } = r, o = {
     scrollbarColor: s.colorBrandForeground1 + " " + s.colorNeutralBackground2
   };
-  return c && (o.overflow = "auto"), t && a.buildGridCellStyles(t, o), e && d.buildFlexBoxItemStyles(e, o), Object.assign({}, l.style, o);
+  return c ? o.overflow = "auto" : o.overflow = "hidden", t && d.buildGridCellStyles(t, o), e && a.buildFlexBoxItemStyles(e, o), Object.assign({}, r.style, o);
 };
-let i = r;
+let i = l;
 export {
   i as SectionUtils
 };

package/dist/components/Section/index.js

@@ -1,4 +1,4 @@
-import { S as r } from "../../Section-Br38kDAa.js";
+import { S as r } from "../../Section-Bw_kuHpK.js";
 export {
   r as Section
 };

package/dist/components/Wizard/Wizard.js

@@ -5,7 +5,7 @@ import { ClassNames as q } from "../ClassNames.js";
 import { FlexBox as f } from "../FlexBox/FlexBox.js";
 import { FlexBoxItem as m } from "../FlexBox/FlexBoxItem/FlexBoxItem.js";
 import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
-import { S as H, C as J, a as K, b as M } from "../../Section-Br38kDAa.js";
+import { S as H, C as J, a as K, b as M } from "../../Section-Bw_kuHpK.js";
 const O = A({
   root: {
     height: "100%",

package/dist/components/index.js

@@ -3,48 +3,50 @@ import { DynamicFormBuilder as m } from "./DynamicForm/Builder/DynamicFormBuilde
 import { FieldBuilder as x } from "./DynamicForm/Builder/Field/FieldBuilder.js";
 import { SectionBuilder as l } from "./DynamicForm/Builder/Section/SectionBuilder.js";
 import { Device as c } from "./FiveSoulsProvider/FiveSouls.Types.js";
-import { FiveSoulsProvider as d } from "./FiveSoulsProvider/FiveSoulsProvider.js";
+import { FiveSoulsProvider as s } from "./FiveSoulsProvider/FiveSoulsProvider.js";
 import { deviceContext as D } from "./FiveSoulsProvider/deviceContext.js";
-import { useDevice as h } from "./FiveSoulsProvider/useDevice.js";
+import { useDevice as F } from "./FiveSoulsProvider/useDevice.js";
 import { FlexBox as B } from "./FlexBox/FlexBox.js";
 import { FlexBoxItem as v } from "./FlexBox/FlexBoxItem/FlexBoxItem.js";
-import { FlexBoxItemResizer as g } from "./FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
-import { ColumnDefinition as z, Grid as C, RowDefinition as L } from "./Grid/Grid.js";
+import { FlexBoxItemResizer as L } from "./FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
+import { ColumnDefinition as w, Grid as z, RowDefinition as C } from "./Grid/Grid.js";
 import { GridCell as S } from "./Grid/GridCell/GridCell.js";
 import { ResizableGridCell as P } from "./Grid/ResizableGridCell/ResizableGridCell.js";
 import "./Grid/GridContext.js";
 import { RichText as T } from "./RichText/RichText.js";
-import { S as b } from "../Section-Br38kDAa.js";
-import { ThemePicker as q } from "./ThemePicker/ThemePicker.js";
-import { cornflower as E, cornflowerDark as H, cornflowerLight as J } from "./ThemePicker/Themes/Cornflower/Cornflower.js";
+import { S as b } from "../Section-Bw_kuHpK.js";
+import { ThemePicker as j } from "./ThemePicker/ThemePicker.js";
+import { cornflower as A, cornflowerDark as E, cornflowerLight as H } from "./ThemePicker/Themes/Cornflower/Cornflower.js";
 import { crimson as M, crimsonDark as N, crimsonLight as O } from "./ThemePicker/Themes/Crimson/Crimson.js";
 import { forest as U, forestDark as V, forestLight as X } from "./ThemePicker/Themes/Forest/Forest.js";
 import { royal as Z, royalDark as _, royalLight as $ } from "./ThemePicker/Themes/Royal/Royal.js";
 import { Wizard as or } from "./Wizard/Wizard.js";
 import { WizardPanel as tr } from "./Wizard/WizardPanel/WizardPanel.js";
+import { JumpList as mr } from "./JumpList/JumpList.js";
 export {
-  z as ColumnDefinition,
+  w as ColumnDefinition,
   c as Device,
   t as DynamicForm,
   m as DynamicFormBuilder,
   x as FieldBuilder,
-  d as FiveSoulsProvider,
+  s as FiveSoulsProvider,
   B as FlexBox,
   v as FlexBoxItem,
-  g as FlexBoxItemResizer,
-  C as Grid,
+  L as FlexBoxItemResizer,
+  z as Grid,
   S as GridCell,
+  mr as JumpList,
   P as ResizableGridCell,
   T as RichText,
-  L as RowDefinition,
+  C as RowDefinition,
   b as Section,
   l as SectionBuilder,
-  q as ThemePicker,
+  j as ThemePicker,
   or as Wizard,
   tr as WizardPanel,
-  E as cornflower,
-  H as cornflowerDark,
-  J as cornflowerLight,
+  A as cornflower,
+  E as cornflowerDark,
+  H as cornflowerLight,
   M as crimson,
   N as crimsonDark,
   O as crimsonLight,
@@ -55,5 +57,5 @@ export {
   Z as royal,
   _ as royalDark,
   $ as royalLight,
-  h as useDevice
+  F as useDevice
 };

package/dist/main.d.ts

@@ -353,6 +353,44 @@ export declare interface IGridSize {
     min?: number;
 }
 
+export declare interface IJumpListProps<T extends object> extends IComponentProps {
+    /**
+     * Collection of items to be displayed.
+     */
+    items?: T[];
+    /**
+     * Name\Key of the field to be used as the header to be used for grouping and sorting.
+     */
+    headerProp: string;
+    /**
+     * Rendering function for the content of the list item, if not provided the value  acquired from the `headerProp` will be used.
+     */
+    renderItem?: (item: T, isSelected: boolean) => default_2.ReactNode;
+    /**
+     * Rendering function for an optional icon slot that appears before the item. Renders into a 36px by 36px area.
+     */
+    renderIcon?: (item: T, isSelected: boolean) => default_2.ReactNode;
+    /**
+     * Callback invoked when the user makes a selection.
+     */
+    onSelectionChanged?: (item?: T) => void;
+    /**
+     * Collection of string that override the default values used by the JumpList
+     */
+    strings?: IJumpListStrings;
+    /**
+     * When enabled render UI to allow the user to filter the list of items.
+     */
+    enableFiltering?: boolean;
+}
+
+export declare interface IJumpListStrings {
+    /**
+     * Message displayed when no items have been provided.
+     */
+    emptyList: string;
+}
+
 export declare interface IResizableGridCellProps extends IGridCellProps {
     /**
      * If set to true, the cell will allow the column to beresized instead of the row.
@@ -532,6 +570,17 @@ declare interface IWizardStrings {
     submit?: string;
 }
 
+/**
+ * The `JumpList` component display a collection of items, that will then be grouped by the first letter of their `headerProp`.
+ * A button will be displayed between changing characters that when pressed will present the user with a surface that will allow them to jump to another header in the list.
+ *
+ * > The `JumpList` component supports a generic type argument that defines the type of items expected.
+ * > T define the generic type, use the following syntax.
+ * >
+ * > `<JumpList<TItemType> items={[]} headerProp="name" />`
+ */
+export declare const JumpList: <T extends object>(props: IJumpListProps<T>) => JSX_2.Element;
+
 /**
  * The `ResizableGridCell` component can be used in place of the `GridCell` compoent to allow the user to resize the row or column the cell resides it.
  * By default this allows the row to be resized. This can be changed by setting the `horizontal` property to true.

package/dist/main.js

@@ -3,48 +3,50 @@ import { DynamicFormBuilder as m } from "./components/DynamicForm/Builder/Dynami
 import { FieldBuilder as x } from "./components/DynamicForm/Builder/Field/FieldBuilder.js";
 import { SectionBuilder as l } from "./components/DynamicForm/Builder/Section/SectionBuilder.js";
 import { Device as c } from "./components/FiveSoulsProvider/FiveSouls.Types.js";
-import { FiveSoulsProvider as d } from "./components/FiveSoulsProvider/FiveSoulsProvider.js";
+import { FiveSoulsProvider as s } from "./components/FiveSoulsProvider/FiveSoulsProvider.js";
 import { deviceContext as D } from "./components/FiveSoulsProvider/deviceContext.js";
-import { useDevice as h } from "./components/FiveSoulsProvider/useDevice.js";
+import { useDevice as F } from "./components/FiveSoulsProvider/useDevice.js";
 import { FlexBox as B } from "./components/FlexBox/FlexBox.js";
 import { FlexBoxItem as v } from "./components/FlexBox/FlexBoxItem/FlexBoxItem.js";
-import { FlexBoxItemResizer as g } from "./components/FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
-import { ColumnDefinition as z, Grid as C, RowDefinition as L } from "./components/Grid/Grid.js";
+import { FlexBoxItemResizer as L } from "./components/FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
+import { ColumnDefinition as w, Grid as z, RowDefinition as C } from "./components/Grid/Grid.js";
 import { GridCell as S } from "./components/Grid/GridCell/GridCell.js";
 import { ResizableGridCell as P } from "./components/Grid/ResizableGridCell/ResizableGridCell.js";
 import "./components/Grid/GridContext.js";
 import { RichText as T } from "./components/RichText/RichText.js";
-import { S as b } from "./Section-Br38kDAa.js";
-import { ThemePicker as q } from "./components/ThemePicker/ThemePicker.js";
-import { cornflower as E, cornflowerDark as H, cornflowerLight as J } from "./components/ThemePicker/Themes/Cornflower/Cornflower.js";
+import { S as b } from "./Section-Bw_kuHpK.js";
+import { ThemePicker as j } from "./components/ThemePicker/ThemePicker.js";
+import { cornflower as A, cornflowerDark as E, cornflowerLight as H } from "./components/ThemePicker/Themes/Cornflower/Cornflower.js";
 import { crimson as M, crimsonDark as N, crimsonLight as O } from "./components/ThemePicker/Themes/Crimson/Crimson.js";
 import { forest as U, forestDark as V, forestLight as X } from "./components/ThemePicker/Themes/Forest/Forest.js";
 import { royal as Z, royalDark as _, royalLight as $ } from "./components/ThemePicker/Themes/Royal/Royal.js";
 import { Wizard as or } from "./components/Wizard/Wizard.js";
 import { WizardPanel as tr } from "./components/Wizard/WizardPanel/WizardPanel.js";
+import { JumpList as mr } from "./components/JumpList/JumpList.js";
 export {
-  z as ColumnDefinition,
+  w as ColumnDefinition,
   c as Device,
   t as DynamicForm,
   m as DynamicFormBuilder,
   x as FieldBuilder,
-  d as FiveSoulsProvider,
+  s as FiveSoulsProvider,
   B as FlexBox,
   v as FlexBoxItem,
-  g as FlexBoxItemResizer,
-  C as Grid,
+  L as FlexBoxItemResizer,
+  z as Grid,
   S as GridCell,
+  mr as JumpList,
   P as ResizableGridCell,
   T as RichText,
-  L as RowDefinition,
+  C as RowDefinition,
   b as Section,
   l as SectionBuilder,
-  q as ThemePicker,
+  j as ThemePicker,
   or as Wizard,
   tr as WizardPanel,
-  E as cornflower,
-  H as cornflowerDark,
-  J as cornflowerLight,
+  A as cornflower,
+  E as cornflowerDark,
+  H as cornflowerLight,
   M as crimson,
   N as crimsonDark,
   O as crimsonLight,
@@ -55,5 +57,5 @@ export {
   Z as royal,
   _ as royalDark,
   $ as royalLight,
-  h as useDevice
+  F as useDevice
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@5ive-souls/controls",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Collection of react components built on the Fluent UI framework.",
   "keywords": [
     "react",