forstok-ui-lib 6.2.12 → 6.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "6.2.12",
+  "version": "6.3.2",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/javascripts/function.ts

@@ -649,8 +649,8 @@ export const isMobile = () => {
 }
 
 export const evCloseDropdown = (currentTarget: EventTarget & HTMLElement) => {
-  const containerEl = currentTarget.closest('._refContainer') as HTMLElement
-  const isOpen = containerEl ? containerEl.classList.contains('is-shown') : false
+  const containerEl = currentTarget.closest('._refContainer') as HTMLElement;
+  const isOpen = containerEl ? containerEl.classList.contains('is-shown') : false;
   if (isOpen) {
     const containerRefs = document.getElementsByClassName('_refContainer is-shown') as HTMLCollectionOf<HTMLElement>
     if (containerRefs?.length) {

package/src/assets/stylesheets/shares.styles.ts

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { responseWidth, formLabel, elipsis, multiElipsis, headTable, clearList, dropBase, buttonStyle, buttonActiveStyle, buttonHoverStyle } from './bases.styles';
+import { ModeListTableColumn } from '../../typeds';
 
 const initialStyles = css `
   width: 32px;
@@ -2978,6 +2979,7 @@ export const ListTableContainer = styled.div`
   }
 `
 export const ItemTable = styled.section``
+
 const listTableStyles = {
   item: css`
     ${ItemTable} {
@@ -3012,9 +3014,104 @@ const listTableStyles = {
     }
   `,
   quantity: css`
-    ${overflowStyle}
+    overflow: hidden;
+    > div {
+      overflow: auto;
+    }
+    @media only screen and (min-width: 1024px) {
+      > div {
+        margin: 0px 9px 0px 9px;
+      }
+    }
     ${ItemTable} {
-      ${overflowItemTableStyle}
+      width: 100%;
+      display: flex;
+      margin: 0;
+      padding: 0;
+      grid-gap: 0;
+      &[role=rowheader] > div[role=group], 
+      &[role=row] > div[role=group], 
+      &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+      &[role=row] > div[role=cellgroup], 
+      ._refCollapse > div:not(._refCollapseContainer), 
+      ._refCollapseContainer > div {
+        display: flex;
+        flex: 2;
+        grid-gap: 0;
+      }
+      &[role=row] > div[role=cellgroup] {
+        flex-direction: column;
+      }
+      &[role=rowheader] > div[role=columnheader],
+      &[role=rowheader] > div[role=group] > div[role=cell],
+      &[role=row] > div[role=cell],
+      &[role=row] > div[role=cellgroup] > div[role=rowgroup] > div[role=cell],
+      ._refCollapse > div:not(._refCollapseContainer) > div[role=cell],
+      ._refCollapseContainer > div > div[role=cell]  {
+        align-self: stretch;
+        width: 100%;
+      }
+      &[role=rowheader] > div[role=columnheader], 
+      &[role=rowheader] > div[role=group] > div[role=cell] {
+        padding-top: 1em;
+        padding-bottom: 1em;
+        border-bottom: 1px solid var(--ter-clr-ln);
+      }
+      &[role=row] > div[role=cell],
+      &[role=row] > div[role=cellgroup] > div[role=rowgroup] > div[role=cell],
+      ._refCollapse > div:not(._refCollapseContainer) > div[role=cell],
+      ._refCollapseContainer > div > div[role=cell]  {
+        padding-top: 1.25em;
+        padding-bottom: 1.25em;
+      }
+      &[role=rowheader], &[role=row] {
+        padding: 0;
+        margin: 0;
+        > div {
+          padding-right: 12px;
+          &:first-child {
+            padding-left: 0;
+          } 
+          &:last-child {
+            padding-right: 0;
+          }
+        }
+      }
+      &[role=rowheader] > div[role=group] > div[role=cell], &[role=row] > div[role=cellgroup] > div[role=rowgroup] > div[role=cell] {
+        padding-right: 12px;
+        &:last-child {
+
+        }
+      }
+      &[role=rowheader] {
+        border: none;
+      }
+      &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+      ._refCollapse > div, ._refCollapseContainer > div {
+        padding-bottom: 0;
+        padding-top: 0;
+        &:nth-child(n+2) {
+          padding-top: 0;
+        }
+        &:last-child {
+          padding-bottom: 0;
+        }
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+      @media only screen and (min-width: 1024px) {
+        &[role=rowheader], &[role=row] {
+          > div {
+            &:first-child {
+              padding-left: 9px;
+            } 
+            &:last-child {
+              padding-right: 9px;
+            }
+          }
+        }
+      }
       .column-product {
         min-width: calc(var(--item-min) + 25px);
         max-width: calc(var(--item-max) + 25px);
@@ -3321,9 +3418,104 @@ const listTableStyles = {
     }
   `,
   'table-customheader': css`
-    ${overflowStyle}
+      overflow: hidden;
+  > div {
+    overflow: auto;
+  }
+  @media only screen and (min-width: 1024px) {
+    > div {
+      margin: 0px 9px 0px 9px;
+    }
+  }
     ${ItemTable} {
-      ${overflowItemTableStyle}
+      width: 100%;
+      display: flex;
+      margin: 0;
+      padding: 0;
+      grid-gap: 0;
+      &[role=rowheader] > div[role=group], 
+      &[role=row] > div[role=group], 
+      &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+      &[role=row] > div[role=cellgroup], 
+      ._refCollapse > div:not(._refCollapseContainer), 
+      ._refCollapseContainer > div {
+        display: flex;
+        flex: 2;
+        grid-gap: 0;
+      }
+      &[role=row] > div[role=cellgroup] {
+        flex-direction: column;
+      }
+      &[role=rowheader] > div[role=columnheader],
+      &[role=rowheader] > div[role=group] > div[role=cell],
+      &[role=row] > div[role=cell],
+      &[role=row] > div[role=cellgroup] > div[role=rowgroup] > div[role=cell],
+      ._refCollapse > div:not(._refCollapseContainer) > div[role=cell],
+      ._refCollapseContainer > div > div[role=cell]  {
+        align-self: stretch;
+        width: 100%;
+      }
+      &[role=rowheader] > div[role=columnheader], 
+      &[role=rowheader] > div[role=group] > div[role=cell] {
+        padding-top: 1em;
+        padding-bottom: 1em;
+        border-bottom: 1px solid var(--ter-clr-ln);
+      }
+      &[role=row] > div[role=cell],
+      &[role=row] > div[role=cellgroup] > div[role=rowgroup] > div[role=cell],
+      ._refCollapse > div:not(._refCollapseContainer) > div[role=cell],
+      ._refCollapseContainer > div > div[role=cell]  {
+        padding-top: 1.25em;
+        padding-bottom: 1.25em;
+      }
+      &[role=rowheader], &[role=row] {
+        padding: 0;
+        margin: 0;
+        > div {
+          padding-right: 12px;
+          &:first-child {
+            padding-left: 0;
+          } 
+          &:last-child {
+            padding-right: 0;
+          }
+        }
+      }
+      &[role=rowheader] > div[role=group] > div[role=cell], &[role=row] > div[role=cellgroup] > div[role=rowgroup] > div[role=cell] {
+        padding-right: 12px;
+        &:last-child {
+
+        }
+      }
+      &[role=rowheader] {
+        border: none;
+      }
+      &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+      ._refCollapse > div, ._refCollapseContainer > div {
+        padding-bottom: 0;
+        padding-top: 0;
+        &:nth-child(n+2) {
+          padding-top: 0;
+        }
+        &:last-child {
+          padding-bottom: 0;
+        }
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+      @media only screen and (min-width: 1024px) {
+        &[role=rowheader], &[role=row] {
+          > div {
+            &:first-child {
+              padding-left: 9px;
+            } 
+            &:last-child {
+              padding-right: 9px;
+            }
+          }
+        }
+      }
       > *:last-child {
         display: block;
         justify-content: inherit;
@@ -3486,7 +3678,7 @@ export const DropdownAction = styled.div`
 export const FilterList = styled.ul` 
   ${clearList}
 ` 
-rt const FilterItem = styled.li` 
+export const FilterItem = styled.li` 
   &._refCheckbox {
     display: block;
     float: left;

package/src/typeds/shares.typed.ts

@@ -263,4 +263,32 @@ type DispatchWithCallback<A, S> = (
   callback: Callback<S>,
 ) => void;
 
-export type TStateCallback<TData> = DispatchWithCallback<React.SetStateAction<TData>, TData>
+export type TStateCallback<TData> = DispatchWithCallback<React.SetStateAction<TData>, TData>
+
+export type ModeListTableColumn =
+  | 'item'
+  | 'listing'
+  | 'quantity'
+  | 'picklist'
+  | 'package'
+  | 'shipment'
+  | 'invoice'
+  | 'payment-receive'
+  | 'sales-return'
+  | 'activity'
+  | 'putaway'
+  | 'inbound'
+  | 'lowstock'
+  | 'price'
+  | 'stock-adjustment'
+  | 'stock-outbound'
+  | 'stock-transfer'
+  | 'promotion'
+  | 'stock-history'
+  | 'price-history'
+  | 'turnover'
+  | 'days-outofstock'
+  | 'warehouses'
+  | 'archived'
+  | 'order'
+  | 'table-customheader';