@reykjavik/hanna-react 0.10.140 → 0.10.142

package/CHANGELOG.md

@@ -4,6 +4,22 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.142
+
+_2024-11-28_
+
+- feat: Deprecate `focus-visible` polyfill module; browser support is now good
+- `Datepicker`:
+  - fix: Set `minDate` prop values to `T00:00` to allow manual min date input
+
+## 0.10.141
+
+_2024-11-25_
+
+- `DropdownButton`:
+  - feat: Support rendering `current` status of menu items
+  - feat: Add prop `onItemClick`
+
 ## 0.10.140
 
 _2024-11-21_

package/Datepicker.js

@@ -116,6 +116,8 @@ const defaultDatepickerTexts = {
 const Datepicker = (props) => {
     const { placeholder, dateFormat, name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, inputRef, isoMode, texts, lang = props.localeCode, // eslint-disable-line deprecation/deprecation
     fieldWrapperProps, } = (0, FormField_js_1.groupFormFieldWrapperProps)(props);
+    // Make sure all minDates are at the start of the day
+    const minDateNormalized = minDate ? new Date(minDate.setHours(0, 0, 0, 0)) : undefined;
     const [value, setValue] = utils_js_1.useMixedControlState.raw(props.value || props.initialDate, // eslint-disable-line deprecation/deprecation
     props.defaultValue, 'value');
     /*
@@ -164,7 +166,7 @@ const Datepicker = (props) => {
                     }, placeholderText: placeholder, 
                     // TODO: Implement this
                     // selectsRange
-                    minDate: minDate, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps))));
+                    minDate: minDateNormalized, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps))));
         } })));
 };
 exports.Datepicker = Datepicker;

package/DropdownButton.d.ts

@@ -12,12 +12,18 @@ export type DropdownButtonItem = MainMenu2Item & {
 export type DropdownButtonCustomItem = (props: {
     closeMenu: () => void;
 }) => React.ReactElement;
-export type DropdownButtonProps = Prefix<Omit<ButtonVariantProps, 'small'>, 'button'> & {
+export type DropdownButtonProps = {
     label: string | NonNullable<React.ReactElement>;
     labelLong?: string;
+    items: Array<DropdownButtonItem | DropdownButtonCustomItem>;
+    /**
+     * NOTE: Clicking a MainMenu2 item will automatically close HannaUIState's
+     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * … unless the `onItemClick` function explicitly returns `false`.
+     */
+    onItemClick?: (item: MainMenu2Item) => void | boolean;
     /** Default: `"seconcary"` */
     buttonType?: 'primary' | 'secondary';
-    items: Array<DropdownButtonItem | DropdownButtonCustomItem>;
-} & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
+} & Prefix<Omit<ButtonVariantProps, 'small'>, 'button'> & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
 export declare const DropdownButton: (props: DropdownButtonProps) => JSX.Element;
 export {};

package/DropdownButton.js

@@ -24,7 +24,7 @@ const DropdownButton = (props) => {
         middleware: [(0, react_2.flip)(), (0, react_2.shift)()],
         whileElementsMounted: react_2.autoUpdate,
     });
-    const { wrapperProps = {} } = props;
+    const { onItemClick, wrapperProps = {} } = props;
     return (react_1.default.createElement("details", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('DropdownButton', isOpen && 'open', wrapperProps.className), open: isOpen, onBlur: (e) => {
             var _a;
             if (!isHovering) {
@@ -68,9 +68,15 @@ const DropdownButton = (props) => {
                     'data-icon': item.icon,
                     'arial-label': item.labelLong,
                 };
-                return (react_1.default.createElement("li", { key: i, className: "DropdownButton__item" }, isBrowser && onClick ? (react_1.default.createElement("button", Object.assign({}, commonProps, { type: "button", "aria-controls": item.controlsId, onClick: (e) => {
-                        onClick(item) !== false && closeMenuStat();
-                    } }), label)) : href != null ? (react_1.default.createElement("a", Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: item.target }), label)) : null));
+                const doRenderButton = isBrowser && (onClick || (onItemClick && href == null));
+                return (react_1.default.createElement("li", { key: i, className: (0, hanna_utils_1.modifiedClass)('DropdownButton__item', item.modifier), "aria-current": item.current || undefined }, doRenderButton ? (react_1.default.createElement("button", Object.assign({}, commonProps, { type: "button", "aria-controls": item.controlsId, onClick: () => {
+                        const keepOpen1 = onClick && onClick(item) === false;
+                        const keepOpen2 = onItemClick && onItemClick(item) === false;
+                        !(keepOpen1 || keepOpen2) && closeMenuStat();
+                    } }), label)) : href != null ? (react_1.default.createElement("a", Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: item.target, onClick: () => {
+                        const keepOpen = onItemClick && onItemClick(item) === false;
+                        !keepOpen && closeMenuStat();
+                    } }), label)) : null));
             }),
             react_1.default.createElement(FocusTrap_js_1.FocusTrap, { Tag: "li", depth: 2 }))));
 };

