@longline/aqua-ui 1.0.229 → 1.0.231

package/formatters/DateTimeFormatter/DateTimeFormatter.d.ts

@@ -1,12 +1,11 @@
 import * as React from 'react';
-type TType = 'longdate' | 'shortdate' | 'longdatetime' | 'shortdatetime' | 'longtime' | 'shorttime' | 'distance' | 'month';
 interface IDateTimeFormatterProps {
     /**
-     * Input date. This can either be a `Date` or a `string`.
+     * Input date. This can either be a `Date` or a `string`, e.g. `2025-09-22T10:05:41.074Z`.
      */
     value: string | Date;
     /**
-     * Optional `Locale`.
+     * Optional `Locale`, e.g. `es`
      */
     locale?: string;
 }
@@ -19,10 +18,11 @@ interface IDateTimeFormatterAnimateProps {
 }
 interface IProps extends IDateTimeFormatterProps, IDateTimeFormatterAnimateProps {
     /**
-     * Preset format.
+     * Preset format _or_ a `Intl.DateTimeFormatOptions` object for
+     * custom formatting.
      * @default longdate
      */
-    type?: TType;
+    type?: 'longdate' | 'shortdate' | 'longdatetime' | 'shortdatetime' | 'longtime' | 'shorttime' | 'distance' | 'month' | Intl.DateTimeFormatOptions;
 }
 /**
  * `DateTimeFormatter` formats a date or time to a string.
@@ -45,7 +45,6 @@ interface IProps extends IDateTimeFormatterProps, IDateTimeFormatterAnimateProps
  */
 declare const DateTimeFormatter: {
     ({ type, ...props }: IProps): React.JSX.Element;
-    displayName: string;
     LongDate: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
     ShortDate: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;
     LongDateTime: React.MemoExoticComponent<({ value, locale }: IDateTimeFormatterProps) => React.JSX.Element>;

package/formatters/DateTimeFormatter/DateTimeFormatter.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { DistanceDate, LongDate, LongDateTime, LongTime, ShortDate, ShortDateTime, ShortTime, Month } from './elements';
+import { DistanceDate, LongDate, LongDateTime, LongTime, ShortDate, ShortDateTime, ShortTime, Month, Custom, } from './elements';
 /**
  * `DateTimeFormatter` formats a date or time to a string.
  *
@@ -53,10 +53,9 @@ var DateTimeFormatter = function (_a) {
         case 'distance': return React.createElement(DistanceDate, __assign({}, props));
         case 'month': return React.createElement(Month, __assign({}, props));
         default:
-            return null;
+            return React.createElement(Custom, __assign({}, props, { format: type }));
     }
 };
-DateTimeFormatter.displayName = "DateTime";
 // Bonus: users can either use the `type` prop, or import the individual 
 // components directly:
 DateTimeFormatter.LongDate = LongDate;

package/formatters/DateTimeFormatter/elements/Custom.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { IDateTimeFormatterProps } from '../DateTimeFormatter';
+interface IProps {
+    format: Intl.DateTimeFormatOptions;
+}
+/**
+ * `CustomDateTime` formats a date/time value into a string, according to
+ * a custom format (as an `Intl.DateTimeFormatOptions` object, see
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat).
+ *
+ * It also sets the full date/time as the `title` attribute for accessibility
+ * and UX, so users can see the full timestamp on hover.
+ *
+ * Accepts a `Date` object or a date string as `value`. If `value` is `null`
+ * or invalid, the component returns `null` and renders nothing.
+ *
+ * Optionally, a `locale` prop can be provided to format the date/time string
+ * accordingto locale-specific rules.
+ *
+ * The formatted output is wrapped in a `<time>` element with a machine-readable
+ * `dateTime` attribute to improve semantics and SEO.
+ *
+ * @example
+ * ```tsx
+ * <DateTimeFormatter.Custom value={new Date()} format={{
+ *   day: 'numeric',       // e.g. 28
+ *   month: 'short',       // e.g. Sep
+ *   year: 'numeric',      // e.g. 2024
+ *   hour: '2-digit',      // e.g. 14 (24-hour format)
+ *   minute: '2-digit',    // e.g. 30
+ *   hour12: false         // 24-hour time, remove if you want 12-hour time
+ * }}/>
+ * ```
+ */
+declare const Custom: React.MemoExoticComponent<({ value, locale, format }: IDateTimeFormatterProps & IProps) => React.JSX.Element>;
+export { Custom };

package/formatters/DateTimeFormatter/elements/Custom.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { toDate } from './toDate';
+/**
+ * `CustomDateTime` formats a date/time value into a string, according to
+ * a custom format (as an `Intl.DateTimeFormatOptions` object, see
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat).
+ *
+ * It also sets the full date/time as the `title` attribute for accessibility
+ * and UX, so users can see the full timestamp on hover.
+ *
+ * Accepts a `Date` object or a date string as `value`. If `value` is `null`
+ * or invalid, the component returns `null` and renders nothing.
+ *
+ * Optionally, a `locale` prop can be provided to format the date/time string
+ * accordingto locale-specific rules.
+ *
+ * The formatted output is wrapped in a `<time>` element with a machine-readable
+ * `dateTime` attribute to improve semantics and SEO.
+ *
+ * @example
+ * ```tsx
+ * <DateTimeFormatter.Custom value={new Date()} format={{
+ *   day: 'numeric',       // e.g. 28
+ *   month: 'short',       // e.g. Sep
+ *   year: 'numeric',      // e.g. 2024
+ *   hour: '2-digit',      // e.g. 14 (24-hour format)
+ *   minute: '2-digit',    // e.g. 30
+ *   hour12: false         // 24-hour time, remove if you want 12-hour time
+ * }}/>
+ * ```
+ */
+var Custom = React.memo(function (_a) {
+    var value = _a.value, locale = _a.locale, format = _a.format;
+    if (value == null)
+        return null;
+    var date = toDate(value);
+    if (isNaN(date.getTime()))
+        return null; // Extra check for invalid dates
+    var display = React.useMemo(function () { return new Intl.DateTimeFormat(locale || undefined, format).format(date); }, [date, locale]);
+    return (React.createElement("time", { dateTime: date.toISOString(), title: display }, display));
+});
+Custom.displayName = "DateTimeFormatter.Custom";
+export { Custom };

package/formatters/DateTimeFormatter/elements/LongDate.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { IDateTimeFormatterProps } from '../DateTimeFormatter';
 /**
  * `LongDate` formats a date value into a long date string, such as
- * "Mon, 1 January 2023". It also sets a full date description as the
+ * "Monday, 1 January 2023". It also sets a full date description as the
  * title attribute for better accessibility.
  *
  * The component accepts either a `Date` object or a date string as `value`.

package/formatters/DateTimeFormatter/elements/LongDate.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { toDate } from './toDate';
 /**
  * `LongDate` formats a date value into a long date string, such as
- * "Mon, 1 January 2023". It also sets a full date description as the
+ * "Monday, 1 January 2023". It also sets a full date description as the
  * title attribute for better accessibility.
  *
  * The component accepts either a `Date` object or a date string as `value`.

package/formatters/DateTimeFormatter/elements/index.d.ts

@@ -6,3 +6,4 @@ export * from './ShortDateTime';
 export * from './LongDateTime';
 export * from './DistanceDate';
 export * from './Month';
+export * from './Custom';

package/formatters/DateTimeFormatter/elements/index.js

@@ -6,3 +6,4 @@ export * from './ShortDateTime';
 export * from './LongDateTime';
 export * from './DistanceDate';
 export * from './Month';
+export * from './Custom';

package/hooks/useOutsideClose/useOutsideClose.js

@@ -55,7 +55,7 @@ function useOutsideClose(_a) {
         // If component isn't open, then do nothing:
         if (!open)
             return undefined;
-        // When the HTML document gets clicked, see if the click in side one of 
+        // When the HTML document gets clicked, see if the click is inside one of 
         // the HTML elements that were passed in. If so, do nothing. It outside 
         // these elements, close the component. 
         var handleClick = function (e) {

package/modules/Filter/Filter.js

@@ -40,7 +40,7 @@ var FilterBase = function (props) {
         refs: [paneRef, buttonRef],
         onClose: function () { return setOpen(false); },
         escapeToClose: true,
-        blurToClose: true
+        blurToClose: false
     });
     var _b = usePopper(buttonRef.current, paneRef.current, {
         placement: 'bottom-end',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.229",
+  "version": "1.0.231",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",