forstok-ui-lib 8.3.1 → 8.3.3

package/package.json

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

package/src/components/select/all.tsx

@@ -151,24 +151,26 @@ const SelectAllComponent = (props: TSelect) => {
       letterSpacing: 'normal',
       lineHeight: 'normal',
     } as CSSObjectWithLabel),
-    option: (provided: CSSObject, state: { isSelected: any }) => ({
+    option: (provided: CSSObject, state: { isSelected: any, isDisabled: any, isFocused: any }) => ({
       ...provided,
       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',
+      backgroundColor: state.isSelected || state.isFocused ? 'var(--nav-clr-bg__hvr)' : 'transparent',
       '&:last-child': {
         marginBottom: 0,
       },
-      '&:hover': {
-        backgroundColor: 'var(--nav-clr-bg__hvr)',
-      },
+      ...(!state.isDisabled && {
+        color: 'var(--pri-clr)',
+        fontWeight:  state.isSelected ? 500 : 'normal',
+        '&:hover': {
+          backgroundColor: 'var(--nav-clr-bg__hvr)',
+        },
+      }),
       ...(state.isSelected && {
         paddingRight: '1.75em',
         '&:after': {

package/src/components/select/asyncPaginate.tsx

@@ -184,20 +184,22 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
       ...provided,
       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',
+      backgroundColor: state.isSelected || state.isFocused ? 'var(--nav-clr-bg__hvr)' : 'transparent',
       '&:last-child': {
         marginBottom: 0,
       },
-      '&:hover': {
-        backgroundColor: 'var(--nav-clr-bg__hvr)',
-      },
+      ...(!state.isDisabled && {
+        color: 'var(--pri-clr)',
+        fontWeight:  state.isSelected ? 500 : 'normal',
+        '&:hover': {
+          backgroundColor: 'var(--nav-clr-bg__hvr)',
+        },
+      }),
       ...(state.isSelected && {
         paddingRight: '1.75em',
         '&:after': {

package/src/components/select/index.tsx

@@ -248,23 +248,23 @@ const SelectComponent = ({ type, isError=false, mode, customOption, customLabel,
     } as CSSObjectWithLabel),
     option: (provided: CSSObject, state: OptionProps<TOption, typeof isMulti>) => ({
       ...provided,
+      width: '100%',
+      margin: '0 0 4px',
+      borderRadius: 'var(--nav-rd)',
+      cursor: 'pointer',
+      overflowWrap: 'break-word',
+      wordBreak: 'break-all',
+      position: 'relative',
+      backgroundColor: state.isSelected || state.isFocused ? 'var(--nav-clr-bg__hvr)' : 'transparent',
+      '&:last-child': {
+        marginBottom: 0,
+      },
       ...(!state.isDisabled && {
-        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: 'var(--nav-clr-bg__hvr)',
-        }
+        },
       }),
       ...(state.isSelected && {
         paddingRight: '1.75em',

package/src/components/select/typed.ts

@@ -1,6 +1,7 @@
 import type { ActionMeta, OnChangeValue, SingleValueProps } from 'react-select';
 import type { OptionProps, GroupBase, StylesConfig, CSSObjectWithLabel, ControlProps, ValueContainerProps, MultiValueProps, MultiValue, OptionsOrGroups, MenuListProps } from 'react-select';
-import { CSSObject } from '@emotion/serialize'
+import type { Moment } from 'moment';
+import type { CSSObject } from '@emotion/serialize'
 import type { TChannel } from '../../typeds/shares.typed';
 import type { TState } from '../../typeds';
 
@@ -30,6 +31,7 @@ export type TOption = {
   postalCode?: string
   localId?: string
   isDisabled?: boolean | null
+  momentValue?: Moment[]
   option?: {
     readonly value: any
     readonly label: string