@darajs/core 1.0.0-a.2 → 1.0.0

package/README.md

@@ -1,7 +1,83 @@
-***************************
-DARA-CORE
-***************************
-
-[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://www.apache.org/licenses/LICENSE-2.0)
-
-![image](https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg)
+# Dara Application Framework
+
+<picture>
+    <source srcset="https://github.com/causalens/dara/blob/master/img/dara_dark.svg?raw=true" media="(prefers-color-scheme: dark)">
+    <img src="https://github.com/causalens/dara/blob/master/img/dara_light.svg?raw=true" alt="Dara Logo">
+</picture>
+
+![Master tests](https://github.com/causalens/dara/actions/workflows/tests.yml/badge.svg?branch=master)
+[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://www.apache.org/licenses/LICENSE-2.0)
+[![PyPI](https://img.shields.io/pypi/v/dara-core.svg?color=dark-green)](https://pypi.org/project/dara-core/)
+[![PyPI - Python Version](https://img.shields.io/pypi/pyversions/dara-core.svg?color=dark-green)](https://pypi.org/project/dara-core/)
+[![NPM](https://img.shields.io/npm/v/@darajs/components.svg?color=dark-green)](https://www.npmjs.com/package/@darajs/components)
+
+### Build decision apps in Python
+
+_Tap into the power of causality by transforming data into interactive graphs and applications_
+
+Dara is a dynamic application framework designed for creating interactive web apps with ease, all in pure Python. Over the past two years, Dara has fueled the development of hundreds of apps, now widely used and appreciated by both our customers and our in-house teams!
+
+## Quickstart
+
+To get started with Dara, you can use the `create-dara-app` CLI tool to create a new app.
+
+```bash
+pip install create-dara-app
+```
+
+You can also use [`pipx`](https://pypa.github.io/pipx/) to install the CLI tool in an isolated environment.
+
+Then simply run the following command to create a new app.
+
+```bash
+create-dara-app
+```
+
+By default the CLI will attempt to scaffold your project with [`poetry`](https://python-poetry.org/) but will fall back to `pip` if `poetry` is not present. This can be overriden with `--packaging pip` or `--packaging poetry` flag.
+
+After the project is created, you can run it with:
+
+```bash
+cd my-dara-app
+# with poetry installation
+poetry run dara start
+# with pip installation
+dara start
+```
+
+![Dara App](https://github.com/causalens/dara/blob/master/img/components_gallery.png?raw=true)
+
+Note: `pip` installation uses [PEP 660](https://peps.python.org/pep-0660/) `pyproject.toml`-based editable installs which require `pip >= 21.3` and `setuptools >= 64.0.0`. You can upgrade both with:
+
+```bash
+python -m pip install --upgrade pip
+pip install --user --upgrade setuptools
+```
+
+For more details check out our [Documentation](https://dara.causalens.com/docs/category/build-dara-apps).
+
+## Dara App examples
+
+Explore some of our favorite apps - a great way of getting started and getting to know the framework!
+
+| Dara App                                                                                                 | Description                                                                                                                                                                                                       |
+| -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ![Large Language Model](https://github.com/causalens/dara/blob/master/img/llm.png?raw=true)              | Demonstrates how to use incorporate a LLM chat box into your decision app to understand model insights                                                                                                            |
+| ![Plot Interactivity](https://github.com/causalens/dara/blob/master/img/plot_interactivity.png?raw=true) | Demonstrates how to enable the user to interact with plots, trigger actions based on clicks, mouse movements and other interactions with `Bokeh` or `Plotly` plots                                                |
+| ![Graph Editor](https://github.com/causalens/dara/blob/master/img/graph_viewer.png?raw=true)             | Demonstrates how to use the `CausalGraphViewer` component to display your graphs or networks, customising the displayed information through colors and tooltips, and updating the page based on user interaction. |
+
+Check out our [App Gallery](https://dara.causalens.com/gallery) for more inspiration!
+
+## Repository introduction
+
+This repository covers the Dara Application Framework first-party packages.
+
+-   `dara-core`: The core of the Dara framework, this includes the core framework code for creating applications.
+-   `dara-components`: Components for the Dara Framework.
+-   `create-dara-app`: A CLI tool for creating new Dara applications.
+
+More information on the repository structure can be found in the [CONTRIBUTING.md](https://github.com/causalens/dara/blob/master/CONTRIBUTING.md) file.
+
+## License
+
+Dara is open-source and licensed under the [Apache 2.0 License](https://github.com/causalens/dara/blob/master/LICENSE).

package/dist/umd/dara.core.umd.js

@@ -17074,10 +17074,10 @@ var __publicField = (obj, key, value) => {
   }
   var _baseIsEqual = baseIsEqual$3;
   var baseIsEqual$2 = _baseIsEqual;
-  function isEqual$3(value, other) {
+  function isEqual$4(value, other) {
     return baseIsEqual$2(value, other);
   }
-  var isEqual_1 = isEqual$3;
+  var isEqual_1 = isEqual$4;
   function useDeepCompare(value) {
     const ref = React$2.useRef();
     if (!isEqual_1(value, ref.current)) {
@@ -17974,7 +17974,7 @@ var __publicField = (obj, key, value) => {
     var _a;
     return jsxRuntime.exports.jsxs(Wrapper$8, { className: props.className, style: props.style, children: [jsxRuntime.exports.jsxs(Loader, { color: props.color, size: props.size, children: [jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" }), jsxRuntime.exports.jsx("div", { className: "sk-chase-dot" })] }), (props.showText || props.text) && jsxRuntime.exports.jsx(LoadingText, { color: props.color, children: (_a = props.text) !== null && _a !== void 0 ? _a : "LOADING" })] });
   }
-  var __rest$4 = globalThis && globalThis.__rest || function(s, e3) {
+  var __rest$5 = globalThis && globalThis.__rest || function(s, e3) {
     var t2 = {};
     for (var p2 in s)
       if (Object.prototype.hasOwnProperty.call(s, p2) && e3.indexOf(p2) < 0)
@@ -18082,7 +18082,7 @@ var __publicField = (obj, key, value) => {
     secondary: SecondaryButton
   };
   function Button(_a, ref) {
-    var { autoFocus, children, className, disabled: disabled2, download, href, loading, id, onClick, outline = false, style, styling = "primary", type = "button" } = _a, props = __rest$4(_a, ["autoFocus", "children", "className", "disabled", "download", "href", "loading", "id", "onClick", "outline", "style", "styling", "type"]);
+    var { autoFocus, children, className, disabled: disabled2, download, href, loading, id, onClick, outline = false, style, styling = "primary", type = "button" } = _a, props = __rest$5(_a, ["autoFocus", "children", "className", "disabled", "download", "href", "loading", "id", "onClick", "outline", "style", "styling", "type"]);
     const currentTheme = useClTheme();
     const Component = stylingMap[styling];
     const content = loading ? jsxRuntime.exports.jsx(StyledLoading, { color: outline ? currentTheme.colors.grey2 : currentTheme.colors.blue1 }) : children;
@@ -18482,7 +18482,7 @@ var __publicField = (obj, key, value) => {
       return jsxRuntime.exports.jsx(CheckboxWrapper, { "aria-disabled": props.disabled, children: jsxRuntime.exports.jsx(Checkbox, { disabled: isSelectPermitted ? props.disabled : ((_a = checkedState.find((option) => option.value === item.value)) === null || _a === void 0 ? void 0 : _a.state) === false, id: index2, isListStyle: props.isListStyle, label: item.label ? item.label : item.value, onChange: (checked, e3) => onChangeValue(e3), selected: (_b = checkedState.find((option) => option.value === item.value)) === null || _b === void 0 ? void 0 : _b.state }) }, `item-${index2}`);
     })] });
   }
-  var __rest$3 = globalThis && globalThis.__rest || function(s, e3) {
+  var __rest$4 = globalThis && globalThis.__rest || function(s, e3) {
     var t2 = {};
     for (var p2 in s)
       if (Object.prototype.hasOwnProperty.call(s, p2) && e3.indexOf(p2) < 0)
@@ -18541,7 +18541,7 @@ var __publicField = (obj, key, value) => {
     color: ${(props) => props.theme.colors.error};
 `;
   const Input$1 = React$2.forwardRef((_a, ref) => {
-    var { type = "text" } = _a, props = __rest$3(_a, ["type"]);
+    var { type = "text" } = _a, props = __rest$4(_a, ["type"]);
     const onChange2 = (e3) => {
       const target = e3.target;
       if (props.onChange) {
@@ -27593,7 +27593,7 @@ var __publicField = (obj, key, value) => {
     var dateToCompare = toDate$1(dirtyDateToCompare);
     return date2.getTime() < dateToCompare.getTime();
   }
-  function isEqual$2(dirtyLeftDate, dirtyRightDate) {
+  function isEqual$3(dirtyLeftDate, dirtyRightDate) {
     requiredArgs$1(2, arguments);
     var dateLeft = toDate$1(dirtyLeftDate);
     var dateRight = toDate$1(dirtyRightDate);
@@ -36565,7 +36565,7 @@ var __publicField = (obj, key, value) => {
     date2.setHours(23, 59, 59, 999);
     return date2;
   }
-  function isEqual$1(dirtyLeftDate, dirtyRightDate) {
+  function isEqual$2(dirtyLeftDate, dirtyRightDate) {
     requiredArgs(2, arguments);
     var dateLeft = toDate(dirtyLeftDate);
     var dateRight = toDate(dirtyRightDate);
@@ -39765,7 +39765,7 @@ var __publicField = (obj, key, value) => {
     return e3 && t2 ? isSameDay(e3, t2) : !e3 && !t2;
   }
   function je(e3, t2) {
-    return e3 && t2 ? isEqual$1(e3, t2) : !e3 && !t2;
+    return e3 && t2 ? isEqual$2(e3, t2) : !e3 && !t2;
   }
   function He(e3, t2, r2) {
     var n2, o2 = startOfDay(t2), a2 = endOfDay(r2);
@@ -41067,7 +41067,7 @@ var __publicField = (obj, key, value) => {
     } }]), a2;
   }(), jt = "input", Ht = "navigate";
   const reactDatepicker = "";
-  var __rest$2 = globalThis && globalThis.__rest || function(s, e3) {
+  var __rest$3 = globalThis && globalThis.__rest || function(s, e3) {
     var t2 = {};
     for (var p2 in s)
       if (Object.prototype.hasOwnProperty.call(s, p2) && e3.indexOf(p2) < 0)
@@ -41254,7 +41254,7 @@ var __publicField = (obj, key, value) => {
       (_a2 = props.dropdownRef) === null || _a2 === void 0 ? void 0 : _a2.call(props, value);
     };
     return jsxRuntime.exports.jsx(Tooltip, { content: props.errorMsg, disabled: !props.errorMsg, styling: "error", children: jsxRuntime.exports.jsxs(Wrapper$5, { className: props.className, isDisabled: props.disabled, isErrored: !!props.errorMsg, onClick: props.onClick, style: props.style, children: [jsxRuntime.exports.jsxs(SelectButtonPrimary, Object.assign({ disabled: props.disabled }, buttonProps, { ref: setButtonReference, type: "button", children: [jsxRuntime.exports.jsx(SelectedItem$1, { size: props.size, children: selectedItem ? selectedItem.label : "Select" }), jsxRuntime.exports.jsx(Chevron$2, { disabled: props.disabled, isOpen })] })), ReactDOM__default.default.createPortal(jsxRuntime.exports.jsx(DropdownList$1, Object.assign({}, menuProps, attributes.popper, { className: `${(_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.className) !== null && _a !== void 0 ? _a : ""} ${(_c = (_b = attributes === null || attributes === void 0 ? void 0 : attributes.popper) === null || _b === void 0 ? void 0 : _b.className) !== null && _c !== void 0 ? _c : ""} ${props.itemClass}`, displacement: props.displacement, isOpen, maxItems: 7, ref: setMenuReference, style: Object.assign(Object.assign({}, styles2.popper), { marginTop: `0.8rem`, width: "16.25rem", zIndex: 9999 }), children: props.items.map((item, index2) => {
-      const _a2 = getItemProps({ index: index2, item }), { itemClassName } = _a2, itemProps = __rest$2(_a2, ["itemClassName"]);
+      const _a2 = getItemProps({ index: index2, item }), { itemClassName } = _a2, itemProps = __rest$3(_a2, ["itemClassName"]);
       return React$2.createElement(DatepickerListItem, Object.assign({}, itemProps, { "aria-selected": selectedItem.label === item.label, className: `${itemClassName} ${props.itemClass}`, hovered: index2 === highlightedIndex, isSelected: selectedItem.label === item.label, key: `item-${index2}`, size: props.size, title: item.label }), item.label);
     }) })), document.body)] }) });
   }
@@ -43006,7 +43006,7 @@ var __publicField = (obj, key, value) => {
 
     background-color: transparent !important;
 `;
-  var __rest$1 = globalThis && globalThis.__rest || function(s, e3) {
+  var __rest$2 = globalThis && globalThis.__rest || function(s, e3) {
     var t2 = {};
     for (var p2 in s)
       if (Object.prototype.hasOwnProperty.call(s, p2) && e3.indexOf(p2) < 0)
@@ -43140,7 +43140,7 @@ var __publicField = (obj, key, value) => {
       (_a2 = props.dropdownRef) === null || _a2 === void 0 ? void 0 : _a2.call(props, value);
     };
     return jsxRuntime.exports.jsx(Tooltip, { content: props.errorMsg, disabled: !props.errorMsg, styling: "error", children: jsxRuntime.exports.jsxs(Wrapper$4, { className: props.className, isDisabled: props.disabled, isErrored: !!props.errorMsg, isOpen, onClick: props.onClick, style: props.style, children: [jsxRuntime.exports.jsxs(SelectButton, Object.assign({ disabled: props.disabled, isOpen }, buttonProps, { ref: setButtonReference, type: "button", children: [jsxRuntime.exports.jsx(SelectedItem, { size: props.size, children: (_b = (_a = selectedItem === null ? props.placeholder : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) !== null && _a !== void 0 ? _a : props.placeholder) !== null && _b !== void 0 ? _b : "Select" }), jsxRuntime.exports.jsx(Chevron$2, { disabled: props.disabled, isOpen })] })), ReactDOM__default.default.createPortal(jsxRuntime.exports.jsx(DropdownList, Object.assign({}, menuProps, attributes.popper, { className: `${(_c = menuProps === null || menuProps === void 0 ? void 0 : menuProps.className) !== null && _c !== void 0 ? _c : ""} ${(_e2 = (_d = attributes === null || attributes === void 0 ? void 0 : attributes.popper) === null || _d === void 0 ? void 0 : _d.className) !== null && _e2 !== void 0 ? _e2 : ""} ${props.itemClass}`, isOpen, maxItems: props.maxItems, ref: setMenuReference, style: Object.assign(Object.assign({}, styles2.popper), { width: props.applySameWidthModifier === false ? void 0 : parseFloat((_f = styles2.popper) === null || _f === void 0 ? void 0 : _f.width) + 2, zIndex: 9999 }), children: props.items.map((item, index2) => {
-      const _a2 = getItemProps({ index: index2, item }), { itemClassName } = _a2, itemProps = __rest$1(_a2, ["itemClassName"]);
+      const _a2 = getItemProps({ index: index2, item }), { itemClassName } = _a2, itemProps = __rest$2(_a2, ["itemClassName"]);
       return React$2.createElement(ListItem, Object.assign({}, itemProps, { className: `${itemClassName} ${props.itemClass}`, hovered: index2 === highlightedIndex, key: `item-${index2}`, size: props.size, title: item.label }), item.label);
     }) })), document.body)] }) });
   }
@@ -45435,6 +45435,55 @@ var __publicField = (obj, key, value) => {
     swapOpacity: false
   };
   var convertCurry = convert.bind(null, React__default.default.createElement);
+  var safeIsNaN$1 = Number.isNaN || function ponyfill(value) {
+    return typeof value === "number" && value !== value;
+  };
+  function isEqual$1(first, second) {
+    if (first === second) {
+      return true;
+    }
+    if (safeIsNaN$1(first) && safeIsNaN$1(second)) {
+      return true;
+    }
+    return false;
+  }
+  function areInputsEqual$1(newInputs, lastInputs) {
+    if (newInputs.length !== lastInputs.length) {
+      return false;
+    }
+    for (var i2 = 0; i2 < newInputs.length; i2++) {
+      if (!isEqual$1(newInputs[i2], lastInputs[i2])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  function memoizeOne$1(resultFn, isEqual2) {
+    if (isEqual2 === void 0) {
+      isEqual2 = areInputsEqual$1;
+    }
+    var cache2 = null;
+    function memoized() {
+      var newArgs = [];
+      for (var _i = 0; _i < arguments.length; _i++) {
+        newArgs[_i] = arguments[_i];
+      }
+      if (cache2 && cache2.lastThis === this && isEqual2(newArgs, cache2.lastArgs)) {
+        return cache2.lastResult;
+      }
+      var lastResult = resultFn.apply(this, newArgs);
+      cache2 = {
+        lastResult,
+        lastArgs: newArgs,
+        lastThis: this
+      };
+      return lastResult;
+    }
+    memoized.clear = function clear() {
+      cache2 = null;
+    };
+    return memoized;
+  }
   var reactTable = { exports: {} };
   var reactTable_production_min = { exports: {} };
   (function(module2, exports2) {
@@ -48080,6 +48129,24 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       _ref7.itemSize;
     }
   });
+  function shallowDiffers(prev, next) {
+    for (var attribute in prev) {
+      if (!(attribute in next)) {
+        return true;
+      }
+    }
+    for (var _attribute in next) {
+      if (prev[_attribute] !== next[_attribute]) {
+        return true;
+      }
+    }
+    return false;
+  }
+  function areEqual(prevProps, nextProps) {
+    var prevStyle = prevProps.style, prevRest = _objectWithoutPropertiesLoose$6(prevProps, ["style"]);
+    var nextStyle = nextProps.style, nextRest = _objectWithoutPropertiesLoose$6(nextProps, ["style"]);
+    return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);
+  }
   const GlobalStyle = styled.createGlobalStyle`
     body {
         .DatetimeFilterSelect {
@@ -48451,7 +48518,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     }
     switch (operator) {
       case DateOperator.EQ:
-        return isEqual$2(parsedValue, filterValue);
+        return isEqual$3(parsedValue, filterValue);
       case DateOperator.GT:
         return isAfter$1(parsedValue, filterValue);
       case DateOperator.LT:
@@ -48664,7 +48731,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     }, [allColumns, allowColumnHiding]);
     return jsxRuntime.exports.jsxs(HeaderOptions, { ref: setOptionsElement, children: [jsxRuntime.exports.jsx(HeaderOptionsIcon, { icon: faEllipsisV, onClick: toggleOptions }), ReactDOM__default.default.createPortal(jsxRuntime.exports.jsx(OptionsDropdownList, Object.assign({}, attributes.popper, { isOpen: showOptions, ref: setPopperElement, style: Object.assign(Object.assign(Object.assign({}, styles2.popper), { maxHeight: 800, minWidth: 150, zIndex: 9999 }), style), children: jsxRuntime.exports.jsx(SectionedList, { items: allowColumnHiding ? [resetFunctions, columnToggles] : [resetFunctions], onSelect: onOptionSelect }) })), document.body)] });
   };
-  var __rest = globalThis && globalThis.__rest || function(s, e3) {
+  var __rest$1 = globalThis && globalThis.__rest || function(s, e3) {
     var t2 = {};
     for (var p2 in s)
       if (Object.prototype.hasOwnProperty.call(s, p2) && e3.indexOf(p2) < 0)
@@ -48677,6 +48744,139 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     return t2;
   };
   const ROW_HEIGHT = 40;
+  const shouldForwardProp$2 = (prop) => !["isSorted", "onClickRow"].includes(prop);
+  const Row = styled__default.default.div.withConfig({ shouldForwardProp: shouldForwardProp$2 })`
+    cursor: ${(props) => props.onClickRow ? "pointer" : "default"};
+    display: flex;
+
+    :hover {
+        div {
+            background-color: ${(props) => props.theme.colors.grey1};
+        }
+    }
+
+    :active,
+    focused {
+        div {
+            background-color: ${(props) => props.theme.colors.grey2};
+        }
+    }
+`;
+  const RowPlaceholder = styled__default.default(Row)`
+    position: absolute;
+    left: 0px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+  const CellPlaceholder = styled__default.default.div`
+    min-width: 80px;
+    height: 0.7rem;
+    margin: 0.5rem;
+
+    background: ${(props) => `linear-gradient(to right, ${props.theme.colors.grey2}, ${curriedTransparentize$2(0.2, props.theme.colors.grey3)}, ${props.theme.colors.grey2});`};
+    background-size: 50%;
+    border-radius: 0.5rem;
+
+    animation-name: aniHorizontal;
+    animation-duration: 3.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+
+    @keyframes aniHorizontal {
+        0% {
+            background-position: -100% 0;
+        }
+
+        100% {
+            background-position: 100% 0;
+        }
+    }
+`;
+  const Cell = styled__default.default.div`
+    display: flex !important;
+    align-items: center;
+
+    min-width: 80px;
+    height: 2.5rem;
+
+    color: ${(props) => props.theme.colors.grey6};
+
+    background-color: ${(props) => props.theme.colors.blue1};
+    border-bottom: 1px solid ${(props) => props.theme.colors.grey3};
+
+    :last-child {
+        border-right: 0;
+    }
+`;
+  const CellContent = styled__default.default.span`
+    overflow: hidden;
+
+    width: 100%;
+    padding: 0 1rem;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+  const RenderRow = React__namespace.memo(({ data: { width, currentEditCell, headerGroups, rows, prepareRow, getItem, totalColumnsWidth, onClickRow, throttledClickRow, backgroundColor, mappedColumns }, index: index2, style: renderRowStyle }) => {
+    let row = rows[index2];
+    if (getItem) {
+      const value = getItem(index2);
+      if (!value) {
+        row = null;
+      } else {
+        row.original = value;
+        row.values = value;
+      }
+    }
+    if (!row) {
+      return jsxRuntime.exports.jsx("div", { children: headerGroups.map((headerGroup, gidx) => jsxRuntime.exports.jsx(RowPlaceholder, { style: {
+        height: ROW_HEIGHT,
+        top: (index2 + 1) * ROW_HEIGHT,
+        width: totalColumnsWidth > width ? totalColumnsWidth : "100%"
+      }, children: headerGroup === null || headerGroup === void 0 ? void 0 : headerGroup.headers.map((col, cidx) => {
+        const headerProps = col.getHeaderProps();
+        const headerWidth = headerProps.style.width === "NaNpx" ? mappedColumns[cidx].width : headerProps.style.width;
+        return jsxRuntime.exports.jsx(CellPlaceholder, { style: {
+          maxWidth: col.maxWidth,
+          width: headerWidth
+        } }, `col-${index2}-${cidx}`);
+      }) }, `row-${gidx}`)) });
+    }
+    prepareRow(row);
+    const onClick = () => {
+      if (onClickRow) {
+        throttledClickRow(row.original);
+      }
+    };
+    const _a = row.getRowProps({ style: renderRowStyle }), { style: rowStyle } = _a, restRow = __rest$1(_a, ["style"]);
+    return React$2.createElement(Row, Object.assign({}, restRow, { key: `row-${index2}`, onClick, onClickRow, style: Object.assign(Object.assign({}, rowStyle), { top: (index2 + 1) * ROW_HEIGHT, width: totalColumnsWidth > width ? totalColumnsWidth : "100%" }) }), row.cells.map((cell, colIdx) => {
+      var _a2;
+      const cellProps = cell.getCellProps();
+      return React$2.createElement(
+        Cell,
+        Object.assign({}, cellProps, { key: `cell-${index2}-${colIdx}`, style: Object.assign(Object.assign({}, cellProps.style), { backgroundColor, justifyContent: mappedColumns[colIdx].align, maxWidth: (_a2 = cell.column) === null || _a2 === void 0 ? void 0 : _a2.maxWidth, width: cellProps.style.width === "NaNpx" ? mappedColumns[colIdx].width : cellProps.style.width }) }),
+        jsxRuntime.exports.jsx(CellContent, { children: cell.render("Cell", {
+          colIdx,
+          currentEditCell,
+          rowIdx: index2
+        }) })
+      );
+    }));
+  }, areEqual);
+  var __rest = globalThis && globalThis.__rest || function(s, e3) {
+    var t2 = {};
+    for (var p2 in s)
+      if (Object.prototype.hasOwnProperty.call(s, p2) && e3.indexOf(p2) < 0)
+        t2[p2] = s[p2];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i2 = 0, p2 = Object.getOwnPropertySymbols(s); i2 < p2.length; i2++) {
+        if (e3.indexOf(p2[i2]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i2]))
+          t2[p2[i2]] = s[p2[i2]];
+      }
+    return t2;
+  };
   const Wrapper$3 = styled__default.default.div`
     display: inline-block;
     width: 100%;
@@ -48787,86 +48987,11 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     width: 10px;
     height: 100%;
 `;
-  const shouldForwardProp$2 = (prop) => !["isSorted", "onClickRow"].includes(prop);
   const SortIcon = styled__default.default(FontAwesomeIcon).withConfig({ shouldForwardProp: shouldForwardProp$2 })`
     color: ${(props) => props.isSorted ? props.theme.colors.grey3 : props.theme.colors.blue3};
 `;
   const TooltipIcon = styled__default.default(FontAwesomeIcon)`
     color: ${(props) => props.theme.colors.grey4};
-`;
-  const Row = styled__default.default.div.withConfig({ shouldForwardProp: shouldForwardProp$2 })`
-    cursor: ${(props) => props.onClickRow ? "pointer" : "default"};
-    display: flex;
-
-    :hover {
-        div {
-            background-color: ${(props) => props.theme.colors.grey1};
-        }
-    }
-
-    :active,
-    focused {
-        div {
-            background-color: ${(props) => props.theme.colors.grey2};
-        }
-    }
-`;
-  const RowPlaceholder = styled__default.default(Row)`
-    position: absolute;
-    left: 0px;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-`;
-  const CellPlaceholder = styled__default.default.div`
-    min-width: 80px;
-    height: 0.7rem;
-    margin: 0.5rem;
-
-    background: ${(props) => `linear-gradient(to right, ${props.theme.colors.grey2}, ${curriedTransparentize$2(0.2, props.theme.colors.grey3)}, ${props.theme.colors.grey2});`};
-    background-size: 50%;
-    border-radius: 0.5rem;
-
-    animation-name: aniHorizontal;
-    animation-duration: 3.5s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-
-    @keyframes aniHorizontal {
-        0% {
-            background-position: -100% 0;
-        }
-
-        100% {
-            background-position: 100% 0;
-        }
-    }
-`;
-  const Cell = styled__default.default.div`
-    display: flex !important;
-    align-items: center;
-
-    min-width: 80px;
-    height: 2.5rem;
-
-    color: ${(props) => props.theme.colors.grey6};
-
-    background-color: ${(props) => props.theme.colors.blue1};
-    border-bottom: 1px solid ${(props) => props.theme.colors.grey3};
-
-    :last-child {
-        border-right: 0;
-    }
-`;
-  const CellContent = styled__default.default.span`
-    overflow: hidden;
-
-    width: 100%;
-    padding: 0 1rem;
-
-    text-overflow: ellipsis;
-    white-space: nowrap;
 `;
   const getSortIcon = (isSorted, isSortedDesc) => {
     if (!isSorted) {
@@ -48916,6 +49041,19 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     EDIT_INPUT: EditInputCell,
     EDIT_SELECT: EditSelectCell
   };
+  const createItemData = memoizeOne$1((width, currentEditCell, headerGroups, rows, prepareRow, getItem, totalColumnsWidth, onClickRow, throttledClickRow, backgroundColor, mappedColumns) => ({
+    backgroundColor,
+    currentEditCell,
+    getItem,
+    headerGroups,
+    mappedColumns,
+    onClickRow,
+    prepareRow,
+    rows,
+    throttledClickRow,
+    totalColumnsWidth,
+    width
+  }));
   const Table = React$2.forwardRef(({ allowHiding, backgroundColor, className, columns, data, getItem, initialSort = [], itemCount, maxRows, onAction, onChange: onChange2, onClickRow, onItemsRendered, onFilter, onSort, showTableOptions, style, tableOptionsStyle }, ref) => {
     const [currentSortBy, setCurrentSortBy] = React$2.useState(initialSort);
     React$2.useEffect(() => {
@@ -49006,57 +49144,11 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
         );
       }))) }), React$2.createElement("div", Object.assign({}, tableProps, rest, { key: "table-body-inner", style: tableStyle }), children)] }, "table-inner");
     }, useDeepCompare([tableProps, totalColumnsWidth, headerGroups]));
-    const renderRow = React$2.useCallback(({ data: rowData, index: index2, style: renderRowStyle }) => {
-      let row = rows[index2];
-      if (getItem) {
-        const value = getItem(index2);
-        if (!value) {
-          row = null;
-        } else {
-          row.original = value;
-          row.values = value;
-        }
-      }
-      if (!row) {
-        return jsxRuntime.exports.jsx("div", { children: headerGroups.map((headerGroup, gidx) => jsxRuntime.exports.jsx(RowPlaceholder, { style: {
-          height: ROW_HEIGHT,
-          top: (index2 + 1) * ROW_HEIGHT,
-          width: totalColumnsWidth > rowData.width ? totalColumnsWidth : "100%"
-        }, children: headerGroup === null || headerGroup === void 0 ? void 0 : headerGroup.headers.map((col, cidx) => {
-          const headerProps = col.getHeaderProps();
-          const width = headerProps.style.width === "NaNpx" ? mappedColumns[cidx].width : headerProps.style.width;
-          return jsxRuntime.exports.jsx(CellPlaceholder, { style: {
-            maxWidth: col.maxWidth,
-            width
-          } }, `col-${index2}-${cidx}`);
-        }) }, `row-${gidx}`)) });
-      }
-      prepareRow(row);
-      const onClick = () => {
-        if (onClickRow) {
-          throttledClickRow(row.original);
-        }
-      };
-      const _a = row.getRowProps({ style: renderRowStyle }), { style: rowStyle } = _a, restRow = __rest(_a, ["style"]);
-      return React$2.createElement(Row, Object.assign({}, restRow, { key: `row-${index2}`, onClick, onClickRow, style: Object.assign(Object.assign({}, rowStyle), { top: (index2 + 1) * ROW_HEIGHT, width: totalColumnsWidth > rowData.width ? totalColumnsWidth : "100%" }) }), row.cells.map((cell, colIdx) => {
-        var _a2;
-        const cellProps = cell.getCellProps();
-        return React$2.createElement(
-          Cell,
-          Object.assign({}, cellProps, { key: `cell-${index2}-${colIdx}`, style: Object.assign(Object.assign({}, cellProps.style), { backgroundColor, justifyContent: mappedColumns[colIdx].align, maxWidth: (_a2 = cell.column) === null || _a2 === void 0 ? void 0 : _a2.maxWidth, width: cellProps.style.width === "NaNpx" ? mappedColumns[colIdx].width : cellProps.style.width }) }),
-          jsxRuntime.exports.jsx(CellContent, { children: cell.render("Cell", {
-            colIdx,
-            currentEditCell: rowData.currentEditCell,
-            rowIdx: index2
-          }) })
-        );
-      }));
-    }, useDeepCompare([currentEditCell, prepareRow, rows, getItem]));
     return jsxRuntime.exports.jsx(Wrapper$3, Object.assign({}, getTableProps(), { "$hasMaxRows": !!maxRows, className: `${className} ${hasFixedColumns ? "sticky" : ""}`, style: Object.assign({ height: maxRows ? (Math.min(rows.length, maxRows) + 1) * ROW_HEIGHT : "100%" }, style), children: jsxRuntime.exports.jsx(AutoSizer, { children: ({ height, width }) => {
-      return jsxRuntime.exports.jsx(StyledFixedSizeList, { height, innerElementType: renderTable, itemCount: itemCount || rows.length, itemData: { currentEditCell, width }, itemSize: ROW_HEIGHT, onItemsRendered, style: {
+      return jsxRuntime.exports.jsx(StyledFixedSizeList, { height, innerElementType: renderTable, itemCount: itemCount || rows.length, itemData: createItemData(width, currentEditCell, headerGroups, rows, prepareRow, getItem, totalColumnsWidth, onClickRow, throttledClickRow, backgroundColor, mappedColumns), itemSize: ROW_HEIGHT, onItemsRendered, style: {
         overflowX: width < totalColumnsWidth ? "auto" : "hidden",
         overflowY: height < (rows.length + 1) * ROW_HEIGHT ? "auto" : "hidden"
-      }, width, children: renderRow }, "table-list");
+      }, width, children: RenderRow }, "table-list");
     } }) }));
   });
   Table.displayName = "Table";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@darajs/core",
-  "version": "1.0.0-a.2",
+  "version": "1.0.0",
   "description": "Dara Framework core",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -35,9 +35,9 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@darajs/eslint-config": "~1.0.0-a.1",
-    "@darajs/prettier-config": "~1.0.0-a.1",
-    "@darajs/stylelint-config": "~1.0.0-a.1",
+    "@darajs/eslint-config": "~1.0.0",
+    "@darajs/prettier-config": "~1.0.0",
+    "@darajs/stylelint-config": "~1.0.0",
     "@rollup/plugin-inject": "^4.0.4",
     "@testing-library/dom": "^9.3.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -73,10 +73,10 @@
     "whatwg-fetch": "^3.6.2"
   },
   "dependencies": {
-    "@darajs/styled-components": "~1.0.0-a.1",
-    "@darajs/ui-components": "~1.0.0-a.1",
-    "@darajs/ui-notifications": "~1.0.0-a.1",
-    "@darajs/ui-utils": "~1.0.0-a.1",
+    "@darajs/styled-components": "~1.0.0",
+    "@darajs/ui-components": "~1.0.0",
+    "@darajs/ui-notifications": "~1.0.0",
+    "@darajs/ui-utils": "~1.0.0",
     "@fortawesome/fontawesome-free": "^6.3.0",
     "@recoiljs/refine": "^0.1.1",
     "@tanstack/query-core": "^4.0.0",
@@ -113,5 +113,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f46a6d78d2bdf8cbb815ea20cffbb725c6a0886"
+  "gitHead": "4524a653baad221d41c98e28aa75f7e951cf6a48"
 }