@aboutbits/react-ui - npm Package Compare versions

Comparing version 0.0.15 to 0.0.16

components/button/Button.d.ts

@@ -34,2 +34,3 @@ import React from 'react';
     href: string;
+    internal?: boolean | undefined;
 } & {
@@ -36,0 +37,0 @@ disabled?: boolean | undefined;

components/button/Button.js

@@ -41,6 +41,6 @@ "use strict";
 var ButtonLink = react_1.default.forwardRef(function (_a, ref) {
-    var _b = _a.variant, variant = _b === void 0 ? Variant.solid : _b, _c = _a.size, size = _c === void 0 ? Size.md : _c, _d = _a.tone, tone = _d === void 0 ? Tone.primary : _d, _e = _a.className, className = _e === void 0 ? '' : _e, children = _a.children, props = tslib_1.__rest(_a, ["variant", "size", "tone", "className", "children"]);
+    var _b = _a.variant, variant = _b === void 0 ? Variant.solid : _b, _c = _a.size, size = _c === void 0 ? Size.md : _c, _d = _a.tone, tone = _d === void 0 ? Tone.primary : _d, _e = _a.className, className = _e === void 0 ? '' : _e, children = _a.children, _f = _a.internal, internal = _f === void 0 ? true : _f, props = tslib_1.__rest(_a, ["variant", "size", "tone", "className", "children", "internal"]);
     var LinkComponent = framework_1.useLinkComponent();
     var button = framework_1.useTheme().button;
-    return (jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({}, props, { ref: ref, className: classnames_1.default(button.button.base, button.button.variantTone[variant].base, !props.disabled
+    return (jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({}, props, { internal: internal, ref: ref, className: classnames_1.default(button.button.base, button.button.variantTone[variant].base, !props.disabled
             /* eslint-disable */
@@ -47,0 +47,0 @@ ? // @ts-ignore

components/header/actions/HeaderEditAction.d.ts

 /// <reference types="react" />
+import { LinkComponentProps } from '../../../framework';
 declare type Props = {
     /**
-     * Define where the user is redirected to.
-     * */
-    href: string;
-    /**
      * Define the accessibility label for the icon.
      * */
     label: string;
-};
+} & LinkComponentProps;
 declare const HeaderEditAction: React.FC<Props>;
 export { HeaderEditAction };

components/header/actions/HeaderEditAction.js

@@ -9,10 +9,9 @@ "use strict";
 var HeaderRightArea_1 = require("../areas/HeaderRightArea");
-var ThemeContext_1 = require("../../../framework/theme/ThemeContext");
-var LinkComponentContext_1 = require("../../../framework/router/LinkComponentContext");
+var framework_1 = require("../../../framework");
 var HeaderEditAction = function (_a) {
-    var href = _a.href, label = _a.label;
-    var header = ThemeContext_1.useTheme().header;
-    var LinkComponent = LinkComponentContext_1.useLinkComponent();
-    return (jsx_runtime_1.jsx(HeaderRightArea_1.HeaderRightArea, { children: jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({ href: href }, { children: jsx_runtime_1.jsx(IconEdit_1.default, { className: classnames_1.default(header.editAction.base, header.editAction.normal), title: label }, void 0) }), void 0) }, void 0));
+    var href = _a.href, _b = _a.internal, internal = _b === void 0 ? true : _b, label = _a.label;
+    var header = framework_1.useTheme().header;
+    var LinkComponent = framework_1.useLinkComponent();
+    return (jsx_runtime_1.jsx(HeaderRightArea_1.HeaderRightArea, { children: jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({ href: href, internal: internal }, { children: jsx_runtime_1.jsx(IconEdit_1.default, { className: classnames_1.default(header.editAction.base, header.editAction.normal), title: label }, void 0) }), void 0) }, void 0));
 };
 exports.HeaderEditAction = HeaderEditAction;

components/link/TextLink.d.ts

 import React from 'react';
-declare const HtmlTextLink: React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    href: string;
-} & React.RefAttributes<HTMLAnchorElement>>;
 declare const TextLink: React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     href: string;
+    internal?: boolean | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
-export { TextLink, HtmlTextLink };
+export { TextLink };

components/link/TextLink.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HtmlTextLink = exports.TextLink = void 0;
+exports.TextLink = void 0;
 var tslib_1 = require("tslib");
@@ -8,18 +8,10 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var classnames_1 = tslib_1.__importDefault(require("classnames"));
-var ThemeContext_1 = require("../../framework/theme/ThemeContext");
-var LinkComponentContext_1 = require("../../framework/router/LinkComponentContext");
-var HtmlTextLink = react_1.default.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, props = tslib_1.__rest(_a, ["children", "className"]);
-    var textLink = ThemeContext_1.useTheme().textLink;
-    return (jsx_runtime_1.jsx("a", tslib_1.__assign({ className: classnames_1.default(className, textLink.base) }, props, { ref: ref }, { children: children }), void 0));
-});
-exports.HtmlTextLink = HtmlTextLink;
-HtmlTextLink.displayName = 'HtmlTextLink';
+var framework_1 = require("../../framework");
 var TextLink = react_1.default.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, props = tslib_1.__rest(_a, ["children", "className"]);
-    var LinkComponent = LinkComponentContext_1.useLinkComponent();
-    var textLink = ThemeContext_1.useTheme().textLink;
-    return (jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({}, props, { ref: ref, className: classnames_1.default(className, textLink.base) }, { children: children }), void 0));
+    var children = _a.children, className = _a.className, _b = _a.internal, internal = _b === void 0 ? true : _b, props = tslib_1.__rest(_a, ["children", "className", "internal"]);
+    var LinkComponent = framework_1.useLinkComponent();
+    var textLink = framework_1.useTheme().textLink;
+    return (jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({}, props, { internal: internal, ref: ref, className: classnames_1.default(className, textLink.base) }, { children: children }), void 0));
 });
 exports.TextLink = TextLink;
 TextLink.displayName = 'TextLink';

components/navigation/NavigationItemLink.d.ts

 import { IconProps } from '@aboutbits/react-material-icons/dist/types';
-import React, { ComponentType, ReactElement, ReactNode } from 'react';
+import { ComponentType, ReactElement, ReactNode } from 'react';
+import { LinkComponentProps } from '../../framework';
 import { ClassNameProps } from '../types';
@@ -17,10 +18,3 @@ export declare type Props = {
     active?: boolean;
-    /**
-     * Href of the link.
-     */
-    href: string;
-} & ClassNameProps;
-declare type HtmlLinkProps = Props & React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-export declare function NavigationItemLink({ content, icon: Icon, active, className, ...props }: Props): ReactElement;
-export declare function NavigationItemHtmlLink({ content, icon: Icon, active, className, ...props }: HtmlLinkProps): ReactElement;
-export {};
+} & ClassNameProps & LinkComponentProps;
+export declare function NavigationItemLink({ content, icon: Icon, active, className, internal, ...props }: Props): ReactElement;

