@edifice.io/react 2.0.0-develop-rc.12 → 2.0.0-develop-rc.13

package/dist/components/Table/Table.components.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+const TableThead = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx("thead", { ...restProps, children });
+}, TableTh = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx("th", { ...restProps, children });
+}, TableTr = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx("tr", { ...restProps, children });
+}, TableTbody = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx("tbody", { ...restProps, children });
+}, TableTd = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx("td", { ...restProps, children });
+};
+export {
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr
+};

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+export type TableRef = HTMLTableElement;
+export interface TableProps {
+    children?: Array<React.ReactElement<HTMLTableSectionElement>> | any;
+}
+export declare const Root: import('react').ForwardRefExoticComponent<{
+    children: ReactNode;
+} & import('react').RefAttributes<HTMLTableElement>>;
+declare const Table: import('react').ForwardRefExoticComponent<{
+    children: ReactNode;
+} & import('react').RefAttributes<HTMLTableElement>> & {
+    Thead: {
+        (props: import('react').HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Th: {
+        (props: import('react').HTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Tbody: {
+        (props: import('react').HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Tr: {
+        (props: import('react').HTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Td: {
+        (props: import('react').HTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export default Table;

package/dist/components/Table/Table.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TableThead, TableTh, TableTbody, TableTr, TableTd } from "./Table.components.js";
+const Root = /* @__PURE__ */ forwardRef(({
+  children
+}, ref) => /* @__PURE__ */ jsx("div", { className: "table-responsive", children: /* @__PURE__ */ jsx("table", { ref, className: "table align-middle mb-0", children }) })), Table = /* @__PURE__ */ Object.assign(Root, {
+  Thead: TableThead,
+  Th: TableTh,
+  Tbody: TableTbody,
+  Tr: TableTr,
+  Td: TableTd
+}), Table$1 = Table;
+export {
+  Root,
+  Table$1 as default
+};

package/dist/components/Table/TableExplorer.d.ts

@@ -10,5 +10,5 @@ export type TableExplorerRef = HTMLTableElement;
 export interface TableExplorerProps {
     children?: Array<React.ReactElement<HTMLTableSectionElement>>;
 }
-export declare const TableExplorer: import('react').ForwardRefExoticComponent<TableExplorerProps & import('react').RefAttributes<HTMLTableElement>>;
+declare const TableExplorer: import('react').ForwardRefExoticComponent<TableExplorerProps & import('react').RefAttributes<HTMLTableElement>>;
 export default TableExplorer;

package/dist/components/Table/index.d.ts

@@ -1 +1,2 @@
-export * from './TableExplorer';
+export * from './Table';
+export { default as Table } from './Table';

package/dist/components/Tabs/Tabs.d.ts

@@ -21,7 +21,7 @@ export interface TabsProps {
 /**
  * Tab Content displayed one at a time when a Tab Item is selected
  */
-export declare const Tabs: {
+declare const Tabs: {
     ({ defaultId, items, onChange, children }: TabsProps): import("react/jsx-runtime").JSX.Element;
     Item: {
         ({ icon, label, id, order, }: TabsItemProps & {

package/dist/components/Tabs/Tabs.js

@@ -1,76 +1,75 @@
-import { jsx as T, jsxs as N, Fragment as W } from "react/jsx-runtime";
-import { useState as x, useRef as g, useCallback as l, useEffect as U, useMemo as j } from "react";
-import { TabsContext as m } from "./TabsContext.js";
-import y from "./TabsItem.js";
-import z from "./TabsList.js";
-import S from "./TabsPanel.js";
-const a = ({
-  defaultId: f,
-  items: e,
-  onChange: b,
-  children: v
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { TabsContext } from "./TabsContext.js";
+import TabsItem from "./TabsItem.js";
+import TabsList from "./TabsList.js";
+import TabsPanel from "./TabsPanel.js";
+const Tabs = ({
+  defaultId,
+  items,
+  onChange,
+  children
 }) => {
-  const [r, d] = x(f || ""), [L, I] = x(0), [p, A] = x(0), w = g([]), P = l((n) => {
-    d(n);
+  const [activeTab, setActiveTab] = useState(defaultId || ""), [tabUnderlineWidth, setTabUnderlineWidth] = useState(0), [tabUnderlineLeft, setTabUnderlineLeft] = useState(0), tabsRef = useRef([]), setSelectedTab = useCallback((id) => {
+    setActiveTab(id);
   }, []);
-  U(() => {
-    const n = e.find((t) => t.id === r);
-    n && (b == null || b(n));
-  }, [r]), U(() => {
-    function n() {
-      var t;
-      if (((t = document == null ? void 0 : document.activeElement) == null ? void 0 : t.tagName) !== "INPUT") {
-        const i = e.findIndex((c) => c.id === r);
-        i === -1 && f && d(f);
-        const o = w.current[i];
-        o && (o.focus(), A((o == null ? void 0 : o.offsetLeft) ?? 0), I((o == null ? void 0 : o.clientWidth) ?? 0));
+  useEffect(() => {
+    const currentItem2 = items.find((item) => item.id === activeTab);
+    currentItem2 && (onChange == null || onChange(currentItem2));
+  }, [activeTab]), useEffect(() => {
+    function setTabPosition() {
+      var _a;
+      if (((_a = document == null ? void 0 : document.activeElement) == null ? void 0 : _a.tagName) !== "INPUT") {
+        const currentTabIndex = items.findIndex((item) => item.id === activeTab);
+        currentTabIndex === -1 && defaultId && setActiveTab(defaultId);
+        const currentTabRef = tabsRef.current[currentTabIndex];
+        currentTabRef && (currentTabRef.focus(), setTabUnderlineLeft((currentTabRef == null ? void 0 : currentTabRef.offsetLeft) ?? 0), setTabUnderlineWidth((currentTabRef == null ? void 0 : currentTabRef.clientWidth) ?? 0));
       }
     }
-    return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
-  }, [r, e, f]);
-  const h = l((n) => {
-    var i, o, c;
-    const t = e.findIndex((u) => u.id === n);
-    n === ((i = e[0]) == null ? void 0 : i.id) ? d((o = e[e.length - 1]) == null ? void 0 : o.id) : d((c = e[t - 1]) == null ? void 0 : c.id);
-  }, [e]), k = l((n) => {
-    var i, o, c;
-    const t = e.findIndex((u) => u.id === n);
-    n === ((i = e[e.length - 1]) == null ? void 0 : i.id) ? d((o = e[0]) == null ? void 0 : o.id) : d((c = e[t + 1]) == null ? void 0 : c.id);
-  }, [e]), E = l((n) => {
-    var t, i;
-    switch (n.code) {
+    return setTabPosition(), window.addEventListener("resize", setTabPosition), () => window.removeEventListener("resize", setTabPosition);
+  }, [activeTab, items, defaultId]);
+  const moveFocusToPreviousTab = useCallback((activeTab2) => {
+    var _a, _b, _c;
+    const index = items.findIndex((item) => item.id === activeTab2);
+    activeTab2 === ((_a = items[0]) == null ? void 0 : _a.id) ? setActiveTab((_b = items[items.length - 1]) == null ? void 0 : _b.id) : setActiveTab((_c = items[index - 1]) == null ? void 0 : _c.id);
+  }, [items]), moveFocusToNextTab = useCallback((activeTab2) => {
+    var _a, _b, _c;
+    const index = items.findIndex((item) => item.id === activeTab2);
+    activeTab2 === ((_a = items[items.length - 1]) == null ? void 0 : _a.id) ? setActiveTab((_b = items[0]) == null ? void 0 : _b.id) : setActiveTab((_c = items[index + 1]) == null ? void 0 : _c.id);
+  }, [items]), onKeyDown = useCallback((event) => {
+    var _a, _b;
+    switch (event.code) {
       case "ArrowLeft":
-        h(r);
+        moveFocusToPreviousTab(activeTab);
         break;
       case "ArrowRight":
-        k(r);
+        moveFocusToNextTab(activeTab);
         break;
       case "Home":
-        d((t = e[0]) == null ? void 0 : t.id);
+        setActiveTab((_a = items[0]) == null ? void 0 : _a.id);
         break;
       case "End":
-        d((i = e[e.length - 1]) == null ? void 0 : i.id);
+        setActiveTab((_b = items[items.length - 1]) == null ? void 0 : _b.id);
         break;
     }
-  }, [r, e, k, h]), F = j(() => ({
-    activeTab: r,
-    items: e,
-    setSelectedTab: P,
-    tabsRef: w,
-    tabUnderlineLeft: p,
-    tabUnderlineWidth: L,
-    onKeyDown: E
-  }), [r, e, E, P, p, L]), s = e.find((n) => n.id === r);
-  return /* @__PURE__ */ T(m.Provider, { value: F, children: typeof v == "function" ? v(s) : /* @__PURE__ */ N(W, { children: [
-    /* @__PURE__ */ T(a.List, {}),
-    /* @__PURE__ */ T(a.Panel, { currentItem: s, children: s == null ? void 0 : s.content })
+  }, [activeTab, items, moveFocusToNextTab, moveFocusToPreviousTab]), value = useMemo(() => ({
+    activeTab,
+    items,
+    setSelectedTab,
+    tabsRef,
+    tabUnderlineLeft,
+    tabUnderlineWidth,
+    onKeyDown
+  }), [activeTab, items, onKeyDown, setSelectedTab, tabUnderlineLeft, tabUnderlineWidth]), currentItem = items.find((item) => item.id === activeTab);
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: typeof children == "function" ? children(currentItem) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tabs.List, {}),
+    /* @__PURE__ */ jsx(Tabs.Panel, { currentItem, children: currentItem == null ? void 0 : currentItem.content })
   ] }) });
 };
-a.Item = y;
-a.Panel = S;
-a.List = z;
+Tabs.Item = TabsItem;
+Tabs.Panel = TabsPanel;
+Tabs.List = TabsList;
+const Tabs$1 = Tabs;
 export {
-  a as Tabs,
-  a as default
+  Tabs$1 as default
 };
-//# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/TabsContext.js

@@ -1,13 +1,12 @@
-import { createContext as o, useContext as e } from "react";
-const n = /* @__PURE__ */ o(null);
-function s() {
-  const t = e(n);
-  if (!t)
+import { createContext, useContext } from "react";
+const TabsContext = /* @__PURE__ */ createContext(null);
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context)
     throw new Error("Tabs compound components cannot be rendered outside the Tabs component");
-  return t;
+  return context;
 }
 export {
-  n as TabsContext,
-  s as useTabsContext
+  TabsContext,
+  useTabsContext
 };
-//# sourceMappingURL=TabsContext.js.map

package/dist/components/Tabs/TabsItem.js

@@ -1,27 +1,26 @@
-import { jsx as a, jsxs as f } from "react/jsx-runtime";
-import p from "clsx";
-import { useTranslation as x } from "react-i18next";
-import { useTabsContext as u } from "./TabsContext.js";
-const v = ({
-  icon: s,
-  label: o,
-  id: e,
-  order: r
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { useTabsContext } from "./TabsContext.js";
+const TabsItem = ({
+  icon,
+  label,
+  id,
+  order
 }) => {
   const {
-    activeTab: t,
-    setSelectedTab: l,
-    onKeyDown: c,
-    tabsRef: i
-  } = u(), {
-    t: m
-  } = x(), b = p("nav-link d-inline-flex gap-8 border-0", t === e ? "selected" : "");
-  return /* @__PURE__ */ a("li", { className: "nav-item flex-shrink-0", role: "presentation", children: /* @__PURE__ */ f("button", { ref: (n) => i.current[r] = n, type: "button", id: `tab-${e}`, className: b, onClick: () => l(e), onKeyDown: (n) => c(n), role: "tab", "aria-controls": `tabpanel-${e}`, "aria-selected": t === e, tabIndex: t === e ? 0 : -1, children: [
-    s,
-    /* @__PURE__ */ a("small", { children: m(o) })
+    activeTab,
+    setSelectedTab,
+    onKeyDown,
+    tabsRef
+  } = useTabsContext(), {
+    t
+  } = useTranslation(), classes = clsx("nav-link d-inline-flex gap-8 border-0", activeTab === id ? "selected" : "");
+  return /* @__PURE__ */ jsx("li", { className: "nav-item flex-shrink-0", role: "presentation", children: /* @__PURE__ */ jsxs("button", { ref: (el) => tabsRef.current[order] = el, type: "button", id: `tab-${id}`, className: classes, onClick: () => setSelectedTab(id), onKeyDown: (event) => onKeyDown(event), role: "tab", "aria-controls": `tabpanel-${id}`, "aria-selected": activeTab === id, tabIndex: activeTab === id ? 0 : -1, children: [
+    icon,
+    /* @__PURE__ */ jsx("small", { children: t(label) })
   ] }) });
 };
 export {
-  v as default
+  TabsItem as default
 };
-//# sourceMappingURL=TabsItem.js.map

package/dist/components/Tabs/TabsList.js

@@ -1,25 +1,24 @@
-import { jsxs as c, jsx as s } from "react/jsx-runtime";
-import d from "clsx";
-import { Tabs as f } from "./Tabs.js";
-import { useTabsContext as p } from "./TabsContext.js";
-const h = (e) => {
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import Tabs from "./Tabs.js";
+import { useTabsContext } from "./TabsContext.js";
+const TabsList = (props) => {
   const {
-    items: a,
-    tabUnderlineLeft: r,
-    tabUnderlineWidth: o
-  } = p(), {
-    className: l,
-    ...i
-  } = e, n = d("position-relative flex-shrink-0 overflow-x-auto", l);
-  return /* @__PURE__ */ c("div", { className: n, ...i, children: [
-    /* @__PURE__ */ s("ul", { className: "nav nav-tabs flex-nowrap", role: "tablist", children: a.map((t, m) => /* @__PURE__ */ s(f.Item, { order: m, ...t }, t.id)) }),
-    /* @__PURE__ */ s("span", { className: "nav-slide", style: {
-      left: r,
-      width: o
+    items,
+    tabUnderlineLeft,
+    tabUnderlineWidth
+  } = useTabsContext(), {
+    className,
+    ...restProps
+  } = props, tabslist = clsx("position-relative flex-shrink-0 overflow-x-auto", className);
+  return /* @__PURE__ */ jsxs("div", { className: tabslist, ...restProps, children: [
+    /* @__PURE__ */ jsx("ul", { className: "nav nav-tabs flex-nowrap", role: "tablist", children: items.map((item, order) => /* @__PURE__ */ jsx(Tabs.Item, { order, ...item }, item.id)) }),
+    /* @__PURE__ */ jsx("span", { className: "nav-slide", style: {
+      left: tabUnderlineLeft,
+      width: tabUnderlineWidth
     } })
   ] });
 };
 export {
-  h as default
+  TabsList as default
 };
-//# sourceMappingURL=TabsList.js.map

package/dist/components/Tabs/TabsPanel.js

@@ -1,15 +1,14 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useTabsContext as s } from "./TabsContext.js";
-const f = ({
-  children: i,
-  currentItem: a
+import { jsx } from "react/jsx-runtime";
+import { useTabsContext } from "./TabsContext.js";
+const TabsPanel = ({
+  children,
+  currentItem
 }) => {
   const {
-    activeTab: d
-  } = s();
-  return /* @__PURE__ */ l("div", { className: "tab-content d-flex flex-fill w-100", children: /* @__PURE__ */ l("div", { className: `tab-pane flex-fill w-100 fade ${d === (a == null ? void 0 : a.id) ? "show active" : ""}`, id: `tabpanel-${a == null ? void 0 : a.id}`, role: "tabpanel", "aria-labelledby": `tab-${a == null ? void 0 : a.id}`, tabIndex: 0, children: i }) });
+    activeTab
+  } = useTabsContext();
+  return /* @__PURE__ */ jsx("div", { className: "tab-content d-flex flex-fill w-100", children: /* @__PURE__ */ jsx("div", { className: `tab-pane flex-fill w-100 fade ${activeTab === (currentItem == null ? void 0 : currentItem.id) ? "show active" : ""}`, id: `tabpanel-${currentItem == null ? void 0 : currentItem.id}`, role: "tabpanel", "aria-labelledby": `tab-${currentItem == null ? void 0 : currentItem.id}`, tabIndex: 0, children }) });
 };
 export {
-  f as default
+  TabsPanel as default
 };
-//# sourceMappingURL=TabsPanel.js.map

package/dist/components/Tabs/index.d.ts

@@ -1,2 +1,3 @@
+export { default as Tabs } from './Tabs';
 export * from './Tabs';
 export { type TabsItemProps } from './TabsItem';

package/dist/components/TextArea/TextArea.d.ts

@@ -29,5 +29,5 @@ export interface TextAreaProps extends Omit<React.ComponentPropsWithRef<'textare
 /**
  * TextArea Form Component
  */
-export declare const TextArea: import('react').ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
+declare const TextArea: import('react').ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;

package/dist/components/TextArea/TextArea.js

@@ -1,36 +1,34 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import p from "clsx";
-import { useFormControl as u } from "../Form/FormContext.js";
-const q = /* @__PURE__ */ x(({
-  noValidationIcon: e,
-  placeholder: m,
-  size: t = "md",
-  height: r = "md",
-  className: i,
-  ...l
-}, s) => {
+import { jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { useFormControl } from "../Form/FormContext.js";
+const TextArea = /* @__PURE__ */ forwardRef(({
+  noValidationIcon,
+  placeholder,
+  size = "md",
+  height = "md",
+  className,
+  ...restProps
+}, ref) => {
   const {
-    id: n,
-    isRequired: d,
-    isReadOnly: o,
-    status: a
-  } = u(), c = p({
-    "form-control": !o,
-    "form-control-lg": t === "lg",
-    "form-control-sm": t === "sm",
-    "textarea-height-lg": r === "lg",
-    "textarea-height-md": r === "md",
-    "textarea-height-sm": r === "sm",
-    "is-invalid": a === "invalid",
-    "is-valid": a === "valid",
-    "form-control-plaintext": o,
-    "no-validation-icon": e
-  }, i);
-  return /* @__PURE__ */ f("textarea", { ref: s, id: n, className: c, placeholder: m, required: d, readOnly: o, ...l });
-});
+    id,
+    isRequired,
+    isReadOnly,
+    status
+  } = useFormControl(), classes = clsx({
+    "form-control": !isReadOnly,
+    "form-control-lg": size === "lg",
+    "form-control-sm": size === "sm",
+    "textarea-height-lg": height === "lg",
+    "textarea-height-md": height === "md",
+    "textarea-height-sm": height === "sm",
+    "is-invalid": status === "invalid",
+    "is-valid": status === "valid",
+    "form-control-plaintext": isReadOnly,
+    "no-validation-icon": noValidationIcon
+  }, className);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("textarea", { ref, id, className: classes, placeholder, required: isRequired, readOnly: isReadOnly, ...restProps }) });
+}), TextArea$1 = TextArea;
 export {
-  q as TextArea,
-  q as default
+  TextArea$1 as default
 };
-//# sourceMappingURL=TextArea.js.map

package/dist/components/TextArea/TextareaCounter.js

@@ -1,9 +1,8 @@
-import { jsx as t } from "react/jsx-runtime";
-const l = ({
-  content: e,
-  maxLength: r
-}) => /* @__PURE__ */ t("p", { className: "small text-gray-700 p-2 text-end", children: e ? `${e.length} / ${r}` : "" });
+import { jsx } from "react/jsx-runtime";
+const TextareaCounter = ({
+  content,
+  maxLength
+}) => /* @__PURE__ */ jsx("p", { className: "small text-gray-700 p-2 text-end", children: content ? `${content.length} / ${maxLength}` : "" });
 export {
-  l as TextareaCounter
+  TextareaCounter
 };
-//# sourceMappingURL=TextareaCounter.js.map

package/dist/components/TextArea/index.d.ts

@@ -1 +1,2 @@
+export { default as TextArea } from './TextArea';
 export * from './TextArea';

package/dist/components/Toolbar/Toolbar.d.ts

@@ -72,5 +72,5 @@ export interface ToolbarProps extends React.ComponentPropsWithRef<'div'> {
      */
     children?: ReactNode;
 }
-export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default Toolbar;