@trilogy-ds/react 0.0.5-beta-v4 → 0.0.6-alpha-prompt

package/lib/components/columns/Columns.js

@@ -1,10 +1,12 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
-import clsx from 'clsx';
-import { has, is } from '../../services/classify';
-import { hashClass } from '../../helpers';
+import { ComponentName } from '../../components/enumsComponentsName';
 import { useTrilogyContext } from '../../context';
-import { getAlignClassName, getJustifiedClassName } from '../../objects';
+import { hashClass } from '../../helpers/hashClassesHelpers';
+import { getAlignClassName } from '../../objects/facets/Alignable';
+import { getJustifiedClassName } from '../../objects/facets/Justifiable';
+import { has, is } from '../../services/classify';
+import clsx from 'clsx';
+import React from 'react';
 /**
  * Columns Component
  * @param centered {boolean} Center columns
@@ -15,14 +17,15 @@ import { getAlignClassName, getJustifiedClassName } from '../../objects';
  * @param marginless {boolean} delete margin
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param multiline {boolean} Multiline Columns
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * @param mobile {boolean} Responsive mode
  */
-var Columns = function (_a) {
-    var className = _a.className, id = _a.id, multiline = _a.multiline, scrollable = _a.scrollable, mobile = _a.mobile, gap = _a.gap, fullBleed = _a.fullBleed, marginless = _a.marginless, align = _a.align, verticalAlign = _a.verticalAlign, others = __rest(_a, ["className", "id", "multiline", "scrollable", "mobile", "gap", "fullBleed", "marginless", "align", "verticalAlign"]);
+var Columns = React.forwardRef(function (_a, ref) {
+    var className = _a.className, id = _a.id, multiline = _a.multiline, scrollable = _a.scrollable, mobile = _a.mobile, gap = _a.gap, fullBleed = _a.fullBleed, marginless = _a.marginless, align = _a.align, verticalAlign = _a.verticalAlign, fullheight = _a.fullheight, others = __rest(_a, ["className", "id", "multiline", "scrollable", "mobile", "gap", "fullBleed", "marginless", "align", "verticalAlign", "fullheight"]);
     var styled = useTrilogyContext().styled;
-    var classes = hashClass(styled, clsx('columns', multiline && is('multiline'), fullBleed && is('fullbleed'), scrollable && is('scrollable'), gap && has("gap-".concat(gap)), typeof gap !== 'undefined' && gap === 0 && is('gapless'), mobile && is('mobile'), align && is(getJustifiedClassName(align)), verticalAlign && is(getAlignClassName(verticalAlign)), marginless && is("marginless"), className));
-    return React.createElement("div", __assign({ id: id, className: classes }, others));
-};
+    var classes = hashClass(styled, clsx('columns', multiline && is('multiline'), fullBleed && is('fullbleed'), scrollable && is('scrollable'), gap && has("gap-".concat(gap)), typeof gap !== 'undefined' && gap === 0 && is('gapless'), mobile && is('mobile'), align && is(getJustifiedClassName(align)), verticalAlign && is(getAlignClassName(verticalAlign)), marginless && is("marginless"), fullheight && is('fullheight'), className));
+    return React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others));
+});
+Columns.displayName = ComponentName.Columns;
 export default Columns;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1ucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvY29sdW1ucy9Db2x1bW5zLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBRXZCLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLGlCQUFpQixFQUFFLHFCQUFxQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRXBFOzs7Ozs7Ozs7Ozs7R0FZRztBQUNILElBQU0sT0FBTyxHQUFHLFVBQUMsRUFZZTtJQVhiLElBQUEsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsU0FBUyxlQUFBLEVBQ1QsVUFBVSxnQkFBQSxFQUNWLE1BQU0sWUFBQSxFQUNOLEdBQUcsU0FBQSxFQUNILFNBQVMsZUFBQSxFQUNULFVBQVUsZ0JBQUEsRUFDVixLQUFLLFdBQUEsRUFDTCxhQUFhLG1CQUFBLEVBQ1YsTUFBTSxjQVhYLG9IQVlDLENBRFU7SUFFbEIsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUN2QixNQUFNLEVBQ04sSUFBSSxDQUNGLFNBQVMsRUFDVCxTQUFTLElBQUksRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUM1QixTQUFTLElBQUksRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUM1QixVQUFVLElBQUksRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUM5QixHQUFHLElBQUksR0FBRyxDQUFDLGNBQU8sR0FBRyxDQUFFLENBQUMsRUFDeEIsT0FBTyxHQUFHLEtBQUssV0FBVyxJQUFJLEdBQUcsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDLFNBQVMsQ0FBQyxFQUN4RCxNQUFNLElBQUksRUFBRSxDQUFDLFFBQVEsQ0FBQyxFQUN0QixLQUFLLElBQUksRUFBRSxDQUFDLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQ3pDLGFBQWEsSUFBSSxFQUFFLENBQUMsaUJBQWlCLENBQUMsYUFBYSxDQUFDLENBQUMsRUFDckQsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFDOUIsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sc0NBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU0sRUFBSSxDQUFBO0FBQ3hELENBQUMsQ0FBQTtBQUVELGVBQWUsT0FBTyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1ucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvY29sdW1ucy9Db2x1bW5zLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFDOUQsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDcEUsT0FBTyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUM3QyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCOzs7Ozs7Ozs7Ozs7R0FZRztBQUNILElBQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzlCLFVBQ0UsRUFBeUgsRUFDekgsR0FBRztJQURELElBQUEsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsVUFBVSxnQkFBQSxFQUFFLE1BQU0sWUFBQSxFQUFFLEdBQUcsU0FBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUUsVUFBVSxnQkFBQSxFQUFLLE1BQU0sY0FBdkgsa0lBQXlILENBQUY7SUFHL0csSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUN2QixNQUFNLEVBQ04sSUFBSSxDQUNGLFNBQVMsRUFDVCxTQUFTLElBQUksRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUM1QixTQUFTLElBQUksRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUM1QixVQUFVLElBQUksRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUM5QixHQUFHLElBQUksR0FBRyxDQUFDLGNBQU8sR0FBRyxDQUFFLENBQUMsRUFDeEIsT0FBTyxHQUFHLEtBQUssV0FBVyxJQUFJLEdBQUcsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDLFNBQVMsQ0FBQyxFQUN4RCxNQUFNLElBQUksRUFBRSxDQUFDLFFBQVEsQ0FBQyxFQUN0QixLQUFLLElBQUksRUFBRSxDQUFDLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQ3pDLGFBQWEsSUFBSSxFQUFFLENBQUMsaUJBQWlCLENBQUMsYUFBYSxDQUFDLENBQUMsRUFDckQsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFDOUIsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFDOUIsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sc0NBQUssR0FBRyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTSxFQUFJLENBQUE7QUFDbEUsQ0FBQyxDQUNGLENBQUE7QUFDRCxPQUFPLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxPQUFPLENBQUE7QUFDM0MsZUFBZSxPQUFPLENBQUEifQ==

