@xyo-network/react-property 2.46.8 → 2.47.0-rc.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.
@@ -5,11 +5,12 @@ const tslib_1 = require("tslib");
5
5
  const jsx_runtime_1 = require("react/jsx-runtime");
6
6
  const material_1 = require("@mui/material");
7
7
  const react_flexbox_1 = require("@xylabs/react-flexbox");
8
+ const react_1 = require("react");
8
9
  const ActionsMenu_1 = require("./ActionsMenu");
9
10
  const IdenticonCorner_1 = require("./IdenticonCorner");
10
11
  const Title_1 = require("./Title");
11
12
  const Value_1 = require("./Value");
12
- const PropertyBox = (_a) => {
13
+ const PropertyBox = (0, react_1.forwardRef)((_a, ref) => {
13
14
  var { titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false } = _a, props = tslib_1.__rest(_a, ["titleProps", "title", "value", "children", "size", "tip", "actions", "required", "badge"]);
14
15
  const sizeValueHeight = {
15
16
  large: 48,
@@ -21,14 +22,16 @@ const PropertyBox = (_a) => {
21
22
  medium: 'body1',
22
23
  small: 'body2',
23
24
  };
24
- return ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexRow, Object.assign({ flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden" }, props, { children: [title !== undefined ? ((0, jsx_runtime_1.jsx)(Title_1.PropertyTitle, Object.assign({ tip: tip, title: required ? `${title}*` : title, size: size, more: (0, jsx_runtime_1.jsx)(ActionsMenu_1.PropertyActionsMenu, { actions: actions }) }, titleProps))) : null, (0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexRow, Object.assign({ pl: 1, columnGap: 1, justifyContent: value === undefined ? 'center' : 'space-between', overflow: "hidden", height: sizeValueHeight[size] }, { children: [children ? (children) : value !== undefined ? ((0, jsx_runtime_1.jsx)(Value_1.PropertyValue, { value: value, typographyVariant: sizeVariants[size] })) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 16 })), value !== undefined ? badge ? (0, jsx_runtime_1.jsx)(IdenticonCorner_1.IdenticonCorner, { value: value }) : null : null] }))] })));
25
- };
26
- const PropertyPaper = (_a) => {
25
+ return ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexRow, Object.assign({ ref: ref, flexDirection: "column", minWidth: 0, alignItems: "stretch", overflow: "hidden" }, props, { children: [title !== undefined ? ((0, jsx_runtime_1.jsx)(Title_1.PropertyTitle, Object.assign({ tip: tip, title: required ? `${title}*` : title, size: size, more: (0, jsx_runtime_1.jsx)(ActionsMenu_1.PropertyActionsMenu, { actions: actions }) }, titleProps))) : null, (0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexRow, Object.assign({ pl: 1, columnGap: 1, justifyContent: value === undefined ? 'center' : 'space-between', overflow: "hidden", height: sizeValueHeight[size] }, { children: [children ? (children) : value !== undefined ? ((0, jsx_runtime_1.jsx)(Value_1.PropertyValue, { value: value, typographyVariant: sizeVariants[size] })) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 16 })), value !== undefined ? badge ? (0, jsx_runtime_1.jsx)(IdenticonCorner_1.IdenticonCorner, { value: value }) : null : null] }))] })));
26
+ });
27
+ PropertyBox.displayName = 'PropertyBox';
28
+ const PropertyPaper = (0, react_1.forwardRef)((_a, ref) => {
27
29
  var { style, variant, elevation = 2, square } = _a, props = tslib_1.__rest(_a, ["style", "variant", "elevation", "square"]);
28
- return ((0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: Object.assign({ minWidth: 0, overflow: 'hidden' }, style), variant: variant, elevation: elevation, square: square }, { children: (0, jsx_runtime_1.jsx)(PropertyBox, Object.assign({}, props, { paper: false })) })));
29
- };
30
- const Property = (props) => {
31
- return props.paper ? (0, jsx_runtime_1.jsx)(PropertyPaper, Object.assign({}, props)) : (0, jsx_runtime_1.jsx)(PropertyBox, Object.assign({}, props));
32
- };
33
- exports.Property = Property;
30
+ return ((0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ ref: ref, style: Object.assign({ minWidth: 0, overflow: 'hidden' }, style), variant: variant, elevation: elevation, square: square }, { children: (0, jsx_runtime_1.jsx)(PropertyBox, Object.assign({}, props, { paper: false })) })));
31
+ });
32
+ PropertyPaper.displayName = 'PropertyPaper';
33
+ exports.Property = (0, react_1.forwardRef)((props, ref) => {
34
+ return props.paper ? (0, jsx_runtime_1.jsx)(PropertyPaper, Object.assign({ ref: ref }, props)) : (0, jsx_runtime_1.jsx)(PropertyBox, Object.assign({ ref: ref }, props));
35
+ });
36
+ exports.Property.displayName = 'Property';
34
37
  //# sourceMappingURL=Property.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Property.js","sourceRoot":"","sources":["../../../src/components/Property.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA0E;AAC1E,yDAA+C;AAG/C,+CAAmD;AACnD,uDAAmD;AAEnD,mCAAuC;AACvC,mCAAuC;AAEvC,MAAM,WAAW,GAA+B,CAAC,EAWhD,EAAE,EAAE;QAX4C,EAC/C,UAAU,EACV,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,GAAG,EACH,OAAO,EACP,QAAQ,EACR,KAAK,GAAG,KAAK,OAEd,EADI,KAAK,sBAVuC,2FAWhD,CADS;IAER,MAAM,eAAe,GAA6B;QAChD,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;KACV,CAAA;IAED,MAAM,YAAY,GAAwC;QACxD,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,OAAO;QACf,KAAK,EAAE,OAAO;KACf,CAAA;IAED,OAAO,CACL,wBAAC,uBAAO,kBAAC,aAAa,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,UAAU,EAAC,SAAS,EAAC,QAAQ,EAAC,QAAQ,IAAK,KAAK,eAC1F,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CACrB,uBAAC,qBAAa,kBACZ,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,EACrC,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,uBAAC,iCAAmB,IAAC,OAAO,EAAE,OAAO,GAAI,IAC3C,UAAU,EACd,CACH,CAAC,CAAC,CAAC,IAAI,EACR,wBAAC,uBAAO,kBACN,EAAE,EAAE,CAAC,EACL,SAAS,EAAE,CAAC,EACZ,cAAc,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,EAChE,QAAQ,EAAC,QAAQ,EACjB,MAAM,EAAE,eAAe,CAAC,IAAI,CAAC,iBAE5B,QAAQ,CAAC,CAAC,CAAC,CACV,QAAQ,CACT,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CACxB,uBAAC,qBAAa,IAAC,KAAK,EAAE,KAAK,EAAE,iBAAiB,EAAE,YAAY,CAAC,IAAI,CAAC,GAAI,CACvE,CAAC,CAAC,CAAC,CACF,uBAAC,2BAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,CAC/B,EACA,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,uBAAC,iCAAe,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,KACtE,KACF,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAiC,CAAC,EAAmD,EAAE,EAAE;QAAvD,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,GAAG,CAAC,EAAE,MAAM,OAAY,EAAP,KAAK,sBAAjD,2CAAmD,CAAF;IACpG,OAAO,CACL,uBAAC,gBAAK,kBAAC,KAAK,kBAAI,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,IAAK,KAAK,GAAI,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,gBACjH,uBAAC,WAAW,oBAAK,KAAK,IAAE,KAAK,EAAE,KAAK,IAAI,IAClC,CACT,CAAA;AACH,CAAC,CAAA;AAEM,MAAM,QAAQ,GAA4B,CAAC,KAAK,EAAE,EAAE;IACzD,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,uBAAC,aAAa,oBAAK,KAAK,EAAI,CAAC,CAAC,CAAC,uBAAC,WAAW,oBAAK,KAAK,EAAI,CAAA;AAChF,CAAC,CAAA;AAFY,QAAA,QAAQ,YAEpB"}
