react-timezone-select 3.0.0 → 3.0.2

package/README.md

@@ -18,12 +18,11 @@ While looking around for a good option, I had trouble finding a 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).
 
-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.
-
 ## 🏗️ Installing
 
 ```bash
-npm install react-select react-timezone-select
+// react-select is an optional peer dependency, unnecessary if using the hook
+npm install react-timezone-select react-select
 ```
 
 ## 🔭 Usage
@@ -31,10 +30,10 @@ npm install react-select react-timezone-select
 ```jsx
 import React, { useState } from 'react'
 import ReactDOM from 'react-dom'
-import TimezoneSelect from 'react-timezone-select'
+import TimezoneSelect, { type ITimezone } from 'react-timezone-select'
 
 const App = () => {
-  const [selectedTimezone, setSelectedTimezone] =useState(
+  const [selectedTimezone, setSelectedTimezone] = useState<ITimezone>(
     Intl.DateTimeFormat().resolvedOptions().timeZone
   )
 
@@ -97,7 +96,10 @@ You can append custom choices of your own, or fully replace the listed timezone
 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.
 
 ```jsx
-import TimezoneSelect, { allTimezones } from 'react-timezone-select'
+import TimezoneSelect, { type ITimezone, allTimezones } from 'react-timezone-select'
+
+const [selectedTimezone, setSelectedTimezone] = useState<ITimezone>('Europe/Berlin')
+
 <TimezoneSelect
   value={selectedTimezone}
   onChange={setSelectedTimezone}

package/dist/index.cjs

@@ -60,7 +60,7 @@ __export(src_exports, {
   useTimezoneSelect: () => useTimezoneSelect
 });
 module.exports = __toCommonJS(src_exports);
-var import_react = __toESM(require("react"), 1);
+var import_react = require("react");
 var import_react_select = __toESM(require("react-select"), 1);
 var import_spacetime = __toESM(require("spacetime"), 1);
 var import_timezone_soft = __toESM(require("timezone-soft"), 1);
@@ -150,6 +150,7 @@ var allTimezones = {
 var timezone_list_default = allTimezones;
 
 // src/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 function useTimezoneSelect({
   timezones = timezone_list_default,
   labelStyle = "original",
@@ -264,7 +265,7 @@ var TimezoneSelect = (_a) => {
   const handleChange = (tz) => {
     onChange && onChange(tz);
   };
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_select.default,
     __spreadValues({
       value: parseTimezone(value),

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as react_jsx_runtime_js from 'react/jsx-runtime.js';
 import { Props as Props$1 } from 'react-select';
 
 type ICustomTimezone = {
@@ -18,7 +18,6 @@ type TimezoneSelectOptions = {
     labelStyle?: ILabelStyle;
     displayValue?: IDisplayValue;
     timezones?: ICustomTimezone;
-    maxAbbrLength?: number;
 };
 type Props = Omit<Props$1<ITimezone, false>, 'onChange'> & TimezoneSelectOptions & {
     value: ITimezone;
@@ -31,6 +30,6 @@ declare function useTimezoneSelect({ timezones, labelStyle, displayValue, }: Tim
     parseTimezone: (zone: ITimezone) => ITimezoneOption;
     options: ITimezoneOption[];
 };
-declare const TimezoneSelect: ({ value, onBlur, onChange, labelStyle, displayValue, timezones, ...props }: Props) => React.JSX.Element;
+declare const TimezoneSelect: ({ value, onBlur, onChange, labelStyle, displayValue, timezones, ...props }: Props) => react_jsx_runtime_js.JSX.Element;
 
 export { ILabelStyle, ITimezone, ITimezoneOption, Props, TimezoneSelectOptions, allTimezones, TimezoneSelect as default, useTimezoneSelect };

package/dist/index.js

@@ -28,7 +28,7 @@ var __objRest = (source, exclude) => {
 };
 
 // src/index.tsx
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import Select from "react-select";
 import spacetime from "spacetime";
 import soft from "timezone-soft";
@@ -118,6 +118,7 @@ var allTimezones = {
 var timezone_list_default = allTimezones;
 
 // src/index.tsx
+import { jsx } from "react/jsx-runtime";
 function useTimezoneSelect({
   timezones = timezone_list_default,
   labelStyle = "original",
@@ -232,7 +233,7 @@ var TimezoneSelect = (_a) => {
   const handleChange = (tz) => {
     onChange && onChange(tz);
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Select,
     __spreadValues({
       value: parseTimezone(value),

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "react-timezone-select",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "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 cjs,esm --dts",
+    "build": "tsup src/index.tsx --format cjs,esm --clean --dts",
     "build:example": "cd example && pnpm run build",
     "deploy": "gh-pages -d example/dist",
     "pretest": "pnpm run build",

package/dist/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<meta name="theme-color" content="#000000">
-	<!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-	<!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-	<title>React App</title>
-</head>
-
-<body>
-	<noscript>
-		You need to enable JavaScript to run this app.
-	</noscript>
-	<div id="root"></div>
-	<!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-</body>
-
-</html>

package/dist/styles.css

@@ -1,26 +0,0 @@
-* {
-  font-family: Helvetica;
-}
-
-.App {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.select-wrapper {
-  margin-top: 50px;
-  width: 500px;
-}
-
-.code, 
-.code span {
-  background-color: #efefef;
-  font-family: monospace;
-}
-
-.code {
-  padding: 10px;
-  line-height: 2;
-  font-size: 1.4rem;
-}