components/navigation/NavigationItemLink.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationItemHtmlLink = exports.NavigationItemLink = void 0;
+exports.NavigationItemLink = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var classnames_1 = tslib_1.__importDefault(require("classnames"));
-var LinkComponentContext_1 = require("../../framework/router/LinkComponentContext");
-var ThemeContext_1 = require("../../framework/theme/ThemeContext");
+var framework_1 = require("../../framework");
 function NavigationItemLink(_a) {
-    var content = _a.content, Icon = _a.icon, _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? '' : _c, props = tslib_1.__rest(_a, ["content", "icon", "active", "className"]);
-    var LinkComponent = LinkComponentContext_1.useLinkComponent();
-    var navigation = ThemeContext_1.useTheme().navigation;
-    return (jsx_runtime_1.jsxs(LinkComponent, tslib_1.__assign({ className: classnames_1.default(className, navigation.item.base, active ? navigation.item.active : navigation.item.normal) }, props, { children: [jsx_runtime_1.jsx(Icon, { className: navigation.item.icon.base }, void 0), jsx_runtime_1.jsx("div", tslib_1.__assign({ className: navigation.item.content.base }, { children: content }), void 0)] }), void 0));
+    var content = _a.content, Icon = _a.icon, _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.internal, internal = _d === void 0 ? true : _d, props = tslib_1.__rest(_a, ["content", "icon", "active", "className", "internal"]);
+    var LinkComponent = framework_1.useLinkComponent();
+    var navigation = framework_1.useTheme().navigation;
+    return (jsx_runtime_1.jsxs(LinkComponent, tslib_1.__assign({ className: classnames_1.default(className, navigation.item.base, active ? navigation.item.active : navigation.item.normal), internal: internal }, props, { children: [jsx_runtime_1.jsx(Icon, { className: navigation.item.icon.base }, void 0), jsx_runtime_1.jsx("div", tslib_1.__assign({ className: navigation.item.content.base }, { children: content }), void 0)] }), void 0));
 }
 exports.NavigationItemLink = NavigationItemLink;
