react-timezone-select 2.0.1 → 2.1.1

package/README.md

@@ -138,6 +138,32 @@ timezones={{
 - `maxAbbrLength` - `number` - Truncate `abbrev` labelStyles string to length
 - Any other [`react-select`](https://github.com/jedwatson/react-select#props) props
 
+## 🎨 Custom Select component
+
+By default, `react-timezone-select` uses [`react-select`](https://github.com/jedwatson/react-select) as underlying select component. If you'd like to bring your own select component, you can use the `useTimezoneSelect` hook instead of the `TimezoneSelect` component to render the timezones using your self-provided select component.
+
+```jsx
+import { useTimezoneSelect, allTimezones } from 'react-timezone-select'
+
+const labelStyle = 'original'
+const timezones = {
+  ...allTimezones,
+  'Europe/Berlin': 'Frankfurt'
+}
+
+const customSelect = () => {
+  const { options, parseTimezone } = useTimezoneSelect({ labelStyle, timezones })
+
+  return (
+    <select onChange={e => onChange(parseTimezone(e.currentTarget.value))}>
+      {options.map(option => (
+        <option value={option.value}>{option.label}</option>
+      ))}
+    </select>
+  )
+}
+```
+
 ## 🚧 Contributing
 
 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!

package/dist/index.cjs

@@ -2,8 +2,34 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -30,7 +56,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   allTimezones: () => timezone_list_default,
-  default: () => TimezoneSelect
+  default: () => TimezoneSelect,
+  useTimezoneSelect: () => useTimezoneSelect
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"), 1);
@@ -123,27 +150,24 @@ var allTimezones = {
 var timezone_list_default = allTimezones;
 
 // src/index.tsx
-var TimezoneSelect = ({
-  value,
-  onBlur,
-  onChange,
-  labelStyle = "original",
+function useTimezoneSelect({
   timezones = timezone_list_default,
-  maxAbbrLength = 4,
-  ...props
-}) => {
-  const getOptions = React.useMemo(
-    () => Object.entries(timezones).reduce((selectOptions, zone) => {
+  labelStyle = "original",
+  maxAbbrLength = 4
+}) {
+  const options = React.useMemo(() => {
+    return Object.entries(timezones).map((zone) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
       try {
         const now = import_spacetime.default.now(zone[0]);
         const tz = now.timezone();
         const tzStrings = (0, import_timezone_soft.default)(zone[0]);
         let label = "";
-        const standardAbbr = tzStrings?.[0]?.standard?.abbr ?? "";
-        const dstAbbr = tzStrings?.[0]?.daylight?.abbr ?? standardAbbr;
+        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 = tzStrings?.[0]?.standard?.name ?? "";
-        const dstAltName = tzStrings?.[0]?.daylight?.name ?? standardAltName;
+        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 min = tz.current.offset * 60;
         const hr = `${min / 60 ^ 0}:` + (min % 60 === 0 ? "00" : Math.abs(min % 60));
@@ -161,23 +185,18 @@ var TimezoneSelect = ({
           default:
             label = `${prefix}`;
         }
-        selectOptions.push({
+        return {
           value: tz.name,
           label,
           offset: tz.current.offset,
           abbrev: abbr,
           altName
-        });
-        return selectOptions;
-      } catch {
-        return selectOptions;
+        };
+      } catch (e) {
+        return null;
       }
-    }, []).sort((a, b) => a.offset - b.offset),
-    [labelStyle, timezones]
-  );
-  const handleChange = (tz) => {
-    onChange && onChange(tz);
-  };
+    }).filter(Boolean).sort((a, b) => a.offset - b.offset);
+  }, [labelStyle, timezones]);
   const findFuzzyTz = (zone) => {
     let currentTime = import_spacetime.default.now("GMT");
     try {
@@ -185,7 +204,7 @@ var TimezoneSelect = ({
     } catch (err) {
       return;
     }
-    return getOptions.filter(
+    return options.filter(
       (tz) => tz.offset === currentTime.timezone().current.offset
     ).map((tz) => {
       let score = 0;
@@ -214,23 +233,49 @@ var TimezoneSelect = ({
     if (typeof zone === "object" && zone.value && zone.label)
       return zone;
     if (typeof zone === "string") {
-      return getOptions.find((tz) => tz.value === zone) || zone.indexOf("/") !== -1 && findFuzzyTz(zone);
+      return options.find((tz) => tz.value === zone) || zone.indexOf("/") !== -1 && findFuzzyTz(zone);
     } else if (zone.value && !zone.label) {
-      return getOptions.find((tz) => tz.value === zone.value);
+      return options.find((tz) => tz.value === zone.value);
     }
   };
+  return { options, parseTimezone };
+}
+var TimezoneSelect = (_a) => {
+  var _b = _a, {
+    value,
+    onBlur,
+    onChange,
+    labelStyle,
+    maxAbbrLength,
+    timezones
+  } = _b, props = __objRest(_b, [
+    "value",
+    "onBlur",
+    "onChange",
+    "labelStyle",
+    "maxAbbrLength",
+    "timezones"
+  ]);
+  const { options, parseTimezone } = useTimezoneSelect({
+    timezones,
+    labelStyle,
+    maxAbbrLength
+  });
+  const handleChange = (tz) => {
+    onChange && onChange(tz);
+  };
   return /* @__PURE__ */ React.createElement(
     import_react_select.default,
-    {
+    __spreadValues({
       value: parseTimezone(value),
       onChange: handleChange,
-      options: getOptions,
-      onBlur,
-      ...props
-    }
+      options,
+      onBlur
+    }, props)
   );
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  allTimezones
+  allTimezones,
+  useTimezoneSelect
 });

package/dist/index.d.ts

@@ -1,27 +1,33 @@
 import { Props as Props$1 } from 'react-select';
 
-declare type ICustomTimezone = {
+type ICustomTimezone = {
     [key: string]: string;
 };
-declare type ILabelStyle = 'original' | 'altName' | 'abbrev';
-interface ITimezoneOption {
+type ILabelStyle = 'original' | 'altName' | 'abbrev';
+type ITimezoneOption = {
     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;
+};
+type ITimezone = ITimezoneOption | string;
+type TimezoneSelectOptions = {
     labelStyle?: ILabelStyle;
-    onChange?: (timezone: ITimezoneOption) => void;
     timezones?: ICustomTimezone;
     maxAbbrLength?: number;
-}
+};
+type Props = Omit<Props$1<ITimezone, false>, 'onChange'> & TimezoneSelectOptions & {
+    value: ITimezone;
+    onChange?: (timezone: ITimezoneOption) => void;
+};
 
 declare const allTimezones: ICustomTimezone;
 
-declare const TimezoneSelect: ({ value, onBlur, onChange, labelStyle, timezones, maxAbbrLength, ...props }: Props) => JSX.Element;
+declare function useTimezoneSelect({ timezones, labelStyle, maxAbbrLength, }: TimezoneSelectOptions): {
+    parseTimezone: (zone: ITimezone) => ITimezoneOption;
+    options: ITimezoneOption[];
+};
+declare const TimezoneSelect: ({ value, onBlur, onChange, labelStyle, maxAbbrLength, timezones, ...props }: Props) => JSX.Element;
 
-export { ILabelStyle, ITimezone, ITimezoneOption, Props, allTimezones, TimezoneSelect as default };
+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

@@ -1,3 +1,32 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
 // src/index.tsx
 import * as React from "react";
 import Select from "react-select";
@@ -89,27 +118,24 @@ var allTimezones = {
 var timezone_list_default = allTimezones;
 
 // src/index.tsx
-var TimezoneSelect = ({
-  value,
-  onBlur,
-  onChange,
-  labelStyle = "original",
+function useTimezoneSelect({
   timezones = timezone_list_default,
-  maxAbbrLength = 4,
-  ...props
-}) => {
-  const getOptions = React.useMemo(
-    () => Object.entries(timezones).reduce((selectOptions, zone) => {
+  labelStyle = "original",
+  maxAbbrLength = 4
+}) {
+  const options = React.useMemo(() => {
+    return Object.entries(timezones).map((zone) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
       try {
         const now = spacetime.now(zone[0]);
         const tz = now.timezone();
         const tzStrings = soft(zone[0]);
         let label = "";
-        const standardAbbr = tzStrings?.[0]?.standard?.abbr ?? "";
-        const dstAbbr = tzStrings?.[0]?.daylight?.abbr ?? standardAbbr;
+        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 = tzStrings?.[0]?.standard?.name ?? "";
-        const dstAltName = tzStrings?.[0]?.daylight?.name ?? standardAltName;
+        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 min = tz.current.offset * 60;
         const hr = `${min / 60 ^ 0}:` + (min % 60 === 0 ? "00" : Math.abs(min % 60));
@@ -127,23 +153,18 @@ var TimezoneSelect = ({
           default:
             label = `${prefix}`;
         }
-        selectOptions.push({
+        return {
           value: tz.name,
           label,
           offset: tz.current.offset,
           abbrev: abbr,
           altName
-        });
-        return selectOptions;
-      } catch {
-        return selectOptions;
+        };
+      } catch (e) {
+        return null;
       }
-    }, []).sort((a, b) => a.offset - b.offset),
-    [labelStyle, timezones]
-  );
-  const handleChange = (tz) => {
-    onChange && onChange(tz);
-  };
+    }).filter(Boolean).sort((a, b) => a.offset - b.offset);
+  }, [labelStyle, timezones]);
   const findFuzzyTz = (zone) => {
     let currentTime = spacetime.now("GMT");
     try {
@@ -151,7 +172,7 @@ var TimezoneSelect = ({
     } catch (err) {
       return;
     }
-    return getOptions.filter(
+    return options.filter(
       (tz) => tz.offset === currentTime.timezone().current.offset
     ).map((tz) => {
       let score = 0;
@@ -180,23 +201,49 @@ var TimezoneSelect = ({
     if (typeof zone === "object" && zone.value && zone.label)
       return zone;
     if (typeof zone === "string") {
-      return getOptions.find((tz) => tz.value === zone) || zone.indexOf("/") !== -1 && findFuzzyTz(zone);
+      return options.find((tz) => tz.value === zone) || zone.indexOf("/") !== -1 && findFuzzyTz(zone);
     } else if (zone.value && !zone.label) {
-      return getOptions.find((tz) => tz.value === zone.value);
+      return options.find((tz) => tz.value === zone.value);
     }
   };
+  return { options, parseTimezone };
+}
+var TimezoneSelect = (_a) => {
+  var _b = _a, {
+    value,
+    onBlur,
+    onChange,
+    labelStyle,
+    maxAbbrLength,
+    timezones
+  } = _b, props = __objRest(_b, [
+    "value",
+    "onBlur",
+    "onChange",
+    "labelStyle",
+    "maxAbbrLength",
+    "timezones"
+  ]);
+  const { options, parseTimezone } = useTimezoneSelect({
+    timezones,
+    labelStyle,
+    maxAbbrLength
+  });
+  const handleChange = (tz) => {
+    onChange && onChange(tz);
+  };
   return /* @__PURE__ */ React.createElement(
     Select,
-    {
+    __spreadValues({
       value: parseTimezone(value),
       onChange: handleChange,
-      options: getOptions,
-      onBlur,
-      ...props
-    }
+      options,
+      onBlur
+    }, props)
   );
 };
 export {
   timezone_list_default as allTimezones,
-  TimezoneSelect as default
+  TimezoneSelect as default,
+  useTimezoneSelect
 };

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.0.1",
+  "version": "2.1.1",
   "description": "Usable, dynamic React Timezone Select",
   "scripts": {
     "dev": "concurrently \"tsup src/index.tsx --format esm --watch\" \"cd example && pnpm dev\"",