@itcase/ui-web 1.10.16 → 1.10.18

package/dist/cjs/components/Grid.js

@@ -1 +1 @@
-"use strict";var s=require("react/jsx-runtime"),i=require("clsx"),r=require("@itcase/ui-core/hooks");exports.Grid=function(l){const{id:t,className:e,dataTestId:a,dataTour:o,type:d,horizontalResizing:n,horizontalScroll:_,print:c,tag:g="div",useGridSystem:C,verticalResizing:u,before:m,after:$,onClick:h,onDoubleClick:p,children:f}=l,w=r.useDevicePropsGenerator(l),{justifyContentClass:y,justifyItemsClass:v,alignContentClass:j,alignItemsClass:G,fillClass:S,fillHoverClass:x,borderColorClass:b,columnGapClass:k,columnsClass:z,heightClass:N,rowGapClass:I,rowsClass:T,widthClass:D}=w,{styles:q}=r.useStyles(l);return s.jsxs(g,{id:t,className:i(e,"grid",D&&`width_${D}`,N&&`height_${N}`,C&&"grid_state_system",_&&"grid_scroll_horizontal",d&&`grid_type_${d}`,z&&`grid_columns_${z}`,T&&`grid_rows_${T}`,I&&`grid_row-gap_${I}`,k&&`grid_column-gap_${k}`,j&&`grid_align-content_${j}`,G&&`grid_align-items_${G}`,b&&`border-color_${b}`,y&&`grid_justify-content_${y}`,v&&`grid_justify-items_${v}`,S&&`fill_${S}`,x&&`fill_hover_${x}`,n&&`grid_horizontal-resizing_${n}`,u&&`grid_vertical-resizing_${u}`,!c&&"no-print",c&&"print"),"data-testid":a,"data-tour":o,style:q,onClick:h,onDoubleClick:p,children:[m&&s.jsx("div",{className:"grid__before",children:m}),f,$&&s.jsx("div",{className:"grid__after",children:$})]})},exports.GridItem=function(l){const{id:t,className:e,dataTestId:a,dataTour:o,print:d,style:n,onClick:_,children:c}=l,g=r.useDevicePropsGenerator(l),{directionClass:C,justifySelfClass:u,alignSelfClass:m,fillClass:$,fillHoverClass:h,columnEndClass:p,columnGapClass:f,columnSpanClass:w,columnStartClass:y,gapClass:v,heightClass:j,orderClass:G,rowEndClass:S,rowGapClass:x,rowSpanClass:b,rowStartClass:k,widthClass:z}=g,{styles:N}=r.useStyles(l);return s.jsx("div",{id:t,className:i(e,"grid__item",G&&`order_${G}`,$&&`fill_${$}`,h&&`fill_hover_${h}`,m&&`grid__item_align-self_${m}`,u&&`grid__item_justify-self_${u}`,y&&`grid__item_column-start_${y}`,p&&`grid__item_column-end_${p}`,w&&`grid__item_column-span_${w}`,k&&`grid__item_row-start_${k}`,S&&`grid__item_row-end_${S}`,b&&`grid__item_row-span_${b}`,C&&`direction_${C}`,v&&`gap_${v}`,z&&`width_${z}`,j&&`height_${j}`,x&&`row-gap_${x}`,!d&&"no-print",d&&"print",f&&`column-gap_${f}`),"data-testid":a,"data-tour":o,style:Object.assign({},N,n),onClick:_,children:c})},exports.GridRow=function(l){const{id:t,className:e,dataTestId:a,dataTour:o,dataId:d,htmlFor:n,print:_,tag:c="div",onClick:g,children:C}=l,u=r.useDevicePropsGenerator(l),{fillClass:m,fillHoverClass:$,borderColorClass:h,heightClass:p,widthClass:f}=u,{styles:w}=r.useStyles(l);return s.jsx(c,{id:t,className:i(e,"grid__row",f&&`width_${f}`,p&&`height_${p}`,m&&`fill_${m}`,$&&`fill_hover_${$}`,!_&&"no-print",_&&"print",h&&`border-color_${h}`),"data-id":d,"data-testid":a,"data-tour":o,htmlFor:n,style:w,onClick:g,children:C})};
+"use strict";var s=require("react/jsx-runtime"),i=require("clsx"),r=require("@itcase/ui-core/hooks");exports.Grid=function(t){const{id:l,className:e,dataTestId:a,dataTour:o,type:d,horizontalResizing:n,horizontalScroll:_,print:c,tag:g="div",useGridSystem:C,verticalResizing:u,before:m,after:$,onClick:h,onDoubleClick:p,children:f}=t,w=r.useDevicePropsGenerator(t),{directionClass:y,justifyContentClass:v,justifyItemsClass:j,alignContentClass:G,alignItemsClass:S,fillClass:x,fillHoverClass:b,borderColorClass:k,columnGapClass:z,columnsClass:N,heightClass:I,rowGapClass:T,rowsClass:D,widthClass:q}=w,{styles:H}=r.useStyles(t);return s.jsxs(g,{id:l,className:i(e,"grid",q&&`width_${q}`,I&&`height_${I}`,C&&"grid_state_system",y&&`grid_direction_${y}`,_&&"grid_scroll_horizontal",d&&`grid_type_${d}`,N&&`grid_columns_${N}`,D&&`grid_rows_${D}`,T&&`grid_row-gap_${T}`,z&&`grid_column-gap_${z}`,G&&`grid_align-content_${G}`,S&&`grid_align-items_${S}`,k&&`border-color_${k}`,v&&`grid_justify-content_${v}`,j&&`grid_justify-items_${j}`,x&&`fill_${x}`,b&&`fill_hover_${b}`,n&&`grid_horizontal-resizing_${n}`,u&&`grid_vertical-resizing_${u}`,!c&&"no-print",c&&"print"),"data-testid":a,"data-tour":o,style:H,onClick:h,onDoubleClick:p,children:[m&&s.jsx("div",{className:"grid__before",children:m}),f,$&&s.jsx("div",{className:"grid__after",children:$})]})},exports.GridItem=function(t){const{id:l,className:e,dataTestId:a,dataTour:o,print:d,style:n,onClick:_,children:c}=t,g=r.useDevicePropsGenerator(t),{directionClass:C,justifySelfClass:u,alignSelfClass:m,fillClass:$,fillHoverClass:h,columnEndClass:p,columnGapClass:f,columnSpanClass:w,columnStartClass:y,gapClass:v,heightClass:j,orderClass:G,rowEndClass:S,rowGapClass:x,rowSpanClass:b,rowStartClass:k,widthClass:z}=g,{styles:N}=r.useStyles(t);return s.jsx("div",{id:l,className:i(e,"grid__item",G&&`order_${G}`,$&&`fill_${$}`,h&&`fill_hover_${h}`,m&&`grid__item_align-self_${m}`,u&&`grid__item_justify-self_${u}`,y&&`grid__item_column-start_${y}`,p&&`grid__item_column-end_${p}`,w&&`grid__item_column-span_${w}`,k&&`grid__item_row-start_${k}`,S&&`grid__item_row-end_${S}`,b&&`grid__item_row-span_${b}`,C&&`direction_${C}`,v&&`gap_${v}`,z&&`width_${z}`,j&&`height_${j}`,x&&`row-gap_${x}`,!d&&"no-print",d&&"print",f&&`column-gap_${f}`),"data-testid":a,"data-tour":o,style:Object.assign({},N,n),onClick:_,children:c})},exports.GridRow=function(t){const{id:l,className:e,dataTestId:a,dataTour:o,dataId:d,htmlFor:n,print:_,tag:c="div",onClick:g,children:C}=t,u=r.useDevicePropsGenerator(t),{fillClass:m,fillHoverClass:$,borderColorClass:h,heightClass:p,widthClass:f}=u,{styles:w}=r.useStyles(t);return s.jsx(c,{id:l,className:i(e,"grid__row",f&&`width_${f}`,p&&`height_${p}`,m&&`fill_${m}`,$&&`fill_hover_${$}`,!_&&"no-print",_&&"print",h&&`border-color_${h}`),"data-id":d,"data-testid":a,"data-tour":o,htmlFor:n,style:w,onClick:g,children:C})};

