@pismo/marola 0.0.1-alpha.11 → 0.0.1-alpha.12

package/dist/main.d.ts

@@ -10,6 +10,7 @@ export * from './components/InputSearch/InputSearch';
 export * from './components/LoadingSpinner/LoadingSpinner';
 export * from './components/PageHeader/PageHeader';
 export * from './components/Pagination/Pagination';
+export * from './components/Select/Select';
 export * from './components/Skeleton/Skeleton';
 export * from './components/Snackbar/Snackbar';
 export * from './components/SortTooltip/SortTooltip';

package/dist/main.js

@@ -11,49 +11,52 @@ import { InputSearch as b } from "./components/InputSearch/InputSearch.js";
 import { LoadingSpinner as k } from "./components/LoadingSpinner/LoadingSpinner.js";
 import { PageHeader as D } from "./components/PageHeader/PageHeader.js";
 import { Pagination as y, paginationDefaultTranslations as A } from "./components/Pagination/Pagination.js";
-import { Skeleton as P, SkeletonCircle as B, SkeletonTable as v } from "./components/Skeleton/Skeleton.js";
-import { Snackbar as H } from "./components/Snackbar/Snackbar.js";
-import { SortTooltip as j, sortTooltipDefaultTranslations as q } from "./components/SortTooltip/SortTooltip.js";
-import { Stepper as z } from "./components/Stepper/Stepper.js";
-import { Table as G } from "./components/Table/Table.js";
-import { Tabs as K } from "./components/Tabs/Tabs.js";
-import { Toggle as N } from "./components/Toggle/Toggle.js";
-import { Tooltip as Q } from "./components/Tooltip/Tooltip.js";
-import { Typography as U } from "./components/Typography/Typography.js";
-import { default as W } from "./components/Dialog/Title.js";
-import { default as Y } from "./components/Dialog/Content.js";
-import { default as _ } from "./components/Dialog/Actions.js";
-import { T as oo } from "./Tab-CRwnhsj5.js";
-import { TabPanel as to } from "./components/Tabs/TabPanel.js";
+import { Option as P, Select as B } from "./components/Select/Select.js";
+import { Skeleton as F, SkeletonCircle as H, SkeletonTable as L } from "./components/Skeleton/Skeleton.js";
+import { Snackbar as j } from "./components/Snackbar/Snackbar.js";
+import { SortTooltip as w, sortTooltipDefaultTranslations as z } from "./components/SortTooltip/SortTooltip.js";
+import { Stepper as G } from "./components/Stepper/Stepper.js";
+import { Table as K } from "./components/Table/Table.js";
+import { Tabs as N } from "./components/Tabs/Tabs.js";
+import { Toggle as R } from "./components/Toggle/Toggle.js";
+import { Tooltip as V } from "./components/Tooltip/Tooltip.js";
+import { Typography as X } from "./components/Typography/Typography.js";
+import { default as Z } from "./components/Dialog/Title.js";
+import { default as $ } from "./components/Dialog/Content.js";
+import { default as ro } from "./components/Dialog/Actions.js";
+import { Tab as eo } from "./components/Tabs/Tab.js";
+import { TabPanel as ao } from "./components/Tabs/TabPanel.js";
 export {
-  _ as Actions,
+  ro as Actions,
   e as Advice,
   a as Button,
   m as Checkbox,
-  Y as Content,
+  $ as Content,
   x as Dialog,
-  W as DialogTitle,
+  Z as DialogTitle,
   i as FamilyAndIcons,
   T as Icon,
   c as IconButton,
   u as Input,
   b as InputSearch,
   k as LoadingSpinner,
+  P as Option,
   D as PageHeader,
   y as Pagination,
-  P as Skeleton,
-  B as SkeletonCircle,
-  v as SkeletonTable,
-  H as Snackbar,
-  j as SortTooltip,
-  z as Stepper,
-  oo as Tab,
-  to as TabPanel,
-  G as Table,
-  K as Tabs,
-  N as Toggle,
-  Q as Tooltip,
-  U as Typography,
+  B as Select,
+  F as Skeleton,
+  H as SkeletonCircle,
+  L as SkeletonTable,
+  j as Snackbar,
+  w as SortTooltip,
+  G as Stepper,
+  eo as Tab,
+  ao as TabPanel,
+  K as Table,
+  N as Tabs,
+  R as Toggle,
+  V as Tooltip,
+  X as Typography,
   A as paginationDefaultTranslations,
-  q as sortTooltipDefaultTranslations
+  z as sortTooltipDefaultTranslations
 };

