forstok-ui-lib 6.3.1 → 6.3.3

package/package.json

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

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

@@ -2980,107 +2980,6 @@ 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} {
@@ -3115,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);
@@ -3424,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;
@@ -3648,7 +3737,7 @@ export const FilterButton = styled.div`
   grid-template-columns: 1fr auto;
   gap: 4px;
 `
-export const IconDot = styled.span<{ $mode?: 'list' | 'header' }>`
+export const IconDot = styled.span<{ $mode?: 'list' | 'header' | 'chat' }>`
   display: grid;
   min-width: 18px;
   height: 18px;
@@ -3674,6 +3763,17 @@ export const IconDot = styled.span<{ $mode?: 'list' | 'header' }>`
       transform: scale(1) translate(50%, -50%);
     `}
   `}
+  ${({ $mode }) => $mode === 'chat' && css`
+    position: absolute;
+    z-index: 8;
+    left: 18px;
+    top: 0;
+    padding: 0.2em 0.3em;
+    font-weight: bold;
+    font-size: 10px;
+    min-width: 16px;
+    height: 16px;
+  `}
 `
 export const SortByWrapper = styled.section`
   justify-self: end;