w-design-system 0.0.79 → 0.0.82

package/dist/components/CountryStateSelector/index.d.ts

@@ -11,7 +11,10 @@ export interface CountryStateSelectProps extends HTMLAttributes<HTMLDivElement>
     label?: string;
     leftIcon?: ReactNode;
     onOptionChange?: (option: CountryState | null) => void;
+    /** selected option */
     selectedOption?: CountryState | null;
+    /** You can use this option to set the selected state through the abbreviation, in this case you should not use selectedOption */
+    selectedOptionAbbreviation?: string | null;
     placeholder?: string;
     rightIcon?: ReactNode;
     value?: string;

package/dist/components/CountryStateSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CountryStateSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAA;AACzF,OAAO,EAAuB,SAAS,EAAE,MAAM,WAAW,CAAA;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAA;IACtD,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;CACvB;AAsFD,eAAO,MAAM,kBAAkB,EAA8C,CAC3E,KAAK,EAAE,iBAAiB,CAAC,uBAAuB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;CAAE,KACxF,KAAK,CAAC,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CountryStateSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAA;AACzF,OAAO,EAAuB,SAAS,EAAE,MAAM,WAAW,CAAA;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAA;IACtD,sBAAsB;IACtB,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC,iIAAiI;IACjI,0BAA0B,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;CACvB;AAsHD,eAAO,MAAM,kBAAkB,EAA8C,CAC3E,KAAK,EAAE,iBAAiB,CAAC,uBAAuB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;CAAE,KACxF,KAAK,CAAC,YAAY,CAAA"}

package/dist/components/CountryStateSelector/index.js

