@mrshmllw/smores-react 12.5.0 → 12.6.1-crumbs-feature-fix-table-padding.1
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.
- package/dist/CheckBox/CheckBox.js +4 -2
- package/dist/CheckBox/CheckBox.js.map +1 -1
- package/dist/Dropdown/Dropdown.js +2 -2
- package/dist/Dropdown/Dropdown.js.map +1 -1
- package/dist/Table/components/commonComponents.js +4 -16
- package/dist/Table/components/commonComponents.js.map +1 -1
- package/dist/Table/helper.types.d.ts +2 -2
- package/dist/Table/helper.types.js.map +1 -1
- package/dist/Table/types.d.ts +3 -3
- package/dist/Table/types.js.map +1 -1
- package/package.json +9 -9
|
@@ -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":"AAAA,OAAO,KAAK,EAAE,EAIZ,UAAU,EACV,OAAO,GACR,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAmClE,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EACE,EAAE,EAAE,MAAM,EACV,WAAW,EACX,iBAAiB,GAAG,KAAK,EACzB,mBAAmB,EACnB,IAAI,EACJ,KAAK,EAAE,SAAS,GAAG,EAAE,EACrB,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,KAAK,EACb,aAAa,EACb,MAAM,EACN,SAAS,EACT,aAAa,EACb,GAAG,UAAU,EACC,EAChB,GAAoC;IAEpC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,oBAAoB,CAAC;QAC7C,YAAY,EAAE,YAAY;QAC1B,SAAS,EAAE,SAAS;KACrB,CAAC,CAAA;IACF,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAA;IAE7E,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,kBAAkB,GAAG,IAAI,GAAG,EAA0B,CAAA;QAE5D,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACpB,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAA;YACvC,MAAM,KAAK,GAAG,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,CAAA;YAE/C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAChB,kBAAkB,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QACpC,CAAC,CAAC,CAAA;QAEF,OAAO,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,CAAC,CAAA;IAChD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACvB,OAAO,WAAW,CAAA;QACpB,CAAC;QACD,OAAO,mBAAmB,IAAI,kBAAkB,CAAA;IAClD,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,OAAK,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK;QAC9C,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;YAC1D,SAAS,IAAI,CACZ,oBAAC,eAAe,iBACH,QAAQ,EACnB,MAAM,EAAE,SAAS,EACjB,KAAK,EAAC,QAAQ,GACd,CACH;YACD,oBAAC,YAAY,IACX,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAA;oBAEvC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAA;oBACjB,aAAa,EAAE,CAAC,KAAK,CAAC,CAAA;oBACtB,QAAQ,CAAC,KAAK,CAAC,CAAA;gBACjB,CAAC,YACO,KAAK,EACb,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,gBACE,SAAS,oBACL,aAAa,EAC7B,KAAK,EAAE,KAAK;gBAEX,YAAY,CAAC,CAAC,CAAC,CACd,kCAAU,KAAK,EAAE,kBAAkB,EAAE;oBACnC,gCAAQ,KAAK,EAAC,EAAE,EAAC,MAAM,EAAE,CAAC,iBAAiB,EAAE,QAAQ,UAClD,kBAAkB,EAAE,CACd,CACA,CACZ,CAAC,CAAC,CAAC,CACF,gCAAQ,KAAK,EAAC,EAAE,EAAC,MAAM,EAAE,CAAC,iBAAiB,EAAE,QAAQ,UAClD,kBAAkB,EAAE,CACd,CACV;gBAEA,mBAAmB,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,CACzC,YAAY,CAAC,CAAC,CAAC,CACb,kCACE,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,gBAAgB,IAAI,OAAO,IAE/C,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CACzB,gCAAQ,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,IACtC,EAAE,CAAC,KAAK,CACF,CACV,CAAC,CACO,CACZ,CAAC,CAAC,CAAC,CACF,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CACxB,gCAAQ,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,IAC5B,EAAE,CAAC,KAAK,CACF,CACV,CAAC,CACH,CACF,CACY;YACf,oBAAC,KAAK;gBACJ,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,EAAE,GAAI,CAC5C,CACJ,CACA,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;CAMtB,CAAA;AASD,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAS;IACvC,WAAW;;;WAGJ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACrB,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS;;sBAEzC,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACzC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;MAKxD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;IAG3E,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CACnB,UAAU;IACV,UAAU,IAAI,EAAE;IAChB;;KAEC;;;;;;;IAOD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACf,CAAC,MAAM;IACP,GAAG,CAAA;;;;;;0BAMmB,KAAK,CAAC,MAAM,CAAC,QAAQ;;KAE1C;CACJ,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;WAKb,KAAK,CAAC,MAAM,CAAC,QAAQ;CAC/B,CAAA","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"]}
|
|
@@ -60,10 +60,10 @@ export const StyledHeaderCell = styled.th `
|
|
|
60
60
|
`;
|
|
61
61
|
export const StyledCell = styled.td `
|
|
62
62
|
vertical-align: middle;
|
|
63
|
-
padding-left: 8px;
|
|
64
|
-
padding-right: 8px;
|
|
65
|
-
padding-top: 8px;
|
|
66
|
-
padding-bottom: 8px;
|
|
63
|
+
padding-left: ${({ $columnPadding }) => $columnPadding ?? '8px'};
|
|
64
|
+
padding-right: ${({ $columnPadding }) => $columnPadding ?? '8px'};
|
|
65
|
+
padding-top: ${({ $rowPadding }) => $rowPadding ?? '8px'};
|
|
66
|
+
padding-bottom: ${({ $rowPadding }) => $rowPadding ?? '8px'};
|
|
67
67
|
|
|
68
68
|
${({ $hideOverflow }) => $hideOverflow &&
|
|
69
69
|
css `
|
|
@@ -88,18 +88,6 @@ export const StyledCell = styled.td `
|
|
|
88
88
|
right: 0;
|
|
89
89
|
`};
|
|
90
90
|
|
|
91
|
-
${({ $rowPadding }) => $rowPadding &&
|
|
92
|
-
css `
|
|
93
|
-
padding-top: ${$rowPadding};
|
|
94
|
-
padding-bottom: ${$rowPadding};
|
|
95
|
-
`};
|
|
96
|
-
|
|
97
|
-
${({ $columnPadding }) => $columnPadding &&
|
|
98
|
-
css `
|
|
99
|
-
padding-left: ${$columnPadding};
|
|
100
|
-
padding-right: ${$columnPadding};
|
|
101
|
-
`};
|
|
102
|
-
|
|
103
91
|
${({ $maxWidth }) => $maxWidth &&
|
|
104
92
|
css `
|
|
105
93
|
max-width: ${$maxWidth};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,KAAK,EAAc,MAAM,aAAa,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAO5D,MAAM,QAAQ,GAAG,CAAC,KAAc,EAAmB,EAAE,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAA;AAE/E,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAkB;;;;;gBAKzC,KAAK,CAAC,MAAM,CAAC,OAAO;;;IAGhC,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,GAAG,CAAA;uBACgB,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM;;KAElE;CACJ,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,EAAE,CAAkC;gBAC3D,KAAK,CAAC,MAAM,CAAC,OAAO;mBACjB,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACnC,WAAW,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,MAAM;cAClD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;IAKlE,gBAAgB,CAAC,KAAK;;;;;;IAMtB,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CACrB,YAAY;IACZ,GAAG,CAAA;oBACa,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;KACzC;;IAED,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,GAAG,CAAA;gBACS,aAAa;KACxB;;IAED,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT,GAAG,CAAA;mBACY,SAAS;KACvB;;IAED,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT,GAAG,CAAA;mBACY,SAAS;KACvB;;IAED,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACvB,cAAc;IACd,GAAG,CAAA;sBACe,cAAc;uBACb,cAAc;KAChC;CACJ,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAkC
|
|
1
|
+
{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { fontStyleMapping } from '../../Text/fontMapping'\nimport { theme, type Color } from '../../theme'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { TableStylesProps, type TableProps } from '../types'\n\ntype StyledTableProps = {\n $roundedTable: TableProps<unknown>['roundedTable']\n}\n\nconst isString = (value: unknown): value is string => typeof value === 'string'\n\nexport const StyledTable = styled.table<StyledTableProps>`\n width: 100%;\n height: 100%;\n border-collapse: collapse;\n overflow: auto;\n background: ${theme.colors.coconut};\n border-spacing: 30px;\n\n ${({ $roundedTable }) =>\n $roundedTable &&\n css`\n border-radius: ${isString($roundedTable) ? $roundedTable : '16px'};\n overflow: hidden;\n `}\n`\n\nexport const StyledHeaderCell = styled.th<TransientProps<TableStylesProps>>`\n background: ${theme.colors.coconut};\n border-bottom: ${({ $hasKeyline }) =>\n $hasKeyline ? `1px solid ${theme.colors.liquorice}` : 'none'};\n position: ${({ $fixedHeader }) => ($fixedHeader ? 'sticky' : 'auto')};\n top: 0;\n z-index: 2;\n text-align: left;\n vertical-align: bottom;\n ${fontStyleMapping.label};\n padding-left: 8px;\n padding-right: 8px;\n padding-top: 8px;\n padding-bottom: 8px;\n\n ${({ $headerColor }) =>\n $headerColor &&\n css`\n background: ${theme.colors[$headerColor]};\n `}\n\n ${({ $headerHeight }) =>\n $headerHeight &&\n css`\n height: ${$headerHeight};\n `}\n\n ${({ $maxWidth }) =>\n $maxWidth &&\n css`\n max-width: ${$maxWidth};\n `}\n\n ${({ $minWidth }) =>\n $minWidth &&\n css`\n min-width: ${$minWidth};\n `}\n \n ${({ $columnPadding }) =>\n $columnPadding &&\n css`\n padding-left: ${$columnPadding};\n padding-right: ${$columnPadding};\n `};\n`\n\nexport const StyledCell = styled.td<TransientProps<TableStylesProps>>`\n vertical-align: middle;\n padding-left: ${({ $columnPadding }) => $columnPadding ?? '8px'};\n padding-right: ${({ $columnPadding }) => $columnPadding ?? '8px'};\n padding-top: ${({ $rowPadding }) => $rowPadding ?? '8px'};\n padding-bottom: ${({ $rowPadding }) => $rowPadding ?? '8px'};\n\n ${({ $hideOverflow }) =>\n $hideOverflow &&\n css`\n overflow: hidden;\n `};\n\n ${({ $noWrapContent }) =>\n $noWrapContent &&\n css`\n white-space: nowrap;\n `};\n\n ${({ $truncateContent }) =>\n $truncateContent &&\n css`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n `};\n\n ${({ $stickyCell }) =>\n $stickyCell &&\n css`\n position: sticky;\n right: 0;\n `};\n\n ${({ $maxWidth }) =>\n $maxWidth &&\n css`\n max-width: ${$maxWidth};\n `}\n\n ${({ $rowActionsBgColor }) =>\n $rowActionsBgColor &&\n css`\n background: ${theme.colors[$rowActionsBgColor]};\n `}\n`\n\nexport const StyledRow = styled.tr<TransientProps<TableStylesProps>>`\n background: ${theme.colors.custard};\n\n ${({ $rowBorderColor, $noRowBorderColor }) =>\n $rowBorderColor &&\n !$noRowBorderColor &&\n css`\n border-bottom: 1px solid ${theme.colors[$rowBorderColor]};\n `}\n\n ${({ $rowColor }) =>\n $rowColor &&\n css`\n background: ${theme.colors[$rowColor]};\n `}\n\n ${({ $stripedColor }) =>\n $stripedColor &&\n css`\n &:nth-child(even) {\n background: ${theme.colors[$stripedColor]};\n }\n `}\n\n ${({ $clickableRow, $rowColor }) =>\n $clickableRow &&\n css`\n cursor: pointer;\n &:hover {\n background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};\n }\n &:focus-visible {\n ${focusOutlineStyle}\n background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};\n }\n `}\n`\n\ntype StyledSubTableCellProps = {\n $bgColor?: Color\n $padding?: string | undefined\n $rowBorderColor?: Color\n}\n\ntype StyledSubInnerCellProps = {\n $padding?: string | undefined\n}\n\nexport const StyledSubTableCell = styled.td<StyledSubTableCellProps>`\n padding: ${({ $padding }) => $padding ?? '12px 0'};\n\n ${({ $rowBorderColor }) =>\n $rowBorderColor &&\n css`\n border-bottom: 1px solid ${theme.colors[$rowBorderColor]};\n `}\n\n ${({ $bgColor }) =>\n $bgColor && `background-color: ${theme.colors[$bgColor]};`}\n`\n\nexport const StyledSubInnerCell = styled.div<StyledSubInnerCellProps>`\n padding: ${({ $padding }) => $padding ?? '12px 0'};\n`\n"]}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* @example '0' | '12px' | '24px'
|
|
5
5
|
*/
|
|
6
6
|
type PixelSuffix = `${number}px`;
|
|
7
|
-
type
|
|
7
|
+
export type SingleSpacing = '0' | PixelSuffix;
|
|
8
8
|
/**
|
|
9
9
|
* A type that represents a padding value with the "px" suffix.
|
|
10
10
|
*
|
|
@@ -13,5 +13,5 @@ type Spacing = '0' | PixelSuffix;
|
|
|
13
13
|
*
|
|
14
14
|
* @example '0' | '12px' | '24px' | '12px 24px' | '12px 0 36px' | '12px 24px 36px 48px'
|
|
15
15
|
*/
|
|
16
|
-
export type BoxSpacing =
|
|
16
|
+
export type BoxSpacing = SingleSpacing | `${SingleSpacing} ${SingleSpacing}` | `${SingleSpacing} ${SingleSpacing} ${SingleSpacing}` | `${SingleSpacing} ${SingleSpacing} ${SingleSpacing} ${SingleSpacing}`;
|
|
17
17
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helper.types.js","sourceRoot":"","sources":["../../src/Table/helper.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * A type that represents a pixel value with the \"px\" suffix.\n *\n * @example '0' | '12px' | '24px'\n */\ntype PixelSuffix = `${number}px`\n\
|
|
1
|
+
{"version":3,"file":"helper.types.js","sourceRoot":"","sources":["../../src/Table/helper.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * A type that represents a pixel value with the \"px\" suffix.\n *\n * @example '0' | '12px' | '24px'\n */\ntype PixelSuffix = `${number}px`\n\nexport type SingleSpacing = '0' | PixelSuffix\n/**\n * A type that represents a padding value with the \"px\" suffix.\n *\n * The value can be a single value, or a string with 2, 3, or 4 values.\n * The values are applied in the following order: top, right, bottom, left.\n *\n * @example '0' | '12px' | '24px' | '12px 24px' | '12px 0 36px' | '12px 24px 36px 48px'\n */\nexport type BoxSpacing =\n | SingleSpacing\n | `${SingleSpacing} ${SingleSpacing}`\n | `${SingleSpacing} ${SingleSpacing} ${SingleSpacing}`\n | `${SingleSpacing} ${SingleSpacing} ${SingleSpacing} ${SingleSpacing}`\n"]}
|
package/dist/Table/types.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import React, { ReactElement, ReactNode } from 'react';
|
|
|
2
2
|
import { ButtonProps } from '../Button/Button';
|
|
3
3
|
import { IconStrictProps } from '../IconStrict';
|
|
4
4
|
import { Color } from '../theme';
|
|
5
|
-
import type { BoxSpacing } from './helper.types';
|
|
5
|
+
import type { BoxSpacing, SingleSpacing } from './helper.types';
|
|
6
6
|
export type TableStylesProps = {
|
|
7
7
|
hasKeyline?: boolean;
|
|
8
8
|
fixedHeader?: boolean;
|
|
@@ -94,9 +94,9 @@ interface CommonTableProps<T> {
|
|
|
94
94
|
/** Array of actions that can be performed on each row. */
|
|
95
95
|
rowActions?: RowActions<T>;
|
|
96
96
|
/** The Y padding for each row. */
|
|
97
|
-
rowPadding?:
|
|
97
|
+
rowPadding?: SingleSpacing;
|
|
98
98
|
/** The X padding for each row. */
|
|
99
|
-
columnPadding?:
|
|
99
|
+
columnPadding?: SingleSpacing;
|
|
100
100
|
/** Hides the table header. Table defaults to always showing the header. */
|
|
101
101
|
hideTableHeader?: boolean;
|
|
102
102
|
}
|
package/dist/Table/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import React, { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport { Color } from '../theme'\nimport type { BoxSpacing } from './helper.types'\n\nexport type TableStylesProps = {\n hasKeyline?: boolean\n fixedHeader?: boolean\n headerHeight?: string\n stripedColor?: Color\n stickyCell?: boolean\n headerColor?: Color\n rowColor?: Color\n rowBorderColor?: Color\n rowActionsBgColor?: Color\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n rowPadding?: string\n columnPadding?: string\n hideOverflow?: boolean\n clickableRow?: boolean\n noRowBorderColor?: boolean\n}\n\nexport type Primitive = string | number | boolean | bigint\n\nexport type BaseRowAction<T> = {\n onClick: (rowData: T) => void\n showCondition?: (rowData: T) => boolean\n}\n\nexport type RowAction<T> =\n | RowActionButtonDefault<T>\n | RowActionElementOverride<T>\n\nexport type RowActionButtonDefault<T> = {\n iconButton?: Pick<\n IconStrictProps,\n 'size' | 'render' | 'iconColor' | 'backgroundColor' | 'id' | 'title'\n > & { tooltipText?: string }\n genericButton?: Pick<\n ButtonProps,\n | 'children'\n | 'loading'\n | 'disabled'\n | 'primary'\n | 'secondary'\n | 'fallbackStyle'\n | 'textBtn'\n | 'smallButton'\n | 'id'\n >\n} & BaseRowAction<T>\n\nexport type RowActionElementOverride<T> = {\n element: ReactElement<any>\n} & BaseRowAction<T>\n\nexport type RowActions<T> = {\n actions: RowAction<T>[]\n minWidth?: string\n bgColor?: Color\n}\n\ntype RowCellRenderer<T> = (\n row: T,\n rowIndex: number,\n column: TableColumn<T>,\n id: string | number,\n) => React.ReactNode\n\nexport interface TableColumn<T> {\n name?: string | number | React.ReactNode\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n hideOverflow?: boolean\n cell?: RowCellRenderer<T>\n}\n\ntype SubElementProps = {\n bgColor?: Color\n padding?: BoxSpacing\n margin?: BoxSpacing\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T> {\n /** Array of columns to display in the table. */\n columns: TableColumn<T>[]\n /** Sets the height of the header. */\n headerHeight?: string\n /** If true, the table header will be fixed/sticky. */\n fixedHeader?: boolean\n /** If true, the table header will have a key line. */\n hasKeyline?: boolean\n /** If present, the table rows will have alternating colors. */\n stripedColor?: Color\n /** A function to determine if a row is expandable. */\n expandable?: (rowData: T) => boolean\n /** The color for the table header. */\n headerColor?: Color\n /** The default color for each table row. */\n rowColor?: Color\n /** The default color for each table row border. */\n rowBorderColor?: Color\n /** If true, the table will have rounded corners */\n roundedTable?: true\n /** A React element to show when a row is expanded. */\n subTable?: SubElementProps & {\n table: (rowData: T) => ReactElement<any>\n }\n /** Settings for sub rows. */\n subRows?: SubElementProps & {\n /** Function that returns a React element for the sub row. */\n rows: (rowData: T) => ReactElement<any> | ReactElement<any>[]\n }\n /** Function to apply to a row, to make the entire row clickable, useful for navigation. */\n clickableRow?: (rowData: T) => void\n /** Array of actions that can be performed on each row. */\n rowActions?: RowActions<T>\n /** The Y padding for each row. */\n rowPadding?:
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import React, { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport { Color } from '../theme'\nimport type { BoxSpacing, SingleSpacing } from './helper.types'\n\nexport type TableStylesProps = {\n hasKeyline?: boolean\n fixedHeader?: boolean\n headerHeight?: string\n stripedColor?: Color\n stickyCell?: boolean\n headerColor?: Color\n rowColor?: Color\n rowBorderColor?: Color\n rowActionsBgColor?: Color\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n rowPadding?: string\n columnPadding?: string\n hideOverflow?: boolean\n clickableRow?: boolean\n noRowBorderColor?: boolean\n}\n\nexport type Primitive = string | number | boolean | bigint\n\nexport type BaseRowAction<T> = {\n onClick: (rowData: T) => void\n showCondition?: (rowData: T) => boolean\n}\n\nexport type RowAction<T> =\n | RowActionButtonDefault<T>\n | RowActionElementOverride<T>\n\nexport type RowActionButtonDefault<T> = {\n iconButton?: Pick<\n IconStrictProps,\n 'size' | 'render' | 'iconColor' | 'backgroundColor' | 'id' | 'title'\n > & { tooltipText?: string }\n genericButton?: Pick<\n ButtonProps,\n | 'children'\n | 'loading'\n | 'disabled'\n | 'primary'\n | 'secondary'\n | 'fallbackStyle'\n | 'textBtn'\n | 'smallButton'\n | 'id'\n >\n} & BaseRowAction<T>\n\nexport type RowActionElementOverride<T> = {\n element: ReactElement<any>\n} & BaseRowAction<T>\n\nexport type RowActions<T> = {\n actions: RowAction<T>[]\n minWidth?: string\n bgColor?: Color\n}\n\ntype RowCellRenderer<T> = (\n row: T,\n rowIndex: number,\n column: TableColumn<T>,\n id: string | number,\n) => React.ReactNode\n\nexport interface TableColumn<T> {\n name?: string | number | React.ReactNode\n minWidth?: string\n maxWidth?: string\n noWrapContent?: boolean\n truncateContent?: boolean\n hideOverflow?: boolean\n cell?: RowCellRenderer<T>\n}\n\ntype SubElementProps = {\n bgColor?: Color\n padding?: BoxSpacing\n margin?: BoxSpacing\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T> {\n /** Array of columns to display in the table. */\n columns: TableColumn<T>[]\n /** Sets the height of the header. */\n headerHeight?: string\n /** If true, the table header will be fixed/sticky. */\n fixedHeader?: boolean\n /** If true, the table header will have a key line. */\n hasKeyline?: boolean\n /** If present, the table rows will have alternating colors. */\n stripedColor?: Color\n /** A function to determine if a row is expandable. */\n expandable?: (rowData: T) => boolean\n /** The color for the table header. */\n headerColor?: Color\n /** The default color for each table row. */\n rowColor?: Color\n /** The default color for each table row border. */\n rowBorderColor?: Color\n /** If true, the table will have rounded corners */\n roundedTable?: true\n /** A React element to show when a row is expanded. */\n subTable?: SubElementProps & {\n table: (rowData: T) => ReactElement<any>\n }\n /** Settings for sub rows. */\n subRows?: SubElementProps & {\n /** Function that returns a React element for the sub row. */\n rows: (rowData: T) => ReactElement<any> | ReactElement<any>[]\n }\n /** Function to apply to a row, to make the entire row clickable, useful for navigation. */\n clickableRow?: (rowData: T) => void\n /** Array of actions that can be performed on each row. */\n rowActions?: RowActions<T>\n /** The Y padding for each row. */\n rowPadding?: SingleSpacing\n /** The X padding for each row. */\n columnPadding?: SingleSpacing\n /** Hides the table header. Table defaults to always showing the header. */\n hideTableHeader?: boolean\n}\n\nexport interface TableProps<T> extends CommonTableProps<T> {\n /** Array of data to be displayed in the table. */\n data: T[]\n /** The text to show when there is no available data to map through. */\n noDataContent?: ReactNode\n}\n\nexport interface TableRowProps<T> extends CommonTableProps<T> {\n rowData: T\n rowIndex: number\n showActions?: boolean\n hideBorder?: boolean\n}\n\nexport interface RowActionsProps<T>\n extends Pick<CommonTableProps<T>, 'expandable' | 'rowActions'> {\n rowData: T\n canExpandRow: boolean\n toggleExpansion: () => void\n isExpanded?: boolean\n}\n\nexport type TableHeaderProps<T> = CommonTableProps<T>\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.6.1-crumbs-feature-fix-table-padding.1",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -55,15 +55,15 @@
|
|
|
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.
|
|
59
|
-
"@types/react": "^19.1.
|
|
60
|
-
"@types/react-dom": "^19.1.
|
|
61
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
62
|
-
"@typescript-eslint/parser": "^8.
|
|
58
|
+
"@types/node": "^22.15.17",
|
|
59
|
+
"@types/react": "^19.1.4",
|
|
60
|
+
"@types/react-dom": "^19.1.4",
|
|
61
|
+
"@typescript-eslint/eslint-plugin": "^8.32.1",
|
|
62
|
+
"@typescript-eslint/parser": "^8.32.1",
|
|
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.5",
|
|
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",
|
|
@@ -79,13 +79,13 @@
|
|
|
79
79
|
"storybook": "^8.0.4",
|
|
80
80
|
"styled-components": "^6.1.18",
|
|
81
81
|
"typescript": "^5.8.3",
|
|
82
|
-
"typescript-eslint": "^8.32.
|
|
82
|
+
"typescript-eslint": "^8.32.1",
|
|
83
83
|
"vite": "^6.3.5",
|
|
84
84
|
"vitest": "^3.1.3"
|
|
85
85
|
},
|
|
86
86
|
"dependencies": {
|
|
87
87
|
"@floating-ui/react": "0.27.8",
|
|
88
|
-
"@lexical/react": "^0.31.
|
|
88
|
+
"@lexical/react": "^0.31.1",
|
|
89
89
|
"body-scroll-lock": "^4.0.0-beta.0",
|
|
90
90
|
"date-fns": "^4.1.0",
|
|
91
91
|
"dompurify": "^3.2.5",
|