package/lib/components/columns/Columns.native.d.ts

@@ -1,6 +1,6 @@
+import { ColumnsProps } from '../../components/columns/ColumnsProps';
 import React from 'react';
-import { ColumnsProps } from './ColumnsProps';
-import { ComponentName } from '../../components/enumsComponentsName';
+import { View } from 'react-native';
 /**
  * Columns Native Component
  * @param children {React.ReactNode}
@@ -9,11 +9,5 @@ import { ComponentName } from '../../components/enumsComponentsName';
  * @param scrollable {boolean} Makes columns vertically scrollable.
  * @param gap {GapSize} Gap between columns
  */
-export declare const ColumnsContext: React.Context<{
-    scrollable: boolean;
-}>;
-declare const Columns: {
-    ({ children, align, gap, verticalAlign, fullBleed, scrollable, multiline, ...others }: ColumnsProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Columns: React.ForwardRefExoticComponent<ColumnsProps & React.RefAttributes<View>>;
 export default Columns;

package/lib/components/columns/Columns.native.js

@@ -1,10 +1,21 @@
 import { __assign, __read, __rest } from "tslib";
-import React, { createContext, useState } from 'react';
-import { Dimensions, ScrollView, StyleSheet } from 'react-native';
-import { View } from '../../components/view';
-import { ComponentName } from '../../components/enumsComponentsName';
 import { ColumnsGapValue } from '../../components/columns/ColumnsTypes';
-import { Alignable, getAlignStyle } from '../../objects';
+import { ColumnsContext } from '../../components/columns/context';
+import { ComponentName } from '../../components/enumsComponentsName';
+import { Alignable, getAlignStyle } from '../../objects/facets/Alignable';
+import React, { useState, useMemo, useCallback } from 'react';
+import { Dimensions, ScrollView, StyleSheet, View } from 'react-native';
+var staticStyles = StyleSheet.create({
+    centered: {
+        justifyContent: 'center',
+    },
+    multiline: {
+        flexWrap: 'wrap',
+    },
+    mobile: {
+        flexDirection: 'column',
+    },
+});
 /**
  * Columns Native Component
  * @param children {React.ReactNode}
@@ -13,12 +24,11 @@ import { Alignable, getAlignStyle } from '../../objects';
  * @param scrollable {boolean} Makes columns vertically scrollable.
  * @param gap {GapSize} Gap between columns
  */
-export var ColumnsContext = createContext({ scrollable: false });
-var Columns = function (_a) {
-    var children = _a.children, align = _a.align, gap = _a.gap, verticalAlign = _a.verticalAlign, fullBleed = _a.fullBleed, scrollable = _a.scrollable, multiline = _a.multiline, others = __rest(_a, ["children", "align", "gap", "verticalAlign", "fullBleed", "scrollable", "multiline"]);
+var Columns = React.forwardRef(function (_a, ref) {
+    var children = _a.children, align = _a.align, gap = _a.gap, verticalAlign = _a.verticalAlign, fullBleed = _a.fullBleed, scrollable = _a.scrollable, multiline = _a.multiline, fullheight = _a.fullheight, others = __rest(_a, ["children", "align", "gap", "verticalAlign", "fullBleed", "scrollable", "multiline", "fullheight"]);
     var _b = __read(useState(0), 2), width = _b[0], setWidth = _b[1];
     var _c = __read(useState(0), 2), enlarge = _c[0], setEnlarge = _c[1];
-    var onLayoutHandler = function (event) {
+    var onLayoutHandler = useCallback(function (event) {
         if (!width) {
             var width_1 = event.nativeEvent.layout.width;
             if (fullBleed) {
@@ -26,76 +36,43 @@ var Columns = function (_a) {
             }
             setWidth(width_1);
         }
-    };
-    var realGap = (typeof gap === 'undefined' && 16) || ColumnsGapValue[gap];
-    var styles = StyleSheet.create({
+    }, [fullBleed, width]);
+    var realGap = useMemo(function () { return (typeof gap === 'undefined' && 16) || ColumnsGapValue[gap]; }, [gap]);
+    var dynamicStyles = useMemo(function () { return ({
         columns: {
-            width: width ? width + enlarge * 2 : '100%',
+            width: fullBleed && width ? width + enlarge * 2 : '100%',
             marginHorizontal: -enlarge,
             paddingHorizontal: enlarge,
             flexDirection: 'row',
             gap: realGap,
-            display: 'flex',
-            justifyContent: 'space-evenly',
-        },
-        centered: {
-            alignSelf: 'center',
+            height: fullheight ? '100%' : 'auto'
         },
         verticalAlign: {
             alignItems: getAlignStyle(verticalAlign),
         },
-        multiline: {
-            flexWrap: 'wrap',
-        },
         scrollContainer: {
-            width: 'auto',
             paddingHorizontal: enlarge,
-            justifyContent: 'space-around',
             gap: realGap,
         },
-        mobile: {
-            flexDirection: 'column',
-        },
-    });
-    if (!scrollable) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(View, __assign({ style: [
-                    styles.columns,
-                    multiline && styles.multiline,
-                    (align === Alignable.ALIGNED_CENTER) && styles.centered,
-                    verticalAlign && styles.verticalAlign,
-                ] }, others, { onLayout: onLayoutHandler }), 
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            React.Children.map(children, function (child) {
-                return child &&
-                    React.cloneElement(child, {
-                        style: [
-                            child.props.style,
-                            { width: (child.props.size && (width * child.props.size) / 12 - realGap) || 'auto' },
-                            child.props.narrow && { flex: 'none', flexShrink: 1 },
-                        ],
-                    });
-            }))));
-    }
-    return (React.createElement(View, __assign({ style: {
-            width: "100% + ".concat(enlarge * 2, "px"),
-            marginHorizontal: -enlarge,
-        } }, { onLayout: onLayoutHandler }),
-        React.createElement(ScrollView, { horizontal: true, contentContainerStyle: styles.scrollContainer }, 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        React.Children.map(children, function (child) {
-            return React.cloneElement(child, {
-                style: [
-                    child.props.style,
-                    {
-                        width: width / (12 / (child.props.size || child.props.mobileSize || 12)) - 2 * realGap,
-                        flexGrow: 0,
-                    },
-                    child.props.narrow && { flex: 'none', flexShrink: 1 },
-                ],
-            });
-        }))));
-};
+    }); }, [fullBleed, width, enlarge, realGap, fullheight, verticalAlign]);
+    var contextValue = useMemo(function () { return ({
+        width: width,
+        realGap: realGap,
+        scrollable: scrollable || false,
+        childrensLength: React.Children.count(children),
+    }); }, [width, realGap, scrollable, children]);
+    return (React.createElement(ColumnsContext.Provider, { value: contextValue },
+        !scrollable && (React.createElement(View, __assign({ ref: ref, onLayout: onLayoutHandler, style: [
+                dynamicStyles.columns,
+                multiline && staticStyles.multiline,
+                align === Alignable.ALIGNED_CENTER && staticStyles.centered,
+                verticalAlign && dynamicStyles.verticalAlign,
+            ] }, others), children)),
+        scrollable && (React.createElement(View, { onLayout: onLayoutHandler, style: {
+                marginHorizontal: -enlarge,
+            } },
+            React.createElement(ScrollView, { horizontal: true, contentContainerStyle: dynamicStyles.scrollContainer, showsHorizontalScrollIndicator: false }, children)))));
+});
 Columns.displayName = ComponentName.Columns;
 export default Columns;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1ucy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NvbHVtbnMvQ29sdW1ucy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLGFBQWEsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDdEQsT0FBTyxFQUFFLFVBQVUsRUFBcUIsVUFBVSxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUNwRixPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFFeEMsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxlQUFlLEVBQVcsTUFBTSxtQ0FBbUMsQ0FBQTtBQUM1RSxPQUFPLEVBQUUsU0FBUyxFQUFFLGFBQWEsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUVwRDs7Ozs7OztHQU9HO0FBRUgsTUFBTSxDQUFDLElBQU0sY0FBYyxHQUFHLGFBQWEsQ0FBQyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFBO0FBRWxFLElBQU0sT0FBTyxHQUFHLFVBQUMsRUFTRjtJQVJiLElBQUEsUUFBUSxjQUFBLEVBQ1IsS0FBSyxXQUFBLEVBQ0wsR0FBRyxTQUFBLEVBQ0gsYUFBYSxtQkFBQSxFQUNiLFNBQVMsZUFBQSxFQUNULFVBQVUsZ0JBQUEsRUFDVixTQUFTLGVBQUEsRUFDTixNQUFNLGNBUk0scUZBU2hCLENBRFU7SUFFSCxJQUFBLEtBQUEsT0FBb0IsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFBLEVBQTlCLEtBQUssUUFBQSxFQUFFLFFBQVEsUUFBZSxDQUFBO0lBQy9CLElBQUEsS0FBQSxPQUF3QixRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUEsRUFBbEMsT0FBTyxRQUFBLEVBQUUsVUFBVSxRQUFlLENBQUE7SUFFekMsSUFBTSxlQUFlLEdBQUcsVUFBQyxLQUF3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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1ucy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NvbHVtbnMvQ29sdW1ucy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFDQSxPQUFPLEVBQUUsZUFBZSxFQUFXLE1BQU0sbUNBQW1DLENBQUE7QUFDNUUsT0FBTyxFQUFFLGNBQWMsRUFBc0IsTUFBTSw4QkFBOEIsQ0FBQTtBQUNqRixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLFNBQVMsRUFBRSxhQUFhLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUNyRSxPQUFPLEtBQUssRUFBRSxFQUFFLFFBQVEsRUFBRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzdELE9BQU8sRUFBRSxVQUFVLEVBQXFCLFVBQVUsRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRTFGLElBQU0sWUFBWSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7SUFDckMsUUFBUSxFQUFFO1FBQ1IsY0FBYyxFQUFFLFFBQVE7S0FDekI7SUFDRCxTQUFTLEVBQUU7UUFDVCxRQUFRLEVBQUUsTUFBTTtLQUNqQjtJQUNELE1BQU0sRUFBRTtRQUNOLGFBQWEsRUFBRSxRQUFRO0tBQ3hCO0NBQ0YsQ0FBQyxDQUFBO0FBRUY7Ozs7Ozs7R0FPRztBQUNILElBQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzlCLFVBQUMsRUFBZ0csRUFBRSxHQUFHO0lBQW5HLElBQUEsUUFBUSxjQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsR0FBRyxTQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUssTUFBTSxjQUE5RixtR0FBZ0csQ0FBRjtJQUN2RixJQUFBLEtBQUEsT0FB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

