@itcase/ui-core 1.10.50 → 1.10.51

package/dist/cjs/hooks/index.js

@@ -22,6 +22,7 @@ require('../context/UIContext.js');
 require('../utils/setViewportProperty.js');
 require('../context/UrlAssetPrefix.js');
 require('./useStyles/styleAttributes.js');
+require('lodash/kebabCase');
 require('lodash/maxBy');
 require('react-responsive');
 

package/dist/cjs/hooks/useDevicePropsGenerator/index.js

@@ -16,6 +16,7 @@ require('../../utils/setViewportProperty.js');
 require('../../context/UrlAssetPrefix.js');
 require('../useStyles/styleAttributes.js');
 require('../useStyles/styleAttributes.helpers.js');
+require('lodash/kebabCase');
 require('lodash/maxBy');
 
 

package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -9,6 +9,7 @@ var UIContext = require('../../context/UIContext.js');
 require('../../context/UrlAssetPrefix.js');
 var styleAttributes = require('../useStyles/styleAttributes.js');
 var styleAttributes_helpers = require('../useStyles/styleAttributes.helpers.js');
+require('lodash/kebabCase');
 require('lodash/maxBy');
 require('react/jsx-runtime');
 require('uuid');

package/dist/cjs/hooks/useStyles/index.js

@@ -4,6 +4,7 @@ var styleAttributes_helpers = require('./styleAttributes.helpers.js');
 var useStyles = require('./useStyles.js');
 require('react');
 require('lodash/camelCase');
+require('lodash/kebabCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../../context/Notifications.js');

package/dist/cjs/hooks/useStyles/styleAttributes.js

