@webority/mobile-ui 0.11.0 → 0.11.1

package/lib/commonjs/components/Descriptions/Descriptions.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Descriptions=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_Text=require("../Text/Text.js"),_jsxRuntime=require("react/jsx-runtime");const EMPTY_VALUE="-",rowKey=(e,t)=>e.key??("string"==typeof e.label?`${e.label}-${t}`:`row-${t}`),isEmptyValue=e=>null==e||""===e||Array.isArray(e)&&!e.length,Descriptions=({items:e,columns:t=1,size:r="md",bordered:i=!1,title:l,variant:a="list",style:o,testID:s})=>{const n=(0,_index.useTheme)(),c=(0,_react.useMemo)(()=>buildStyles(n),[n]),u="sm"===r?n.typography.fontSize.xs:n.typography.fontSize.sm,d="sm"===r?n.typography.fontSize.sm:n.typography.fontSize.base,x="sm"===r?n.spacing.xs:n.spacing.sm,m="summary"===a;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[m?null:{gap:x},o],testID:s,children:[l?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[c.title,{fontSize:n.typography.fontSize.lg,color:n.colors.text.primary}],children:l}):null,e.map((e,r)=>{const l=isEmptyValue(e.value),a=2===t&&!e.full,o=l?n.colors.text.tertiary:(0,_Text.resolveColor)(n,e.tone??"primary"),s=(0,_index.fontFor)(n,e.strong?"semibold":"normal");return m?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[c.summaryRow,{paddingVertical:x,borderBottomColor:n.colors.border.secondary}],children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[c.summaryLabel,{fontSize:d,color:n.colors.text.secondary}],children:e.label}),"string"==typeof e.value||l?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[c.summaryValue,{fontSize:d,color:o},s],children:l?"-":e.value}):(0,_jsxRuntime.jsx)(_reactNative.View,{children:e.value})]},rowKey(e,r)):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[a?c.rowSide:c.rowStack,{paddingVertical:x},i&&r>0?c.bordered:null,i&&r>0?{borderTopColor:n.colors.border.secondary}:null],children:["string"==typeof e.label?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[c.label,{fontSize:u,color:n.colors.text.tertiary},a?c.labelSide:null],children:e.label}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:a?c.labelSide:null,children:e.label}),"string"==typeof e.value||l?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[c.value,{fontSize:d,color:o},e.strong?s:null,a?c.valueSide:null],children:l?"-":e.value}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:a?c.valueSide:null,children:e.value})]},rowKey(e,r))})]})};exports.Descriptions=Descriptions;const buildStyles=e=>_reactNative.StyleSheet.create({title:{...(0,_index.fontFor)(e,"semibold")},rowStack:{gap:2},rowSide:{flexDirection:"row",alignItems:"flex-start",gap:e.spacing.md},bordered:{borderTopWidth:_reactNative.StyleSheet.hairlineWidth},label:{...(0,_index.fontFor)(e,"semibold")},labelSide:{flex:4},value:{...(0,_index.fontFor)(e,"normal")},valueSide:{flex:6},summaryRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.md,borderBottomWidth:_reactNative.StyleSheet.hairlineWidth},summaryLabel:{flex:1,...(0,_index.fontFor)(e,"normal")},summaryValue:{textAlign:"right"}});var _default=exports.default=Descriptions;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Descriptions=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_Notation=require("../Notation/Notation.js"),_Text=require("../Text/Text.js"),_jsxRuntime=require("react/jsx-runtime");const EMPTY_VALUE="-",rowKey=(e,t)=>e.key??("string"==typeof e.label?`${e.label}-${t}`:`row-${t}`),isEmptyValue=e=>null==e||""===e||Array.isArray(e)&&!e.length,isInlineText=e=>"string"==typeof e||"number"==typeof e||(0,_react.isValidElement)(e)&&e.type===_Notation.Notation||Array.isArray(e)&&e.length>0&&e.every(isInlineText),Descriptions=({items:e,columns:t=1,size:r="md",bordered:i=!1,title:o,variant:l="list",style:a,testID:s})=>{const n=(0,_index.useTheme)(),c=(0,_react.useMemo)(()=>buildStyles(n),[n]),x="sm"===r?n.typography.fontSize.xs:n.typography.fontSize.sm,u="sm"===r?n.typography.fontSize.sm:n.typography.fontSize.base,d="sm"===r?n.spacing.xs:n.spacing.sm,m="summary"===l,y=(0,_react.useMemo)(()=>({fontSize:x,color:n.colors.text.tertiary}),[x,n.colors.text.tertiary]),_=(0,_react.useMemo)(()=>({fontSize:u,color:n.colors.text.secondary}),[u,n.colors.text.secondary]);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[m?null:{gap:d},a],testID:s,children:[o?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[c.title,{fontSize:n.typography.fontSize.lg,color:n.colors.text.primary}],children:o}):null,e.map((e,r)=>{const o=isEmptyValue(e.value),l=2===t&&!e.full,a=o?n.colors.text.tertiary:(0,_Text.resolveColor)(n,e.tone??"primary"),s=(0,_index.fontFor)(n,e.strong?"semibold":"normal"),p=o||isInlineText(e.value),v=o?"-":"string"==typeof e.value?e.value:(0,_jsxRuntime.jsx)(_Notation.NotationInkContext.Provider,{value:{fontSize:u,color:a},children:e.value});return m?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[c.summaryRow,{paddingVertical:d,borderBottomColor:n.colors.border.secondary}],children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[c.summaryLabel,{fontSize:u,color:n.colors.text.secondary}],children:(0,_jsxRuntime.jsx)(_Notation.NotationInkContext.Provider,{value:_,children:e.label})}),p?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[c.summaryValue,{fontSize:u,color:a},s],children:v}):(0,_jsxRuntime.jsx)(_reactNative.View,{children:e.value})]},rowKey(e,r)):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[l?c.rowSide:c.rowStack,{paddingVertical:d},i&&r>0?c.bordered:null,i&&r>0?{borderTopColor:n.colors.border.secondary}:null],children:["string"==typeof e.label?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[c.label,{fontSize:x,color:n.colors.text.tertiary},l?c.labelSide:null],children:e.label}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:l?c.labelSide:null,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[c.label,{fontSize:x,color:n.colors.text.tertiary}],children:(0,_jsxRuntime.jsx)(_Notation.NotationInkContext.Provider,{value:y,children:e.label})})}),p?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[c.value,{fontSize:u,color:a},e.strong?s:null,l?c.valueSide:null],children:v}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:l?c.valueSide:null,children:e.value})]},rowKey(e,r))})]})};exports.Descriptions=Descriptions;const buildStyles=e=>_reactNative.StyleSheet.create({title:{...(0,_index.fontFor)(e,"semibold")},rowStack:{gap:2},rowSide:{flexDirection:"row",alignItems:"flex-start",gap:e.spacing.md},bordered:{borderTopWidth:_reactNative.StyleSheet.hairlineWidth},label:{...(0,_index.fontFor)(e,"semibold")},labelSide:{flex:4},value:{...(0,_index.fontFor)(e,"normal")},valueSide:{flex:6},summaryRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.md,borderBottomWidth:_reactNative.StyleSheet.hairlineWidth},summaryLabel:{flex:1,...(0,_index.fontFor)(e,"normal")},summaryValue:{textAlign:"right"}});var _default=exports.default=Descriptions;

