@5ive-souls/controls 0.0.2 → 0.0.4

package/dist/components/Section/SectionUtils.js

@@ -1,13 +1,16 @@
 import { tokens as s } from "@fluentui/react-components";
-import { GridUtils as a } from "../Grid/GridUtils.js";
-import { FlexBoxUtils as d } from "../FlexBox/FlexBoxUtils.js";
+import { GridUtils as c } from "../Grid/GridUtils.js";
+import { FlexBoxUtils as n } from "../FlexBox/FlexBoxUtils.js";
 const r = class r {
 };
-r.buildSectionStyles = (l) => {
-  const { flexBoxItemProps: e, cellProps: t, scrollable: c } = l, o = {
+r.buildSectionStyles = (e) => {
+  const { flexBoxItemProps: t, cellProps: o } = e, l = {};
+  return o && c.buildGridCellStyles(o, l), t && n.buildFlexBoxItemStyles(t, l), Object.assign({}, e.style, l);
+}, r.buildSectionContentStyles = (e) => {
+  const { scrollable: t } = e, 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 t ? o.overflow = "auto" : o.overflow = "hidden", Object.assign({}, e.style, o);
 };
 let i = r;
 export {

package/dist/components/Section/index.js

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

package/dist/components/Wizard/Wizard.js

@@ -5,7 +5,8 @@ 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 { Section as H } from "../Section/Section.js";
+import { C as J, a as K, b as M } from "../../chunk-3-CMb_cR4A.js";
 const O = A({
   root: {
     height: "100%",
@@ -15,31 +16,31 @@ const O = A({
   currentBreadCrumb: {
     color: h.colorBrandForeground1
   }
-}), te = (x) => {
-  const { children: g, onNavigatePanel: o, onSubmit: v, readonly: B, className: S, ref: k, asForm: N, strings: t, id: y } = x, s = O(), c = C.Children.toArray(g), [i, l] = C.useState(0), I = (r) => {
-    o && !o(i, r) || l(r);
+}), ie = (x) => {
+  const { children: g, onNavigatePanel: n, onSubmit: v, readonly: B, className: S, ref: k, asForm: N, strings: t, id: y } = x, s = O(), c = C.Children.toArray(g), [i, l] = C.useState(0), I = (r) => {
+    n && !n(i, r) || l(r);
   }, a = [];
-  c.forEach((r, n) => {
+  c.forEach((r, o) => {
     const z = r.props;
-    n > 0 && a.push(/* @__PURE__ */ e(L, {}, "Breadcrumb-divider-" + n)), a.push(/* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(
+    o > 0 && a.push(/* @__PURE__ */ e(L, {}, "Breadcrumb-divider-" + o)), a.push(/* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(
       R,
       {
         type: "button",
         onClick: () => {
-          I(n);
+          I(o);
         },
-        current: i === n,
-        className: i === n ? s.currentBreadCrumb : "",
+        current: i === o,
+        className: i === o ? s.currentBreadCrumb : "",
         children: z.title
       }
-    ) }, "Breadcrumb-" + n));
+    ) }, "Breadcrumb-" + o));
   });
   const P = i === 0, F = () => {
     const r = i - 1;
-    o && !o(i, r) || l(r);
+    n && !n(i, r) || l(r);
   }, b = i === c.length - 1, w = () => {
     const r = i + 1;
-    o && !o(i, r) || l(r);
+    n && !n(i, r) || l(r);
   };
   return /* @__PURE__ */ e("div", { id: y, className: V(q.Wizard, s.root, S), ref: k, children: /* @__PURE__ */ e(H, { className: s.root, children: /* @__PURE__ */ d(f, { fill: !0, children: [
     c.length > 1 && /* @__PURE__ */ d(m, { children: [
@@ -53,8 +54,8 @@ const O = A({
         activeIndex: i,
         whitespace: !0,
         align: "center",
-        onActiveIndexChange: (r, n) => l(n.index),
-        children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(W, { children: c.map((r, n) => /* @__PURE__ */ e(G, { children: r }, n)) }) })
+        onActiveIndexChange: (r, o) => l(o.index),
+        children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(W, { children: c.map((r, o) => /* @__PURE__ */ e(G, { children: r }, o)) }) })
       }
     ) }),
     /* @__PURE__ */ e(m, { children: /* @__PURE__ */ d(f, { horizontal: !0, childrenGap: h.spacingVerticalS, itemProps: { padding: h.spacingVerticalS }, children: [
@@ -95,5 +96,5 @@ const O = A({
   ] }) }) });
 };
 export {
-  te as Wizard
+  ie as Wizard
 };

package/dist/components/index.js

@@ -5,25 +5,26 @@ import { SectionBuilder as l } from "./DynamicForm/Builder/Section/SectionBuilde
 import { Device as c } from "./FiveSoulsProvider/FiveSouls.Types.js";
 import { FiveSoulsProvider as d } 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 { GridCell as S } from "./Grid/GridCell/GridCell.js";
-import { ResizableGridCell as P } from "./Grid/ResizableGridCell/ResizableGridCell.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 G } from "./Grid/GridCell/GridCell.js";
+import { ResizableGridCell as S } 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 { Section as b } from "./Section/Section.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,
@@ -31,20 +32,21 @@ export {
   d as FiveSoulsProvider,
   B as FlexBox,
   v as FlexBoxItem,
-  g as FlexBoxItemResizer,
-  C as Grid,
-  S as GridCell,
-  P as ResizableGridCell,
+  L as FlexBoxItemResizer,
+  z as Grid,
+  G as GridCell,
+  mr as JumpList,
+  S 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.
@@ -427,6 +465,10 @@ export declare interface ISectionProps extends IComponentProps {
      * Collection of properties to be used when this section is rendered as a child of the `FlexBox` component.
      */
     flexBoxItemProps?: IFlexBoxItemProps;
+    /**
+     *
+     */
+    appearance?: "default" | "borderless";
 }
 
 export declare interface IThemePickerProps extends IComponentProps {
@@ -532,6 +574,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

@@ -5,25 +5,26 @@ import { SectionBuilder as l } from "./components/DynamicForm/Builder/Section/Se
 import { Device as c } from "./components/FiveSoulsProvider/FiveSouls.Types.js";
 import { FiveSoulsProvider as d } 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 { GridCell as S } from "./components/Grid/GridCell/GridCell.js";
-import { ResizableGridCell as P } from "./components/Grid/ResizableGridCell/ResizableGridCell.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 G } from "./components/Grid/GridCell/GridCell.js";
+import { ResizableGridCell as S } 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 { Section as b } from "./components/Section/Section.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,
@@ -31,20 +32,21 @@ export {
   d as FiveSoulsProvider,
   B as FlexBox,
   v as FlexBoxItem,
-  g as FlexBoxItemResizer,
-  C as Grid,
-  S as GridCell,
-  P as ResizableGridCell,
+  L as FlexBoxItemResizer,
+  z as Grid,
+  G as GridCell,
+  mr as JumpList,
+  S 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.4",
   "description": "Collection of react components built on the Fluent UI framework.",
   "keywords": [
     "react",