@longline/aqua-ui 1.0.300 → 1.0.302

package/formatters/CountryFormatter/CountryFormatter.d.ts

@@ -13,11 +13,33 @@ interface ICountryFormatterProps {
     type?: 'flag' | 'name' | 'both';
 }
 /**
- * The `CountryFormatter` takes a country code or name and produces either
- * an emoji flag, the country name, or both, depending on the `type` prop.
+ * Displays a country as an emoji flag, name, or both.
+ *
+ * Accepts either an ISO 3166-1 alpha-2 country code (e.g., `"FR"`, `"US"`)
+ * or a country name (e.g., `"France"`, `"United States"`). The formatter
+ * will look up the corresponding flag and/or name.
+ *
+ * Flags are rendered using the "Twemoji Country Flags" font for consistent
+ * cross-platform appearance.
+ *
+ * ## Output Types
+ *
+ * | Type | Input | Output |
+ * |------|-------|--------|
+ * | `both` (default) | `"FR"` | 🇫🇷 France |
+ * | `flag` | `"FR"` | 🇫🇷 |
+ * | `name` | `"FR"` | France |
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <CountryFormatter value="FR" />
+ * <CountryFormatter value="France" type="flag" />
+ * <CountryFormatter value="US" type="name" />
+ * ```
  */
 declare const CountryFormatter: {
     ({ value, type }: ICountryFormatterProps): React.JSX.Element;
     displayName: string;
 };
-export { CountryFormatter };
+export { CountryFormatter, ICountryFormatterProps };

package/formatters/CountryFormatter/CountryFormatter.js

