@itwin/itwinui-react 3.18.3 → 3.19.0

package/esm/utils/functions/react.d.ts

@@ -1,4 +1,9 @@
 import * as React from 'react';
+/**
+ * `true` if the current React version is 17 or 18. Else, is `false`.
+ * @private
+ */
+export declare const isReact17or18: boolean;
 /**
  * Wrapper over `cloneElement` that automatically checks for `isValidElement`
  * and automatically merges `children.ref` with the ref passed in props.

package/esm/utils/functions/react.js

@@ -1,9 +1,14 @@
 import * as React from 'react';
 import { mergeRefs } from '../hooks/useMergedRefs.js';
+let _React = React;
+export const isReact17or18 = (() => {
+  let version = _React.version?.split('.')?.[0];
+  return ['17', '18'].includes(version);
+})();
 export const cloneElementWithRef = (children, getProps) => {
   if (!children) return null;
   if (!React.isValidElement(children)) return children;
-  let childrenRef = children.props?.ref || children?.ref;
+  let childrenRef = isReact17or18 ? children?.ref : children.props?.ref;
   let props = getProps(children);
   let ref = mergeRefs(
     ...[childrenRef, 'ref' in props ? props.ref : null].filter(Boolean),

package/esm/utils/hooks/useControlledState.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 /**
  * Wrapper over `useState` that always gives preference to the
  * controlled state (which often comes from a prop).
@@ -6,8 +5,12 @@ import * as React from 'react';
  * This is helpful when a component needs to support both uncontrolled
  * and controlled states. If controlled value/setter is not passed,
  * then it will work just like a regular `useState`.
+ * The only exception is that the set function only accepts the new state. It does not accept a function.
+ *
+ * **NOTE**: `setControlledState` is called only when the value *changes* (uncontrolled mode) or should *change*
+ * (controlled mode).
  *
  * @example
  * const [state, setState] = useControlledState(null, props.value, props.onChange);
  */
-export declare const useControlledState: <T>(initialValue: T, controlledState: T | undefined, setControlledState?: React.Dispatch<React.SetStateAction<T>>) => readonly [T, React.Dispatch<React.SetStateAction<T>>];
+export declare const useControlledState: <T>(initialValue: T, controlledState: T | undefined, setControlledState?: (value: T) => void) => readonly [T, (value: T) => void];

package/esm/utils/hooks/useControlledState.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useLatestRef } from './useLatestRef.js';
 export const useControlledState = (
   initialValue,
   controlledState,
@@ -9,12 +10,15 @@ export const useControlledState = (
     () => (void 0 !== controlledState ? controlledState : uncontrolledState),
     [controlledState, uncontrolledState],
   );
+  let oldState = useLatestRef(state);
   let setState = React.useCallback(
     (value) => {
+      if (value === oldState.current) return;
+      oldState.current = value;
       setUncontrolledState(value);
       setControlledState?.(value);
     },
-    [setControlledState, setUncontrolledState],
+    [oldState, setControlledState],
   );
   return [state, setState];
 };

package/esm/utils/hooks/useGlobals.d.ts

@@ -10,7 +10,6 @@ export declare const useGlobals: () => {
     theme?: import("../../index.js").ThemeType;
     themeOptions?: import("../../core/ThemeProvider/ThemeProvider.js").ThemeOptions;
     portalContainer?: HTMLElement | null;
-    future?: import("../../core/ThemeProvider/ThemeProvider.js").FutureOptions;
 } | undefined;
 /** Shows console error if ThemeProvider is not used */
 export declare const useThemeProviderWarning: (themeContext: React.ContextType<typeof ThemeContext>) => void;

package/esm/utils/providers/FutureFlagsProvider.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export type FutureOptions = {
+    /**
+     * @alpha
+     *
+     * If enabled, the theme resembles the future iTwinUI version's theme (including alphas) *whenever possible*.
+     *
+     * This is useful in making apps looks like future versions of iTwinUI to help with incremental adoption.
+     *
+     * **NOTE**: Since this is a theme bridge to *future* versions, the theme could have breaking changes.
+     */
+    themeBridge?: boolean;
+    ToggleSwitch?: {
+        /**
+         * When `true`, `className` and `style` will be applied on the
+         * input element, along with the rest of the DOM props.
+         *
+         * By default (without this flag), `className` and `style` get
+         * applied on the wrapper element, unless `wrapperProps` is also passed.
+         */
+        consistentPropsSpread?: boolean;
+    };
+};
+/**
+ * Hook to access future flags.
+ * @private
+ *
+ * @example
+ * ```jsx
+ * const themeBridge = useFutureFlag('themeBridge');
+ * ```
+ */
+export declare function useFutureFlag<K extends keyof FutureOptions>(key: K): FutureOptions[K];
+/** @private */
+export declare const FutureFlagsProvider: ({ children, value, }: React.PropsWithChildren<{
+    value: true | FutureOptions;
+}>) => React.JSX.Element;

package/esm/utils/providers/FutureFlagsProvider.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useSafeContext } from '../hooks/useSafeContext.js';
+let FutureFlagsContext = React.createContext({});
+export function useFutureFlag(key) {
+  let context = useSafeContext(FutureFlagsContext);
+  return context[key];
+}
+export const FutureFlagsProvider = ({ children, value }) => {
+  if (true === value)
+    value = {
+      themeBridge: true,
+    };
+  let context = React.useContext(FutureFlagsContext);
+  let combinedValue = {
+    ...context,
+    ...value,
+  };
+  return React.createElement(
+    FutureFlagsContext.Provider,
+    {
+      value: React.useMemo(
+        () => combinedValue,
+        [JSON.stringify(combinedValue)],
+      ),
+    },
+    children,
+  );
+};

package/esm/utils/providers/index.d.ts

@@ -1 +1,2 @@
+export * from './FutureFlagsProvider.js';
 export * from './HydrationProvider.js';

package/esm/utils/providers/index.js

@@ -1 +1,2 @@
+export * from './FutureFlagsProvider.js';
 export * from './HydrationProvider.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.18.3",
+  "version": "3.19.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -79,10 +79,10 @@
     "ux"
   ],
   "dependencies": {
-    "@floating-ui/react": "^0.27.6",
+    "@floating-ui/react": "^0.27.13",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
-    "@swc/helpers": "^0.5.15",
-    "@tanstack/react-virtual": "^3.13.6",
+    "@swc/helpers": "^0.5.17",
+    "@tanstack/react-virtual": "^3.13.12",
     "classnames": "^2.5.1",
     "react-table": "^7.8.0"
   },
@@ -108,7 +108,13 @@
   },
   "peerDependencies": {
     "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "react-dom": ">=17.0.0",
+    "@stratakit/foundations": ">=0.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@stratakit/foundations": {
+      "optional": true
+    }
   },
   "lint-staged": {
     "*.{tsx,ts,jsx,js}": [