package/dist/useCompoundItem-D1iRfg8D.js

@@ -0,0 +1,84 @@
+import * as o from "react";
+import { u as g } from "./useEnhancedEffect-CJGo-L3B.js";
+let I = 0;
+function x(e) {
+  const [n, t] = o.useState(e), u = e || n;
+  return o.useEffect(() => {
+    n == null && (I += 1, t(`mui-${I}`));
+  }, [n]), u;
+}
+const p = o.useId;
+function y(e) {
+  if (p !== void 0) {
+    const n = p();
+    return e ?? n;
+  }
+  return x(e);
+}
+const b = /* @__PURE__ */ o.createContext(null);
+process.env.NODE_ENV !== "production" && (b.displayName = "CompoundComponentContext");
+function S(e) {
+  const n = Array.from(e.keys()).map((t) => {
+    const u = e.get(t);
+    return {
+      key: t,
+      subitem: u
+    };
+  });
+  return n.sort((t, u) => {
+    const s = t.subitem.ref.current, r = u.subitem.ref.current;
+    return s === null || r === null || s === r ? 0 : s.compareDocumentPosition(r) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1;
+  }), new Map(n.map((t) => [t.key, t.subitem]));
+}
+function E() {
+  const [e, n] = o.useState(/* @__PURE__ */ new Map()), t = o.useRef(/* @__PURE__ */ new Set()), u = o.useCallback(function(a) {
+    t.current.delete(a), n((m) => {
+      const c = new Map(m);
+      return c.delete(a), c;
+    });
+  }, []), s = o.useCallback(function(a, m) {
+    let c;
+    return typeof a == "function" ? c = a(t.current) : c = a, t.current.add(c), n((C) => {
+      const l = new Map(C);
+      return l.set(c, m), l;
+    }), {
+      id: c,
+      deregister: () => u(c)
+    };
+  }, [u]), r = o.useMemo(() => S(e), [e]), i = o.useCallback(function(a) {
+    return Array.from(r.keys()).indexOf(a);
+  }, [r]);
+  return {
+    contextValue: o.useMemo(() => ({
+      getItemIndex: i,
+      registerItem: s,
+      totalSubitemCount: e.size
+    }), [i, s, e.size]),
+    subitems: r
+  };
+}
+function N(e, n) {
+  const t = o.useContext(b);
+  if (t === null)
+    throw new Error("useCompoundItem must be used within a useCompoundParent");
+  const {
+    registerItem: u
+  } = t, [s, r] = o.useState(typeof e == "function" ? void 0 : e);
+  return g(() => {
+    const {
+      id: i,
+      deregister: d
+    } = u(e, n);
+    return r(i), d;
+  }, [u, n, e]), {
+    id: s,
+    index: s !== void 0 ? t.getItemIndex(s) : -1,
+    totalItemCount: t.totalSubitemCount
+  };
+}
+export {
+  b as C,
+  N as a,
+  E as b,
+  y as u
+};

package/dist/useEventCallback-vAfOD-oT.js

