@what3words/react-components - npm Package Compare versions

Comparing version 4.9.4 to 5.0.0

dist/components.js

@@ -1,15 +0,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.What3wordsSymbol = exports.What3wordsNotes = exports.What3wordsMap = exports.What3wordsAutosuggest = exports.What3wordsAddress = void 0;
-/* eslint-disable */
-/* tslint:disable */
-/* auto-generated react proxies */
-var react_component_lib_1 = require("./react-component-lib");
-var loader_1 = require("@what3words/javascript-components/loader");
-(0, loader_1.applyPolyfills)().then(function () { return (0, loader_1.defineCustomElements)(); });
-exports.What3wordsAddress = (0, react_component_lib_1.createReactComponent)('what3words-address');
-exports.What3wordsAutosuggest = (0, react_component_lib_1.createReactComponent)('what3words-autosuggest');
-exports.What3wordsMap = (0, react_component_lib_1.createReactComponent)('what3words-map');
-exports.What3wordsNotes = (0, react_component_lib_1.createReactComponent)('what3words-notes');
-exports.What3wordsSymbol = (0, react_component_lib_1.createReactComponent)('what3words-symbol');
+import { createReactComponent } from './react-component-lib';
+export const What3wordsAddress = createReactComponent('what3words-address');
+export const What3wordsAutosuggest = createReactComponent('what3words-autosuggest');
+export const What3wordsMap = createReactComponent('what3words-map');
+export const What3wordsNotes = createReactComponent('what3words-notes');
+export const What3wordsSymbol = createReactComponent('what3words-symbol');
 //# sourceMappingURL=components.js.map

dist/index.js

@@ -1,18 +0,3 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components"), exports);
+export { defineCustomElements } from "@what3words/javascript-components/loader";
+export * from "./components";
 //# sourceMappingURL=index.js.map

dist/react-component-lib/createComponent.js

