@pismo/marola 0.0.1-alpha.9 → 1.0.0-beta.1

package/dist/useList-B0hog_3-.js

@@ -0,0 +1,436 @@
+import { b as p, u as re, f as ie } from "./index-CH45lKw7.js";
+import * as f from "react";
+import { L as x } from "./combineHooksSlotProps-DVjg9PRh.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 se(t) {
+  const {
+    nextState: e,
+    initialState: r,
+    stateComparers: n,
+    onStateChange: l,
+    controlledProps: a,
+    lastActionRef: i
+  } = t, h = f.useRef(r);
+  f.useEffect(() => {
+    if (i.current === null)
+      return;
+    const s = L(h.current, a);
+    Object.keys(e).forEach((C) => {
+      var V;
+      const g = (V = n[C]) != null ? V : ue, c = e[C], m = s[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, a]);
+}
+function ae(t) {
+  const e = f.useRef(null), {
+    reducer: r,
+    initialState: n,
+    controlledProps: l = N,
+    stateComparers: a = N,
+    onStateChange: i = q,
+    actionContext: h,
+    componentName: s = ""
+  } = 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: ${s ? `The ${s} component` : "A component"} is changing a controlled prop to be uncontrolled: ${o}`), C.current[o] === void 0 && l[o] !== void 0 && console.error(`useControllableReducer: ${s ? `The ${s} component` : "A component"} is changing an uncontrolled prop to be controlled: ${o}`);
+    });
+  }, [l, s]);
+  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 se({
+    nextState: g,
+    initialState: n,
+    stateComparers: a ?? N,
+    onStateChange: i ?? q,
+    controlledProps: l,
+    lastActionRef: e
+  }), [L(g, l), m];
+}
+function oe(t, e, r, n, l, a) {
+  if (r.length === 0 || !n && r.every((h, s) => l(h, s)))
+    return -1;
+  let i = t;
+  for (; ; ) {
+    if (!a && e === "next" && i === r.length || !a && e === "previous" && i === -1)
+      return -1;
+    if (n ? !1 : l(r[i], i))
+      i += e === "next" ? 1 : -1, a && (i = (i + r.length) % r.length);
+    else
+      return i;
+  }
+}
+function w(t, e, r) {
+  var n;
+  const {
+    items: l,
+    isItemDisabled: a,
+    disableListWrap: i,
+    disabledItemsFocusable: h,
+    itemComparer: s,
+    focusManagement: C
+  } = r, V = C === "DOM" ? 0 : -1, g = l.length - 1, c = t == null ? -1 : l.findIndex((D) => s(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, a, S);
+  return R === -1 && t !== null && !a(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: a,
+    items: i
+  } = r, {
+    selectedValues: h
+  } = e, s = i.findIndex((V) => n(t, V));
+  if (l(t, s))
+    return e;
+  const C = ce(t, h, a, n);
+  return p({}, e, {
+    selectedValues: C,
+    highlightedValue: t
+  });
+}
+function he(t, e, r) {
+  const n = e.highlightedValue, {
+    orientation: l,
+    pageSize: a
+  } = 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, -a, r)
+      });
+    case "PageDown":
+      return p({}, e, {
+        highlightedValue: w(n, a, 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: a,
+    getItemAsString: i
+  } = r, h = e.length > 1;
+  let s = h ? t.highlightedValue : w(t.highlightedValue, 1, r);
+  for (let C = 0; C < n.length; C += 1) {
+    if (!s || !h && t.highlightedValue === s)
+      return t;
+    if (de(s, e, i) && (!l(s, n.indexOf(s)) || a))
+      return p({}, t, {
+        highlightedValue: s
+      });
+    s = w(s, 1, r);
+  }
+  return t;
+}
+function me(t, e, r, n) {
+  var l;
+  const {
+    itemComparer: a,
+    focusManagement: i
+  } = n;
+  let h = null;
+  if (r.highlightedValue != null) {
+    var s;
+    h = (s = t.find((g) => a(g, r.highlightedValue))) != null ? s : null;
+  } else
+    i === "DOM" && e.length === 0 && (h = w(null, "reset", n));
+  const V = ((l = r.selectedValues) != null ? l : []).filter((g) => t.some((c) => a(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(), a = performance.now();
+      n.searchString.length > 0 && n.lastTime && a - n.lastTime > be ? n.searchString = l : (n.searchString.length !== 1 || l !== n.searchString) && (n.searchString += l), n.lastTime = a, 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 Me(t) {
+  const {
+    controlledProps: e = z,
+    disabledItemsFocusable: r = !1,
+    disableListWrap: n = !1,
+    focusManagement: l = "activeDescendant",
+    getInitialState: a = ve,
+    getItemDomElement: i,
+    getItemId: h,
+    isItemDisabled: s = 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: s,
+    itemComparer: c,
+    items: g,
+    getItemAsString: m,
+    onHighlightChange: T,
+    orientation: D,
+    pageSize: P,
+    selectionMode: $,
+    stateComparers: O
+  }), [r, n, l, s, c, g, m, T, D, P, $, O]), Y = a(), X = _ ?? Ie, Q = f.useMemo(() => p({}, H, K), [H, K]), [k, v] = ae({
+    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,
+  Me as u
+};

package/dist/utils/styleStrings.d.ts

@@ -1,6 +1,6 @@
 import { Split } from '../types/helpers';
 
 export type BlockType<T extends string> = Split<T, '-'>[0];
-export declare const bemify: <T extends string>(variant: T, blocksWithElements: BlockType<T>[]) => string;
+export declare const bemify: <T extends string>(variant: T, blocksWithElements?: BlockType<T>[]) => string;
 export declare const getBEMBase: (variant: string) => string;
 export declare const getBEMBlock: (variant: string) => string;

package/dist/utils/styleStrings.js

@@ -1,10 +1,10 @@
-const s = (e, n) => {
-  const r = new RegExp(`^([${n.join("|")}]*)-`);
-  let t = e.replace(r, "$1__");
+const n = (r, e) => {
+  const g = new RegExp(`^([${e == null ? void 0 : e.join("|")}]*)-`);
+  let t = r.replace(g, "$1__");
   return t = t.replace(new RegExp("(?<!-)-(?!-)", "g"), "--"), t;
-}, c = (e) => e.split("--")[0], l = (e) => e.split(/--|__/)[0];
+}, p = (r) => r.split("--")[0], B = (r) => r.split(/--|__/)[0];
 export {
-  s as bemify,
-  c as getBEMBase,
-  l as getBEMBlock
+  n as bemify,
+  p as getBEMBase,
+  B as getBEMBlock
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "0.0.1-alpha.9",
+  "version": "1.0.0-beta.1",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -30,8 +30,9 @@
     "test:e2e": "echo \"no test implemented\"",
     "coverage": "vitest run --coverage",
     "export-files": "node scripts/export-files.cjs",
-    "prebuild": "yarn export-files",
-    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "generate-icon-types": "node scripts/generate-icon-types.cjs",
+    "prebuild": "yarn export-files & yarn generate-icon-types",
+    "build": "tsc --p ./tsconfig-build.json && vite build && mv ./dist/assets/marola.css ./dist",
     "postbuild": "storybook build --disable-telemetry --output-dir build",
     "storybook": "storybook dev -p 6006"
   },
@@ -45,7 +46,6 @@
     "@storybook/addon-essentials": "^8.0.8",
     "@storybook/addon-interactions": "^8.0.8",
     "@storybook/addon-links": "^8.0.8",
-    "@storybook/addon-onboarding": "^8.0.8",
     "@storybook/blocks": "^8.0.8",
     "@storybook/react": "^8.0.8",
     "@storybook/react-vite": "^8.0.8",

package/dist/Dialog.module-CGVM5V_D.js

@@ -1,15 +0,0 @@
-import './assets/Dialog.css';
-const _ = "_dialog_1o2te_1", o = "_dialog__backdrop_1o2te_11", i = "_dialog__panel_1o2te_19", l = "_dialog__title_1o2te_35", t = "_dialog__subtitle_1o2te_42", a = "_dialog__divider_1o2te_51", d = "_dialog__actions_1o2te_64", e = {
-  dialog: _,
-  dialog__backdrop: o,
-  dialog__panel: i,
-  dialog__title: l,
-  "dialog__title--small": "_dialog__title--small_1o2te_39",
-  dialog__subtitle: t,
-  dialog__divider: a,
-  "dialog__close-icon": "_dialog__close-icon_1o2te_55",
-  dialog__actions: d
-};
-export {
-  e as s
-};