@@ -14,45 +14,70 @@ import { Select } from '../Select';
 import React from 'react';
 const CountryStateSelectFowardRef = (_a, ref) => {
     var _b;
-    var { children, allStatesOption, validStates } = _a, props = __rest(_a, ["children", "allStatesOption", "validStates"]);
+    var { children, allStatesOption, selectedOption, selectedOptionAbbreviation, validStates } = _a, props = __rest(_a, ["children", "allStatesOption", "selectedOption", "selectedOptionAbbreviation", "validStates"]);
     const allStatesOptionValue = allStatesOption !== false;
+    const allCountryStates = useMemo(() => [
+        { id: 1, name: 'Acre', abbreviation: 'AC' },
+        { id: 2, name: 'Alagoas', abbreviation: 'AL' },
+        { id: 3, name: 'Amapá', abbreviation: 'AP' },
+        { id: 4, name: 'Amazonas', abbreviation: 'AM' },
+        { id: 5, name: 'Bahia', abbreviation: 'BA' },
+        { id: 6, name: 'Ceará', abbreviation: 'CE' },
+        { id: 7, name: 'Espírito Santo', abbreviation: 'ES' },
+        { id: 8, name: 'Goiás', abbreviation: 'GO' },
+        { id: 9, name: 'Maranhão', abbreviation: 'MA' },
+        { id: 10, name: 'Mato Grosso', abbreviation: 'MT' },
+        { id: 11, name: 'Mato Grosso do Sul', abbreviation: 'MS' },
+        { id: 12, name: 'Minas Gerais', abbreviation: 'MG' },
+        { id: 13, name: 'Pará', abbreviation: 'PA' },
+        { id: 14, name: 'Paraíba', abbreviation: 'PB' },
+        { id: 15, name: 'Paraná', abbreviation: 'PR' },
+        { id: 16, name: 'Pernambuco', abbreviation: 'PE' },
+        { id: 17, name: 'Piauí', abbreviation: 'PI' },
+        { id: 18, name: 'Rio de Janeiro', abbreviation: 'RJ' },
+        { id: 19, name: 'Rio Grande do Norte', abbreviation: 'RN' },
+        { id: 20, name: 'Rio Grande do Sul', abbreviation: 'RS' },
+        { id: 21, name: 'Rondônia', abbreviation: 'RO' },
+        { id: 22, name: 'Roraima', abbreviation: 'RR' },
+        { id: 23, name: 'Santa Catarina', abbreviation: 'SC' },
+        { id: 24, name: 'São Paulo', abbreviation: 'SP' },
+        { id: 25, name: 'Sergipe', abbreviation: 'SE' },
+        { id: 26, name: 'Tocantins', abbreviation: 'TO' },
+        { id: 27, name: 'Distrito Federal', abbreviation: 'DF' },
+    ], []);
     const countryStates = useMemo(() => {
-        const base = [
-            { id: 1, name: 'Acre', abbreviation: 'AC' },
-            { id: 2, name: 'Alagoas', abbreviation: 'AL' },
-            { id: 3, name: 'Amapá', abbreviation: 'AP' },
-            { id: 4, name: 'Amazonas', abbreviation: 'AM' },
-            { id: 5, name: 'Bahia', abbreviation: 'BA' },
-            { id: 6, name: 'Ceará', abbreviation: 'CE' },
-            { id: 7, name: 'Espírito Santo', abbreviation: 'ES' },
-            { id: 8, name: 'Goiás', abbreviation: 'GO' },
-            { id: 9, name: 'Maranhão', abbreviation: 'MA' },
-            { id: 10, name: 'Mato Grosso', abbreviation: 'MT' },
-            { id: 11, name: 'Mato Grosso do Sul', abbreviation: 'MS' },
-            { id: 12, name: 'Minas Gerais', abbreviation: 'MG' },
-            { id: 13, name: 'Pará', abbreviation: 'PA' },
-            { id: 14, name: 'Paraíba', abbreviation: 'PB' },
-            { id: 15, name: 'Paraná', abbreviation: 'PR' },
-            { id: 16, name: 'Pernambuco', abbreviation: 'PE' },
-            { id: 17, name: 'Piauí', abbreviation: 'PI' },
-            { id: 18, name: 'Rio de Janeiro', abbreviation: 'RJ' },
-            { id: 19, name: 'Rio Grande do Norte', abbreviation: 'RN' },
-            { id: 20, name: 'Rio Grande do Sul', abbreviation: 'RS' },
-            { id: 21, name: 'Rondônia', abbreviation: 'RO' },
-            { id: 22, name: 'Roraima', abbreviation: 'RR' },
-            { id: 23, name: 'Santa Catarina', abbreviation: 'SC' },
-            { id: 24, name: 'São Paulo', abbreviation: 'SP' },
-            { id: 25, name: 'Sergipe', abbreviation: 'SE' },
-            { id: 26, name: 'Tocantins', abbreviation: 'TO' },
-            { id: 27, name: 'Distrito Federal', abbreviation: 'DF' },
-        ];
         if (!validStates)
-            return base;
-        return base.filter(state => validStates.includes(state.abbreviation));
-    }, [validStates]);
-    const countrysStateOptions = allStatesOptionValue
-        ? [{ id: 0, name: 'Todos os estados', abbreviation: 'BR' }, ...countryStates]
-        : countryStates;
+            return allCountryStates;
+        return allCountryStates.filter(state => validStates.includes(state.abbreviation));
+    }, [validStates, allCountryStates]);
+    const countrysStateOptions = useMemo(() => {
+        return allStatesOptionValue
+            ? [{ id: 0, name: 'Todos os estados', abbreviation: 'BR' }, ...countryStates]
+            : countryStates;
+    }, [allStatesOptionValue, countryStates]);
+    const selectedOptionAbbreviationMap = useMemo(() => {
+        return new Map(countrysStateOptions.map((option) => [option.abbreviation, option]));
+    }, [countrysStateOptions]);
+    const selectedOptionValue = useMemo(() => {
+        if (selectedOption) {
+            return {
+                id: selectedOption.id,
+                text: selectedOption.name,
+                countryState: selectedOption,
+            };
+        }
+        if (selectedOptionAbbreviation) {
+            const selectedOptionMap = selectedOptionAbbreviationMap.get(selectedOptionAbbreviation);
+            if (selectedOptionMap) {
+                return {
+                    id: selectedOptionMap.id,
+                    text: selectedOptionMap.name,
+                    countryState: selectedOptionMap,
+                };
+            }
+        }
+        return null;
+    }, [selectedOption, selectedOptionAbbreviation, selectedOptionAbbreviationMap]);
     const selectProps = Object.assign(Object.assign({}, props), { placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : 'Estado', options: countrysStateOptions.map(countryState => {
             return {
                 id: countryState.id,
@@ -74,13 +99,7 @@ const CountryStateSelectFowardRef = (_a, ref) => {
                     props.onOptionChange((_a = option === null || option === void 0 ? void 0 : option.countryState) !== null && _a !== void 0 ? _a : null);
                 }
             }
-        }, selectedOption: props.selectedOption
-            ? {
-                id: props.selectedOption.id,
-                text: props.selectedOption.name,
-                countryState: props.selectedOption,
-            }
-            : null });
+        }, selectedOption: selectedOptionValue });
     return (React.createElement(Select, Object.assign({}, selectProps, { ref: ref }), children));
 };
 export const CountryStateSelect = forwardRef(CountryStateSelectFowardRef);

package/dist/components/CountryStateSelector/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CountryStateSelector/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CountryStateSelector/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/styles.js

