@itcase/ui 1.1.11 → 1.1.14

package/dist/cjs/components/Cell/Cell.interface.d.ts

@@ -31,7 +31,7 @@ export interface ICellProps extends TypeStyleAttributes {
     titleTag?: ElementType;
     titleTextColor?: textColorPropsType;
     titleTextSize?: textSizePropsType;
-    titleTextTruncate?: string;
+    titleTextTruncate?: boolean;
     titleTextWeight?: textWeightPropsType;
     titleTextWrap?: textWrapPropsType;
     value?: string;

package/dist/cjs/components/Select.js

@@ -53,17 +53,38 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var Select__default = /*#__PURE__*/_interopDefault(Select$1);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-const SelectClearIndicator = props => {
+// For use memo need to check "ClearIndicator" props
+// const SelectClearIndicator = React.memo(
+function SelectClearIndicator(props) {
+  const {
+    children
+  } = props;
   const {
     clearIcon,
     clearIconFill
   } = props.selectProps;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.ClearIndicator, props, clearIcon ? /*#__PURE__*/React__namespace.default.createElement(Icon.Icon, {
-    SvgImage: clearIcon,
-    iconFill: clearIconFill
-  }) : props.children);
-};
+    iconFill: clearIconFill,
+    SvgImage: clearIcon
+  }) : children);
+}
+//   ,
+//   function arePropsEqual(oldProps, newProps) {
+//     const oldClearIcon = oldProps.selectProps.clearIcon
+//     const oldClearIconFill = oldProps.selectProps.clearIconFill
+
+//     const newClearIcon = newProps.selectProps.clearIcon
+//     const newClearIconFill = newProps.selectProps.clearIconFill
+
+//     const isClearIconSame = oldClearIcon === newClearIcon
+//     const isClearIconFillSame = oldClearIconFill === newClearIconFill
+
+//     return isClearIconSame && isClearIconFillSame
+//   },
+// )
+
 SelectClearIndicator.propTypes = {
+  children: PropTypes__default.default.any,
   selectProps: PropTypes__default.default.shape({
     clearIcon: PropTypes__default.default.string,
     clearIconFill: PropTypes__default.default.string
@@ -74,6 +95,13 @@ SelectClearIndicator.__docgenInfo = {
   "methods": [],
   "displayName": "SelectClearIndicator",
   "props": {
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
     "selectProps": {
       "description": "",
       "type": {
@@ -7390,7 +7418,12 @@ SelectControl.__docgenInfo = {
   }
 };
 
-const SelectDropdownIndicator = props => {
+// For use memo need to check "DropdownIndicator" props
+// const SelectDropdownIndicator = React.memo(
+function SelectDropdownIndicator(props) {
+  const {
+    children
+  } = props;
   const {
     dropdownFillHover,
     dropdownIcon,
@@ -7398,13 +7431,40 @@ const SelectDropdownIndicator = props => {
     dropdownIconShape
   } = props.selectProps;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.DropdownIndicator, props, dropdownIcon ? /*#__PURE__*/React__namespace.default.createElement(Icon.Icon, {
-    SvgImage: dropdownIcon,
-    iconFill: dropdownIconFill,
     fillHover: dropdownFillHover,
-    shape: dropdownIconShape
-  }) : props.children);
-};
+    iconFill: dropdownIconFill,
+    shape: dropdownIconShape,
+    SvgImage: dropdownIcon
+  }) : children);
+}
+// ,
+//   function arePropsEqual(oldProps, newProps) {
+//     const oldDropdownFillHover = oldProps.selectProps.dropdownFillHover
+//     const oldDropdownIcon = oldProps.selectProps.dropdownIcon
+//     const oldDropdownIconFill = oldProps.selectProps.dropdownIconFill
+//     const oldDropdownIconShape = oldProps.selectProps.dropdownIconShape
+
+//     const newDropdownFillHover = newProps.selectProps.dropdownFillHover
+//     const newDropdownIcon = newProps.selectProps.dropdownIcon
+//     const newDropdownIconFill = newProps.selectProps.dropdownIconFill
+//     const newDropdownIconShape = newProps.selectProps.dropdownIconShape
+
+//     const isDropdownFillHoverSame = oldDropdownFillHover === newDropdownFillHover
+//     const isDropdownIconSame = oldDropdownIcon === newDropdownIcon
+//     const isDropdownIconFillSame = oldDropdownIconFill === newDropdownIconFill
+//     const isDropdownIconShapeSame = oldDropdownIconShape === newDropdownIconShape
+
+//     return (
+//       isDropdownFillHoverSame &&
+//       isDropdownIconSame &&
+//       isDropdownIconFillSame &&
+//       isDropdownIconShapeSame
+//     )
+//   },
+// )
+
 SelectDropdownIndicator.propTypes = {
+  children: PropTypes__default.default.any,
   selectProps: PropTypes__default.default.shape({
     // "dropdownIcon" is SvgImage(file.svg)
     dropdownFillHover: PropTypes__default.default.string,
@@ -7418,6 +7478,13 @@ SelectDropdownIndicator.__docgenInfo = {
   "methods": [],
   "displayName": "SelectDropdownIndicator",
   "props": {
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
     "selectProps": {
       "description": "",
       "type": {
@@ -7562,6 +7629,19 @@ SelectInput.__docgenInfo = {
   }
 };
 
+const SelectLoadingIndicator = props => {
+  const {
+    loadingIndicator
+  } = props.selectProps;
+  // Original indicator
+  // <components.LoadingIndicator {...props}>
+  // </components.LoadingIndicator>
+  return loadingIndicator;
+};
+SelectLoadingIndicator.propTypes = {
+  selectProps: PropTypes__default.default.shape({})
+};
+
 const SelectMenu = props => {
   const {
     elevation,
@@ -7669,19 +7749,21 @@ SelectMultiValueRemove.__docgenInfo = {
 
 const SelectNoOptions = props => {
   const {
+    inputValue,
     optionFill,
     optionBorder,
     optionBorderType,
     noOptionsTextSize,
     noOptionsTextColor,
-    noOptionsText
+    noOptionsText,
+    noOptionsSearchText
   } = props.selectProps;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.NoOptionsMessage, Object.assign({}, props, {
     className: clsx__default.default(optionFill, optionBorder, optionBorderType)
   }), /*#__PURE__*/React__namespace.default.createElement(Text.Text, {
     size: noOptionsTextSize,
     textColor: noOptionsTextColor
-  }, noOptionsText));
+  }, inputValue && noOptionsSearchText ? noOptionsSearchText : noOptionsText));
 };
 SelectNoOptions.propTypes = {
   selectProps: PropTypes__default.default.shape({
@@ -8026,10 +8108,13 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     isClearable,
     isCreatable,
     isDisabled,
+    isLoading,
     isMulti,
     isSearchable,
+    loadingMessage,
     menuItemSize,
     noOptionsText,
+    noOptionsSearchText,
     openMenuOnClick,
     options,
     optionBefore,
@@ -8042,10 +8127,17 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     set,
     showBadge,
     value,
-    onChange
+    onChange,
+    onInputChange
   } = props;
   const defaultRef = React.useRef(null);
   const selectRef = ref || defaultRef;
+
+  // React-select wai function as "loadingMessage" property
+  const getLoadingMessage = React.useCallback(params => {
+    // const { inputValue } = params
+    return loadingMessage;
+  }, [loadingMessage]);
   const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
@@ -8189,7 +8281,8 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
       Placeholder: SelectPlaceholder,
       ValueContainer: SelectValueContainer,
       NoOptionsMessage: SelectNoOptions,
-      GroupHeading: SelectGroupHeading
+      GroupHeading: SelectGroupHeading,
+      LoadingIndicator: SelectLoadingIndicator
     },
     defaultValue: initialValue,
     dividerDirection: dividerDirection,
@@ -8219,8 +8312,10 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     inputTextSize: inputTextSizeClass || selectAppearanceItem.inputTextSize,
     isClearable: isClearable,
     isDisabled: isDisabled,
+    isLoading: isLoading,
     isMulti: isMulti,
     isSearchable: isSearchable,
+    loadingMessage: getLoadingMessage,
     menuAfter: menuAfter,
     menuBefore: menuBefore,
     menuItemSize: menuItemSize,
@@ -8233,6 +8328,7 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     noOptionBorder: optionBorderClass,
     noOptionBorderType: optionBorderTypeClass,
     noOptionsFill: optionFillClass,
+    noOptionsSearchText: noOptionsSearchText,
     noOptionsText: noOptionsText || selectAppearanceItem.noOptionsText,
     noOptionsTextColor: noOptionsTextColorClass || selectAppearanceItem.noOptionsTextColor,
     noOptionsTextSize: noOptionsTextSizeClass || selectAppearanceItem.noOptionsTextSize,
@@ -8257,7 +8353,8 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     showDivider: showDivider,
     styles: clearStyle,
     value: value,
-    onChange: onChange
+    onChange: onChange,
+    onInputChange: onInputChange
   });
 });
 SelectContainer.propTypes = {

package/dist/cjs/components/Text/Text.interface.d.ts

@@ -47,7 +47,7 @@ export interface ITextProps extends ITextThemeColor, TypeStyleAttributes {
     textAlign?: textAlignPropsType;
     textColor?: textColorPropsType;
     textStyle?: textStylePropsType;
-    textTruncate?: string;
+    textTruncate?: boolean;
     textWeight?: textWeightPropsType;
     textWrap?: textWrapPropsType;
     width?: widthPropsType;

package/dist/components/Cell/Cell.interface.d.ts

@@ -31,7 +31,7 @@ export interface ICellProps extends TypeStyleAttributes {
     titleTag?: ElementType;
     titleTextColor?: textColorPropsType;
     titleTextSize?: textSizePropsType;
-    titleTextTruncate?: string;
+    titleTextTruncate?: boolean;
     titleTextWeight?: textWeightPropsType;
     titleTextWrap?: textWrapPropsType;
     value?: string;

package/dist/components/Select.js

@@ -27,17 +27,38 @@ import '../Tooltip-CcwyN7PD.js';
 import '../Title-BUN57fWw.js';
 import 'lodash/castArray';
 
-const SelectClearIndicator = props => {
+// For use memo need to check "ClearIndicator" props
+// const SelectClearIndicator = React.memo(
+function SelectClearIndicator(props) {
+  const {
+    children
+  } = props;
   const {
     clearIcon,
     clearIconFill
   } = props.selectProps;
   return /*#__PURE__*/React__default.createElement(components$1.ClearIndicator, props, clearIcon ? /*#__PURE__*/React__default.createElement(Icon, {
-    SvgImage: clearIcon,
-    iconFill: clearIconFill
-  }) : props.children);
-};
+    iconFill: clearIconFill,
+    SvgImage: clearIcon
+  }) : children);
+}
+//   ,
+//   function arePropsEqual(oldProps, newProps) {
+//     const oldClearIcon = oldProps.selectProps.clearIcon
+//     const oldClearIconFill = oldProps.selectProps.clearIconFill
+
+//     const newClearIcon = newProps.selectProps.clearIcon
+//     const newClearIconFill = newProps.selectProps.clearIconFill
+
+//     const isClearIconSame = oldClearIcon === newClearIcon
+//     const isClearIconFillSame = oldClearIconFill === newClearIconFill
+
+//     return isClearIconSame && isClearIconFillSame
+//   },
+// )
+
 SelectClearIndicator.propTypes = {
+  children: PropTypes.any,
   selectProps: PropTypes.shape({
     clearIcon: PropTypes.string,
     clearIconFill: PropTypes.string
@@ -48,6 +69,13 @@ SelectClearIndicator.__docgenInfo = {
   "methods": [],
   "displayName": "SelectClearIndicator",
   "props": {
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
     "selectProps": {
       "description": "",
       "type": {
@@ -7364,7 +7392,12 @@ SelectControl.__docgenInfo = {
   }
 };
 
-const SelectDropdownIndicator = props => {
+// For use memo need to check "DropdownIndicator" props
+// const SelectDropdownIndicator = React.memo(
+function SelectDropdownIndicator(props) {
+  const {
+    children
+  } = props;
   const {
     dropdownFillHover,
     dropdownIcon,
@@ -7372,13 +7405,40 @@ const SelectDropdownIndicator = props => {
     dropdownIconShape
   } = props.selectProps;
   return /*#__PURE__*/React__default.createElement(components$1.DropdownIndicator, props, dropdownIcon ? /*#__PURE__*/React__default.createElement(Icon, {
-    SvgImage: dropdownIcon,
-    iconFill: dropdownIconFill,
     fillHover: dropdownFillHover,
-    shape: dropdownIconShape
-  }) : props.children);
-};
+    iconFill: dropdownIconFill,
+    shape: dropdownIconShape,
+    SvgImage: dropdownIcon
+  }) : children);
+}
+// ,
+//   function arePropsEqual(oldProps, newProps) {
+//     const oldDropdownFillHover = oldProps.selectProps.dropdownFillHover
+//     const oldDropdownIcon = oldProps.selectProps.dropdownIcon
+//     const oldDropdownIconFill = oldProps.selectProps.dropdownIconFill
+//     const oldDropdownIconShape = oldProps.selectProps.dropdownIconShape
+
+//     const newDropdownFillHover = newProps.selectProps.dropdownFillHover
+//     const newDropdownIcon = newProps.selectProps.dropdownIcon
+//     const newDropdownIconFill = newProps.selectProps.dropdownIconFill
+//     const newDropdownIconShape = newProps.selectProps.dropdownIconShape
+
+//     const isDropdownFillHoverSame = oldDropdownFillHover === newDropdownFillHover
+//     const isDropdownIconSame = oldDropdownIcon === newDropdownIcon
+//     const isDropdownIconFillSame = oldDropdownIconFill === newDropdownIconFill
+//     const isDropdownIconShapeSame = oldDropdownIconShape === newDropdownIconShape
+
+//     return (
+//       isDropdownFillHoverSame &&
+//       isDropdownIconSame &&
+//       isDropdownIconFillSame &&
+//       isDropdownIconShapeSame
+//     )
+//   },
+// )
+
 SelectDropdownIndicator.propTypes = {
+  children: PropTypes.any,
   selectProps: PropTypes.shape({
     // "dropdownIcon" is SvgImage(file.svg)
     dropdownFillHover: PropTypes.string,
@@ -7392,6 +7452,13 @@ SelectDropdownIndicator.__docgenInfo = {
   "methods": [],
   "displayName": "SelectDropdownIndicator",
   "props": {
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
     "selectProps": {
       "description": "",
       "type": {
@@ -7536,6 +7603,19 @@ SelectInput.__docgenInfo = {
   }
 };
 
+const SelectLoadingIndicator = props => {
+  const {
+    loadingIndicator
+  } = props.selectProps;
+  // Original indicator
+  // <components.LoadingIndicator {...props}>
+  // </components.LoadingIndicator>
+  return loadingIndicator;
+};
+SelectLoadingIndicator.propTypes = {
+  selectProps: PropTypes.shape({})
+};
+
 const SelectMenu = props => {
   const {
     elevation,
@@ -7643,19 +7723,21 @@ SelectMultiValueRemove.__docgenInfo = {
 
 const SelectNoOptions = props => {
   const {
+    inputValue,
     optionFill,
     optionBorder,
     optionBorderType,
     noOptionsTextSize,
     noOptionsTextColor,
-    noOptionsText
+    noOptionsText,
+    noOptionsSearchText
   } = props.selectProps;
   return /*#__PURE__*/React__default.createElement(components$1.NoOptionsMessage, Object.assign({}, props, {
     className: clsx(optionFill, optionBorder, optionBorderType)
   }), /*#__PURE__*/React__default.createElement(Text, {
     size: noOptionsTextSize,
     textColor: noOptionsTextColor
-  }, noOptionsText));
+  }, inputValue && noOptionsSearchText ? noOptionsSearchText : noOptionsText));
 };
 SelectNoOptions.propTypes = {
   selectProps: PropTypes.shape({
@@ -8000,10 +8082,13 @@ const SelectContainer = /*#__PURE__*/React__default.forwardRef(function SelectCo
     isClearable,
     isCreatable,
     isDisabled,
+    isLoading,
     isMulti,
     isSearchable,
+    loadingMessage,
     menuItemSize,
     noOptionsText,
+    noOptionsSearchText,
     openMenuOnClick,
     options,
     optionBefore,
@@ -8016,10 +8101,17 @@ const SelectContainer = /*#__PURE__*/React__default.forwardRef(function SelectCo
     set,
     showBadge,
     value,
-    onChange
+    onChange,
+    onInputChange
   } = props;
   const defaultRef = useRef(null);
   const selectRef = ref || defaultRef;
+
+  // React-select wai function as "loadingMessage" property
+  const getLoadingMessage = useCallback(params => {
+    // const { inputValue } = params
+    return loadingMessage;
+  }, [loadingMessage]);
   const borderColorClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
@@ -8163,7 +8255,8 @@ const SelectContainer = /*#__PURE__*/React__default.forwardRef(function SelectCo
       Placeholder: SelectPlaceholder,
       ValueContainer: SelectValueContainer,
       NoOptionsMessage: SelectNoOptions,
-      GroupHeading: SelectGroupHeading
+      GroupHeading: SelectGroupHeading,
+      LoadingIndicator: SelectLoadingIndicator
     },
     defaultValue: initialValue,
     dividerDirection: dividerDirection,
@@ -8193,8 +8286,10 @@ const SelectContainer = /*#__PURE__*/React__default.forwardRef(function SelectCo
     inputTextSize: inputTextSizeClass || selectAppearanceItem.inputTextSize,
     isClearable: isClearable,
     isDisabled: isDisabled,
+    isLoading: isLoading,
     isMulti: isMulti,
     isSearchable: isSearchable,
+    loadingMessage: getLoadingMessage,
     menuAfter: menuAfter,
     menuBefore: menuBefore,
     menuItemSize: menuItemSize,
@@ -8207,6 +8302,7 @@ const SelectContainer = /*#__PURE__*/React__default.forwardRef(function SelectCo
     noOptionBorder: optionBorderClass,
     noOptionBorderType: optionBorderTypeClass,
     noOptionsFill: optionFillClass,
+    noOptionsSearchText: noOptionsSearchText,
     noOptionsText: noOptionsText || selectAppearanceItem.noOptionsText,
     noOptionsTextColor: noOptionsTextColorClass || selectAppearanceItem.noOptionsTextColor,
     noOptionsTextSize: noOptionsTextSizeClass || selectAppearanceItem.noOptionsTextSize,
@@ -8231,7 +8327,8 @@ const SelectContainer = /*#__PURE__*/React__default.forwardRef(function SelectCo
     showDivider: showDivider,
     styles: clearStyle,
     value: value,
-    onChange: onChange
+    onChange: onChange,
+    onInputChange: onInputChange
   });
 });
 SelectContainer.propTypes = {

package/dist/components/Text/Text.interface.d.ts

@@ -47,7 +47,7 @@ export interface ITextProps extends ITextThemeColor, TypeStyleAttributes {
     textAlign?: textAlignPropsType;
     textColor?: textColorPropsType;
     textStyle?: textStylePropsType;
-    textTruncate?: string;
+    textTruncate?: boolean;
     textWeight?: textWeightPropsType;
     textWrap?: textWrapPropsType;
     width?: widthPropsType;

package/dist/css/components/Dropdown/Dropdown.css

@@ -57,14 +57,14 @@
 }
 .dropdown {
   &_state_close {
-    opacity: 0;
     visibility: hidden;
+    opacity: 0%;
   }
 }
 .dropdown {
   &&_state_open {
-    opacity: 1;
     visibility: visible;
+    opacity: 100%;
   }
 }
 .dropdown {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.1.11",
+  "version": "1.1.14",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",