react-timezone-select 1.5.5 → 2.0.0

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

@@ -30,7 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   allTimezones: () => timezone_list_default,
-  default: () => src_default
+  default: () => TimezoneSelect
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"), 1);
@@ -128,14 +128,12 @@ var TimezoneSelect = ({
   onBlur,
   onChange,
   labelStyle = "original",
-  timezones,
+  timezones = timezone_list_default,
   maxAbbrLength = 4,
   ...props
 }) => {
-  if (!timezones)
-    timezones = timezone_list_default;
-  const getOptions = React.useMemo(() => {
-    return Object.entries(timezones).reduce((selectOptions, zone) => {
+  const getOptions = React.useMemo(
+    () => Object.entries(timezones).reduce((selectOptions, zone) => {
       try {
         const now = import_spacetime.default.now(zone[0]);
         const tz = now.timezone();
@@ -170,8 +168,9 @@ var TimezoneSelect = ({
       } catch {
         return selectOptions;
       }
-    }, []).sort((a, b) => a.offset - b.offset);
-  }, [labelStyle, timezones]);
+    }, []).sort((a, b) => a.offset - b.offset),
+    [labelStyle, timezones]
+  );
   const handleChange = (tz) => {
     onChange && onChange(tz);
   };
@@ -227,7 +226,6 @@ var TimezoneSelect = ({
     }
   );
 };
-var src_default = TimezoneSelect;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   allTimezones

package/dist/index.d.ts

@@ -1,36 +1,27 @@
 import { Props as Props$1 } from 'react-select';
 
 declare type ICustomTimezone = {
-  [key: string]: string
-}
-declare type ILabelStyle = 'original' | 'altName' | 'abbrev'
+    [key: string]: string;
+};
+declare type ILabelStyle = 'original' | 'altName' | 'abbrev';
 interface ITimezoneOption {
-  value: string
-  label: string
-  offset: number
-  abbrev?: string
-  altName?: string
+    value: string;
+    label: string;
+    abbrev?: string;
+    altName?: string;
+    offset?: number;
 }
-declare type ITimezone = ITimezoneOption | string
-interface Props
-  extends Omit<Props$1<ITimezone, false>, 'onChange'> {
-  value: ITimezone
-  labelStyle?: ILabelStyle
-  onChange?: (timezone: ITimezoneOption) => void
-  timezones?: ICustomTimezone
-  maxAbbrLength?: number
+declare type ITimezone = ITimezoneOption | string;
+interface Props extends Omit<Props$1<ITimezone, false>, 'onChange'> {
+    value: ITimezone;
+    labelStyle?: ILabelStyle;
+    onChange?: (timezone: ITimezoneOption) => void;
+    timezones?: ICustomTimezone;
+    maxAbbrLength?: number;
 }
 
 declare const allTimezones: ICustomTimezone;
 
-declare const TimezoneSelect: ({
-  value,
-  onBlur,
-  onChange,
-  labelStyle,
-  timezones,
-  maxAbbrLength,
-  ...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

@@ -94,14 +94,12 @@ var TimezoneSelect = ({
   onBlur,
   onChange,
   labelStyle = "original",
-  timezones,
+  timezones = timezone_list_default,
   maxAbbrLength = 4,
   ...props
 }) => {
-  if (!timezones)
-    timezones = timezone_list_default;
-  const getOptions = React.useMemo(() => {
-    return Object.entries(timezones).reduce((selectOptions, zone) => {
+  const getOptions = React.useMemo(
+    () => Object.entries(timezones).reduce((selectOptions, zone) => {
       try {
         const now = spacetime.now(zone[0]);
         const tz = now.timezone();
@@ -136,8 +134,9 @@ var TimezoneSelect = ({
       } catch {
         return selectOptions;
       }
-    }, []).sort((a, b) => a.offset - b.offset);
-  }, [labelStyle, timezones]);
+    }, []).sort((a, b) => a.offset - b.offset),
+    [labelStyle, timezones]
+  );
   const handleChange = (tz) => {
     onChange && onChange(tz);
   };
@@ -193,8 +192,7 @@ var TimezoneSelect = ({
     }
   );
 };
-var src_default = TimezoneSelect;
 export {
   timezone_list_default as allTimezones,
-  src_default as default
+  TimezoneSelect as default
 };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-timezone-select",
-  "version": "1.5.5",
+  "version": "2.0.0",
   "description": "Usable, dynamic React Timezone Select",
   "scripts": {
-    "dev": "concurrently \"tsup src/index.tsx --format esm --watch\" \"cd example && npm run dev\"",
+    "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",
@@ -48,10 +48,10 @@
   },
   "peerDependencies": {
     "react": "^18 || ^17.0.1 || ^16",
-    "react-dom": "^18 || ^17.0.1 || ^16"
+    "react-dom": "^18 || ^17.0.1 || ^16",
+    "react-select": "^5.7.0"
   },
   "dependencies": {
-    "react-select": "^5.7.0",
     "spacetime": "^7.4.1",
     "timezone-soft": "^1.4.1"
   },