@@ -6,8 +6,30 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { CountryUtil } from './CountryUtil';
 /**
- * The `CountryFormatter` takes a country code or name and produces either
- * an emoji flag, the country name, or both, depending on the `type` prop.
+ * Displays a country as an emoji flag, name, or both.
+ *
+ * Accepts either an ISO 3166-1 alpha-2 country code (e.g., `"FR"`, `"US"`)
+ * or a country name (e.g., `"France"`, `"United States"`). The formatter
+ * will look up the corresponding flag and/or name.
+ *
+ * Flags are rendered using the "Twemoji Country Flags" font for consistent
+ * cross-platform appearance.
+ *
+ * ## Output Types
+ *
+ * | Type | Input | Output |
+ * |------|-------|--------|
+ * | `both` (default) | `"FR"` | 🇫🇷 France |
+ * | `flag` | `"FR"` | 🇫🇷 |
+ * | `name` | `"FR"` | France |
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <CountryFormatter value="FR" />
+ * <CountryFormatter value="France" type="flag" />
+ * <CountryFormatter value="US" type="name" />
+ * ```
  */
 var CountryFormatter = function (_a) {
     var value = _a.value, _b = _a.type, type = _b === void 0 ? 'both' : _b;

package/formatters/DateTimeFormatter/DateTimeFormatter.d.ts

@@ -25,22 +25,51 @@ interface IProps extends IDateTimeFormatterProps, IDateTimeFormatterAnimateProps
     type?: 'longdate' | 'shortdate' | 'longdatetime' | 'shortdatetime' | 'longtime' | 'shorttime' | 'distance' | 'month' | Intl.DateTimeFormatOptions;
 }
 /**
- * `DateTimeFormatter` formats a date or time to a string.
+ * Formats dates and times using locale-aware preset formats or custom options.
  *
- * If the input date fails to parse (in case of a `string`), or isn't a valid
- * date (in case of a `Date`), then the formatter falls back to today's
- * date/time. An input of `null` is not rendered at all.
+ * Accepts `Date` objects or ISO 8601 strings (e.g., `"2025-09-22T10:05:41Z"`).
+ * Invalid dates fall back to the current date/time; `null` renders nothing.
  *
- * If `animated` is set, then date distances will be updated every second
- * (only applicable to `fuzzydistance` and `strictdistance` types).
+ * ## Preset Formats
+ *
+ * | Type | Example Output (en-US) |
+ * |------|------------------------|
+ * | `longdate` | September 22, 2025 |
+ * | `shortdate` | 9/22/2025 |
+ * | `longdatetime` | September 22, 2025 at 10:05 AM |
+ * | `shortdatetime` | 9/22/2025, 10:05 AM |
+ * | `longtime` | 10:05:41 AM |
+ * | `shorttime` | 10:05 AM |
+ * | `month` | September |
+ * | `distance` | 3 hours ago |
+ *
+ * ## Custom Formatting
+ *
+ * Pass an `Intl.DateTimeFormatOptions` object for full control:
  *
  * ```tsx
- * <DateTimeFormatter type='longdate' value='1992-03-08' locale="es"/>
+ * <DateTimeFormatter
+ *   value="2025-09-22"
+ *   type={{ weekday: 'long', year: 'numeric' }}
+ * />
  * ```
  *
- * You can also use static members of `DateTimeFormatter` directly:
+ * ## Static Members
+ *
+ * For convenience, each format type is also available as a static component:
+ *
+ * ```tsx
+ * <DateTimeFormatter.LongDate value="2025-09-22" />
+ * <DateTimeFormatter.ShortTime value={new Date()} />
+ * <DateTimeFormatter.DistanceDate value={timestamp} animated />
+ * ```
+ *
+ * ## Usage
+ *
  * ```tsx
- * <DateTimeFormatter.LongDate value='1992-03-08'/>
+ * <DateTimeFormatter type="longdate" value="1992-03-08" />
+ * <DateTimeFormatter type="shortdatetime" value={new Date()} locale="de-DE" />
+ * <DateTimeFormatter type="distance" value={timestamp} animated />
  * ```
  */
 declare const DateTimeFormatter: {

package/formatters/DateTimeFormatter/DateTimeFormatter.js

@@ -23,22 +23,51 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import { DistanceDate, LongDate, LongDateTime, LongTime, ShortDate, ShortDateTime, ShortTime, Month, Custom, } from './elements';
 /**
- * `DateTimeFormatter` formats a date or time to a string.
+ * Formats dates and times using locale-aware preset formats or custom options.
  *
- * If the input date fails to parse (in case of a `string`), or isn't a valid
- * date (in case of a `Date`), then the formatter falls back to today's
- * date/time. An input of `null` is not rendered at all.
+ * Accepts `Date` objects or ISO 8601 strings (e.g., `"2025-09-22T10:05:41Z"`).
+ * Invalid dates fall back to the current date/time; `null` renders nothing.
  *
- * If `animated` is set, then date distances will be updated every second
- * (only applicable to `fuzzydistance` and `strictdistance` types).
+ * ## Preset Formats
+ *
+ * | Type | Example Output (en-US) |
+ * |------|------------------------|
+ * | `longdate` | September 22, 2025 |
+ * | `shortdate` | 9/22/2025 |
+ * | `longdatetime` | September 22, 2025 at 10:05 AM |
+ * | `shortdatetime` | 9/22/2025, 10:05 AM |
+ * | `longtime` | 10:05:41 AM |
+ * | `shorttime` | 10:05 AM |
+ * | `month` | September |
+ * | `distance` | 3 hours ago |
+ *
+ * ## Custom Formatting
+ *
+ * Pass an `Intl.DateTimeFormatOptions` object for full control:
  *
  * ```tsx
- * <DateTimeFormatter type='longdate' value='1992-03-08' locale="es"/>
+ * <DateTimeFormatter
+ *   value="2025-09-22"
+ *   type={{ weekday: 'long', year: 'numeric' }}
+ * />
  * ```
  *
- * You can also use static members of `DateTimeFormatter` directly:
+ * ## Static Members
+ *
+ * For convenience, each format type is also available as a static component:
+ *
+ * ```tsx
+ * <DateTimeFormatter.LongDate value="2025-09-22" />
+ * <DateTimeFormatter.ShortTime value={new Date()} />
+ * <DateTimeFormatter.DistanceDate value={timestamp} animated />
+ * ```
+ *
+ * ## Usage
+ *
  * ```tsx
- * <DateTimeFormatter.LongDate value='1992-03-08'/>
+ * <DateTimeFormatter type="longdate" value="1992-03-08" />
+ * <DateTimeFormatter type="shortdatetime" value={new Date()} locale="de-DE" />
+ * <DateTimeFormatter type="distance" value={timestamp} animated />
  * ```
  */
 var DateTimeFormatter = function (_a) {

package/formatters/DivisionFormatter/DivisionFormatter.d.ts

@@ -6,8 +6,32 @@ interface IDivisionFormatterProps {
     value: string;
 }
 /**
- * The `DivisionFormatter` takes a country code or name and produces either
- * an emoji flag, the country name, or both, depending on the `type` prop.
+ * Displays the full name of a country subdivision (state, province, region).
+ *
+ * Accepts an ISO 3166-2 subdivision code in the format `"XX-YY"` where `XX`
+ * is the country code and `YY` is the subdivision code. Returns the full
+ * name of the subdivision.
+ *
+ * ## Output Examples
+ *
+ * | Input | Output |
+ * |-------|--------|
+ * | `"US-CA"` | California |
+ * | `"US-NY"` | New York |
+ * | `"CA-NS"` | Nova Scotia |
+ * | `"CA-BC"` | British Columbia |
+ * | `"GB-ENG"` | England |
+ * | `"AU-NSW"` | New South Wales |
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <DivisionFormatter value="US-CA" />
+ * <DivisionFormatter value="CA-NS" />
+ * ```
  */
-declare const DivisionFormatter: ({ value }: IDivisionFormatterProps) => React.JSX.Element;
-export { DivisionFormatter };
+declare const DivisionFormatter: {
+    ({ value }: IDivisionFormatterProps): React.JSX.Element;
+    displayName: string;
+};
+export { DivisionFormatter, IDivisionFormatterProps };

package/formatters/DivisionFormatter/DivisionFormatter.js

@@ -6,13 +6,35 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { DivisionUtil } from './DivisionUtil';
 /**
- * The `DivisionFormatter` takes a country code or name and produces either
- * an emoji flag, the country name, or both, depending on the `type` prop.
+ * Displays the full name of a country subdivision (state, province, region).
+ *
+ * Accepts an ISO 3166-2 subdivision code in the format `"XX-YY"` where `XX`
+ * is the country code and `YY` is the subdivision code. Returns the full
+ * name of the subdivision.
+ *
+ * ## Output Examples
+ *
+ * | Input | Output |
+ * |-------|--------|
+ * | `"US-CA"` | California |
+ * | `"US-NY"` | New York |
+ * | `"CA-NS"` | Nova Scotia |
+ * | `"CA-BC"` | British Columbia |
+ * | `"GB-ENG"` | England |
+ * | `"AU-NSW"` | New South Wales |
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <DivisionFormatter value="US-CA" />
+ * <DivisionFormatter value="CA-NS" />
+ * ```
  */
 var DivisionFormatter = function (_a) {
     var value = _a.value;
     return React.createElement(Name, null, DivisionUtil.getDivisionName(value));
 };
-var Name = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  overflow: hidden;  \n"], ["\n  text-overflow: ellipsis;\n  overflow: hidden;  \n"])));
+var Name = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"], ["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+DivisionFormatter.displayName = 'DivisionFormatter';
 export { DivisionFormatter };
 var templateObject_1;

package/formatters/FilesizeFormatter/FilesizeFormatter.d.ts

@@ -22,21 +22,37 @@ interface IFilesizeFormatterProps {
     decimals?: number;
 }
 /**
- * `FilesizeFormatter` displays a human-readable file size string from a
- * number of bytes.
+ * Converts a byte count into a human-readable file size string with
+ * appropriate unit suffix.
  *
- * Supports SI (base 1000) and binary (base 1024) unit systems.
+ * Supports two unit systems:
+ * - **SI (default)**: Base 1000 (kB, MB, GB, TB, ...)
+ * - **Binary**: Base 1024 (KiB, MiB, GiB, TiB, ...)
  *
- * Localized formatting via `Intl.NumberFormat`.
+ * Use SI units for user-facing displays (matches how most operating systems
+ * report disk space). Use binary units for technical contexts where precise
+ * power-of-two values matter (e.g., RAM, disk sectors).
+ *
+ * ## Output Examples
+ *
+ * | Input | Props | Output |
+ * |-------|-------|--------|
+ * | `500` | (default) | `500 B` |
+ * | `10000` | (default) | `10 kB` |
+ * | `1048576` | `unit="binary"` | `1 MiB` |
+ * | `1500000000` | (default) | `1.5 GB` |
+ * | `1500000000` | `locale="de-DE"` | `1,5 GB` |
+ *
+ * ## Usage
  *
  * ```tsx
- * <FilesizeFormatter value={10000} unit="si" />        // "10.00 kB"
- * <FilesizeFormatter value={1048576} unit="binary" />  // "1.00 MiB"
- * <FilesizeFormatter value="2048000" locale="de-DE" /> // "2,05 MB"
+ * <FilesizeFormatter value={10000} />
+ * <FilesizeFormatter value={1048576} unit="binary" />
+ * <FilesizeFormatter value={2048000} locale="de-DE" />
  * ```
  */
 declare const FilesizeFormatter: {
-    ({ value, unit, locale, decimals, }: IFilesizeFormatterProps): string | React.JSX.Element;
+    ({ value, unit, locale, decimals, }: IFilesizeFormatterProps): React.JSX.Element;
     displayName: string;
 };
 export { FilesizeFormatter, IFilesizeFormatterProps };

package/formatters/FilesizeFormatter/FilesizeFormatter.js

@@ -1,46 +1,65 @@
 import * as React from 'react';
 /**
- * `FilesizeFormatter` displays a human-readable file size string from a
- * number of bytes.
+ * Converts a byte count into a human-readable file size string with
+ * appropriate unit suffix.
  *
- * Supports SI (base 1000) and binary (base 1024) unit systems.
+ * Supports two unit systems:
+ * - **SI (default)**: Base 1000 (kB, MB, GB, TB, ...)
+ * - **Binary**: Base 1024 (KiB, MiB, GiB, TiB, ...)
  *
- * Localized formatting via `Intl.NumberFormat`.
+ * Use SI units for user-facing displays (matches how most operating systems
+ * report disk space). Use binary units for technical contexts where precise
+ * power-of-two values matter (e.g., RAM, disk sectors).
+ *
+ * ## Output Examples
+ *
+ * | Input | Props | Output |
+ * |-------|-------|--------|
+ * | `500` | (default) | `500 B` |
+ * | `10000` | (default) | `10 kB` |
+ * | `1048576` | `unit="binary"` | `1 MiB` |
+ * | `1500000000` | (default) | `1.5 GB` |
+ * | `1500000000` | `locale="de-DE"` | `1,5 GB` |
+ *
+ * ## Usage
  *
  * ```tsx
- * <FilesizeFormatter value={10000} unit="si" />        // "10.00 kB"
- * <FilesizeFormatter value={1048576} unit="binary" />  // "1.00 MiB"
- * <FilesizeFormatter value="2048000" locale="de-DE" /> // "2,05 MB"
+ * <FilesizeFormatter value={10000} />
+ * <FilesizeFormatter value={1048576} unit="binary" />
+ * <FilesizeFormatter value={2048000} locale="de-DE" />
  * ```
  */
 var FilesizeFormatter = function (_a) {
     var value = _a.value, _b = _a.unit, unit = _b === void 0 ? 'si' : _b, _c = _a.locale, locale = _c === void 0 ? 'en' : _c, _d = _a.decimals, decimals = _d === void 0 ? 2 : _d;
-    if (value == null)
-        return null;
-    var num = typeof value === 'string' ? parseFloat(value) : value;
-    if (isNaN(num))
-        return null;
-    var threshold = unit === 'si' ? 1000 : 1024;
-    var units = unit === 'si'
-        ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-        : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
-    if (Math.abs(num) < threshold) {
-        return "".concat(num, " B");
-    }
-    var size = num;
-    var u = -1;
-    do {
-        size /= threshold;
-        ++u;
-    } while (Math.abs(size) >= threshold && u < units.length - 1);
-    var formatter = new Intl.NumberFormat(locale, {
+    // Memoize the formatter to avoid creating a new instance on every render
+    var formatter = React.useMemo(function () { return new Intl.NumberFormat(locale, {
         maximumFractionDigits: decimals,
         minimumFractionDigits: 0,
-    });
-    return (React.createElement(React.Fragment, null,
-        formatter.format(size),
-        " ",
-        units[u]));
+    }); }, [locale, decimals]);
+    var formatted = React.useMemo(function () {
+        if (value == null)
+            return null;
+        var num = typeof value === 'string' ? parseFloat(value) : value;
+        if (isNaN(num))
+            return null;
+        var threshold = unit === 'si' ? 1000 : 1024;
+        var units = unit === 'si'
+            ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+            : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+        if (Math.abs(num) < threshold) {
+            return "".concat(num, " B");
+        }
+        var size = num;
+        var u = -1;
+        do {
+            size /= threshold;
+            ++u;
+        } while (Math.abs(size) >= threshold && u < units.length - 1);
+        return "".concat(formatter.format(size), " ").concat(units[u]);
+    }, [value, unit, formatter]);
+    if (formatted === null)
+        return null;
+    return React.createElement(React.Fragment, null, formatted);
 };
 FilesizeFormatter.displayName = 'FilesizeFormatter';
 export { FilesizeFormatter };

package/formatters/GIS/CoordinateFormatter.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+interface ICoordinateFormatterProps {
+    /**
+     * Value to format.
+     */
+    value: number | string;
+    /**
+     * Type of coordinate: 'latitude' or 'longitude'.
+     * Latitude values must be between -90 and 90 degrees.
+     * Longitude values must be between -180 and 180 degrees.
+     */
+    type: 'latitude' | 'longitude';
+    /**
+     * String to show if formatting fails.
+     * @default "(no coordinates)"
+     */
+    defaultStr?: string;
+}
+/**
+ * Formats decimal coordinates as degrees, minutes, and seconds (DMS).
+ *
+ * Converts fractional latitude/longitude values to the traditional DMS
+ * notation used in navigation and cartography (e.g., `34° 13′ 18″ N`).
+ *
+ * ## Valid Ranges
+ *
+ * - **Latitude**: -90 to 90 (negative = South, positive = North)
+ * - **Longitude**: -180 to 180 (negative = West, positive = East)
+ *
+ * Values outside these ranges return the fallback string.
+ *
+ * ## Output Examples
+ *
+ * | Value | Type | Output |
+ * |-------|------|--------|
+ * | `34.2216` | `latitude` | 34° 13′ 18″ N |
+ * | `-34.2216` | `latitude` | 34° 13′ 18″ S |
+ * | `-118.4848` | `longitude` | 118° 29′ 05″ W |
+ * | `139.6917` | `longitude` | 139° 41′ 30″ E |
+ * | `null` | any | (no coordinates) |
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <CoordinateFormatter type="latitude" value={34.2216} />
+ * <CoordinateFormatter type="longitude" value={-118.4848} />
+ * <CoordinateFormatter type="latitude" value={null} defaultStr="N/A" />
+ * ```
+ *
+ * For convenience, you can also use the specialized wrappers:
+ * - `<LatitudeFormatter value={34.2216} />`
+ * - `<LongitudeFormatter value={-118.4848} />`
+ */
+declare const CoordinateFormatter: {
+    ({ value, type, defaultStr }: ICoordinateFormatterProps): React.JSX.Element;
+    displayName: string;
+};
+export { CoordinateFormatter, ICoordinateFormatterProps };

package/formatters/GIS/CoordinateFormatter.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { DMS } from '../../helper/DMS';
+var COORDINATE_CONFIG = {
+    latitude: { max: 90, positive: 'N', negative: 'S' },
+    longitude: { max: 180, positive: 'E', negative: 'W' }
+};
+/**
+ * Formats decimal coordinates as degrees, minutes, and seconds (DMS).
+ *
+ * Converts fractional latitude/longitude values to the traditional DMS
+ * notation used in navigation and cartography (e.g., `34° 13′ 18″ N`).
+ *
+ * ## Valid Ranges
+ *
+ * - **Latitude**: -90 to 90 (negative = South, positive = North)
+ * - **Longitude**: -180 to 180 (negative = West, positive = East)
+ *
+ * Values outside these ranges return the fallback string.
+ *
+ * ## Output Examples
+ *
+ * | Value | Type | Output |
+ * |-------|------|--------|
+ * | `34.2216` | `latitude` | 34° 13′ 18″ N |
+ * | `-34.2216` | `latitude` | 34° 13′ 18″ S |
+ * | `-118.4848` | `longitude` | 118° 29′ 05″ W |
+ * | `139.6917` | `longitude` | 139° 41′ 30″ E |
+ * | `null` | any | (no coordinates) |
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <CoordinateFormatter type="latitude" value={34.2216} />
+ * <CoordinateFormatter type="longitude" value={-118.4848} />
+ * <CoordinateFormatter type="latitude" value={null} defaultStr="N/A" />
+ * ```
+ *
+ * For convenience, you can also use the specialized wrappers:
+ * - `<LatitudeFormatter value={34.2216} />`
+ * - `<LongitudeFormatter value={-118.4848} />`
+ */
+var CoordinateFormatter = function (_a) {
+    var value = _a.value, type = _a.type, _b = _a.defaultStr, defaultStr = _b === void 0 ? "(no coordinates)" : _b;
+    var config = COORDINATE_CONFIG[type];
+    var formatted = React.useMemo(function () {
+        return DMS.toDMSString(value, defaultStr, config.max, config.positive, config.negative);
+    }, [value, defaultStr, config]);
+    return React.createElement(React.Fragment, null, formatted);
+};
+CoordinateFormatter.displayName = "CoordinateFormatter";
+export { CoordinateFormatter };

package/formatters/GIS/LatitudeFormatter.d.ts

@@ -11,13 +11,14 @@ interface ILatitudeFormatterProps {
     defaultStr?: string;
 }
 /**
- * Formats a fractional latitude value as degrees, minutes and seconds (as a
- * string). If provided with a string, `LatitudeFormatter` will convert it to
- * a number first. Returns the fallback string if formatting fails or value
- * is out of range.
+ * Formats a fractional latitude value as degrees, minutes and seconds (DMS format).
+ * If provided with a string, `LatitudeFormatter` will convert it to a number first.
+ * Returns the fallback string if formatting fails or value is out of range.
  *
  * Latitude value must be between -90 and 90 degrees.
  *
+ * This is a convenience wrapper around `CoordinateFormatter` with `type="latitude"`.
+ *
  * ```tsx
  * <LatitudeFormatter value={34.2216}/>
  * <LatitudeFormatter value={null} defaultStr="Invalid latitude"/>

package/formatters/GIS/LatitudeFormatter.js

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { DMS } from '../../helper/DMS';
+import { CoordinateFormatter } from './CoordinateFormatter';
 /**
- * Formats a fractional latitude value as degrees, minutes and seconds (as a
- * string). If provided with a string, `LatitudeFormatter` will convert it to
- * a number first. Returns the fallback string if formatting fails or value
- * is out of range.
+ * Formats a fractional latitude value as degrees, minutes and seconds (DMS format).
+ * If provided with a string, `LatitudeFormatter` will convert it to a number first.
+ * Returns the fallback string if formatting fails or value is out of range.
  *
  * Latitude value must be between -90 and 90 degrees.
  *
+ * This is a convenience wrapper around `CoordinateFormatter` with `type="latitude"`.
+ *
  * ```tsx
  * <LatitudeFormatter value={34.2216}/>
  * <LatitudeFormatter value={null} defaultStr="Invalid latitude"/>
@@ -15,12 +16,7 @@ import { DMS } from '../../helper/DMS';
  */
 var LatitudeFormatter = function (_a) {
     var value = _a.value, _b = _a.defaultStr, defaultStr = _b === void 0 ? "(no coordinates)" : _b;
-    // Value and defaultStr and mostly stable. Memoize the formatted string to
-    // avoid unnecessary recalculations on every render.
-    var formatted = React.useMemo(function () {
-        return DMS.toDMSString(value, defaultStr, 90, "N", "S");
-    }, [value, defaultStr]);
-    return (React.createElement(React.Fragment, null, formatted));
+    return (React.createElement(CoordinateFormatter, { type: "latitude", value: value, defaultStr: defaultStr }));
 };
 LatitudeFormatter.displayName = "LatitudeFormatter";
 export { LatitudeFormatter };

package/formatters/GIS/LongitudeFormatter.d.ts

@@ -11,15 +11,18 @@ interface ILongitudeFormatterProps {
     defaultStr?: string;
 }
 /**
- * Formats a fractional longitude value as degrees, minutes and seconds (as a
- * string). If provided with a string, `LongitudeFormatter` will convert it to
- * a number first. Returns the fallback string if formatting fails or value is
- * out of range.
+ * Formats a fractional longitude value as degrees, minutes and seconds (DMS format).
+ * If provided with a string, `LongitudeFormatter` will convert it to a number first.
+ * Returns the fallback string if formatting fails or value is out of range.
+ *
+ * Longitude value must be between -180 and 180 degrees.
+ *
+ * This is a convenience wrapper around `CoordinateFormatter` with `type="longitude"`.
  *
  * ```tsx
- * <LongitudeFormatter value={34.2216}/>
+ * <LongitudeFormatter value={-118.4848}/>
  * <LongitudeFormatter value={null} defaultStr="Invalid longitude"/>
- * ```*
+ * ```
  */
 declare const LongitudeFormatter: {
     ({ value, defaultStr }: ILongitudeFormatterProps): React.JSX.Element;

package/formatters/GIS/LongitudeFormatter.js

@@ -1,24 +1,22 @@
 import * as React from 'react';
-import { DMS } from '../../helper/DMS';
+import { CoordinateFormatter } from './CoordinateFormatter';
 /**
- * Formats a fractional longitude value as degrees, minutes and seconds (as a
- * string). If provided with a string, `LongitudeFormatter` will convert it to
- * a number first. Returns the fallback string if formatting fails or value is
- * out of range.
+ * Formats a fractional longitude value as degrees, minutes and seconds (DMS format).
+ * If provided with a string, `LongitudeFormatter` will convert it to a number first.
+ * Returns the fallback string if formatting fails or value is out of range.
+ *
+ * Longitude value must be between -180 and 180 degrees.
+ *
+ * This is a convenience wrapper around `CoordinateFormatter` with `type="longitude"`.
  *
  * ```tsx
- * <LongitudeFormatter value={34.2216}/>
+ * <LongitudeFormatter value={-118.4848}/>
  * <LongitudeFormatter value={null} defaultStr="Invalid longitude"/>
- * ```*
+ * ```
  */
 var LongitudeFormatter = function (_a) {
     var value = _a.value, _b = _a.defaultStr, defaultStr = _b === void 0 ? "(no coordinates)" : _b;
-    // Value and defaultStr and mostly stable. Memoize the formatted string to
-    // avoid unnecessary recalculations on every render.
-    var formatted = React.useMemo(function () {
-        return DMS.toDMSString(value, defaultStr, 180, "E", "W");
-    }, [value, defaultStr]);
-    return (React.createElement(React.Fragment, null, formatted));
+    return (React.createElement(CoordinateFormatter, { type: "longitude", value: value, defaultStr: defaultStr }));
 };
 LongitudeFormatter.displayName = "LongitudeFormatter";
 export { LongitudeFormatter };

package/formatters/GIS/index.d.ts

@@ -1,2 +1,3 @@
+export * from './CoordinateFormatter';
 export * from './LatitudeFormatter';
 export * from './LongitudeFormatter';

package/formatters/GIS/index.js

@@ -1,2 +1,3 @@
+export * from './CoordinateFormatter';
 export * from './LatitudeFormatter';
 export * from './LongitudeFormatter';