forstok-ui-lib 8.2.2 → 8.3.0

package/package.json

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

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

@@ -3678,31 +3678,45 @@ export const DropdownTitle = styled.div`
     font-style: normal; 
   }
 `
+
 export const DropdownList = styled.ul<{ $mode?: 'no-border' }>` 
   ${clearList}
   max-height: 44vh;
   overflow: auto;
   > li {
-    padding: 8px 1em;
     border-bottom: ${({ $mode }:{ $mode?: 'no-border' }) => $mode === 'no-border' ? 'none' : '1px solid var(--pri-clr-ln)'};
     &:last-child {
       border-bottom: 0;
     }
   }
+  @media only screen and (min-width: 768px) {
+    padding: 8px;
+  }
   @media only screen and (min-width: 1366px) {
     max-height: 50vh;
   }
 `
-export const DropdownItem = styled.li<{ $mode?: 'categories' }>` 
+export const DropdownItem = styled.li<{ $mode?: 'common' | 'categories', $isActive?: boolean, $isReply?: boolean }>` 
   display: inline-grid;
   width: 100%;
   grid-gap: 10px; 
   min-height: 48px;
   grid-auto-flow: row;
+  cursor: pointer;
+  position: relative;
   @media only screen and (min-width: 768px) {
     grid-auto-flow: column;
     grid-template-columns: 100px auto;
   }