package/lib/components/columns/ColumnsProps.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { GapSize } from './ColumnsTypes';
-import { AlignableProps } from '../../objects';
+import { GapSize } from '../../components/columns/ColumnsTypes';
+import { AlignableProps } from '../../objects/facets/Alignable';
 import { CommonProps } from '../../objects/facets/CommonProps';
+import { View } from 'react-native';
 /**
  * Columns Interface
  */
@@ -13,4 +14,7 @@ export interface ColumnsProps extends AlignableProps, CommonProps {
     fullBleed?: boolean;
     mobile?: boolean;
     marginless?: boolean;
+    fullheight?: boolean;
 }
+export type ColumnsRef = HTMLDivElement;
+export type ColumnsNativeRef = View;

package/lib/components/columns/ColumnsPropsDefaults.js

@@ -70,6 +70,14 @@ export default {
       "true"
     ]
   },
+  "fullheight": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "align": {
     "type": "enum",
     "values": [
@@ -77,9 +85,19 @@ export default {
       "ALIGNED_CENTER",
       "ALIGNED_START",
       "ALIGNED_END",
+      "ALIGNED_STRETCH",
       "ALIGNED_CENTER",
       "ALIGNED_START",
-      "ALIGNED_END"
+      "ALIGNED_END",
+      "ALIGNED_STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH"
     ]
   },
   "verticalAlign": {
@@ -89,9 +107,19 @@ export default {
       "ALIGNED_CENTER",
       "ALIGNED_START",
       "ALIGNED_END",
+      "ALIGNED_STRETCH",
       "ALIGNED_CENTER",
       "ALIGNED_START",
-      "ALIGNED_END"
+      "ALIGNED_END",
+      "ALIGNED_STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH"
     ]
   },
   "id": {

package/lib/components/columns/column/Column.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { ColumnProps } from './ColumnProps';
+import { ColumnProps } from '../../../components/columns/column/ColumnProps';
+import React from 'react';
 /**
  * Columns Item Component - Columns Child
  * @param size {ColumnsSize} Size 1-12
@@ -8,7 +8,7 @@ import { ColumnProps } from './ColumnProps';
  * @param children {React.ReactNode}
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param narrow {boolean} Narrow column item
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * @param mobileSize {ColumnsSize} Apply => is-size-mobile
  * @param tabletSize {ColumnsSize} Apply => is-size-tablet
  * @param touchSize {ColumnsSize} Apply => is-size-touch
@@ -24,5 +24,5 @@ import { ColumnProps } from './ColumnProps';
  * @param fullhdOffset {ColumnsSize} Apply => is-offset-fullhd
  * @param align { Alignable | AlignableValues} align content
  */
-declare const Column: ({ className, id, size, mobileSize, tabletSize, touchSize, desktopSize, widescreenSize, fullhdSize, offset, mobileOffset, tabletOffset, touchOffset, desktopOffset, widescreenOffset, fullhdOffset, narrow, verticalAlign, ...others }: ColumnProps) => React.JSX.Element;
+declare const Column: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HTMLDivElement>>;
 export default Column;

package/lib/components/columns/column/Column.js

@@ -1,10 +1,11 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
-import clsx from 'clsx';
-import { is } from '../../../services/classify';
-import { hashClass } from '../../../helpers';
+import { ComponentName } from '../../../components/enumsComponentsName';
 import { useTrilogyContext } from '../../../context';
-import { getAlignClassName } from '../../../objects';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
+import { getAlignClassName } from '../../../objects/facets/Alignable';
+import { is } from '../../../services/classify';
+import clsx from 'clsx';
+import React from 'react';
 /**
  * Columns Item Component - Columns Child
  * @param size {ColumnsSize} Size 1-12
@@ -13,7 +14,7 @@ import { getAlignClassName } from '../../../objects';
  * @param children {React.ReactNode}
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param narrow {boolean} Narrow column item
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * @param mobileSize {ColumnsSize} Apply => is-size-mobile
  * @param tabletSize {ColumnsSize} Apply => is-size-tablet
  * @param touchSize {ColumnsSize} Apply => is-size-touch
@@ -29,11 +30,12 @@ import { getAlignClassName } from '../../../objects';
  * @param fullhdOffset {ColumnsSize} Apply => is-offset-fullhd
  * @param align { Alignable | AlignableValues} align content
  */
-var Column = function (_a) {
+var Column = React.forwardRef(function (_a, ref) {
     var className = _a.className, id = _a.id, size = _a.size, mobileSize = _a.mobileSize, tabletSize = _a.tabletSize, touchSize = _a.touchSize, desktopSize = _a.desktopSize, widescreenSize = _a.widescreenSize, fullhdSize = _a.fullhdSize, offset = _a.offset, mobileOffset = _a.mobileOffset, tabletOffset = _a.tabletOffset, touchOffset = _a.touchOffset, desktopOffset = _a.desktopOffset, widescreenOffset = _a.widescreenOffset, fullhdOffset = _a.fullhdOffset, narrow = _a.narrow, verticalAlign = _a.verticalAlign, others = __rest(_a, ["className", "id", "size", "mobileSize", "tabletSize", "touchSize", "desktopSize", "widescreenSize", "fullhdSize", "offset", "mobileOffset", "tabletOffset", "touchOffset", "desktopOffset", "widescreenOffset", "fullhdOffset", "narrow", "verticalAlign"]);
     var styled = useTrilogyContext().styled;
     var classes = hashClass(styled, clsx('column', size && is("".concat(size)), mobileSize && is("".concat(mobileSize, "-mobile")), tabletSize && is("".concat(tabletSize, "-tablet")), touchSize && is("".concat(touchSize, "-tablet")), desktopSize && is("".concat(desktopSize, "-desktop")), widescreenSize && is("".concat(widescreenSize, "-widescreen")), fullhdSize && is("".concat(fullhdSize, "-fullhd")), offset && is("offset-".concat(offset)), mobileOffset && is("offset-".concat(mobileOffset, "-mobile")), tabletOffset && is("offset-".concat(tabletOffset, "-tablet")), touchOffset && is("offset-".concat(touchOffset, "-tablet")), desktopOffset && is("offset-".concat(desktopOffset, "-desktop")), widescreenOffset && is("offset-".concat(widescreenOffset, "-widescreen")), fullhdOffset && is("offset-".concat(fullhdOffset, "-fullhd")), narrow && is('narrow'), verticalAlign && is(getAlignClassName(verticalAlign)), className));
-    return React.createElement("div", __assign({ id: id, className: classes }, others));
-};
+    return React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others));
+});
+Column.displayName = ComponentName.Column;
 export default Column;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9jb2x1bW5zL2NvbHVtbi9Db2x1bW4udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFFdkIsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQ3hDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUU3Qzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F1Qkc7QUFDSCxJQUFNLE1BQU0sR0FBRyxVQUFDLEVBb0JjO0lBbkJaLElBQUEsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsSUFBSSxVQUFBLEVBQ0osVUFBVSxnQkFBQSxFQUNWLFVBQVUsZ0JBQUEsRUFDVixTQUFTLGVBQUEsRUFDVCxXQUFXLGlCQUFBLEVBQ1gsY0FBYyxvQkFBQSxFQUNkLFVBQVUsZ0JBQUEsRUFDVixNQUFNLFlBQUEsRUFDTixZQUFZLGtCQUFBLEVBQ1osWUFBWSxrQkFBQSxFQUNaLFdBQVcsaUJBQUEsRUFDWCxhQUFhLG1CQUFBLEVBQ2IsZ0JBQWdCLHNCQUFBLEVBQ2hCLFlBQVksa0JBQUEsRUFDWixNQUFNLFlBQUEsRUFDTixhQUFhLG1CQUFBLEVBQ1YsTUFBTSxjQW5CWCw0UEFvQkMsQ0FEVTtJQUdqQixJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLE1BQU0sRUFDTixJQUFJLENBQ0YsUUFBUSxFQUNSLElBQUksSUFBSSxFQUFFLENBQUMsVUFBRyxJQUFJLENBQUUsQ0FBQyxFQUNyQixVQUFVLElBQUksRUFBRSxDQUFDLFVBQUcsVUFBVSxZQUFTLENBQUMsRUFDeEMsVUFBVSxJQUFJLEVBQUUsQ0FBQyxVQUFHLFVBQVUsWUFBUyxDQUFDLEVBQ3hDLFNBQVMsSUFBSSxFQUFFLENBQUMsVUFBRyxTQUFTLFlBQVMsQ0FBQyxFQUN0QyxXQUFXLElBQUksRUFBRSxDQUFDLFVBQUcsV0FBVyxhQUFVLENBQUMsRUFDM0MsY0FBYyxJQUFJLEVBQUUsQ0FBQyxVQUFHLGNBQWMsZ0JBQWEsQ0FBQyxFQUNwRCxVQUFVLElBQUksRUFBRSxDQUFDLFVBQUcsVUFBVSxZQUFTLENBQUMsRUFDeEMsTUFBTSxJQUFJLEVBQUUsQ0FBQyxpQkFBVSxNQUFNLENBQUUsQ0FBQyxFQUNoQyxZQUFZLElBQUksRUFBRSxDQUFDLGlCQUFVLFlBQVksWUFBUyxDQUFDLEVBQ25ELFlBQVksSUFBSSxFQUFFLENBQUMsaUJBQVUsWUFBWSxZQUFTLENBQUMsRUFDbkQsV0FBVyxJQUFJLEVBQUUsQ0FBQyxpQkFBVSxXQUFXLFlBQVMsQ0FBQyxFQUNqRCxhQUFhLElBQUksRUFBRSxDQUFDLGlCQUFVLGFBQWEsYUFBVSxDQUFDLEVBQ3RELGdCQUFnQixJQUFJLEVBQUUsQ0FBQyxpQkFBVSxnQkFBZ0IsZ0JBQWEsQ0FBQyxFQUMvRCxZQUFZLElBQUksRUFBRSxDQUFDLGlCQUFVLFlBQVksWUFBUyxDQUFDLEVBQ25ELE1BQU0sSUFBSSxFQUFFLENBQUMsUUFBUSxDQUFDLEVBQ3RCLGFBQWEsSUFBSSxFQUFFLENBQUMsaUJBQWlCLENBQUMsYUFBYSxDQUFDLENBQUMsRUFDckQsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sc0NBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU0sRUFBSSxDQUFBO0FBQ3hELENBQUMsQ0FBQTtBQUVELGVBQWUsTUFBTSxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9jb2x1bW5zL2NvbHVtbi9Db2x1bW4udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFDQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUM5RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDeEMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F1Qkc7QUFFSCxJQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM3QixVQUNFLEVBb0JDLEVBQ0QsR0FBRztJQXBCRCxJQUFBLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLElBQUksVUFBQSxFQUNKLFVBQVUsZ0JBQUEsRUFDVixVQUFVLGdCQUFBLEVBQ1YsU0FBUyxlQUFBLEVBQ1QsV0FBVyxpQkFBQSxFQUNYLGNBQWMsb0JBQUEsRUFDZCxVQUFVLGdCQUFBLEVBQ1YsTUFBTSxZQUFBLEVBQ04sWUFBWSxrQkFBQSxFQUNaLFlBQVksa0JBQUEsRUFDWixXQUFXLGlCQUFBLEVBQ1gsYUFBYSxtQkFBQSxFQUNiLGdCQUFnQixzQkFBQSxFQUNoQixZQUFZLGtCQUFBLEVBQ1osTUFBTSxZQUFBLEVBQ04sYUFBYSxtQkFBQSxFQUNWLE1BQU0sY0FuQlgsNFBBb0JDLENBRFU7SUFJSCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLE1BQU0sRUFDTixJQUFJLENBQ0YsUUFBUSxFQUNSLElBQUksSUFBSSxFQUFFLENBQUMsVUFBRyxJQUFJLENBQUUsQ0FBQyxFQUNyQixVQUFVLElBQUksRUFBRSxDQUFDLFVBQUcsVUFBVSxZQUFTLENBQUMsRUFDeEMsVUFBVSxJQUFJLEVBQUUsQ0FBQyxVQUFHLFVBQVUsWUFBUyxDQUFDLEVBQ3hDLFNBQVMsSUFBSSxFQUFFLENBQUMsVUFBRyxTQUFTLFlBQVMsQ0FBQyxFQUN0QyxXQUFXLElBQUksRUFBRSxDQUFDLFVBQUcsV0FBVyxhQUFVLENBQUMsRUFDM0MsY0FBYyxJQUFJLEVBQUUsQ0FBQyxVQUFHLGNBQWMsZ0JBQWEsQ0FBQyxFQUNwRCxVQUFVLElBQUksRUFBRSxDQUFDLFVBQUcsVUFBVSxZQUFTLENBQUMsRUFDeEMsTUFBTSxJQUFJLEVBQUUsQ0FBQyxpQkFBVSxNQUFNLENBQUUsQ0FBQyxFQUNoQyxZQUFZLElBQUksRUFBRSxDQUFDLGlCQUFVLFlBQVksWUFBUyxDQUFDLEVBQ25ELFlBQVksSUFBSSxFQUFFLENBQUMsaUJBQVUsWUFBWSxZQUFTLENBQUMsRUFDbkQsV0FBVyxJQUFJLEVBQUUsQ0FBQyxpQkFBVSxXQUFXLFlBQVMsQ0FBQyxFQUNqRCxhQUFhLElBQUksRUFBRSxDQUFDLGlCQUFVLGFBQWEsYUFBVSxDQUFDLEVBQ3RELGdCQUFnQixJQUFJLEVBQUUsQ0FBQyxpQkFBVSxnQkFBZ0IsZ0JBQWEsQ0FBQyxFQUMvRCxZQUFZLElBQUksRUFBRSxDQUFDLGlCQUFVLFlBQVksWUFBUyxDQUFDLEVBQ25ELE1BQU0sSUFBSSxFQUFFLENBQUMsUUFBUSxDQUFDLEVBQ3RCLGFBQWEsSUFBSSxFQUFFLENBQUMsaUJBQWlCLENBQUMsYUFBYSxDQUFDLENBQUMsRUFDckQsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sc0NBQUssR0FBRyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTSxFQUFJLENBQUE7QUFDbEUsQ0FBQyxDQUNGLENBQUE7QUFDRCxNQUFNLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxNQUFNLENBQUE7QUFDekMsZUFBZSxNQUFNLENBQUEifQ==

