react-timezone-select 2.1.5 → 3.0.1

package/README.md

@@ -125,7 +125,7 @@ The above example will generate two additional choices in the select options, on
 ```
 - `onBlur` - `() => void`
 - `onChange` - `(timezone) => void`
-- `labelStyle` - `'original' | 'altName' | 'abbrev'`
+- `labelStyle` - `'original' | 'altName' | 'abbrev' | 'offsetHidden'`
 - `displayValue` - `'GMT' | 'UTC'`
 - `timezones` - `Record<string,string>`
 ```
@@ -136,7 +136,6 @@ timezones={{
 }}
 ```
 
-- `maxAbbrLength` - `number` - Truncate `abbrev` labelStyles string to length
 - Any other [`react-select`](https://github.com/jedwatson/react-select#props) props
 
 ## 🎨 Custom Select component

package/dist/index.cjs

@@ -60,7 +60,7 @@ __export(src_exports, {
   useTimezoneSelect: () => useTimezoneSelect
 });
 module.exports = __toCommonJS(src_exports);
-var 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,29 +150,26 @@ 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",
-  displayValue = "GMT",
-  maxAbbrLength = 4
+  displayValue = "GMT"
 }) {
-  const options = React.useMemo(() => {
+  const options = (0, import_react.useMemo)(() => {
     return Object.entries(timezones).map((zone) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+      var _a, _b, _c, _d;
       try {
         const now = import_spacetime.default.now(zone[0]);
+        const isDstString = now.isDST() ? "daylight" : "standard";
         const tz = now.timezone();
         const tzStrings = (0, import_timezone_soft.default)(zone[0]);
-        let label = "";
-        const standardAbbr = (_c = (_b = (_a = tzStrings == null ? void 0 : tzStrings[0]) == null ? void 0 : _a.standard) == null ? void 0 : _b.abbr) != null ? _c : "";
-        const dstAbbr = (_f = (_e = (_d = tzStrings == null ? void 0 : tzStrings[0]) == null ? void 0 : _d.daylight) == null ? void 0 : _e.abbr) != null ? _f : standardAbbr;
-        let abbr = now.isDST() ? dstAbbr : standardAbbr;
-        const standardAltName = (_i = (_h = (_g = tzStrings == null ? void 0 : tzStrings[0]) == null ? void 0 : _g.standard) == null ? void 0 : _h.name) != null ? _i : "";
-        const dstAltName = (_l = (_k = (_j = tzStrings == null ? void 0 : tzStrings[0]) == null ? void 0 : _j.daylight) == null ? void 0 : _k.name) != null ? _l : standardAltName;
-        let altName = now.isDST() ? dstAltName : standardAltName;
+        const abbr = (_b = (_a = tzStrings == null ? void 0 : tzStrings[0]) == null ? void 0 : _a[isDstString]) == null ? void 0 : _b.abbr;
+        const altName = (_d = (_c = tzStrings == null ? void 0 : tzStrings[0]) == null ? void 0 : _c[isDstString]) == null ? void 0 : _d.name;
         const min = tz.current.offset * 60;
-        const hr = `${min / 60 ^ 0}:` + (min % 60 === 0 ? "00" : Math.abs(min % 60));
+        const hr = `${min / 60 ^ 0}:${min % 60 === 0 ? "00" : Math.abs(min % 60)}`;
         const prefix = `(${displayValue}${hr.includes("-") ? hr : `+${hr}`}) ${zone[1]}`;
+        let label = "";
         switch (labelStyle) {
           case "original":
             label = prefix;
@@ -181,7 +178,7 @@ function useTimezoneSelect({
             label = `${prefix} ${altName ? `(${altName})` : ""}`;
             break;
           case "abbrev":
-            label = `${prefix} (${abbr.substring(0, maxAbbrLength)})`;
+            label = `${prefix} (${abbr})`;
             break;
           case "offsetHidden":
             label = `${prefix.replace(/^\(.*?\)\s*/, "")}`;
@@ -202,11 +199,11 @@ function useTimezoneSelect({
     }).filter(Boolean).sort((a, b) => a.offset - b.offset);
   }, [labelStyle, timezones]);
   const findFuzzyTz = (zone) => {
-    let currentTime = import_spacetime.default.now("GMT");
+    let currentTime;
     try {
       currentTime = import_spacetime.default.now(zone);
     } catch (err) {
-      return;
+      currentTime = import_spacetime.default.now("GMT");
     }
     return options.filter(
       (tz) => tz.offset === currentTime.timezone().current.offset
@@ -231,7 +228,7 @@ function useTimezoneSelect({
         score += 1;
       }
       return { tz, score };
-    }).sort((a, b) => b.score - a.score).map(({ tz }) => tz)[0];
+    }).sort((a, b) => b.score - a.score)[0].tz;
   };
   const parseTimezone = (zone) => {
     if (typeof zone === "object" && zone.value && zone.label)
@@ -251,7 +248,6 @@ var TimezoneSelect = (_a) => {
     onChange,
     labelStyle,
     displayValue,
-    maxAbbrLength,
     timezones
   } = _b, props = __objRest(_b, [
     "value",
@@ -259,19 +255,17 @@ var TimezoneSelect = (_a) => {
     "onChange",
     "labelStyle",
     "displayValue",
-    "maxAbbrLength",
     "timezones"
   ]);
   const { options, parseTimezone } = useTimezoneSelect({
     timezones,
     labelStyle,
-    displayValue,
-    maxAbbrLength
+    displayValue
   });
   const handleChange = (tz) => {
     onChange && onChange(tz);
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_select.default,
     __spreadValues({
       value: parseTimezone(value),

package/dist/index.d.ts

@@ -1,35 +1,36 @@
+import * as react_jsx_runtime_js from 'react/jsx-runtime.js';
 import { Props as Props$1 } from 'react-select';
 
-declare type ICustomTimezone = {
+type ICustomTimezone = {
     [key: string]: string;
 };
-declare type ILabelStyle = 'original' | 'altName' | 'abbrev' | 'offsetHidden';
-declare type IDisplayValue = 'GMT' | 'UTC';
-declare type ITimezoneOption = {
+type ILabelStyle = 'original' | 'altName' | 'abbrev' | 'offsetHidden';
+type IDisplayValue = 'GMT' | 'UTC';
+type ITimezoneOption = {
     value: string;
     label: string;
     abbrev?: string;
     altName?: string;
     offset?: number;
 };
-declare type ITimezone = ITimezoneOption | string;
-declare type TimezoneSelectOptions = {
+type ITimezone = ITimezoneOption | string;
+type TimezoneSelectOptions = {
     labelStyle?: ILabelStyle;
     displayValue?: IDisplayValue;
     timezones?: ICustomTimezone;
     maxAbbrLength?: number;
 };
-declare type Props = Omit<Props$1<ITimezone, false>, 'onChange'> & TimezoneSelectOptions & {
+type Props = Omit<Props$1<ITimezone, false>, 'onChange'> & TimezoneSelectOptions & {
     value: ITimezone;
     onChange?: (timezone: ITimezone) => void;
 };
 
 declare const allTimezones: ICustomTimezone;
 
-declare function useTimezoneSelect({ timezones, labelStyle, displayValue, maxAbbrLength, }: TimezoneSelectOptions): {
+declare function useTimezoneSelect({ timezones, labelStyle, displayValue, }: TimezoneSelectOptions): {
     parseTimezone: (zone: ITimezone) => ITimezoneOption;
     options: ITimezoneOption[];
 };
-declare const TimezoneSelect: ({ value, onBlur, onChange, labelStyle, displayValue, maxAbbrLength, timezones, ...props }: Props) => 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 * as React from "react";
+import { useMemo } from "react";
 import Select from "react-select";
 import spacetime from "spacetime";
 import soft from "timezone-soft";
@@ -118,29 +118,26 @@ var allTimezones = {
 var timezone_list_default = allTimezones;
 
 // src/index.tsx
+import { jsx } from "react/jsx-runtime";
 function useTimezoneSelect({
   timezones = timezone_list_default,
   labelStyle = "original",
-  displayValue = "GMT",
-  maxAbbrLength = 4
+  displayValue = "GMT"
 }) {
-  const options = React.useMemo(() => {
+  const options = useMemo(() => {
     return Object.entries(timezones).map((zone) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+      var _a, _b, _c, _d;
       try {
         const now = spacetime.now(zone[0]);
+        const isDstString = now.isDST() ? "daylight" : "standard";
         const tz = now.timezone();
         const tzStrings = soft(zone[0]);
-        let label = "";
-        const standardAbbr = (_c = (_b = (_a = tzStrings == null ? void 0 : tzStrings[0]) == null ? void 0 : _a.standard) == null ? void 0 : _b.abbr) != null ? _c : "";
-        const dstAbbr = (_f = (_e = (_d = tzStrings == null ? void 0 : tzStrings[0]) == null ? void 0 : _d.daylight) == null ? void 0 : _e.abbr) != null ? _f : standardAbbr;
-        let abbr = now.isDST() ? dstAbbr : standardAbbr;
-        const standardAltName = (_i = (_h = (_g = tzStrings == null ? void 0 : tzStrings[0]) == null ? void 0 : _g.standard) == null ? void 0 : _h.name) != null ? _i : "";
-        const dstAltName = (_l = (_k = (_j = tzStrings == null ? void 0 : tzStrings[0]) == null ? void 0 : _j.daylight) == null ? void 0 : _k.name) != null ? _l : standardAltName;
-        let altName = now.isDST() ? dstAltName : standardAltName;
+        const abbr = (_b = (_a = tzStrings == null ? void 0 : tzStrings[0]) == null ? void 0 : _a[isDstString]) == null ? void 0 : _b.abbr;
+        const altName = (_d = (_c = tzStrings == null ? void 0 : tzStrings[0]) == null ? void 0 : _c[isDstString]) == null ? void 0 : _d.name;
         const min = tz.current.offset * 60;
-        const hr = `${min / 60 ^ 0}:` + (min % 60 === 0 ? "00" : Math.abs(min % 60));
+        const hr = `${min / 60 ^ 0}:${min % 60 === 0 ? "00" : Math.abs(min % 60)}`;
         const prefix = `(${displayValue}${hr.includes("-") ? hr : `+${hr}`}) ${zone[1]}`;
+        let label = "";
         switch (labelStyle) {
           case "original":
             label = prefix;
@@ -149,7 +146,7 @@ function useTimezoneSelect({
             label = `${prefix} ${altName ? `(${altName})` : ""}`;
             break;
           case "abbrev":
-            label = `${prefix} (${abbr.substring(0, maxAbbrLength)})`;
+            label = `${prefix} (${abbr})`;
             break;
           case "offsetHidden":
             label = `${prefix.replace(/^\(.*?\)\s*/, "")}`;
@@ -170,11 +167,11 @@ function useTimezoneSelect({
     }).filter(Boolean).sort((a, b) => a.offset - b.offset);
   }, [labelStyle, timezones]);
   const findFuzzyTz = (zone) => {
-    let currentTime = spacetime.now("GMT");
+    let currentTime;
     try {
       currentTime = spacetime.now(zone);
     } catch (err) {
-      return;
+      currentTime = spacetime.now("GMT");
     }
     return options.filter(
       (tz) => tz.offset === currentTime.timezone().current.offset
@@ -199,7 +196,7 @@ function useTimezoneSelect({
         score += 1;
       }
       return { tz, score };
-    }).sort((a, b) => b.score - a.score).map(({ tz }) => tz)[0];
+    }).sort((a, b) => b.score - a.score)[0].tz;
   };
   const parseTimezone = (zone) => {
     if (typeof zone === "object" && zone.value && zone.label)
@@ -219,7 +216,6 @@ var TimezoneSelect = (_a) => {
     onChange,
     labelStyle,
     displayValue,
-    maxAbbrLength,
     timezones
   } = _b, props = __objRest(_b, [
     "value",
@@ -227,19 +223,17 @@ var TimezoneSelect = (_a) => {
     "onChange",
     "labelStyle",
     "displayValue",
-    "maxAbbrLength",
     "timezones"
   ]);
   const { options, parseTimezone } = useTimezoneSelect({
     timezones,
     labelStyle,
-    displayValue,
-    maxAbbrLength
+    displayValue
   });
   const handleChange = (tz) => {
     onChange && onChange(tz);
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Select,
     __spreadValues({
       value: parseTimezone(value),

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "react-timezone-select",
-  "version": "2.1.5",
+  "version": "3.0.1",
   "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",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:ci": "pnpm run build && jest --ci ",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:ci": "pnpm run build && pnpm test",
     "tsc": "tsc"
   },
   "author": "Nico Domino <yo@ndo.dev>",
@@ -52,66 +52,65 @@
     "react-select": "^5.7.0"
   },
   "dependencies": {
-    "spacetime": "^7.4.1",
-    "timezone-soft": "^1.4.1"
+    "spacetime": "^7.4.8",
+    "timezone-soft": "^1.5.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.7",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@types/jest": "^27.4.0",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "concurrently": "^7.0.0",
-    "esbuild": "^0.16.12",
+    "@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",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "concurrently": "^7.6.0",
+    "esbuild": "^0.16.17",
     "esbuild-jest": "^0.5.0",
-    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "5.0.1",
     "gh-pages": "^3.2.3",
-    "jest": "^27.4.7",
-    "prettier": "^2.5.1",
-    "react": "^17",
-    "react-dom": "^17",
-    "simple-git-hooks": "^2.7.0",
-    "ts-jest": "^27.1.3",
-    "tsup": "^6.5.0",
-    "typescript": "^4.5.5"
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.1.1",
+    "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"
   },
   "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
     "parserOptions": {
+      "ecmaVersion": "latest",
       "sourceType": "module"
     },
     "extends": [
       "eslint:recommended",
-      "prettier"
+      "plugin:@typescript-eslint/recommended",
+      "plugin:prettier/recommended"
     ],
-    "env": {
-      "browser": true,
-      "es6": true
-    },
     "plugins": [
-      "prettier"
+      "@typescript-eslint"
     ],
-    "rules": {
-      "prettier/prettier": "error"
-    }
+    "root": true
   },
   "prettier": {
-    "trailingComma": "es5",
     "semi": false,
     "singleQuote": true,
-    "arrowParens": "avoid"
+    "maxLineLength": 100
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx,css,json}": [
-      "prettier --write"
-    ],
-    "*.{js,jsx}": [
+    "*.{js,jsx,ts,tsx}": [
       "eslint --fix"
     ]
   }

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;
-}