forstok-ui-lib 8.2.3 → 8.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "8.2.3",
+  "version": "8.3.1",
   "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,39 @@ 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',
+      '&:last-child': {
+        marginBottom: 0,
+      },
       '&: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,39 @@ 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',
+      '&:last-child': {
+        marginBottom: 0,
+      },
       '&: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,40 @@ 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',
+        '&:last-child': {
+          marginBottom: 0,
+        },
         '&: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'