package/MainMenu2.js

@@ -89,7 +89,8 @@ const getRenderers = (props) => {
                 size: 'small',
             }
             : undefined;
-        return (react_1.default.createElement(Tag, { key: key, className: (0, hanna_utils_1.modifiedClass)(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || (href == null && onItemClick)) ? (react_1.default.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
+        const doRenderButton = isBrowser && (onClick || (onItemClick && href == null));
+        return (react_1.default.createElement(Tag, { key: key, className: (0, hanna_utils_1.modifiedClass)(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, doRenderButton ? (react_1.default.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
                 const keepOpen1 = onClick && onClick(item) === false;
                 const keepOpen2 = onItemClick && onItemClick(item) === false;
                 !(keepOpen1 || keepOpen2) && closeMenu();

package/esm/Datepicker.js

@@ -111,6 +111,8 @@ const defaultDatepickerTexts = {
 export const Datepicker = (props) => {
     const { placeholder, dateFormat, name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, inputRef, isoMode, texts, lang = props.localeCode, // eslint-disable-line deprecation/deprecation
     fieldWrapperProps, } = groupFormFieldWrapperProps(props);
+    // Make sure all minDates are at the start of the day
+    const minDateNormalized = minDate ? new Date(minDate.setHours(0, 0, 0, 0)) : undefined;
     const [value, setValue] = useMixedControlState.raw(props.value || props.initialDate, // eslint-disable-line deprecation/deprecation
     props.defaultValue, 'value');
     /*
@@ -159,7 +161,7 @@ export const Datepicker = (props) => {
                     }, placeholderText: placeholder, 
                     // TODO: Implement this
                     // selectsRange
-                    minDate: minDate, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps))));
+                    minDate: minDateNormalized, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps))));
         } })));
 };
 export default Datepicker;

package/esm/DropdownButton.d.ts

@@ -12,12 +12,18 @@ export type DropdownButtonItem = MainMenu2Item & {
 export type DropdownButtonCustomItem = (props: {
     closeMenu: () => void;
 }) => React.ReactElement;
-export type DropdownButtonProps = Prefix<Omit<ButtonVariantProps, 'small'>, 'button'> & {
+export type DropdownButtonProps = {
     label: string | NonNullable<React.ReactElement>;
     labelLong?: string;
+    items: Array<DropdownButtonItem | DropdownButtonCustomItem>;
+    /**
+     * NOTE: Clicking a MainMenu2 item will automatically close HannaUIState's
+     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * … unless the `onItemClick` function explicitly returns `false`.
+     */
+    onItemClick?: (item: MainMenu2Item) => void | boolean;
     /** Default: `"seconcary"` */
     buttonType?: 'primary' | 'secondary';
-    items: Array<DropdownButtonItem | DropdownButtonCustomItem>;
-} & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
+} & Prefix<Omit<ButtonVariantProps, 'small'>, 'button'> & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
 export declare const DropdownButton: (props: DropdownButtonProps) => JSX.Element;
 export {};

package/esm/DropdownButton.js

@@ -20,7 +20,7 @@ export const DropdownButton = (props) => {
         middleware: [flip(), shift()],
         whileElementsMounted: autoUpdate,
     });
-    const { wrapperProps = {} } = props;
+    const { onItemClick, wrapperProps = {} } = props;
     return (React.createElement("details", Object.assign({}, wrapperProps, { className: modifiedClass('DropdownButton', isOpen && 'open', wrapperProps.className), open: isOpen, onBlur: (e) => {
             var _a;
             if (!isHovering) {
@@ -64,9 +64,15 @@ export const DropdownButton = (props) => {
                     'data-icon': item.icon,
                     'arial-label': item.labelLong,
                 };
-                return (React.createElement("li", { key: i, className: "DropdownButton__item" }, isBrowser && onClick ? (React.createElement("button", Object.assign({}, commonProps, { type: "button", "aria-controls": item.controlsId, onClick: (e) => {
-                        onClick(item) !== false && closeMenuStat();
-                    } }), label)) : href != null ? (React.createElement("a", Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: item.target }), label)) : null));
+                const doRenderButton = isBrowser && (onClick || (onItemClick && href == null));
+                return (React.createElement("li", { key: i, className: modifiedClass('DropdownButton__item', item.modifier), "aria-current": item.current || undefined }, doRenderButton ? (React.createElement("button", Object.assign({}, commonProps, { type: "button", "aria-controls": item.controlsId, onClick: () => {
+                        const keepOpen1 = onClick && onClick(item) === false;
+                        const keepOpen2 = onItemClick && onItemClick(item) === false;
+                        !(keepOpen1 || keepOpen2) && closeMenuStat();
+                    } }), label)) : href != null ? (React.createElement("a", Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: item.target, onClick: () => {
+                        const keepOpen = onItemClick && onItemClick(item) === false;
+                        !keepOpen && closeMenuStat();
+                    } }), label)) : null));
             }),
             React.createElement(FocusTrap, { Tag: "li", depth: 2 }))));
 };

package/esm/MainMenu2.js

@@ -85,7 +85,8 @@ const getRenderers = (props) => {
                 size: 'small',
             }
             : undefined;
-        return (React.createElement(Tag, { key: key, className: modifiedClass(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || (href == null && onItemClick)) ? (React.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
+        const doRenderButton = isBrowser && (onClick || (onItemClick && href == null));
+        return (React.createElement(Tag, { key: key, className: modifiedClass(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, doRenderButton ? (React.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
                 const keepOpen1 = onClick && onClick(item) === false;
                 const keepOpen2 = onItemClick && onItemClick(item) === false;
                 !(keepOpen1 || keepOpen2) && closeMenu();

package/esm/focus-visible.js

@@ -1,3 +1,11 @@
 // expose `focus-visible` to consumers of `@reykjavik/hanna-react`
 // without requiring them to install it as a dependency in their project.
 import '@reykjavik/hanna-utils/focus-visible';
+/** @deprecated  This polyfill is not needed anymore  (Will be removed in v0.11) */
+if (process.env.NODE_ENV !== 'production') {
+    console.warn('Deprecation Warning:\n' +
+        'The `focus-visible` polyfill isn not needed anymore as browser support ' +
+        '  is now widespread. You can safely remove all imports of the ' +
+        '`@reykjavik/hanna-react/focus-visible` module from your project..\n' +
+        '(This module will be removed in v0.11 of `@reykjavik/hanna-react`)');
+}

package/focus-visible.js

@@ -3,3 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // expose `focus-visible` to consumers of `@reykjavik/hanna-react`
 // without requiring them to install it as a dependency in their project.
 require("@reykjavik/hanna-utils/focus-visible");
+/** @deprecated  This polyfill is not needed anymore  (Will be removed in v0.11) */
+if (process.env.NODE_ENV !== 'production') {
+    console.warn('Deprecation Warning:\n' +
+        'The `focus-visible` polyfill isn not needed anymore as browser support ' +
+        '  is now widespread. You can safely remove all imports of the ' +
+        '`@reykjavik/hanna-react/focus-visible` module from your project..\n' +
+        '(This module will be removed in v0.11 of `@reykjavik/hanna-react`)');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.140",
+	"version": "0.10.142",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",