+  ${({ $mode }) => !$mode && css`
+    padding: 8px .5em;
+    &:first-child {
+      padding-top: 4px;
+    }
+    &:last-child {
+      padding-bottom: 4px;
+    }
+  `}
   ${({ $mode }) => $mode === 'categories' && css`
     grid-auto-flow: column;
     grid-template-columns: 22px auto;
@@ -3717,6 +3731,61 @@ export const DropdownItem = styled.li<{ $mode?: 'categories' }>`
       grid-template-columns: 22px auto;
     }
   `}
+  ${({ $mode }) => $mode === 'common' && css`
+    margin-bottom: 4px;
+    color: var(--pri-clr);
+    line-height: 20px;
+    align-items: center;
+    padding: .5rem .75rem;
+    display: block;
+    min-height: auto;
+    border-radius: var(--nav-rd);
+    &:hover {
+      background-color: var(--nav-clr-bg__hvr);
+      border-radius: var(--nav-rd);
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+    > label, > span {
+      cursor: pointer;
+      text-transform: capitalize;
+      width: 100%;
+      max-width: 218px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: block;
+    }
+  `}
+  ${({ $mode, $isReply }) => ($mode === 'common' && $isReply) && css`
+    padding-right: 1.825rem !important;
+    ._refReplyIcon {
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  `}
+  ${({ $mode, $isActive }) => ($mode === 'common' && $isActive) && css`
+    background-color: var(--nav-clr-bg__hvr);
+    padding-right: 1.75em;
+    &, > label, > span {
+      font-weight: 500;
+    }
+    &:after {
+      content: '✔';
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 7px;
+      bottom: 0;
+      width: 12px;
+      height: 20px;
+    }
+    ._refReplyIcon {
+      right: 22px;
+    }
+  `}
 `
 export const DropdownAction = styled.div` 
   padding: .8em 1em 1em;
@@ -4398,8 +4467,8 @@ export const NavChildItem = styled.div<{ $activated?: boolean, $mode?: 'counter'
   position: relative;
   grid-gap: 6px;
   margin-left: 1.5rem;
-  margin-top: .125rem;
-  margin-bottom: .125rem;
+  margin-top: 0;
+  margin-bottom: 4px;
   padding-top: .25rem;
   padding-bottom: .25rem;
   padding-left: .5rem;
@@ -4630,19 +4699,23 @@ export const ItemQtyLabel = styled.span`
   display: grid;
 `
 
-export const APILabel = styled.label`
-  color: var(--act-clr);
+export const OptCustomLabel = styled.label<{$mode?: string}>`
   font-size: 10px;
-  text-transform: uppercase;
+  text-transform: capitalize;
   letter-spacing: .5px;
   padding: 3px 5px;
-  background-color: #21BA45;
   display: block;
   position: absolute;
   right: 10px;
-  top: 12px;
+  top: 50%;
+  transform: translateY(-50%);
   z-index: 1;
-  border-radius: var(--ter-rd);
+  background-color: #EFEFEF;
+  border-radius: var(--nav-rd);
+  color: var(--pri-clr);
+  ${({ $mode }) => $mode === 'label' && css`
+    transform: translateY(0);
+  `}
 `
 
 export const TableContentWrapper = styled.div<{ $mode?: 'package' }>`

package/src/components/image/channel.tsx

@@ -1,6 +1,6 @@
 import Image from '.'
 
-import { InitialContainer, APILabel } from '../../assets/stylesheets/shares.styles'
+import { InitialContainer, OptCustomLabel } from '../../assets/stylesheets/shares.styles'
 import LinkComponent from '../link';
 
 import { ImageMode } from './typed'
@@ -89,7 +89,7 @@ const ImageChannelComponent = (props: TImage) => {
         ) : (
           <span className='multi-elipsis' title={defName}>
             {defName}
-            {isAPI && <APILabel className='_refLabel'>API</APILabel>}
+            {isAPI && <OptCustomLabel className='_refLabel'>API</OptCustomLabel>}
           </span>
         )
       )}

package/src/components/radio/styles.ts

@@ -45,7 +45,15 @@ export const RadioSpan = styled.span<{ $mode?: string }>`
           border: none;
         }
       `
-    }
+    } else if ($mode === 'sort') {
+      return css` 
+        padding-left: 0;
+        &:before, 
+        &:after {
+          border: none;
+        }
+      `
+    } 
   }}  
 `
 
@@ -80,6 +88,20 @@ export const RadioInput = styled.input<{ $mode?: string }>`
           }
         }
       `
+    } else if ($mode === 'sort') {
+      return css`  
+        &:checked + ${RadioSpan} {
+          &:before, 
+          &:after {
+            border: none;
+            transform: none;
+            background: none;
+          }
+          &:before {
+            width: 14px;
+          }
+        }
+      `
     }
   }}
 `

package/src/components/select/all.tsx

@@ -153,16 +153,36 @@ const SelectAllComponent = (props: TSelect) => {
     } as CSSObjectWithLabel),
     option: (provided: CSSObject, state: { isSelected: any }) => ({
       ...provided,
-      color: state.isSelected ? '#ffffff' : '#000000',
-      backgroundColor: state.isSelected ? '#fc5c64' : 'transparent',
+      width: '100%',
+      margin: '0 0 4px',
+      color: 'var(--pri-clr)',
+      borderRadius: 'var(--nav-rd)',
+      backgroundColor: state.isSelected  ? 'var(--nav-clr-bg__hvr)' : 'transparent',
       cursor: 'pointer',
+      overflowWrap: 'break-word',
+      wordBreak: 'break-all',
+      fontWeight:  state.isSelected ? 500 : 'normal',
+      position: 'relative',
       '&:hover': {
-        backgroundColor: '#ec5b62',
-        color: '#ffffff'
-      }
+        backgroundColor: 'var(--nav-clr-bg__hvr)',
+      },
+      ...(state.isSelected && {
+        paddingRight: '1.75em',
+        '&:after': {
+          content: '"✔"',
+          position: 'absolute',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          right: '7px',
+          bottom: '0',
+          width: '12px',
+          height: '20px'
+        }
+      })
     } as CSSObjectWithLabel),
     menu: (provided: CSSObject) => ({
       ...provided,
+      padding: '8px',
       borderRadius: '.75rem',
       boxShadow: '0rem .5rem 1.5rem -.5rem rgba(0, 0, 0, .05), 0rem .5rem 1rem -.25rem rgba(0, 0, 0, .05), 0rem .1875rem .375rem 0rem rgba(0, 0, 0, .05), 0rem .125rem .25rem 0rem rgba(0, 0, 0, .05), 0rem .0625rem .125rem 0rem rgba(0, 0, 0, .05), 0rem 0rem 0rem .0625rem rgba(0, 0, 0, .06)',
       border: 'none'

package/src/components/select/asyncPaginate.tsx

@@ -182,16 +182,36 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
     } as CSSObjectWithLabel),
     option: (provided: CSSObject, state: OptionProps<TOption, boolean>) => ({
       ...provided,
-      color: state.isSelected ? '#ffffff' : '#000000',
-      backgroundColor: state.isSelected || state.isFocused ? '#fc5c64' : 'transparent',
+      width: '100%',
+      margin: '0 0 4px',
+      color: 'var(--pri-clr)',
+      borderRadius: 'var(--nav-rd)',
+      backgroundColor: state.isSelected || state.isFocused ? 'var(--nav-clr-bg__hvr)' : 'transparent',
       cursor: 'pointer',
+      overflowWrap: 'break-word',
+      wordBreak: 'break-all',
+      fontWeight:  state.isSelected ? 500 : 'normal',
+      position: 'relative',
       '&:hover': {
-        backgroundColor: '#ec5b62',
-        color: '#ffffff'
-      }
+        backgroundColor: 'var(--nav-clr-bg__hvr)',
+      },
+      ...(state.isSelected && {
+        paddingRight: '1.75em',
+        '&:after': {
+          content: '"✔"',
+          position: 'absolute',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          right: '7px',
+          bottom: '0',
+          width: '12px',
+          height: '20px'
+        }
+      })
     } as CSSObjectWithLabel), 
     menu: (provided: CSSObject) => ({
       ...provided,
+      padding: '8px',
       borderRadius: '.75rem',
       boxShadow: '0rem .5rem 1.5rem -.5rem rgba(0, 0, 0, .05), 0rem .5rem 1rem -.25rem rgba(0, 0, 0, .05), 0rem .1875rem .375rem 0rem rgba(0, 0, 0, .05), 0rem .125rem .25rem 0rem rgba(0, 0, 0, .05), 0rem .0625rem .125rem 0rem rgba(0, 0, 0, .05), 0rem 0rem 0rem .0625rem rgba(0, 0, 0, .06)',
       border: 'none'

package/src/components/select/index.tsx

@@ -249,19 +249,37 @@ const SelectComponent = ({ type, isError=false, mode, customOption, customLabel,
     option: (provided: CSSObject, state: OptionProps<TOption, typeof isMulti>) => ({
       ...provided,
       ...(!state.isDisabled && {
-        color: state.isSelected ? '#ffffff' : '#000000',
-        backgroundColor: state.isSelected || state.isFocused ? '#fc5c64' : 'transparent',
+        width: '100%',
+        margin: '0 0 4px',
+        color: 'var(--pri-clr)',
+        borderRadius: 'var(--nav-rd)',
+        backgroundColor: state.isSelected || state.isFocused ? 'var(--nav-clr-bg__hvr)' : 'transparent',
         cursor: 'pointer',
         overflowWrap: 'break-word',
         wordBreak: 'break-all',
+        fontWeight:  state.isSelected ? 500 : 'normal',
+        position: 'relative',
         '&:hover': {
-          backgroundColor: '#ec5b62',
-          color: '#ffffff'
+          backgroundColor: 'var(--nav-clr-bg__hvr)',
+        }
+      }),
+      ...(state.isSelected && {
+        paddingRight: '1.75em',
+        '&:after': {
+          content: '"✔"',
+          position: 'absolute',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          right: '7px',
+          bottom: '0',
+          width: '12px',
+          height: '20px'
         }
       })
     } as CSSObjectWithLabel),
     menu: (provided: CSSObject) => ({
       ...provided,
+      padding: '8px',
       borderRadius: '.75rem',
       boxShadow: '0rem .5rem 1.5rem -.5rem rgba(0, 0, 0, .05), 0rem .5rem 1rem -.25rem rgba(0, 0, 0, .05), 0rem .1875rem .375rem 0rem rgba(0, 0, 0, .05), 0rem .125rem .25rem 0rem rgba(0, 0, 0, .05), 0rem .0625rem .125rem 0rem rgba(0, 0, 0, .05), 0rem 0rem 0rem .0625rem rgba(0, 0, 0, .06)',
       border: 'none'