@tamagui/web - npm Package Compare versions

Comparing version 1.17.0 to 1.18.0

dist/cjs/createComponent.js

@@ -693,2 +693,3 @@ "use strict";
     );
+    Component.styleable = styleable;
   }
@@ -695,0 +696,0 @@ function extractable(Component, conf) {

dist/cjs/hooks/useMedia.js

@@ -189,5 +189,7 @@ "use strict";
 }
-function useMediaPropsActive(props) {
+function useMediaPropsActive(props, opts) {
   const media = useMedia();
+  const shouldExpandShorthands = opts == null ? void 0 : opts.expandShorthands;
   return (0, import_react.useMemo)(() => {
+    const config = (0, import_config.getConfig)();
     const next = {};
@@ -197,3 +199,3 @@ const importancesUsed = {};
     for (let i = propNames.length - 1; i >= 0; i--) {
-      const key = propNames[i];
+      let key = propNames[i];
       const val = props[key];
@@ -207,3 +209,6 @@ if (key[0] === "$") {
           for (let j = subKeys.length; j--; j >= 0) {
-            const subKey = subKeys[j];
+            let subKey = subKeys[j];
+            if (shouldExpandShorthands) {
+              subKey = config.shorthands[subKey] || subKey;
+            }
             mergeMediaByImportance(next, mediaKey, subKey, val[subKey], importancesUsed);
@@ -213,2 +218,5 @@ }
       } else {
+        if (shouldExpandShorthands) {
+          key = config.shorthands[key] || key;
+        }
         mergeMediaByImportance(next, "", key, val, importancesUsed);
@@ -215,0 +223,0 @@ }

dist/cjs/index.js

@@ -70,3 +70,2 @@ "use strict";
 __reExport(src_exports, require("./contexts/ButtonNestingContext.js"), module.exports);
-__reExport(src_exports, require("./hooks/useIsTouchDevice.js"), module.exports);
 var import_useMedia = require("./hooks/useMedia.js");
@@ -78,2 +77,4 @@ __reExport(src_exports, require("./hooks/useTheme.js"), module.exports);
 __reExport(src_exports, require("./hooks/useAnimationDriver.js"), module.exports);
+__reExport(src_exports, require("./hooks/useIsTouchDevice.js"), module.exports);
+__reExport(src_exports, require("./hooks/useProps.js"), module.exports);
 __reExport(src_exports, require("./views/Slot.js"), module.exports);
@@ -142,3 +143,2 @@ __reExport(src_exports, require("./views/Stack.js"), module.exports);
   ...require("./contexts/ButtonNestingContext.js"),
-  ...require("./hooks/useIsTouchDevice.js"),
   ...require("./hooks/useTheme.js"),
@@ -149,2 +149,4 @@ ...require("./hooks/useThemeName.js"),
   ...require("./hooks/useAnimationDriver.js"),
+  ...require("./hooks/useIsTouchDevice.js"),
+  ...require("./hooks/useProps.js"),
   ...require("./views/Slot.js"),
@@ -151,0 +153,0 @@ ...require("./views/Stack.js"),

dist/esm/createComponent.js

@@ -666,2 +666,3 @@ import { jsx } from "react/jsx-runtime";
     );
+    Component.styleable = styleable;
   }
@@ -668,0 +669,0 @@ function extractable(Component, conf) {

dist/esm/hooks/useMedia.js

@@ -151,5 +151,7 @@ import { startTransition, useEffect, useMemo, useSyncExternalStore } from "react";
 }
-function useMediaPropsActive(props) {
+function useMediaPropsActive(props, opts) {
   const media = useMedia();
+  const shouldExpandShorthands = opts == null ? void 0 : opts.expandShorthands;
   return useMemo(() => {
+    const config = getConfig();
     const next = {};
@@ -159,3 +161,3 @@ const importancesUsed = {};
     for (let i = propNames.length - 1; i >= 0; i--) {
-      const key = propNames[i];
+      let key = propNames[i];
       const val = props[key];
@@ -169,3 +171,6 @@ if (key[0] === "$") {
           for (let j = subKeys.length; j--; j >= 0) {
-            const subKey = subKeys[j];
+            let subKey = subKeys[j];
+            if (shouldExpandShorthands) {
+              subKey = config.shorthands[subKey] || subKey;
+            }
             mergeMediaByImportance(next, mediaKey, subKey, val[subKey], importancesUsed);
@@ -175,2 +180,5 @@ }
       } else {
+        if (shouldExpandShorthands) {
+          key = config.shorthands[key] || key;
+        }
         mergeMediaByImportance(next, "", key, val, importancesUsed);
@@ -177,0 +185,0 @@ }

dist/esm/index.js

@@ -41,3 +41,2 @@ export * from "./Tamagui.js";
 export * from "./contexts/ButtonNestingContext.js";
-export * from "./hooks/useIsTouchDevice.js";
 import {
@@ -57,2 +56,4 @@ configureMedia,
 export * from "./hooks/useAnimationDriver.js";
+export * from "./hooks/useIsTouchDevice.js";
+export * from "./hooks/useProps.js";
 export * from "./views/Slot.js";
@@ -59,0 +60,0 @@ export * from "./views/Stack.js";

package.json

 {
   "name": "@tamagui/web",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "source": "src/index.ts",
@@ -30,9 +30,9 @@ "main": "dist/cjs",
   "dependencies": {
-    "@tamagui/compose-refs": "1.17.0",
-    "@tamagui/constants": "1.17.0",
-    "@tamagui/helpers": "1.17.0",
-    "@tamagui/normalize-css-color": "1.17.0",
-    "@tamagui/use-did-finish-ssr": "1.17.0",
-    "@tamagui/use-event": "1.17.0",
-    "@tamagui/use-force-update": "1.17.0"
+    "@tamagui/compose-refs": "1.18.0",
+    "@tamagui/constants": "1.18.0",
+    "@tamagui/helpers": "1.18.0",
+    "@tamagui/normalize-css-color": "1.18.0",
+    "@tamagui/use-did-finish-ssr": "1.18.0",
+    "@tamagui/use-event": "1.18.0",
+    "@tamagui/use-force-update": "1.18.0"
   },
@@ -43,3 +43,3 @@ "peerDependencies": {
   "devDependencies": {
-    "@tamagui/build": "1.17.0",
+    "@tamagui/build": "1.18.0",
     "@testing-library/react": "^13.4.0",
@@ -46,0 +46,0 @@ "csstype": "^3.0.10",

src/index.ts

@@ -46,4 +46,2 @@ export * from './Tamagui.js'
 
-export * from './hooks/useIsTouchDevice.js'
-
 export {
@@ -63,2 +61,4 @@ configureMedia,
 export * from './hooks/useAnimationDriver.js'
+export * from './hooks/useIsTouchDevice.js'
+export * from './hooks/useProps.js'
 
@@ -65,0 +65,0 @@ export * from './views/Slot.js'

types/hooks/useMedia.d.ts

@@ -21,2 +21,5 @@ import type { MediaQueries, MediaQueryKey, MediaQueryObject, MediaQueryState, TamaguiInternalConfig } from '../types.js';
 /**
+ *
+ * @deprecated use useProps instead which is the same but also expands shorthands (which you can disable)
+ *
  * Useful for more complex components that need access to the currently active props,
@@ -28,3 +31,5 @@ * accounting for the currently active media queries.
  * */
-export declare function useMediaPropsActive<A extends Object>(props: A): {
+export declare function useMediaPropsActive<A extends Object>(props: A, opts?: {
+    expandShorthands?: boolean;
+}): {
     [Key in keyof A extends `$${string}` ? never : keyof A]?: A[Key];
@@ -31,0 +36,0 @@ };

types/index.d.ts

@@ -35,3 +35,2 @@ export * from './Tamagui.js';
 export * from './contexts/ButtonNestingContext.js';
-export * from './hooks/useIsTouchDevice.js';
 export { configureMedia, getMedia, mediaState, useMedia, useMediaPropsActive, mediaObjectToString, mediaQueryConfig, } from './hooks/useMedia.js';
@@ -43,2 +42,4 @@ export * from './hooks/useTheme.js';
 export * from './hooks/useAnimationDriver.js';
+export * from './hooks/useIsTouchDevice.js';
+export * from './hooks/useProps.js';
 export * from './views/Slot.js';
@@ -45,0 +46,0 @@ export * from './views/Stack.js';

types/types.d.ts

@@ -478,2 +478,6 @@ import type { StyleObject } from '@tamagui/helpers';
 export type TextProps = TextNonStyleProps & TextStyleProps;
+type Styleable<Props, Ref> = <CustomProps extends Object, X extends FunctionComponent<Props & CustomProps> = FunctionComponent<Props & CustomProps>>(a: X) => ReactComponentWithRef<CustomProps & Omit<Props, keyof CustomProps>, Ref> & {
+    staticConfig: StaticConfigParsed;
+    styleable: Styleable<Props, Ref>;
+};
 export type TamaguiComponent<Props = any, Ref = any, BaseProps = {}, VariantProps = {}, ParentStaticProperties = {}> = ReactComponentWithRef<Props, Ref> & StaticComponentObject<Props, Ref> & ParentStaticProperties;
@@ -484,3 +488,3 @@ type StaticComponentObject<Props, Ref> = {
     extractable: <X>(a: X, opts?: Partial<StaticConfig>) => X;
-    styleable: <CustomProps extends Object, X extends FunctionComponent<Props & CustomProps> = FunctionComponent<Props & CustomProps>>(a: X) => ReactComponentWithRef<CustomProps & Omit<Props, keyof CustomProps>, Ref>;
+    styleable: Styleable<Props, Ref>;
 };
@@ -487,0 +491,0 @@ export type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>> & {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1427851

increased by0.48%

Number of package files

777

increased by1.17%

Lines of code

29600

increased by0.49%

Dependency changes

• + Added@tamagui/compose-refs@1.18.0(transitive)

• + Added@tamagui/constants@1.18.0(transitive)

• + Added@tamagui/helpers@1.18.0(transitive)

• + Added@tamagui/normalize-css-color@1.18.0(transitive)

• + Added@tamagui/simple-hash@1.18.0(transitive)

• + Added@tamagui/use-did-finish-ssr@1.18.0(transitive)

• + Added@tamagui/use-event@1.18.0(transitive)

• + Added@tamagui/use-force-update@1.18.0(transitive)

• - Removed@tamagui/compose-refs@1.17.0(transitive)

• - Removed@tamagui/constants@1.17.0(transitive)

• - Removed@tamagui/helpers@1.17.0(transitive)

• - Removed@tamagui/normalize-css-color@1.17.0(transitive)

• - Removed@tamagui/simple-hash@1.17.0(transitive)

• - Removed@tamagui/use-did-finish-ssr@1.17.0(transitive)

• - Removed@tamagui/use-event@1.17.0(transitive)

• - Removed@tamagui/use-force-update@1.17.0(transitive)

• Updated@tamagui/compose-refs@1.18.0

• Updated@tamagui/constants@1.18.0

• Updated@tamagui/helpers@1.18.0

• Updated@tamagui/normalize-css-color@1.18.0

• Updated@tamagui/use-did-finish-ssr@1.18.0

• Updated@tamagui/use-event@1.18.0

• Updated@tamagui/use-force-update@1.18.0