@purpurds/grid 7.6.1 → 7.8.0
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.
- package/dist/grid.cjs.js +2 -2
- package/dist/grid.cjs.js.map +1 -1
- package/dist/grid.d.ts +2 -2
- package/dist/grid.d.ts.map +1 -1
- package/dist/grid.es.js +23 -23
- package/dist/grid.es.js.map +1 -1
- package/dist/grid.item.d.ts +2 -2
- package/dist/grid.item.d.ts.map +1 -1
- package/package.json +8 -8
- package/src/grid.item.tsx +3 -5
- package/src/grid.stories.tsx +5 -5
- package/src/grid.tsx +3 -3
- package/src/grids.item.stories.tsx +1 -1
package/dist/grid.cjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),m=require("react");function N(p){return p&&p.__esModule&&Object.prototype.hasOwnProperty.call(p,"default")?p.default:p}var c={exports:{}};/*!
|
|
2
2
|
Copyright (c) 2018 Jed Watson.
|
|
3
3
|
Licensed under the MIT License (MIT), see
|
|
4
4
|
http://jedwatson.github.io/classnames
|
|
5
|
-
*/var v;function C(){return v||(v=1,function(p){(function(){var
|
|
5
|
+
*/var v;function C(){return v||(v=1,function(p){(function(){var d={}.hasOwnProperty;function u(){for(var r="",i=0;i<arguments.length;i++){var _=arguments[i];_&&(r=e(r,l.call(this,_)))}return r}function l(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return u.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var i="";for(var _ in r)d.call(r,_)&&r[_]&&(i=e(i,this&&this[_]||_));return i}function e(r,i){return i?r?r+" "+i:r+i:r}p.exports?(u.default=u,p.exports=u):window.classNames=u})()}(c)),c.exports}var w=C();const j=N(w),I={"purpur-grid-item":"_purpur-grid-item_zx9tz_1","purpur-grid-item--no-col-gap":"_purpur-grid-item--no-col-gap_zx9tz_6","purpur-grid-item-colspan-sm-4":"_purpur-grid-item-colspan-sm-4_zx9tz_24","purpur-grid-item-colspan-sm-3":"_purpur-grid-item-colspan-sm-3_zx9tz_27","purpur-grid-item-colspan-sm-2":"_purpur-grid-item-colspan-sm-2_zx9tz_30","purpur-grid-item-colspan-sm-1":"_purpur-grid-item-colspan-sm-1_zx9tz_33","purpur-grid-item-colspan-md-8":"_purpur-grid-item-colspan-md-8_zx9tz_37","purpur-grid-item-colspan-md-7":"_purpur-grid-item-colspan-md-7_zx9tz_42","purpur-grid-item-colspan-md-6":"_purpur-grid-item-colspan-md-6_zx9tz_47","purpur-grid-item-colspan-md-5":"_purpur-grid-item-colspan-md-5_zx9tz_52","purpur-grid-item-colspan-md-4":"_purpur-grid-item-colspan-md-4_zx9tz_57","purpur-grid-item-colspan-md-3":"_purpur-grid-item-colspan-md-3_zx9tz_62","purpur-grid-item-colspan-md-2":"_purpur-grid-item-colspan-md-2_zx9tz_67","purpur-grid-item-colspan-md-1":"_purpur-grid-item-colspan-md-1_zx9tz_72","purpur-grid-item-colspan-lg-12":"_purpur-grid-item-colspan-lg-12_zx9tz_77","purpur-grid-item-colspan-lg-11":"_purpur-grid-item-colspan-lg-11_zx9tz_82","purpur-grid-item-colspan-lg-10":"_purpur-grid-item-colspan-lg-10_zx9tz_87","purpur-grid-item-colspan-lg-9":"_purpur-grid-item-colspan-lg-9_zx9tz_92","purpur-grid-item-colspan-lg-8":"_purpur-grid-item-colspan-lg-8_zx9tz_97","purpur-grid-item-colspan-lg-7":"_purpur-grid-item-colspan-lg-7_zx9tz_102","purpur-grid-item-colspan-lg-6":"_purpur-grid-item-colspan-lg-6_zx9tz_107","purpur-grid-item-colspan-lg-5":"_purpur-grid-item-colspan-lg-5_zx9tz_112","purpur-grid-item-colspan-lg-4":"_purpur-grid-item-colspan-lg-4_zx9tz_117","purpur-grid-item-colspan-lg-3":"_purpur-grid-item-colspan-lg-3_zx9tz_122","purpur-grid-item-colspan-lg-2":"_purpur-grid-item-colspan-lg-2_zx9tz_127","purpur-grid-item-colspan-lg-1":"_purpur-grid-item-colspan-lg-1_zx9tz_77"},O=j.bind(I),g="purpur-grid-item",s=({children:p,className:d,colSpanSm:u=4,colSpanMd:l=8,colSpanLg:e=12,noColGap:r=!1,...i})=>{const _=O([d,g,{[`${g}--no-col-gap`]:r,[`${g}-colspan-sm-${u}`]:u,[`${g}-colspan-md-${l}`]:l,[`${g}-colspan-lg-${e}`]:e}]);return o.jsx("div",{className:_,...i,children:p})},q=p=>!!p&&m.isValidElement(p)&&p.type===s;s.displayName="Grid.Item";const A={"purpur-grid":"_purpur-grid_8kjv6_1","purpur-grid__inner":"_purpur-grid__inner_8kjv6_27","purpur-grid__inner--no-gap":"_purpur-grid__inner--no-gap_8kjv6_32","purpur-grid__inner--no-row-gap":"_purpur-grid__inner--no-row-gap_8kjv6_32","purpur-grid__inner--grid":"_purpur-grid__inner--grid_8kjv6_50","purpur-grid__inner--no-col-gap":"_purpur-grid__inner--no-col-gap_8kjv6_54","purpur-grid__inner-col-sm-4":"_purpur-grid__inner-col-sm-4_8kjv6_57","purpur-grid__inner-col-sm-3":"_purpur-grid__inner-col-sm-3_8kjv6_60","purpur-grid__inner-col-sm-2":"_purpur-grid__inner-col-sm-2_8kjv6_63","purpur-grid__inner-col-md-8":"_purpur-grid__inner-col-md-8_8kjv6_67","purpur-grid__inner-col-md-7":"_purpur-grid__inner-col-md-7_8kjv6_72","purpur-grid__inner-col-md-6":"_purpur-grid__inner-col-md-6_8kjv6_77","purpur-grid__inner-col-md-5":"_purpur-grid__inner-col-md-5_8kjv6_82","purpur-grid__inner-col-md-4":"_purpur-grid__inner-col-md-4_8kjv6_87","purpur-grid__inner-col-md-3":"_purpur-grid__inner-col-md-3_8kjv6_92","purpur-grid__inner-col-md-2":"_purpur-grid__inner-col-md-2_8kjv6_97","purpur-grid__inner-col-lg-12":"_purpur-grid__inner-col-lg-12_8kjv6_102","purpur-grid__inner-col-lg-11":"_purpur-grid__inner-col-lg-11_8kjv6_107","purpur-grid__inner-col-lg-10":"_purpur-grid__inner-col-lg-10_8kjv6_112","purpur-grid__inner-col-lg-9":"_purpur-grid__inner-col-lg-9_8kjv6_117","purpur-grid__inner-col-lg-8":"_purpur-grid__inner-col-lg-8_8kjv6_122","purpur-grid__inner-col-lg-7":"_purpur-grid__inner-col-lg-7_8kjv6_127","purpur-grid__inner-col-lg-6":"_purpur-grid__inner-col-lg-6_8kjv6_132","purpur-grid__inner-col-lg-5":"_purpur-grid__inner-col-lg-5_8kjv6_137","purpur-grid__inner-col-lg-4":"_purpur-grid__inner-col-lg-4_8kjv6_142","purpur-grid__inner-col-lg-3":"_purpur-grid__inner-col-lg-3_8kjv6_147","purpur-grid__inner-col-lg-2":"_purpur-grid__inner-col-lg-2_8kjv6_152","purpur-grid__inner--flex":"_purpur-grid__inner--flex_8kjv6_156"},x=j.bind(A),E="purpur-grid",n="purpur-grid__inner",a=({children:p,className:d,containerClassName:u,colsSm:l=1,colsMd:e=1,colsLg:r=1,noGap:i=!1,noColGap:_=!1,noRowGap:f=!1,...k})=>{const z=m.Children.toArray(p).filter(q),t=!!z.length,$=x([u,E]),h=x([d,n,{[`${n}--grid`]:!t,[`${n}--flex`]:t,[`${n}--no-gap`]:i,[`${n}--no-col-gap`]:_,[`${n}--no-row-gap`]:f,[`${n}-col-sm-${l}`]:l>1&&!t,[`${n}-col-md-${e}`]:e>1&&!t,[`${n}-col-lg-${r}`]:r>1&&!t}]);return o.jsx("div",{className:$,...k,children:o.jsx("div",{className:h,children:t?m.Children.map(z,({props:{children:y,...b}})=>o.jsx(s,{...b,noColGap:i||_,children:y})):p})})};a.displayName="Grid";a.Item=s;exports.Grid=a;
|
|
6
6
|
//# sourceMappingURL=grid.cjs.js.map
|
package/dist/grid.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/grid.item.tsx","../src/grid.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { isValidElement, type ReactElement, type ReactNode } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./grid.item.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport type ItemProps =
|
|
1
|
+
{"version":3,"file":"grid.cjs.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/grid.item.tsx","../src/grid.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { isValidElement, type ReactElement, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpurds/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./grid.item.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport type ItemProps = Omit<BaseProps, \"children\"> & {\n children: ReactNode;\n /** The number of columns that the item spans on small screens. */\n colSpanSm?: 1 | 2 | 3 | 4;\n /** The number of columns that the item spans on medium screens. */\n colSpanMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n /** The number of columns that the item spans on large screens. */\n colSpanLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** This will be passed from the parent component. */\n noColGap?: boolean;\n};\n\nconst rootClassName = \"purpur-grid-item\";\n\nexport const Item = ({\n children,\n className,\n colSpanSm = 4,\n colSpanMd = 8,\n colSpanLg = 12,\n noColGap = false,\n ...props\n}: ItemProps) => {\n const classes = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}--no-col-gap`]: noColGap,\n [`${rootClassName}-colspan-sm-${colSpanSm}`]: colSpanSm,\n [`${rootClassName}-colspan-md-${colSpanMd}`]: colSpanMd,\n [`${rootClassName}-colspan-lg-${colSpanLg}`]: colSpanLg,\n },\n ]);\n\n return (\n <div className={classes} {...props}>\n {children}\n </div>\n );\n};\n\nexport const isItem = (child?: ReactNode): child is ReactElement<ItemProps> =>\n !!child && isValidElement<ItemProps>(child) && child.type === Item;\n\nItem.displayName = \"Grid.Item\";\n","import React, { Children, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpurds/common-types\";\nimport c from \"classnames/bind\";\n\nimport { isItem, Item } from \"./grid.item\";\nimport styles from \"./grid.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport type GridProps = Omit<BaseProps, \"children\"> & {\n children: ReactNode;\n containerClassName?: string;\n /** The number of columns on small screens. */\n colsSm?: 1 | 2 | 3 | 4;\n /** The number of columns on medium screens. */\n colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n /** The number of columns on large screens. */\n colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Eliminates gaps between columns and rows. */\n noGap?: boolean;\n /** Eliminates gaps between columns. */\n noColGap?: boolean;\n /** Eliminates gaps between rows. */\n noRowGap?: boolean;\n};\n\nexport type GridCmp<P> = React.FunctionComponent<P> & {\n Item: typeof Item;\n};\n\nconst rootClassName = \"purpur-grid\";\nconst innerClassName = \"purpur-grid__inner\";\n\nexport const Grid = ({\n children,\n className,\n containerClassName,\n colsSm = 1,\n colsMd = 1,\n colsLg = 1,\n noGap = false,\n noColGap = false,\n noRowGap = false,\n ...props\n}: GridProps) => {\n const gridItemChildren = Children.toArray(children).filter(isItem);\n const hasItemChildren = !!gridItemChildren.length;\n\n const containerClasses = cx([containerClassName, rootClassName]);\n\n const classes = cx([\n className,\n innerClassName,\n {\n [`${innerClassName}--grid`]: !hasItemChildren,\n [`${innerClassName}--flex`]: hasItemChildren,\n [`${innerClassName}--no-gap`]: noGap,\n [`${innerClassName}--no-col-gap`]: noColGap,\n [`${innerClassName}--no-row-gap`]: noRowGap,\n [`${innerClassName}-col-sm-${colsSm}`]: colsSm > 1 && !hasItemChildren,\n [`${innerClassName}-col-md-${colsMd}`]: colsMd > 1 && !hasItemChildren,\n [`${innerClassName}-col-lg-${colsLg}`]: colsLg > 1 && !hasItemChildren,\n },\n ]);\n\n return (\n <div className={containerClasses} {...props}>\n <div className={classes}>\n {hasItemChildren\n ? Children.map(gridItemChildren, ({ props: { children, ...colProps } }) => (\n <Item {...colProps} noColGap={noGap || noColGap}>\n {children}\n </Item>\n ))\n : children}\n </div>\n </div>\n );\n};\n\nGrid.displayName = \"Grid\";\n\nGrid.Item = Item;\n"],"names":["hasOwn","classNames","classes","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","Item","children","className","colSpanSm","colSpanMd","colSpanLg","noColGap","props","isItem","child","isValidElement","innerClassName","Grid","containerClassName","colsSm","colsMd","colsLg","noGap","noRowGap","gridItemChildren","Children","hasItemChildren","containerClasses","jsx","colProps"],"mappings":"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","x_google_ignoreList":[0]}
|
package/dist/grid.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { default as React, ReactNode } from 'react';
|
|
2
|
+
import { BaseProps } from '@purpurds/common-types';
|
|
2
3
|
import { Item } from './grid.item';
|
|
3
4
|
|
|
4
|
-
export type GridProps =
|
|
5
|
-
["data-testid"]?: string;
|
|
5
|
+
export type GridProps = Omit<BaseProps, "children"> & {
|
|
6
6
|
children: ReactNode;
|
|
7
7
|
containerClassName?: string;
|
|
8
8
|
/** The number of columns on small screens. */
|
package/dist/grid.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAU,IAAI,EAAE,MAAM,aAAa,CAAC;AAK3C,MAAM,MAAM,SAAS,GAAG,
|
|
1
|
+
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGxD,OAAO,EAAU,IAAI,EAAE,MAAM,aAAa,CAAC;AAK3C,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IACpD,QAAQ,EAAE,SAAS,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACvB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACvC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC1D,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;IACpD,IAAI,EAAE,OAAO,IAAI,CAAC;CACnB,CAAC;AAKF,eAAO,MAAM,IAAI;+GAWd,SAAS;;;;;;CAkCX,CAAC"}
|
package/dist/grid.es.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as g } from "react/jsx-runtime";
|
|
2
2
|
import { isValidElement as b, Children as a } from "react";
|
|
3
3
|
function C(p) {
|
|
4
4
|
return p && p.__esModule && Object.prototype.hasOwnProperty.call(p, "default") ? p.default : p;
|
|
5
5
|
}
|
|
6
|
-
var
|
|
6
|
+
var c = { exports: {} };
|
|
7
7
|
/*!
|
|
8
8
|
Copyright (c) 2018 Jed Watson.
|
|
9
9
|
Licensed under the MIT License (MIT), see
|
|
@@ -13,7 +13,7 @@ var z;
|
|
|
13
13
|
function w() {
|
|
14
14
|
return z || (z = 1, function(p) {
|
|
15
15
|
(function() {
|
|
16
|
-
var
|
|
16
|
+
var d = {}.hasOwnProperty;
|
|
17
17
|
function u() {
|
|
18
18
|
for (var r = "", i = 0; i < arguments.length; i++) {
|
|
19
19
|
var _ = arguments[i];
|
|
@@ -32,7 +32,7 @@ function w() {
|
|
|
32
32
|
return r.toString();
|
|
33
33
|
var i = "";
|
|
34
34
|
for (var _ in r)
|
|
35
|
-
|
|
35
|
+
d.call(r, _) && r[_] && (i = e(i, this && this[_] || _));
|
|
36
36
|
return i;
|
|
37
37
|
}
|
|
38
38
|
function e(r, i) {
|
|
@@ -40,7 +40,7 @@ function w() {
|
|
|
40
40
|
}
|
|
41
41
|
p.exports ? (u.default = u, p.exports = u) : window.classNames = u;
|
|
42
42
|
})();
|
|
43
|
-
}(
|
|
43
|
+
}(c)), c.exports;
|
|
44
44
|
}
|
|
45
45
|
var I = w();
|
|
46
46
|
const f = /* @__PURE__ */ C(I), O = {
|
|
@@ -70,29 +70,29 @@ const f = /* @__PURE__ */ C(I), O = {
|
|
|
70
70
|
"purpur-grid-item-colspan-lg-3": "_purpur-grid-item-colspan-lg-3_zx9tz_122",
|
|
71
71
|
"purpur-grid-item-colspan-lg-2": "_purpur-grid-item-colspan-lg-2_zx9tz_127",
|
|
72
72
|
"purpur-grid-item-colspan-lg-1": "_purpur-grid-item-colspan-lg-1_zx9tz_77"
|
|
73
|
-
},
|
|
73
|
+
}, A = f.bind(O), o = "purpur-grid-item", s = ({
|
|
74
74
|
children: p,
|
|
75
|
-
className:
|
|
75
|
+
className: d,
|
|
76
76
|
colSpanSm: u = 4,
|
|
77
77
|
colSpanMd: l = 8,
|
|
78
78
|
colSpanLg: e = 12,
|
|
79
79
|
noColGap: r = !1,
|
|
80
80
|
...i
|
|
81
81
|
}) => {
|
|
82
|
-
const _ =
|
|
82
|
+
const _ = A([
|
|
83
|
+
d,
|
|
83
84
|
o,
|
|
84
|
-
g,
|
|
85
85
|
{
|
|
86
|
-
[`${
|
|
87
|
-
[`${
|
|
88
|
-
[`${
|
|
89
|
-
[`${
|
|
86
|
+
[`${o}--no-col-gap`]: r,
|
|
87
|
+
[`${o}-colspan-sm-${u}`]: u,
|
|
88
|
+
[`${o}-colspan-md-${l}`]: l,
|
|
89
|
+
[`${o}-colspan-lg-${e}`]: e
|
|
90
90
|
}
|
|
91
91
|
]);
|
|
92
|
-
return /* @__PURE__ */
|
|
93
|
-
},
|
|
94
|
-
|
|
95
|
-
const
|
|
92
|
+
return /* @__PURE__ */ g("div", { className: _, ...i, children: p });
|
|
93
|
+
}, E = (p) => !!p && b(p) && p.type === s;
|
|
94
|
+
s.displayName = "Grid.Item";
|
|
95
|
+
const q = {
|
|
96
96
|
"purpur-grid": "_purpur-grid_8kjv6_1",
|
|
97
97
|
"purpur-grid__inner": "_purpur-grid__inner_8kjv6_27",
|
|
98
98
|
"purpur-grid__inner--no-gap": "_purpur-grid__inner--no-gap_8kjv6_32",
|
|
@@ -121,9 +121,9 @@ const E = {
|
|
|
121
121
|
"purpur-grid__inner-col-lg-3": "_purpur-grid__inner-col-lg-3_8kjv6_147",
|
|
122
122
|
"purpur-grid__inner-col-lg-2": "_purpur-grid__inner-col-lg-2_8kjv6_152",
|
|
123
123
|
"purpur-grid__inner--flex": "_purpur-grid__inner--flex_8kjv6_156"
|
|
124
|
-
}, v = f.bind(
|
|
124
|
+
}, v = f.bind(q), B = "purpur-grid", n = "purpur-grid__inner", x = ({
|
|
125
125
|
children: p,
|
|
126
|
-
className:
|
|
126
|
+
className: d,
|
|
127
127
|
containerClassName: u,
|
|
128
128
|
colsSm: l = 1,
|
|
129
129
|
colsMd: e = 1,
|
|
@@ -133,8 +133,8 @@ const E = {
|
|
|
133
133
|
noRowGap: j = !1,
|
|
134
134
|
...k
|
|
135
135
|
}) => {
|
|
136
|
-
const m = a.toArray(p).filter(
|
|
137
|
-
|
|
136
|
+
const m = a.toArray(p).filter(E), t = !!m.length, $ = v([u, B]), h = v([
|
|
137
|
+
d,
|
|
138
138
|
n,
|
|
139
139
|
{
|
|
140
140
|
[`${n}--grid`]: !t,
|
|
@@ -147,10 +147,10 @@ const E = {
|
|
|
147
147
|
[`${n}-col-lg-${r}`]: r > 1 && !t
|
|
148
148
|
}
|
|
149
149
|
]);
|
|
150
|
-
return /* @__PURE__ */
|
|
150
|
+
return /* @__PURE__ */ g("div", { className: $, ...k, children: /* @__PURE__ */ g("div", { className: h, children: t ? a.map(m, ({ props: { children: y, ...N } }) => /* @__PURE__ */ g(s, { ...N, noColGap: i || _, children: y })) : p }) });
|
|
151
151
|
};
|
|
152
152
|
x.displayName = "Grid";
|
|
153
|
-
x.Item =
|
|
153
|
+
x.Item = s;
|
|
154
154
|
export {
|
|
155
155
|
x as Grid
|
|
156
156
|
};
|
package/dist/grid.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/grid.item.tsx","../src/grid.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { isValidElement, type ReactElement, type ReactNode } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./grid.item.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport type ItemProps =
|
|
1
|
+
{"version":3,"file":"grid.es.js","sources":["../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/grid.item.tsx","../src/grid.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React, { isValidElement, type ReactElement, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpurds/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./grid.item.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport type ItemProps = Omit<BaseProps, \"children\"> & {\n children: ReactNode;\n /** The number of columns that the item spans on small screens. */\n colSpanSm?: 1 | 2 | 3 | 4;\n /** The number of columns that the item spans on medium screens. */\n colSpanMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n /** The number of columns that the item spans on large screens. */\n colSpanLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** This will be passed from the parent component. */\n noColGap?: boolean;\n};\n\nconst rootClassName = \"purpur-grid-item\";\n\nexport const Item = ({\n children,\n className,\n colSpanSm = 4,\n colSpanMd = 8,\n colSpanLg = 12,\n noColGap = false,\n ...props\n}: ItemProps) => {\n const classes = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}--no-col-gap`]: noColGap,\n [`${rootClassName}-colspan-sm-${colSpanSm}`]: colSpanSm,\n [`${rootClassName}-colspan-md-${colSpanMd}`]: colSpanMd,\n [`${rootClassName}-colspan-lg-${colSpanLg}`]: colSpanLg,\n },\n ]);\n\n return (\n <div className={classes} {...props}>\n {children}\n </div>\n );\n};\n\nexport const isItem = (child?: ReactNode): child is ReactElement<ItemProps> =>\n !!child && isValidElement<ItemProps>(child) && child.type === Item;\n\nItem.displayName = \"Grid.Item\";\n","import React, { Children, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpurds/common-types\";\nimport c from \"classnames/bind\";\n\nimport { isItem, Item } from \"./grid.item\";\nimport styles from \"./grid.module.scss\";\n\nconst cx = c.bind(styles);\n\nexport type GridProps = Omit<BaseProps, \"children\"> & {\n children: ReactNode;\n containerClassName?: string;\n /** The number of columns on small screens. */\n colsSm?: 1 | 2 | 3 | 4;\n /** The number of columns on medium screens. */\n colsMd?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n /** The number of columns on large screens. */\n colsLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Eliminates gaps between columns and rows. */\n noGap?: boolean;\n /** Eliminates gaps between columns. */\n noColGap?: boolean;\n /** Eliminates gaps between rows. */\n noRowGap?: boolean;\n};\n\nexport type GridCmp<P> = React.FunctionComponent<P> & {\n Item: typeof Item;\n};\n\nconst rootClassName = \"purpur-grid\";\nconst innerClassName = \"purpur-grid__inner\";\n\nexport const Grid = ({\n children,\n className,\n containerClassName,\n colsSm = 1,\n colsMd = 1,\n colsLg = 1,\n noGap = false,\n noColGap = false,\n noRowGap = false,\n ...props\n}: GridProps) => {\n const gridItemChildren = Children.toArray(children).filter(isItem);\n const hasItemChildren = !!gridItemChildren.length;\n\n const containerClasses = cx([containerClassName, rootClassName]);\n\n const classes = cx([\n className,\n innerClassName,\n {\n [`${innerClassName}--grid`]: !hasItemChildren,\n [`${innerClassName}--flex`]: hasItemChildren,\n [`${innerClassName}--no-gap`]: noGap,\n [`${innerClassName}--no-col-gap`]: noColGap,\n [`${innerClassName}--no-row-gap`]: noRowGap,\n [`${innerClassName}-col-sm-${colsSm}`]: colsSm > 1 && !hasItemChildren,\n [`${innerClassName}-col-md-${colsMd}`]: colsMd > 1 && !hasItemChildren,\n [`${innerClassName}-col-lg-${colsLg}`]: colsLg > 1 && !hasItemChildren,\n },\n ]);\n\n return (\n <div className={containerClasses} {...props}>\n <div className={classes}>\n {hasItemChildren\n ? Children.map(gridItemChildren, ({ props: { children, ...colProps } }) => (\n <Item {...colProps} noColGap={noGap || noColGap}>\n {children}\n </Item>\n ))\n : children}\n </div>\n </div>\n );\n};\n\nGrid.displayName = \"Grid\";\n\nGrid.Item = Item;\n"],"names":["hasOwn","classNames","classes","arg","appendClass","parseValue","key","value","newClass","module","cx","c","styles","rootClassName","Item","children","className","colSpanSm","colSpanMd","colSpanLg","noColGap","props","isItem","child","isValidElement","innerClassName","Grid","containerClassName","colsSm","colsMd","colsLg","noGap","noRowGap","gridItemChildren","Children","hasItemChildren","containerClasses","jsx","colProps"],"mappings":";;;;;;;;;;;;;;AAOA,KAAC,WAAY;AAGZ,UAAIA,IAAS,CAAA,EAAG;AAEhB,eAASC,IAAc;AAGtB,iBAFIC,IAAU,IAEL,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AAC1C,cAAIC,IAAM,UAAU,CAAC;AACrB,UAAIA,MACHD,IAAUE,EAAYF,GAASG,EAAW,KAAK,MAAMF,CAAG,CAAC;AAAA,QAE7D;AAEE,eAAOD;AAAA,MACT;AAEC,eAASG,EAAYF,GAAK;AACzB,YAAI,OAAOA,KAAQ,YAAY,OAAOA,KAAQ;AAC7C,iBAAO,QAAQ,KAAKA,CAAG,KAAKA;AAG7B,YAAI,OAAOA,KAAQ;AAClB,iBAAO;AAGR,YAAI,MAAM,QAAQA,CAAG;AACpB,iBAAOF,EAAW,MAAM,MAAME,CAAG;AAGlC,YAAIA,EAAI,aAAa,OAAO,UAAU,YAAY,CAACA,EAAI,SAAS,SAAQ,EAAG,SAAS,eAAe;AAClG,iBAAOA,EAAI,SAAU;AAGtB,YAAID,IAAU;AAEd,iBAASI,KAAOH;AACf,UAAIH,EAAO,KAAKG,GAAKG,CAAG,KAAKH,EAAIG,CAAG,MACnCJ,IAAUE,EAAYF,GAAS,QAAQ,KAAKI,CAAG,KAAKA,CAAG;AAIzD,eAAOJ;AAAA,MACT;AAEC,eAASE,EAAaG,GAAOC,GAAU;AACtC,eAAKA,IAIDD,IACIA,IAAQ,MAAMC,IAGfD,IAAQC,IAPPD;AAAA,MAQV;AAEC,MAAqCE,EAAO,WAC3CR,EAAW,UAAUA,GACrBQ,YAAiBR,KAOjB,OAAO,aAAaA;AAAA,IAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCtEMS,IAAKC,EAAE,KAAKC,CAAM,GAclBC,IAAgB,oBAETC,IAAO,CAAC;AAAA,EACnB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,GAAGC;AACL,MAAiB;AACf,QAAMnB,IAAUQ,EAAG;AAAA,IACjBM;AAAA,IACAH;AAAAA,IACA;AAAA,MACE,CAAC,GAAGA,CAAa,cAAc,GAAGO;AAAA,MAClC,CAAC,GAAGP,CAAa,eAAeI,CAAS,EAAE,GAAGA;AAAA,MAC9C,CAAC,GAAGJ,CAAa,eAAeK,CAAS,EAAE,GAAGA;AAAA,MAC9C,CAAC,GAAGL,CAAa,eAAeM,CAAS,EAAE,GAAGA;AAAA,IAAA;AAAA,EAChD,CACD;AAED,2BACG,OAAI,EAAA,WAAWjB,GAAU,GAAGmB,GAC1B,UAAAN,GACH;AAEJ,GAEaO,IAAS,CAACC,MACrB,CAAC,CAACA,KAASC,EAA0BD,CAAK,KAAKA,EAAM,SAAST;AAEhEA,EAAK,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC7CbJ,IAAKC,EAAE,KAAKC,CAAM,GAuBlBC,IAAgB,eAChBY,IAAiB,sBAEVC,IAAO,CAAC;AAAA,EACnB,UAAAX;AAAA,EACA,WAAAC;AAAA,EACA,oBAAAW;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,UAAAX,IAAW;AAAA,EACX,UAAAY,IAAW;AAAA,EACX,GAAGX;AACL,MAAiB;AACf,QAAMY,IAAmBC,EAAS,QAAQnB,CAAQ,EAAE,OAAOO,CAAM,GAC3Da,IAAkB,CAAC,CAACF,EAAiB,QAErCG,IAAmB1B,EAAG,CAACiB,GAAoBd,CAAa,CAAC,GAEzDX,IAAUQ,EAAG;AAAA,IACjBM;AAAA,IACAS;AAAA,IACA;AAAA,MACE,CAAC,GAAGA,CAAc,QAAQ,GAAG,CAACU;AAAA,MAC9B,CAAC,GAAGV,CAAc,QAAQ,GAAGU;AAAA,MAC7B,CAAC,GAAGV,CAAc,UAAU,GAAGM;AAAA,MAC/B,CAAC,GAAGN,CAAc,cAAc,GAAGL;AAAA,MACnC,CAAC,GAAGK,CAAc,cAAc,GAAGO;AAAA,MACnC,CAAC,GAAGP,CAAc,WAAWG,CAAM,EAAE,GAAGA,IAAS,KAAK,CAACO;AAAA,MACvD,CAAC,GAAGV,CAAc,WAAWI,CAAM,EAAE,GAAGA,IAAS,KAAK,CAACM;AAAA,MACvD,CAAC,GAAGV,CAAc,WAAWK,CAAM,EAAE,GAAGA,IAAS,KAAK,CAACK;AAAA,IAAA;AAAA,EACzD,CACD;AAED,2BACG,OAAI,EAAA,WAAWC,GAAmB,GAAGf,GACpC,UAAC,gBAAAgB,EAAA,OAAA,EAAI,WAAWnC,GACb,cACGgC,EAAS,IAAID,GAAkB,CAAC,EAAE,OAAO,EAAE,UAAAlB,GAAU,GAAGuB,EAAS,EAAA,MAC/D,gBAAAD,EAACvB,KAAM,GAAGwB,GAAU,UAAUP,KAASX,GACpC,UAAAL,EACH,CAAA,CACD,IACDA,EACN,CAAA,GACF;AAEJ;AAEAW,EAAK,cAAc;AAEnBA,EAAK,OAAOZ;","x_google_ignoreList":[0]}
|
package/dist/grid.item.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { default as React, ReactElement, ReactNode } from 'react';
|
|
2
|
+
import { BaseProps } from '@purpurds/common-types';
|
|
2
3
|
|
|
3
|
-
export type ItemProps =
|
|
4
|
-
["data-testid"]?: string;
|
|
4
|
+
export type ItemProps = Omit<BaseProps, "children"> & {
|
|
5
5
|
children: ReactNode;
|
|
6
6
|
/** The number of columns that the item spans on small screens. */
|
|
7
7
|
colSpanSm?: 1 | 2 | 3 | 4;
|
package/dist/grid.item.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.item.d.ts","sourceRoot":"","sources":["../src/grid.item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"grid.item.d.ts","sourceRoot":"","sources":["../src/grid.item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAOxD,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IACpD,QAAQ,EAAE,SAAS,CAAC;IACpB,kEAAkE;IAClE,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1B,mEAAmE;IACnE,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1C,kEAAkE;IAClE,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC7D,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAIF,eAAO,MAAM,IAAI;mFAQd,SAAS;;CAiBX,CAAC;AAEF,eAAO,MAAM,MAAM,WAAY,SAAS,KAAG,KAAK,IAAI,YAAY,CAAC,SAAS,CACN,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/grid",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.8.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/grid.cjs.js",
|
|
6
6
|
"types": "./dist/grid.d.ts",
|
|
@@ -16,13 +16,11 @@
|
|
|
16
16
|
"source": "src/grid.tsx",
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"classnames": "~2.5.0",
|
|
19
|
-
"@purpurds/
|
|
19
|
+
"@purpurds/common-types": "7.8.0",
|
|
20
|
+
"@purpurds/tokens": "7.8.0"
|
|
20
21
|
},
|
|
21
22
|
"devDependencies": {
|
|
22
|
-
"
|
|
23
|
-
"@storybook/blocks": "^8.6.4",
|
|
24
|
-
"@storybook/react": "^8.6.4",
|
|
25
|
-
"storybook": "^8.6.4",
|
|
23
|
+
"@storybook/react-vite": "^9.0.18",
|
|
26
24
|
"@testing-library/dom": "~10.4.0",
|
|
27
25
|
"@testing-library/jest-dom": "~6.4.0",
|
|
28
26
|
"@testing-library/react": "~16.2.0",
|
|
@@ -30,17 +28,19 @@
|
|
|
30
28
|
"@types/react-dom": "^19.0.4",
|
|
31
29
|
"@types/react": "^19.0.10",
|
|
32
30
|
"builtin-modules": "~3.3.0",
|
|
31
|
+
"eslint": "9.24.0",
|
|
33
32
|
"jsdom": "~22.1.0",
|
|
34
33
|
"lint-staged": "15.5.0",
|
|
35
34
|
"prettier": "~2.8.8",
|
|
36
35
|
"react-dom": "^19.0.0",
|
|
37
36
|
"react": "^19.0.0",
|
|
37
|
+
"storybook": "^9.0.18",
|
|
38
38
|
"typescript": "^5.6.3",
|
|
39
39
|
"vite": "^6.2.1",
|
|
40
40
|
"vitest": "^3.1.2",
|
|
41
|
-
"@purpurds/paragraph": "7.6.1",
|
|
42
41
|
"@purpurds/component-rig": "1.0.0",
|
|
43
|
-
"@purpurds/link": "7.
|
|
42
|
+
"@purpurds/link": "7.8.0",
|
|
43
|
+
"@purpurds/paragraph": "7.8.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"@types/react": "^18 || ^19",
|
package/src/grid.item.tsx
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React, { isValidElement, type ReactElement, type ReactNode } from "react";
|
|
2
|
+
import type { BaseProps } from "@purpurds/common-types";
|
|
2
3
|
import c from "classnames/bind";
|
|
3
4
|
|
|
4
5
|
import styles from "./grid.item.module.scss";
|
|
5
6
|
|
|
6
7
|
const cx = c.bind(styles);
|
|
7
8
|
|
|
8
|
-
export type ItemProps =
|
|
9
|
-
["data-testid"]?: string;
|
|
9
|
+
export type ItemProps = Omit<BaseProps, "children"> & {
|
|
10
10
|
children: ReactNode;
|
|
11
11
|
/** The number of columns that the item spans on small screens. */
|
|
12
12
|
colSpanSm?: 1 | 2 | 3 | 4;
|
|
@@ -48,8 +48,6 @@ export const Item = ({
|
|
|
48
48
|
};
|
|
49
49
|
|
|
50
50
|
export const isItem = (child?: ReactNode): child is ReactElement<ItemProps> =>
|
|
51
|
-
!!child &&
|
|
52
|
-
isValidElement<ItemProps>(child) &&
|
|
53
|
-
(!!child.props.colSpanSm || !!child.props.colSpanMd || !!child.props.colSpanLg);
|
|
51
|
+
!!child && isValidElement<ItemProps>(child) && child.type === Item;
|
|
54
52
|
|
|
55
53
|
Item.displayName = "Grid.Item";
|
package/src/grid.stories.tsx
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import React from "react";
|
|
1
|
+
import React, { type ReactNode } from "react";
|
|
3
2
|
import { Link } from "@purpurds/link";
|
|
4
3
|
import { Paragraph } from "@purpurds/paragraph";
|
|
5
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
4
|
+
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
6
5
|
|
|
7
6
|
import "@purpurds/paragraph/styles";
|
|
8
7
|
import { Grid } from "./grid";
|
|
@@ -55,6 +54,7 @@ const Column = ({ number, children }: { number: number; children?: ReactNode })
|
|
|
55
54
|
</div>
|
|
56
55
|
);
|
|
57
56
|
};
|
|
57
|
+
|
|
58
58
|
Column.displayName = "Column";
|
|
59
59
|
|
|
60
60
|
export const Showcase: Story = {
|
|
@@ -96,7 +96,7 @@ export const AdvancedWithNestedGrids: Story = {
|
|
|
96
96
|
<div style={{ marginTop: "3rem" }}>
|
|
97
97
|
<Link
|
|
98
98
|
variant="standalone"
|
|
99
|
-
href="/?path=/docs/
|
|
99
|
+
href="/?path=/docs/layout-and-structure-grid--docs#advanced-with-nested-grids"
|
|
100
100
|
>
|
|
101
101
|
See the example code in Docs
|
|
102
102
|
</Link>
|
|
@@ -131,7 +131,7 @@ export const AdvancedWithGridItems: Story = {
|
|
|
131
131
|
<div style={{ marginTop: "3rem" }}>
|
|
132
132
|
<Link
|
|
133
133
|
variant="standalone"
|
|
134
|
-
href="/?path=/docs/
|
|
134
|
+
href="/?path=/docs/layout-and-structure-grid--docs#advanced-with-grid-items"
|
|
135
135
|
>
|
|
136
136
|
See the example code in Docs
|
|
137
137
|
</Link>
|
package/src/grid.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { Children, type ReactNode } from "react";
|
|
2
|
+
import type { BaseProps } from "@purpurds/common-types";
|
|
2
3
|
import c from "classnames/bind";
|
|
3
4
|
|
|
4
5
|
import { isItem, Item } from "./grid.item";
|
|
@@ -6,8 +7,7 @@ import styles from "./grid.module.scss";
|
|
|
6
7
|
|
|
7
8
|
const cx = c.bind(styles);
|
|
8
9
|
|
|
9
|
-
export type GridProps =
|
|
10
|
-
["data-testid"]?: string;
|
|
10
|
+
export type GridProps = Omit<BaseProps, "children"> & {
|
|
11
11
|
children: ReactNode;
|
|
12
12
|
containerClassName?: string;
|
|
13
13
|
/** The number of columns on small screens. */
|
|
@@ -44,7 +44,7 @@ export const Grid = ({
|
|
|
44
44
|
...props
|
|
45
45
|
}: GridProps) => {
|
|
46
46
|
const gridItemChildren = Children.toArray(children).filter(isItem);
|
|
47
|
-
const hasItemChildren = gridItemChildren.length;
|
|
47
|
+
const hasItemChildren = !!gridItemChildren.length;
|
|
48
48
|
|
|
49
49
|
const containerClasses = cx([containerClassName, rootClassName]);
|
|
50
50
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Paragraph } from "@purpurds/paragraph";
|
|
3
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
3
|
+
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
4
4
|
|
|
5
5
|
import "@purpurds/paragraph/styles";
|
|
6
6
|
import { Grid } from "./grid";
|