@@ -18,7 +18,7 @@ export const Dropdown = styled.div `
 
   background-color: ${theme.colors.white};
   width: ${({ $dropDownWidth }) => ($dropDownWidth ? $dropDownWidth : '100%')};
-  ${({ $dropDownTop }) => ($dropDownTop ? 'bottom: 58px;' : 'margin-top: 4px;')};
+  ${({ $dropDownTop }) => ($dropDownTop ? 'bottom: 64px;' : 'margin-top: 4px;')};
   padding: 16px;
 
   border-radius: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-design-system",
-  "version": "0.0.79",
+  "version": "0.0.82",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/components/CountryStateSelector/index.tsx

@@ -13,7 +13,10 @@ export interface CountryStateSelectProps extends HTMLAttributes<HTMLDivElement>
   label?: string
   leftIcon?: ReactNode
   onOptionChange?: (option: CountryState | null) => void
+  /** selected option */
   selectedOption?: CountryState | null
+  /** You can use this option to set the selected state through the abbreviation, in this case you should not use selectedOption */
+  selectedOptionAbbreviation?: string | null
   placeholder?: string
   rightIcon?: ReactNode
   value?: string
@@ -27,13 +30,20 @@ export interface CountryStateSelectProps extends HTMLAttributes<HTMLDivElement>
 }
 
 const CountryStateSelectFowardRef = (
-  { children, allStatesOption, validStates, ...props }: PropsWithChildren<CountryStateSelectProps>,
+  {
+    children,
+    allStatesOption,
+    selectedOption,
+    selectedOptionAbbreviation,
+    validStates,
+    ...props
+  }: PropsWithChildren<CountryStateSelectProps>,
   ref: React.ForwardedRef<SelectRef>,
 ) => {
   const allStatesOptionValue = allStatesOption !== false
 
-  const countryStates = useMemo(() => {
-    const base = [
+  const allCountryStates = useMemo(
+    () => [
       { id: 1, name: 'Acre', abbreviation: 'AC' },
       { id: 2, name: 'Alagoas', abbreviation: 'AL' },
       { id: 3, name: 'Amapá', abbreviation: 'AP' },
@@ -61,14 +71,45 @@ const CountryStateSelectFowardRef = (
       { id: 25, name: 'Sergipe', abbreviation: 'SE' },
       { id: 26, name: 'Tocantins', abbreviation: 'TO' },
       { id: 27, name: 'Distrito Federal', abbreviation: 'DF' },
-    ]
-    if (!validStates) return base
-    return base.filter(state => validStates.includes(state.abbreviation))
-  }, [validStates])
+    ],
+    [],
+  )
+
+  const countryStates = useMemo(() => {
+    if (!validStates) return allCountryStates
+    return allCountryStates.filter(state => validStates.includes(state.abbreviation))
+  }, [validStates, allCountryStates])
+
+  const countrysStateOptions = useMemo(() => {
+    return allStatesOptionValue
+      ? [{ id: 0, name: 'Todos os estados', abbreviation: 'BR' }, ...countryStates]
+      : countryStates
+  }, [allStatesOptionValue, countryStates])
 
-  const countrysStateOptions = allStatesOptionValue
-    ? [{ id: 0, name: 'Todos os estados', abbreviation: 'BR' }, ...countryStates]
-    : countryStates
+  const selectedOptionAbbreviationMap = useMemo(() => {
+    return new Map(countrysStateOptions.map((option: CountryState) => [option.abbreviation, option]))
+  }, [countrysStateOptions])
+
+  const selectedOptionValue = useMemo(() => {
+    if (selectedOption) {
+      return {
+        id: selectedOption.id,
+        text: selectedOption.name,
+        countryState: selectedOption,
+      }
+    }
+    if (selectedOptionAbbreviation) {
+      const selectedOptionMap = selectedOptionAbbreviationMap.get(selectedOptionAbbreviation)
+      if (selectedOptionMap) {
+        return {
+          id: selectedOptionMap.id,
+          text: selectedOptionMap.name,
+          countryState: selectedOptionMap,
+        }
+      }
+    }
+    return null
+  }, [selectedOption, selectedOptionAbbreviation, selectedOptionAbbreviationMap])
 
   const selectProps: SelectProps<{ text: string; id: number; countryState: CountryState }> = {
     ...props,
@@ -94,13 +135,7 @@ const CountryStateSelectFowardRef = (
         }
       }
     },
-    selectedOption: props.selectedOption
-      ? {
-          id: props.selectedOption.id,
-          text: props.selectedOption.name,
-          countryState: props.selectedOption,
-        }
-      : null,
+    selectedOption: selectedOptionValue,
   }
 
   return (

package/src/components/Select/styles.ts

@@ -25,7 +25,7 @@ export const Dropdown = styled.div<DropdownProps>`
 
   background-color: ${theme.colors.white};
   width: ${({ $dropDownWidth }) => ($dropDownWidth ? $dropDownWidth : '100%')};
-  ${({ $dropDownTop }) => ($dropDownTop ? 'bottom: 58px;' : 'margin-top: 4px;')};
+  ${({ $dropDownTop }) => ($dropDownTop ? 'bottom: 64px;' : 'margin-top: 4px;')};
   padding: 16px;
 
   border-radius: 4px;