react-timezone-select 2.1.4 → 3.0.0

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 = __toESM(require("react"), 1);
 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);
@@ -153,26 +153,22 @@ var timezone_list_default = allTimezones;
 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 +177,10 @@ 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*/, "")}`;
             break;
           default:
             label = `${prefix}`;
@@ -199,11 +198,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
@@ -228,7 +227,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)
@@ -248,7 +247,6 @@ var TimezoneSelect = (_a) => {
     onChange,
     labelStyle,
     displayValue,
-    maxAbbrLength,
     timezones
   } = _b, props = __objRest(_b, [
     "value",
@@ -256,19 +254,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__ */ import_react.default.createElement(
     import_react_select.default,
     __spreadValues({
       value: parseTimezone(value),

package/dist/index.d.ts

@@ -1,35 +1,36 @@
+import React from 'react';
 import { Props as Props$1 } from 'react-select';
 
-declare type ICustomTimezone = {
+type ICustomTimezone = {
     [key: string]: string;
 };
-declare type ILabelStyle = 'original' | 'altName' | 'abbrev';
-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.Element;
 
 export { ILabelStyle, ITimezone, ITimezoneOption, Props, TimezoneSelectOptions, allTimezones, TimezoneSelect as default, useTimezoneSelect };

package/dist/index.html

@@ -0,0 +1,43 @@
+<!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/index.js

@@ -28,7 +28,7 @@ var __objRest = (source, exclude) => {
 };
 
 // src/index.tsx
-import * as React from "react";
+import React, { useMemo } from "react";
 import Select from "react-select";
 import spacetime from "spacetime";
 import soft from "timezone-soft";
@@ -121,26 +121,22 @@ var timezone_list_default = allTimezones;
 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 +145,10 @@ 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*/, "")}`;
             break;
           default:
             label = `${prefix}`;
@@ -167,11 +166,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
@@ -196,7 +195,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)
@@ -216,7 +215,6 @@ var TimezoneSelect = (_a) => {
     onChange,
     labelStyle,
     displayValue,
-    maxAbbrLength,
     timezones
   } = _b, props = __objRest(_b, [
     "value",
@@ -224,14 +222,12 @@ var TimezoneSelect = (_a) => {
     "onChange",
     "labelStyle",
     "displayValue",
-    "maxAbbrLength",
     "timezones"
   ]);
   const { options, parseTimezone } = useTimezoneSelect({
     timezones,
     labelStyle,
-    displayValue,
-    maxAbbrLength
+    displayValue
   });
   const handleChange = (tz) => {
     onChange && onChange(tz);

package/dist/styles.css

@@ -0,0 +1,26 @@
+* {
+  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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-timezone-select",
-  "version": "2.1.4",
+  "version": "3.0.0",
   "description": "Usable, dynamic React Timezone Select",
   "scripts": {
     "dev": "concurrently \"tsup src/index.tsx --format esm --watch\" \"cd example && pnpm dev\"",
@@ -10,9 +10,9 @@
     "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"
     ]
   }