@mrshmllw/smores-react 12.5.0 → 12.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -61,6 +61,7 @@ const BoxContainer = styled.label `
|
|
|
61
61
|
padding-left: 32px;
|
|
62
62
|
user-select: none;
|
|
63
63
|
cursor: pointer;
|
|
64
|
+
min-height: 24px;
|
|
64
65
|
|
|
65
66
|
input {
|
|
66
67
|
position: absolute;
|
|
@@ -97,10 +98,11 @@ const BoxContainer = styled.label `
|
|
|
97
98
|
|
|
98
99
|
span {
|
|
99
100
|
border-radius: 6px;
|
|
101
|
+
line-height: 24px;
|
|
100
102
|
}
|
|
101
103
|
`;
|
|
102
|
-
const ErrorBox = styled.
|
|
103
|
-
|
|
104
|
+
const ErrorBox = styled.div `
|
|
105
|
+
margin-top: 4px;
|
|
104
106
|
font-size: 12px;
|
|
105
107
|
color: ${theme.colors.strawberry};
|
|
106
108
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../src/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAa,MAAM,OAAO,CAAA;AACpD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAWzC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,SAAS,QAAQ,CACf,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAC1D,GAAG;IAEH,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL;QACE,oBAAC,YAAY,IAAC,EAAE,EAAE,EAAE;YAClB,oBAAC,IAAI,IACH,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,IAExC,QAAQ,CACJ;YAEP,+BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAM,GAChB;YACF,oBAAC,SAAS,cAAS,KAAK,GAAI,CACf;QACd,KAAK,IAAI,QAAQ,IAAI,oBAAC,QAAQ,QAAE,QAAQ,CAAY,CACpD,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAsB;;;;;YAKvC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACvB,MAAM;IACJ,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE;IACxC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;;;;;;;;;;;;;wBAarB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;;;;;;wBAelB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;CAKzC,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAA
|
|
1
|
+
{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../src/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAa,MAAM,OAAO,CAAA;AACpD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAWzC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,SAAS,QAAQ,CACf,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAC1D,GAAG;IAEH,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL;QACE,oBAAC,YAAY,IAAC,EAAE,EAAE,EAAE;YAClB,oBAAC,IAAI,IACH,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,IAExC,QAAQ,CACJ;YAEP,+BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAM,GAChB;YACF,oBAAC,SAAS,cAAS,KAAK,GAAI,CACf;QACd,KAAK,IAAI,QAAQ,IAAI,oBAAC,QAAQ,QAAE,QAAQ,CAAY,CACpD,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAsB;;;;;YAKvC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACvB,MAAM;IACJ,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE;IACxC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;;;;;;;;;;;;;wBAarB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;;;;;;wBAelB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;CAKzC,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;;;;;wBAaT,KAAK,CAAC,MAAM,CAAC,KAAK;;kBAExB,SAAS;0BACD,KAAK,CAAC,MAAM,CAAC,SAAS;0BACtB,KAAK,CAAC,MAAM,CAAC,SAAS;;;kBAG9B,SAAS;;;;kBAIT,SAAS;;;;MAIrB,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,SAAS,EAAE,EAAE,CAAC;;;;MAI5D,SAAS;0BACW,KAAK,CAAC,MAAM,CAAC,OAAO;0BACpB,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;;;;;;CAY/C,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;WAGhB,KAAK,CAAC,MAAM,CAAC,UAAU;CACjC,CAAA","sourcesContent":["import React, { forwardRef, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { focusOutline } from '../utils/focusOutline'\n\nimport { Text } from '../Text'\nimport { theme } from '../theme'\nimport { useUniqueId } from '../utils/id'\n\nexport type CheckBoxProps = {\n id?: string\n checked: boolean\n children: ReactNode\n toggle: () => void\n error?: boolean\n errorMsg?: string\n}\n\nexport const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(\n function CheckBox(\n { id: idProp, checked, children, toggle, error, errorMsg },\n ref,\n ) {\n const id = useUniqueId(idProp)\n return (\n <>\n <BoxContainer id={id}>\n <Text\n tag=\"span\"\n typo=\"body-regular\"\n color={error ? 'strawberry' : 'liquorice'}\n >\n {children}\n </Text>\n\n <input\n ref={ref}\n type=\"checkbox\"\n checked={checked}\n onChange={toggle}\n />\n <Checkmark $error={error} />\n </BoxContainer>\n {error && errorMsg && <ErrorBox>{errorMsg}</ErrorBox>}\n </>\n )\n },\n)\n\nconst Checkmark = styled.span<{ $error?: boolean }>`\n position: absolute;\n left: 0;\n width: 24px;\n height: 24px;\n border: ${({ $error }) =>\n $error\n ? `solid 2px ${theme.colors.strawberry}`\n : `solid 2px ${theme.colors.liquorice}`};\n box-sizing: border-box;\n border-radius: 1px;\n\n &:before {\n content: '';\n position: absolute;\n display: none;\n top: 9px;\n left: 5px;\n width: 3px;\n height: 8px;\n border-radius: 4px;\n background-color: ${theme.colors.cream};\n -webkit-transform: rotate(316deg);\n -ms-transform: rotate(316deg);\n transform: rotate(316deg);\n }\n\n &:after {\n content: '';\n position: absolute;\n display: none;\n top: 3px;\n left: 11px;\n width: 3px;\n height: 15px;\n border-radius: 4px;\n background-color: ${theme.colors.cream};\n -webkit-transform: rotate(43deg);\n -ms-transform: rotate(43deg);\n transform: rotate(43deg);\n }\n`\n\nconst BoxContainer = styled.label`\n position: relative;\n display: flex;\n align-items: flex-start;\n padding-left: 32px;\n user-select: none;\n cursor: pointer;\n min-height: 24px;\n\n input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n background-color: ${theme.colors.cream};\n\n &:checked ~ ${Checkmark} {\n background-color: ${theme.colors.liquorice};\n border: solid 2px ${theme.colors.liquorice};\n }\n\n &:checked ~ ${Checkmark}:before {\n display: block;\n }\n\n &:checked ~ ${Checkmark}:after {\n display: block;\n }\n\n ${focusOutline({ selector: `&:focus-visible ~ ${Checkmark}` })}\n }\n\n &:hover {\n ${Checkmark} {\n background-color: ${theme.colors.coconut};\n border: solid 2px ${theme.colors.liquorice};\n }\n }\n\n @media (min-width: 768px) {\n padding-left: 32px;\n }\n\n span {\n border-radius: 6px;\n line-height: 24px;\n }\n`\n\nconst ErrorBox = styled.div`\n margin-top: 4px;\n font-size: 12px;\n color: ${theme.colors.strawberry};\n`\n"]}
|
|
@@ -7,7 +7,7 @@ import { StyledFrontIcon } from '../fields/components/CommonInput';
|
|
|
7
7
|
import { theme } from '../theme';
|
|
8
8
|
import { useUniqueId } from '../utils/id';
|
|
9
9
|
import { useControllableState } from '../utils/useControlledState';
|
|
10
|
-
export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder, showDefaultOption = false, customDefaultOption, name, value: valueProp
|
|
10
|
+
export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder, showDefaultOption = false, customDefaultOption, name, value: valueProp, defaultValue, disabled = false, list, onSelect, error = false, onInputChange, onBlur, frontIcon, fallbackStyle, ...fieldProps }, ref) {
|
|
11
11
|
const [value, setValue] = useControllableState({
|
|
12
12
|
initialState: defaultValue,
|
|
13
13
|
stateProp: valueProp,
|
|
@@ -38,7 +38,7 @@ export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder,
|
|
|
38
38
|
onSelect?.(value);
|
|
39
39
|
onInputChange?.(event);
|
|
40
40
|
setValue(value);
|
|
41
|
-
}, "$error": error, ref: ref, onBlur: onBlur, name: name, "$frontIcon": frontIcon, "$fallbackStyle": fallbackStyle, value: value },
|
|
41
|
+
}, "$error": error, ref: ref, onBlur: onBlur, name: name, "$frontIcon": frontIcon, "$fallbackStyle": fallbackStyle, value: value ?? '' },
|
|
42
42
|
hasOptGroups ? (React.createElement("optgroup", { label: defaultOptionLabel() },
|
|
43
43
|
React.createElement("option", { value: "", hidden: !showDefaultOption, disabled: true }, defaultOptionLabel()))) : (React.createElement("option", { value: "", hidden: !showDefaultOption, disabled: true }, defaultOptionLabel())),
|
|
44
44
|
dropdownItemsGroups.map((groupItems, i) => hasOptGroups ? (React.createElement("optgroup", { key: i, label: groupItems[0].optionGroupLabel ?? 'Other' }, groupItems.map((el, j) => (React.createElement("option", { key: `${i}-${j}`, value: el.value }, el.label))))) : (groupItems.map((el, j) => (React.createElement("option", { key: j, value: el.value }, el.label)))))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n FocusEvent,\n FormEvent,\n ForwardedRef,\n forwardRef,\n useMemo,\n} from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { StyledFrontIcon } from '../fields/components/CommonInput'\nimport { theme } from '../theme'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\n\nexport type DropdownItem = {\n optionGroupLabel?: string\n label: string\n value: string\n}\n\nexport interface Props extends CommonFieldProps {\n placeholder?: string\n showDefaultOption?: boolean\n customDefaultOption?: string\n name?: string\n value?: string | null\n defaultValue?: string\n disabled?: boolean\n list: DropdownItem[]\n frontIcon?: Icons\n fallbackStyle?: boolean\n onSelect: (element: string) => void\n onBlur?: (e: FocusEvent<HTMLSelectElement>) => void\n}\n\ntype TruncateProps =\n | {\n onSelect: (e: string) => void\n onInputChange?: (e: FormEvent<HTMLSelectElement>) => void\n }\n | {\n onSelect?: (e: string) => void\n onInputChange: (e: FormEvent<HTMLSelectElement>) => void\n }\n\nexport type DropdownProps = Props & TruncateProps\n\nexport const Dropdown = forwardRef(function Dropdown(\n {\n id: idProp,\n placeholder,\n showDefaultOption = false,\n customDefaultOption,\n name,\n value: valueProp = '',\n defaultValue,\n disabled = false,\n list,\n onSelect,\n error = false,\n onInputChange,\n onBlur,\n frontIcon,\n fallbackStyle,\n ...fieldProps\n }: DropdownProps,\n ref: ForwardedRef<HTMLSelectElement>,\n) {\n const [value, setValue] = useControllableState({\n initialState: defaultValue,\n stateProp: valueProp,\n })\n const id = useUniqueId(idProp)\n const hasOptGroups = list.findIndex((item) => !!item.optionGroupLabel) !== -1\n\n const dropdownItemsGroups = useMemo(() => {\n const itemsPerGroupLabel = new Map<string, DropdownItem[]>()\n\n list.forEach((item) => {\n const key = item.optionGroupLabel ?? ''\n const group = itemsPerGroupLabel.get(key) ?? []\n\n group.push(item)\n itemsPerGroupLabel.set(key, group)\n })\n\n return Array.from(itemsPerGroupLabel.values())\n }, [list])\n\n const defaultOptionLabel = () => {\n if (!showDefaultOption) {\n return placeholder\n }\n return customDefaultOption ?? 'Select an option'\n }\n\n return (\n <Field {...fieldProps} htmlFor={id} error={error}>\n <Box flex alignItems=\"center\" style={{ position: 'relative' }}>\n {frontIcon && (\n <StyledFrontIcon\n $disabled={disabled}\n render={frontIcon}\n color=\"sesame\"\n />\n )}\n <StyledSelect\n id={id}\n disabled={disabled || list.length < 1}\n onChange={(event) => {\n const value = event.currentTarget.value\n\n onSelect?.(value)\n onInputChange?.(event)\n setValue(value)\n }}\n $error={error}\n ref={ref}\n onBlur={onBlur}\n name={name}\n $frontIcon={frontIcon}\n $fallbackStyle={fallbackStyle}\n value={value}\n >\n {hasOptGroups ? (\n <optgroup label={defaultOptionLabel()}>\n <option value=\"\" hidden={!showDefaultOption} disabled>\n {defaultOptionLabel()}\n </option>\n </optgroup>\n ) : (\n <option value=\"\" hidden={!showDefaultOption} disabled>\n {defaultOptionLabel()}\n </option>\n )}\n\n {dropdownItemsGroups.map((groupItems, i) =>\n hasOptGroups ? (\n <optgroup\n key={i}\n label={groupItems[0].optionGroupLabel ?? 'Other'}\n >\n {groupItems.map((el, j) => (\n <option key={`${i}-${j}`} value={el.value}>\n {el.label}\n </option>\n ))}\n </optgroup>\n ) : (\n groupItems.map((el, j) => (\n <option key={j} value={el.value}>\n {el.label}\n </option>\n ))\n ),\n )}\n </StyledSelect>\n <Caret>\n <Icon render=\"caret\" color=\"marzipan\" size={24} />\n </Caret>\n </Box>\n </Field>\n )\n})\n\nconst resetSelect = css`\n border: none;\n border-radius: 0;\n font-size: 16px;\n appearance: none; /* remove default arrow */\n outline: none;\n`\n\ninterface SSelect {\n $error: boolean\n $frontIcon?: string\n $fallbackStyle?: boolean\n value?: string | null\n}\n\nconst StyledSelect = styled.select<SSelect>`\n ${resetSelect}\n width: 100%;\n height: 32px;\n color: ${({ value }) =>\n value === '' ? theme.colors.sesame : theme.colors.liquorice};\n cursor: pointer;\n background-color: ${({ $fallbackStyle }) =>\n $fallbackStyle ? theme.colors.custard : theme.colors.cream};\n\n border-radius: 12px;\n padding: 18px 14px;\n border: 2px solid\n ${({ $error }) => ($error ? theme.colors.strawberry : theme.colors.oatmeal)};\n height: auto;\n\n ${({ $frontIcon }) =>\n $frontIcon &&\n $frontIcon != '' &&\n `\n padding-left: 42px;\n `}\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n ${({ $error }) =>\n !$error &&\n css`\n :not(:disabled) {\n &:hover,\n &:focus,\n &:focus-visible,\n &:checked {\n border-color: ${theme.colors.marzipan}\n }\n `}\n`\n\nconst Caret = styled.div`\n position: absolute;\n z-index: 1;\n right: 15px;\n pointer-events: none;\n color: ${theme.colors.marzipan};\n`\n"]}
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n FocusEvent,\n FormEvent,\n ForwardedRef,\n forwardRef,\n useMemo,\n} from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { StyledFrontIcon } from '../fields/components/CommonInput'\nimport { theme } from '../theme'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\n\nexport type DropdownItem = {\n optionGroupLabel?: string\n label: string\n value: string\n}\n\nexport interface Props extends CommonFieldProps {\n placeholder?: string\n showDefaultOption?: boolean\n customDefaultOption?: string\n name?: string\n value?: string | null\n defaultValue?: string\n disabled?: boolean\n list: DropdownItem[]\n frontIcon?: Icons\n fallbackStyle?: boolean\n onSelect: (element: string) => void\n onBlur?: (e: FocusEvent<HTMLSelectElement>) => void\n}\n\ntype TruncateProps =\n | {\n onSelect: (e: string) => void\n onInputChange?: (e: FormEvent<HTMLSelectElement>) => void\n }\n | {\n onSelect?: (e: string) => void\n onInputChange: (e: FormEvent<HTMLSelectElement>) => void\n }\n\nexport type DropdownProps = Props & TruncateProps\n\nexport const Dropdown = forwardRef(function Dropdown(\n {\n id: idProp,\n placeholder,\n showDefaultOption = false,\n customDefaultOption,\n name,\n value: valueProp,\n defaultValue,\n disabled = false,\n list,\n onSelect,\n error = false,\n onInputChange,\n onBlur,\n frontIcon,\n fallbackStyle,\n ...fieldProps\n }: DropdownProps,\n ref: ForwardedRef<HTMLSelectElement>,\n) {\n const [value, setValue] = useControllableState({\n initialState: defaultValue,\n stateProp: valueProp,\n })\n const id = useUniqueId(idProp)\n const hasOptGroups = list.findIndex((item) => !!item.optionGroupLabel) !== -1\n\n const dropdownItemsGroups = useMemo(() => {\n const itemsPerGroupLabel = new Map<string, DropdownItem[]>()\n\n list.forEach((item) => {\n const key = item.optionGroupLabel ?? ''\n const group = itemsPerGroupLabel.get(key) ?? []\n\n group.push(item)\n itemsPerGroupLabel.set(key, group)\n })\n\n return Array.from(itemsPerGroupLabel.values())\n }, [list])\n\n const defaultOptionLabel = () => {\n if (!showDefaultOption) {\n return placeholder\n }\n return customDefaultOption ?? 'Select an option'\n }\n\n return (\n <Field {...fieldProps} htmlFor={id} error={error}>\n <Box flex alignItems=\"center\" style={{ position: 'relative' }}>\n {frontIcon && (\n <StyledFrontIcon\n $disabled={disabled}\n render={frontIcon}\n color=\"sesame\"\n />\n )}\n <StyledSelect\n id={id}\n disabled={disabled || list.length < 1}\n onChange={(event) => {\n const value = event.currentTarget.value\n\n onSelect?.(value)\n onInputChange?.(event)\n setValue(value)\n }}\n $error={error}\n ref={ref}\n onBlur={onBlur}\n name={name}\n $frontIcon={frontIcon}\n $fallbackStyle={fallbackStyle}\n value={value ?? ''}\n >\n {hasOptGroups ? (\n <optgroup label={defaultOptionLabel()}>\n <option value=\"\" hidden={!showDefaultOption} disabled>\n {defaultOptionLabel()}\n </option>\n </optgroup>\n ) : (\n <option value=\"\" hidden={!showDefaultOption} disabled>\n {defaultOptionLabel()}\n </option>\n )}\n\n {dropdownItemsGroups.map((groupItems, i) =>\n hasOptGroups ? (\n <optgroup\n key={i}\n label={groupItems[0].optionGroupLabel ?? 'Other'}\n >\n {groupItems.map((el, j) => (\n <option key={`${i}-${j}`} value={el.value}>\n {el.label}\n </option>\n ))}\n </optgroup>\n ) : (\n groupItems.map((el, j) => (\n <option key={j} value={el.value}>\n {el.label}\n </option>\n ))\n ),\n )}\n </StyledSelect>\n <Caret>\n <Icon render=\"caret\" color=\"marzipan\" size={24} />\n </Caret>\n </Box>\n </Field>\n )\n})\n\nconst resetSelect = css`\n border: none;\n border-radius: 0;\n font-size: 16px;\n appearance: none; /* remove default arrow */\n outline: none;\n`\n\ninterface SSelect {\n $error: boolean\n $frontIcon?: string\n $fallbackStyle?: boolean\n value?: string | null\n}\n\nconst StyledSelect = styled.select<SSelect>`\n ${resetSelect}\n width: 100%;\n height: 32px;\n color: ${({ value }) =>\n value === '' ? theme.colors.sesame : theme.colors.liquorice};\n cursor: pointer;\n background-color: ${({ $fallbackStyle }) =>\n $fallbackStyle ? theme.colors.custard : theme.colors.cream};\n\n border-radius: 12px;\n padding: 18px 14px;\n border: 2px solid\n ${({ $error }) => ($error ? theme.colors.strawberry : theme.colors.oatmeal)};\n height: auto;\n\n ${({ $frontIcon }) =>\n $frontIcon &&\n $frontIcon != '' &&\n `\n padding-left: 42px;\n `}\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n ${({ $error }) =>\n !$error &&\n css`\n :not(:disabled) {\n &:hover,\n &:focus,\n &:focus-visible,\n &:checked {\n border-color: ${theme.colors.marzipan}\n }\n `}\n`\n\nconst Caret = styled.div`\n position: absolute;\n z-index: 1;\n right: 15px;\n pointer-events: none;\n color: ${theme.colors.marzipan};\n`\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.6.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@testing-library/react": "^16.3.0",
|
|
56
56
|
"@types/body-scroll-lock": "^3.1.0",
|
|
57
57
|
"@types/dompurify": "^3.2.0",
|
|
58
|
-
"@types/node": "^22.15.
|
|
58
|
+
"@types/node": "^22.15.17",
|
|
59
59
|
"@types/react": "^19.1.3",
|
|
60
60
|
"@types/react-dom": "^19.1.3",
|
|
61
61
|
"@typescript-eslint/eslint-plugin": "^8.31.1",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"axe-playwright": "^2.1.0",
|
|
64
64
|
"conventional-changelog-conventionalcommits": "^8.0.0",
|
|
65
65
|
"eslint": "^9.26.0",
|
|
66
|
-
"eslint-config-prettier": "^10.1.
|
|
66
|
+
"eslint-config-prettier": "^10.1.4",
|
|
67
67
|
"eslint-plugin-prettier": "^5.4.0",
|
|
68
68
|
"eslint-plugin-react": "^7.37.5",
|
|
69
69
|
"eslint-plugin-react-hooks": "^5.2.0",
|