1
+ {"version":3,"file":"Property.js","sourceRoot":"","sources":["../../../src/components/Property.tsx"],"names":[],"mappings":"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"}
@@ -4,9 +4,10 @@ exports.PropertyValue = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const jsx_runtime_1 = require("react/jsx-runtime");
6
6
  const react_shared_1 = require("@xyo-network/react-shared");
7
- const PropertyValue = (_a) => {
7
+ const react_1 = require("react");
8
+ exports.PropertyValue = (0, react_1.forwardRef)((_a, ref) => {
8
9
  var { typographyVariant = 'body1', value } = _a, props = tslib_1.__rest(_a, ["typographyVariant", "value"]);
9
- return value !== undefined ? ((0, jsx_runtime_1.jsx)(react_shared_1.EllipsizeBox, Object.assign({ typographyProps: { component: undefined, title: value === null || value === void 0 ? void 0 : value.toString(), variant: typographyVariant }, width: "100%" }, props, { children: value }))) : null;
10
- };
11
- exports.PropertyValue = PropertyValue;
10
+ return value !== undefined ? ((0, jsx_runtime_1.jsx)(react_shared_1.EllipsizeBox, Object.assign({ typographyProps: { component: undefined, title: value === null || value === void 0 ? void 0 : value.toString(), variant: typographyVariant }, width: "100%", ref: ref }, props, { children: value }))) : null;
11
+ });
12
+ exports.PropertyValue.displayName = 'PropertyValue';
12
13
  //# sourceMappingURL=Value.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Value.js","sourceRoot":"","sources":["../../../src/components/Value.tsx"],"names":[],"mappings":";;;;;AACA,4DAA2E;AAOpE,MAAM,aAAa,GAAiC,CAAC,EAAgD,EAAE,EAAE;QAApD,EAAE,iBAAiB,GAAG,OAAO,EAAE,KAAK,OAAY,EAAP,KAAK,sBAA9C,8BAAgD,CAAF;IACxG,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC3B,uBAAC,2BAAY,kBAAC,eAAe,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,iBAAiB,EAAE,EAAE,KAAK,EAAC,MAAM,IAAK,KAAK,cAClI,KAAK,IACO,CAChB,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AANY,QAAA,aAAa,iBAMzB"}
1
+ {"version":3,"file":"Value.js","sourceRoot":"","sources":["../../../src/components/Value.tsx"],"names":[],"mappings":";;;;;AACA,4DAA2E;AAC3E,iCAAkC;AAOrB,QAAA,aAAa,GAAG,IAAA,kBAAU,EAAqC,CAAC,EAAgD,EAAE,GAAG,EAAE,EAAE;QAAzD,EAAE,iBAAiB,GAAG,OAAO,EAAE,KAAK,OAAY,EAAP,KAAK,sBAA9C,8BAAgD,CAAF;IACzH,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC3B,uBAAC,2BAAY,kBAAC,eAAe,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,iBAAiB,EAAE,EAAE,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,GAAG,IAAM,KAAK,cAC5I,KAAK,IACO,CAChB,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAC,CAAA;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}