@uxf/core 11.85.0 → 11.87.0

package/README.md

@@ -285,6 +285,42 @@ import { filterNullish } from "@uxf/core/utils/filter-nullish";
 filterNullish([0, "text", null, undefined, [], {}]); /* returns [0, "text", [], {}]  */
 ```
 
+## filterAriaAndDataAttrs
+
+Filters an object to return only properties that start with `aria-` or `data-` prefixes. This utility is useful when you need to pass accessibility and data attributes to HTML elements while excluding other props like event handlers or component-specific props.
+
+```tsx
+import { filterAriaAndDataAttrs } from "@uxf/core/utils/filter-aria-and-data-attrs";
+
+// Filter accessibility and data attributes from component props
+const props = {
+    "aria-label": "Close button",
+    "data-testid": "close-btn",
+    className: "button",
+    onClick: handleClick,
+};
+
+const htmlAttrs = filterAriaAndDataAttrs(props);
+// Result: { "aria-label": "Close button", "data-testid": "close-btn" }
+
+<button {...htmlAttrs}>Close</button>
+```
+
+```tsx
+// Use case: Passing only safe attributes to a native element
+function CustomInput({ label, onChange, ...restProps }) {
+    const accessibilityAttrs = filterAriaAndDataAttrs(restProps);
+
+    return <input {...accessibilityAttrs} onChange={onChange} />;
+}
+
+<CustomInput
+    aria-describedby="helper-text"
+    data-analytics="email-input"
+    customProp="ignored"
+/>
+```
+
 ### formatBytes
 
 Appends suitable unit to the byte value of data size.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/core",
-    "version": "11.85.0",
+    "version": "11.87.0",
     "description": "UXF Core",
     "author": "Petr Vejvoda <vejvoda@uxf.cz>",
     "homepage": "https://gitlab.com/uxf-npm/core#readme",

package/utils/filter-aria-and-data-attrs.d.ts

@@ -0,0 +1,3 @@
+export declare function filterAriaAndDataAttrs<P extends Record<string, any>>(props: P): {
+    [k: string]: any;
+};

package/utils/filter-aria-and-data-attrs.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterAriaAndDataAttrs = filterAriaAndDataAttrs;
+function filterAriaAndDataAttrs(props) {
+    return Object.fromEntries(Object.entries(props).filter((p) => { var _a, _b; return Boolean(((_a = p.at(0)) === null || _a === void 0 ? void 0 : _a.startsWith("aria-")) || ((_b = p.at(0)) === null || _b === void 0 ? void 0 : _b.startsWith("data-"))); }));
+}

package/utils/filter-aria-and-data-attrs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/utils/filter-aria-and-data-attrs.test.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const filter_aria_and_data_attrs_1 = require("./filter-aria-and-data-attrs");
+describe("filterAriaAndDataAttrs", () => {
+    it("should filter only aria- attributes", () => {
+        const props = {
+            "aria-label": "test label",
+            "aria-hidden": true,
+            className: "test-class",
+            id: "test-id",
+        };
+        const result = (0, filter_aria_and_data_attrs_1.filterAriaAndDataAttrs)(props);
+        expect(result).toEqual({
+            "aria-label": "test label",
+            "aria-hidden": true,
+        });
+    });
+    it("should filter only data- attributes", () => {
+        const props = {
+            "data-testid": "test",
+            "data-value": 123,
+            className: "test-class",
+            onClick: jest.fn(),
+        };
+        const result = (0, filter_aria_and_data_attrs_1.filterAriaAndDataAttrs)(props);
+        expect(result).toEqual({
+            "data-testid": "test",
+            "data-value": 123,
+        });
+    });
+    it("should filter both aria- and data- attributes", () => {
+        const props = {
+            "aria-label": "label",
+            "data-testid": "test",
+            "aria-describedby": "desc",
+            "data-custom": "value",
+            className: "class",
+            style: { color: "red" },
+        };
+        const result = (0, filter_aria_and_data_attrs_1.filterAriaAndDataAttrs)(props);
+        expect(result).toEqual({
+            "aria-label": "label",
+            "data-testid": "test",
+            "aria-describedby": "desc",
+            "data-custom": "value",
+        });
+    });
+    it("should return empty object when no aria- or data- attributes present", () => {
+        const props = {
+            className: "test",
+            id: "id",
+            onClick: jest.fn(),
+        };
+        const result = (0, filter_aria_and_data_attrs_1.filterAriaAndDataAttrs)(props);
+        expect(result).toEqual({});
+    });
+    it("should return empty object for empty input", () => {
+        const props = {};
+        const result = (0, filter_aria_and_data_attrs_1.filterAriaAndDataAttrs)(props);
+        expect(result).toEqual({});
+    });
+    it("should handle attributes with various value types", () => {
+        const props = {
+            "aria-expanded": false,
+            "aria-level": 2,
+            "data-object": { nested: "value" },
+            "data-array": [1, 2, 3],
+            "data-null": null,
+            "data-undefined": undefined,
+            regularProp: "value",
+        };
+        const result = (0, filter_aria_and_data_attrs_1.filterAriaAndDataAttrs)(props);
+        expect(result).toEqual({
+            "aria-expanded": false,
+            "aria-level": 2,
+            "data-object": { nested: "value" },
+            "data-array": [1, 2, 3],
+            "data-null": null,
+            "data-undefined": undefined,
+        });
+    });
+    it("should not filter attributes that contain but don't start with aria- or data-", () => {
+        const props = {
+            "aria-label": "keep",
+            "data-id": "keep",
+            "my-aria-label": "remove",
+            "my-data-id": "remove",
+        };
+        const result = (0, filter_aria_and_data_attrs_1.filterAriaAndDataAttrs)(props);
+        expect(result).toEqual({
+            "aria-label": "keep",
+            "data-id": "keep",
+        });
+    });
+});

package/utils/resizer.js

@@ -35,7 +35,11 @@ const BASE_PATH = (_b = process.env.NEXT_PUBLIC_BASE_PATH) !== null && _b !== vo
 const resizerStaticImageUrl = (src, width = "auto", height = "auto", props = {}, version = 1) => {
     var _a;
     const { fit = "cover", position = "center", toFormat = undefined, trim = "not-trim", background = "FFF" } = props;
-    const filepath = typeof src === "string" ? src : src.src;
+    let filepath = typeof src === "string" ? src : src.src;
+    // fix absolute assetPrefix
+    if (!filepath.startsWith("/")) {
+        filepath = new URL(filepath).pathname;
+    }
     const dotIndex = filepath.lastIndexOf(".");
     const filename = filepath.slice(0, dotIndex);
     const extension = filepath.slice(dotIndex + 1);

package/utils/resizer.test.js

@@ -16,7 +16,7 @@ describe("resizerGetDefaultConfig", () => {
             toFormat: "avif",
             quality: 1,
         });
-        expect(url).toBe("/generated/static/x_x_cv_b_t_nt_1/1http://example.com/image.jpg.avif");
+        expect(url).toBe("/generated/static/x_x_cv_b_t_nt_1/1/image.jpg.avif");
     });
     it("should return a valid URL for an ImageResponse source", () => {
         const imageResponse = {
@@ -29,7 +29,7 @@ describe("resizerGetDefaultConfig", () => {
     });
     it("should return a valid URL for a string source", () => {
         const url = (0, resizer_1.resizerImageUrl)("http://example.com/image.png", 250, 250, { toFormat: "webp" });
-        expect(url).toBe("/generated/static/250_250_cv_c_FFF_nt_x/1http://example.com/image.png.webp");
+        expect(url).toBe("/generated/static/250_250_cv_c_FFF_nt_x/1/image.png.webp");
     });
     it("should return undefined for null or undefined source", () => {
         expect((0, resizer_1.resizerImageUrl)(null)).toBeUndefined();