@@ -0,0 +1,45 @@
+import { P as a } from "./index-CqjC7P5Y.js";
+import * as c from "react";
+import { u as m } from "./useEnhancedEffect-CJGo-L3B.js";
+function s(e, n) {
+  return process.env.NODE_ENV === "production" ? () => null : function(...o) {
+    return e(...o) || n(...o);
+  };
+}
+function d(e) {
+  const {
+    prototype: n = {}
+  } = e;
+  return !!n.isReactComponent;
+}
+function f(e, n, t, o, l) {
+  const u = e[n], p = l || n;
+  if (u == null || // When server-side rendering React doesn't warn either.
+  // This is not an accurate check for SSR.
+  // This is only in place for Emotion compat.
+  // TODO: Revisit once https://github.com/facebook/react/issues/20047 is resolved.
+  typeof window > "u")
+    return null;
+  let r;
+  const i = u.type;
+  return typeof i == "function" && !d(i) && (r = "Did you accidentally use a plain function component for an element instead?"), r !== void 0 ? new Error(`Invalid ${o} \`${p}\` supplied to \`${t}\`. Expected an element that can hold a ref. ${r} For more information see https://mui.com/r/caveat-with-refs-guide`) : null;
+}
+const y = s(a.element, f);
+y.isRequired = s(a.element.isRequired, f);
+function E(e) {
+  return e && e.ownerDocument || document;
+}
+function h(e) {
+  const n = c.useRef(e);
+  return m(() => {
+    n.current = e;
+  }), c.useRef((...t) => (
+    // @ts-expect-error hide `this`
+    (0, n.current)(...t)
+  )).current;
+}
+export {
+  y as e,
+  E as o,
+  h as u
+};

package/dist/useList-ByMguSS_.js

