react-timezone-select 3.2.2 → 3.2.4

package/README.md

@@ -1,11 +1,10 @@
 # 🌐⌚ react-timezone-select
 
-[![NPM Downloads](https://img.shields.io/npm/dm/react-timezone-select?style=flat-square)](https://www.npmjs.com/package/react-timezone-select)
 [![npm](https://img.shields.io/npm/v/react-timezone-select?style=flat-square)](https://www.npmjs.com/package/react-timezone-select)
-[![GitHub issues](https://img.shields.io/github/issues/ndom91/react-timezone-select?style=flat-square)](https://github.com/ndom91/react-timezone-select/issues)
+[![NPM Downloads](https://img.shields.io/npm/dm/react-timezone-select?style=flat-square)](https://www.npmjs.com/package/react-timezone-select)
 [![Skypack](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg?style=flat-square)](https://skypack.dev/view/react-timezone-select)
-[![Test CI](https://badgen.net/github/checks/ndom91/react-timezone-select/main?style=flat-square&label=tests)](https://github.com/ndom91/react-timezone-select/actions?query=workflow%3A%22Tests+CI%22)
-[![MIT](https://badgen.net/badge/license/MIT/blue?style=flat-square)](https://github.com/ndom91/react-timezone-select/blob/main/LICENSE)
+[![Test CI](https://flat.badgen.net/github/checks/ndom91/react-timezone-select/main?style=flat-square&label=tests)](https://github.com/ndom91/react-timezone-select/actions?query=workflow%3A%22Tests+CI%22)
+[![MIT](https://flat.badgen.net/badge/license/MIT/blue?style=flat-square)](https://github.com/ndom91/react-timezone-select/blob/main/LICENSE)
 
 Another react timezone select component, I know.. However this one has a few key benefits!
 
@@ -14,27 +13,31 @@ While looking around for a good option, I had trouble finding a timezone select
 1. Adjusted the choices automatically with Daylight Savings Time (DST)
 2. Didn't have a huge list of choices to scroll through when technically only 24 (ish) are necessary
 
-#### Demo: [ndom91.github.io/react-timezone-select](https://ndom91.github.io/react-timezone-select/)
-
+> [!IMPORTANT]
+>
+> ### Demo: [ndom91.github.io/react-timezone-select](https://ndom91.github.io/react-timezone-select/)
+>
 > This demo is also available in the `./examples` directory. Simply run `pnpm dev` in the root of the repository and the vite dev server will start, where you can then find the example app at [`localhost:3001`](http://localhost:3001).
 
 ## 🏗️ Installing
 
 ```bash
-// react-select is an optional peer dependency, unnecessary if using the hook
 npm install react-timezone-select react-select
 ```
 
+> [!CAUTION]
+> The package `react-select` is optional. It is unnecessary if you're only using [the hook](#-timezone-hook).
+
 ## 🔭 Usage
 
-```jsx
-import React, { useState } from 'react'
-import ReactDOM from 'react-dom'
-import TimezoneSelect, { type ITimezone } from 'react-timezone-select'
+```tsx
+import React, { useState } from "react"
+import ReactDOM from "react-dom"
+import TimezoneSelect, { type ITimezone } from "react-timezone-select"
 
 const App = () => {
   const [selectedTimezone, setSelectedTimezone] = useState<ITimezone>(
-    Intl.DateTimeFormat().resolvedOptions().timeZone
+    Intl.DateTimeFormat().resolvedOptions().timeZone,
   )
 
   return (
@@ -42,26 +45,23 @@ const App = () => {
       <h2>react-timezone-select</h2>
       <blockquote>Please make a selection</blockquote>
       <div className="select-wrapper">
-        <TimezoneSelect
-          value={selectedTimezone}
-          onChange={setSelectedTimezone}
-        />
+        <TimezoneSelect value={selectedTimezone} onChange={setSelectedTimezone} />
       </div>
       <h3>Output:</h3>
       <div
         style={{
-          backgroundColor: '#ccc',
-          padding: '20px',
-          margin: '20px auto',
-          borderRadius: '5px',
-          maxWidth: '600px',
+          backgroundColor: "#ccc",
+          padding: "20px",
+          margin: "20px auto",
+          borderRadius: "5px",
+          maxWidth: "600px",
         }}
       >
         <pre
           style={{
-            margin: '0 20px',
+            margin: "0 20px",
             fontWeight: 500,
-            fontFamily: 'monospace',
+            fontFamily: "monospace",
           }}
         >
           {JSON.stringify(selectedTimezone, null, 2)}
@@ -71,67 +71,109 @@ const App = () => {
   )
 }
 
-const rootElement = document.getElementById('root')
+const rootElement = document.getElementById("root")
 ReactDOM.render(<App />, rootElement)
 ```
 
-## 🪙 Tips
-
-### 👤 Default Users Timezone
-
-If you'd like the user's own timezone to be set as the initially selected option on render, we can make use of the new `Intl` browser API by setting the default state value to `Intl.DateTimeFormat().resolvedOptions().timeZone`.
-
-```jsx
-const [timezone, setTimezone] = useState(
-  Intl.DateTimeFormat().resolvedOptions().timeZone
-)
-```
-
-Thanks [@ndrwksr](https://github.com/ndom91/react-timezone-select/issues/25)
-
-### 🕒 Custom Timezones
+## 🎨 Timezone Hook
 
-You can append custom choices of your own, or fully replace the listed timezone options.
+By default, `react-timezone-select` uses [`react-select`](https://github.com/jedwatson/react-select) as underlying select component. If you'd like to bring your own select component, you can use the `useTimezoneSelect` hook instead of the `TimezoneSelect` component to render the timezones using your self-provided select component.
 
-The `timezones` prop takes a dictionary of timezones. Don't worry, we'll prepend the `(GMT...)` part, you just have to pass the city(s) or region(s) you want in your label.
+```tsx
+import { useTimezoneSelect, allTimezones } from "react-timezone-select"
 
-```jsx
-import TimezoneSelect, { type ITimezone, allTimezones } from 'react-timezone-select'
+const labelStyle = "original"
+const timezones = {
+  ...allTimezones,
+  "Europe/Berlin": "Frankfurt",
+}
 
-const [selectedTimezone, setSelectedTimezone] = useState<ITimezone>('Europe/Berlin')
+const customSelect = () => {
+  const { options, parseTimezone } = useTimezoneSelect({ labelStyle, timezones })
 
-<TimezoneSelect
-  value={selectedTimezone}
-  onChange={setSelectedTimezone}
-  timezones={{
-    ...allTimezones,
-    'America/Lima': 'Pittsburgh',
-    'Europe/Berlin': 'Frankfurt',
-  }}
-/>
+  return (
+    <select onChange={(e) => onChange(parseTimezone(e.currentTarget.value))}>
+      {options.map((option) => (
+        <option value={option.value}>{option.label}</option>
+      ))}
+    </select>
+  )
+}
 ```
 
-The above example will generate two additional choices in the select options, one with the label `'(GMT-5:00) Pittsburgh'` and another with `'(GMT+1:00) Frankfurt'`. You can omit spreading in the `allTimezones` object and then only your custom timezone options get rendered in the select component.
-
 ## 🕹️ Props
 
-- `value` - `string | Object` - Initial/current Timezone.
-```
-'America/Juneau' | {
+<table>
+  <tbody>
+    <tr>
+      <th>Prop</th>
+      <th>Type</th>
+      <th>Default</th>
+      <th>Note</th>
+    </tr>
+    <tr>
+      <td><code>value</code></td>
+      <td><code>string | ITimezoneOption<string, string></code></td>
+      <td>null</td>
+      <td>Initial/current Timezone</td>
+    </tr>
+    <tr>
+      <td><code>onBlur</code></td>
+      <td><code>() => void</code></td>
+      <td>null</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>onChange</code></td>
+      <td><code>(timezone: ITimezoneOption) => void</code></td>
+      <td>null</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>labelStyle</code></td>
+      <td><code>'original' | 'altName' | 'abbrev' | 'offsetHidden'</code></td>
+      <td><code>'original'</code></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>displayValue</code></td>
+      <td><code>'GMT' | 'UTC'</code></td>
+      <td><code>'GMT'</code></td>
+      <td>Prefix for the label (i.e. <code>"(GMT+2:00)"</code> or <code>"(UTC+2:00)"</code>)</td>
+    </tr>
+    <tr>
+      <td><code>timezones</code></td>
+      <td><code>Record<string,string></code></td>
+      <td><code>allTimezones</code></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>currentDatetime</code></td>
+      <td><code>Date | string</code></td>
+      <td>null</td>
+      <td>Override datetime used to calculate timezone values (alternative to current datetime), useful for calculating different summer / winter times, etc.</td>
+    </tr>
+  </tbody>
+</table>
+
+#### Example `value`s:
+
+```ts
+// string
+value='America/Juneau'
+// ITimezoneOption; i.e. `onChange` return value
+value={{
   value: 'America/Juneau'
   label: '(GMT-8:00) Alaska,
   abbrev: 'AHST',
   offset: -8,
   altName: 'Alaskan Standard Time'
-}
-```
-- `onBlur` - `() => void`
-- `onChange` - `(timezone) => void`
-- `labelStyle` - `'original' | 'altName' | 'abbrev' | 'offsetHidden'`
-- `displayValue` - `'GMT' | 'UTC'`
-- `timezones` - `Record<string,string>`
-- `currentDatetime` - `Date | string` - Set datetime used to calculate timezone values (alternative to current datetime) 
+}}
 ```
+
+#### Example `timezones`:
+
+```ts
 timezones={{
   ...allTimezones,
   'America/Lima': 'Pittsburgh',
@@ -139,37 +181,48 @@ timezones={{
 }}
 ```
 
-- Any other [`react-select`](https://github.com/jedwatson/react-select#props) props
+## ✨ Tips
 
-## 🎨 Custom Select component
+### 👤 Default Users Timezone
 
-By default, `react-timezone-select` uses [`react-select`](https://github.com/jedwatson/react-select) as underlying select component. If you'd like to bring your own select component, you can use the `useTimezoneSelect` hook instead of the `TimezoneSelect` component to render the timezones using your self-provided select component.
+If you'd like the user's own timezone to be set as the initially selected option on render, we can make use of the new `Intl` browser API by setting the default state value to `Intl.DateTimeFormat().resolvedOptions().timeZone`.
 
-```jsx
-import { useTimezoneSelect, allTimezones } from 'react-timezone-select'
+```tsx
+const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone)
+```
 
-const labelStyle = 'original'
-const timezones = {
-  ...allTimezones,
-  'Europe/Berlin': 'Frankfurt'
-}
+### 🕒 Custom Timezones
 
-const customSelect = () => {
-  const { options, parseTimezone } = useTimezoneSelect({ labelStyle, timezones })
+You can append custom choices of your own, or fully replace the listed timezone options.
 
-  return (
-    <select onChange={e => onChange(parseTimezone(e.currentTarget.value))}>
-      {options.map(option => (
-        <option value={option.value}>{option.label}</option>
-      ))}
-    </select>
-  )
-}
+The `timezones` prop takes a dictionary of timezones in the format of "`{ tzIdentifier: Label }`" ([Timezone Identifiers](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)). 
+
+```tsx
+import TimezoneSelect, { type ITimezone, allTimezones } from 'react-timezone-select'
+
+const [selectedTimezone, setSelectedTimezone] = useState<ITimezone>('Europe/Berlin')
+
+<TimezoneSelect
+  value={selectedTimezone}
+  onChange={setSelectedTimezone}
+  timezones={{
+    ...allTimezones,
+    'America/Lima': 'Pittsburgh',
+    'Europe/Berlin': 'Frankfurt',
+  }}
+/>
 ```
 
+The example above will include all original timezones and generate two additional choices:
+
+- `'(GMT-5:00) Pittsburgh'`
+- `'(GMT+1:00) Frankfurt'`
+
+We'll prepend the correct `(GMT...)` part to the generated label, you just have to provide the string you want in your label. Also, you can omit spreading in the `allTimezones` object for a select dropdown consisting of only your custom choices.
+
 ## 🚧 Contributing
 
-Pull requests are always welcome! Please stick to repo settings (prettier, eslint, etc.), and if adding new features, please consider adding test(s) and documentation where appropriate!
+Pull requests are always welcome! Please stick to repo formatting/linting settings, and if adding new features, please consider adding test(s) and documentation where appropriate!
 
 ## 🙏 Thanks
 
@@ -177,3 +230,7 @@ Pull requests are always welcome! Please stick to repo settings (prettier, eslin
 - [Carlos Matallin](https://github.com/matallo/)
 - [spacetime](https://github.com/spencermountain/spacetime)
 - [react-select](https://react-select.com)
+
+## 📝 License
+
+MIT

package/dist/index.d.ts

@@ -33,4 +33,4 @@ declare function useTimezoneSelect({ timezones, labelStyle, displayValue, curren
 };
 declare const TimezoneSelect: ({ value, onBlur, onChange, labelStyle, displayValue, timezones, currentDatetime, ...props }: Props) => react_jsx_runtime_js.JSX.Element;
 
-export { ILabelStyle, ITimezone, ITimezoneOption, Props, TimezoneSelectOptions, allTimezones, TimezoneSelect as default, useTimezoneSelect };
+export { type ILabelStyle, type ITimezone, type ITimezoneOption, type Props, type TimezoneSelectOptions, allTimezones, TimezoneSelect as default, useTimezoneSelect };

package/dist/index.js

@@ -1,3 +1,5 @@
+"use client"
+
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -119,7 +121,6 @@ var timezone_list_default = allTimezones;
 
 // src/index.tsx
 import { jsx } from "react/jsx-runtime";
-"use client";
 function useTimezoneSelect({
   timezones = timezone_list_default,
   labelStyle = "original",
@@ -167,15 +168,16 @@ function useTimezoneSelect({
         return null;
       }
     }).filter(Boolean).sort((a, b) => a.offset - b.offset);
-  }, [labelStyle, timezones]);
+  }, [labelStyle, timezones, currentDatetime]);
   const findFuzzyTz = (zone) => {
+    var _a, _b;
     let currentTime;
     try {
       currentTime = (currentDatetime ? spacetime(currentDatetime) : spacetime.now()).goto(zone);
     } catch (err) {
       currentTime = (currentDatetime ? spacetime(currentDatetime) : spacetime.now()).goto("GMT");
     }
-    return options.filter((tz) => tz.offset === currentTime.timezone().current.offset).map((tz) => {
+    return (_b = (_a = options.filter((tz) => tz.offset === currentTime.timezone().current.offset).map((tz) => {
       let score = 0;
       if (currentTime.timezones[tz.value.toLowerCase()] && !!currentTime.timezones[tz.value.toLowerCase()].dst === currentTime.timezone().hasDst) {
         if (tz.value.toLowerCase().indexOf(currentTime.tz.substring(currentTime.tz.indexOf("/") + 1)) !== -1) {
@@ -192,7 +194,7 @@ function useTimezoneSelect({
         score += 1;
       }
       return { tz, score };
-    }).sort((a, b) => b.score - a.score)[0].tz;
+    }).sort((a, b) => b.score - a.score)) == null ? void 0 : _a[0]) == null ? void 0 : _b.tz;
   };
   const parseTimezone = (zone) => {
     if (typeof zone === "object" && zone.value && zone.label)

package/package.json

@@ -1,20 +1,7 @@
 {
   "name": "react-timezone-select",
-  "version": "3.2.2",
+  "version": "3.2.4",
   "description": "Usable, dynamic React Timezone Select",
-  "scripts": {
-    "dev": "concurrently \"tsup src/index.tsx --format esm --watch\" \"cd example && pnpm dev\"",
-    "prepublishOnly": "pnpm run build",
-    "postpublish": "pnpm run build:example && npm run deploy",
-    "build": "tsup src/index.tsx --format esm --clean --dts",
-    "build:example": "cd example && pnpm run build",
-    "deploy": "gh-pages -d example/dist",
-    "pretest": "pnpm run build",
-    "test": "vitest",
-    "test:watch": "vitest --watch",
-    "test:ci": "pnpm run build && pnpm test",
-    "tsc": "tsc"
-  },
   "author": "Nico Domino <yo@ndo.dev>",
   "homepage": "https://github.com/ndom91/react-timezone-select",
   "repository": {
@@ -45,43 +32,43 @@
     }
   },
   "peerDependencies": {
-    "react": "^18 || ^17.0.1 || ^16",
-    "react-dom": "^18 || ^17.0.1 || ^16",
-    "react-select": "^5.7.3"
+    "react": "^16 || ^17.0.1 || ^18 || ^19.0.0-0",
+    "react-dom": "^16 || ^17.0.1 || ^18 || ^19.0.0-0",
+    "react-select": "^5.8.0"
   },
   "dependencies": {
-    "spacetime": "^7.4.8",
-    "timezone-soft": "^1.5.1"
+    "spacetime": "^7.6.0",
+    "timezone-soft": "^1.5.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.5",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.1.2",
-    "@types/jest": "^27.5.2",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
+    "@babel/core": "^7.24.5",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "concurrently": "^7.6.0",
-    "esbuild": "^0.16.17",
+    "concurrently": "^8.2.2",
+    "esbuild": "^0.21.3",
     "esbuild-jest": "^0.5.0",
-    "eslint": "^8.55.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "5.0.1",
-    "gh-pages": "^3.2.3",
+    "eslint-plugin-prettier": "5.1.3",
+    "gh-pages": "^6.1.1",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "simple-git-hooks": "^2.9.0",
-    "ts-jest": "^29.1.1",
-    "tsup": "^6.7.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.7",
-    "vite-tsconfig-paths": "^4.2.2",
-    "vitest": "^1.0.4"
+    "simple-git-hooks": "^2.11.1",
+    "ts-jest": "^29.1.2",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.6.0"
   },
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
@@ -110,5 +97,16 @@
     "*.{js,jsx,ts,tsx}": [
       "eslint --fix"
     ]
+  },
+  "scripts": {
+    "dev": "concurrently \"tsup src/index.tsx --format esm --watch\" \"cd example && pnpm dev\"",
+    "build": "tsup src/index.tsx --format esm --clean --dts && sed -i '1i \"use client\"\\n' dist/index.js",
+    "build:example": "cd example && pnpm run build",
+    "deploy": "gh-pages -d example/dist",
+    "pretest": "pnpm run build",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:ci": "pnpm run build && pnpm test",
+    "tsc": "tsc"
   }
-}
+}