forstok-ui-lib 6.2.12 → 6.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "6.2.12",
+  "version": "6.3.1",
   "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,108 @@ export const ListTableContainer = styled.div`
   }
 `
 export const ItemTable = styled.section``
+
+const overflowStyle = css`
+  overflow: hidden;
+  > div {
+    overflow: auto;
+  }
+  @media only screen and (min-width: 1024px) {
+    > div {
+      margin: 0px 9px 0px 9px;
+    }
+  }
+`
+const overflowItemTableStyle = css`
+  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;
+        }
+      }
+    }
+  }
+`
 const listTableStyles = {
   item: css`
     ${ItemTable} {
@@ -3486,7 +3589,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';