@@ -0,0 +1,437 @@
+import { a as p } from "./objectWithoutPropertiesLoose-D7Cp0Pg_.js";
+import * as f from "react";
+import { L as x } from "./combineHooksSlotProps-BHqhiBfc.js";
+import { u as re, e as ie } from "./index-CqjC7P5Y.js";
+function W(t, e, r = (n, l) => n === l) {
+  return t.length === e.length && t.every((n, l) => r(n, e[l]));
+}
+function ue(t, e) {
+  return t === e;
+}
+const N = {}, q = () => {
+};
+function L(t, e) {
+  const r = p({}, t);
+  return Object.keys(e).forEach((n) => {
+    e[n] !== void 0 && (r[n] = e[n]);
+  }), r;
+}
+function ae(t) {
+  const {
+    nextState: e,
+    initialState: r,
+    stateComparers: n,
+    onStateChange: l,
+    controlledProps: s,
+    lastActionRef: i
+  } = t, h = f.useRef(r);
+  f.useEffect(() => {
+    if (i.current === null)
+      return;
+    const a = L(h.current, s);
+    Object.keys(e).forEach((C) => {
+      var V;
+      const g = (V = n[C]) != null ? V : ue, c = e[C], m = a[C];
+      if (m == null && c != null || m != null && c == null || m != null && c != null && !g(c, m)) {
+        var o, S;
+        l == null || l((o = i.current.event) != null ? o : null, C, c, (S = i.current.type) != null ? S : "", e);
+      }
+    }), h.current = e, i.current = null;
+  }, [h, e, i, l, n, s]);
+}
+function se(t) {
+  const e = f.useRef(null), {
+    reducer: r,
+    initialState: n,
+    controlledProps: l = N,
+    stateComparers: s = N,
+    onStateChange: i = q,
+    actionContext: h,
+    componentName: a = ""
+  } = t, C = f.useRef(l);
+  process.env.NODE_ENV !== "production" && f.useEffect(() => {
+    Object.keys(l).forEach((o) => {
+      C.current[o] !== void 0 && l[o] === void 0 && console.error(`useControllableReducer: ${a ? `The ${a} component` : "A component"} is changing a controlled prop to be uncontrolled: ${o}`), C.current[o] === void 0 && l[o] !== void 0 && console.error(`useControllableReducer: ${a ? `The ${a} component` : "A component"} is changing an uncontrolled prop to be controlled: ${o}`);
+    });
+  }, [l, a]);
+  const V = f.useCallback((o, S) => {
+    e.current = S;
+    const R = L(o, l);
+    return r(R, S);
+  }, [l, r]), [g, c] = f.useReducer(V, n), m = f.useCallback((o) => {
+    c(p({}, o, {
+      context: h
+    }));
+  }, [h]);
+  return ae({
+    nextState: g,
+    initialState: n,
+    stateComparers: s ?? N,
+    onStateChange: i ?? q,
+    controlledProps: l,
+    lastActionRef: e
+  }), [L(g, l), m];
+}
+function oe(t, e, r, n, l, s) {
+  if (r.length === 0 || !n && r.every((h, a) => l(h, a)))
+    return -1;
+  let i = t;
+  for (; ; ) {
+    if (!s && e === "next" && i === r.length || !s && e === "previous" && i === -1)
+      return -1;
+    if (n ? !1 : l(r[i], i))
+      i += e === "next" ? 1 : -1, s && (i = (i + r.length) % r.length);
+    else
+      return i;
+  }
+}
+function w(t, e, r) {
+  var n;
+  const {
+    items: l,
+    isItemDisabled: s,
+    disableListWrap: i,
+    disabledItemsFocusable: h,
+    itemComparer: a,
+    focusManagement: C
+  } = r, V = C === "DOM" ? 0 : -1, g = l.length - 1, c = t == null ? -1 : l.findIndex((D) => a(D, t));
+  let m, o, S = !i;
+  switch (e) {
+    case "reset":
+      if (V === -1)
+        return null;
+      m = 0, o = "next", S = !1;
+      break;
+    case "start":
+      m = 0, o = "next", S = !1;
+      break;
+    case "end":
+      m = g, o = "previous", S = !1;
+      break;
+    default: {
+      const D = c + e;
+      D < 0 ? !S && c !== -1 || Math.abs(e) > 1 ? (m = 0, o = "next") : (m = g, o = "previous") : D > g ? !S || Math.abs(e) > 1 ? (m = g, o = "previous") : (m = 0, o = "next") : (m = D, o = e >= 0 ? "next" : "previous");
+    }
+  }
+  const R = oe(m, o, l, h, s, S);
+  return R === -1 && t !== null && !s(t, c) ? t : (n = l[R]) != null ? n : null;
+}
+function ce(t, e, r, n) {
+  return r === "none" ? [] : r === "single" ? n(e[0], t) ? e : [t] : e.some((l) => n(l, t)) ? e.filter((l) => !n(l, t)) : [...e, t];
+}
+function j(t, e, r) {
+  const {
+    itemComparer: n,
+    isItemDisabled: l,
+    selectionMode: s,
+    items: i
+  } = r, {
+    selectedValues: h
+  } = e, a = i.findIndex((V) => n(t, V));
+  if (l(t, a))
+    return e;
+  const C = ce(t, h, s, n);
+  return p({}, e, {
+    selectedValues: C,
+    highlightedValue: t
+  });
+}
+function he(t, e, r) {
+  const n = e.highlightedValue, {
+    orientation: l,
+    pageSize: s
+  } = r;
+  switch (t) {
+    case "Home":
+      return p({}, e, {
+        highlightedValue: w(n, "start", r)
+      });
+    case "End":
+      return p({}, e, {
+        highlightedValue: w(n, "end", r)
+      });
+    case "PageUp":
+      return p({}, e, {
+        highlightedValue: w(n, -s, r)
+      });
+    case "PageDown":
+      return p({}, e, {
+        highlightedValue: w(n, s, r)
+      });
+    case "ArrowUp":
+      if (l !== "vertical")
+        break;
+      return p({}, e, {
+        highlightedValue: w(n, -1, r)
+      });
+    case "ArrowDown":
+      if (l !== "vertical")
+        break;
+      return p({}, e, {
+        highlightedValue: w(n, 1, r)
+      });
+    case "ArrowLeft": {
+      if (l === "vertical")
+        break;
+      return p({}, e, {
+        highlightedValue: w(n, l === "horizontal-ltr" ? -1 : 1, r)
+      });
+    }
+    case "ArrowRight": {
+      if (l === "vertical")
+        break;
+      return p({}, e, {
+        highlightedValue: w(n, l === "horizontal-ltr" ? 1 : -1, r)
+      });
+    }
+    case "Enter":
+    case " ":
+      return e.highlightedValue === null ? e : j(e.highlightedValue, e, r);
+  }
+  return e;
+}
+function ge(t, e) {
+  return e.focusManagement === "DOM" ? t : p({}, t, {
+    highlightedValue: null
+  });
+}
+function de(t, e, r) {
+  var n;
+  const l = (n = r(t)) == null ? void 0 : n.trim().toLowerCase();
+  return !l || l.length === 0 ? !1 : l.indexOf(e) === 0;
+}
+function fe(t, e, r) {
+  const {
+    items: n,
+    isItemDisabled: l,
+    disabledItemsFocusable: s,
+    getItemAsString: i
+  } = r, h = e.length > 1;
+  let a = h ? t.highlightedValue : w(t.highlightedValue, 1, r);
+  for (let C = 0; C < n.length; C += 1) {
+    if (!a || !h && t.highlightedValue === a)
+      return t;
+    if (de(a, e, i) && (!l(a, n.indexOf(a)) || s))
+      return p({}, t, {
+        highlightedValue: a
+      });
+    a = w(a, 1, r);
+  }
+  return t;
+}
+function me(t, e, r, n) {
+  var l;
+  const {
+    itemComparer: s,
+    focusManagement: i
+  } = n;
+  let h = null;
+  if (r.highlightedValue != null) {
+    var a;
+    h = (a = t.find((g) => s(g, r.highlightedValue))) != null ? a : null;
+  } else
+    i === "DOM" && e.length === 0 && (h = w(null, "reset", n));
+  const V = ((l = r.selectedValues) != null ? l : []).filter((g) => t.some((c) => s(c, g)));
+  return p({}, r, {
+    highlightedValue: h,
+    selectedValues: V
+  });
+}
+function pe(t, e) {
+  return p({}, t, {
+    highlightedValue: w(null, "reset", e)
+  });
+}
+function Ce(t, e) {
+  return p({}, t, {
+    highlightedValue: w(null, "end", e)
+  });
+}
+function Se(t, e) {
+  return p({}, t, {
+    selectedValues: [],
+    highlightedValue: w(null, "reset", e)
+  });
+}
+function Ie(t, e) {
+  const {
+    type: r,
+    context: n
+  } = e;
+  switch (r) {
+    case x.keyDown:
+      return he(e.key, t, n);
+    case x.itemClick:
+      return j(e.item, t, n);
+    case x.blur:
+      return ge(t, n);
+    case x.textNavigation:
+      return fe(t, e.searchString, n);
+    case x.itemsChange:
+      return me(e.items, e.previousItems, t, n);
+    case x.resetHighlight:
+      return pe(t, n);
+    case x.highlightLast:
+      return Ce(t, n);
+    case x.clearSelection:
+      return Se(t, n);
+    default:
+      return t;
+  }
+}
+const be = 500;
+function xe(t) {
+  const e = f.useRef({
+    searchString: "",
+    lastTime: null
+  });
+  return f.useCallback((r) => {
+    if (r.key.length === 1 && r.key !== " ") {
+      const n = e.current, l = r.key.toLowerCase(), s = performance.now();
+      n.searchString.length > 0 && n.lastTime && s - n.lastTime > be ? n.searchString = l : (n.searchString.length !== 1 || l !== n.searchString) && (n.searchString += l), n.lastTime = s, t(n.searchString, r);
+    }
+  }, [t]);
+}
+const z = {}, Ve = () => {
+}, we = (t, e) => t === e, De = () => !1, Re = (t) => typeof t == "string" ? t : String(t), ve = () => ({
+  highlightedValue: null,
+  selectedValues: []
+});
+function Oe(t) {
+  const {
+    controlledProps: e = z,
+    disabledItemsFocusable: r = !1,
+    disableListWrap: n = !1,
+    focusManagement: l = "activeDescendant",
+    getInitialState: s = ve,
+    getItemDomElement: i,
+    getItemId: h,
+    isItemDisabled: a = De,
+    rootRef: C,
+    onStateChange: V = Ve,
+    items: g,
+    itemComparer: c = we,
+    getItemAsString: m = Re,
+    onChange: o,
+    onHighlightChange: S,
+    onItemsChange: R,
+    orientation: D = "vertical",
+    pageSize: P = 5,
+    reducerActionContext: H = z,
+    selectionMode: $ = "single",
+    stateReducer: _,
+    componentName: G = "useList"
+  } = t;
+  if (process.env.NODE_ENV !== "production") {
+    if (l === "DOM" && i == null)
+      throw new Error("useList: The `getItemDomElement` prop is required when using the `DOM` focus management.");
+    if (l === "activeDescendant" && h == null)
+      throw new Error("useList: The `getItemId` prop is required when using the `activeDescendant` focus management.");
+  }
+  const B = f.useRef(null), F = re(C, B), T = f.useCallback((d, u, I) => {
+    if (S == null || S(d, u, I), l === "DOM" && u != null && (I === x.itemClick || I === x.keyDown || I === x.textNavigation)) {
+      var b;
+      i == null || (b = i(u)) == null || b.focus();
+    }
+  }, [i, S, l]), O = f.useMemo(() => ({
+    highlightedValue: c,
+    selectedValues: (d, u) => W(d, u, c)
+  }), [c]), J = f.useCallback((d, u, I, b, M) => {
+    switch (V == null || V(d, u, I, b, M), u) {
+      case "highlightedValue":
+        T(d, I, b);
+        break;
+      case "selectedValues":
+        o == null || o(d, I, b);
+        break;
+    }
+  }, [T, o, V]), K = f.useMemo(() => ({
+    disabledItemsFocusable: r,
+    disableListWrap: n,
+    focusManagement: l,
+    isItemDisabled: a,
+    itemComparer: c,
+    items: g,
+    getItemAsString: m,
+    onHighlightChange: T,
+    orientation: D,
+    pageSize: P,
+    selectionMode: $,
+    stateComparers: O
+  }), [r, n, l, a, c, g, m, T, D, P, $, O]), Y = s(), X = _ ?? Ie, Q = f.useMemo(() => p({}, H, K), [H, K]), [k, v] = se({
+    reducer: X,
+    actionContext: Q,
+    initialState: Y,
+    controlledProps: e,
+    stateComparers: O,
+    onStateChange: J,
+    componentName: G
+  }), {
+    highlightedValue: E,
+    selectedValues: A
+  } = k, Z = xe((d, u) => v({
+    type: x.textNavigation,
+    event: u,
+    searchString: d
+  })), y = f.useRef([]);
+  f.useEffect(() => {
+    W(y.current, g, c) || (v({
+      type: x.itemsChange,
+      event: null,
+      items: g,
+      previousItems: y.current
+    }), y.current = g, R == null || R(g));
+  }, [g, c, v, R]);
+  const ee = (d) => (u) => {
+    var I;
+    if ((I = d.onKeyDown) == null || I.call(d, u), u.defaultMuiPrevented)
+      return;
+    const b = ["Home", "End", "PageUp", "PageDown"];
+    D === "vertical" ? b.push("ArrowUp", "ArrowDown") : b.push("ArrowLeft", "ArrowRight"), l === "activeDescendant" && b.push(" ", "Enter"), b.includes(u.key) && u.preventDefault(), v({
+      type: x.keyDown,
+      key: u.key,
+      event: u
+    }), Z(u);
+  }, te = (d) => (u) => {
+    var I, b;
+    (I = d.onBlur) == null || I.call(d, u), !u.defaultMuiPrevented && ((b = B.current) != null && b.contains(u.relatedTarget) || v({
+      type: x.blur,
+      event: u
+    }));
+  }, ne = (d = {}) => {
+    const u = ie(d);
+    return p({}, d, {
+      "aria-activedescendant": l === "activeDescendant" && E != null ? h(E) : void 0,
+      tabIndex: l === "DOM" ? -1 : 0,
+      ref: F
+    }, u, {
+      onBlur: te(u),
+      onKeyDown: ee(u)
+    });
+  }, U = f.useCallback((d) => {
+    const u = (A ?? []).some((M) => M != null && c(d, M)), I = E != null && c(d, E);
+    return {
+      focusable: l === "DOM",
+      highlighted: I,
+      selected: u
+    };
+  }, [c, A, E, l]), le = f.useMemo(() => ({
+    dispatch: v,
+    getItemState: U
+  }), [v, U]);
+  return f.useDebugValue({
+    state: k
+  }), {
+    contextValue: le,
+    dispatch: v,
+    getRootProps: ne,
+    rootRef: F,
+    state: k
+  };
+}
+export {
+  j as h,
+  Ie as l,
+  w as m,
+  Oe as u
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "0.0.1-alpha.11",
+  "version": "0.0.1-alpha.12",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",