react-timezone-select 1.5.4 → 1.5.6

package/README.md

@@ -16,7 +16,7 @@ While looking around for a good option, I had trouble finding a timezone select
 
 #### 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 `npm run dev` in the root of the repository after installing everything in the examples subdirectory and snowpack dev will begin, where you can find the demo at [`localhost:8080`](http://localhost:8080).
+> 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).
 
 We also have some **more examples** available on Codesandbox using this component with the datetime library `spacetime` ([example](https://codesandbox.io/s/react-timezone-select-usage-z37hf)) as well as with `moment` ([example](https://codesandbox.io/s/react-timezone-select-usage-moment-5n6vn)), as well as in Typescript using the new `Intl` browser API ([example](https://codesandbox.io/s/react-timezone-select-typescript-8lsv3?file=/src/App.tsx)) showing how one might use this component in a real application.
 
@@ -34,7 +34,9 @@ import ReactDOM from 'react-dom'
 import TimezoneSelect from 'react-timezone-select'
 
 const App = () => {
-  const [selectedTimezone, setSelectedTimezone] = useState({})
+  const [selectedTimezone, setSelectedTimezone] =useState(
+    Intl.DateTimeFormat().resolvedOptions().timeZone
+  )
 
   return (
     <div className="App">
@@ -86,22 +88,7 @@ const [timezone, setTimezone] = useState(
 )
 ```
 
-Thanks [@ndrwksr](https://github.com/ndom91/react-timezone-select/issues/25)!
-
-### ⚠ Next.js Users
-
-**Update**: Starting with `v1.3.0` you DO NOT need `next-transpile-modules` to use this library with Next.js anymore!
-
-For now, Next.js isn't great about handling ESM packages. Until this gets fixed, there is a workaround for using this and other ESM packages via [`next-transpile-modules`](https://www.npmjs.com/package/next-transpile-modules).
-
-```js
-// next.config.js
-const withTM = require('next-transpile-modules')(['react-timezone-select'])
-
-module.exports = withTM({
-  // ...further Next.js config
-})
-```
+Thanks [@ndrwksr](https://github.com/ndom91/react-timezone-select/issues/25)
 
 ### 🕒 Custom Timezones
 
@@ -111,7 +98,7 @@ The `timezones` prop takes a dictionary of timezones. Don't worry, we'll prepend
 
 ```jsx
 import TimezoneSelect, { allTimezones } from 'react-timezone-select'
-;<TimezoneSelect
+<TimezoneSelect
   value={selectedTimezone}
   onChange={setSelectedTimezone}
   timezones={{
@@ -126,26 +113,34 @@ The above example will generate two additional choices in the select options, on
 
 ## 🕹️ Props
 
-- `value` - Initial Timezone `string`, i.e. `'Europe/Amsterdam'` or the full object from the onChange function: `{ value: string, label: string, abbrev: string, altName: string }`
+- `value` - `string | Object` - Initial/current Timezone.
+```
+'America/Juneau' | {
+  value: 'America/Juneau'
+  label: '(GMT-8:00) Alaska,
+  abbrev: 'AHST',
+  offset: -8,
+  altName: 'Alaskan Standard Time'
+}
+```
 - `onBlur` - `() => void`
 - `onChange` - `(timezone) => void`
-  - Example `timezone` parameter:
-  ```
-   {
-     value: 'America/Juneau'
-     label: '(GMT-8:00) Alaska,
-     abbrev: 'AHST',
-     offset: -8,
-     altName: 'Alaskan Standard Time'
-   }
-  ```
 - `labelStyle` - `'original' | 'altName' | 'abbrev'`
-- `timezones` - Custom Timezone Object
+- `timezones` - `Record<string,string>`
+```
+timezones={{
+  ...allTimezones,
+  'America/Lima': 'Pittsburgh',
+  'Europe/Berlin': 'Frankfurt',
+}}
+```
+
+- `maxAbbrLength` - `number` - Truncate `abbrev` labelStyles string to length
 - Any other [`react-select`](https://github.com/jedwatson/react-select#props) props
 
 ## 🚧 Contributing
 
-Pull requests are always welcome! Please stick to the `prettier` settings, and if adding new features, please consider adding test(s) and documentation where appropriate!
+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!
 
 ## 🙏 Thanks
 

package/dist/index.cjs

@@ -129,48 +129,47 @@ var TimezoneSelect = ({
   onChange,
   labelStyle = "original",
   timezones,
+  maxAbbrLength = 4,
   ...props
 }) => {
   if (!timezones)
     timezones = timezone_list_default;
   const getOptions = React.useMemo(() => {
     return Object.entries(timezones).reduce((selectOptions, zone) => {
-      const now = import_spacetime.default.now(zone[0]);
-      const tz = now.timezone();
-      const tzStrings = (0, import_timezone_soft.default)(zone[0]);
-      let label = "";
-      let abbr = now.isDST() ? (
-        // @ts-expect-error
-        tzStrings[0].daylight?.abbr
-      ) : (
-        // @ts-expect-error
-        tzStrings[0].standard?.abbr
-      );
-      let altName = now.isDST() ? tzStrings[0].daylight?.name : tzStrings[0].standard?.name;
-      const min = tz.current.offset * 60;
-      const hr = `${min / 60 ^ 0}:` + (min % 60 === 0 ? "00" : Math.abs(min % 60));
-      const prefix = `(GMT${hr.includes("-") ? hr : `+${hr}`}) ${zone[1]}`;
-      switch (labelStyle) {
-        case "original":
-          label = prefix;
-          break;
-        case "altName":
-          label = `${prefix} ${altName?.length ? `(${altName})` : ""}`;
-          break;
-        case "abbrev":
-          label = `${prefix} ${abbr?.length < 5 ? `(${abbr})` : ""}`;
-          break;
-        default:
-          label = `${prefix}`;
+      try {
+        const now = import_spacetime.default.now(zone[0]);
+        const tz = now.timezone();
+        const tzStrings = (0, import_timezone_soft.default)(zone[0]);
+        let label = "";
+        let abbr = now.isDST() ? tzStrings[0].daylight.abbr : tzStrings[0].standard.abbr;
+        let altName = now.isDST() ? tzStrings[0].daylight.name : tzStrings[0].standard.name;
+        const min = tz.current.offset * 60;
+        const hr = `${min / 60 ^ 0}:` + (min % 60 === 0 ? "00" : Math.abs(min % 60));
+        const prefix = `(GMT${hr.includes("-") ? hr : `+${hr}`}) ${zone[1]}`;
+        switch (labelStyle) {
+          case "original":
+            label = prefix;
+            break;
+          case "altName":
+            label = `${prefix} ${altName?.length ? `(${altName})` : ""}`;
+            break;
+          case "abbrev":
+            label = `${prefix} (${abbr.substring(0, maxAbbrLength)})`;
+            break;
+          default:
+            label = `${prefix}`;
+        }
+        selectOptions.push({
+          value: tz.name,
+          label,
+          offset: tz.current.offset,
+          abbrev: abbr,
+          altName
+        });
+        return selectOptions;
+      } catch {
+        return selectOptions;
       }
-      selectOptions.push({
-        value: tz.name,
-        label,
-        offset: tz.current.offset,
-        abbrev: abbr,
-        altName
-      });
-      return selectOptions;
     }, []).sort((a, b) => a.offset - b.offset);
   }, [labelStyle, timezones]);
   const handleChange = (tz) => {

package/dist/index.d.ts

@@ -18,10 +18,19 @@ interface Props
   labelStyle?: ILabelStyle
   onChange?: (timezone: ITimezoneOption) => void
   timezones?: ICustomTimezone
+  maxAbbrLength?: number
 }
 
 declare const allTimezones: ICustomTimezone;
 
-declare const TimezoneSelect: ({ value, onBlur, onChange, labelStyle, timezones, ...props }: Props) => JSX.Element;
+declare const TimezoneSelect: ({
+  value,
+  onBlur,
+  onChange,
+  labelStyle,
+  timezones,
+  maxAbbrLength,
+  ...props
+}: Props) => JSX.Element
 
 export { ILabelStyle, ITimezone, ITimezoneOption, Props, allTimezones, TimezoneSelect as default };

package/dist/index.js

@@ -95,48 +95,47 @@ var TimezoneSelect = ({
   onChange,
   labelStyle = "original",
   timezones,
+  maxAbbrLength = 4,
   ...props
 }) => {
   if (!timezones)
     timezones = timezone_list_default;
   const getOptions = React.useMemo(() => {
     return Object.entries(timezones).reduce((selectOptions, zone) => {
-      const now = spacetime.now(zone[0]);
-      const tz = now.timezone();
-      const tzStrings = soft(zone[0]);
-      let label = "";
-      let abbr = now.isDST() ? (
-        // @ts-expect-error
-        tzStrings[0].daylight?.abbr
-      ) : (
-        // @ts-expect-error
-        tzStrings[0].standard?.abbr
-      );
-      let altName = now.isDST() ? tzStrings[0].daylight?.name : tzStrings[0].standard?.name;
-      const min = tz.current.offset * 60;
-      const hr = `${min / 60 ^ 0}:` + (min % 60 === 0 ? "00" : Math.abs(min % 60));
-      const prefix = `(GMT${hr.includes("-") ? hr : `+${hr}`}) ${zone[1]}`;
-      switch (labelStyle) {
-        case "original":
-          label = prefix;
-          break;
-        case "altName":
-          label = `${prefix} ${altName?.length ? `(${altName})` : ""}`;
-          break;
-        case "abbrev":
-          label = `${prefix} ${abbr?.length < 5 ? `(${abbr})` : ""}`;
-          break;
-        default:
-          label = `${prefix}`;
+      try {
+        const now = spacetime.now(zone[0]);
+        const tz = now.timezone();
+        const tzStrings = soft(zone[0]);
+        let label = "";
+        let abbr = now.isDST() ? tzStrings[0].daylight.abbr : tzStrings[0].standard.abbr;
+        let altName = now.isDST() ? tzStrings[0].daylight.name : tzStrings[0].standard.name;
+        const min = tz.current.offset * 60;
+        const hr = `${min / 60 ^ 0}:` + (min % 60 === 0 ? "00" : Math.abs(min % 60));
+        const prefix = `(GMT${hr.includes("-") ? hr : `+${hr}`}) ${zone[1]}`;
+        switch (labelStyle) {
+          case "original":
+            label = prefix;
+            break;
+          case "altName":
+            label = `${prefix} ${altName?.length ? `(${altName})` : ""}`;
+            break;
+          case "abbrev":
+            label = `${prefix} (${abbr.substring(0, maxAbbrLength)})`;
+            break;
+          default:
+            label = `${prefix}`;
+        }
+        selectOptions.push({
+          value: tz.name,
+          label,
+          offset: tz.current.offset,
+          abbrev: abbr,
+          altName
+        });
+        return selectOptions;
+      } catch {
+        return selectOptions;
       }
-      selectOptions.push({
-        value: tz.name,
-        label,
-        offset: tz.current.offset,
-        abbrev: abbr,
-        altName
-      });
-      return selectOptions;
     }, []).sort((a, b) => a.offset - b.offset);
   }, [labelStyle, timezones]);
   const handleChange = (tz) => {

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "react-timezone-select",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "description": "Usable, dynamic React Timezone Select",
   "scripts": {
-    "dev": "concurrently \"rollup -cw\" \"cd example && npm run dev\"",
-    "prepublish": "npm run build",
-    "postpublish": "npm run build:example && npm run deploy",
+    "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 cjs,esm --dts",
-    "build:example": "cd example && npm run build",
+    "build:example": "cd example && pnpm run build",
     "deploy": "gh-pages -d example/dist",
+    "pretest": "pnpm run build",
     "test": "jest",
     "test:watch": "jest --watch",
-    "test:ci": "jest --ci ",
+    "test:ci": "pnpm run build && jest --ci ",
     "tsc": "tsc"
   },
   "author": "Nico Domino <yo@ndo.dev>",
@@ -51,8 +52,8 @@
   },
   "dependencies": {
     "react-select": "^5.7.0",
-    "spacetime": "^7.1.4",
-    "timezone-soft": "^1.3.1"
+    "spacetime": "^7.4.1",
+    "timezone-soft": "^1.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.7",