@nodeblocks/frontend-breadcrumb-block 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/Breadcrumb.d.ts +9 -12
  2. package/dist/Breadcrumb.d.ts.map +1 -1
  3. package/dist/blocks.d.ts +2 -3
  4. package/dist/blocks.d.ts.map +1 -1
  5. package/dist/index.cjs.js +1 -119
  6. package/dist/index.esm.js +1 -117
  7. package/dist/lib.d.ts +22 -3
  8. package/dist/lib.d.ts.map +1 -1
  9. package/package.json +27 -15
  10. package/readme.md +9 -2
  11. package/dist/index.cjs.js.map +0 -1
  12. package/dist/index.esm.js.map +0 -1
package/dist/Breadcrumb.d.ts CHANGED
@@ -1,24 +1,21 @@
1
- import { ComponentProps, ReactNode } from "react";
2
- import "./breadcrumb.css";
3
- import { BlocksOverride } from "./lib";
1
+ import { BreadcrumbsProps } from '@mui/material';
2
+ import React, { ReactNode } from 'react';
3
+ import { BlocksOverride } from './lib';
4
4
  declare const Breadcrumb: {
5
- <CustomBlocks extends Record<string, ReactNode>>({ className, children, }: Omit<ComponentProps<"nav">, "children"> & {
5
+ <CustomBlocks extends Record<string, ReactNode>>({ maxItems, itemsBeforeCollapse, itemsAfterCollapse, className, children, sx, ...props }: {
6
6
  children?: BlocksOverride<typeof defaultBlocks, CustomBlocks>;
7
- }): import("react/jsx-runtime").JSX.Element;
7
+ } & Omit<BreadcrumbsProps, "children">): import("react/jsx-runtime").JSX.Element;
8
8
  BreadcrumbChevron: () => import("react/jsx-runtime").JSX.Element;
9
- BreadcrumbItem: ({ url, children, }: Omit<ComponentProps<"a">, "children"> & {
9
+ BreadcrumbItem: ({ component, sx, url, children, ...props }: Partial<import("@mui/material").LinkProps> & {
10
10
  url: string;
11
- children: ReactNode;
12
11
  }) => import("react/jsx-runtime").JSX.Element;
13
12
  };
14
13
  declare const defaultBlocks: {
15
- breadcrumbChevron: import("react").ReactElement<unknown, () => import("react/jsx-runtime").JSX.Element>;
16
- breadcrumbItem: import("react").ReactElement<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children"> & {
14
+ breadcrumbChevron: React.ReactElement<unknown, () => import("react/jsx-runtime").JSX.Element>;
15
+ breadcrumbItem: React.ReactElement<Partial<import("@mui/material").LinkProps> & {
17
16
  url: string;
18
- children: ReactNode;
19
- }, ({ url, children, }: Omit<ComponentProps<"a">, "children"> & {
17
+ }, ({ component, sx, url, children, ...props }: Partial<import("@mui/material").LinkProps> & {
20
18
  url: string;
21
- children: ReactNode;
22
19
  }) => import("react/jsx-runtime").JSX.Element>;
23
20
  };
24
21
  export default Breadcrumb;
package/dist/Breadcrumb.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../src/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EACL,cAAc,EAIf,MAAM,OAAO,CAAC;AAEf,QAAA,MAAM,UAAU;KAAI,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,4BAG/D,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;QAC3C,QAAQ,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,EAAE,YAAY,CAAC,CAAC;KAC/D;;;;;;CA+BA,CAAC;AAKF,QAAA,MAAM,aAAa;;;;;;;;;CAGjB,CAAC;AAEH,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../src/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,cAAc,EAA4D,MAAM,OAAO,CAAC;AAEjG,QAAA,MAAM,UAAU;KAAI,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,4FAQ/D;QACD,QAAQ,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,EAAE,YAAY,CAAC,CAAC;KAC/D,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;;;;;CAqDrC,CAAC;AAKF,QAAA,MAAM,aAAa;;;;;;;CAGjB,CAAC;AAEH,eAAe,UAAU,CAAC"}
package/dist/blocks.d.ts CHANGED
@@ -1,7 +1,6 @@
1
- import { ComponentProps, ReactNode } from "react";
2
- export declare const BreadcrumbItem: ({ url, children, }: Omit<ComponentProps<"a">, "children"> & {
1
+ import { LinkProps } from '@mui/material';
2
+ export declare const BreadcrumbItem: ({ component, sx, url, children, ...props }: Partial<LinkProps> & {
3
3
  url: string;
4
- children: ReactNode;
5
4
  }) => import("react/jsx-runtime").JSX.Element;
6
5
  export declare const BreadcrumbChevron: () => import("react/jsx-runtime").JSX.Element;
7
6
  //# sourceMappingURL=blocks.d.ts.map
package/dist/blocks.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../src/blocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,eAAO,MAAM,cAAc,GAAI,oBAG5B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG;IACzC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAIA,CAAC;AAEF,eAAO,MAAM,iBAAiB,+CAe7B,CAAC"}
1
+ {"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../src/blocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAqB,MAAM,eAAe,CAAC;AAEnE,eAAO,MAAM,cAAc,GAAI,4CAM5B,OAAO,CAAC,SAAS,CAAC,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;CACb,4CAeA,CAAC;AAEF,eAAO,MAAM,iBAAiB,+CAW7B,CAAC"}
package/dist/index.cjs.js CHANGED
@@ -1,119 +1 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var react = require('react');
5
-
6
- const BreadcrumbItem = ({ url, children, }) => (jsxRuntime.jsx("a", { href: url, className: "nbb-breadcrumb-item", children: children }));
7
- const BreadcrumbChevron = () => (jsxRuntime.jsx("span", { className: "nbb-breadcrumb-chevron", children: jsxRuntime.jsx("svg", { width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M0.294922 10.59L4.87492 6L0.294922 1.41L1.70492 0L7.70492 6L1.70492 12L0.294922 10.59Z", fill: "white" }) }) }));
8
-
9
- function styleInject(css, ref) {
10
- if ( ref === void 0 ) ref = {};
11
- var insertAt = ref.insertAt;
12
-
13
- if (typeof document === 'undefined') { return; }
14
-
15
- var head = document.head || document.getElementsByTagName('head')[0];
16
- var style = document.createElement('style');
17
- style.type = 'text/css';
18
-
19
- if (insertAt === 'top') {
20
- if (head.firstChild) {
21
- head.insertBefore(style, head.firstChild);
22
- } else {
23
- head.appendChild(style);
24
- }
25
- } else {
26
- head.appendChild(style);
27
- }
28
-
29
- if (style.styleSheet) {
30
- style.styleSheet.cssText = css;
31
- } else {
32
- style.appendChild(document.createTextNode(css));
33
- }
34
- }
35
-
36
- var css_248z = ".nbb-breadcrumb {\n --color-object-accent-primary: #006EAD;\n --color-text-on-primary: #fff;\n\n display: flex;\n align-items: center;\n padding: 8px 16px;\n background-color: var(--color-object-accent-primary);\n color: var(--color-text-on-primary);\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-segment {\n display: flex;\n align-items: center;\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-item {\n color: var(--color-text-on-primary);\n text-decoration: none;\n padding: 0 4px;\n font-size: 12px;\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-item:hover {\n text-decoration: underline;\n color: var(--color-text-on-primary);\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-chevron {\n margin: 0 4px;\n min-width: 24px;\n color: var(--color-text-on-primary);\n}\n";
37
- styleInject(css_248z);
38
-
39
- /**
40
- * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.
41
- *
42
- * @param components - A map of default block keys to component functions.
43
- *
44
- * @example
45
- * const defaultBlocks = createDefaultBlocks({
46
- * title: Title,
47
- * description: Description,
48
- * form: Form,
49
- * });
50
- */
51
- function createDefaultBlocks(components) {
52
- return Object.fromEntries(Object.entries(components).map(([key, Component]) => [
53
- key,
54
- react.createElement(Component, { key }),
55
- ]));
56
- }
57
- /**
58
- * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.
59
- * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.
60
- *
61
- * @param props
62
- * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).
63
- * @param props.defaultBlocks - The default blocks of outer component.
64
- * @param props.children - A function returning the JSX to render.
65
- *
66
- * @example
67
- * <BlocksOverrideComponent
68
- * defaultBlocks={defaultFormBlocks}
69
- * blocksOverride={children}
70
- * >
71
- * {({ blocks, blockOrder }) =>
72
- * blockOrder.map((key) => (
73
- * <Fragment key={String(key)}>{blocks[key]}</Fragment>
74
- * ))
75
- * }
76
- * </BlocksOverrideComponent>
77
- */
78
- function BlocksOverrideComponent({ blocksOverride, defaultBlocks, defaultBlockOrder, children, }) {
79
- if (blocksOverride === undefined) {
80
- return children({
81
- // TODO: Remove this assertion
82
- blocks: defaultBlocks,
83
- blockOrder: defaultBlockOrder,
84
- });
85
- }
86
- if (typeof blocksOverride === "function") {
87
- const { blocks, blockOrder } = blocksOverride({
88
- defaultBlocks,
89
- defaultBlockOrder,
90
- });
91
- return children({ blocks, blockOrder });
92
- }
93
- return blocksOverride;
94
- }
95
- /**
96
- * Utility function to join class names together, ignoring undefined or nil values.
97
- * @param classes - The class names to join.
98
- * @returns The joined class names.
99
- */
100
- function classNames(...classes) {
101
- return classes.flat().filter(Boolean).join(" ");
102
- }
103
-
104
- const Breadcrumb = ({ className, children, }) => {
105
- return (jsxRuntime.jsx("nav", { className: classNames("nbb-breadcrumb", className), children: jsxRuntime.jsx(BlocksOverrideComponent, { defaultBlocks: defaultBlocks, defaultBlockOrder: Object.keys(defaultBlocks), blocksOverride: children, children: ({ blocks: { breadcrumbChevron, breadcrumbItem, ...blocks }, blockOrder, }) => blockOrder
106
- .filter((key) => key in blocks)
107
- .map((key, index) => {
108
- return (jsxRuntime.jsxs("span", { className: "nbb-breadcrumb-segment", children: [index > 0 && breadcrumbChevron, blocks[key]] }, `${index}-breadcrumb`));
109
- }) }) }));
110
- };
111
- Breadcrumb.BreadcrumbChevron = BreadcrumbChevron;
112
- Breadcrumb.BreadcrumbItem = BreadcrumbItem;
113
- const defaultBlocks = createDefaultBlocks({
114
- breadcrumbChevron: BreadcrumbChevron,
115
- breadcrumbItem: BreadcrumbItem,
116
- });
117
-
118
- exports.Breadcrumbs = Breadcrumb;
119
- //# sourceMappingURL=index.cjs.js.map
1
+ "use strict";var r=require("react/jsx-runtime"),e=require("@mui/material"),t=require("react");const a=({component:t="a",sx:a,url:o,children:c,...l})=>r.jsx(e.Link,{underline:"hover",color:"inherit",href:o,sx:[r=>({fontSize:r.typography.caption.fontSize,fontWeight:r.typography.caption.fontWeight}),...Array.isArray(a)?a:[a]],...l,children:c}),o=()=>{const t=e.useTheme();return r.jsx(e.SvgIcon,{sx:{fontSize:t.typography.caption.fontSize,color:t.palette.primary.contrastText},viewBox:"0 0 8 12",children:r.jsx("path",{d:"M0.294922 10.59L4.87492 6L0.294922 1.41L1.70492 0L7.70492 6L1.70492 12L0.294922 10.59Z"})})};function c({blocksOverride:r,defaultBlocks:e,defaultBlockOrder:t,children:a}){if(void 0===r)return a({blocks:e,blockOrder:t});if("function"==typeof r){const{blocks:o,blockOrder:c}=r({defaultBlocks:e,defaultBlockOrder:t});return a({blocks:o,blockOrder:c})}return r}function l(...r){return r.flat().filter(Boolean).join(" ")}const i=({maxItems:a=8,itemsBeforeCollapse:o=1,itemsAfterCollapse:i=1,className:n,children:m,sx:d,...u})=>r.jsx(e.Breadcrumbs,{className:l("nbb-breadcrumb",n),"aria-label":"breadcrumb",maxItems:a,itemsBeforeCollapse:o,itemsAfterCollapse:i,sx:[r=>({py:1.5,px:2,bgcolor:"primary.main",color:"primary.contrastText",borderBottom:e.alpha(r.palette.primary.contrastText,.2),"& .MuiBreadcrumbs-ol":{gap:1},"& .MuiBreadcrumbs-li":{display:"flex",alignItems:"center",gap:1},"& .MuiBreadcrumbs-separator":{display:"none"}}),...Array.isArray(d)?d:[d]],...u,children:r.jsx(c,{defaultBlocks:s,defaultBlockOrder:Object.keys(s),blocksOverride:m,children:({blocks:{breadcrumbChevron:e,breadcrumbItem:a,...o},blockOrder:c})=>c.filter(r=>r in o).map((a,c)=>r.jsxs(t.Fragment,{children:[c>0&&e,o[a]]},`${c}-breadcrumb`))})});i.BreadcrumbChevron=o,i.BreadcrumbItem=a;const s=(n={breadcrumbChevron:o,breadcrumbItem:a},Object.fromEntries(Object.entries(n).map(([r,e])=>[r,t.createElement(e,{key:r})])));var n;exports.Breadcrumbs=i;
package/dist/index.esm.js CHANGED
@@ -1,117 +1 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { createElement } from 'react';
3
-
4
- const BreadcrumbItem = ({ url, children, }) => (jsx("a", { href: url, className: "nbb-breadcrumb-item", children: children }));
5
- const BreadcrumbChevron = () => (jsx("span", { className: "nbb-breadcrumb-chevron", children: jsx("svg", { width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M0.294922 10.59L4.87492 6L0.294922 1.41L1.70492 0L7.70492 6L1.70492 12L0.294922 10.59Z", fill: "white" }) }) }));
6
-
7
- function styleInject(css, ref) {
8
- if ( ref === void 0 ) ref = {};
9
- var insertAt = ref.insertAt;
10
-
11
- if (typeof document === 'undefined') { return; }
12
-
13
- var head = document.head || document.getElementsByTagName('head')[0];
14
- var style = document.createElement('style');
15
- style.type = 'text/css';
16
-
17
- if (insertAt === 'top') {
18
- if (head.firstChild) {
19
- head.insertBefore(style, head.firstChild);
20
- } else {
21
- head.appendChild(style);
22
- }
23
- } else {
24
- head.appendChild(style);
25
- }
26
-
27
- if (style.styleSheet) {
28
- style.styleSheet.cssText = css;
29
- } else {
30
- style.appendChild(document.createTextNode(css));
31
- }
32
- }
33
-
34
- var css_248z = ".nbb-breadcrumb {\n --color-object-accent-primary: #006EAD;\n --color-text-on-primary: #fff;\n\n display: flex;\n align-items: center;\n padding: 8px 16px;\n background-color: var(--color-object-accent-primary);\n color: var(--color-text-on-primary);\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-segment {\n display: flex;\n align-items: center;\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-item {\n color: var(--color-text-on-primary);\n text-decoration: none;\n padding: 0 4px;\n font-size: 12px;\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-item:hover {\n text-decoration: underline;\n color: var(--color-text-on-primary);\n}\n\n.nbb-breadcrumb .nbb-breadcrumb-chevron {\n margin: 0 4px;\n min-width: 24px;\n color: var(--color-text-on-primary);\n}\n";
35
- styleInject(css_248z);
36
-
37
- /**
38
- * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.
39
- *
40
- * @param components - A map of default block keys to component functions.
41
- *
42
- * @example
43
- * const defaultBlocks = createDefaultBlocks({
44
- * title: Title,
45
- * description: Description,
46
- * form: Form,
47
- * });
48
- */
49
- function createDefaultBlocks(components) {
50
- return Object.fromEntries(Object.entries(components).map(([key, Component]) => [
51
- key,
52
- createElement(Component, { key }),
53
- ]));
54
- }
55
- /**
56
- * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.
57
- * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.
58
- *
59
- * @param props
60
- * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).
61
- * @param props.defaultBlocks - The default blocks of outer component.
62
- * @param props.children - A function returning the JSX to render.
63
- *
64
- * @example
65
- * <BlocksOverrideComponent
66
- * defaultBlocks={defaultFormBlocks}
67
- * blocksOverride={children}
68
- * >
69
- * {({ blocks, blockOrder }) =>
70
- * blockOrder.map((key) => (
71
- * <Fragment key={String(key)}>{blocks[key]}</Fragment>
72
- * ))
73
- * }
74
- * </BlocksOverrideComponent>
75
- */
76
- function BlocksOverrideComponent({ blocksOverride, defaultBlocks, defaultBlockOrder, children, }) {
77
- if (blocksOverride === undefined) {
78
- return children({
79
- // TODO: Remove this assertion
80
- blocks: defaultBlocks,
81
- blockOrder: defaultBlockOrder,
82
- });
83
- }
84
- if (typeof blocksOverride === "function") {
85
- const { blocks, blockOrder } = blocksOverride({
86
- defaultBlocks,
87
- defaultBlockOrder,
88
- });
89
- return children({ blocks, blockOrder });
90
- }
91
- return blocksOverride;
92
- }
93
- /**
94
- * Utility function to join class names together, ignoring undefined or nil values.
95
- * @param classes - The class names to join.
96
- * @returns The joined class names.
97
- */
98
- function classNames(...classes) {
99
- return classes.flat().filter(Boolean).join(" ");
100
- }
101
-
102
- const Breadcrumb = ({ className, children, }) => {
103
- return (jsx("nav", { className: classNames("nbb-breadcrumb", className), children: jsx(BlocksOverrideComponent, { defaultBlocks: defaultBlocks, defaultBlockOrder: Object.keys(defaultBlocks), blocksOverride: children, children: ({ blocks: { breadcrumbChevron, breadcrumbItem, ...blocks }, blockOrder, }) => blockOrder
104
- .filter((key) => key in blocks)
105
- .map((key, index) => {
106
- return (jsxs("span", { className: "nbb-breadcrumb-segment", children: [index > 0 && breadcrumbChevron, blocks[key]] }, `${index}-breadcrumb`));
107
- }) }) }));
108
- };
109
- Breadcrumb.BreadcrumbChevron = BreadcrumbChevron;
110
- Breadcrumb.BreadcrumbItem = BreadcrumbItem;
111
- const defaultBlocks = createDefaultBlocks({
112
- breadcrumbChevron: BreadcrumbChevron,
113
- breadcrumbItem: BreadcrumbItem,
114
- });
115
-
116
- export { Breadcrumb as Breadcrumbs };
117
- //# sourceMappingURL=index.esm.js.map
1
+ import{jsx as r,jsxs as e}from"react/jsx-runtime";import{Link as t,useTheme as o,SvgIcon as a,Breadcrumbs as c,alpha as l}from"@mui/material";import i,{createElement as n}from"react";const s=({component:e="a",sx:o,url:a,children:c,...l})=>r(t,{underline:"hover",color:"inherit",href:a,sx:[r=>({fontSize:r.typography.caption.fontSize,fontWeight:r.typography.caption.fontWeight}),...Array.isArray(o)?o:[o]],...l,children:c}),m=()=>{const e=o();return r(a,{sx:{fontSize:e.typography.caption.fontSize,color:e.palette.primary.contrastText},viewBox:"0 0 8 12",children:r("path",{d:"M0.294922 10.59L4.87492 6L0.294922 1.41L1.70492 0L7.70492 6L1.70492 12L0.294922 10.59Z"})})};function d({blocksOverride:r,defaultBlocks:e,defaultBlockOrder:t,children:o}){if(void 0===r)return o({blocks:e,blockOrder:t});if("function"==typeof r){const{blocks:a,blockOrder:c}=r({defaultBlocks:e,defaultBlockOrder:t});return o({blocks:a,blockOrder:c})}return r}function b(...r){return r.flat().filter(Boolean).join(" ")}const p=({maxItems:t=8,itemsBeforeCollapse:o=1,itemsAfterCollapse:a=1,className:n,children:s,sx:m,...p})=>r(c,{className:b("nbb-breadcrumb",n),"aria-label":"breadcrumb",maxItems:t,itemsBeforeCollapse:o,itemsAfterCollapse:a,sx:[r=>({py:1.5,px:2,bgcolor:"primary.main",color:"primary.contrastText",borderBottom:l(r.palette.primary.contrastText,.2),"& .MuiBreadcrumbs-ol":{gap:1},"& .MuiBreadcrumbs-li":{display:"flex",alignItems:"center",gap:1},"& .MuiBreadcrumbs-separator":{display:"none"}}),...Array.isArray(m)?m:[m]],...p,children:r(d,{defaultBlocks:u,defaultBlockOrder:Object.keys(u),blocksOverride:s,children:({blocks:{breadcrumbChevron:r,breadcrumbItem:t,...o},blockOrder:a})=>a.filter(r=>r in o).map((t,a)=>e(i.Fragment,{children:[a>0&&r,o[t]]},`${a}-breadcrumb`))})});p.BreadcrumbChevron=m,p.BreadcrumbItem=s;const u=(f={breadcrumbChevron:m,breadcrumbItem:s},Object.fromEntries(Object.entries(f).map(([r,e])=>[r,n(e,{key:r})])));var f;export{p as Breadcrumbs};
package/dist/lib.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import { ComponentProps, FunctionComponent, ReactElement, ReactNode } from "react";
1
+ import { ComponentProps, FunctionComponent, ReactElement, ReactNode } from 'react';
2
2
  /**
3
3
  * The function to be passed into a block component as `children` to selectively override default blocks, or just a `ReactNode`.
4
4
  *
5
5
  * @example
6
6
  * <Block>
7
- * {({header, ...defaultBlocks}) => ({
7
+ * {({ defaultBlocks: { header, ...defaultBlocks }, defaultBlockOrder }) => ({
8
8
  * blocks: {
9
9
  * ...defaultBlocks,
10
10
  * header: {
@@ -72,7 +72,12 @@ export declare function BlocksOverrideComponent<DefaultBlocks extends Record<str
72
72
  blockOrder: readonly (keyof DefaultBlocks | keyof CustomBlocks)[];
73
73
  }) => ReactNode;
74
74
  }): ReactNode;
75
- export declare function deepMerge<A extends Record<string, any>, B extends Record<string, any>>(obj1: A, obj2: B): A & B;
75
+ type MergeKeepingRequired<A, B> = Omit<A, keyof B> & {
76
+ [K in keyof A & keyof B]-?: undefined extends B[K] ? A[K] : B[K];
77
+ } & {
78
+ [K in Exclude<keyof B, keyof A>]: B[K];
79
+ };
80
+ export declare function merge<A extends Record<PropertyKey, any>, B extends Record<PropertyKey, any>>(a: A, b: B): MergeKeepingRequired<A, B>;
76
81
  type ClassName = string | ClassName[] | undefined | null;
77
82
  /**
78
83
  * Utility function to join class names together, ignoring undefined or nil values.
@@ -80,5 +85,19 @@ type ClassName = string | ClassName[] | undefined | null;
80
85
  * @returns The joined class names.
81
86
  */
82
87
  export declare function classNames(...classes: ClassName[]): string;
88
+ /**
89
+ * Omits the given string keys from `source`.
90
+ *
91
+ * Usage:
92
+ * omit(obj, "a", "b")
93
+ */
94
+ export declare function omit<T extends object, const Keys extends readonly string[]>(source: T, ...keys: Keys): Omit<T, Extract<Keys[number], keyof T>>;
95
+ /**
96
+ * Picks the given keys out of `source` into a new object.
97
+ *
98
+ * Usage:
99
+ * pick(obj, "a", "b")
100
+ */
101
+ export declare function pick<T extends object, K extends PropertyKey>(source: T, ...keys: K[]): Pick<T, Extract<K, keyof T>>;
83
102
  export {};
84
103
  //# sourceMappingURL=lib.d.ts.map
package/dist/lib.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EAEd,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAEf;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,cAAc,CAAC,aAAa,EAAE,YAAY,IAClD,CAAC,CAAC,EACA,aAAa,EACb,iBAAiB,GAClB,EAAE;IACD,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,SAAS,CAAC,MAAM,aAAa,CAAC,EAAE,CAAC;CACrD,KAAK;IACJ,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,YAAY,CAAC;IAE9C,UAAU,EACN,SAAS,CAAC,MAAM,aAAa,CAAC,EAAE,GAChC,SAAS,CAAC,MAAM,YAAY,CAAC,EAAE,CAAC;CACrC,CAAC,GACF,SAAS,CAAC;AAEd;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CACjC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,GAAG,CAAC,CAAC,EAEhD,UAAU,EAAE,CAAC,GACZ;KACA,CAAC,IAAI,MAAM,CAAC,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;CACzD,CASA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,uBAAuB,CACrC,aAAa,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC/C,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAC9C,EACA,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,QAAQ,GACT,EAAE;IACD,cAAc,EAAE,cAAc,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC;IAC5D,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,CAAC,MAAM,aAAa,CAAC,EAAE,CAAC;IAC3C,QAAQ,EAAE,CAAC,EACT,MAAM,EACN,UAAU,GACX,EAAE;QAED,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;QACvD,UAAU,EAAE,SAAS,CAAC,MAAM,aAAa,GAAG,MAAM,YAAY,CAAC,EAAE,CAAC;KACnE,KAAK,SAAS,CAAC;CACjB,aAmBA;AAED,wBAAgB,SAAS,CACvB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAwBC,CAAC,GAAG,CAAC,CACvB;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAE1D"}
1
+ {"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,30 +1,42 @@
1
1
  {
2
2
  "name": "@nodeblocks/frontend-breadcrumb-block",
3
- "version": "0.1.0",
4
- "main": "dist/index.cjs.js",
5
- "module": "dist/index.esm.js",
6
- "browser": "dist/index.iife.js",
7
- "types": "dist/index.d.ts",
3
+ "version": "0.2.1",
4
+ "main": "./dist/index.cjs.js",
5
+ "module": "./dist/index.esm.js",
6
+ "types": "./dist/index.d.ts",
7
+ "exports": {
8
+ ".": {
9
+ "types": "./dist/index.d.ts",
10
+ "development": "./src/index.ts",
11
+ "import": "./dist/index.esm.js",
12
+ "require": "./dist/index.cjs.js",
13
+ "default": "./dist/index.esm.js"
14
+ }
15
+ },
8
16
  "files": [
9
- "dist/",
10
- "dist/index.css"
17
+ "dist/"
11
18
  ],
12
19
  "scripts": {
13
- "build": "rollup -c",
14
- "watch": "rollup -c --watch"
20
+ "build": "npm run typecheck && rollup -c",
21
+ "watch": "rm -rf dist && cross-env NODE_ENV=development rollup -c --watch",
22
+ "typecheck": "tsc --noEmit"
15
23
  },
16
24
  "peerDependencies": {
17
- "react": "^18.3.1",
18
- "react-dom": "^18.0.0"
25
+ "@emotion/react": "^11.14.0",
26
+ "@emotion/styled": "^11.14.1",
27
+ "@mui/material": "^7.3.4",
28
+ "react": ">=18 <20",
29
+ "react-dom": ">=18 <20"
19
30
  },
20
31
  "devDependencies": {
21
- "@rollup/plugin-commonjs": "^28.0.1",
32
+ "@rollup/plugin-commonjs": "^28.0.6",
22
33
  "@rollup/plugin-json": "^6.1.0",
23
34
  "@rollup/plugin-node-resolve": "^15.3.0",
35
+ "@rollup/plugin-terser": "^0.4.4",
24
36
  "@rollup/plugin-typescript": "^12.1.1",
25
- "@types/react": "^18.3.12",
26
- "@types/react-dom": "^18.3.1",
27
- "rollup": "^4.28.0",
37
+ "@types/react": "19.2.7",
38
+ "@types/react-dom": "19.2.3",
39
+ "rollup": "^4.55.1",
28
40
  "rollup-plugin-peer-deps-external": "^2.2.4",
29
41
  "rollup-plugin-postcss": "^4.0.2",
30
42
  "rollup-plugin-serve": "^1.1.1",
package/readme.md CHANGED
@@ -3,24 +3,29 @@
3
3
  Welcome to the Nodeblocks Frontend Starter Kit! 🎉 This kit is designed to make building frontend libraries in React super easy, helping you streamline your development workflow with minimal fuss. Let's dive in! 🤿
4
4
 
5
5
  ### ✨ Features
6
+
6
7
  - **🚀 Bundling with Rollup:** Get a clean, minimalistic approach to bundling your JavaScript files for smoother frontend development.
7
8
  - **💙 TypeScript Support:** We've included a pre-configured `tsconfig.json` to ensure your TypeScript setup is strict, efficient, and ready to go.
8
9
  - **⚙️ Peer Dependencies:** Keep bundle sizes lean with React and React DOM set as peer dependencies.
9
10
  - **🎨 CSS Support:** Easily import and process CSS files, giving you more control over your styles.
10
11
 
11
12
  ### 🛠️ How to Use
13
+
12
14
  1. **Clone this repository** 🌀:
15
+
13
16
  ```bash
14
17
  git clone <repository-url>
15
18
  cd <repository-directory>
16
19
  ```
17
20
 
18
21
  2. **Install dependencies** 📦:
22
+
19
23
  ```bash
20
24
  npm install
21
25
  ```
22
26
 
23
27
  3. **Start development** 🛠️:
28
+
24
29
  ```bash
25
30
  npm run watch
26
31
  ```
@@ -48,10 +53,12 @@ This ensures Nodeblocks libraries integrate seamlessly with different workflows.
48
53
  npm link
49
54
  ```
50
55
  2. In the test project you want to run:
56
+
51
57
  ```bash
52
58
  npm i
53
59
  npm link @basaldev/frontend-starter-kit
54
60
  ```
55
- (Note that in real life your library would not be called frontend-starter-kit.)
56
61
 
57
- 3. Then you can follow your usual workflow either with **Create React App** (`npm start`) or with Vite (`npm run dev`). This will give you a development environment where whenever you change your library it will be available in your test project.
62
+ (Note that in real life your library would not be called frontend-starter-kit.)
63
+
64
+ 3. Then you can follow your usual workflow either with **Create React App** (`npm start`) or with Vite (`npm run dev`). This will give you a development environment where whenever you change your library it will be available in your test project.
package/dist/index.cjs.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.cjs.js","sources":["../src/blocks.tsx","../node_modules/style-inject/dist/style-inject.es.js","../src/lib.ts","../src/Breadcrumb.tsx"],"sourcesContent":["import { ComponentProps, ReactNode } from \"react\";\n\nexport const BreadcrumbItem = ({\n url,\n children,\n}: Omit<ComponentProps<\"a\">, \"children\"> & {\n url: string;\n children: ReactNode;\n}) => (\n <a href={url} className=\"nbb-breadcrumb-item\">\n {children}\n </a>\n);\n\nexport const BreadcrumbChevron = () => (\n <span className=\"nbb-breadcrumb-chevron\">\n <svg\n width=\"8\"\n height=\"12\"\n viewBox=\"0 0 8 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M0.294922 10.59L4.87492 6L0.294922 1.41L1.70492 0L7.70492 6L1.70492 12L0.294922 10.59Z\"\n fill=\"white\"\n />\n </svg>\n </span>\n);\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import {\n ComponentProps,\n createElement,\n FunctionComponent,\n ReactElement,\n ReactNode,\n} from \"react\";\n\n/**\n * The function to be passed into a block component as `children` to selectively override default blocks, or just a `ReactNode`.\n *\n * @example\n * <Block>\n * {({header, ...defaultBlocks}) => ({\n * blocks: {\n * ...defaultBlocks,\n * header: {\n * ...header,\n * props: {\n * ...header.props,\n * label: \"Custom Label\"\n * }\n * },\n * subheader: <CustomComponent />\n * },\n * blockOrder: [\"header\", \"subheader\", \"body\", \"footer\"]\n * })}\n * </Block>\n */\nexport type BlocksOverride<DefaultBlocks, CustomBlocks> =\n | (({\n defaultBlocks,\n defaultBlockOrder,\n }: {\n defaultBlocks: DefaultBlocks;\n defaultBlockOrder: readonly (keyof DefaultBlocks)[];\n }) => {\n blocks: Partial<DefaultBlocks> & CustomBlocks;\n // NOTE: This specific combination allows proper autocomplete.\n blockOrder:\n | readonly (keyof DefaultBlocks)[]\n | readonly (keyof CustomBlocks)[];\n })\n | ReactNode;\n\n/**\n * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.\n *\n * @param components - A map of default block keys to component functions.\n *\n * @example\n * const defaultBlocks = createDefaultBlocks({\n * title: Title,\n * description: Description,\n * form: Form,\n * });\n */\nexport function createDefaultBlocks<\n T extends Record<string, FunctionComponent<any>>,\n>(\n components: T\n): {\n [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n} {\n return Object.fromEntries(\n Object.entries(components).map(([key, Component]) => [\n key,\n createElement(Component, { key }),\n ])\n ) as {\n [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n };\n}\n\n/**\n * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.\n * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.\n *\n * @param props\n * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).\n * @param props.defaultBlocks - The default blocks of outer component.\n * @param props.children - A function returning the JSX to render.\n *\n * @example\n * <BlocksOverrideComponent\n * defaultBlocks={defaultFormBlocks}\n * blocksOverride={children}\n * >\n * {({ blocks, blockOrder }) =>\n * blockOrder.map((key) => (\n * <Fragment key={String(key)}>{blocks[key]}</Fragment>\n * ))\n * }\n * </BlocksOverrideComponent>\n */\nexport function BlocksOverrideComponent<\n DefaultBlocks extends Record<string, ReactNode>,\n CustomBlocks extends Record<string, ReactNode>,\n>({\n blocksOverride,\n defaultBlocks,\n defaultBlockOrder,\n children,\n}: {\n blocksOverride: BlocksOverride<DefaultBlocks, CustomBlocks>;\n defaultBlocks: DefaultBlocks;\n defaultBlockOrder: (keyof DefaultBlocks)[];\n children: ({\n blocks,\n blockOrder,\n }: {\n // TODO: Possibly find an alternative to Partial<CustomBlocks>\n blocks: Partial<DefaultBlocks> & Partial<CustomBlocks>;\n blockOrder: readonly (keyof DefaultBlocks | keyof CustomBlocks)[];\n }) => ReactNode;\n}) {\n if (blocksOverride === undefined) {\n return children({\n // TODO: Remove this assertion\n blocks: defaultBlocks as DefaultBlocks & Partial<CustomBlocks>,\n blockOrder: defaultBlockOrder,\n });\n }\n\n if (typeof blocksOverride === \"function\") {\n const { blocks, blockOrder } = blocksOverride({\n defaultBlocks,\n defaultBlockOrder,\n });\n\n return children({ blocks, blockOrder });\n }\n\n return blocksOverride;\n}\n\nexport function deepMerge<\n A extends Record<string, any>,\n B extends Record<string, any>,\n>(obj1: A, obj2: B) {\n const result: Record<string, any> = { ...obj1 };\n\n for (const key in obj2) {\n if (obj2.hasOwnProperty(key)) {\n const val1 = result[key];\n const val2 = obj2[key];\n\n if (Array.isArray(val1) || Array.isArray(val2)) {\n // If either is an array, replace entirely with obj2's value\n result[key] = val2;\n } else if (\n typeof val1 === \"object\" &&\n val1 !== null &&\n typeof val2 === \"object\" &&\n val2 !== null\n ) {\n result[key] = deepMerge(val1, val2);\n } else {\n result[key] = val2;\n }\n }\n }\n\n return result as A & B;\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n return classes.flat().filter(Boolean).join(\" \");\n}\n","import { ComponentProps, ReactNode } from \"react\";\nimport { BreadcrumbChevron, BreadcrumbItem } from \"./blocks\";\nimport \"./breadcrumb.css\";\nimport {\n BlocksOverride,\n BlocksOverrideComponent,\n classNames,\n createDefaultBlocks,\n} from \"./lib\";\n\nconst Breadcrumb = <CustomBlocks extends Record<string, ReactNode>>({\n className,\n children,\n}: Omit<ComponentProps<\"nav\">, \"children\"> & {\n children?: BlocksOverride<typeof defaultBlocks, CustomBlocks>;\n}) => {\n return (\n <nav className={classNames(\"nbb-breadcrumb\", className)}>\n <BlocksOverrideComponent\n defaultBlocks={defaultBlocks}\n defaultBlockOrder={\n Object.keys(defaultBlocks) as (keyof typeof defaultBlocks)[]\n }\n blocksOverride={children}\n >\n {({\n blocks: { breadcrumbChevron, breadcrumbItem, ...blocks },\n blockOrder,\n }) =>\n blockOrder\n .filter((key) => key in blocks)\n .map<ReactNode>((key, index) => {\n return (\n <span\n key={`${index}-breadcrumb`}\n className=\"nbb-breadcrumb-segment\"\n >\n {index > 0 && breadcrumbChevron}\n {blocks[key]}\n </span>\n );\n })\n }\n </BlocksOverrideComponent>\n </nav>\n );\n};\n\nBreadcrumb.BreadcrumbChevron = BreadcrumbChevron;\nBreadcrumb.BreadcrumbItem = BreadcrumbItem;\n\nconst defaultBlocks = createDefaultBlocks({\n breadcrumbChevron: BreadcrumbChevron,\n breadcrumbItem: BreadcrumbItem,\n});\n\nexport default Breadcrumb;\n"],"names":["_jsx","createElement","_jsxs"],"mappings":"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","x_google_ignoreList":[1]}
package/dist/index.esm.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.esm.js","sources":["../src/blocks.tsx","../node_modules/style-inject/dist/style-inject.es.js","../src/lib.ts","../src/Breadcrumb.tsx"],"sourcesContent":["import { ComponentProps, ReactNode } from \"react\";\n\nexport const BreadcrumbItem = ({\n url,\n children,\n}: Omit<ComponentProps<\"a\">, \"children\"> & {\n url: string;\n children: ReactNode;\n}) => (\n <a href={url} className=\"nbb-breadcrumb-item\">\n {children}\n </a>\n);\n\nexport const BreadcrumbChevron = () => (\n <span className=\"nbb-breadcrumb-chevron\">\n <svg\n width=\"8\"\n height=\"12\"\n viewBox=\"0 0 8 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M0.294922 10.59L4.87492 6L0.294922 1.41L1.70492 0L7.70492 6L1.70492 12L0.294922 10.59Z\"\n fill=\"white\"\n />\n </svg>\n </span>\n);\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import {\n ComponentProps,\n createElement,\n FunctionComponent,\n ReactElement,\n ReactNode,\n} from \"react\";\n\n/**\n * The function to be passed into a block component as `children` to selectively override default blocks, or just a `ReactNode`.\n *\n * @example\n * <Block>\n * {({header, ...defaultBlocks}) => ({\n * blocks: {\n * ...defaultBlocks,\n * header: {\n * ...header,\n * props: {\n * ...header.props,\n * label: \"Custom Label\"\n * }\n * },\n * subheader: <CustomComponent />\n * },\n * blockOrder: [\"header\", \"subheader\", \"body\", \"footer\"]\n * })}\n * </Block>\n */\nexport type BlocksOverride<DefaultBlocks, CustomBlocks> =\n | (({\n defaultBlocks,\n defaultBlockOrder,\n }: {\n defaultBlocks: DefaultBlocks;\n defaultBlockOrder: readonly (keyof DefaultBlocks)[];\n }) => {\n blocks: Partial<DefaultBlocks> & CustomBlocks;\n // NOTE: This specific combination allows proper autocomplete.\n blockOrder:\n | readonly (keyof DefaultBlocks)[]\n | readonly (keyof CustomBlocks)[];\n })\n | ReactNode;\n\n/**\n * Creates a strongly typed `defaultBlocks` object, allowing for types to propagate into block override objects.\n *\n * @param components - A map of default block keys to component functions.\n *\n * @example\n * const defaultBlocks = createDefaultBlocks({\n * title: Title,\n * description: Description,\n * form: Form,\n * });\n */\nexport function createDefaultBlocks<\n T extends Record<string, FunctionComponent<any>>,\n>(\n components: T\n): {\n [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n} {\n return Object.fromEntries(\n Object.entries(components).map(([key, Component]) => [\n key,\n createElement(Component, { key }),\n ])\n ) as {\n [K in keyof T]: ReactElement<ComponentProps<T[K]>, T[K]>;\n };\n}\n\n/**\n * A component for rendering {@link BlocksOverride|`BlocksOverride`} results.\n * Exposes the evaluated `blocks` and `blockOrder` as arguments to the `children` function.\n *\n * @param props\n * @param props.blocksOverride - The {@link BlocksOverride|`BlocksOverride`} (i.e. `children` of outer component).\n * @param props.defaultBlocks - The default blocks of outer component.\n * @param props.children - A function returning the JSX to render.\n *\n * @example\n * <BlocksOverrideComponent\n * defaultBlocks={defaultFormBlocks}\n * blocksOverride={children}\n * >\n * {({ blocks, blockOrder }) =>\n * blockOrder.map((key) => (\n * <Fragment key={String(key)}>{blocks[key]}</Fragment>\n * ))\n * }\n * </BlocksOverrideComponent>\n */\nexport function BlocksOverrideComponent<\n DefaultBlocks extends Record<string, ReactNode>,\n CustomBlocks extends Record<string, ReactNode>,\n>({\n blocksOverride,\n defaultBlocks,\n defaultBlockOrder,\n children,\n}: {\n blocksOverride: BlocksOverride<DefaultBlocks, CustomBlocks>;\n defaultBlocks: DefaultBlocks;\n defaultBlockOrder: (keyof DefaultBlocks)[];\n children: ({\n blocks,\n blockOrder,\n }: {\n // TODO: Possibly find an alternative to Partial<CustomBlocks>\n blocks: Partial<DefaultBlocks> & Partial<CustomBlocks>;\n blockOrder: readonly (keyof DefaultBlocks | keyof CustomBlocks)[];\n }) => ReactNode;\n}) {\n if (blocksOverride === undefined) {\n return children({\n // TODO: Remove this assertion\n blocks: defaultBlocks as DefaultBlocks & Partial<CustomBlocks>,\n blockOrder: defaultBlockOrder,\n });\n }\n\n if (typeof blocksOverride === \"function\") {\n const { blocks, blockOrder } = blocksOverride({\n defaultBlocks,\n defaultBlockOrder,\n });\n\n return children({ blocks, blockOrder });\n }\n\n return blocksOverride;\n}\n\nexport function deepMerge<\n A extends Record<string, any>,\n B extends Record<string, any>,\n>(obj1: A, obj2: B) {\n const result: Record<string, any> = { ...obj1 };\n\n for (const key in obj2) {\n if (obj2.hasOwnProperty(key)) {\n const val1 = result[key];\n const val2 = obj2[key];\n\n if (Array.isArray(val1) || Array.isArray(val2)) {\n // If either is an array, replace entirely with obj2's value\n result[key] = val2;\n } else if (\n typeof val1 === \"object\" &&\n val1 !== null &&\n typeof val2 === \"object\" &&\n val2 !== null\n ) {\n result[key] = deepMerge(val1, val2);\n } else {\n result[key] = val2;\n }\n }\n }\n\n return result as A & B;\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n return classes.flat().filter(Boolean).join(\" \");\n}\n","import { ComponentProps, ReactNode } from \"react\";\nimport { BreadcrumbChevron, BreadcrumbItem } from \"./blocks\";\nimport \"./breadcrumb.css\";\nimport {\n BlocksOverride,\n BlocksOverrideComponent,\n classNames,\n createDefaultBlocks,\n} from \"./lib\";\n\nconst Breadcrumb = <CustomBlocks extends Record<string, ReactNode>>({\n className,\n children,\n}: Omit<ComponentProps<\"nav\">, \"children\"> & {\n children?: BlocksOverride<typeof defaultBlocks, CustomBlocks>;\n}) => {\n return (\n <nav className={classNames(\"nbb-breadcrumb\", className)}>\n <BlocksOverrideComponent\n defaultBlocks={defaultBlocks}\n defaultBlockOrder={\n Object.keys(defaultBlocks) as (keyof typeof defaultBlocks)[]\n }\n blocksOverride={children}\n >\n {({\n blocks: { breadcrumbChevron, breadcrumbItem, ...blocks },\n blockOrder,\n }) =>\n blockOrder\n .filter((key) => key in blocks)\n .map<ReactNode>((key, index) => {\n return (\n <span\n key={`${index}-breadcrumb`}\n className=\"nbb-breadcrumb-segment\"\n >\n {index > 0 && breadcrumbChevron}\n {blocks[key]}\n </span>\n );\n })\n }\n </BlocksOverrideComponent>\n </nav>\n );\n};\n\nBreadcrumb.BreadcrumbChevron = BreadcrumbChevron;\nBreadcrumb.BreadcrumbItem = BreadcrumbItem;\n\nconst defaultBlocks = createDefaultBlocks({\n breadcrumbChevron: BreadcrumbChevron,\n breadcrumbItem: BreadcrumbItem,\n});\n\nexport default Breadcrumb;\n"],"names":["_jsx","_jsxs"],"mappings":"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","x_google_ignoreList":[1]}