@react-ui-org/react-ui 0.59.3 → 0.61.0

package/src/components/Toolbar/ToolbarGroup.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import { getAlignClassName } from './_helpers/getAlignClassName';
 import styles from './Toolbar.module.scss';
 
@@ -35,7 +35,7 @@ export const ToolbarGroup = ({
 
 ToolbarGroup.defaultProps = {
   align: 'top',
-  children: null,
+  children: undefined,
   dense: false,
   nowrap: false,
 };

package/src/components/Toolbar/ToolbarItem.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
 import { withGlobalProps } from '../../providers/globalProps';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import styles from './Toolbar.module.scss';
 
 export const ToolbarItem = ({
@@ -29,7 +29,7 @@ export const ToolbarItem = ({
 };
 
 ToolbarItem.defaultProps = {
-  children: null,
+  children: undefined,
   flexible: false,
 };
 

package/src/helpers/isChildrenEmpty/README.md

@@ -0,0 +1,57 @@
+# isChildrenEmpty
+
+The `isChildrenEmpty` helper function determines whether the given children
+value should be considered "empty".
+
+It is useful in React when conditionally rendering components based on
+whether children contain meaningful content.
+
+## Usage
+
+To use `isChildrenEmpty` helper, you need to import it first:
+
+```js
+import { isChildrenEmpty } from '@react-ui-org/react-ui';
+```
+
+Then use it:
+
+```docoff-react-preview
+
+React.createElement(() => {
+  const children = null;
+  const isEmpty = isChildrenEmpty(children);
+
+  if (isEmpty === false) {
+    return (
+      <div>{children}</div>
+    );
+  }
+
+  return (
+    <div>Children not provided</div>
+  );
+});
+```
+
+```docoff-react-preview
+React.createElement(() => {
+  const children = (
+    <>
+      <h1>Title</h1>
+      <p>Content</p>
+    </>
+  );
+  const isEmpty = isChildrenEmpty(children);
+
+  if (isEmpty === false) {
+    return (
+      <div>{children}</div>
+    );
+  }
+
+  return (
+    <div>Children not provided</div>
+  );
+});
+```

package/src/helpers/isChildrenEmpty/index.js

@@ -0,0 +1 @@
+export { isChildrenEmpty } from './isChildrenEmpty';

package/src/index.js

@@ -64,3 +64,4 @@ export { TranslationsProvider } from './providers/translations';
 // Helpers
 export { classNames } from './helpers/classNames';
 export { transferProps } from './helpers/transferProps';
+export { isChildrenEmpty } from './helpers/isChildrenEmpty';

package/src/providers/globalProps/GlobalPropsProvider.jsx

@@ -21,7 +21,7 @@ const GlobalPropsProvider = ({
 };
 
 GlobalPropsProvider.defaultProps = {
-  children: null,
+  children: undefined,
   globalProps: {},
 };
 

package/src/providers/translations/TranslationsProvider.jsx

@@ -21,7 +21,7 @@ const TranslationsProvider = ({
 };
 
 TranslationsProvider.defaultProps = {
-  children: null,
+  children: undefined,
   translations: {},
 };
 

package/src/styles/settings/_breakpoints.scss

@@ -1,3 +1,5 @@
+// Keep this file in sync with values in `tests/playwright/constants/breakpoints.ts`
+
 $values: (
     xs: 0,
     sm: 36em,

package/src/theme.scss

@@ -832,6 +832,8 @@
         --rui-Card--raised__box-shadow: var(--rui-shadow-layer-1);
         --rui-Card--disabled__background-color: var(--rui-color-background-disabled);
         --rui-Card--disabled__opacity: var(--rui-ratio-disabled-opacity);
+        --rui-Card--disabled__border-width: var(--rui-dimension-border-width-1);
+        --rui-Card--disabled__border-color: var(--rui-color-border-primary);
 
         // Card: variant: success
         --rui-Card--success__color: var(--rui-color-text-primary);

package/src/translations/en.js

@@ -5,6 +5,7 @@ export default {
   FileInputField: {
     browse: 'Browse',
     drop: 'or drop file here',
+    dropFileHere: 'Drop file here',
     filesSelected: 'files selected',
   },
   ModalCloseButton: {

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src",
+    "tests"
+  ]
+}