forstok-ui-lib 8.7.2 → 8.8.0

package/package.json

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

package/src/assets/javascripts/function.ts

@@ -1270,7 +1270,10 @@ export const getFileType = (file?: File | null): string => {
   }
 };
 
-export function capitalizeWords(text: string, ignoreWords = []): string {
+export function capitalizeWords(
+  text: string,
+  ignoreWords: string[] = [],
+): string {
   const ignoreSet = new Set<string>(ignoreWords);
 
   return text.replace(/\S+/g, (word, offset) => {

package/src/components/select/all.tsx

@@ -114,7 +114,10 @@ const SelectAllComponent = (props: TSelect) => {
     container: (provided: CSSObject) =>
       ({
         ...provided,
-        display: "inline-block",
+        display: "block",
+        width: "100%",
+        maxWidth: "100%",
+        minWidth: 0,
         minHeight: "1px",
         textAlign: "left",
         border: "none",
@@ -125,6 +128,8 @@ const SelectAllComponent = (props: TSelect) => {
     ) =>
       ({
         ...provided,
+        width: "100%",
+        minWidth: 0,
         borderRadius: ".5rem",
         cursor: "pointer",
         minHeight: mode === "store" ? "30px" : "38px",
@@ -172,6 +177,15 @@ const SelectAllComponent = (props: TSelect) => {
           boxShadow: "none !important",
         },
       }) as CSSObjectWithLabel,
+    singleValue: (provided: CSSObject) =>
+      ({
+        ...provided,
+        minWidth: 0,
+        maxWidth: "100%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      }) as CSSObjectWithLabel,
     dropdownIndicator: (provided: CSSObject) =>
       ({
         ...provided,
@@ -199,10 +213,15 @@ const SelectAllComponent = (props: TSelect) => {
     valueContainer: (provided: CSSObject) =>
       ({
         ...provided,
+        flex: 1,
+        minWidth: 0,
         height: "100%",
         maxHeight: "300px",
         minHeight: "30px",
-        overflow: "auto",
+        overflowX: "hidden",
+        overflowY: "auto",
+        flexWrap: "wrap",
+        alignContent: "flex-start",
         paddingTop: "0",
         paddingBottom: "0",
         paddingRight: "2px",
@@ -266,11 +285,24 @@ const SelectAllComponent = (props: TSelect) => {
           "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",
       }) as CSSObjectWithLabel,
+    multiValue: (provided: CSSObject) =>
+      ({
+        ...provided,
+        maxWidth: "100%",
+      }) as CSSObjectWithLabel,
+    multiValueLabel: (provided: CSSObject) =>
+      ({
+        ...provided,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      }) as CSSObjectWithLabel,
   };
 
   return (
     <div
       className="_refContainer"
+      style={{ width: "100%", minWidth: 0 }}
       {...(rest["data-qa-id"] && { "data-qa-id": rest["data-qa-id"] })}
     >
       <ReactSelect

package/src/components/select/asyncPaginate.tsx

@@ -136,8 +136,10 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
     container: (provided: CSSObject) =>
       ({
         ...provided,
-        display: "inline-block",
+        display: "block",
         width: "100%",
+        maxWidth: "100%",
+        minWidth: 0,
         minHeight: "1px",
         textAlign: "left",
         border: "none",
@@ -146,6 +148,7 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
       ({
         ...provided,
         width: "100%",
+        minWidth: 0,
         borderRadius: ".5rem",
         minHeight: "1px",
         height: isMulti ? "100%" : mode === "small" ? "30px" : "32px",
@@ -197,6 +200,11 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
       ({
         ...provided,
         minHeight: "1px",
+        minWidth: 0,
+        maxWidth: "100%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
         paddingBottom: "2px",
         color: "initial",
       }) as CSSObjectWithLabel,
@@ -227,6 +235,8 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
     valueContainer: (provided: CSSObject) =>
       ({
         ...provided,
+        flex: 1,
+        minWidth: 0,
         minHeight: "1px",
         height: isMulti
           ? "100%"
@@ -240,7 +250,9 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
         paddingLeft: iconLeft ? "28px" : "8px",
         paddingRight: "2px",
         maxHeight: isMulti ? "300px" : "unset",
-        overflow: isMulti ? "auto" : "initial",
+        overflowX: isMulti ? "hidden" : "initial",
+        overflowY: isMulti ? "auto" : "initial",
+        flexWrap: isMulti ? "wrap" : "nowrap",
         alignContent: isMulti ? "flex-start" : "initial",
       }) as CSSObjectWithLabel,
     option: (provided: CSSObject, state: OptionProps<TOption, boolean>) =>
@@ -299,6 +311,18 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
         letterSpacing: "normal",
         lineHeight: "normal",
       }) as CSSObjectWithLabel,
+    multiValue: (provided: CSSObject) =>
+      ({
+        ...provided,
+        maxWidth: "100%",
+      }) as CSSObjectWithLabel,
+    multiValueLabel: (provided: CSSObject) =>
+      ({
+        ...provided,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      }) as CSSObjectWithLabel,
   };
 
   const onMenuOpen = useCallback(() => {
@@ -327,7 +351,7 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
   };
 
   return (
-    <div className="_refContainer">
+    <div className="_refContainer" style={{ width: "100%", minWidth: 0 }}>
       <AsyncPaginate
         isSearchable={isSearchable}
         placeholder={placeholder}

package/src/components/select/index.tsx

@@ -284,12 +284,17 @@ const SelectComponent = ({
     );
   };
 
+  const isScrollableValueContainer =
+    isMulti || mode === "multi" || mode === "picklist";
+
   const customStyles: StylesConfig<TOption, typeof isMulti> = {
     container: (provided: CSSObject) =>
       ({
         ...provided,
-        display: "inline-block",
+        display: "block",
         width: width ? width + "px" : "100%",
+        maxWidth: "100%",
+        minWidth: 0,
         minHeight: "1px",
         textAlign: "left",
         border: "none",
@@ -300,6 +305,8 @@ const SelectComponent = ({
     ) =>
       ({
         ...provided,
+        width: "100%",
+        minWidth: 0,
         borderRadius: ".5rem",
         minHeight:
           mode === "multi" ? "50px" : mode === "picklist" ? "30px" : "1px",
@@ -398,6 +405,8 @@ const SelectComponent = ({
     valueContainer: (provided: CSSObject) =>
       ({
         ...provided,
+        flex: 1,
+        minWidth: 0,
         height: isMulti ? "100%" : mode === "multi" ? "auto" : "30px",
         maxHeight: isMulti
           ? "300px"
@@ -408,10 +417,10 @@ const SelectComponent = ({
               : "none",
         minHeight:
           mode === "multi" ? "44px" : mode === "picklist" ? "30px" : "1px",
-        overflow:
-          isMulti || mode === "multi" || mode === "picklist"
-            ? "auto"
-            : "initial",
+        overflowX: isScrollableValueContainer ? "hidden" : "initial",
+        overflowY: isScrollableValueContainer ? "auto" : "initial",
+        flexWrap: isScrollableValueContainer ? "wrap" : "nowrap",
+        alignContent: isScrollableValueContainer ? "flex-start" : "center",
         paddingTop: "0",
         paddingBottom: "0",
         paddingRight: "2px",
@@ -420,6 +429,11 @@ const SelectComponent = ({
       ({
         ...provided,
         minHeight: "1px",
+        minWidth: 0,
+        maxWidth: "100%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
         paddingBottom: "2px",
         color: disabled ? "#ADADAD" : mode === "form" ? "#2d3c48" : "initial",
         opacity: disabled ? ".7" : 1,
@@ -487,15 +501,34 @@ const SelectComponent = ({
       base: any,
       state: MultiValueProps<TOption, typeof isMulti>,
     ) => {
-      return state.data.isFixed ? { ...base, backgroundColor: "gray" } : base;
+      const nextStyles = {
+        ...base,
+        maxWidth: "100%",
+      };
+
+      return state.data.isFixed
+        ? { ...nextStyles, backgroundColor: "gray" }
+        : nextStyles;
     },
     multiValueLabel: (
       base: any,
       state: MultiValueProps<TOption, typeof isMulti>,
     ) => {
+      const nextStyles = {
+        ...base,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      };
+
       return state.data.isFixed
-        ? { ...base, fontWeight: "bold", color: "white", paddingRight: 6 }
-        : base;
+        ? {
+            ...nextStyles,
+            fontWeight: "bold",
+            color: "white",
+            paddingRight: 6,
+          }
+        : nextStyles;
     },
     multiValueRemove: (
       provided: CSSObject,
@@ -591,7 +624,11 @@ const SelectComponent = ({
   );
 
   return (
-    <section className="_refSelectContainer" {...props}>
+    <section
+      className="_refSelectContainer"
+      style={{ width: "100%", minWidth: 0 }}
+      {...props}
+    >
       {SelectEl}
     </section>
   );