@automattic/date-range-picker 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+## 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.
+- Packaging: move `@wordpress/components`, `@wordpress/compose`, `@wordpress/date`, `@wordpress/i18n`, and `@wordpress/icons` to `peerDependencies` (with `>=` ranges) to prevent duplicate installs and to accommodate hosts pinned to newer `@wordpress/*` majors.
+- Packaging: stop shipping `src/test/**` and `dist/*.tsbuildinfo` in the published tarball.
+- Packaging: drop unused `tslib` runtime dependency.
+- Styles: add sensible fallbacks (`#fff`, `#1e1e1e`, `#949494`) to the dashboard CSS custom properties so the picker renders correctly outside the Calypso dashboard shell.
+- Docs: add a "Using outside Calypso" section to the README documenting peer-deps, the required `@automattic/ui/style.css` import, and the themable CSS custom properties.
+
+## 1.0.1
+
+- Fix packaging: include `style.scss` in `dist/esm/` and `dist/cjs/` so the compiled `import './style.scss'` resolves for consumers that don't use the `calypso:src` exports condition.
+
+## 1.0.0
+
+- Initial release ([#110712](https://github.com/Automattic/wp-calypso/pull/110712))

package/README.md

@@ -11,19 +11,6 @@ site-day handling.
 npm install @automattic/date-range-picker
 ```
 
-Consumers must also load the calendar styles from `@automattic/ui` and import
-the picker's own stylesheet. The package ships SCSS source; compile it via
-your own build pipeline (sass-loader, etc.):
-
-```ts
-import '@automattic/ui/style.css';
-import '@automattic/date-range-picker/src/style.scss';
-```
-
-The SCSS expects `$grid-unit-*`, `$radius-small`, and `$gray-600` from
-`@wordpress/base-styles` to be in scope (either via a global `@import` or via
-sass-loader's `additionalData`).
-
 ## Usage
 
 ```tsx
@@ -44,6 +31,11 @@ function Example() {
 }
 ```
 
+The picker's stylesheet is side-effect imported from the component module, so a
+plain `import { DateRangePicker }` is enough — there's no separate CSS import to
+remember. The package ships pre-compiled CSS in `dist/`, so consumers don't
+need a Sass loader.
+
 ### Props
 
 | Prop                    | Type                                              | Default          | Description                                                                                                                |
@@ -73,6 +65,51 @@ import {
 } from '@automattic/date-range-picker';
 ```
 
+## Using outside Calypso
+
+The package is published to npm and works for any React app — Jetpack, custom
+WordPress plugins, etc. A few things to know:
+
+### Required peer dependencies
+
+The host application must install these alongside the picker:
+
+- `react` and `react-dom` (`^18.3.1`)
+- `@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`)
+
+These are peer dependencies (not bundled) so that the host can control the
+exact version and avoid duplicate copies of WordPress packages — multiple
+copies of `@wordpress/compose` will silently break hooks shared across the
+picker and the host.
+
+### Calendar styles
+
+The picker renders `@automattic/ui`'s `DateRangeCalendar`. Make sure the
+host loads its stylesheet once:
+
+```ts
+import '@automattic/ui/style.css';
+```
+
+### Skinning via CSS custom properties
+
+The picker honours these CSS custom properties on a wrapping element, with
+sensible defaults when they're not set:
+
+| Custom property                         | Default       | Purpose                                |
+| --------------------------------------- | ------------- | -------------------------------------- |
+| `--dashboard-surface__background-color` | `#fff`        | Trigger button background.             |
+| `--dashboard__text-color`               | `#1e1e1e`     | Trigger button text and icon colour.   |
+| `--dashboard-field__border-color`       | `#949494`     | Trigger button border colour.          |
+
+Set them on `:root` (or any ancestor of the picker) to theme it. The Calypso
+dashboard shell sets these globally; outside Calypso, set whichever you'd like
+to override.
+
 ## Translations
 
 The package uses `@wordpress/i18n` directly. Strings are extracted with the

package/dist/cjs/date-range-picker.js

@@ -10,7 +10,7 @@ const react_1 = require("react");
 const date_range_content_1 = require("./date-range-content");
 const datetime_1 = require("./datetime");
 const utils_1 = require("./utils");
-require("./style.scss");
+require("./style.css");
 function DateRangePicker({ start, end, onChange, gmtOffset, timezoneString, locale, disableFuture = true, disabledBefore, defaultFallbackPreset = 'last-7-days', hiddenPresets, inputsProps, }) {
     const isSmall = (0, compose_1.useMediaQuery)('(max-width: 600px)');
     // Use a wider breakpoint to decide when two calendars can fit comfortably

package/dist/cjs/style.css

@@ -0,0 +1,116 @@
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * 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.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/* Popover sizing */
+.daterange-popover .components-popover__content {
+  overflow: visible;
+  width: auto;
+  max-width: calc(100vw - 48px);
+}
+
+/* Body rows */
+.daterange-inputs {
+  margin-bottom: 12px;
+}
+
+.daterange-input__field.components-button {
+  background: var(--dashboard-surface__background-color, #fff);
+  padding: 4px 4px 4px 8px;
+  box-shadow: none;
+  border-radius: 2px;
+  border: 1px solid var(--dashboard-field__border-color, #949494);
+}
+.daterange-input__field svg {
+  color: var(--dashboard__text-color, #1e1e1e);
+  padding: 4px;
+}
+.daterange-input__text {
+  color: var(--dashboard__text-color, #1e1e1e);
+  padding: 0 4px;
+}
+
+/* Mobile */
+@media (max-width: 600px) {
+  .daterange-calendar {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+}
+/* Medium screens: presets and calendar should be centered with no awkward right margin */
+@media (min-width: 601px) and (max-width: 899px) {
+  .daterange-body {
+    justify-content: space-between !important;
+  }
+}
+/* Desktop presets column: ensure a reasonable width to avoid awkward wrapping */
+@media (min-width: 601px) {
+  .daterange-presets {
+    min-width: 240px;
+  }
+}
+/* Preset list items: keep buttons full-width and avoid awkward line wrapping */
+.preset-listbox__item .components-button {
+  width: 100%;
+  justify-content: flex-start;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Hide native date picker icons inside our date inputs (visual only) */
+.daterange-inputs input[type=date]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+.daterange-inputs input[type=date]::-webkit-clear-button {
+  display: none;
+}

package/dist/esm/date-range-picker.js

@@ -7,7 +7,7 @@ import { useMemo, useState } from 'react';
 import { DateRangeContent } from './date-range-content';
 import { parseYmdLocal, formatYmd, formatSiteYmd } from './datetime';
 import { formatLabel } from './utils';
-import './style.scss';
+import './style.css';
 export function DateRangePicker({ start, end, onChange, gmtOffset, timezoneString, locale, disableFuture = true, disabledBefore, defaultFallbackPreset = 'last-7-days', hiddenPresets, inputsProps, }) {
     const isSmall = useMediaQuery('(max-width: 600px)');
     // Use a wider breakpoint to decide when two calendars can fit comfortably

package/dist/esm/style.css

@@ -0,0 +1,116 @@
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * 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.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/* Popover sizing */
+.daterange-popover .components-popover__content {
+  overflow: visible;
+  width: auto;
+  max-width: calc(100vw - 48px);
+}
+
+/* Body rows */
+.daterange-inputs {
+  margin-bottom: 12px;
+}
+
+.daterange-input__field.components-button {
+  background: var(--dashboard-surface__background-color, #fff);
+  padding: 4px 4px 4px 8px;
+  box-shadow: none;
+  border-radius: 2px;
+  border: 1px solid var(--dashboard-field__border-color, #949494);
+}
+.daterange-input__field svg {
+  color: var(--dashboard__text-color, #1e1e1e);
+  padding: 4px;
+}
+.daterange-input__text {
+  color: var(--dashboard__text-color, #1e1e1e);
+  padding: 0 4px;
+}
+
+/* Mobile */
+@media (max-width: 600px) {
+  .daterange-calendar {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+}
+/* Medium screens: presets and calendar should be centered with no awkward right margin */
+@media (min-width: 601px) and (max-width: 899px) {
+  .daterange-body {
+    justify-content: space-between !important;
+  }
+}
+/* Desktop presets column: ensure a reasonable width to avoid awkward wrapping */
+@media (min-width: 601px) {
+  .daterange-presets {
+    min-width: 240px;
+  }
+}
+/* Preset list items: keep buttons full-width and avoid awkward line wrapping */
+.preset-listbox__item .components-button {
+  width: 100%;
+  justify-content: flex-start;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Hide native date picker icons inside our date inputs (visual only) */
+.daterange-inputs input[type=date]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+.daterange-inputs input[type=date]::-webkit-clear-button {
+  display: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/date-range-picker",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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,8 +20,7 @@
     }
   },
   "sideEffects": [
-    "*.css",
-    "*.scss"
+    "*.css"
   ],
   "repository": {
     "type": "git",
@@ -34,29 +33,52 @@
   "bugs": "https://github.com/Automattic/wp-calypso/issues",
   "files": [
     "dist",
-    "src"
+    "src",
+    "!dist/**/*.tsbuildinfo",
+    "!src/test"
   ],
   "types": "dist/types",
   "scripts": {
     "clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist",
-    "build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
+    "build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && node ./bin/build-styles.js",
     "prepack": "yarn run clean && yarn run build"
   },
   "dependencies": {
     "@automattic/ui": "^1.0.2",
-    "@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",
-    "date-fns": "^4.1.0",
-    "tslib": "^2.8.1"
+    "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"
   },
+  "peerDependenciesMeta": {
+    "@wordpress/components": {
+      "optional": false
+    },
+    "@wordpress/compose": {
+      "optional": false
+    },
+    "@wordpress/date": {
+      "optional": false
+    },
+    "@wordpress/i18n": {
+      "optional": false
+    },
+    "@wordpress/icons": {
+      "optional": false
+    },
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
   "devDependencies": {
     "@automattic/calypso-typescript-config": "^1.0.0",
     "@testing-library/dom": "^10.4.1",
@@ -64,8 +86,17 @@
     "@testing-library/react": "^16.3.0",
     "@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",
     "jest": "^29.7.0",
     "mockdate": "^2.0.5",
-    "typescript": "^5.8.3"
+    "postcss": "^8.5.3",
+    "sass": "1.77.8",
+    "typescript": "^5.8.3",
+    "webpack": "^5.99.8"
   }
 }

package/src/style.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as v;
+
 /* Popover sizing */
 .daterange-popover .components-popover__content {
 	overflow: visible;
@@ -14,20 +16,20 @@
 	&__field {
 		// The extra class is to make sure it overrides the default button styles
 		&.components-button {
-			background: var( --dashboard-surface__background-color );
-			padding: $grid-unit-05 $grid-unit-05 $grid-unit-05 $grid-unit-10;
+			background: var(--dashboard-surface__background-color, #fff);
+			padding: v.$grid-unit-05 v.$grid-unit-05 v.$grid-unit-05 v.$grid-unit-10;
 			box-shadow: none;
-			border-radius: $radius-small;
-			border: 1px solid var(--dashboard-field__border-color, $gray-600);
+			border-radius: v.$radius-small;
+			border: 1px solid var(--dashboard-field__border-color, #{v.$gray-600});
 		}
 		svg {
-			color: var(--dashboard__text-color);
-			padding: $grid-unit-05;
+			color: var(--dashboard__text-color, #{v.$gray-900});
+			padding: v.$grid-unit-05;
 		}
 	}
 	&__text {
-		color: var(--dashboard__text-color);
-		padding: 0 $grid-unit-05;
+		color: var(--dashboard__text-color, #{v.$gray-900});
+		padding: 0 v.$grid-unit-05;
 	}
 }
 

package/src/types.d.ts

@@ -1 +1,2 @@
 declare module '*.scss';
+declare module '*.css';