package/lib/module/components/Descriptions/Descriptions.js

@@ -1 +1 @@
-"use strict";import{useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{resolveColor}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const EMPTY_VALUE="-",rowKey=(e,t)=>e.key??("string"==typeof e.label?`${e.label}-${t}`:`row-${t}`),isEmptyValue=e=>null==e||""===e||Array.isArray(e)&&!e.length;export const Descriptions=({items:e,columns:t=1,size:l="md",bordered:r=!1,title:o,variant:s="list",style:i,testID:a})=>{const n=useTheme(),m=useMemo(()=>buildStyles(n),[n]),d="sm"===l?n.typography.fontSize.xs:n.typography.fontSize.sm,y="sm"===l?n.typography.fontSize.sm:n.typography.fontSize.base,c="sm"===l?n.spacing.xs:n.spacing.sm,u="summary"===s;return _jsxs(View,{style:[u?null:{gap:c},i],testID:a,children:[o?_jsx(Text,{style:[m.title,{fontSize:n.typography.fontSize.lg,color:n.colors.text.primary}],children:o}):null,e.map((e,l)=>{const o=isEmptyValue(e.value),s=2===t&&!e.full,i=o?n.colors.text.tertiary:resolveColor(n,e.tone??"primary"),a=fontFor(n,e.strong?"semibold":"normal");return _jsxs(View,u?{style:[m.summaryRow,{paddingVertical:c,borderBottomColor:n.colors.border.secondary}],children:[_jsx(Text,{style:[m.summaryLabel,{fontSize:y,color:n.colors.text.secondary}],children:e.label}),"string"==typeof e.value||o?_jsx(Text,{style:[m.summaryValue,{fontSize:y,color:i},a],children:o?"-":e.value}):_jsx(View,{children:e.value})]}:{style:[s?m.rowSide:m.rowStack,{paddingVertical:c},r&&l>0?m.bordered:null,r&&l>0?{borderTopColor:n.colors.border.secondary}:null],children:["string"==typeof e.label?_jsx(Text,{style:[m.label,{fontSize:d,color:n.colors.text.tertiary},s?m.labelSide:null],children:e.label}):_jsx(View,{style:s?m.labelSide:null,children:e.label}),"string"==typeof e.value||o?_jsx(Text,{style:[m.value,{fontSize:y,color:i},e.strong?a:null,s?m.valueSide:null],children:o?"-":e.value}):_jsx(View,{style:s?m.valueSide:null,children:e.value})]},rowKey(e,l))})]})};const buildStyles=e=>StyleSheet.create({title:{...fontFor(e,"semibold")},rowStack:{gap:2},rowSide:{flexDirection:"row",alignItems:"flex-start",gap:e.spacing.md},bordered:{borderTopWidth:StyleSheet.hairlineWidth},label:{...fontFor(e,"semibold")},labelSide:{flex:4},value:{...fontFor(e,"normal")},valueSide:{flex:6},summaryRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.md,borderBottomWidth:StyleSheet.hairlineWidth},summaryLabel:{flex:1,...fontFor(e,"normal")},summaryValue:{textAlign:"right"}});export default Descriptions;
+"use strict";import{isValidElement,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{Notation,NotationInkContext}from"../Notation/Notation.js";import{resolveColor}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const EMPTY_VALUE="-",rowKey=(e,t)=>e.key??("string"==typeof e.label?`${e.label}-${t}`:`row-${t}`),isEmptyValue=e=>null==e||""===e||Array.isArray(e)&&!e.length,isInlineText=e=>"string"==typeof e||"number"==typeof e||isValidElement(e)&&e.type===Notation||Array.isArray(e)&&e.length>0&&e.every(isInlineText);export const Descriptions=({items:e,columns:t=1,size:o="md",bordered:r=!1,title:l,variant:i="list",style:s,testID:n})=>{const a=useTheme(),c=useMemo(()=>buildStyles(a),[a]),d="sm"===o?a.typography.fontSize.xs:a.typography.fontSize.sm,m="sm"===o?a.typography.fontSize.sm:a.typography.fontSize.base,y="sm"===o?a.spacing.xs:a.spacing.sm,x="summary"===i,u=useMemo(()=>({fontSize:d,color:a.colors.text.tertiary}),[d,a.colors.text.tertiary]),p=useMemo(()=>({fontSize:m,color:a.colors.text.secondary}),[m,a.colors.text.secondary]);return _jsxs(View,{style:[x?null:{gap:y},s],testID:n,children:[l?_jsx(Text,{style:[c.title,{fontSize:a.typography.fontSize.lg,color:a.colors.text.primary}],children:l}):null,e.map((e,o)=>{const l=isEmptyValue(e.value),i=2===t&&!e.full,s=l?a.colors.text.tertiary:resolveColor(a,e.tone??"primary"),n=fontFor(a,e.strong?"semibold":"normal"),f=l||isInlineText(e.value),h=l?"-":"string"==typeof e.value?e.value:_jsx(NotationInkContext.Provider,{value:{fontSize:m,color:s},children:e.value});return _jsxs(View,x?{style:[c.summaryRow,{paddingVertical:y,borderBottomColor:a.colors.border.secondary}],children:[_jsx(Text,{style:[c.summaryLabel,{fontSize:m,color:a.colors.text.secondary}],children:_jsx(NotationInkContext.Provider,{value:p,children:e.label})}),f?_jsx(Text,{style:[c.summaryValue,{fontSize:m,color:s},n],children:h}):_jsx(View,{children:e.value})]}:{style:[i?c.rowSide:c.rowStack,{paddingVertical:y},r&&o>0?c.bordered:null,r&&o>0?{borderTopColor:a.colors.border.secondary}:null],children:["string"==typeof e.label?_jsx(Text,{style:[c.label,{fontSize:d,color:a.colors.text.tertiary},i?c.labelSide:null],children:e.label}):_jsx(View,{style:i?c.labelSide:null,children:_jsx(Text,{style:[c.label,{fontSize:d,color:a.colors.text.tertiary}],children:_jsx(NotationInkContext.Provider,{value:u,children:e.label})})}),f?_jsx(Text,{style:[c.value,{fontSize:m,color:s},e.strong?n:null,i?c.valueSide:null],children:h}):_jsx(View,{style:i?c.valueSide:null,children:e.value})]},rowKey(e,o))})]})};const buildStyles=e=>StyleSheet.create({title:{...fontFor(e,"semibold")},rowStack:{gap:2},rowSide:{flexDirection:"row",alignItems:"flex-start",gap:e.spacing.md},bordered:{borderTopWidth:StyleSheet.hairlineWidth},label:{...fontFor(e,"semibold")},labelSide:{flex:4},value:{...fontFor(e,"normal")},valueSide:{flex:6},summaryRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.md,borderBottomWidth:StyleSheet.hairlineWidth},summaryLabel:{flex:1,...fontFor(e,"normal")},summaryValue:{textAlign:"right"}});export default Descriptions;