-function NavigationItemHtmlLink(_a) {
-    var content = _a.content, Icon = _a.icon, _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? '' : _c, props = tslib_1.__rest(_a, ["content", "icon", "active", "className"]);
-    var navigation = ThemeContext_1.useTheme().navigation;
-    return (jsx_runtime_1.jsxs("a", tslib_1.__assign({ className: classnames_1.default(className, navigation.item.base, active ? navigation.item.active : navigation.item.normal) }, props, { children: [jsx_runtime_1.jsx(Icon, { className: navigation.item.icon.base }, void 0), jsx_runtime_1.jsx("div", tslib_1.__assign({ className: navigation.item.content.base }, { children: content }), void 0)] }), void 0));
-}
-exports.NavigationItemHtmlLink = NavigationItemHtmlLink;

components/pagination/PaginationRouter.d.ts

 /// <reference types="react" />
 import { IndexType } from '@aboutbits/pagination';
+import { LinkComponentProps } from '../../framework/router/LinkComponentContext';
 import { ClassNameProps } from '../types';
@@ -25,5 +26,3 @@ declare type Props = ClassNameProps & {
         size: number;
-    }) => {
-        href: string;
-    };
+    }) => LinkComponentProps;
     /**
@@ -30,0 +29,0 @@ * Configure the pagination function.

components/pagination/PaginationRouter.js

@@ -22,10 +22,10 @@ "use strict";
         return null;
-    return (jsx_runtime_1.jsxs(PaginationContainer_1.PaginationContainer, tslib_1.__assign({ className: className }, { children: [jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({}, linkProps({ pageIndex: pagination.previous.indexNumber, size: size }), { "aria-label": internationalization.translate('shared.pagination.prev'), "aria-disabled": pagination.previous.isDisabled, role: "previous-link", className: classnames_1.default(paginationTheme.page.base, pagination.previous.isDisabled
+    return (jsx_runtime_1.jsxs(PaginationContainer_1.PaginationContainer, tslib_1.__assign({ className: className }, { children: [jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({ internal: true }, linkProps({ pageIndex: pagination.previous.indexNumber, size: size }), { "aria-label": internationalization.translate('shared.pagination.prev'), "aria-disabled": pagination.previous.isDisabled, role: "previous-link", className: classnames_1.default(paginationTheme.page.base, pagination.previous.isDisabled
                     ? paginationTheme.page.disabled
                     : paginationTheme.page.enabled) }, { children: jsx_runtime_1.jsx(PaginationPreviousNextContent_1.PaginationPreviousContent, {}, void 0) }), void 0), jsx_runtime_1.jsx(PaginationPagesList_1.PaginationPagesList, { children: pagination.pages.map(function (page) {
-                    return (jsx_runtime_1.jsx(PaginationPagesList_1.PaginationPagesListItem, { children: jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({}, linkProps({
+                    return (jsx_runtime_1.jsx(PaginationPagesList_1.PaginationPagesListItem, { children: jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({ internal: true }, linkProps({
                             pageIndex: page.indexNumber,
                             size: size,
                         }), { "aria-current": page.isCurrent ? 'page' : false, "aria-label": internationalization.translate('shared.pagination.page', { page: page.displayNumber }), className: classnames_1.default(paginationTheme.page.base, paginationTheme.page.normal, paginationTheme.page.enabled, page.isCurrent ? paginationTheme.page.current : '') }, { children: page.displayNumber }), void 0) }, page.indexNumber));
-                }) }, void 0), jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({}, linkProps({
+                }) }, void 0), jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({ internal: true }, linkProps({
                 pageIndex: pagination.next.indexNumber,
@@ -32,0 +32,0 @@ size: size,

components/section/SectionItem/SectionItem.d.ts

@@ -18,4 +18,5 @@ import React, { ReactNode } from 'react';
     href: string;
+    internal?: boolean | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;
 export declare const SectionListItemWithAction: React.FC<SectionListItemWithActionProps>;
 export {};

components/section/SectionItem/SectionItem.js

@@ -23,6 +23,6 @@ "use strict";
 exports.SectionListItemLink = react_1.default.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, props = tslib_1.__rest(_a, ["children", "className"]);
+    var children = _a.children, className = _a.className, _b = _a.internal, internal = _b === void 0 ? true : _b, props = tslib_1.__rest(_a, ["children", "className", "internal"]);
     var LinkComponent = framework_1.useLinkComponent();
     var section = framework_1.useTheme().section;
-    return (jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({ className: "block", ref: ref }, props, { children: jsx_runtime_1.jsxs(exports.SectionListItem, tslib_1.__assign({ className: classnames_1.default(section.listItemLink.base, section.listItemLink.normal, className) }, { children: [children, jsx_runtime_1.jsx(IconKeyboardArrowRight_1.default, { width: "24", height: "24", className: "fill-current" }, void 0)] }), void 0) }), void 0));
+    return (jsx_runtime_1.jsx(LinkComponent, tslib_1.__assign({ className: "block", internal: internal, ref: ref }, props, { children: jsx_runtime_1.jsxs(exports.SectionListItem, tslib_1.__assign({ className: classnames_1.default(section.listItemLink.base, section.listItemLink.normal, className) }, { children: [children, jsx_runtime_1.jsx(IconKeyboardArrowRight_1.default, { width: "24", height: "24", className: "fill-current" }, void 0)] }), void 0) }), void 0));
 });
@@ -29,0 +29,0 @@ exports.SectionListItemLink.displayName = 'SectionListItemLink';

framework/router/LinkComponentContext.d.ts

@@ -7,2 +7,7 @@ import { AnchorHTMLAttributes, ComponentType, ForwardRefRenderFunction } from 'react';
     href: string;
+    /**
+     * Defines whether it is an internal link or an external link.
+     * For example NextJS/Link is an internal link and a classic HTML anchor tag is an external link.
+     */
+    internal?: boolean;
 };
@@ -15,2 +20,7 @@ export declare const makeLinkComponent: (render: ForwardRefRenderFunction<HTMLAnchorElement, LinkComponentProps>) => {
         href: string;
+        /**
+         * Defines whether it is an internal link or an external link.
+         * For example NextJS/Link is an internal link and a classic HTML anchor tag is an external link.
+         */
+        internal?: boolean | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;
@@ -25,2 +35,7 @@ };
         href: string;
+        /**
+         * Defines whether it is an internal link or an external link.
+         * For example NextJS/Link is an internal link and a classic HTML anchor tag is an external link.
+         */
+        internal?: boolean | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;
@@ -34,2 +49,7 @@ };
     href: string;
+    /**
+     * Defines whether it is an internal link or an external link.
+     * For example NextJS/Link is an internal link and a classic HTML anchor tag is an external link.
+     */
+    internal?: boolean | undefined;
 } & import("react").RefAttributes<HTMLAnchorElement>> | ComponentType<LinkComponentProps>;

package.json

 {
   "name": "@aboutbits/react-ui",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "main": "index.js",
@@ -5,0 +5,0 @@ "types": "index.d.ts",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

162982

decreased by-0.36%

Lines of code

3553

decreased by-0.2%

No dependency changes