@@ -30,6 +30,8 @@ var styleAttributes = [
     'columnWidth',
     'height',
     'justifyContent',
+    'justifyItems',
+    'justifySelf',
     'left',
     'margin',
     'marginBottom',

package/dist/cjs/hooks/useStyles/useStyles.js

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var camelCase = require('lodash/camelCase');
+var kebabCase = require('lodash/kebabCase');
 var maxBy = require('lodash/maxBy');
 var upperFirst = require('lodash/upperFirst');
 require('../../context/Notifications.js');
@@ -16,6 +17,14 @@ require('../useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../../utils/setViewportProperty.js');
 
+const LAYOUT_STYLE_KEYS = new Set([
+    'alignContent',
+    'alignItems',
+    'alignSelf',
+    'justifyContent',
+    'justifyItems',
+    'justifySelf',
+]);
 /*
  * rule of prop key:
  *
@@ -74,6 +83,11 @@ function useStyles(props) {
                 }
             }
             if (value) {
+                // flexStart → flex-start for layout props
+                if (typeof value === 'string' &&
+                    LAYOUT_STYLE_KEYS.has(styleAttributeKey)) {
+                    value = kebabCase(value);
+                }
                 // Check not digit symbols. Chars means some unit ("px", "em", "rem" or custom "m")
                 const isValueHasUnit = /\D/.test(value);
                 // If value has some unit
@@ -154,11 +168,12 @@ function useStyles(props) {
             }
         }
         return resultStylesGroups;
+        // propsStyleAttributes already tracks relevant prop values
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         deviceCurrentMainType,
         deviceCurrentType,
-        ...Object.values(propsStyleAttributes),
+        propsStyleAttributes,
     ]);
     return collectedStyles;
 }

package/dist/hooks/index.js

@@ -20,5 +20,6 @@ import '../context/UIContext.js';
 import '../utils/setViewportProperty.js';
 import '../context/UrlAssetPrefix.js';
 import './useStyles/styleAttributes.js';
+import 'lodash/kebabCase';
 import 'lodash/maxBy';
 import 'react-responsive';

package/dist/hooks/useDevicePropsGenerator/index.js

@@ -14,4 +14,5 @@ import '../../utils/setViewportProperty.js';
 import '../../context/UrlAssetPrefix.js';
 import '../useStyles/styleAttributes.js';
 import '../useStyles/styleAttributes.helpers.js';
+import 'lodash/kebabCase';
 import 'lodash/maxBy';

package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -7,6 +7,7 @@ import { useUserDeviceContext } from '../../context/UIContext.js';
 import '../../context/UrlAssetPrefix.js';
 import styleAttributes from '../useStyles/styleAttributes.js';
 import { getStyleAttributeKey } from '../useStyles/styleAttributes.helpers.js';
+import 'lodash/kebabCase';
 import 'lodash/maxBy';
 import 'react/jsx-runtime';
 import 'uuid';

package/dist/hooks/useStyles/index.js

@@ -2,6 +2,7 @@ export { getStyleAttributeKey } from './styleAttributes.helpers.js';
 export { useStyles } from './useStyles.js';
 import 'react';
 import 'lodash/camelCase';
+import 'lodash/kebabCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../../context/Notifications.js';

package/dist/hooks/useStyles/styleAttributes.js

@@ -26,6 +26,8 @@ var styleAttributes = [
     'columnWidth',
     'height',
     'justifyContent',
+    'justifyItems',
+    'justifySelf',
     'left',
     'margin',
     'marginBottom',

package/dist/hooks/useStyles/useStyles.js

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import camelCase from 'lodash/camelCase';
+import kebabCase from 'lodash/kebabCase';
 import maxBy from 'lodash/maxBy';
 import upperFirst from 'lodash/upperFirst';
 import '../../context/Notifications.js';
@@ -14,6 +15,14 @@ import '../useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../../utils/setViewportProperty.js';
 
+const LAYOUT_STYLE_KEYS = new Set([
+    'alignContent',
+    'alignItems',
+    'alignSelf',
+    'justifyContent',
+    'justifyItems',
+    'justifySelf',
+]);
 /*
  * rule of prop key:
  *
@@ -72,6 +81,11 @@ function useStyles(props) {
                 }
             }
             if (value) {
+                // flexStart → flex-start for layout props
+                if (typeof value === 'string' &&
+                    LAYOUT_STYLE_KEYS.has(styleAttributeKey)) {
+                    value = kebabCase(value);
+                }
                 // Check not digit symbols. Chars means some unit ("px", "em", "rem" or custom "m")
                 const isValueHasUnit = /\D/.test(value);
                 // If value has some unit
@@ -152,11 +166,12 @@ function useStyles(props) {
             }
         }
         return resultStylesGroups;
+        // propsStyleAttributes already tracks relevant prop values
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         deviceCurrentMainType,
         deviceCurrentType,
-        ...Object.values(propsStyleAttributes),
+        propsStyleAttributes,
     ]);
     return collectedStyles;
 }

package/dist/types/hooks/useStyles/styleAttributes.interface.d.ts

@@ -1,13 +1,13 @@
 import { CSSProperties } from 'react';
 import type * as CSS from 'csstype';
-import { HeightProps, ResizeModeProps, WidthProps } from '@itcase/types-ui';
+import { AlignContentProps, AlignItemsProps, AlignSelfProps, HeightProps, JustifyContentProps, JustifyItemsProps, JustifySelfProps, ResizeModeProps, WidthProps } from '@itcase/types-ui';
 export interface StyleAttributes {
     /**
      * Layout
      */
-    alignContent?: CSS.Property.AlignContent;
-    alignItems?: CSS.Property.AlignItems;
-    alignSelf?: CSS.Property.AlignSelf;
+    alignContent?: AlignContentProps;
+    alignItems?: AlignItemsProps;
+    alignSelf?: AlignSelfProps;
     aspectRatio?: CSS.Property.AspectRatio;
     /**
      * Filter
@@ -69,6 +69,9 @@ export interface StyleAttributes {
     gridTemplateColumns?: CSS.Property.GridTemplateColumns;
     gridTemplateRows?: CSS.Property.GridTemplateRows;
     height?: CSS.Property.Height | HeightProps;
+    justifyContent?: JustifyContentProps;
+    justifyItems?: JustifyItemsProps;
+    justifySelf?: JustifySelfProps;
     left?: CSS.Property.Left;
     letterSpacing?: CSS.Property.LetterSpacing;
     lineHeight?: CSS.Property.LineHeight;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui-core",
-  "version": "1.10.50",
+  "version": "1.10.51",
   "description": "UI shared components",
   "keywords": [
     "Modal",
@@ -76,7 +76,7 @@
     "@babel/core": "^8.0.1",
     "@babel/preset-react": "^8.0.1",
     "@itcase/types-core": "^1.1.74",
-    "@itcase/types-ui": "^1.1.91",
+    "@itcase/types-ui": "^1.1.93",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-commonjs": "^29.0.3",
@@ -96,5 +96,5 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3"
   },
-  "gitHead": "0908a0c0e71a354a7c512fa70ce0c54e76788af7"
+  "gitHead": "8e079adc9dbd3b392ba155e2f2b53b0ac79ca6b5"
 }