@mui/x-internals 8.5.1 → 8.5.3

package/CHANGELOG.md

@@ -5,6 +5,193 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.5.3
+
+_Jun 19, 2025_
+
+We'd like to extend a big thank you to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@alisasanib, @arminmeh, @sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @oliviertassinari
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.3`
+
+- [DataGrid] Fix export menu button tooltip being interactive when menu is open (#18327) @bernardobelchior
+- [DataGrid] Fix column menu scroll close (#18065) @alisasanib
+- [DataGrid] Fix page size issue with data source (#18419) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.5.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.5.3`, plus:
+
+- [DataGridPro] Ignore missing `rowCount` response when new children are fetched with the data source (#17711) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.5.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.5.3`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.3`
+
+- [pickers] Add `inputSizeSmall` to classes interface (#18242) @sai6855
+
+#### `@mui/x-date-pickers-pro@8.5.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.5.3`.
+
+### Charts
+
+#### `@mui/x-charts@8.5.3`
+
+- [charts] Add item class to list item around each series in legend (#18411) @bernardobelchior
+- [charts] Allow `tabIndex` in surface and legend (#18344) @JCQuintas
+- [charts] Explore selector typing (#18362) @alexfauquette
+- [charts] Fix highlight with number ids (#18423) @alexfauquette
+- [charts] Make scatter chart use data attributes (#18048) @alexfauquette
+
+#### `@mui/x-charts-pro@8.5.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.5.3`, plus:
+
+- [charts-pro] Add data-series to elements of funnel chart (#18067) @JCQuintas
+- [charts-pro] Hide values outside minStart and maxEnd in zoom slider (#18336) @bernardobelchior
+- [charts-pro] Fix `FunnelChart` label positioning with different curves (#18354) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.3`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.5.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.5.3`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.5.3`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix 404 in charts docs (#18440) @alexfauquette
+- [docs][pickers] Fix adapter version resolving when opening demo to edit (#18363) @LukasTy
+
+### Core
+
+- [core] Fix pnpm valelint error (#18420) @oliviertassinari
+
+### Miscellaneous
+
+- [code-infra] Add back a `Playwright` renovate group (#18397) @LukasTy
+- [code-infra] Setup `CODEOWNERS` for charts repositories (#18418) @JCQuintas
+- [code-infra] Strengthen `URL` usage for test config (#18444) @LukasTy
+- [code-infra] Use `vitest` bundled types (#17758) @JCQuintas
+- [infra] Stabilise tests by removing babel and plugins from vitest (#18341) @JCQuintas
+- [infra] Add automated release PR creation script (#18345) @michelengelen
+
+## 8.5.2
+
+_Jun 12, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Improve Data Grid selectors performance
+- 🐞 Fix `useSyncExternalStore` import error in React 17
+
+Special thanks go out to the community members for their valuable contributions:
+@alisasanib, @noobyogi0010.
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @JCQuintas, @KenanYusuf, @LukasTy, @mapache-salvaje, @michelengelen, @noraleonte, @oliviertassinari, @prakhargupta1, @romgrk.
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.2`
+
+- [DataGrid] Improve selectors performance (#18234) @romgrk
+- [DataGrid] Fix data grid palette when using CSS vars (#18310) @KenanYusuf
+- [DataGrid] Ignore data source request if the grid got unmounted (#18268) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.5.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.5.2`, plus:
+
+- [DataGridPro] Fix flex column width if it is a pinned column (#18293) @alisasanib
+- [DataGridPro] Fix inconsistent filtering results with aggregation (#17954) @cherniavskii
+
+#### `@mui/x-data-grid-premium@8.5.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.5.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.2`
+
+- [pickers] Add `PickerDay2` and `DateRangePickerDay2` components (#15921) @noraleonte
+- [pickers] Fix `hiddenLabel` prop propagation (#18195) @noobyogi0010
+
+#### `@mui/x-date-pickers-pro@8.5.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.5.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.5.2`
+
+- [charts] Add a default value formatter for continuous scales (#18178) @bernardobelchior
+- [charts] Add margin-bottom to charts toolbar (#18326) @bernardobelchior
+- [charts] Fix grid with band scale (#18295) @alexfauquette
+- [charts] Remove unnecessary style changes in tests (#18317) @JCQuintas
+- [charts] Remove `sx` prop merging from `useComponentRenderer` (#18235) @bernardobelchior
+- [charts] Fix `useSyncExternalStore` import error in React 17 (#18314) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.5.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.5.2`, plus:
+
+- [charts-pro] Document zoom slider tooltip value formatting (#18261) @bernardobelchior
+- [charts-pro] Funnel `gap` prop does not impact the drawing area (#18233) @JCQuintas
+- [charts-pro] Use `ChartsToolbarPro` types in pro charts (#18243) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.2`
+
+- [tree-view] Fix `useSyncExternalStore` import error in React 17 (#18314) @bernardobelchior
+
+#### `@mui/x-tree-view-pro@8.5.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.5.2`.
+
+### Docs
+
+- [docs] Add toolbar custom trigger and panel recipe (#18297) @KenanYusuf
+- [docs] Copyedit the Priority support page (#18311) @mapache-salvaje
+- [docs] Remove confusing opt-out mention in telemetry docs (#18257) @prakhargupta1
+- [docs] Revise the Master Detail doc (#17927) @mapache-salvaje
+- [docs] Revise the list view doc (#17928) @mapache-salvaje
+- [docs] Audit and revise the Pro column docs (#17844) @mapache-salvaje
+- [docs] Add some more context on Heatmap (#18256) @oliviertassinari
+- [x-telemetry] Reduce Telemetry overhead (#18292) @oliviertassinari
+- [code-infra] Align Node version used in CI to v22 (#18319) @LukasTy
+- [code-infra] Fix pkg.pr.new publishing (#18316) @bernardobelchior
+- [code-infra] Revert `React` to `19.0.0` (#18265) @LukasTy
+- [code-infra] Use `catalog` for reused dependencies (#18302) @LukasTy
+- [infra] Remove unused karma/mocha deps and files (#18340) @JCQuintas
+- [infra] Update GitHub label references to use 'scope' instead of 'component' (#18260) @michelengelen
+- [infra] Use a single browser server in CI (#18230) @JCQuintas
+
 ## 8.5.1
 
 <!-- generated comparing v8.5.0..master -->
@@ -97,15 +284,6 @@ Same changes as in `@mui/x-tree-view@8.5.1`.
 
 ### Core
 
-- chore(deps): bump @next/eslint-plugin-next to 15.3.3 (#18155) @renovate[bot]
-- chore(deps): bump @types/lodash to ^4.17.17 (#17990) @renovate[bot]
-- chore(deps): bump babel (#18157) @renovate[bot]
-- chore(deps): bump eslint to ^9.28.0 (#17352) @renovate[bot]
-- chore(deps): bump material ui (#17802) @renovate[bot]
-- chore(deps): bump next to ^15.3.3 (#18159) @renovate[bot]
-- chore(deps): bump ossf/scorecard-action action to v2.4.2 (#18160) @renovate[bot]
-- chore(deps): bump react-router to ^7.6.1 (#18162) @renovate[bot]
-- chore(deps): bump yargs to ^18.0.0 (#18169) @renovate[bot]
 - [code-infra] Different approach to console testing for `processRowUpdate` (#18213) @JCQuintas
 - [code-infra] Fix act warnings in DataGrid/toolbar (#18207) @JCQuintas
 - [code-infra] Remove `istanbul` references (#18194) @JCQuintas
@@ -4549,7 +4727,6 @@ No changes since `@mui/x-charts@7.22.2`.
 - [docs] Add `next` version links (#15423) @LukasTy
 - [docs] Use the `loading` state in the demos (#15538) @cherniavskii
 - [docs] Add data caching to lazy loaded detail panel demo (#15506) @cherniavskii
-
 - [code-infra] Tentative fix for Argos flaky screenshot tests (#15399) @JCQuintas
 - [docs-infra] Transpile `.ts` demo files (#15421) @KenanYusuf
 - [core] Clarify release version bump strategy (#15536) @cherniavskii

package/ToolbarContext/useRegisterToolbarButton.d.ts

@@ -3,7 +3,7 @@ interface ToolbarItemProps extends Pick<React.ComponentProps<'button'>, 'onKeyDo
 export declare function useRegisterToolbarButton(props: ToolbarItemProps, ref: React.RefObject<HTMLButtonElement | null>): {
   tabIndex: number;
   disabled: boolean | undefined;
-  'aria-disabled': (boolean | "false" | "true") | undefined;
+  'aria-disabled': (boolean | "true" | "false") | undefined;
   onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
   onFocus: (event: React.FocusEvent<HTMLButtonElement>) => void;
 };

package/esm/ToolbarContext/useRegisterToolbarButton.d.ts

@@ -3,7 +3,7 @@ interface ToolbarItemProps extends Pick<React.ComponentProps<'button'>, 'onKeyDo
 export declare function useRegisterToolbarButton(props: ToolbarItemProps, ref: React.RefObject<HTMLButtonElement | null>): {
   tabIndex: number;
   disabled: boolean | undefined;
-  'aria-disabled': (boolean | "false" | "true") | undefined;
+  'aria-disabled': (boolean | "true" | "false") | undefined;
   onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
   onFocus: (event: React.FocusEvent<HTMLButtonElement>) => void;
 };

package/esm/lruMemoize/index.d.ts

@@ -0,0 +1 @@
+export { lruMemoize } from 'reselect';

package/esm/lruMemoize/index.js

@@ -0,0 +1 @@
+export { lruMemoize } from 'reselect';

package/esm/store/Store.d.ts

@@ -0,0 +1,13 @@
+type Listener<T> = (value: T) => void;
+export declare class Store<State> {
+  state: State;
+  private listeners;
+  static create<T>(state: T): Store<T>;
+  constructor(state: State);
+  subscribe: (fn: Listener<State>) => () => void;
+  getSnapshot: () => State;
+  update: (newState: State) => void;
+  apply(changes: Partial<State>): void;
+  set<T>(key: keyof State, value: T): void;
+}
+export {};

package/esm/store/Store.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export class Store {
+  static create(state) {
+    return new Store(state);
+  }
+  constructor(state) {
+    this.state = void 0;
+    this.listeners = void 0;
+    this.subscribe = fn => {
+      this.listeners.add(fn);
+      return () => {
+        this.listeners.delete(fn);
+      };
+    };
+    this.getSnapshot = () => {
+      return this.state;
+    };
+    this.update = newState => {
+      if (this.state !== newState) {
+        this.state = newState;
+        this.listeners.forEach(l => l(newState));
+      }
+    };
+    this.state = state;
+    this.listeners = new Set();
+  }
+  apply(changes) {
+    for (const key in changes) {
+      if (!Object.is(this.state[key], changes[key])) {
+        this.update(_extends({}, this.state, changes));
+        return;
+      }
+    }
+  }
+  set(key, value) {
+    if (!Object.is(this.state[key], value)) {
+      this.update(_extends({}, this.state, {
+        [key]: value
+      }));
+    }
+  }
+}

package/esm/store/createSelector.d.ts

@@ -0,0 +1,4 @@
+import type { CreateSelectorFunction } from "./createSelectorType.js";
+export type { CreateSelectorFunction } from "./createSelectorType.js";
+export declare const createSelector: CreateSelectorFunction;
+export declare const createSelectorMemoized: CreateSelectorFunction;

package/esm/store/createSelector.js

@@ -0,0 +1,138 @@
+import { lruMemoize, createSelectorCreator } from 'reselect';
+/* eslint-disable no-underscore-dangle */ // __cacheKey__
+
+const reselectCreateSelector = createSelectorCreator({
+  memoize: lruMemoize,
+  memoizeOptions: {
+    maxSize: 1,
+    equalityCheck: Object.is
+  }
+});
+/* eslint-disable id-denylist */
+export const createSelector = (a, b, c, d, e, f, ...other) => {
+  if (other.length > 0) {
+    throw new Error('Unsupported number of selectors');
+  }
+  let selector;
+  if (a && b && c && d && e && f) {
+    selector = (state, a1, a2, a3) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      const vc = c(state, a1, a2, a3);
+      const vd = d(state, a1, a2, a3);
+      const ve = e(state, a1, a2, a3);
+      return f(va, vb, vc, vd, ve, a1, a2, a3);
+    };
+  } else if (a && b && c && d && e) {
+    selector = (state, a1, a2, a3) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      const vc = c(state, a1, a2, a3);
+      const vd = d(state, a1, a2, a3);
+      return e(va, vb, vc, vd, a1, a2, a3);
+    };
+  } else if (a && b && c && d) {
+    selector = (state, a1, a2, a3) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      const vc = c(state, a1, a2, a3);
+      return d(va, vb, vc, a1, a2, a3);
+    };
+  } else if (a && b && c) {
+    selector = (state, a1, a2, a3) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      return c(va, vb, a1, a2, a3);
+    };
+  } else if (a && b) {
+    selector = (state, a1, a2, a3) => {
+      const va = a(state, a1, a2, a3);
+      return b(va, a1, a2, a3);
+    };
+  } else if (a) {
+    selector = a;
+  } else {
+    throw new Error('Missing arguments');
+  }
+  return selector;
+};
+/* eslint-enable id-denylist */
+
+export const createSelectorMemoized = (...selectors) => {
+  const cache = new WeakMap();
+  let nextCacheId = 1;
+  const combiner = selectors[selectors.length - 1];
+  const nSelectors = selectors.length - 1 || 1;
+  // (s1, s2, ..., sN, a1, a2, a3) => { ... }
+  const argsLength = Math.max(combiner.length - nSelectors, 0);
+  if (argsLength > 3) {
+    throw new Error('Unsupported number of arguments');
+  }
+
+  // prettier-ignore
+  const selector = (state, a1, a2, a3) => {
+    let cacheKey = state.__cacheKey__;
+    if (!cacheKey) {
+      cacheKey = {
+        id: nextCacheId
+      };
+      state.__cacheKey__ = cacheKey;
+      nextCacheId += 1;
+    }
+    let fn = cache.get(cacheKey);
+    if (!fn) {
+      let reselectArgs = selectors;
+      const selectorArgs = [undefined, undefined, undefined];
+      switch (argsLength) {
+        case 0:
+          break;
+        case 1:
+          {
+            reselectArgs = [...selectors.slice(0, -1), () => selectorArgs[0], combiner];
+            break;
+          }
+        case 2:
+          {
+            reselectArgs = [...selectors.slice(0, -1), () => selectorArgs[0], () => selectorArgs[1], combiner];
+            break;
+          }
+        case 3:
+          {
+            reselectArgs = [...selectors.slice(0, -1), () => selectorArgs[0], () => selectorArgs[1], () => selectorArgs[2], combiner];
+            break;
+          }
+        default:
+          throw new Error('Unsupported number of arguments');
+      }
+      fn = reselectCreateSelector(...reselectArgs);
+      fn.selectorArgs = selectorArgs;
+      cache.set(cacheKey, fn);
+    }
+
+    /* eslint-disable no-fallthrough */
+
+    switch (argsLength) {
+      case 3:
+        fn.selectorArgs[2] = a3;
+      case 2:
+        fn.selectorArgs[1] = a2;
+      case 1:
+        fn.selectorArgs[0] = a1;
+      case 0:
+      default:
+    }
+    switch (argsLength) {
+      case 0:
+        return fn(state);
+      case 1:
+        return fn(state, a1);
+      case 2:
+        return fn(state, a1, a2);
+      case 3:
+        return fn(state, a1, a2, a3);
+      default:
+        throw new Error('unreachable');
+    }
+  };
+  return selector;
+};

package/esm/store/createSelectorType.d.ts

@@ -0,0 +1,9 @@
+import type { Selector } from 'reselect';
+export type CreateSelectorFunction = <const Args extends any[], const Selectors extends ReadonlyArray<Selector<any>>, const Combiner extends (...args: readonly [...ReturnTypes<Selectors>, ...Args]) => any>(...items: [...Selectors, Combiner]) => (...args: Selectors['length'] extends 0 ? MergeParams<ReturnTypes<Selectors>, Parameters<Combiner>> : [StateFromSelectorList<Selectors>, ...MergeParams<ReturnTypes<Selectors>, Parameters<Combiner>>]) => ReturnType<Combiner>;
+type StateFromSelectorList<Selectors extends readonly any[]> = Selectors extends [f: infer F, ...other: infer R] ? StateFromSelector<F> extends StateFromSelectorList<R> ? StateFromSelector<F> : StateFromSelectorList<R> : {};
+type StateFromSelector<T> = T extends ((first: infer F, ...args: any[]) => any) ? F : never;
+type Fn = (...args: any[]) => any;
+type ReturnTypes<FunctionsArray extends readonly Fn[]> = { [Index in keyof FunctionsArray]: FunctionsArray[Index] extends FunctionsArray[number] ? ReturnType<FunctionsArray[Index]> : never };
+type MergeParams<STypes extends readonly unknown[], CTypes extends readonly unknown[]> = STypes['length'] extends 0 ? CTypes : MergeParams<DropFirst<STypes>, DropFirst<CTypes>>;
+type DropFirst<T> = T extends [any, ...infer Xs] ? Xs : [];
+export {};

package/esm/store/createSelectorType.js

@@ -0,0 +1 @@
+export {};

package/esm/store/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./createSelector.js";
+export * from "./Store.js";

package/esm/store/index.js

@@ -0,0 +1,2 @@
+export * from "./createSelector.js";
+export * from "./Store.js";

package/esm/useComponentRenderer/useComponentRenderer.js

@@ -20,9 +20,6 @@ export function useComponentRenderer(defaultElement, render, props, state = {})
     if (render.props.style || props.style) {
       props.style = _extends({}, props.style, render.props.style);
     }
-    if (render.props.sx || props.sx) {
-      props.sx = mergeSx(props.sx, render.props.sx);
-    }
     return /*#__PURE__*/React.cloneElement(render, props);
   }
   return /*#__PURE__*/React.createElement(defaultElement, props);
@@ -32,10 +29,4 @@ function mergeClassNames(className, otherClassName) {
     return className || otherClassName;
   }
   return `${className} ${otherClassName}`;
-}
-function mergeSx(sx1, sx2) {
-  if (!sx1 || !sx2) {
-    return sx1 || sx2;
-  }
-  return (Array.isArray(sx1) ? sx1 : [sx1]).concat(Array.isArray(sx2) ? sx2 : [sx2]);
 }

package/lruMemoize/index.d.ts

@@ -0,0 +1 @@
+export { lruMemoize } from 'reselect';

package/lruMemoize/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "lruMemoize", {
+  enumerable: true,
+  get: function () {
+    return _reselect.lruMemoize;
+  }
+});
+var _reselect = require("reselect");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-internals",
-  "version": "8.5.1",
+  "version": "8.5.3",
   "author": "MUI Team",
   "description": "Utility functions for the MUI X packages (internal use only).",
   "license": "MIT",
@@ -31,8 +31,9 @@
     "directory": "packages/x-internals"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.4",
-    "@mui/utils": "^7.1.1"
+    "@babel/runtime": "^7.27.6",
+    "@mui/utils": "^7.1.1",
+    "reselect": "^5.1.1"
   },
   "peerDependencies": {
     "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",

package/store/Store.d.ts

@@ -0,0 +1,13 @@
+type Listener<T> = (value: T) => void;
+export declare class Store<State> {
+  state: State;
+  private listeners;
+  static create<T>(state: T): Store<T>;
+  constructor(state: State);
+  subscribe: (fn: Listener<State>) => () => void;
+  getSnapshot: () => State;
+  update: (newState: State) => void;
+  apply(changes: Partial<State>): void;
+  set<T>(key: keyof State, value: T): void;
+}
+export {};

package/store/Store.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Store = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+class Store {
+  static create(state) {
+    return new Store(state);
+  }
+  constructor(state) {
+    this.state = void 0;
+    this.listeners = void 0;
+    this.subscribe = fn => {
+      this.listeners.add(fn);
+      return () => {
+        this.listeners.delete(fn);
+      };
+    };
+    this.getSnapshot = () => {
+      return this.state;
+    };
+    this.update = newState => {
+      if (this.state !== newState) {
+        this.state = newState;
+        this.listeners.forEach(l => l(newState));
+      }
+    };
+    this.state = state;
+    this.listeners = new Set();
+  }
+  apply(changes) {
+    for (const key in changes) {
+      if (!Object.is(this.state[key], changes[key])) {
+        this.update((0, _extends2.default)({}, this.state, changes));
+        return;
+      }
+    }
+  }
+  set(key, value) {
+    if (!Object.is(this.state[key], value)) {
+      this.update((0, _extends2.default)({}, this.state, {
+        [key]: value
+      }));
+    }
+  }
+}
+exports.Store = Store;

package/store/createSelector.d.ts

@@ -0,0 +1,4 @@
+import type { CreateSelectorFunction } from "./createSelectorType.js";
+export type { CreateSelectorFunction } from "./createSelectorType.js";
+export declare const createSelector: CreateSelectorFunction;
+export declare const createSelectorMemoized: CreateSelectorFunction;

package/store/createSelector.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSelectorMemoized = exports.createSelector = void 0;
+var _reselect = require("reselect");
+/* eslint-disable no-underscore-dangle */ // __cacheKey__
+
+const reselectCreateSelector = (0, _reselect.createSelectorCreator)({
+  memoize: _reselect.lruMemoize,
+  memoizeOptions: {
+    maxSize: 1,
+    equalityCheck: Object.is
+  }
+});
+/* eslint-disable id-denylist */
+const createSelector = (a, b, c, d, e, f, ...other) => {
+  if (other.length > 0) {
+    throw new Error('Unsupported number of selectors');
+  }
+  let selector;
+  if (a && b && c && d && e && f) {
+    selector = (state, a1, a2, a3) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      const vc = c(state, a1, a2, a3);
+      const vd = d(state, a1, a2, a3);
+      const ve = e(state, a1, a2, a3);
+      return f(va, vb, vc, vd, ve, a1, a2, a3);
+    };
+  } else if (a && b && c && d && e) {
+    selector = (state, a1, a2, a3) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      const vc = c(state, a1, a2, a3);
+      const vd = d(state, a1, a2, a3);
+      return e(va, vb, vc, vd, a1, a2, a3);
+    };
+  } else if (a && b && c && d) {
+    selector = (state, a1, a2, a3) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      const vc = c(state, a1, a2, a3);
+      return d(va, vb, vc, a1, a2, a3);
+    };
+  } else if (a && b && c) {
+    selector = (state, a1, a2, a3) => {
+      const va = a(state, a1, a2, a3);
+      const vb = b(state, a1, a2, a3);
+      return c(va, vb, a1, a2, a3);
+    };
+  } else if (a && b) {
+    selector = (state, a1, a2, a3) => {
+      const va = a(state, a1, a2, a3);
+      return b(va, a1, a2, a3);
+    };
+  } else if (a) {
+    selector = a;
+  } else {
+    throw new Error('Missing arguments');
+  }
+  return selector;
+};
+/* eslint-enable id-denylist */
+exports.createSelector = createSelector;
+const createSelectorMemoized = (...selectors) => {
+  const cache = new WeakMap();
+  let nextCacheId = 1;
+  const combiner = selectors[selectors.length - 1];
+  const nSelectors = selectors.length - 1 || 1;
+  // (s1, s2, ..., sN, a1, a2, a3) => { ... }
+  const argsLength = Math.max(combiner.length - nSelectors, 0);
+  if (argsLength > 3) {
+    throw new Error('Unsupported number of arguments');
+  }
+
+  // prettier-ignore
+  const selector = (state, a1, a2, a3) => {
+    let cacheKey = state.__cacheKey__;
+    if (!cacheKey) {
+      cacheKey = {
+        id: nextCacheId
+      };
+      state.__cacheKey__ = cacheKey;
+      nextCacheId += 1;
+    }
+    let fn = cache.get(cacheKey);
+    if (!fn) {
+      let reselectArgs = selectors;
+      const selectorArgs = [undefined, undefined, undefined];
+      switch (argsLength) {
+        case 0:
+          break;
+        case 1:
+          {
+            reselectArgs = [...selectors.slice(0, -1), () => selectorArgs[0], combiner];
+            break;
+          }
+        case 2:
+          {
+            reselectArgs = [...selectors.slice(0, -1), () => selectorArgs[0], () => selectorArgs[1], combiner];
+            break;
+          }
+        case 3:
+          {
+            reselectArgs = [...selectors.slice(0, -1), () => selectorArgs[0], () => selectorArgs[1], () => selectorArgs[2], combiner];
+            break;
+          }
+        default:
+          throw new Error('Unsupported number of arguments');
+      }
+      fn = reselectCreateSelector(...reselectArgs);
+      fn.selectorArgs = selectorArgs;
+      cache.set(cacheKey, fn);
+    }
+
+    /* eslint-disable no-fallthrough */
+
+    switch (argsLength) {
+      case 3:
+        fn.selectorArgs[2] = a3;
+      case 2:
+        fn.selectorArgs[1] = a2;
+      case 1:
+        fn.selectorArgs[0] = a1;
+      case 0:
+      default:
+    }
+    switch (argsLength) {
+      case 0:
+        return fn(state);
+      case 1:
+        return fn(state, a1);
+      case 2:
+        return fn(state, a1, a2);
+      case 3:
+        return fn(state, a1, a2, a3);
+      default:
+        throw new Error('unreachable');
+    }
+  };
+  return selector;
+};
+exports.createSelectorMemoized = createSelectorMemoized;

package/store/createSelectorType.d.ts

@@ -0,0 +1,9 @@
+import type { Selector } from 'reselect';
+export type CreateSelectorFunction = <const Args extends any[], const Selectors extends ReadonlyArray<Selector<any>>, const Combiner extends (...args: readonly [...ReturnTypes<Selectors>, ...Args]) => any>(...items: [...Selectors, Combiner]) => (...args: Selectors['length'] extends 0 ? MergeParams<ReturnTypes<Selectors>, Parameters<Combiner>> : [StateFromSelectorList<Selectors>, ...MergeParams<ReturnTypes<Selectors>, Parameters<Combiner>>]) => ReturnType<Combiner>;
+type StateFromSelectorList<Selectors extends readonly any[]> = Selectors extends [f: infer F, ...other: infer R] ? StateFromSelector<F> extends StateFromSelectorList<R> ? StateFromSelector<F> : StateFromSelectorList<R> : {};
+type StateFromSelector<T> = T extends ((first: infer F, ...args: any[]) => any) ? F : never;
+type Fn = (...args: any[]) => any;
+type ReturnTypes<FunctionsArray extends readonly Fn[]> = { [Index in keyof FunctionsArray]: FunctionsArray[Index] extends FunctionsArray[number] ? ReturnType<FunctionsArray[Index]> : never };
+type MergeParams<STypes extends readonly unknown[], CTypes extends readonly unknown[]> = STypes['length'] extends 0 ? CTypes : MergeParams<DropFirst<STypes>, DropFirst<CTypes>>;
+type DropFirst<T> = T extends [any, ...infer Xs] ? Xs : [];
+export {};

package/store/createSelectorType.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/store/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./createSelector.js";
+export * from "./Store.js";

package/store/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _createSelector = require("./createSelector");
+Object.keys(_createSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _createSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _createSelector[key];
+    }
+  });
+});
+var _Store = require("./Store");
+Object.keys(_Store).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Store[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Store[key];
+    }
+  });
+});

package/useComponentRenderer/useComponentRenderer.js

@@ -28,9 +28,6 @@ function useComponentRenderer(defaultElement, render, props, state = {}) {
     if (render.props.style || props.style) {
       props.style = (0, _extends2.default)({}, props.style, render.props.style);
     }
-    if (render.props.sx || props.sx) {
-      props.sx = mergeSx(props.sx, render.props.sx);
-    }
     return /*#__PURE__*/React.cloneElement(render, props);
   }
   return /*#__PURE__*/React.createElement(defaultElement, props);
@@ -40,10 +37,4 @@ function mergeClassNames(className, otherClassName) {
     return className || otherClassName;
   }
   return `${className} ${otherClassName}`;
-}
-function mergeSx(sx1, sx2) {
-  if (!sx1 || !sx2) {
-    return sx1 || sx2;
-  }
-  return (Array.isArray(sx1) ? sx1 : [sx1]).concat(Array.isArray(sx2) ? sx2 : [sx2]);
 }