package/lib/components/columns/column/Column.native.d.ts

@@ -1,15 +1,12 @@
-/// <reference types="react" />
-import { ColumnProps } from './ColumnProps';
-import { ComponentName } from '../../../components/enumsComponentsName';
+import { ColumnProps } from '../../../components/columns/column/ColumnProps';
+import React from 'react';
+import { View } from 'react-native';
 /**
- * Columns Item Component - Columns Child
- * @param size {ColumnsSize} Size 1-12
- * @param mobileSize {ColumnsSize} if size is missing.
+ * Column Component - Columns Child
  * @param children {React.ReactNode}
- * @param verticalCentered {boolean} Vertical center Column item
+ * @param narrow {boolean} Makes the column only as wide as its content.
+ * @param size {number} Size of the column based on a 12-column grid system.
+ * @param verticalAlign { 'top' | 'bottom' | 'center' } Vertical alignment of the column content.
  */
-declare const Column: {
-    ({ children, size, mobileSize, verticalAlign, ...others }: ColumnProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Column: React.MemoExoticComponent<React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<View>>>;
 export default Column;

package/lib/components/columns/column/Column.native.js

@@ -1,32 +1,38 @@
 import { __assign, __rest } from "tslib";
-import React, { useContext } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { ColumnsContext } from '../../../components/columns/Columns.native';
+import { ColumnsContext } from '../../../components/columns/context';
 import { ComponentName } from '../../../components/enumsComponentsName';
-import { Alignable } from '../../../objects';
+import { getAlignStyle } from '../../../objects';
+import React from 'react';
+import { View } from 'react-native';
 /**
- * Columns Item Component - Columns Child
- * @param size {ColumnsSize} Size 1-12
- * @param mobileSize {ColumnsSize} if size is missing.
+ * Column Component - Columns Child
  * @param children {React.ReactNode}
- * @param verticalCentered {boolean} Vertical center Column item
+ * @param narrow {boolean} Makes the column only as wide as its content.
+ * @param size {number} Size of the column based on a 12-column grid system.
+ * @param verticalAlign { 'top' | 'bottom' | 'center' } Vertical alignment of the column content.
  */
-var Column = function (_a) {
-    var children = _a.children, size = _a.size, mobileSize = _a.mobileSize, verticalAlign = _a.verticalAlign, others = __rest(_a, ["children", "size", "mobileSize", "verticalAlign"]);
-    var columnsContextValues = useContext(ColumnsContext);
-    var realSize = size || mobileSize;
-    var styles = StyleSheet.create({
-        Column: {
-            height: columnsContextValues.scrollable ? '100%' : undefined,
-            flex: !realSize ? 1 : realSize,
-            justifyContent: verticalAlign === Alignable.ALIGNED_CENTER ? 'center' : 'flex-start',
-            flexBasis: "".concat((realSize ? realSize / 12 : 12) * 100, "%"),
-            flexGrow: 0,
-            maxWidth: "".concat(((realSize ? realSize : 12) / 12) * 100, "%"),
-        },
-    });
-    return (React.createElement(View, __assign({ style: styles.Column }, others), children));
-};
+var Column = React.memo(React.forwardRef(function (_a, ref) {
+    var children = _a.children, narrow = _a.narrow, size = _a.size, verticalAlign = _a.verticalAlign, others = __rest(_a, ["children", "narrow", "size", "verticalAlign"]);
+    var _b = React.useContext(ColumnsContext), width = _b.width, realGap = _b.realGap, scrollable = _b.scrollable, childrensLength = _b.childrensLength;
+    var calculatedWidth = React.useMemo(function () {
+        return (size ? (size / 12) * width - realGap * ((childrensLength - 1) / childrensLength) : null);
+    }, [size, width, realGap, childrensLength]);
+    var scrollableStyle = React.useMemo(function () { return ({
+        width: calculatedWidth || (narrow ? 'auto' : width - 2 * realGap),
+    }); }, [calculatedWidth, narrow, width, realGap]);
+    var noScrollableStyle = React.useMemo(function () { return ({
+        flex: narrow ? 0 : 1,
+        flexGrow: size || narrow ? 0 : 1,
+        flexShrink: narrow ? 1 : 0,
+        flexBasis: calculatedWidth || 'auto',
+    }); }, [narrow, size, calculatedWidth]);
+    var justifyContentStyle = React.useMemo(function () { return ({ justifyContent: getAlignStyle(verticalAlign) }); }, [verticalAlign]);
+    return (React.createElement(View, __assign({ ref: ref, style: [
+            scrollable && scrollableStyle,
+            !scrollable && noScrollableStyle,
+            justifyContentStyle,
+        ] }, others), children));
+}));
 Column.displayName = ComponentName.Column;
 export default Column;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1uLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvY29sdW1ucy9jb2x1bW4vQ29sdW1uLm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsVUFBVSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ3pDLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRS9DLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQTtBQUNwRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUVyQzs7Ozs7O0dBTUc7QUFDSCxJQUFNLE1BQU0sR0FBRyxVQUFDLEVBQXFFO0lBQW5FLElBQUEsUUFBUSxjQUFBLEVBQUUsSUFBSSxVQUFBLEVBQUUsVUFBVSxnQkFBQSxFQUFFLGFBQWEsbUJBQUEsRUFBSyxNQUFNLGNBQXRELG1EQUF3RCxDQUFGO0lBQ3BFLElBQU0sb0JBQW9CLEdBQUcsVUFBVSxDQUFDLGNBQWMsQ0FBQyxDQUFBO0lBRXZELElBQU0sUUFBUSxHQUFHLElBQUksSUFBSSxVQUFVLENBQUE7SUFFbkMsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixNQUFNLEVBQUU7WUFDTixNQUFNLEVBQUUsb0JBQW9CLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLFNBQVM7WUFDNUQsSUFBSSxFQUFFLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLFFBQVE7WUFDOUIsY0FBYyxFQUFFLGFBQWEsS0FBSyxTQUFTLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLFlBQVk7WUFDcEYsU0FBUyxFQUFFLFVBQUcsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEdBQUcsTUFBRztZQUN0RCxRQUFRLEVBQUUsQ0FBQztZQUNYLFFBQVEsRUFBRSxVQUFHLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLEdBQUcsRUFBRSxDQUFDLEdBQUcsR0FBRyxNQUFHO1NBQ3hEO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsT0FBTyxDQUNMLG9CQUFDLElBQUksYUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLE1BQU0sSUFBTSxNQUFNLEdBQ25DLFFBQVEsQ0FDSixDQUNSLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxNQUFNLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxNQUFNLENBQUE7QUFFekMsZUFBZSxNQUFNLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1uLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvY29sdW1ucy9jb2x1bW4vQ29sdW1uLm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUNBLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUM3RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUN6QyxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDekIsT0FBTyxFQUFFLElBQUksRUFBYSxNQUFNLGNBQWMsQ0FBQTtBQUU5Qzs7Ozs7O0dBTUc7QUFDSCxJQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQ3hDLFVBQUMsRUFBb0QsRUFBRSxHQUFHO0lBQXZELElBQUEsUUFBUSxjQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUUsSUFBSSxVQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFLLE1BQU0sY0FBbEQsK0NBQW9ELENBQUY7SUFDM0MsSUFBQSxLQUFrRCxLQUFLLENBQUMsVUFBVSxDQUFDLGNBQWMsQ0FBQyxFQUFoRixLQUFLLFdBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUUsZUFBZSxxQkFBcUMsQ0FBQTtJQUV4RixJQUFNLGVBQWUsR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDO1FBQ3BDLE9BQUEsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxHQUFHLEVBQUUsQ0FBQyxHQUFHLEtBQUssR0FBRyxPQUFPLEdBQUcsQ0FBQyxDQUFDLGVBQWUsR0FBRyxDQUFDLENBQUMsR0FBRyxlQUFlLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO0lBQXpGLENBQXlGLEVBQ3pGLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsZUFBZSxDQUFDLENBQ3hDLENBQUE7SUFFRCxJQUFNLGVBQWUsR0FBYyxLQUFLLENBQUMsT0FBTyxDQUM5QyxjQUFNLE9BQUEsQ0FBQztRQUNMLEtBQUssRUFBRSxlQUFlLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsS0FBSyxHQUFHLENBQUMsR0FBRyxPQUFPLENBQUM7S0FDbEUsQ0FBQyxFQUZJLENBRUosRUFDRixDQUFDLGVBQWUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE9BQU8sQ0FBQyxDQUMxQyxDQUFBO0lBRUQsSUFBTSxpQkFBaUIsR0FBYyxLQUFLLENBQUMsT0FBTyxDQUNoRCxjQUFNLE9BQUEsQ0FBQztRQUNMLElBQUksRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNwQixRQUFRLEVBQUUsSUFBSSxJQUFJLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ2hDLFVBQVUsRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUMxQixTQUFTLEVBQUUsZUFBZSxJQUFJLE1BQU07S0FDckMsQ0FBQyxFQUxJLENBS0osRUFDRixDQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUUsZUFBZSxDQUFDLENBQ2hDLENBQUE7SUFFRCxJQUFNLG1CQUFtQixHQUFHLEtBQUssQ0FBQyxPQUFPLENBQ3ZDLGNBQU0sT0FBQSxDQUFDLEVBQUUsY0FBYyxFQUFFLGFBQWEsQ0FBQyxhQUFhLENBQTZGLEVBQUUsQ0FBQyxFQUE5SSxDQUE4SSxFQUNwSixDQUFDLGFBQWEsQ0FBQyxDQUNoQixDQUFBO0lBRUQsT0FBTyxDQUNMLG9CQUFDLElBQUksYUFDSCxHQUFHLEVBQUUsR0FBRyxFQUNSLEtBQUssRUFBRTtZQUNMLFVBQVUsSUFBSSxlQUFlO1lBQzdCLENBQUMsVUFBVSxJQUFJLGlCQUFpQjtZQUNoQyxtQkFBbUI7U0FDcEIsSUFDRyxNQUFNLEdBRVQsUUFBUSxDQUNKLENBQ1IsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFDLENBQUE7QUFFRixNQUFNLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxNQUFNLENBQUE7QUFFekMsZUFBZSxNQUFNLENBQUEifQ==

package/lib/components/columns/column/ColumnProps.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { AlignableProps } from '../../../objects';
 import { ColumnsSize } from '../../../components/columns/ColumnsTypes';
+import { AlignableProps } from '../../../objects/facets/Alignable';
 import { CommonProps } from '../../../objects/facets/CommonProps';
+import { View } from 'react-native';
 /**
  * Columns Item Interface
  */
@@ -23,3 +24,5 @@ export interface ColumnProps extends AlignableProps, CommonProps {
     fullhdOffset?: ColumnsSize;
     narrow?: boolean;
 }
+export type ColumnRef = HTMLDivElement;
+export type ColumnNativeRef = View;