@mrshmllw/smores-react 14.4.0 → 14.5.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.
- package/dist/RadioGroup/RadioGroup.d.ts +1 -1
- package/dist/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/RadioGroup/RadioItem.d.ts +2 -2
- package/dist/RadioGroup/RadioItem.js +1 -1
- package/dist/RadioGroup/RadioItem.js.map +1 -1
- package/dist/Table/types.js.map +1 -1
- package/dist/TextDateOfBirthInput/TextDateOfBirthInput.js.map +1 -1
- package/package.json +13 -13
|
@@ -10,7 +10,7 @@ export type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {
|
|
|
10
10
|
iconComponent?: ReactNode;
|
|
11
11
|
label: string;
|
|
12
12
|
value: Value;
|
|
13
|
-
bodyCopy?: string;
|
|
13
|
+
bodyCopy?: string | ReactElement;
|
|
14
14
|
disabled?: boolean;
|
|
15
15
|
}>;
|
|
16
16
|
justifyContent?: JustifyContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FocusEvent,\n ForwardedRef,\n forwardRef,\n ReactElement,\n ReactNode,\n RefAttributes,\n RefObject,\n useImperativeHandle,\n useRef,\n} from 'react'\n\nimport styled from 'styled-components'\n\nimport { useUniqueId } from '../utils/id'\n\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { Fieldset } from '../fields/Fieldset'\n\nimport { ITEM_GAP } from './constants'\nimport { RadioItem } from './RadioItem'\nimport {\n BaseValueType,\n DisplayType,\n IconPosition,\n ItemWidth,\n JustifyContent,\n} from './types'\nimport { TransientProps } from 'utils/utilTypes'\nimport { Icons } from '../Icon'\n\nexport type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {\n options: Array<{\n visual?: string\n icon?: Icons\n iconPosition?: IconPosition\n iconComponent?: ReactNode\n label: string\n value: Value\n bodyCopy?: string\n disabled?: boolean\n }>\n justifyContent?: JustifyContent\n itemWidth?: ItemWidth\n onChange: (value: Value) => void\n onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n value: Value\n displayType?: DisplayType\n fallbackStyle?: boolean\n} & CommonFieldProps\n\nexport type RadioGroupElement = {\n focus: VoidFunction\n}\n\nconst RadioGroupComponent = <Value extends BaseValueType>(\n {\n options,\n onChange,\n onBlur,\n value,\n displayType = 'normal',\n renderAsTitle = false,\n error = false,\n fallbackStyle = false,\n justifyContent,\n itemWidth,\n ...fieldProps\n }: RadioGroupProps<Value>,\n ref: ForwardedRef<RadioGroupElement>,\n) => {\n const name = useUniqueId()\n\n const optionRefs = useRef<RefObject<HTMLInputElement | null>[]>([])\n useImperativeHandle(ref, () => {\n return {\n focus: () => {\n const selectedIndex = options.findIndex((item) => item.value === value)\n\n const elementToFocus = selectedIndex === -1 ? 0 : selectedIndex\n optionRefs.current[elementToFocus].current?.focus()\n },\n }\n })\n\n return (\n <Fieldset renderAsTitle={renderAsTitle} error={error} {...fieldProps}>\n <RadioItemList\n $displayType={displayType}\n $justifyContent={justifyContent}\n >\n {options.map((option, index) => {\n const isSelected = option.value === value\n\n return (\n <RadioItem\n ref={(radioOptionRef) => {\n optionRefs.current[index] = {\n current: radioOptionRef,\n }\n }}\n key={`${option.value}`}\n name={name}\n visual={option.visual}\n icon={option.icon}\n iconComponent={option.iconComponent}\n iconPosition={option.iconPosition}\n label={option.label}\n value={option.value}\n checked={isSelected}\n // @ts-expect-error TODO: address this type inconsistency in another PR\n onChange={onChange}\n onBlur={onBlur}\n displayType={displayType}\n isError={error}\n fallbackStyle={fallbackStyle}\n bodyCopy={option.bodyCopy}\n disabled={option.disabled}\n itemWidth={itemWidth}\n />\n )\n })}\n </RadioItemList>\n </Fieldset>\n )\n}\n\nexport const RadioGroup = forwardRef(RadioGroupComponent) as <\n Value extends BaseValueType = BaseValueType,\n>(\n p: RadioGroupProps<Value> & RefAttributes<HTMLInputElement>,\n) => ReactElement | null\n\nconst RadioItemList = styled.div<\n TransientProps<Pick<RadioGroupProps, 'displayType' | 'justifyContent'>>\n>`\n display: flex;\n gap: ${ITEM_GAP}px;\n justify-content: ${({ $justifyContent }) => $justifyContent ?? 'flex-start'};\n\n ${({ $displayType }) => {\n switch ($displayType) {\n case 'horizontal-normal':\n return `\n flex-direction: row;\n align-items: center;\n `\n case 'horizontal-card':\n return `\n flex-direction: row;\n flex-wrap: wrap;\n `\n default:\n return 'flex-direction: column;'\n }\n }}\n`\n"]}
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FocusEvent,\n ForwardedRef,\n forwardRef,\n ReactElement,\n ReactNode,\n RefAttributes,\n RefObject,\n useImperativeHandle,\n useRef,\n} from 'react'\n\nimport styled from 'styled-components'\n\nimport { useUniqueId } from '../utils/id'\n\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { Fieldset } from '../fields/Fieldset'\n\nimport { ITEM_GAP } from './constants'\nimport { RadioItem } from './RadioItem'\nimport {\n BaseValueType,\n DisplayType,\n IconPosition,\n ItemWidth,\n JustifyContent,\n} from './types'\nimport { TransientProps } from 'utils/utilTypes'\nimport { Icons } from '../Icon'\n\nexport type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {\n options: Array<{\n visual?: string\n icon?: Icons\n iconPosition?: IconPosition\n iconComponent?: ReactNode\n label: string\n value: Value\n bodyCopy?: string | ReactElement\n disabled?: boolean\n }>\n justifyContent?: JustifyContent\n itemWidth?: ItemWidth\n onChange: (value: Value) => void\n onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n value: Value\n displayType?: DisplayType\n fallbackStyle?: boolean\n} & CommonFieldProps\n\nexport type RadioGroupElement = {\n focus: VoidFunction\n}\n\nconst RadioGroupComponent = <Value extends BaseValueType>(\n {\n options,\n onChange,\n onBlur,\n value,\n displayType = 'normal',\n renderAsTitle = false,\n error = false,\n fallbackStyle = false,\n justifyContent,\n itemWidth,\n ...fieldProps\n }: RadioGroupProps<Value>,\n ref: ForwardedRef<RadioGroupElement>,\n) => {\n const name = useUniqueId()\n\n const optionRefs = useRef<RefObject<HTMLInputElement | null>[]>([])\n useImperativeHandle(ref, () => {\n return {\n focus: () => {\n const selectedIndex = options.findIndex((item) => item.value === value)\n\n const elementToFocus = selectedIndex === -1 ? 0 : selectedIndex\n optionRefs.current[elementToFocus].current?.focus()\n },\n }\n })\n\n return (\n <Fieldset renderAsTitle={renderAsTitle} error={error} {...fieldProps}>\n <RadioItemList\n $displayType={displayType}\n $justifyContent={justifyContent}\n >\n {options.map((option, index) => {\n const isSelected = option.value === value\n\n return (\n <RadioItem\n ref={(radioOptionRef) => {\n optionRefs.current[index] = {\n current: radioOptionRef,\n }\n }}\n key={`${option.value}`}\n name={name}\n visual={option.visual}\n icon={option.icon}\n iconComponent={option.iconComponent}\n iconPosition={option.iconPosition}\n label={option.label}\n value={option.value}\n checked={isSelected}\n // @ts-expect-error TODO: address this type inconsistency in another PR\n onChange={onChange}\n onBlur={onBlur}\n displayType={displayType}\n isError={error}\n fallbackStyle={fallbackStyle}\n bodyCopy={option.bodyCopy}\n disabled={option.disabled}\n itemWidth={itemWidth}\n />\n )\n })}\n </RadioItemList>\n </Fieldset>\n )\n}\n\nexport const RadioGroup = forwardRef(RadioGroupComponent) as <\n Value extends BaseValueType = BaseValueType,\n>(\n p: RadioGroupProps<Value> & RefAttributes<HTMLInputElement>,\n) => ReactElement | null\n\nconst RadioItemList = styled.div<\n TransientProps<Pick<RadioGroupProps, 'displayType' | 'justifyContent'>>\n>`\n display: flex;\n gap: ${ITEM_GAP}px;\n justify-content: ${({ $justifyContent }) => $justifyContent ?? 'flex-start'};\n\n ${({ $displayType }) => {\n switch ($displayType) {\n case 'horizontal-normal':\n return `\n flex-direction: row;\n align-items: center;\n `\n case 'horizontal-card':\n return `\n flex-direction: row;\n flex-wrap: wrap;\n `\n default:\n return 'flex-direction: column;'\n }\n }}\n`\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FocusEvent, ReactNode } from 'react';
|
|
1
|
+
import { FocusEvent, ReactNode, type ReactElement } from 'react';
|
|
2
2
|
import { Icons } from '../Icon';
|
|
3
3
|
import { BaseValueType, DisplayType, IconPosition, ItemWidth } from './types';
|
|
4
4
|
type RadioItemProps = {
|
|
@@ -15,7 +15,7 @@ type RadioItemProps = {
|
|
|
15
15
|
displayType: DisplayType;
|
|
16
16
|
isError: boolean;
|
|
17
17
|
fallbackStyle?: boolean;
|
|
18
|
-
bodyCopy?: string;
|
|
18
|
+
bodyCopy?: string | ReactElement;
|
|
19
19
|
disabled?: boolean;
|
|
20
20
|
itemWidth?: ItemWidth;
|
|
21
21
|
};
|
|
@@ -15,7 +15,7 @@ export const RadioItem = forwardRef(function RadioItem({ name, visual, icon, ico
|
|
|
15
15
|
display: 'flex',
|
|
16
16
|
justifyContent: iconPosition === 'center' ? 'center' : 'flex-start',
|
|
17
17
|
}, children: iconComponent })) : icon ? (_jsx(IconWrapper, { "$iconPosition": iconPosition, children: _jsx(Icon, { render: icon, size: 24 }) })) : null;
|
|
18
|
-
return (_jsxs(Wrapper, { htmlFor: id, checked: checked, "$displayType": displayType, "data-testid": value, "$isError": isError, "$fallbackStyle": fallbackStyle, "$disabled": disabled, "$itemWidth": itemWidth, children: [visual && !icon && (_jsx(VisualWrapper, { children: _jsx(Visual, { "$visualUrl": visual }) })), !visual && iconToRender, _jsxs(Box, { flex: true, alignItems: "center", children: [_jsx(RadioElement, { ref: ref, name: name, id: id, value: value, checked: checked, onChange: onChange, onBlur: onBlur, isError: isError, mr: "8px", isDisabled: disabled }), _jsxs(Box, { children: [_jsx(RadioText, { "$isError": isError, children: label }), bodyCopy && (_jsx(Box, { children: _jsx(Text, { typo: "caption", children: bodyCopy }) }))] })] })] }));
|
|
18
|
+
return (_jsxs(Wrapper, { htmlFor: id, checked: checked, "$displayType": displayType, "data-testid": value, "$isError": isError, "$fallbackStyle": fallbackStyle, "$disabled": disabled, "$itemWidth": itemWidth, children: [visual && !icon && (_jsx(VisualWrapper, { children: _jsx(Visual, { "$visualUrl": visual }) })), !visual && iconToRender, _jsxs(Box, { flex: true, alignItems: "center", children: [_jsx(RadioElement, { ref: ref, name: name, id: id, value: value, checked: checked, onChange: onChange, onBlur: onBlur, isError: isError, mr: "8px", isDisabled: disabled }), _jsxs(Box, { children: [_jsx(RadioText, { "$isError": isError, children: label }), bodyCopy && (_jsx(Box, { children: typeof bodyCopy === 'string' ? (_jsx(Text, { typo: "caption", children: bodyCopy })) : (bodyCopy) }))] })] })] }));
|
|
19
19
|
});
|
|
20
20
|
const VisualWrapper = styled.div `
|
|
21
21
|
width: 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,UAAU,
|
|
1
|
+
{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FocusEvent, forwardRef, ReactNode, type ReactElement } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { useUniqueId } from '../utils/id'\nimport { theme as oldTheme } from '../theme'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon, Icons } from '../Icon'\n\nimport { Text } from '../Text'\nimport { RadioElement } from './RadioElement'\nimport { ITEM_GAP } from './constants'\nimport { BaseValueType, DisplayType, IconPosition, ItemWidth } from './types'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\ntype RadioItemProps = {\n name: string\n visual?: string\n icon?: Icons\n iconComponent?: ReactNode\n iconPosition?: IconPosition\n value: BaseValueType\n label: string\n checked: boolean\n onChange: (value: BaseValueType) => void\n onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n displayType: DisplayType\n isError: boolean\n fallbackStyle?: boolean\n bodyCopy?: string | ReactElement\n disabled?: boolean\n itemWidth?: ItemWidth\n}\n\nexport const RadioItem = forwardRef<HTMLInputElement, RadioItemProps>(\n function RadioItem(\n {\n name,\n visual,\n icon,\n iconComponent,\n iconPosition = 'center',\n label,\n value,\n checked,\n onChange,\n onBlur,\n displayType,\n isError,\n fallbackStyle,\n bodyCopy,\n disabled,\n itemWidth,\n },\n ref,\n ) {\n const id = useUniqueId()\n\n const iconToRender = iconComponent ? (\n <IconContainer\n $size={24}\n style={{\n display: 'flex',\n justifyContent: iconPosition === 'center' ? 'center' : 'flex-start',\n }}\n >\n {iconComponent}\n </IconContainer>\n ) : icon ? (\n <IconWrapper $iconPosition={iconPosition}>\n <Icon render={icon} size={24} />\n </IconWrapper>\n ) : null\n\n return (\n <Wrapper\n htmlFor={id}\n checked={checked}\n $displayType={displayType}\n data-testid={value}\n $isError={isError}\n $fallbackStyle={fallbackStyle}\n $disabled={disabled}\n $itemWidth={itemWidth}\n >\n {visual && !icon && (\n <VisualWrapper>\n <Visual $visualUrl={visual} />\n </VisualWrapper>\n )}\n {!visual && iconToRender}\n <Box flex alignItems=\"center\">\n <RadioElement\n ref={ref}\n name={name}\n id={id}\n value={value}\n checked={checked}\n onChange={onChange}\n onBlur={onBlur}\n isError={isError}\n mr=\"8px\"\n isDisabled={disabled}\n />\n <Box>\n <RadioText $isError={isError}>{label}</RadioText>\n {bodyCopy && (\n <Box>\n {typeof bodyCopy === 'string' ? (\n <Text typo=\"caption\">{bodyCopy}</Text>\n ) : (\n bodyCopy\n )}\n </Box>\n )}\n </Box>\n </Box>\n </Wrapper>\n )\n },\n)\n\nconst VisualWrapper = styled.div`\n width: 100%;\n max-width: 120px;\n margin: 0 auto 8px;\n`\n\nconst IconWrapper = styled.div<{ $iconPosition?: IconPosition }>`\n display: flex;\n padding-bottom: 12px;\n\n ${({ $iconPosition }) =>\n $iconPosition === 'center' &&\n css`\n justify-content: center;\n `}\n\n ${({ $iconPosition }) =>\n $iconPosition === 'start' &&\n css`\n justify-content: flex-start;\n `}\n`\n\nconst Visual = styled.div<{ $visualUrl: string }>`\n width: 100%;\n padding-top: 100%;\n background-image: url('${(p) => p.$visualUrl}');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n`\n\nconst Wrapper = styled.label<\n TransientProps<\n Pick<RadioItemProps, 'displayType' | 'isError' | 'fallbackStyle'>\n > & { checked: boolean; $disabled?: boolean; $itemWidth?: ItemWidth }\n>`\n display: flex;\n flex-direction: column;\n cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};\n opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n ${({\n $displayType,\n checked,\n $isError,\n $fallbackStyle,\n $disabled,\n $itemWidth,\n theme,\n }) => css`\n ${($displayType === 'horizontal-card' ||\n $displayType === 'vertical-card') &&\n css`\n border-radius: 12px;\n background-color: ${$fallbackStyle\n ? theme.color.surface.base['000']\n : theme.color.surface.base[300]};\n padding: ${checked ? '10px' : '12px'};\n border: ${checked &&\n ($isError\n ? `2px solid ${theme.color.feedback.negative[200]}`\n : `2px solid ${theme.color.border.contrast}`)};\n\n &:hover {\n ${!$disabled &&\n css`\n background-color: ${$fallbackStyle\n ? theme.color.surface.base[100]\n : theme.color.surface.base[400]};\n `}\n }\n `}\n ${$displayType === 'horizontal-card' &&\n css`\n justify-content: center;\n ${!$itemWidth &&\n css`\n @media (min-width: 420px) {\n width: calc(50% - ${ITEM_GAP / 2}px);\n }\n\n @media (min-width: 768px) {\n width: 201px;\n }\n `}\n `}\n width: ${$itemWidth ?? '100%'};\n `}\n`\n\nconst RadioText = styled.span<{ $isError: boolean }>`\n line-height: 16px;\n font-size: 16px;\n font-weight: ${oldTheme.font.weight.medium};\n color: ${({ $isError, theme }) =>\n $isError ? theme.color.feedback.negative[200] : theme.color.text.base};\n margin-top: 4px;\n`\n"]}
|
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 { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport type { BoxSpacing, SingleSpacing } from './helper.types'\nimport { ColorTypes } from '../ThemeProvider/utils/colourMap'\n\nexport type TableStylesProps = {\n hasKeyline?: boolean\n fixedHeader?: boolean\n headerHeight?: string\n stripedColor?: string\n stickyCell?: boolean\n headerColor?: string\n rowColor?: string\n rowBorderColor?: string\n rowActionsBgColor?: string\n width?: string\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?: ColorTypes\n}\n\ntype RowCellRenderer<T> = (\n row: T,\n rowIndex: number,\n column: TableColumn<T>,\n id: string | number,\n) => ReactNode\n\nexport interface TableColumn<T> {\n name?: string | number | 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?: ColorTypes\n padding?: BoxSpacing\n margin?: BoxSpacing\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T, ColorT = ColorTypes> {\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?: ColorT\n /** A function to determine if a row is expandable. */\n expandable?: (rowData: T) => boolean\n /** The color for the table header. */\n headerColor?: ColorT\n /** The default color for each table row. */\n rowColor?: ColorT\n /** The default color for each table row border. */\n rowBorderColor?: ColorT\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\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, K = undefined> extends CommonTableProps<T> {\n /** Array of data to be displayed in the table. */\n data: T[]\n\n /** If true, the sub table columns will be aligned with the main table columns, by using the widths of the main table columns. */\n alignSubTableColumns?: boolean\n\n /** The widths of the table columns to be set to, usually passed down to a subtable to align to the main table columns.\n * The array length should match the number of columns in the table.\n * @example ['100px', '200px', '150px']\n */\n columnWidths?: string[]\n\n footer?: TableFooter<K>\n\n /** The text to show when there is no available data to map through. */\n noDataContent?: ReactNode\n}\n\n/**\n * The type of the footer prop in the Table component.\n * It can either be an array of columns and data, or a React element.\n *\n * For columns, the columns and data will be passed to each column.cell component to generate the footer.\n * For a React element, it will render that as the table footer.\n */\nexport type TableFooter<K> =\n | TableFooterColumnsProps<K>\n | TableFooterElementProps<K>\n\nexport interface TableRowProps<T> extends CommonTableProps<T> {\n rowData: T\n rowIndex: number\n showActions?: boolean\n hideBorder?: boolean\n\n renderSubTable?: (rowData: T) => ReactElement<any>\n}\n\nexport interface RowActionsProps<T
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport type { BoxSpacing, SingleSpacing } from './helper.types'\nimport { ColorTypes } from '../ThemeProvider/utils/colourMap'\n\nexport type TableStylesProps = {\n hasKeyline?: boolean\n fixedHeader?: boolean\n headerHeight?: string\n stripedColor?: string\n stickyCell?: boolean\n headerColor?: string\n rowColor?: string\n rowBorderColor?: string\n rowActionsBgColor?: string\n width?: string\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?: ColorTypes\n}\n\ntype RowCellRenderer<T> = (\n row: T,\n rowIndex: number,\n column: TableColumn<T>,\n id: string | number,\n) => ReactNode\n\nexport interface TableColumn<T> {\n name?: string | number | 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?: ColorTypes\n padding?: BoxSpacing\n margin?: BoxSpacing\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T, ColorT = ColorTypes> {\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?: ColorT\n /** A function to determine if a row is expandable. */\n expandable?: (rowData: T) => boolean\n /** The color for the table header. */\n headerColor?: ColorT\n /** The default color for each table row. */\n rowColor?: ColorT\n /** The default color for each table row border. */\n rowBorderColor?: ColorT\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\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, K = undefined> extends CommonTableProps<T> {\n /** Array of data to be displayed in the table. */\n data: T[]\n\n /** If true, the sub table columns will be aligned with the main table columns, by using the widths of the main table columns. */\n alignSubTableColumns?: boolean\n\n /** The widths of the table columns to be set to, usually passed down to a subtable to align to the main table columns.\n * The array length should match the number of columns in the table.\n * @example ['100px', '200px', '150px']\n */\n columnWidths?: string[]\n\n footer?: TableFooter<K>\n\n /** The text to show when there is no available data to map through. */\n noDataContent?: ReactNode\n}\n\n/**\n * The type of the footer prop in the Table component.\n * It can either be an array of columns and data, or a React element.\n *\n * For columns, the columns and data will be passed to each column.cell component to generate the footer.\n * For a React element, it will render that as the table footer.\n */\nexport type TableFooter<K> =\n | TableFooterColumnsProps<K>\n | TableFooterElementProps<K>\n\nexport interface TableRowProps<T> extends CommonTableProps<T> {\n rowData: T\n rowIndex: number\n showActions?: boolean\n hideBorder?: boolean\n\n renderSubTable?: (rowData: T) => ReactElement<any>\n}\n\nexport interface RowActionsProps<T> extends Pick<\n CommonTableProps<T, string>,\n 'expandable' | 'rowActions'\n> {\n rowData: T\n width?: string\n canExpandRow: boolean\n toggleExpansion: () => void\n isExpanded?: boolean\n}\n\ntype TableFooterElementProps<K> = {\n element: ReactElement<K>\n}\n\ntype TableFooterColumnsProps<K> = {\n /**\n * Row color of the footer.\n *\n * @default 'custard'\n */\n rowColor?: ColorTypes\n rowPadding?: SingleSpacing\n columnPadding?: SingleSpacing\n columns: TableColumn<K>[]\n data: K\n}\n\nexport type TableHeaderProps<T> = CommonTableProps<T, string>\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextDateOfBirthInput.js","sourceRoot":"","sources":["../../src/TextDateOfBirthInput/TextDateOfBirthInput.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"TextDateOfBirthInput.js","sourceRoot":"","sources":["../../src/TextDateOfBirthInput/TextDateOfBirthInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Fieldset, FieldsetProps } from '../fields/Fieldset'\nimport { TextInput } from '../TextInput'\nimport { InputValidationError } from '../utils/dateOfBirth/schema'\n\nexport type DateObject = {\n day?: string | null\n month?: string | null\n year?: string | null\n}\n\nexport type TextDateOfBirthInputProps = {\n value: DateObject\n onChange: (value: DateObject) => void\n showCompleted?: boolean\n hookformError?: {\n type: string\n message?: string\n }\n dataTestId?: string\n} & Pick<FieldsetProps, 'label' | 'assistiveText'>\n\n/**\n * Renders a set of input fields to collect a date of birth as separate day, month,\n * and year fields.\n *\n * ### Date of birth input validations\n * - All fields are present and correctly formatted.\n * - The age is at least 17 years old.\n * - The year is not before 1900.\n */\nexport const TextDateOfBirthInput = forwardRef<\n HTMLInputElement,\n TextDateOfBirthInputProps\n>(function TextDateOfBirthInput(\n {\n onChange,\n value,\n label,\n assistiveText,\n hookformError,\n showCompleted = false,\n dataTestId,\n },\n ref,\n) {\n const inputValidationErrorValues = Object.values(InputValidationError)\n const monthRef = useRef<HTMLInputElement>(null)\n const yearRef = useRef<HTMLInputElement>(null)\n\n const filterNonNumeric = (value: string) => value.replace(/[^0-9]/g, '')\n\n const handleDayChange = (day: string) => {\n const numericValue = filterNonNumeric(day)\n\n if (numericValue.length > 2) return\n\n onChange({\n ...value,\n day: numericValue,\n })\n if (numericValue.length === 2) {\n monthRef.current?.focus()\n }\n }\n\n const handleMonthChange = (month: string) => {\n const numericValue = filterNonNumeric(month)\n\n if (numericValue.length > 2) return\n\n onChange({\n ...value,\n month: numericValue,\n })\n if (numericValue.length === 2) {\n yearRef.current?.focus()\n }\n }\n\n const handleYearChange = (year: string) => {\n const numericValue = filterNonNumeric(year)\n\n if (numericValue.length > 4) return\n\n onChange({\n ...value,\n year: numericValue,\n })\n }\n\n return (\n <Fieldset\n label={label}\n assistiveText={assistiveText}\n completed={\n showCompleted && Boolean(value.day && value.month && value.year)\n }\n error={Boolean(hookformError)}\n errorMsg={hookformError?.message}\n data-testid={dataTestId}\n >\n <Box flex gap=\"16px\">\n <SetWidthTextInput\n ref={ref}\n label=\"day\"\n autoCompleteAttr=\"bday-day\"\n inputModeAttr=\"numeric\"\n $width={60}\n value={value.day || ''}\n placeholder=\"\"\n onChange={handleDayChange}\n error={Boolean(\n hookformError?.type?.includes('day') ||\n (hookformError?.type &&\n inputValidationErrorValues.includes(\n hookformError.type as InputValidationError,\n )),\n )}\n />\n <SetWidthTextInput\n ref={monthRef}\n label=\"month\"\n autoCompleteAttr=\"bday-month\"\n inputModeAttr=\"numeric\"\n $width={60}\n value={value.month || ''}\n placeholder=\"\"\n onChange={handleMonthChange}\n error={Boolean(\n hookformError?.type?.includes('month') ||\n (hookformError?.type &&\n inputValidationErrorValues.includes(\n hookformError.type as InputValidationError,\n )),\n )}\n />\n <SetWidthTextInput\n ref={yearRef}\n label=\"year\"\n autoCompleteAttr=\"bday-year\"\n inputModeAttr=\"numeric\"\n $width={80}\n value={value.year || ''}\n placeholder=\"\"\n onChange={handleYearChange}\n error={Boolean(\n hookformError?.type?.includes('year') ||\n (hookformError?.type &&\n inputValidationErrorValues.includes(\n hookformError.type as InputValidationError,\n )),\n )}\n />\n </Box>\n </Fieldset>\n )\n})\n\nconst SetWidthTextInput = styled(TextInput)<{ $width: number }>`\n width: ${({ $width }) => `${$width}px`};\n`\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.5.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -49,32 +49,32 @@
|
|
|
49
49
|
"@commitlint/cli": "^20.4.1",
|
|
50
50
|
"@mrshmllw/campfire": "^2.3.2",
|
|
51
51
|
"@snyk/protect": "^1.1302.1",
|
|
52
|
-
"@storybook/addon-a11y": "^10.2.
|
|
52
|
+
"@storybook/addon-a11y": "^10.2.7",
|
|
53
53
|
"@storybook/addon-coverage": "^3.0.0",
|
|
54
|
-
"@storybook/addon-docs": "^10.2.
|
|
55
|
-
"@storybook/addon-links": "^10.2.
|
|
56
|
-
"@storybook/react-vite": "^10.2.
|
|
54
|
+
"@storybook/addon-docs": "^10.2.7",
|
|
55
|
+
"@storybook/addon-links": "^10.2.7",
|
|
56
|
+
"@storybook/react-vite": "^10.2.7",
|
|
57
57
|
"@storybook/test-runner": "^0.24.2",
|
|
58
58
|
"@testing-library/jest-dom": "^6.9.1",
|
|
59
59
|
"@testing-library/react": "^16.3.2",
|
|
60
60
|
"@types/body-scroll-lock": "^3.1.2",
|
|
61
|
-
"@types/node": "^25.2.
|
|
62
|
-
"@types/react": "^19.2.
|
|
61
|
+
"@types/node": "^25.2.2",
|
|
62
|
+
"@types/react": "^19.2.13",
|
|
63
63
|
"@types/react-dom": "^19.2.3",
|
|
64
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
65
|
-
"@typescript-eslint/parser": "^8.
|
|
64
|
+
"@typescript-eslint/eslint-plugin": "^8.55.0",
|
|
65
|
+
"@typescript-eslint/parser": "^8.55.0",
|
|
66
66
|
"axe-playwright": "^2.2.2",
|
|
67
67
|
"eslint": "^9.39.2",
|
|
68
68
|
"eslint-config-prettier": "^10.1.8",
|
|
69
69
|
"eslint-plugin-prettier": "^5.5.5",
|
|
70
70
|
"eslint-plugin-react": "^7.37.5",
|
|
71
71
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
72
|
-
"eslint-plugin-storybook": "^10.2.
|
|
72
|
+
"eslint-plugin-storybook": "^10.2.7",
|
|
73
73
|
"husky": "^9.1.7",
|
|
74
74
|
"jest-styled-components": "^7.2.0",
|
|
75
|
-
"jsdom": "^
|
|
75
|
+
"jsdom": "^28.0.0",
|
|
76
76
|
"lint-staged": "^16.2.7",
|
|
77
|
-
"playwright": "^1.58.
|
|
77
|
+
"playwright": "^1.58.2",
|
|
78
78
|
"prettier": "^3.8.1",
|
|
79
79
|
"react": "^19.2.4",
|
|
80
80
|
"react-dom": "^19.2.4",
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"storybook": "^10.0.8",
|
|
83
83
|
"styled-components": "^6.1.19",
|
|
84
84
|
"typescript": "^5.9.3",
|
|
85
|
-
"typescript-eslint": "^8.
|
|
85
|
+
"typescript-eslint": "^8.55.0",
|
|
86
86
|
"vite": "^7.3.1",
|
|
87
87
|
"vitest": "^4.0.18"
|
|
88
88
|
},
|