@@ -1,51 +0,1 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
@@ -62,33 +12,29 @@ var t = {};
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createReactComponent = void 0;
-var react_1 = __importStar(require("react"));
-var utils_1 = require("./utils");
-var createReactComponent = function (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) {
+import React, { createElement } from 'react';
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
     if (defineCustomElement !== undefined) {
         defineCustomElement();
     }
-    var displayName = (0, utils_1.dashToPascalCase)(tagName);
-    var ReactComponent = /** @class */ (function (_super) {
-        __extends(class_1, _super);
-        function class_1(props) {
-            var _this = _super.call(this, props) || this;
-            _this.setComponentElRef = function (element) {
-                _this.componentEl = element;
+    const displayName = dashToPascalCase(tagName);
+    const ReactComponent = class extends React.Component {
+        constructor(props) {
+            super(props);
+            this.setComponentElRef = (element) => {
+                this.componentEl = element;
             };
-            return _this;
         }
-        class_1.prototype.componentDidMount = function () {
+        componentDidMount() {
             this.componentDidUpdate(this.props);
-        };
-        class_1.prototype.componentDidUpdate = function (prevProps) {
-            (0, utils_1.attachProps)(this.componentEl, this.props, prevProps);
-        };
-        class_1.prototype.render = function () {
-            var _a = this.props, children = _a.children, forwardedRef = _a.forwardedRef, style = _a.style, className = _a.className, ref = _a.ref, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
-            var propsToPass = Object.keys(cProps).reduce(function (acc, name) {
-                var value = cProps[name];
+        }
+        componentDidUpdate(prevProps) {
+            attachProps(this.componentEl, this.props, prevProps);
+        }
+        render() {
+            const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
+            let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+                const value = cProps[name];
                 if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
-                    var eventName = name.substring(2).toLowerCase();
-                    if (typeof document !== 'undefined' && (0, utils_1.isCoveredByReact)(eventName)) {
+                    const eventName = name.substring(2).toLowerCase();
+                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
                         acc[name] = value;
@@ -98,7 +44,5 @@ }
                 else {
-                    // we should only render strings, booleans, and numbers as attrs in html.
-                    // objects, functions, arrays etc get synced via properties on mount.
-                    var type = typeof value;
+                    const type = typeof value;
                     if (type === 'string' || type === 'boolean' || type === 'number') {
-                        acc[(0, utils_1.camelToDashCase)(name)] = value;
+                        acc[camelToDashCase(name)] = value;
                     }
@@ -111,28 +55,14 @@ }
             }
-            var newProps = __assign(__assign({}, propsToPass), { ref: (0, utils_1.mergeRefs)(forwardedRef, this.setComponentElRef), style: style });
-            /**
-             * We use createElement here instead of
-             * React.createElement to work around a
-             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
-             * React.createElement causes all elements to be rendered
-             * as <tagname> instead of the actual Web Component.
-             */
-            return (0, react_1.createElement)(tagName, newProps, children);
-        };
-        Object.defineProperty(class_1, "displayName", {
-            get: function () {
-                return displayName;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return class_1;
-    }(react_1.default.Component));
-    // If context was passed to createReactComponent then conditionally add it to the Component Class
+            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
+            return createElement(tagName, newProps, children);
+        }
+        static get displayName() {
+            return displayName;
+        }
+    };
     if (ReactComponentContext) {
         ReactComponent.contextType = ReactComponentContext;
     }
-    return (0, utils_1.createForwardRef)(ReactComponent, displayName);
+    return createForwardRef(ReactComponent, displayName);
 };
-exports.createReactComponent = createReactComponent;
 //# sourceMappingURL=createComponent.js.map

dist/react-component-lib/createOverlayComponent.js

@@ -1,28 +0,1 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -37,29 +10,2 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
 };
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 var __rest = (this && this.__rest) || function (s, e) {
@@ -76,54 +22,41 @@ var t = {};
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createOverlayComponent = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var react_dom_1 = __importDefault(require("react-dom"));
-var utils_1 = require("./utils");
-var createOverlayComponent = function (tagName, controller, customElement) {
-    (0, utils_1.defineCustomElement)(tagName, customElement);
-    var displayName = (0, utils_1.dashToPascalCase)(tagName);
-    var didDismissEventName = "on".concat(displayName, "DidDismiss");
-    var didPresentEventName = "on".concat(displayName, "DidPresent");
-    var willDismissEventName = "on".concat(displayName, "WillDismiss");
-    var willPresentEventName = "on".concat(displayName, "WillPresent");
-    var isDismissing = false;
-    var Overlay = /** @class */ (function (_super) {
-        __extends(Overlay, _super);
-        function Overlay(props) {
-            var _this = _super.call(this, props) || this;
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
+export const createOverlayComponent = (tagName, controller, customElement) => {
+    defineCustomElement(tagName, customElement);
+    const displayName = dashToPascalCase(tagName);
+    const didDismissEventName = `on${displayName}DidDismiss`;
+    const didPresentEventName = `on${displayName}DidPresent`;
+    const willDismissEventName = `on${displayName}WillDismiss`;
+    const willPresentEventName = `on${displayName}WillPresent`;
+    let isDismissing = false;
+    class Overlay extends React.Component {
+        constructor(props) {
+            super(props);
             if (typeof document !== 'undefined') {
-                _this.el = document.createElement('div');
+                this.el = document.createElement('div');
             }
-            _this.handleDismiss = _this.handleDismiss.bind(_this);
-            return _this;
+            this.handleDismiss = this.handleDismiss.bind(this);
         }
-        Object.defineProperty(Overlay, "displayName", {
-            get: function () {
-                return displayName;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Overlay.prototype.componentDidMount = function () {
+        static get displayName() {
+            return displayName;
+        }
+        componentDidMount() {
             if (this.props.isOpen) {
                 this.present();
             }
-        };
-        Overlay.prototype.componentWillUnmount = function () {
+        }
+        componentWillUnmount() {
             if (this.overlay) {
                 this.overlay.dismiss();
             }
-        };
-        Overlay.prototype.handleDismiss = function (event) {
+        }
+        handleDismiss(event) {
             if (this.props.onDidDismiss) {
                 this.props.onDidDismiss(event);
             }
-            (0, utils_1.setRef)(this.props.forwardedRef, null);
-        };
-        Overlay.prototype.shouldComponentUpdate = function (nextProps) {
-            // Check if the overlay component is about to dismiss
+            setRef(this.props.forwardedRef, null);
+        }
+        shouldComponentUpdate(nextProps) {
             if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
@@ -133,70 +66,36 @@ isDismissing = true;
             return true;
-        };
-        Overlay.prototype.componentDidUpdate = function (prevProps) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (this.overlay) {
-                                (0, utils_1.attachProps)(this.overlay, this.props, prevProps);
-                            }
-                            if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
-                                this.present(prevProps);
-                            }
-                            if (!(this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false)) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.overlay.dismiss()];
-                        case 1:
-                            _a.sent();
-                            isDismissing = false;
-                            /**
-                             * Now that the overlay is dismissed
-                             * we need to render again so that any
-                             * inner components will be unmounted
-                             */
-                            this.forceUpdate();
-                            _a.label = 2;
-                        case 2: return [2 /*return*/];
-                    }
-                });
+        }
+        componentDidUpdate(prevProps) {
+            return __awaiter(this, void 0, void 0, function* () {
+                if (this.overlay) {
+                    attachProps(this.overlay, this.props, prevProps);
+                }
+                if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
+                    this.present(prevProps);
+                }
+                if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
+                    yield this.overlay.dismiss();
+                    isDismissing = false;
+                    this.forceUpdate();
+                }
             });
-        };
-        Overlay.prototype.present = function (prevProps) {
-            return __awaiter(this, void 0, void 0, function () {
-                var _a, children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, cProps, elementProps, _b;
-                var _c;
-                var _this = this;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
-                        case 0:
-                            _a = this.props, children = _a.children, isOpen = _a.isOpen, onDidDismiss = _a.onDidDismiss, onDidPresent = _a.onDidPresent, onWillDismiss = _a.onWillDismiss, onWillPresent = _a.onWillPresent, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
-                            elementProps = __assign(__assign({}, cProps), (_c = { ref: this.props.forwardedRef }, _c[didDismissEventName] = this.handleDismiss, _c[didPresentEventName] = function (e) { return _this.props.onDidPresent && _this.props.onDidPresent(e); }, _c[willDismissEventName] = function (e) { return _this.props.onWillDismiss && _this.props.onWillDismiss(e); }, _c[willPresentEventName] = function (e) { return _this.props.onWillPresent && _this.props.onWillPresent(e); }, _c));
-                            _b = this;
-                            return [4 /*yield*/, controller.create(__assign(__assign({}, elementProps), { component: this.el, componentProps: {} }))];
-                        case 1:
-                            _b.overlay = _d.sent();
-                            (0, utils_1.setRef)(this.props.forwardedRef, this.overlay);
-                            (0, utils_1.attachProps)(this.overlay, elementProps, prevProps);
-                            return [4 /*yield*/, this.overlay.present()];
-                        case 2:
-                            _d.sent();
-                            return [2 /*return*/];
-                    }
-                });
+        }
+        present(prevProps) {
+            return __awaiter(this, void 0, void 0, function* () {
+                const _a = this.props, { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent } = _a, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
+                const elementProps = Object.assign(Object.assign({}, cProps), { ref: this.props.forwardedRef, [didDismissEventName]: this.handleDismiss, [didPresentEventName]: (e) => this.props.onDidPresent && this.props.onDidPresent(e), [willDismissEventName]: (e) => this.props.onWillDismiss && this.props.onWillDismiss(e), [willPresentEventName]: (e) => this.props.onWillPresent && this.props.onWillPresent(e) });
+                this.overlay = yield controller.create(Object.assign(Object.assign({}, elementProps), { component: this.el, componentProps: {} }));
+                setRef(this.props.forwardedRef, this.overlay);
+                attachProps(this.overlay, elementProps, prevProps);
+                yield this.overlay.present();
             });
-        };
-        Overlay.prototype.render = function () {
-            /**
-             * Continue to render the component even when
-             * overlay is dismissing otherwise component
-             * will be hidden before animation is done.
-             */
-            return react_dom_1.default.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
-        };
-        return Overlay;
-    }(react_1.default.Component));
-    return react_1.default.forwardRef(function (props, ref) {
-        return (0, jsx_runtime_1.jsx)(Overlay, __assign({}, props, { forwardedRef: ref }));
+        }
+        render() {
+            return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
+        }
+    }
+    return React.forwardRef((props, ref) => {
+        return React.createElement(Overlay, Object.assign({}, props, { forwardedRef: ref }));
     });
 };
-exports.createOverlayComponent = createOverlayComponent;
 //# sourceMappingURL=createOverlayComponent.js.map

dist/react-component-lib/index.js

@@ -1,8 +0,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createOverlayComponent = exports.createReactComponent = void 0;
-var createComponent_1 = require("./createComponent");
-Object.defineProperty(exports, "createReactComponent", { enumerable: true, get: function () { return createComponent_1.createReactComponent; } });
-var createOverlayComponent_1 = require("./createOverlayComponent");
-Object.defineProperty(exports, "createOverlayComponent", { enumerable: true, get: function () { return createOverlayComponent_1.createOverlayComponent; } });
+export { createReactComponent } from './createComponent';
+export { createOverlayComponent } from './createOverlayComponent';
 //# sourceMappingURL=index.js.map

dist/react-component-lib/interfaces.js

@@ -1,3 +0,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};
 //# sourceMappingURL=interfaces.js.map

dist/react-component-lib/utils/attachProps.js

@@ -1,15 +0,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.syncEvent = exports.isCoveredByReact = exports.getClassName = exports.attachProps = void 0;
-var case_1 = require("./case");
-var attachProps = function (node, newProps, oldProps) {
-    if (oldProps === void 0) { oldProps = {}; }
-    // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
+import { camelToDashCase } from './case';
+export const attachProps = (node, newProps, oldProps = {}) => {
     if (node instanceof Element) {
-        // add any classes in className to the class list
-        var className = (0, exports.getClassName)(node.classList, newProps, oldProps);
+        const className = getClassName(node.classList, newProps, oldProps);
         if (className !== '') {
             node.className = className;
         }
-        Object.keys(newProps).forEach(function (name) {
+        Object.keys(newProps).forEach((name) => {
             if (name === 'children' ||
@@ -24,6 +18,6 @@ name === 'style' ||
             if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
-                var eventName = name.substring(2);
-                var eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
-                if (!(0, exports.isCoveredByReact)(eventNameLc)) {
-                    (0, exports.syncEvent)(node, eventNameLc, newProps[name]);
+                const eventName = name.substring(2);
+                const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
+                if (!isCoveredByReact(eventNameLc)) {
+                    syncEvent(node, eventNameLc, newProps[name]);
                 }
@@ -33,5 +27,5 @@ }
                 node[name] = newProps[name];
-                var propType = typeof newProps[name];
+                const propType = typeof newProps[name];
                 if (propType === 'string') {
-                    node.setAttribute((0, case_1.camelToDashCase)(name), newProps[name]);
+                    node.setAttribute(camelToDashCase(name), newProps[name]);
                 }
@@ -42,16 +36,11 @@ }
 };
-exports.attachProps = attachProps;
-var getClassName = function (classList, newProps, oldProps) {
-    var newClassProp = newProps.className || newProps.class;
-    var oldClassProp = oldProps.className || oldProps.class;
-    // map the classes to Maps for performance
-    var currentClasses = arrayToMap(classList);
-    var incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
-    var oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
-    var finalClassNames = [];
-    // loop through each of the current classes on the component
-    // to see if it should be a part of the classNames added
-    currentClasses.forEach(function (currentClass) {
+export const getClassName = (classList, newProps, oldProps) => {
+    const newClassProp = newProps.className || newProps.class;
+    const oldClassProp = oldProps.className || oldProps.class;
+    const currentClasses = arrayToMap(classList);
+    const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
+    const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
+    const finalClassNames = [];
+    currentClasses.forEach((currentClass) => {
         if (incomingPropClasses.has(currentClass)) {
-            // add it as its already included in classnames coming in from newProps
             finalClassNames.push(currentClass);
@@ -61,15 +50,16 @@ incomingPropClasses.delete(currentClass);
         else if (!oldPropClasses.has(currentClass)) {
-            // add it as it has NOT been removed by user
             finalClassNames.push(currentClass);
         }
     });
-    incomingPropClasses.forEach(function (s) { return finalClassNames.push(s); });
+    incomingPropClasses.forEach((s) => finalClassNames.push(s));
     return finalClassNames.join(' ');
 };
-exports.getClassName = getClassName;
-/**
- * Checks if an event is supported in the current execution environment.
- * @license Modernizr 3.0.0pre (Custom Build) | MIT
- */
-var isCoveredByReact = function (eventNameSuffix) {
+export const transformReactEventName = (eventNameSuffix) => {
+    switch (eventNameSuffix) {
+        case 'doubleclick':
+            return 'dblclick';
+    }
+    return eventNameSuffix;
+};
+export const isCoveredByReact = (eventNameSuffix) => {
     if (typeof document === 'undefined') {
@@ -79,6 +69,6 @@ return true;
     else {
-        var eventName = 'on' + eventNameSuffix;
-        var isSupported = eventName in document;
+        const eventName = 'on' + transformReactEventName(eventNameSuffix);
+        let isSupported = eventName in document;
         if (!isSupported) {
-            var element = document.createElement('div');
+            const element = document.createElement('div');
             element.setAttribute(eventName, 'return;');
@@ -90,11 +80,8 @@ isSupported = typeof element[eventName] === 'function';
 };
-exports.isCoveredByReact = isCoveredByReact;
-var syncEvent = function (node, eventName, newEventHandler) {
-    var eventStore = node.__events || (node.__events = {});
-    var oldEventHandler = eventStore[eventName];
-    // Remove old listener so they don't double up.
+export const syncEvent = (node, eventName, newEventHandler) => {
+    const eventStore = node.__events || (node.__events = {});
+    const oldEventHandler = eventStore[eventName];
     if (oldEventHandler) {
         node.removeEventListener(eventName, oldEventHandler);
     }
-    // Bind new listener.
     node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
@@ -106,8 +93,7 @@ if (newEventHandler) {
 };
-exports.syncEvent = syncEvent;
-var arrayToMap = function (arr) {
-    var map = new Map();
-    arr.forEach(function (s) { return map.set(s, s); });
+const arrayToMap = (arr) => {
+    const map = new Map();
+    arr.forEach((s) => map.set(s, s));
     return map;
 };
 //# sourceMappingURL=attachProps.js.map

dist/react-component-lib/utils/case.js

@@ -1,14 +0,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.camelToDashCase = exports.dashToPascalCase = void 0;
-var dashToPascalCase = function (str) {
-    return str
-        .toLowerCase()
-        .split('-')
-        .map(function (segment) { return segment.charAt(0).toUpperCase() + segment.slice(1); })
-        .join('');
-};
-exports.dashToPascalCase = dashToPascalCase;
-var camelToDashCase = function (str) { return str.replace(/([A-Z])/g, function (m) { return "-".concat(m[0].toLowerCase()); }); };
-exports.camelToDashCase = camelToDashCase;
+export const dashToPascalCase = (str) => str
+    .toLowerCase()
+    .split('-')
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join('');
+export const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
 //# sourceMappingURL=case.js.map

dist/react-component-lib/utils/dev.js

@@ -1,11 +0,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.deprecationWarning = exports.isDevMode = void 0;
-var isDevMode = function () {
+export const isDevMode = () => {
     return process && process.env && process.env.NODE_ENV === 'development';
 };
-exports.isDevMode = isDevMode;
-var warnings = {};
-var deprecationWarning = function (key, message) {
-    if ((0, exports.isDevMode)()) {
+const warnings = {};
+export const deprecationWarning = (key, message) => {
+    if (isDevMode()) {
         if (!warnings[key]) {
@@ -17,3 +13,2 @@ console.warn(message);
 };
-exports.deprecationWarning = deprecationWarning;
 //# sourceMappingURL=dev.js.map

dist/react-component-lib/utils/index.js

@@ -1,35 +0,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defineCustomElement = exports.createForwardRef = exports.mergeRefs = exports.setRef = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var setRef = function (ref, value) {
+import React from 'react';
+export const setRef = (ref, value) => {
     if (typeof ref === 'function') {
@@ -39,28 +7,20 @@ ref(value);
     else if (ref != null) {
-        // Cast as a MutableRef so we can assign current
         ref.current = value;
     }
 };
-exports.setRef = setRef;
-var mergeRefs = function () {
-    var refs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        refs[_i] = arguments[_i];
-    }
-    return function (value) {
-        refs.forEach(function (ref) {
-            (0, exports.setRef)(ref, value);
+export const mergeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach((ref) => {
+            setRef(ref, value);
         });
     };
 };
-exports.mergeRefs = mergeRefs;
-var createForwardRef = function (ReactComponent, displayName) {
-    var forwardRef = function (props, ref) {
-        return (0, jsx_runtime_1.jsx)(ReactComponent, __assign({}, props, { forwardedRef: ref }));
+export const createForwardRef = (ReactComponent, displayName) => {
+    const forwardRef = (props, ref) => {
+        return React.createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
     };
     forwardRef.displayName = displayName;
-    return react_1.default.forwardRef(forwardRef);
+    return React.forwardRef(forwardRef);
 };
-exports.createForwardRef = createForwardRef;
-var defineCustomElement = function (tagName, customElement) {
+export const defineCustomElement = (tagName, customElement) => {
     if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
@@ -70,5 +30,4 @@ customElements.define(tagName, customElement);
 };
-exports.defineCustomElement = defineCustomElement;
-__exportStar(require("./attachProps"), exports);
-__exportStar(require("./case"), exports);
+export * from './attachProps';
+export * from './case';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@what3words/react-components",
-  "version": "4.9.4",
-  "sideEffects": false,
-  "description": "The what3words javascript sdk and web components for react",
+  "version": "5.0.0",
+  "private": false,
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "files": [
-    "dist/"
+    "dist"
   ],
-  "scripts": {
-    "clean": "rm -rf dist",
-    "build": "tsc -p tsconfig.json --outDir dist",
-    "compile": "npm run clean && npm run build",
-    "lint": "tslint './src/**/*.{ts,tsx}'",
-    "lint:fix": "tslint './src/**/*.{ts,tsx}' --fix"
+  "publishConfig": {
+    "access": "public"
   },
   "dependencies": {
-    "@what3words/javascript-components": "^4.9.4"
+    "@what3words/javascript-components": "5.0.0"
   },
-  "peerDependencies": {
-    "react": ">=16.7.0",
-    "react-dom": ">=16.7.0"
-  },
   "devDependencies": {
-    "@material-ui/core": "^4.11.3",
+    "@types/node": "^22.10.7",
+    "@types/react": "^17.0.79",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "^5.0.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.7.3",
+    "@w3w-internal/frontend-cli-utils": "0.1.0",
+    "@what3words/tsconfig": "0.1.0"
+  },
+  "scripts": {
+    "clean": "pnpm dlx rimraf .turbo node_modules",
+    "prebuild": "pnpm dlx rimraf dist",
+    "build": "pnpm run tsc",
+    "pretypecheck": "pnpm --filter=@what3words/javascript-components build",
+    "tsc": "tsc -b . -f"
   }
-}
+}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Dependency count

1

-66.67%

Number of package files

32

3.23%

Number of medium quality alerts

0

-100%

Number of lines in readme file

149

Infinity%

Worsened metrics

Total package byte prevSize

37988

-21.24%

Dev dependency count

7

40%

Lines of code

413

-39.62%

Number of medium supply chain risk alerts

2

Infinity%

Dependency changes

• + Added

  @googlemaps/js-api-loader@1.14.3
  (transitive)

• + Added

  @what3words/javascript-components@5.0.0
  (transitive)

• + Added

  asynckit@0.4.0
  (transitive)

• + Added

  axios@1.8.4
  (transitive)

• + Added

  call-bind-apply-helpers@1.0.2
  (transitive)

• + Added

  combined-stream@1.0.8
  (transitive)

• + Added

  cross-fetch@4.1.0
  (transitive)

• + Added

  delayed-stream@1.0.0
  (transitive)

• + Added

  dunder-proto@1.0.1
  (transitive)

• + Added

  es-define-property@1.0.1
  (transitive)

• + Added

  es-errors@1.3.0
  (transitive)

• + Added

  es-object-atoms@1.1.1
  (transitive)

• + Added

  es-set-tostringtag@2.1.0
  (transitive)

• + Added

  fast-deep-equal@3.1.3
  (transitive)

• + Added

  follow-redirects@1.15.9
  (transitive)

• + Added

  form-data@4.0.2
  (transitive)

• + Added

  function-bind@1.1.2
  (transitive)

• + Added

  get-intrinsic@1.3.0
  (transitive)

• + Added

  get-proto@1.0.1
  (transitive)

• + Added

  gopd@1.2.0
  (transitive)

• + Added

  has-symbols@1.1.0
  (transitive)

• + Added

  has-tostringtag@1.0.2
  (transitive)

• + Added

  hasown@2.0.2
  (transitive)

• + Added

  math-intrinsics@1.1.0
  (transitive)

• + Added

  mime-db@1.52.0
  (transitive)

• + Added

  mime-types@2.1.35
  (transitive)

• + Added

  proxy-from-env@1.1.0
  (transitive)

• + Added

  uuid@10.0.0
  (transitive)

• - Removed

  @googlemaps/js-api-loader@1.16.8
  (transitive)

• - Removed

  @stencil/core@3.4.2
  (transitive)

• - Removed

  @what3words/javascript-components@4.9.4
  (transitive)

• - Removed

  cross-fetch@3.2.0
  (transitive)

• - Removed

  querystring@0.2.1
  (transitive)

• - Removed

  react@19.1.0
  (transitive)

• - Removed

  react-dom@19.1.0
  (transitive)

• - Removed

  scheduler@0.26.0
  (transitive)

• - Removed

  uuid@8.3.2
  (transitive)

• Updated

  @what3words/javascript-components@5.0.0