package/dist/components/Grid.js

@@ -1 +1 @@
-import{jsxs as i,jsx as s}from"react/jsx-runtime";import l from"clsx";import{useDevicePropsGenerator as t,useStyles as r}from"@itcase/ui-core/hooks";function a(a){const{id:e,className:o,dataTestId:_,dataTour:d,type:n,horizontalResizing:c,horizontalScroll:g,print:C,tag:m="div",useGridSystem:$,verticalResizing:h,before:u,after:f,onClick:p,onDoubleClick:w,children:y}=a,v=t(a),{justifyContentClass:b,justifyItemsClass:k,alignContentClass:j,alignItemsClass:z,fillClass:N,fillHoverClass:S,borderColorClass:I,columnGapClass:T,columnsClass:G,heightClass:x,rowGapClass:H,rowsClass:D,widthClass:E}=v,{styles:F}=r(a);return i(m,{id:e,className:l(o,"grid",E&&`width_${E}`,x&&`height_${x}`,$&&"grid_state_system",g&&"grid_scroll_horizontal",n&&`grid_type_${n}`,G&&`grid_columns_${G}`,D&&`grid_rows_${D}`,H&&`grid_row-gap_${H}`,T&&`grid_column-gap_${T}`,j&&`grid_align-content_${j}`,z&&`grid_align-items_${z}`,I&&`border-color_${I}`,b&&`grid_justify-content_${b}`,k&&`grid_justify-items_${k}`,N&&`fill_${N}`,S&&`fill_hover_${S}`,c&&`grid_horizontal-resizing_${c}`,h&&`grid_vertical-resizing_${h}`,!C&&"no-print",C&&"print"),"data-testid":_,"data-tour":d,style:F,onClick:p,onDoubleClick:w,children:[u&&s("div",{className:"grid__before",children:u}),y,f&&s("div",{className:"grid__after",children:f})]})}function e(i){const{id:a,className:e,dataTestId:o,dataTour:_,print:d,style:n,onClick:c,children:g}=i,C=t(i),{directionClass:m,justifySelfClass:$,alignSelfClass:h,fillClass:u,fillHoverClass:f,columnEndClass:p,columnGapClass:w,columnSpanClass:y,columnStartClass:v,gapClass:b,heightClass:k,orderClass:j,rowEndClass:z,rowGapClass:N,rowSpanClass:S,rowStartClass:I,widthClass:T}=C,{styles:G}=r(i);return s("div",{id:a,className:l(e,"grid__item",j&&`order_${j}`,u&&`fill_${u}`,f&&`fill_hover_${f}`,h&&`grid__item_align-self_${h}`,$&&`grid__item_justify-self_${$}`,v&&`grid__item_column-start_${v}`,p&&`grid__item_column-end_${p}`,y&&`grid__item_column-span_${y}`,I&&`grid__item_row-start_${I}`,z&&`grid__item_row-end_${z}`,S&&`grid__item_row-span_${S}`,m&&`direction_${m}`,b&&`gap_${b}`,T&&`width_${T}`,k&&`height_${k}`,N&&`row-gap_${N}`,!d&&"no-print",d&&"print",w&&`column-gap_${w}`),"data-testid":o,"data-tour":_,style:Object.assign({},G,n),onClick:c,children:g})}function o(i){const{id:a,className:e,dataTestId:o,dataTour:_,dataId:d,htmlFor:n,print:c,tag:g="div",onClick:C,children:m}=i,$=t(i),{fillClass:h,fillHoverClass:u,borderColorClass:f,heightClass:p,widthClass:w}=$,{styles:y}=r(i);return s(g,{id:a,className:l(e,"grid__row",w&&`width_${w}`,p&&`height_${p}`,h&&`fill_${h}`,u&&`fill_hover_${u}`,!c&&"no-print",c&&"print",f&&`border-color_${f}`),"data-id":d,"data-testid":o,"data-tour":_,htmlFor:n,style:y,onClick:C,children:m})}export{a as Grid,e as GridItem,o as GridRow};
+import{jsxs as i,jsx as s}from"react/jsx-runtime";import l from"clsx";import{useDevicePropsGenerator as t,useStyles as r}from"@itcase/ui-core/hooks";function a(a){const{id:e,className:o,dataTestId:_,dataTour:d,type:n,horizontalResizing:c,horizontalScroll:g,print:C,tag:m="div",useGridSystem:$,verticalResizing:h,before:u,after:f,onClick:p,onDoubleClick:w,children:y}=a,v=t(a),{directionClass:b,justifyContentClass:k,justifyItemsClass:j,alignContentClass:z,alignItemsClass:N,fillClass:S,fillHoverClass:I,borderColorClass:T,columnGapClass:G,columnsClass:x,heightClass:H,rowGapClass:D,rowsClass:E,widthClass:F}=v,{styles:R}=r(a);return i(m,{id:e,className:l(o,"grid",F&&`width_${F}`,H&&`height_${H}`,$&&"grid_state_system",b&&`grid_direction_${b}`,g&&"grid_scroll_horizontal",n&&`grid_type_${n}`,x&&`grid_columns_${x}`,E&&`grid_rows_${E}`,D&&`grid_row-gap_${D}`,G&&`grid_column-gap_${G}`,z&&`grid_align-content_${z}`,N&&`grid_align-items_${N}`,T&&`border-color_${T}`,k&&`grid_justify-content_${k}`,j&&`grid_justify-items_${j}`,S&&`fill_${S}`,I&&`fill_hover_${I}`,c&&`grid_horizontal-resizing_${c}`,h&&`grid_vertical-resizing_${h}`,!C&&"no-print",C&&"print"),"data-testid":_,"data-tour":d,style:R,onClick:p,onDoubleClick:w,children:[u&&s("div",{className:"grid__before",children:u}),y,f&&s("div",{className:"grid__after",children:f})]})}function e(i){const{id:a,className:e,dataTestId:o,dataTour:_,print:d,style:n,onClick:c,children:g}=i,C=t(i),{directionClass:m,justifySelfClass:$,alignSelfClass:h,fillClass:u,fillHoverClass:f,columnEndClass:p,columnGapClass:w,columnSpanClass:y,columnStartClass:v,gapClass:b,heightClass:k,orderClass:j,rowEndClass:z,rowGapClass:N,rowSpanClass:S,rowStartClass:I,widthClass:T}=C,{styles:G}=r(i);return s("div",{id:a,className:l(e,"grid__item",j&&`order_${j}`,u&&`fill_${u}`,f&&`fill_hover_${f}`,h&&`grid__item_align-self_${h}`,$&&`grid__item_justify-self_${$}`,v&&`grid__item_column-start_${v}`,p&&`grid__item_column-end_${p}`,y&&`grid__item_column-span_${y}`,I&&`grid__item_row-start_${I}`,z&&`grid__item_row-end_${z}`,S&&`grid__item_row-span_${S}`,m&&`direction_${m}`,b&&`gap_${b}`,T&&`width_${T}`,k&&`height_${k}`,N&&`row-gap_${N}`,!d&&"no-print",d&&"print",w&&`column-gap_${w}`),"data-testid":o,"data-tour":_,style:Object.assign({},G,n),onClick:c,children:g})}function o(i){const{id:a,className:e,dataTestId:o,dataTour:_,dataId:d,htmlFor:n,print:c,tag:g="div",onClick:C,children:m}=i,$=t(i),{fillClass:h,fillHoverClass:u,borderColorClass:f,heightClass:p,widthClass:w}=$,{styles:y}=r(i);return s(g,{id:a,className:l(e,"grid__row",w&&`width_${w}`,p&&`height_${p}`,h&&`fill_${h}`,u&&`fill_hover_${u}`,!c&&"no-print",c&&"print",f&&`border-color_${f}`),"data-id":d,"data-testid":o,"data-tour":_,htmlFor:n,style:y,onClick:C,children:m})}export{a as Grid,e as GridItem,o as GridRow};