package/lib/typescript/commonjs/components/Descriptions/Descriptions.d.ts

@@ -4,9 +4,16 @@ import type { TextColor } from '../Text/Text';
 export type DescriptionsSize = 'sm' | 'md';
 export type DescriptionsVariant = 'list' | 'summary';
 export interface DescriptionItem {
-    /** A string renders as text; a node (a symbol with a subscript, say) renders as-is. */
+    /**
+     * A string renders as text. A node (a symbol with a subscript, say) sits in the label's Text, so
+     * its base and subscript take the label's size and colour; a string inside a node list is fine.
+     */
     label: React.ReactNode;
-    /** A string renders as text; a node renders as-is. Empty renders as a plain hyphen, "-". */
+    /**
+     * A string, a number, a `sym()` / `Notation` or a list of those renders as text in the value's
+     * size, weight and colour (`strong`, `tone`), the subscript included. Any other node (a badge, a
+     * Text of your own) renders as-is in a View and owns its type. Empty renders as a plain hyphen, "-".
+     */
     value?: React.ReactNode;
     /** Make this row span both columns. Ignored when `columns` is 1. */
     full?: boolean;

package/lib/typescript/module/components/Descriptions/Descriptions.d.ts

@@ -4,9 +4,16 @@ import type { TextColor } from '../Text/Text.js';
 export type DescriptionsSize = 'sm' | 'md';
 export type DescriptionsVariant = 'list' | 'summary';
 export interface DescriptionItem {
-    /** A string renders as text; a node (a symbol with a subscript, say) renders as-is. */
+    /**
+     * A string renders as text. A node (a symbol with a subscript, say) sits in the label's Text, so
+     * its base and subscript take the label's size and colour; a string inside a node list is fine.
+     */
     label: React.ReactNode;
-    /** A string renders as text; a node renders as-is. Empty renders as a plain hyphen, "-". */
+    /**
+     * A string, a number, a `sym()` / `Notation` or a list of those renders as text in the value's
+     * size, weight and colour (`strong`, `tone`), the subscript included. Any other node (a badge, a
+     * Text of your own) renders as-is in a View and owns its type. Empty renders as a plain hyphen, "-".
+     */
     value?: React.ReactNode;
     /** Make this row span both columns. Ignored when `columns` is 1. */
     full?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -107,7 +107,7 @@
     ]
   },
   "devDependencies": {
-    "@webority/mobile-core": "0.11.0"
+    "@webority/mobile-core": "0.11.1"
   },
   "scripts": {
     "build": "bob build && node ../../scripts/minify-lib.mjs",