@covalent/components-react 0.0.10 → 9.0.0-beta.4

package/index.mjs

@@ -1,268 +1,432 @@
 import * as e from "react";
-import { CovalentActionRibbon as h, CovalentAlert as $, CovalentAppShell as T, CovalentButton as S, CovalentCheckbox as b, CovalentCard as L, CovalentChip as I, CovalentChipSet as k, CovalentCircularProgress as y, CovalentCodeSnippet as f, CovalentDialog as R, CovalentDrawer as x, CovalentEmptyState as A, CovalentIcon as B, CovalentIconButton as w, CovalentIconCheckToggle as E, CovalentIconRadioToggle as H, CovalentLinearProgress as D, CovalentCheckListItem as F, CovalentList as M, CovalentListItem as P, CovalentNavRailListItem as j, CovalentRadioListItem as O, CovalentMenu as W, CovalentRadio as q, CovalentSelect as z, CovalentSideSheet as G, CovalentSlider as J, CovalentSliderRange as K, CovalentSnackbar as Q, CovalentStatusHeader as U, CovalentStatusHeaderItem as V, CovalentSwitch as X, CovalentTab as Y, CovalentTabBar as Z, CovalentTextArea as _, CovalentTextField as ee, CovalentTextLockup as te, CovalentToolbar as ae, CovalentTooltip as ne, CovalentTopAppBar as oe, CovalentTopAppBarFixed as le, CovalentTreeList as se, CovalentTreeListItem as ce, CovalentTypography as Ce } from "@covalent/components";
+import { CovalentActionRibbon as S, CovalentAlert as T, CovalentAppShell as b, CovalentBadge as I, CovalentButton as f, CovalentCard as x, CovalentCheckbox as L, CovalentCheckListItem as k, CovalentChip as y, CovalentChipSet as B, CovalentCircularProgress as R, CovalentCodeEditor as E, CovalentCodeSnippet as A, CovalentDialog as P, CovalentDrawer as F, CovalentEmptyState as w, CovalentExpansionPanel as D, CovalentExpansionPanelItem as q, CovalentFocusedPage as H, CovalentFormfield as M, CovalentFullscreenDialog as j, CovalentIcon as O, CovalentIconButton as W, CovalentIconButtonToggle as z, CovalentIconCheckToggle as G, CovalentIconRadioToggle as J, CovalentLinearProgress as K, CovalentList as Q, CovalentListItem as U, CovalentMenu as V, CovalentNavRailListItem as X, CovalentNotebookCell as Y, CovalentRadio as Z, CovalentRadioListItem as _, CovalentSelect as ee, CovalentSideSheet as te, CovalentSlider as ae, CovalentSliderRange as ne, CovalentSnackbar as oe, CovalentStatusDialog as le, CovalentStatusHeader as se, CovalentStatusHeaderItem as ce, CovalentSwitch as ve, CovalentTab as Ce, CovalentTabBar as re, CovalentTextArea as ie, CovalentTextField as ge, CovalentTextLockup as me, CovalentToolbar as de, CovalentTooltip as pe, CovalentTopAppBar as ue, CovalentTopAppBarFixed as Ne, CovalentTreeList as he, CovalentTreeListItem as $e, CovalentTypography as Se } from "@covalent/components";
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const ve = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), N = /* @__PURE__ */ new WeakMap(), re = (n, r, C, m, i) => {
-  const p = i == null ? void 0 : i[r];
-  p === void 0 || C === m ? (n[r] = C, C == null && r in HTMLElement.prototype && n.removeAttribute(r)) : ((v, l, s) => {
-    let c = N.get(v);
-    c === void 0 && N.set(v, c = /* @__PURE__ */ new Map());
-    let o = c.get(l);
-    s !== void 0 ? o === void 0 ? (c.set(l, o = { handleEvent: s }), v.addEventListener(l, o)) : o.handleEvent = s : o !== void 0 && (c.delete(l), v.removeEventListener(l, o));
-  })(n, p, C);
-}, t = ({ react: n, tagName: r, elementClass: C, events: m, displayName: i }) => {
-  const p = new Set(Object.keys(m ?? {})), v = n.forwardRef((l, s) => {
-    const c = n.useRef(null), o = n.useRef(null), g = {}, u = {};
-    for (const [a, d] of Object.entries(l))
-      ve.has(a) ? g[a === "className" ? "class" : a] = d : p.has(a) || a in C.prototype ? u[a] = d : g[a] = d;
-    return n.useLayoutEffect(() => {
-      if (o.current !== null) {
-        for (const a in u)
-          re(o.current, a, l[a], c.current ? c.current[a] : void 0, m);
-        c.current = l;
-      }
-    }), n.useLayoutEffect(() => {
+const Te = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), N = /* @__PURE__ */ new WeakMap(), h = (l, i, C, g, m) => {
+  const d = m == null ? void 0 : m[i];
+  d === void 0 ? (l[i] = C, C == null && i in HTMLElement.prototype && l.removeAttribute(i)) : C !== g && ((r, c, v) => {
+    let s = N.get(r);
+    s === void 0 && N.set(r, s = /* @__PURE__ */ new Map());
+    let n = s.get(c);
+    v !== void 0 ? n === void 0 ? (s.set(c, n = { handleEvent: v }), r.addEventListener(c, n)) : n.handleEvent = v : n !== void 0 && (s.delete(c), r.removeEventListener(c, n));
+  })(l, d, C);
+}, t = ({ react: l, tagName: i, elementClass: C, events: g, displayName: m }) => {
+  const d = new Set(Object.keys(g ?? {})), r = l.forwardRef((c, v) => {
+    const s = l.useRef(/* @__PURE__ */ new Map()), n = l.useRef(null), p = {}, u = {};
+    for (const [a, o] of Object.entries(c)) Te.has(a) ? p[a === "className" ? "class" : a] = o : d.has(a) || a in C.prototype ? u[a] = o : p[a] = o;
+    return l.useLayoutEffect(() => {
+      if (n.current === null) return;
+      const a = /* @__PURE__ */ new Map();
+      for (const o in u) h(n.current, o, c[o], s.current.get(o), g), s.current.delete(o), a.set(o, c[o]);
+      for (const [o, $] of s.current) h(n.current, o, void 0, $, g);
+      s.current = a;
+    }), l.useLayoutEffect(() => {
       var a;
-      (a = o.current) == null || a.removeAttribute("defer-hydration");
-    }, []), g.suppressHydrationWarning = !0, n.createElement(r, { ...g, ref: n.useCallback((a) => {
-      o.current = a, typeof s == "function" ? s(a) : s !== null && (s.current = a);
-    }, [s]) });
+      (a = n.current) == null || a.removeAttribute("defer-hydration");
+    }, []), p.suppressHydrationWarning = !0, l.createElement(i, { ...p, ref: l.useCallback((a) => {
+      n.current = a, typeof v == "function" ? v(a) : v !== null && (v.current = a);
+    }, [v]) });
   });
-  return v.displayName = i ?? C.name, v;
-}, me = t({
+  return r.displayName = m ?? C.name, r;
+}, Ie = t({
   tagName: "cv-action-ribbon",
-  elementClass: h,
+  elementClass: S,
   react: e
-}), pe = t({
+}), fe = t({
   tagName: "cv-alert",
-  elementClass: $,
+  elementClass: T,
   react: e
-}), ge = t({
+}), xe = t({
   tagName: "cv-app-shell",
-  elementClass: T,
+  elementClass: b,
+  react: e,
+  events: {
+    ontoggle: "toggle"
+  }
+}), Le = t({
+  tagName: "cv-badge",
+  elementClass: I,
   react: e
-}), de = t({
+}), ke = t({
   tagName: "cv-button",
-  elementClass: S,
-  react: e
-}), ue = t({
-  tagName: "cv-checkbox",
-  elementClass: b,
+  elementClass: f,
   react: e
-}), Ne = t({
+}), ye = t({
   tagName: "cv-card",
-  elementClass: L,
+  elementClass: x,
   react: e
-}), he = t({
+}), Be = t({
+  tagName: "cv-checkbox",
+  elementClass: L,
+  react: e,
+  events: {
+    onchange: "change"
+  }
+}), Re = t({
+  tagName: "cv-check-list-item",
+  elementClass: k,
+  react: e,
+  events: {
+    onrequestSelected: "request-selected"
+  }
+}), Ee = t({
   tagName: "cv-chip",
-  elementClass: I,
+  elementClass: y,
   react: e
-}), $e = t({
+}), Ae = t({
   tagName: "cv-chip-set",
-  elementClass: k,
+  elementClass: B,
   react: e
-}), Te = t({
+}), Pe = t({
   tagName: "cv-circular-progress",
-  elementClass: y,
+  elementClass: R,
   react: e
-}), Se = t({
+}), Fe = t({
+  tagName: "cv-code-editor",
+  elementClass: E,
+  react: e,
+  events: {
+    oneditorReady: "editor-ready",
+    oneditorFocus: "editor-focus",
+    oneditorBlur: "editor-blur",
+    oncodeChange: "code-change"
+  }
+}), we = t({
   tagName: "cv-code-snippet",
-  elementClass: f,
+  elementClass: A,
   react: e
-}), be = t({
+}), De = t({
   tagName: "cv-dialog",
-  elementClass: R,
-  react: e
-}), Le = t({
+  elementClass: P,
+  react: e,
+  events: {
+    onopening: "opening",
+    onopened: "opened",
+    onclosing: "closing",
+    onclosed: "closed"
+  }
+}), qe = t({
   tagName: "cv-drawer",
-  elementClass: x,
-  react: e
-}), Ie = t({
+  elementClass: F,
+  react: e,
+  events: {
+    onopened: "opened",
+    onclosed: "closed"
+  }
+}), He = t({
   tagName: "cv-empty-state",
-  elementClass: A,
-  react: e
-}), ke = t({
-  tagName: "cv-icon",
-  elementClass: B,
-  react: e
-}), ye = t({
-  tagName: "cv-icon-button",
   elementClass: w,
   react: e
-}), fe = t({
-  tagName: "cv-icon-check-item",
-  elementClass: E,
-  react: e
-}), Re = t({
-  tagName: "cv-icon-radio-item",
-  elementClass: H,
-  react: e
-}), xe = t({
-  tagName: "cv-linear-progress",
+}), Me = t({
+  tagName: "cv-expansion-panel",
   elementClass: D,
   react: e
-}), Ae = t({
-  tagName: "cv-check-list-item",
-  elementClass: F,
+}), je = t({
+  tagName: "cv-expansion-panel-item",
+  elementClass: q,
+  react: e,
+  events: {
+    oncvExpansionPanelTogglePanel: "cv-expansionPanel-togglePanel"
+  }
+}), Oe = t({
+  tagName: "cv-focused-page",
+  elementClass: H,
   react: e
-}), Be = t({
-  tagName: "cv-list",
+}), We = t({
+  tagName: "cv-formfield",
   elementClass: M,
   react: e
-}), we = t({
-  tagName: "cv-list-item",
-  elementClass: P,
-  react: e
-}), Ee = t({
-  tagName: "cv-nav-list-item",
+}), ze = t({
+  tagName: "cv-full-screen-dialog",
   elementClass: j,
-  react: e
-}), He = t({
-  tagName: "cv-radio-list-item",
+  react: e,
+  events: {
+    onopening: "opening",
+    onopened: "opened",
+    onclosing: "closing",
+    onclosed: "closed"
+  }
+}), Ge = t({
+  tagName: "cv-icon",
   elementClass: O,
   react: e
-}), De = t({
-  tagName: "cv-menu",
+}), Je = t({
+  tagName: "cv-icon-button",
   elementClass: W,
   react: e
-}), Fe = t({
-  tagName: "cv-radio",
-  elementClass: q,
-  react: e
-}), Me = t({
-  tagName: "cv-select",
+}), Ke = t({
+  tagName: "cv-icon-button-toggle",
   elementClass: z,
-  react: e
-}), Pe = t({
-  tagName: "cv-side-sheet",
+  react: e,
+  events: {
+    oniconButtonToggleChange: "icon-button-toggle-change"
+  }
+}), Qe = t({
+  tagName: "cv-checkbox-icon",
   elementClass: G,
   react: e,
   events: {
-    opening: "opening",
-    opened: "opened",
-    closing: "closing",
-    closed: "closed"
+    onchange: "change"
   }
-}), je = t({
-  tagName: "cv-slider",
+}), Ue = t({
+  tagName: "cv-radio-icon",
   elementClass: J,
-  react: e
-}), Oe = t({
-  tagName: "cv-slider-range",
+  react: e,
+  events: {
+    onchange: "change"
+  }
+}), Ve = t({
+  tagName: "cv-linear-progress",
   elementClass: K,
   react: e
-}), We = t({
-  tagName: "cv-snackbar",
+}), Xe = t({
+  tagName: "cv-list",
   elementClass: Q,
+  react: e,
+  events: {
+    onaction: "action",
+    onselected: "selected"
+  }
+}), Ye = t({
+  tagName: "cv-list-item",
+  elementClass: U,
+  react: e,
+  events: {
+    onrequestSelected: "request-selected"
+  }
+}), Ze = t({
+  tagName: "cv-menu",
+  elementClass: V,
+  react: e,
+  events: {
+    onopened: "opened",
+    onclosing: "closing",
+    onclosed: "closed",
+    onaction: "action",
+    onselected: "selected"
+  }
+}), _e = t({
+  tagName: "cv-nav-list-item",
+  elementClass: X,
+  react: e,
+  events: {
+    onrequestSelected: "request-selected"
+  }
+}), et = t({
+  tagName: "cv-notebook-cell",
+  elementClass: Y,
   react: e
-}), qe = t({
+}), tt = t({
+  tagName: "cv-radio",
+  elementClass: Z,
+  react: e,
+  events: {
+    onchange: "change"
+  }
+}), at = t({
+  tagName: "cv-radio-list-item",
+  elementClass: _,
+  react: e,
+  events: {
+    onrequestSelected: "request-selected"
+  }
+}), nt = t({
+  tagName: "cv-select",
+  elementClass: ee,
+  react: e,
+  events: {
+    onopened: "opened",
+    onclosed: "closed",
+    onselected: "selected"
+  }
+}), ot = t({
+  tagName: "cv-side-sheet",
+  elementClass: te,
+  react: e,
+  events: {
+    onopening: "opening",
+    onopened: "opened",
+    onclosing: "closing",
+    onclosed: "closed"
+  }
+}), lt = t({
+  tagName: "cv-slider",
+  elementClass: ae,
+  react: e,
+  events: {
+    oninput: "input",
+    onchange: "change"
+  }
+}), st = t({
+  tagName: "cv-slider-range",
+  elementClass: ne,
+  react: e,
+  events: {
+    oninput: "input",
+    onchange: "change"
+  }
+}), ct = t({
+  tagName: "cv-snackbar",
+  elementClass: oe,
+  react: e,
+  events: {
+    onopening: "opening",
+    onopened: "opened",
+    onclosing: "closing",
+    onclosed: "closed"
+  }
+}), vt = t({
+  tagName: "cv-status-dialog",
+  elementClass: le,
+  react: e,
+  events: {
+    onopening: "opening",
+    onopened: "opened",
+    onclosing: "closing",
+    onclosed: "closed"
+  }
+}), Ct = t({
   tagName: "cv-status-header",
-  elementClass: U,
+  elementClass: se,
   react: e
-}), ze = t({
+}), rt = t({
   tagName: "cv-status-header-item",
-  elementClass: V,
+  elementClass: ce,
   react: e
-}), Ge = t({
+}), it = t({
   tagName: "cv-switch",
-  elementClass: X,
+  elementClass: ve,
   react: e
-}), Je = t({
+}), gt = t({
   tagName: "cv-tab",
-  elementClass: Y,
-  react: e
-}), Ke = t({
+  elementClass: Ce,
+  react: e,
+  events: {
+    oninteracted: "interacted"
+  }
+}), mt = t({
   tagName: "cv-tab-bar",
-  elementClass: Z,
-  react: e
-}), Qe = t({
+  elementClass: re,
+  react: e,
+  events: {
+    onactivated: "activated"
+  }
+}), dt = t({
   tagName: "cv-textarea",
-  elementClass: _,
+  elementClass: ie,
   react: e
-}), Ue = t({
+}), pt = t({
   tagName: "cv-textfield",
-  elementClass: ee,
+  elementClass: ge,
   react: e
-}), Ve = t({
+}), ut = t({
   tagName: "cv-text-lockup",
-  elementClass: te,
+  elementClass: me,
   react: e
-}), Xe = t({
+}), Nt = t({
   tagName: "cv-toolbar",
-  elementClass: ae,
-  react: e
-}), Ye = t({
+  elementClass: de,
+  react: e,
+  events: {
+    onnav: "nav"
+  }
+}), ht = t({
   tagName: "cv-tooltip",
-  elementClass: ne,
+  elementClass: pe,
   react: e
-}), Ze = t({
+}), $t = t({
   tagName: "cv-top-app-bar",
-  elementClass: oe,
-  react: e
-}), _e = t({
+  elementClass: ue,
+  react: e,
+  events: {
+    onnav: "nav"
+  }
+}), St = t({
   tagName: "cv-top-app-bar-fixed",
-  elementClass: le,
-  react: e
-}), et = t({
+  elementClass: Ne,
+  react: e,
+  events: {
+    onnav: "nav"
+  }
+}), Tt = t({
   tagName: "cv-tree-list",
-  elementClass: se,
-  react: e
-}), tt = t({
+  elementClass: he,
+  react: e,
+  events: {
+    onnav: "nav"
+  }
+}), bt = t({
   tagName: "cv-tree-list-item",
-  elementClass: ce,
-  react: e
-}), at = t({
+  elementClass: $e,
+  react: e,
+  events: {
+    onselect: "select"
+  }
+}), It = t({
   tagName: "cv-typography",
-  elementClass: Ce,
-  react: e
+  elementClass: Se,
+  react: e,
+  events: {
+    onselect: "select"
+  }
 });
 export {
-  me as CovalentActionRibbon,
-  pe as CovalentAlert,
-  ge as CovalentAppShell,
-  de as CovalentButton,
-  Ne as CovalentCard,
-  Ae as CovalentCheckListItem,
-  ue as CovalentCheckbox,
-  he as CovalentChip,
-  $e as CovalentChipSet,
-  Te as CovalentCircularProgress,
-  Se as CovalentCodeSnippet,
-  be as CovalentDialog,
-  Le as CovalentDrawer,
-  Ie as CovalentEmptyState,
-  ke as CovalentIcon,
-  ye as CovalentIconButton,
-  fe as CovalentIconCheckToggle,
-  Re as CovalentIconRadioToggle,
-  xe as CovalentLinearProgress,
-  Be as CovalentList,
-  we as CovalentListItem,
-  De as CovalentMenu,
-  Ee as CovalentNavRailListItem,
-  Fe as CovalentRadio,
-  He as CovalentRadioListItem,
-  Me as CovalentSelect,
-  Pe as CovalentSideSheet,
-  je as CovalentSlider,
-  Oe as CovalentSliderRange,
-  We as CovalentSnackbar,
-  qe as CovalentStatusHeader,
-  ze as CovalentStatusHeaderItem,
-  Ge as CovalentSwitch,
-  Je as CovalentTab,
-  Ke as CovalentTabBar,
-  Qe as CovalentTextArea,
-  Ue as CovalentTextField,
-  Ve as CovalentTextLockup,
-  Xe as CovalentToolbar,
-  Ye as CovalentTooltip,
-  Ze as CovalentTopAppBar,
-  _e as CovalentTopAppBarFixed,
-  et as CovalentTreeList,
-  tt as CovalentTreeListItem,
-  at as CovalentTypography
+  Ie as CovalentActionRibbon,
+  fe as CovalentAlert,
+  xe as CovalentAppShell,
+  Le as CovalentBadge,
+  ke as CovalentButton,
+  ye as CovalentCard,
+  Re as CovalentCheckListItem,
+  Be as CovalentCheckbox,
+  Ee as CovalentChip,
+  Ae as CovalentChipSet,
+  Pe as CovalentCircularProgress,
+  Fe as CovalentCodeEditor,
+  we as CovalentCodeSnippet,
+  De as CovalentDialog,
+  qe as CovalentDrawer,
+  He as CovalentEmptyState,
+  Me as CovalentExpansionPanel,
+  je as CovalentExpansionPanelItem,
+  Oe as CovalentFocusedPage,
+  We as CovalentFormfield,
+  ze as CovalentFullscreenDialog,
+  Ge as CovalentIcon,
+  Je as CovalentIconButton,
+  Ke as CovalentIconButtonToggle,
+  Qe as CovalentIconCheckToggle,
+  Ue as CovalentIconRadioToggle,
+  Ve as CovalentLinearProgress,
+  Xe as CovalentList,
+  Ye as CovalentListItem,
+  Ze as CovalentMenu,
+  _e as CovalentNavRailListItem,
+  et as CovalentNotebookCell,
+  tt as CovalentRadio,
+  at as CovalentRadioListItem,
+  nt as CovalentSelect,
+  ot as CovalentSideSheet,
+  lt as CovalentSlider,
+  st as CovalentSliderRange,
+  ct as CovalentSnackbar,
+  vt as CovalentStatusDialog,
+  Ct as CovalentStatusHeader,
+  rt as CovalentStatusHeaderItem,
+  it as CovalentSwitch,
+  gt as CovalentTab,
+  mt as CovalentTabBar,
+  dt as CovalentTextArea,
+  pt as CovalentTextField,
+  ut as CovalentTextLockup,
+  Nt as CovalentToolbar,
+  ht as CovalentTooltip,
+  $t as CovalentTopAppBar,
+  St as CovalentTopAppBarFixed,
+  Tt as CovalentTreeList,
+  bt as CovalentTreeListItem,
+  It as CovalentTypography
 };

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@covalent/components-react",
-  "version": "0.0.10",
+  "version": "9.0.0-beta.4",
   "dependencies": {
-    "@covalent/components": "latest",
-    "react": "^18.2.0"
+    "@covalent/components": "latest"
   },
   "main": "./index.js",
   "module": "./index.mjs",
   "typings": "./index.d.ts"
-}
+}