package/dist/css/styles/bundles.css

@@ -61612,6 +61612,9 @@ h2.react-datepicker__current-month {
     backdrop-filter: var(--drawer-overlay-filter) !important;
   }
   &__content {
+    display: flex;
+    flex: 1;
+    flex-flow: column nowrap;
   }
   &__close {
     padding: 3m 3m 0 3m;
@@ -64021,6 +64024,90 @@ h2.react-datepicker__current-month {
     }
   }
 }
+.grid {
+  &_direction {
+    &_horizontal {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      &.print {
+        @media print {
+          display: flex;
+        }
+      }
+      &-reverse {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: flex-start;
+        &.print {
+          @media print {
+            display: flex;
+          }
+        }
+      }
+    }
+    &_vertical {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      &.print {
+        @media print {
+          display: flex;
+        }
+      }
+      &-reverse {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: flex-start;
+        &.print {
+          @media print {
+            display: flex;
+          }
+        }
+      }
+    }
+      &_row {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        &.print {
+          @media print {
+            display: flex;
+          }
+        }
+      }
+      &_row-reverse {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: flex-start;
+        &.print {
+          @media print {
+            display: flex;
+          }
+        }
+      }
+      &_column {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        &.print {
+          @media print {
+            display: flex;
+          }
+        }
+      }
+      &_column-reverse {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: flex-start;
+        &.print {
+          @media print {
+            display: flex;
+          }
+        }
+      }
+  }
+}
 .grid {
   &&_vertical-resizing {
     &_fill {

package/dist/types/components/Grid/Grid.js

@@ -4,8 +4,8 @@ import { useDevicePropsGenerator, useStyles } from '@itcase/ui-core/hooks';
 function Grid(props) {
     const { id, className, dataTestId, dataTour, type, horizontalResizing, horizontalScroll, print, tag: Tag = 'div', useGridSystem, verticalResizing, before, after, onClick, onDoubleClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator(props);
-    const { justifyContentClass, justifyItemsClass, alignContentClass, alignItemsClass, fillClass, fillHoverClass, borderColorClass, columnGapClass, columnsClass, heightClass, rowGapClass, rowsClass, widthClass, } = propsGenerator;
+    const { directionClass, justifyContentClass, justifyItemsClass, alignContentClass, alignItemsClass, fillClass, fillHoverClass, borderColorClass, columnGapClass, columnsClass, heightClass, rowGapClass, rowsClass, widthClass, } = propsGenerator;
     const { styles: gridStyles } = useStyles(props);
-    return (_jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass && `grid_columns_${columnsClass}`, rowsClass && `grid_rows_${rowsClass}`, rowGapClass && `grid_row-gap_${rowGapClass}`, columnGapClass && `grid_column-gap_${columnGapClass}`, alignContentClass && `grid_align-content_${alignContentClass}`, alignItemsClass && `grid_align-items_${alignItemsClass}`, borderColorClass && `border-color_${borderColorClass}`, justifyContentClass && `grid_justify-content_${justifyContentClass}`, justifyItemsClass && `grid_justify-items_${justifyItemsClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`, !print && 'no-print', print && 'print'), "data-testid": dataTestId, "data-tour": dataTour, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before && _jsx("div", { className: "grid__before", children: before }), children, after && _jsx("div", { className: "grid__after", children: after })] }));
+    return (_jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, useGridSystem && `grid_state_system`, directionClass && `grid_direction_${directionClass}`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass && `grid_columns_${columnsClass}`, rowsClass && `grid_rows_${rowsClass}`, rowGapClass && `grid_row-gap_${rowGapClass}`, columnGapClass && `grid_column-gap_${columnGapClass}`, alignContentClass && `grid_align-content_${alignContentClass}`, alignItemsClass && `grid_align-items_${alignItemsClass}`, borderColorClass && `border-color_${borderColorClass}`, justifyContentClass && `grid_justify-content_${justifyContentClass}`, justifyItemsClass && `grid_justify-items_${justifyItemsClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`, !print && 'no-print', print && 'print'), "data-testid": dataTestId, "data-tour": dataTour, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before && _jsx("div", { className: "grid__before", children: before }), children, after && _jsx("div", { className: "grid__after", children: after })] }));
 }
 export { Grid };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui-web",
-  "version": "1.10.16",
+  "version": "1.10.18",
   "description": "UI components",
   "keywords": "",
   "license": "MIT",
@@ -116,5 +116,5 @@
     "storybook": "^10.4.1",
     "typescript": "^6.0.3"
   },
-  "gitHead": "1eb5eb5df8920ebc7004f73bf60173158640bd13"
+  "gitHead": "60caa3c47e25c3b96ee0540a91547595c9ab7aed"
 }