@automattic/date-range-picker 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.0.4
+
+- Declare React 19 compatibility for package consumers (#111721).
+
+## 1.0.3
+
+- Fix: restore `*.scss` in `sideEffects` so Calypso (which consumes the package via `calypso:src`) doesn't tree-shake the `import './style.scss'` and lose all of the picker's styles.
+
 ## 1.0.2
 
 - Packaging: pre-compile SCSS to CSS in `dist/{esm,cjs}/style.css` so external consumers no longer need a Sass loader. SCSS variables from `@wordpress/base-styles` are resolved at build time.

package/README.md

@@ -75,7 +75,7 @@ WordPress plugins, etc. A few things to know:
 The host application must install these alongside the picker:
 
 - `react` and `react-dom` (`^18.3.1`)
-- `@wordpress/components` (`>=32.1.0`)
+- `@wordpress/components` (`>=33.1.0`)
 - `@wordpress/compose` (`>=7.23.0`)
 - `@wordpress/date` (`>=5.23.0`)
 - `@wordpress/i18n` (`>=5.23.0`)

package/dist/cjs/style.css

@@ -1,3 +1,6 @@
+/**
+ * Colors
+ */
 /**
  * SCSS Variables.
  *
@@ -5,15 +8,6 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
-/**
- * Colors
- */
 /**
  * Fonts & basic variables.
  */

package/dist/esm/style.css

@@ -1,3 +1,6 @@
+/**
+ * Colors
+ */
 /**
  * SCSS Variables.
  *
@@ -5,15 +8,6 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
-/**
- * Colors
- */
 /**
  * Fonts & basic variables.
  */

package/dist/types/utils.d.ts

@@ -1,38 +1,38 @@
 export type PresetId = 'today' | 'yesterday' | 'last-7-days' | 'last-30-days' | 'last-90-days' | 'month-to-date' | 'last-12-months' | 'year-to-date' | 'last-3-years' | 'custom';
 export declare const presetDefs: readonly [{
     readonly id: "today";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Today">;
 }, {
     readonly id: "yesterday";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Yesterday">;
 }, {
     readonly id: "last-7-days";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Last 7 days">;
 }, {
     readonly id: "last-30-days";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Last 30 days">;
 }, {
     readonly id: "last-90-days";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Last 90 days">;
 }, {
     readonly id: "month-to-date";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Month to date">;
 }, {
     readonly id: "last-12-months";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Last 12 months">;
 }, {
     readonly id: "year-to-date";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Year to date">;
 }, {
     readonly id: "last-3-years";
-    readonly label: string;
+    readonly label: import("@wordpress/i18n").TransformedText<"Last 3 years">;
 }];
 export declare function computePresetRange(preset: PresetId, baseDate: Date): {
     from: Date;
     to: Date;
 } | undefined;
 export declare function getActivePresetId(from?: Date, to?: Date, baseDate?: Date): PresetId | undefined;
-export declare function formatLabel(start: Date, end: Date, locale: string): string;
+export declare function formatLabel(start: Date, end: Date, locale: string): import("@wordpress/i18n").TransformedText<"%1$s to %2$s">;
 export declare function isLast7Days(range: {
     start: Date;
     end: Date;

package/dist/types/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAkCA,MAAM,MAAM,QAAQ,GACjB,OAAO,GACP,WAAW,GACX,aAAa,GACb,cAAc,GACd,cAAc,GACd,eAAe,GACf,gBAAgB,GAChB,cAAc,GACd,cAAc,GACd,QAAQ,CAAC;AAEZ,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUmE,CAAC;AAE3F,wBAAgB,kBAAkB,CAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI;;;cA0BnE;AAED,wBAAgB,iBAAiB,CAAE,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,IAAI,GAAI,QAAQ,GAAG,SAAS,CAiEjG;AAGD,wBAAgB,WAAW,CAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,UAOlE;AAGD,wBAAgB,WAAW,CAC1B,KAAK,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,EACjC,cAAc,CAAC,EAAE,MAAM,EACvB,SAAS,CAAC,EAAE,MAAM,GAChB,OAAO,CAKT"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAkCA,MAAM,MAAM,QAAQ,GACjB,OAAO,GACP,WAAW,GACX,aAAa,GACb,cAAc,GACd,cAAc,GACd,eAAe,GACf,gBAAgB,GAChB,cAAc,GACd,cAAc,GACd,QAAQ,CAAC;AAEZ,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUmE,CAAC;AAE3F,wBAAgB,kBAAkB,CAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI;;;cA0BnE;AAED,wBAAgB,iBAAiB,CAAE,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,IAAI,GAAI,QAAQ,GAAG,SAAS,CAiEjG;AAGD,wBAAgB,WAAW,CAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,6DAOlE;AAGD,wBAAgB,WAAW,CAC1B,KAAK,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,EACjC,cAAc,CAAC,EAAE,MAAM,EACvB,SAAS,CAAC,EAAE,MAAM,GAChB,OAAO,CAKT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/date-range-picker",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "A date-range picker built on top of @automattic/ui's DateRangeCalendar, with timezone-aware site-day handling, preset shortcuts, and accessible inputs.",
   "homepage": "https://github.com/Automattic/wp-calypso",
   "license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
     }
   },
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "*.scss"
   ],
   "repository": {
     "type": "git",
@@ -44,17 +45,17 @@
     "prepack": "yarn run clean && yarn run build"
   },
   "dependencies": {
-    "@automattic/ui": "^1.0.2",
+    "@automattic/ui": "^1.0.3",
     "date-fns": "^4.1.0"
   },
   "peerDependencies": {
-    "@wordpress/components": ">=32.1.0",
-    "@wordpress/compose": ">=7.23.0",
-    "@wordpress/date": ">=5.23.0",
-    "@wordpress/i18n": ">=5.23.0",
-    "@wordpress/icons": ">=10.23.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "@wordpress/components": ">=35.0.0",
+    "@wordpress/compose": ">=8.1.0",
+    "@wordpress/date": ">=5.48.0",
+    "@wordpress/i18n": ">=6.21.0",
+    "@wordpress/icons": ">=13.3.0",
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@wordpress/components": {
@@ -83,20 +84,20 @@
     "@automattic/calypso-typescript-config": "^1.0.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^18.3.18",
-    "@wordpress/base-styles": "^5.23.0",
-    "@wordpress/components": "^32.1.0",
-    "@wordpress/compose": "7.23.0",
-    "@wordpress/date": "5.23.0",
-    "@wordpress/i18n": "^5.23.0",
-    "@wordpress/icons": "^10.23.0",
+    "@wordpress/base-styles": "^9.1.0",
+    "@wordpress/components": "^35.0.0",
+    "@wordpress/compose": "patch:@wordpress/compose@npm%3A8.1.0#~/.yarn/patches/@wordpress-compose-npm-8.1.0-ea108e3129.patch",
+    "@wordpress/date": "5.48.0",
+    "@wordpress/i18n": "^6.21.0",
+    "@wordpress/icons": "^13.3.0",
     "jest": "^29.7.0",
     "mockdate": "^2.0.5",
     "postcss": "^8.5.3",
     "sass": "1.77.8",
-    "typescript": "^5.8.3",
+    "typescript": "^6.0.3",
     "webpack": "^5.99.8"
   }
 }

package/src/style.scss

@@ -1,3 +1,4 @@
+@use "@wordpress/base-styles/colors" as colors;
 @use "@wordpress/base-styles/variables" as v;
 
 /* Popover sizing */
@@ -20,15 +21,15 @@
 			padding: v.$grid-unit-05 v.$grid-unit-05 v.$grid-unit-05 v.$grid-unit-10;
 			box-shadow: none;
 			border-radius: v.$radius-small;
-			border: 1px solid var(--dashboard-field__border-color, #{v.$gray-600});
+			border: 1px solid var(--dashboard-field__border-color, #{colors.$gray-600});
 		}
 		svg {
-			color: var(--dashboard__text-color, #{v.$gray-900});
+			color: var(--dashboard__text-color, #{colors.$gray-900});
 			padding: v.$grid-unit-05;
 		}
 	}
 	&__text {
-		color: var(--dashboard__text-color, #{v.$gray-900});
+		color: var(--dashboard__text-color, #{colors.$gray-900});
 		padding: 0 v.$grid-unit-05;
 	}
 }