forstok-ui-lib 8.2.3 → 8.3.0

package/package.json

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

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

@@ -3690,7 +3690,7 @@ export const DropdownList = styled.ul<{ $mode?: 'no-border' }>`
     }
   }
   @media only screen and (min-width: 768px) {
-    padding: 4px 8px;
+    padding: 8px;
   }
   @media only screen and (min-width: 1366px) {
     max-height: 50vh;
@@ -3708,6 +3708,15 @@ export const DropdownItem = styled.li<{ $mode?: 'common' | 'categories', $isActi
     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;
@@ -3723,18 +3732,21 @@ export const DropdownItem = styled.li<{ $mode?: 'common' | 'categories', $isActi
     }
   `}
   ${({ $mode }) => $mode === 'common' && css`
-    margin-top: .125rem;
-    margin-bottom: .125rem;
+    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;
@@ -3756,7 +3768,6 @@ export const DropdownItem = styled.li<{ $mode?: 'common' | 'categories', $isActi
   `}
   ${({ $mode, $isActive }) => ($mode === 'common' && $isActive) && css`
     background-color: var(--nav-clr-bg__hvr);
-    border-radius: var(--nav-rd);
     padding-right: 1.75em;
     &, > label, > span {
       font-weight: 500;
@@ -4456,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;
@@ -4688,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/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'