@lanaco/lnc-react-ui 3.11.35 → 4.0.2

package/dist/DropdownMenu.cjs

@@ -0,0 +1 @@
+"use strict";require("react/jsx-runtime");require("react");require("./index-DXnSjbfJ.cjs");require("./emotion-styled.browser.esm-Cbp_XsK4.cjs");require("./Button.cjs");require("./utils-hdRGTsQ7.cjs");require("./ThemeProvider.cjs");const e=require("./DropdownMenu-B6qr13ik.cjs");require("./motion-Oud-wpUz.cjs");module.exports=e.DropdownMenu;

package/dist/DropdownMenu.js

@@ -0,0 +1,12 @@
+import "react/jsx-runtime";
+import "react";
+import "./index-Ds9PUTwb.js";
+import "./emotion-styled.browser.esm-BZSYYThs.js";
+import "./Button.js";
+import "./utils-DEke8iwo.js";
+import "./ThemeProvider.js";
+import { D as l } from "./DropdownMenu-DZi3TJ8Q.js";
+import "./motion-CtkUpWEn.js";
+export {
+  l as default
+};

package/dist/EditableTable.cjs

@@ -0,0 +1,21 @@
+"use strict";const c=require("react/jsx-runtime"),i=require("react"),r=require("./index-DXnSjbfJ.cjs"),w=require("./utils-hdRGTsQ7.cjs"),H=require("./Table.cjs"),G=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),B=require("./TextInput.cjs"),W=require("./NumberInput.cjs"),J=require("./DecimalInput.cjs"),Q=require("./CheckBoxInput.cjs"),U=require("./Dropdown.cjs"),X=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),m={BOOLEAN:"BOOLEAN",STRING:"STRING",INTEGER:"INTEGER",DECIMAL:"DECIMAL",DATE:"DATE",SELECT:"SELECT"},Z=G.newStyled.td`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: ${o=>o.width};
+  padding: ${o=>o.focused&&!o.isBoolean?"0.5rem 0.5rem 0.5rem 0.7rem":"0.5rem 0.5rem 0.5rem 1.5rem"};
+  ${o=>o.bgColor}
+
+  ${o=>w.getComponentTypographyCss(o.theme,"TableCell",o.size,"enabled")};
+`,ee=G.newStyled.div`
+  ${o=>w.getComponentTypographyCss(o.theme,"TableSpecialLastRow",o.size,"enabled")};
+  padding: ${o=>o.hasRender?"0":"9.5px 6px 9.5px 0"};
+  cursor: ${o=>o.tabIndex!==-1?"pointer":"auto"};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:focus {
+    outline: none;
+  }
+`,N=o=>{const[d,R]=i.useState(!1);var l=i.useRef(),P=i.useRef(),A=i.useRef(!0);const{__TYPE__:L="TABLE_CELL",Column:e={},ColumnsToRender:p,RowData:s={},Index:g=0,RowIndex:f,EnableSelection:v=!1,TabIndexOffset:x=100,onFocusChanged:I,RowIdentifier:q,onDiscard:O,onMount:t,onChange:n,className:T="",size:C="small",color:b="primary"}=o,D=X.useTheme(),S={className:T,size:C,color:b,theme:D};i.useEffect(()=>{t(f,g,P)},[]),i.useEffect(()=>{d||t(f,g,P)},[d]),i.useEffect(()=>{d&&l&&l.current&&l.current.focus()},[d]);const M=()=>e&&e.width?e.width+"%":"auto",F=()=>{if(e.editable!==!0)return-1;var a=p.filter(y=>y.editable),E=a.find(y=>y.id===e.id);return x+f*a.length+a.indexOf(E)},j=(a,E)=>{I(a,E,f,g),E||R(E)},$=a=>{a.key==="Escape"&&(A.current=!1,l.current.blur(),A.current=!0,O(a,f,g,s))},z=()=>{var a=null,E=(u,K)=>{n(u,K,f,g,e,s)},y=u=>{n(_,u,f,g,e,s)},h={...S,debounceTime:0,...e.inputProps,value:e!=null&&e.objectAccessor?s[e.accessor][e==null?void 0:e.objectAccessor]:s[e.accessor],defaultChecked:e!=null&&e.objectAccessor?s[e.accessor][e==null?void 0:e.objectAccessor]:s[e.accessor],focused:d,onChange:E,onBlur:u=>j(u,!1),onFocus:u=>j(u,!0),onKeyDown:u=>$(u),tabIndex:F()};switch(e.inputType){case m.STRING:a=c.jsx(B,{...h,ref:l});break;case m.INTEGER:a=c.jsx(W,{...h,ref:l});break;case m.DECIMAL:a=c.jsx(J,{...h,ref:l});break;case m.DATE:a=c.jsx(B,{...h,ref:l});break;case m.BOOLEAN:a=c.jsx(Q,{...h,ref:l});break;case m.SELECT:a=c.jsx(U.default,{...h,value:e.inputProps.options.find(u=>u.value===(e==null?void 0:e.objectAccessor)?s[e.accessor][e==null?void 0:e.objectAccessor]:s[e.accessor]),onChange:y,ref:l});break;default:a=c.jsx(B,{...h,ref:l})}return a},V=a=>{A.current===!0?j(a,!1):R(!1)},Y=()=>{var a=z();if(e.editable===!0&&e.editComponent){var E={};e.inputType===m.SELECT&&(E={items:e.selectItems,mapNameTo:e.selectProps.mapNameTo,mapValueTo:e.selectProps.mapValueTo}),a=c.jsx(e.editComponent,{ref:l,tabIndex:F(),value:e!=null&&e.objectAccessor?s[e.accessor][e==null?void 0:e.objectAccessor]:s[e.accessor],onChange:(y,h,u)=>{n(y,h,f,g,e,s,u)},focused:d,onBlur:V,onFocus:y=>j(y,!0),onKeyDown:y=>$(y),...E})}if(e.editable===!0&&d)return a;if(!d||e.editable!==!0)return c.jsx(ee,{ref:P,tabIndex:F(),onFocus:()=>R(!0),hasRender:!!e.readonlyComponent,...S,children:e.readonlyComponent?c.jsx(e.readonlyComponent,{rowData:s,value:e!=null&&e.objectAccessor?s[e.accessor][e==null?void 0:e.objectAccessor]:s[e.accessor],fullValue:s[e.accessor],disabled:!0}):e!=null&&e.objectAccessor?s[e.accessor][e==null?void 0:e.objectAccessor]:s[e.accessor]})};return i.createElement(Z,{"data-rowindex":f,...S,selection:v,width:M(),key:g,focused:d,isBoolean:e.inputType===m.BOOLEAN},Y())};N.propTypes={__TYPE__:r.PropTypes.string,Column:r.PropTypes.object,RowData:r.PropTypes.object,Index:r.PropTypes.number,EnableSelection:r.PropTypes.bool,TabIndexOffset:r.PropTypes.number,className:r.PropTypes.string,size:r.PropTypes.oneOf(["small","medium","large"]),color:r.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"])};N.displayName="TABLE_CELL";const k=i.forwardRef((o,d)=>{var{__TYPE__:R="EDITABLE_TABLE",Data:l=[],onRowFocusChange:P=()=>{},onDiscard:A=()=>{},onInputChange:L=()=>{}}=o;const e=i.useRef({FocusedCell:null,PreviousFocusedCell:null}),p=i.useRef([]),s=i.useRef(null),g=i.useRef();i.useImperativeHandle(d,()=>({focusFirstCellOfLastRow:()=>{s.current&&s.current.focus()},focusLastActiveCell:()=>{try{var t=p.current.find(n=>n.row===e.current.PreviousFocusedCell.row&&n.cell===e.current.PreviousFocusedCell.cell);t.ref&&t.ref.focus()}catch{}}}),[o]);const f=(t,n,T,C,b,D)=>{L&&L(t,n,T,C,b,D)},v=(t,n,T,C,b)=>{n&&(e.current={...e.current,FocusedCell:{row:T,cell:C,ref:b}}),n||(e.current={PreviousFocusedCell:e.current.FocusedCell,FocusedCell:null},x(t,T))},x=(t,n)=>{(t.relatedTarget===null||t.relatedTarget.closest("tbody")===null||!t.relatedTarget.closest("tbody").hasAttribute("data-tbody"))&&P(t,n,-1),t.relatedTarget&&t.relatedTarget.closest("tbody")&&t.relatedTarget.closest("tbody").hasAttribute("data-tbody")&&parseInt(t.relatedTarget.closest("td").getAttribute("data-rowindex"))!==n&&P(t,n,parseInt(t.relatedTarget.closest("td").getAttribute("data-rowindex")))},I=(t,n,T)=>{if(t===l.length-1&&n===0&&(s.current=T.current),p.current.length===0&&(p.current=[{row:t,cell:n,ref:T.current}]),p.current.length>0&&p.current.find(b=>b.row===t&&b.cell===n)){var C=p.current.find(b=>b.row===t&&b.cell===n);C.ref=T.current}else p.current.length>0&&(p.current=[...p.current,{row:t,cell:n,ref:T.current}])},q=()=>w.renderCustomElement(w.getCustomRender("TABLE_SPECIAL_LAST_ROW",o.children),{TabIndexOffset:50})||c.jsx(c.Fragment,{}),O=()=>{var t={TabIndexOffset:50,onFocusChanged:v,onChange:f,onDiscard:A,onMount:I};return w.renderCustomElement(w.getCustomRender("TABLE_CELL",o.children),t)||c.jsx(N,{...t})};return c.jsx(c.Fragment,{children:c.jsxs(H.default,{ref:g,...o,Data:l,VisibilityPattern:null,children:[o.children,O(),q()]})})});k.propTypes={__TYPE__:r.PropTypes.string,EnableSelection:r.PropTypes.bool,EnableOrdering:r.PropTypes.bool,EnableLoader:r.PropTypes.bool,EnableSelectAll:r.PropTypes.bool,NoDataText:r.PropTypes.string,Loading:r.PropTypes.bool,Columns:r.PropTypes.arrayOf(r.PropTypes.object),Data:r.PropTypes.arrayOf(r.PropTypes.object),SelectedData:r.PropTypes.arrayOf(r.PropTypes.object),SelectedEntirePage:r.PropTypes.bool,RowIdentifier:r.PropTypes.string,VisibilityPattern:r.PropTypes.object,Ordering:r.PropTypes.object,onRowFocusChange:()=>{},onDiscard:()=>{},onInputChange:()=>{},onColumnClick:r.PropTypes.func,onRowClick:r.PropTypes.func,onSelectRow:r.PropTypes.func,onSelectAll:r.PropTypes.func,className:r.PropTypes.string,size:r.PropTypes.oneOf(["small","medium","large"]),color:r.PropTypes.oneOf(["primary","secondary","success","error","warning","gray","white","neutral"])};k.displayName="EDITABLE_TABLE";module.exports=k;

package/dist/EditableTable.js

@@ -0,0 +1,462 @@
+import { jsx as i, Fragment as G, jsxs as U } from "react/jsx-runtime";
+import { useState as X, useRef as w, useEffect as F, createElement as Z, forwardRef as ee, useImperativeHandle as re } from "react";
+import { P as r } from "./index-Ds9PUTwb.js";
+import { a as V, r as M, e as z } from "./utils-DEke8iwo.js";
+import te from "./Table.js";
+import { n as Y } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import N from "./TextInput.js";
+import oe from "./NumberInput.js";
+import ne from "./DecimalInput.js";
+import ae from "./CheckBoxInput.js";
+import se from "./Dropdown.js";
+import { u as ce } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const h = {
+  BOOLEAN: "BOOLEAN",
+  STRING: "STRING",
+  INTEGER: "INTEGER",
+  DECIMAL: "DECIMAL",
+  DATE: "DATE",
+  SELECT: "SELECT"
+}, le = Y.td`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: ${(o) => o.width};
+  padding: ${(o) => o.focused && !o.isBoolean ? "0.5rem 0.5rem 0.5rem 0.7rem" : "0.5rem 0.5rem 0.5rem 1.5rem"};
+  ${(o) => o.bgColor}
+
+  ${(o) => V(o.theme, "TableCell", o.size, "enabled")};
+`, ie = Y.div`
+  ${(o) => V(
+  o.theme,
+  "TableSpecialLastRow",
+  o.size,
+  "enabled"
+)};
+  padding: ${(o) => o.hasRender ? "0" : "9.5px 6px 9.5px 0"};
+  cursor: ${(o) => o.tabIndex !== -1 ? "pointer" : "auto"};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:focus {
+    outline: none;
+  }
+`, x = (o) => {
+  const [u, L] = X(!1);
+  var c = w(), y = w(), A = w(!0);
+  const {
+    __TYPE__: I = "TABLE_CELL",
+    Column: e = {},
+    ColumnsToRender: d,
+    RowData: n = {},
+    Index: T = 0,
+    RowIndex: f,
+    EnableSelection: O = !1,
+    TabIndexOffset: D = 100,
+    onFocusChanged: R,
+    RowIdentifier: k,
+    onDiscard: S,
+    onMount: t,
+    //----------------
+    onChange: a,
+    //----------------
+    className: b = "",
+    size: C = "small",
+    color: p = "primary"
+  } = o, j = ce(), P = {
+    className: b,
+    size: C,
+    color: p,
+    theme: j
+  };
+  F(() => {
+    t(f, T, y);
+  }, []), F(() => {
+    u || t(f, T, y);
+  }, [u]), F(() => {
+    u && c && c.current && c.current.focus();
+  }, [u]);
+  const H = () => e && e.width ? e.width + "%" : "auto", B = () => {
+    if (e.editable !== !0) return -1;
+    var s = d.filter((m) => m.editable), g = s.find((m) => m.id === e.id);
+    return D + f * s.length + s.indexOf(g);
+  }, v = (s, g) => {
+    R(s, g, f, T), g || L(g);
+  }, $ = (s) => {
+    s.key === "Escape" && (A.current = !1, c.current.blur(), A.current = !0, S(s, f, T, n));
+  }, W = () => {
+    var s = null, g = (l, Q) => {
+      a(l, Q, f, T, e, n);
+    }, m = (l) => {
+      a(_, l, f, T, e, n);
+    }, E = {
+      ...P,
+      debounceTime: 0,
+      ...e.inputProps,
+      value: e != null && e.objectAccessor ? n[e.accessor][e == null ? void 0 : e.objectAccessor] : n[e.accessor],
+      defaultChecked: e != null && e.objectAccessor ? n[e.accessor][e == null ? void 0 : e.objectAccessor] : n[e.accessor],
+      focused: u,
+      onChange: g,
+      onBlur: (l) => v(l, !1),
+      onFocus: (l) => v(l, !0),
+      onKeyDown: (l) => $(l),
+      tabIndex: B()
+    };
+    switch (e.inputType) {
+      case h.STRING:
+        s = /* @__PURE__ */ i(N, { ...E, ref: c });
+        break;
+      case h.INTEGER:
+        s = /* @__PURE__ */ i(oe, { ...E, ref: c });
+        break;
+      case h.DECIMAL:
+        s = /* @__PURE__ */ i(ne, { ...E, ref: c });
+        break;
+      case h.DATE:
+        s = /* @__PURE__ */ i(N, { ...E, ref: c });
+        break;
+      case h.BOOLEAN:
+        s = /* @__PURE__ */ i(ae, { ...E, ref: c });
+        break;
+      case h.SELECT:
+        s = /* @__PURE__ */ i(
+          se,
+          {
+            ...E,
+            value: e.inputProps.options.find(
+              (l) => l.value === (e == null ? void 0 : e.objectAccessor) ? n[e.accessor][e == null ? void 0 : e.objectAccessor] : n[e.accessor]
+            ),
+            onChange: m,
+            ref: c
+          }
+        );
+        break;
+      default:
+        s = /* @__PURE__ */ i(N, { ...E, ref: c });
+    }
+    return s;
+  }, q = (s) => {
+    A.current === !0 ? v(s, !1) : L(!1);
+  }, J = () => {
+    var s = W();
+    if (e.editable === !0 && e.editComponent) {
+      var g = {};
+      e.inputType === h.SELECT && (g = {
+        items: e.selectItems,
+        mapNameTo: e.selectProps.mapNameTo,
+        mapValueTo: e.selectProps.mapValueTo
+      }), s = /* @__PURE__ */ i(
+        e.editComponent,
+        {
+          ref: c,
+          tabIndex: B(),
+          value: e != null && e.objectAccessor ? n[e.accessor][e == null ? void 0 : e.objectAccessor] : n[e.accessor],
+          onChange: (m, E, l) => {
+            a(m, E, f, T, e, n, l);
+          },
+          focused: u,
+          onBlur: q,
+          onFocus: (m) => v(m, !0),
+          onKeyDown: (m) => $(m),
+          ...g
+        }
+      );
+    }
+    if (e.editable === !0 && u) return s;
+    if (!u || e.editable !== !0)
+      return /* @__PURE__ */ i(
+        ie,
+        {
+          ref: y,
+          tabIndex: B(),
+          onFocus: () => L(!0),
+          hasRender: !!e.readonlyComponent,
+          ...P,
+          children: e.readonlyComponent ? /* @__PURE__ */ i(
+            e.readonlyComponent,
+            {
+              rowData: n,
+              value: e != null && e.objectAccessor ? n[e.accessor][e == null ? void 0 : e.objectAccessor] : n[e.accessor],
+              fullValue: n[e.accessor],
+              disabled: !0
+            }
+          ) : e != null && e.objectAccessor ? n[e.accessor][e == null ? void 0 : e.objectAccessor] : n[e.accessor]
+        }
+      );
+  };
+  return /* @__PURE__ */ Z(
+    le,
+    {
+      "data-rowindex": f,
+      ...P,
+      selection: O,
+      width: H(),
+      key: T,
+      focused: u,
+      isBoolean: e.inputType === h.BOOLEAN
+    },
+    J()
+  );
+};
+x.propTypes = {
+  __TYPE__: r.string,
+  //----------------------------------------
+  Column: r.object,
+  RowData: r.object,
+  Index: r.number,
+  EnableSelection: r.bool,
+  TabIndexOffset: r.number,
+  //----------------------------------------
+  className: r.string,
+  size: r.oneOf(["small", "medium", "large"]),
+  color: r.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+x.displayName = "TABLE_CELL";
+const K = ee((o, u) => {
+  var {
+    __TYPE__: L = "EDITABLE_TABLE",
+    Data: c = [],
+    onRowFocusChange: y = () => {
+    },
+    onDiscard: A = () => {
+    },
+    onInputChange: I = () => {
+    }
+  } = o;
+  const e = w({
+    FocusedCell: null,
+    PreviousFocusedCell: null
+  }), d = w([]), n = w(null), T = w();
+  re(
+    u,
+    () => ({
+      focusFirstCellOfLastRow: () => {
+        n.current && n.current.focus();
+      },
+      focusLastActiveCell: () => {
+        try {
+          var t = d.current.find(
+            (a) => a.row === e.current.PreviousFocusedCell.row && a.cell === e.current.PreviousFocusedCell.cell
+          );
+          t.ref && t.ref.focus();
+        } catch {
+        }
+      }
+    }),
+    [
+      o
+      // Update functions when certain state changes
+    ]
+  );
+  const f = (t, a, b, C, p, j) => {
+    I && I(t, a, b, C, p, j);
+  }, O = (t, a, b, C, p) => {
+    a && (e.current = {
+      ...e.current,
+      FocusedCell: {
+        row: b,
+        cell: C,
+        ref: p
+      }
+    }), a || (e.current = {
+      PreviousFocusedCell: e.current.FocusedCell,
+      FocusedCell: null
+    }, D(t, b));
+  }, D = (t, a) => {
+    (t.relatedTarget === null || t.relatedTarget.closest("tbody") === null || !t.relatedTarget.closest("tbody").hasAttribute("data-tbody")) && y(t, a, -1), t.relatedTarget && t.relatedTarget.closest("tbody") && t.relatedTarget.closest("tbody").hasAttribute("data-tbody") && parseInt(t.relatedTarget.closest("td").getAttribute("data-rowindex")) !== a && y(
+      t,
+      a,
+      parseInt(t.relatedTarget.closest("td").getAttribute("data-rowindex"))
+    );
+  }, R = (t, a, b) => {
+    if (t === c.length - 1 && a === 0 && (n.current = b.current), d.current.length === 0 && (d.current = [
+      { row: t, cell: a, ref: b.current }
+    ]), d.current.length > 0 && d.current.find(
+      (p) => p.row === t && p.cell === a
+    )) {
+      var C = d.current.find(
+        (p) => p.row === t && p.cell === a
+      );
+      C.ref = b.current;
+    } else d.current.length > 0 && (d.current = [
+      ...d.current,
+      { row: t, cell: a, ref: b.current }
+    ]);
+  }, k = () => M(
+    z("TABLE_SPECIAL_LAST_ROW", o.children),
+    {
+      TabIndexOffset: 50
+    }
+  ) || /* @__PURE__ */ i(G, {}), S = () => {
+    var t = {
+      TabIndexOffset: 50,
+      onFocusChanged: O,
+      onChange: f,
+      onDiscard: A,
+      onMount: R
+    };
+    return M(
+      z("TABLE_CELL", o.children),
+      t
+    ) || /* @__PURE__ */ i(x, { ...t });
+  };
+  return /* @__PURE__ */ i(G, { children: /* @__PURE__ */ U(te, { ref: T, ...o, Data: c, VisibilityPattern: null, children: [
+    o.children,
+    S(),
+    k()
+  ] }) });
+});
+K.propTypes = {
+  /**
+   * This property determines where the component is rendered.
+   * Should not be overridden!
+   */
+  __TYPE__: r.string,
+  //----------------------------------------
+  /**
+   * Show a selection checkbox in the first cell of every row.
+   * Value of the checkbox is determined by the `SelectedData` property.
+   */
+  EnableSelection: r.bool,
+  /**
+   * Show ordering arrows in header cells.
+   */
+  EnableOrdering: r.bool,
+  /**
+   * Show a spinner with backdrop on top of the table when `Loading` is set to `true`.
+   */
+  EnableLoader: r.bool,
+  /**
+   * Show a selection checkbox in the first cell of the table header.
+   * Value of the checkbox is determined by the `SelectedEntirePage` property.
+   */
+  EnableSelectAll: r.bool,
+  //----------------------------------------
+  /**
+   * Specify the text that is shown when there are 0 rows in the `Data`.
+   */
+  NoDataText: r.string,
+  /**
+   *  Disables some events and actions when set to `true`. Also triggers the spinner if `EnableLoader` is set to `true`.
+   */
+  Loading: r.bool,
+  /**
+   * Defines the table columns.
+   * @param id - Column identifier
+   * @param displayName - Text displayed in the header
+   * @param accessor - Access the property in `Data`
+   * @param width - Default column width (overridden by the VisibilityPattern)
+   * @param sortable - Can be sorted
+   *
+   */
+  Columns: r.arrayOf(r.object),
+  /**
+   * Defines the data displayed in each row.
+   */
+  Data: r.arrayOf(r.object),
+  /**
+   * Define the selected data.
+   * @param id - Column identifier (mandatory field)
+   */
+  SelectedData: r.arrayOf(r.object),
+  /**
+   *  Value of the `SelectAll` checkbox.
+   */
+  SelectedEntirePage: r.bool,
+  /**
+   *  Defines which field in a data object is the row identifier.
+   */
+  RowIdentifier: r.string,
+  /**
+   * An object that defines the width and order of columns for different screen sizes.
+   * (`XS`,`S`,`M`,`L`,`XL`)
+   */
+  VisibilityPattern: r.object,
+  /**
+   * Describe how the data is ordered.
+   * @param columnId - Column identifier, maps to the id on the Column object
+   */
+  Ordering: r.object,
+  //----------------------------------------
+  /**
+   *  Triggers when the focus is moved to another row or another component outside of the table
+   * @param event - event object
+   * @param currentRowIndex - index of the currently focused row
+   * @param nextRowIndex - index of the next focused row (-1 if the focuse moves otutside of the table rows)
+   */
+  onRowFocusChange: () => {
+  },
+  /**
+   *
+   */
+  onDiscard: () => {
+  },
+  /**
+   *
+   */
+  onInputChange: () => {
+  },
+  //----------------------------------------
+  /**
+   * Triggered on header cell click.
+   * @param event - event object
+   * @param column - column definition
+   * @param ordering - updated ordering object, or undefined if ordering is not enabled or the column is not sortable
+   */
+  onColumnClick: r.func,
+  /**
+   * Triggered on table row click.
+   * @param event - event object
+   * @param rowData - row data
+   */
+  onRowClick: r.func,
+  /**
+   * Triggered on selection checkbox click.
+   * @param event - event object
+   * @param rowData - row data
+   * @param isSelected - the value of selection checkbox
+   */
+  onSelectRow: r.func,
+  /**
+   * Triggered on select all checkbox click.
+   * @param event - event object
+   * @param isSelected - the value of select all checkbox
+   */
+  onSelectAll: r.func,
+  //----------------------------------------
+  /**
+   * `className` applied to the component container.
+   */
+  className: r.string,
+  /**
+   * Defines size of the component (padding, margin, font etc.).
+   */
+  size: r.oneOf(["small", "medium", "large"]),
+  /**
+   *  Defines the palette color for the component.
+   */
+  color: r.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "error",
+    "warning",
+    "gray",
+    "white",
+    "neutral"
+  ])
+};
+K.displayName = "EDITABLE_TABLE";
+export {
+  K as default
+};

package/dist/FileInput.cjs

@@ -0,0 +1,47 @@
+"use strict";const c=require("react/jsx-runtime"),g=require("react"),b=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),t=require("./index-DXnSjbfJ.cjs"),r=require("./utils-hdRGTsQ7.cjs"),j=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),k=b.newStyled.label`
+  display: inline-flex;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: ${e=>r.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>r.getSizeValueWithUnits(e.theme,e.size)};
+  background-color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
+  border-radius: 8px;
+  ${e=>e.focused===!0&&e.readOnly!==!0?r.getOutlineCss(e.theme):""}
+`,q=b.newStyled.input`
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+`,v=b.newStyled.div`
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  padding: 0.625rem 0.75rem;
+  ${e=>r.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
+  color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
+  cursor: ${e=>e.disabled===!0?"default":"pointer"};
+  background-color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
+  border: 1px solid
+    ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,e.disabled===!0?"disabled":"enabled","border")};
+  border-radius: 8px 0 0 8px;
+
+  ${e=>e.disabled===!0?r.getDisabledStateCss(e.theme):""}
+`,N=b.newStyled.input`
+  width: 100%;
+  appearance: none;
+  outline: none;
+  padding: 0.625rem 0.75rem;
+  ${e=>r.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
+  border: 1px solid
+    ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,e.disabled===!0?"disabled":"enabled","border")};
+  border-radius: 0 8px 8px 0;
+  border-left: transparent;
+  color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","text")};
+
+  background-color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
+  color: ${e=>r.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","text")};
+
+  ${e=>e.disabled===!0?r.getDisabledStateCss(e.theme):""}
+`,h=g.forwardRef((e,f)=>{const{className:x="",style:T={},onChange:s,onFocus:i,onBlur:d,disabled:l,readOnly:m,multiple:C=!1,accept:$="",label:P="Choose File",color:I="primary",size:w="small",...R}=e,z=j.useTheme(),[a,S]=g.useState([]),[p,y]=g.useState(!1);var u={theme:z,size:w,color:I,disabled:l,focused:p};const V=()=>{if(a.length>0){var o="";for(const n in a)o+=n==a.length-1?`${a[n].name}`:`${a[n].name}, `;return o}return""},O=o=>{var n=[];if(o.target.files&&o.target.files.length>0)for(const F of o.target.files)n.push(F);else n=[];S(n),s&&(s==null||s(o,n))};return c.jsxs(k,{...u,className:x,style:T,focused:p,readOnly:m,children:[c.jsx(q,{...u,accept:$,multiple:C,ref:f,onChange:l||m?()=>{}:O,type:"file",onFocus:o=>{l||y(!0),i&&!l&&(i==null||i(o))},onBlur:o=>{l||y(!1),d&&!l&&(d==null||d(o))},...R}),c.jsx(v,{...u,children:P}),c.jsx(N,{tabIndex:-1,...u,onChange:()=>{},value:V()})]})});h.propTypes={id:t.PropTypes.any,disabled:t.PropTypes.bool,readOnly:t.PropTypes.bool,multiple:t.PropTypes.bool,accept:t.PropTypes.string,label:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),tabIndex:t.PropTypes.number,onChange:t.PropTypes.func,onFocus:t.PropTypes.func,onBlur:t.PropTypes.func,className:t.PropTypes.string,style:t.PropTypes.object,size:t.PropTypes.oneOf(["small","medium","large"]),color:t.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=h;