@pega/cosmos-react-core 9.0.0-build.12.2 → 9.0.0-build.12.3
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/lib/components/FieldValueList/FieldValueList.d.ts.map +1 -1
- package/lib/components/FieldValueList/FieldValueList.js +2 -2
- package/lib/components/FieldValueList/FieldValueList.js.map +1 -1
- package/lib/components/Icon/Icon.d.ts.map +1 -1
- package/lib/components/Icon/Icon.js +4 -0
- package/lib/components/Icon/Icon.js.map +1 -1
- package/lib/components/Icon/icons/dataviz-string-field.icon.js +1 -1
- package/lib/components/Icon/icons/dataviz-string-field.icon.js.map +1 -1
- package/lib/components/Modal/Modal.styles.d.ts.map +1 -1
- package/lib/components/Modal/Modal.styles.js +4 -0
- package/lib/components/Modal/Modal.styles.js.map +1 -1
- package/lib/components/Popover/Popover.styles.d.ts.map +1 -1
- package/lib/components/Popover/Popover.styles.js +4 -0
- package/lib/components/Popover/Popover.styles.js.map +1 -1
- package/lib/components/RadioCheck/RadioCheck.d.ts.map +1 -1
- package/lib/components/RadioCheck/RadioCheck.js +7 -4
- package/lib/components/RadioCheck/RadioCheck.js.map +1 -1
- package/lib/components/Switch/Switch.d.ts.map +1 -1
- package/lib/components/Switch/Switch.js +13 -5
- package/lib/components/Switch/Switch.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldValueList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAO,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,YAAY,EACZ,cAAc,EACd,UAAU,EACX,MAAM,aAAa,CAAC;AAWrB,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,UAAU,sBAAuB,SAAQ,UAAU;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,MAAM,uBAAuB,GAC/B,CAAC,sBAAsB,GAAG;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC,GACF,CAAC,sBAAsB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEP,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAChF,qDAAqD;IACrD,MAAM,EAAE,uBAAuB,EAAE,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,GAAG,kBAAkB,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,wGAE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wGAE5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;AAE7E,eAAO,MAAM,oBAAoB,+HAsD/B,CAAC;AAIH,eAAO,MAAM,cAAc,gDACsC,uBAAuB;;CA4BvF,CAAC;;;;
|
|
1
|
+
{"version":3,"file":"FieldValueList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAO,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,YAAY,EACZ,cAAc,EACd,UAAU,EACX,MAAM,aAAa,CAAC;AAWrB,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,UAAU,sBAAuB,SAAQ,UAAU;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,MAAM,uBAAuB,GAC/B,CAAC,sBAAsB,GAAG;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC,GACF,CAAC,sBAAsB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEP,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAChF,qDAAqD;IACrD,MAAM,EAAE,uBAAuB,EAAE,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,GAAG,kBAAkB,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,wGAE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wGAE5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;AAE7E,eAAO,MAAM,oBAAoB,+HAsD/B,CAAC;AAIH,eAAO,MAAM,cAAc,gDACsC,uBAAuB;;CA4BvF,CAAC;;;;AA8EF,wBAAqE"}
|
|
@@ -69,7 +69,7 @@ StyledFieldValueList.defaultProps = defaultThemeProp;
|
|
|
69
69
|
export const FieldValueItem = withTestIds(({ testId, name, value, variant = 'inline', truncate = true }) => {
|
|
70
70
|
const testIds = useTestIds(testId, getFieldValueItemTestIds);
|
|
71
71
|
const displayValue = typeof value === 'string' && truncate ? (_jsx(ShowMoreLess, { lines: 3, children: value })) : (value);
|
|
72
|
-
const labelAndValue = (_jsxs(_Fragment, { children: [_jsx(StyledLabel, { "data-testid": testIds.name, as: StyledFieldName, children: name }), _jsx(StyledFieldValue, { "data-testid": testIds.value, children: value ? displayValue : _jsx(NoValue, {}) })] }));
|
|
72
|
+
const labelAndValue = (_jsxs(_Fragment, { children: [_jsx(StyledLabel, { "data-testid": testIds.name, as: StyledFieldName, role: 'none', children: name }), _jsx(StyledFieldValue, { "data-testid": testIds.value, role: 'none', children: value ? displayValue : _jsx(NoValue, {}) })] }));
|
|
73
73
|
return variant === 'stacked' ? (_jsx(StyledStackedFieldValue, { "data-testid": testIds.root, children: labelAndValue })) : (_jsx(_Fragment, { children: labelAndValue }));
|
|
74
74
|
}, getFieldValueItemTestIds);
|
|
75
75
|
const FieldValueList = forwardRef(function FieldValueList({ testId, fields, variant = 'inline', ...restProps }, ref) {
|
|
@@ -86,7 +86,7 @@ const FieldValueList = forwardRef(function FieldValueList({ testId, fields, vari
|
|
|
86
86
|
: 'minmax(0, 1fr)',
|
|
87
87
|
colGap: !detached && variant !== 'value-comparison' ? 2 : 0,
|
|
88
88
|
rowGap: !detached && variant !== 'value-comparison' ? 1 : 0.5
|
|
89
|
-
}, as: StyledFieldValueList, variant: isXSContentWidthOrAbove ? variant : 'stacked', children: fields.map(({ testId: fieldTestId, id, name, value, truncate = true, variant: fieldVariant }) => {
|
|
89
|
+
}, as: StyledFieldValueList, role: 'none', variant: isXSContentWidthOrAbove ? variant : 'stacked', children: fields.map(({ testId: fieldTestId, id, name, value, truncate = true, variant: fieldVariant }) => {
|
|
90
90
|
const sharedProps = {
|
|
91
91
|
name,
|
|
92
92
|
variant: (fieldVariant ?? variant) === 'stacked' || !isXSContentWidthOrAbove
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldValueList.js","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { ReactNode, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type {\n BaseProps,\n ExcludeStrict,\n ForwardProps,\n NoChildrenProp,\n TestIdProp\n} from '../../types';\nimport Grid from '../Grid';\nimport { StyledLabel } from '../Label';\nimport { useBreakpoint, useConsolidatedRef, useTestIds, useTheme } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport ShowMoreLess from '../ShowMoreLess';\nimport { withTestIds } from '../../utils';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFieldValueListTestIds, getFieldValueItemTestIds } from './FieldValueList.test-ids';\n\nexport type FieldValueVariant = 'inline' | 'stacked';\n\ninterface BaseFieldValueListItem extends TestIdProp {\n name: string;\n id?: string;\n variant?: FieldValueVariant;\n}\n\nexport type FieldValueListItemProps =\n | (BaseFieldValueListItem & {\n value?: ExcludeStrict<ReactNode, 'string'>;\n truncate?: never;\n })\n | (BaseFieldValueListItem & {\n value: string;\n truncate?: boolean;\n });\n\nexport interface FieldValueListProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** The set of field values to render in the list. */\n fields: FieldValueListItemProps[];\n /**\n * Determines if the field and values should be displayed on the same line, or stacked with the field above the value.\n * @default 'inline'\n */\n variant?: FieldValueVariant | 'value-comparison';\n}\n\nexport const StyledFieldName = styled.dt`\n word-break: break-word;\n`;\n\nexport const StyledFieldValue = styled.dd`\n word-break: break-word;\n`;\n\nexport const StyledStackedFieldValue = styled.div``;\n\nexport type StyledFieldValueListProps = Pick<FieldValueListProps, 'variant'>;\n\nexport const StyledFieldValueList = styled.dl<StyledFieldValueListProps>(({ variant, theme }) => {\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n return css`\n width: 100%;\n\n ${variant === 'value-comparison' &&\n css`\n dt {\n width: 100%;\n }\n && dd {\n text-align: end;\n padding-inline-start: calc(2 * ${theme.base.spacing});\n\n /* Unset negative margin from Details to prevent field value misalignment */\n margin: unset;\n }\n ${StyledLabel} {\n max-width: unset;\n }\n dd:not(:last-of-type),\n dt:not(:last-of-type) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n padding-bottom: calc(0.5 * ${theme.base.spacing});\n }\n `}\n\n ${detached &&\n variant === 'inline' &&\n css`\n dt {\n width: 100%;\n padding-inline-end: calc(${theme.base.spacing});\n }\n ${StyledLabel} {\n max-width: unset;\n }\n dd:not(:last-of-type),\n dt:not(:last-of-type),\n dd:has(+ ${StyledStackedFieldValue}),\n dt:has(+ dd + ${StyledStackedFieldValue}),\n ${StyledStackedFieldValue}:has(+ dt + dd),\n ${StyledStackedFieldValue}:not(:last-of-type) {\n border-bottom: 0.0625rem dashed ${theme.base.palette['border-line']};\n padding-bottom: calc(0.5 * ${theme.base.spacing});\n }\n `}\n `;\n});\n\nStyledFieldValueList.defaultProps = defaultThemeProp;\n\nexport const FieldValueItem = withTestIds(\n ({ testId, name, value, variant = 'inline', truncate = true }: FieldValueListItemProps) => {\n const testIds = useTestIds(testId, getFieldValueItemTestIds);\n\n const displayValue =\n typeof value === 'string' && truncate ? (\n <ShowMoreLess lines={3}>{value}</ShowMoreLess>\n ) : (\n value\n );\n\n const labelAndValue = (\n <>\n <StyledLabel data-testid={testIds.name} as={StyledFieldName}>\n {name}\n </StyledLabel>\n <StyledFieldValue data-testid={testIds.value}>\n {value ? displayValue : <NoValue />}\n </StyledFieldValue>\n </>\n );\n\n return variant === 'stacked' ? (\n <StyledStackedFieldValue data-testid={testIds.root}>{labelAndValue}</StyledStackedFieldValue>\n ) : (\n <>{labelAndValue}</>\n );\n },\n getFieldValueItemTestIds\n);\n\nconst FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps> = forwardRef(\n function FieldValueList(\n { testId, fields, variant = 'inline', ...restProps }: FieldValueListProps,\n ref: Ref<HTMLDivElement>\n ) {\n const testIds = useTestIds(testId, getFieldValueListTestIds);\n\n const fieldValueListRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n const isXSContentWidthOrAbove = useBreakpoint('xs', {\n breakpointRef: fieldValueListRef,\n themeProp: 'content-width'\n });\n\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = useTheme();\n\n return (\n <Grid\n data-testid={testIds.root}\n {...restProps}\n ref={fieldValueListRef}\n container={{\n cols:\n ['inline', 'value-comparison'].includes(variant) && isXSContentWidthOrAbove\n ? '16ch minmax(0, 1fr)'\n : 'minmax(0, 1fr)',\n colGap: !detached && variant !== 'value-comparison' ? 2 : 0,\n rowGap: !detached && variant !== 'value-comparison' ? 1 : 0.5\n }}\n as={StyledFieldValueList}\n variant={isXSContentWidthOrAbove ? variant : 'stacked'}\n >\n {fields.map(\n ({ testId: fieldTestId, id, name, value, truncate = true, variant: fieldVariant }) => {\n const sharedProps: BaseFieldValueListItem = {\n name,\n variant:\n (fieldVariant ?? variant) === 'stacked' || !isXSContentWidthOrAbove\n ? 'stacked'\n : 'inline'\n };\n\n if (typeof value === 'string') {\n return (\n <FieldValueItem\n testId={fieldTestId}\n key={id ?? name}\n {...sharedProps}\n value={value}\n truncate={truncate}\n />\n );\n }\n\n return (\n <FieldValueItem\n testId={fieldTestId}\n key={id ?? name}\n {...sharedProps}\n value={value}\n />\n );\n }\n )}\n </Grid>\n );\n }\n);\n\nexport default withTestIds(FieldValueList, getFieldValueListTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"FieldValueList.js","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { ReactNode, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type {\n BaseProps,\n ExcludeStrict,\n ForwardProps,\n NoChildrenProp,\n TestIdProp\n} from '../../types';\nimport Grid from '../Grid';\nimport { StyledLabel } from '../Label';\nimport { useBreakpoint, useConsolidatedRef, useTestIds, useTheme } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport ShowMoreLess from '../ShowMoreLess';\nimport { withTestIds } from '../../utils';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFieldValueListTestIds, getFieldValueItemTestIds } from './FieldValueList.test-ids';\n\nexport type FieldValueVariant = 'inline' | 'stacked';\n\ninterface BaseFieldValueListItem extends TestIdProp {\n name: string;\n id?: string;\n variant?: FieldValueVariant;\n}\n\nexport type FieldValueListItemProps =\n | (BaseFieldValueListItem & {\n value?: ExcludeStrict<ReactNode, 'string'>;\n truncate?: never;\n })\n | (BaseFieldValueListItem & {\n value: string;\n truncate?: boolean;\n });\n\nexport interface FieldValueListProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** The set of field values to render in the list. */\n fields: FieldValueListItemProps[];\n /**\n * Determines if the field and values should be displayed on the same line, or stacked with the field above the value.\n * @default 'inline'\n */\n variant?: FieldValueVariant | 'value-comparison';\n}\n\nexport const StyledFieldName = styled.dt`\n word-break: break-word;\n`;\n\nexport const StyledFieldValue = styled.dd`\n word-break: break-word;\n`;\n\nexport const StyledStackedFieldValue = styled.div``;\n\nexport type StyledFieldValueListProps = Pick<FieldValueListProps, 'variant'>;\n\nexport const StyledFieldValueList = styled.dl<StyledFieldValueListProps>(({ variant, theme }) => {\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = theme;\n return css`\n width: 100%;\n\n ${variant === 'value-comparison' &&\n css`\n dt {\n width: 100%;\n }\n && dd {\n text-align: end;\n padding-inline-start: calc(2 * ${theme.base.spacing});\n\n /* Unset negative margin from Details to prevent field value misalignment */\n margin: unset;\n }\n ${StyledLabel} {\n max-width: unset;\n }\n dd:not(:last-of-type),\n dt:not(:last-of-type) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n padding-bottom: calc(0.5 * ${theme.base.spacing});\n }\n `}\n\n ${detached &&\n variant === 'inline' &&\n css`\n dt {\n width: 100%;\n padding-inline-end: calc(${theme.base.spacing});\n }\n ${StyledLabel} {\n max-width: unset;\n }\n dd:not(:last-of-type),\n dt:not(:last-of-type),\n dd:has(+ ${StyledStackedFieldValue}),\n dt:has(+ dd + ${StyledStackedFieldValue}),\n ${StyledStackedFieldValue}:has(+ dt + dd),\n ${StyledStackedFieldValue}:not(:last-of-type) {\n border-bottom: 0.0625rem dashed ${theme.base.palette['border-line']};\n padding-bottom: calc(0.5 * ${theme.base.spacing});\n }\n `}\n `;\n});\n\nStyledFieldValueList.defaultProps = defaultThemeProp;\n\nexport const FieldValueItem = withTestIds(\n ({ testId, name, value, variant = 'inline', truncate = true }: FieldValueListItemProps) => {\n const testIds = useTestIds(testId, getFieldValueItemTestIds);\n\n const displayValue =\n typeof value === 'string' && truncate ? (\n <ShowMoreLess lines={3}>{value}</ShowMoreLess>\n ) : (\n value\n );\n\n const labelAndValue = (\n <>\n <StyledLabel data-testid={testIds.name} as={StyledFieldName} role='none'>\n {name}\n </StyledLabel>\n <StyledFieldValue data-testid={testIds.value} role='none'>\n {value ? displayValue : <NoValue />}\n </StyledFieldValue>\n </>\n );\n\n return variant === 'stacked' ? (\n <StyledStackedFieldValue data-testid={testIds.root}>{labelAndValue}</StyledStackedFieldValue>\n ) : (\n <>{labelAndValue}</>\n );\n },\n getFieldValueItemTestIds\n);\n\nconst FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps> = forwardRef(\n function FieldValueList(\n { testId, fields, variant = 'inline', ...restProps }: FieldValueListProps,\n ref: Ref<HTMLDivElement>\n ) {\n const testIds = useTestIds(testId, getFieldValueListTestIds);\n\n const fieldValueListRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n const isXSContentWidthOrAbove = useBreakpoint('xs', {\n breakpointRef: fieldValueListRef,\n themeProp: 'content-width'\n });\n\n const {\n components: {\n 'field-value-list': {\n inline: { detached }\n }\n }\n } = useTheme();\n\n return (\n <Grid\n data-testid={testIds.root}\n {...restProps}\n ref={fieldValueListRef}\n container={{\n cols:\n ['inline', 'value-comparison'].includes(variant) && isXSContentWidthOrAbove\n ? '16ch minmax(0, 1fr)'\n : 'minmax(0, 1fr)',\n colGap: !detached && variant !== 'value-comparison' ? 2 : 0,\n rowGap: !detached && variant !== 'value-comparison' ? 1 : 0.5\n }}\n as={StyledFieldValueList}\n role='none'\n variant={isXSContentWidthOrAbove ? variant : 'stacked'}\n >\n {fields.map(\n ({ testId: fieldTestId, id, name, value, truncate = true, variant: fieldVariant }) => {\n const sharedProps: BaseFieldValueListItem = {\n name,\n variant:\n (fieldVariant ?? variant) === 'stacked' || !isXSContentWidthOrAbove\n ? 'stacked'\n : 'inline'\n };\n\n if (typeof value === 'string') {\n return (\n <FieldValueItem\n testId={fieldTestId}\n key={id ?? name}\n {...sharedProps}\n value={value}\n truncate={truncate}\n />\n );\n }\n\n return (\n <FieldValueItem\n testId={fieldTestId}\n key={id ?? name}\n {...sharedProps}\n value={value}\n />\n );\n }\n )}\n </Grid>\n );\n }\n);\n\nexport default withTestIds(FieldValueList, getFieldValueListTestIds);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,aAAa,EAAE,yBAAyB,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAI9E,KAAK,aAAa,GAAG,cAAc,GAAG;IACpC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gGAAgG;IAChG,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,WAAW,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,SAAS,GACjB,cAAc,CACZ,KAAK,EACL,aAAa,GAAG;IACd,wBAAwB;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC7B,CACF,GACD,cAAc,CACZ,KAAK,EACL,aAAa,GAAG;IACd,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CACF,CAAC;AAEN,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACvB,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CACzB;AAID,eAAO,MAAM,YAAY,GAAI,GAAG,OAAO,UAAU,EAAE,SAUlD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,GAAG,OAAO,UAAU,EAAE,SAUvD,CAAC;AAEF,eAAO,MAAM,UAAU;WAAuB,SAAS,CAAC,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,aAAa,EAAE,yBAAyB,EAAE,MAAM,OAAO,CAAC;AAI5F,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAI9E,KAAK,aAAa,GAAG,cAAc,GAAG;IACpC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gGAAgG;IAChG,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,WAAW,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,SAAS,GACjB,cAAc,CACZ,KAAK,EACL,aAAa,GAAG;IACd,wBAAwB;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC7B,CACF,GACD,cAAc,CACZ,KAAK,EACL,aAAa,GAAG;IACd,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CACF,CAAC;AAEN,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACvB,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CACzB;AAID,eAAO,MAAM,YAAY,GAAI,GAAG,OAAO,UAAU,EAAE,SAUlD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,GAAG,OAAO,UAAU,EAAE,SAUvD,CAAC;AAEF,eAAO,MAAM,UAAU;WAAuB,SAAS,CAAC,MAAM,CAAC;SA8C7D,CAAC;AAIH,eAAO,MAAM,eAAe;gBACd,WAAW,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;iBACnC,SAAS,CAAC,YAAY,CAAC;WAC7B,SAAS,CAAC,MAAM,CAAC;YAChB,SAAS,CAAC,OAAO,CAAC;SAiE1B,CAAC;AAMH,QAAA,MAAM,IAAI,EAmGJ,yBAAyB,CAAC,SAAS,CAAC,CAAC;AAE3C,eAAe,IAAI,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect } from 'react';\nimport type { Ref, PropsWithoutRef, ComponentType, ForwardRefExoticComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useTheme } from '../../hooks';\nimport type { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { readableColor } from '../../styles';\n\ntype BaseIconProps = NoChildrenProp & {\n /**\n * The name of the icon set.\n * @default theme.base['icon-set']\n */\n set?: string;\n /** The name indicating the Cosmos Icon. Reference the catalog above for the available names. */\n name: string;\n /**\n * Background & svg size.\n * @default \"s\" without background, \"m\" with background.\n */\n size?: 's' | 'm' | 'l' | 'font-size';\n};\n\nexport type IconProps =\n | WithAttributes<\n 'div',\n BaseIconProps & {\n /** Background color. */\n background: string;\n /**\n * Foreground color (svg fill).\n * Applies readable color off background if undefined.\n */\n foreground?: string;\n /**\n * Shape of the background.\n * @default 'square'\n */\n shape?: 'square' | 'circle';\n }\n >\n | WithAttributes<\n 'svg',\n BaseIconProps & {\n background?: never;\n foreground?: never;\n shape?: never;\n }\n >;\n\nexport interface IconDefinition {\n Component: ComponentType;\n viewBox?: string;\n}\n\nexport interface IconModule extends IconDefinition {\n set?: IconProps['set'];\n name: IconProps['name'];\n}\n\nconst iconRegistry = new Map<string, Map<string, IconDefinition>>([]);\n\nexport const registerIcon = (...icons: IconModule[]) => {\n icons.forEach(({ set: modSet, name, ...iconDef }) => {\n const set = modSet ?? 'budicon';\n\n if (!iconRegistry.has(set)) {\n iconRegistry.set(set, new Map([[name, iconDef]]));\n } else if (!iconRegistry.get(set)!.has(name)) {\n iconRegistry.get(set)!.set(name, iconDef);\n }\n });\n};\n\nexport const forceRegisterIcon = (...icons: IconModule[]) => {\n icons.forEach(({ set: modSet, name, ...iconDef }) => {\n const set = modSet ?? 'budicon';\n\n if (!iconRegistry.has(set)) {\n iconRegistry.set(set, new Map([[name, iconDef]]));\n } else {\n iconRegistry.get(set)!.set(name, iconDef);\n }\n });\n};\n\nexport const StyledIcon = styled.svg<{ size?: IconProps['size'] }>(({ theme, size = 's' }) => {\n const {\n components: {\n icon: {\n size: { s, m, l }\n }\n }\n } = theme;\n return css`\n display: inline-block;\n fill: currentColor;\n vertical-align: middle;\n flex-shrink: 0;\n /* stylelint-disable unit-allowed-list */\n min-width: 14px;\n min-height: 14px;\n /* stylelint-enable unit-allowed-list */\n\n ${size === 's' &&\n css`\n width: ${s};\n height: ${s};\n `}\n\n ${size === 'm' &&\n css`\n width: ${m};\n height: ${m};\n `}\n\n ${size === 'l' &&\n css`\n width: ${l};\n height: ${l};\n `}\n\n ${size === 'font-size' &&\n css`\n width: 1em;\n height: 1em;\n `}\n `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport const StyledIconShape = styled.div<{\n background: NonNullable<IconProps['background']>;\n foreground?: IconProps['foreground'];\n size?: IconProps['size'];\n shape?: IconProps['shape'];\n}>(({ theme, background, foreground, size = 'm', shape = 'square' }) => {\n const readableFg = readableColor(background);\n\n const {\n base: { 'border-radius': baseRadius },\n components: {\n icon: {\n size: { s, m, l },\n 'border-radius-multiplier': borderRadiusMultiplier\n }\n }\n } = theme;\n\n return css`\n color: ${foreground ?? readableFg};\n background-color: ${background};\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: clip;\n\n ${size === 's' &&\n css`\n width: ${s};\n height: ${s};\n `}\n\n ${size === 'm' &&\n css`\n width: ${m};\n height: ${m};\n `}\n\n ${size === 'l' &&\n css`\n width: ${l};\n height: ${l};\n `}\n\n ${size === 'font-size' &&\n css`\n width: 1em;\n height: 1em;\n `}\n\n ${shape === 'square' &&\n css`\n border-radius: calc(${borderRadiusMultiplier} * ${baseRadius});\n `}\n\n ${shape === 'circle' &&\n css`\n border-radius: 50%;\n `}\n\n ${StyledIcon} {\n width: 50%;\n height: 50%;\n /* stylelint-disable unit-allowed-list */\n min-width: min(14px, 90%);\n min-height: min(14px, 90%);\n /* stylelint-enable unit-allowed-list */\n }\n `;\n});\n\nStyledIconShape.defaultProps = defaultThemeProp;\n\nconst emptyIconDefinition: Readonly<IconDefinition> = Object.freeze({ Component: () => null });\n\nconst Icon = forwardRef<RefElement<IconProps>, PropsWithoutRef<IconProps>>(function Icon(\n {\n set: setProp,\n name,\n size,\n 'aria-label': ariaLabel,\n role,\n ...restProps\n }: PropsWithoutRef<IconProps>,\n ref\n) {\n const {\n base: { 'icon-set': setTheme }\n } = useTheme();\n\n const set = setProp ?? setTheme ?? 'budicon';\n\n const [iconDef, setIconDef] = useState(iconRegistry.get(set)?.get(name) ?? emptyIconDefinition);\n\n useEffect(() => {\n if (iconRegistry.get(set)?.has(name)) {\n setIconDef(iconRegistry.get(set)!.get(name)!);\n return;\n }\n\n const controller = new AbortController();\n\n (async () => {\n try {\n const encodedName = encodeURIComponent(name);\n let iconSet: string;\n let module: IconModule;\n\n switch (set) {\n case 'streamline':\n iconSet = 'streamline-icons';\n break;\n case 'budicon':\n iconSet = 'icons';\n break;\n default:\n throw new Error('Unknown icon');\n }\n\n // Different extensions are required for different build setups.\n try {\n module = await import(`./${iconSet}/${encodedName}.icon`);\n } catch {\n try {\n module = await import(`./${iconSet}/${encodedName}.icon.tsx`);\n } catch {\n module = await import(`./${iconSet}/${encodedName}.icon.js`);\n }\n }\n\n if (module.name !== name || !module.Component) throw new Error('Malformed icon definition');\n\n registerIcon(module);\n } catch {\n registerIcon({ set, name, ...emptyIconDefinition });\n }\n\n if (!controller.signal.aborted) {\n setIconDef(iconRegistry.get(set)!.get(name) ?? emptyIconDefinition);\n }\n })();\n\n return () => controller.abort();\n }, [name, set]);\n\n return typeof restProps.background === 'string' ? (\n <StyledIconShape\n {...restProps}\n background={restProps.background}\n foreground={restProps.foreground}\n shape={restProps.shape}\n size={size}\n ref={ref as Ref<HTMLDivElement>}\n >\n <StyledIcon\n role={role ?? ariaLabel !== undefined ? 'img' : 'presentation'}\n aria-label={ariaLabel}\n viewBox={iconDef.viewBox}\n >\n <iconDef.Component />\n </StyledIcon>\n </StyledIconShape>\n ) : (\n <StyledIcon\n {...restProps}\n role={role ?? ariaLabel !== undefined ? 'img' : 'presentation'}\n aria-label={ariaLabel}\n viewBox={iconDef.viewBox}\n size={size}\n ref={ref as Ref<SVGSVGElement>}\n >\n <iconDef.Component />\n </StyledIcon>\n );\n}) as ForwardRefExoticComponent<IconProps>;\n\nexport default Icon;\n"]}
|
|
1
|
+
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect } from 'react';\nimport type { Ref, PropsWithoutRef, ComponentType, ForwardRefExoticComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useTheme } from '../../hooks';\nimport type { NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { readableColor } from '../../styles';\n\ntype BaseIconProps = NoChildrenProp & {\n /**\n * The name of the icon set.\n * @default theme.base['icon-set']\n */\n set?: string;\n /** The name indicating the Cosmos Icon. Reference the catalog above for the available names. */\n name: string;\n /**\n * Background & svg size.\n * @default \"s\" without background, \"m\" with background.\n */\n size?: 's' | 'm' | 'l' | 'font-size';\n};\n\nexport type IconProps =\n | WithAttributes<\n 'div',\n BaseIconProps & {\n /** Background color. */\n background: string;\n /**\n * Foreground color (svg fill).\n * Applies readable color off background if undefined.\n */\n foreground?: string;\n /**\n * Shape of the background.\n * @default 'square'\n */\n shape?: 'square' | 'circle';\n }\n >\n | WithAttributes<\n 'svg',\n BaseIconProps & {\n background?: never;\n foreground?: never;\n shape?: never;\n }\n >;\n\nexport interface IconDefinition {\n Component: ComponentType;\n viewBox?: string;\n}\n\nexport interface IconModule extends IconDefinition {\n set?: IconProps['set'];\n name: IconProps['name'];\n}\n\nconst iconRegistry = new Map<string, Map<string, IconDefinition>>([]);\n\nexport const registerIcon = (...icons: IconModule[]) => {\n icons.forEach(({ set: modSet, name, ...iconDef }) => {\n const set = modSet ?? 'budicon';\n\n if (!iconRegistry.has(set)) {\n iconRegistry.set(set, new Map([[name, iconDef]]));\n } else if (!iconRegistry.get(set)!.has(name)) {\n iconRegistry.get(set)!.set(name, iconDef);\n }\n });\n};\n\nexport const forceRegisterIcon = (...icons: IconModule[]) => {\n icons.forEach(({ set: modSet, name, ...iconDef }) => {\n const set = modSet ?? 'budicon';\n\n if (!iconRegistry.has(set)) {\n iconRegistry.set(set, new Map([[name, iconDef]]));\n } else {\n iconRegistry.get(set)!.set(name, iconDef);\n }\n });\n};\n\nexport const StyledIcon = styled.svg<{ size?: IconProps['size'] }>(({ theme, size = 's' }) => {\n const {\n components: {\n icon: {\n size: { s, m, l }\n }\n }\n } = theme;\n return css`\n display: inline-block;\n fill: currentColor;\n vertical-align: middle;\n flex-shrink: 0;\n /* stylelint-disable unit-allowed-list */\n min-width: 14px;\n min-height: 14px;\n /* stylelint-enable unit-allowed-list */\n\n @media (forced-colors: active) {\n fill: CanvasText;\n }\n\n ${size === 's' &&\n css`\n width: ${s};\n height: ${s};\n `}\n\n ${size === 'm' &&\n css`\n width: ${m};\n height: ${m};\n `}\n\n ${size === 'l' &&\n css`\n width: ${l};\n height: ${l};\n `}\n\n ${size === 'font-size' &&\n css`\n width: 1em;\n height: 1em;\n `}\n `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport const StyledIconShape = styled.div<{\n background: NonNullable<IconProps['background']>;\n foreground?: IconProps['foreground'];\n size?: IconProps['size'];\n shape?: IconProps['shape'];\n}>(({ theme, background, foreground, size = 'm', shape = 'square' }) => {\n const readableFg = readableColor(background);\n\n const {\n base: { 'border-radius': baseRadius },\n components: {\n icon: {\n size: { s, m, l },\n 'border-radius-multiplier': borderRadiusMultiplier\n }\n }\n } = theme;\n\n return css`\n color: ${foreground ?? readableFg};\n background-color: ${background};\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: clip;\n\n ${size === 's' &&\n css`\n width: ${s};\n height: ${s};\n `}\n\n ${size === 'm' &&\n css`\n width: ${m};\n height: ${m};\n `}\n\n ${size === 'l' &&\n css`\n width: ${l};\n height: ${l};\n `}\n\n ${size === 'font-size' &&\n css`\n width: 1em;\n height: 1em;\n `}\n\n ${shape === 'square' &&\n css`\n border-radius: calc(${borderRadiusMultiplier} * ${baseRadius});\n `}\n\n ${shape === 'circle' &&\n css`\n border-radius: 50%;\n `}\n\n ${StyledIcon} {\n width: 50%;\n height: 50%;\n /* stylelint-disable unit-allowed-list */\n min-width: min(14px, 90%);\n min-height: min(14px, 90%);\n /* stylelint-enable unit-allowed-list */\n }\n `;\n});\n\nStyledIconShape.defaultProps = defaultThemeProp;\n\nconst emptyIconDefinition: Readonly<IconDefinition> = Object.freeze({ Component: () => null });\n\nconst Icon = forwardRef<RefElement<IconProps>, PropsWithoutRef<IconProps>>(function Icon(\n {\n set: setProp,\n name,\n size,\n 'aria-label': ariaLabel,\n role,\n ...restProps\n }: PropsWithoutRef<IconProps>,\n ref\n) {\n const {\n base: { 'icon-set': setTheme }\n } = useTheme();\n\n const set = setProp ?? setTheme ?? 'budicon';\n\n const [iconDef, setIconDef] = useState(iconRegistry.get(set)?.get(name) ?? emptyIconDefinition);\n\n useEffect(() => {\n if (iconRegistry.get(set)?.has(name)) {\n setIconDef(iconRegistry.get(set)!.get(name)!);\n return;\n }\n\n const controller = new AbortController();\n\n (async () => {\n try {\n const encodedName = encodeURIComponent(name);\n let iconSet: string;\n let module: IconModule;\n\n switch (set) {\n case 'streamline':\n iconSet = 'streamline-icons';\n break;\n case 'budicon':\n iconSet = 'icons';\n break;\n default:\n throw new Error('Unknown icon');\n }\n\n // Different extensions are required for different build setups.\n try {\n module = await import(`./${iconSet}/${encodedName}.icon`);\n } catch {\n try {\n module = await import(`./${iconSet}/${encodedName}.icon.tsx`);\n } catch {\n module = await import(`./${iconSet}/${encodedName}.icon.js`);\n }\n }\n\n if (module.name !== name || !module.Component) throw new Error('Malformed icon definition');\n\n registerIcon(module);\n } catch {\n registerIcon({ set, name, ...emptyIconDefinition });\n }\n\n if (!controller.signal.aborted) {\n setIconDef(iconRegistry.get(set)!.get(name) ?? emptyIconDefinition);\n }\n })();\n\n return () => controller.abort();\n }, [name, set]);\n\n return typeof restProps.background === 'string' ? (\n <StyledIconShape\n {...restProps}\n background={restProps.background}\n foreground={restProps.foreground}\n shape={restProps.shape}\n size={size}\n ref={ref as Ref<HTMLDivElement>}\n >\n <StyledIcon\n role={role ?? ariaLabel !== undefined ? 'img' : 'presentation'}\n aria-label={ariaLabel}\n viewBox={iconDef.viewBox}\n >\n <iconDef.Component />\n </StyledIcon>\n </StyledIconShape>\n ) : (\n <StyledIcon\n {...restProps}\n role={role ?? ariaLabel !== undefined ? 'img' : 'presentation'}\n aria-label={ariaLabel}\n viewBox={iconDef.viewBox}\n size={size}\n ref={ref as Ref<SVGSVGElement>}\n >\n <iconDef.Component />\n </StyledIcon>\n );\n}) as ForwardRefExoticComponent<IconProps>;\n\nexport default Icon;\n"]}
|
|
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
// This file is autogenerated. Any changes will be overwritten.
|
|
3
3
|
export const set = 'budicon';
|
|
4
4
|
export const name = 'dataviz-string-field';
|
|
5
|
-
export const Component = () => _jsx("path", { d: '
|
|
5
|
+
export const Component = () => _jsx("path", { d: 'M19 8.737h-4.667V19h-2.666V8.737H7V6h12v2.737Z' });
|
|
6
6
|
export const viewBox = '0 0 25 25';
|
|
7
7
|
//# sourceMappingURL=dataviz-string-field.icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dataviz-string-field.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/dataviz-string-field.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,SAAS,CAAC;AAE7B,MAAM,CAAC,MAAM,IAAI,GAAG,sBAAsB,CAAC;AAE3C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,eAAM,CAAC,EAAC,gDAAgD,GAAG,CAAC;AAE3F,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'budicon';\n\nexport const name = 'dataviz-string-field';\n\nexport const Component = () => <path d='
|
|
1
|
+
{"version":3,"file":"dataviz-string-field.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/dataviz-string-field.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,SAAS,CAAC;AAE7B,MAAM,CAAC,MAAM,IAAI,GAAG,sBAAsB,CAAC;AAE3C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,eAAM,CAAC,EAAC,gDAAgD,GAAG,CAAC;AAE3F,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'budicon';\n\nexport const name = 'dataviz-string-field';\n\nexport const Component = () => <path d='M19 8.737h-4.667V19h-2.666V8.737H7V6h12v2.737Z' />;\n\nexport const viewBox = '0 0 25 25';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAInE,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,eAAO,MAAM,iBAAiB;gBAA+B,OAAO;SAqBnE,CAAC;AAIF,eAAO,MAAM,kBAAkB,yGAiB7B,CAAC;AAIH,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAInE,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,eAAO,MAAM,iBAAiB;gBAA+B,OAAO;SAqBnE,CAAC;AAIF,eAAO,MAAM,kBAAkB,yGAiB7B,CAAC;AAIH,eAAO,MAAM,WAAW,6jBA+HtB,CAAC"}
|
|
@@ -64,6 +64,10 @@ export const StyledModal = styled(StyledCard)(({ theme: { base, components }, al
|
|
|
64
64
|
overflow-y: auto;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
+
@media (forced-colors: active) {
|
|
68
|
+
border: 0.0625rem solid transparent;
|
|
69
|
+
}
|
|
70
|
+
|
|
67
71
|
${StyledResponsiveActionsContainer} {
|
|
68
72
|
padding: calc(2.5 * ${base.spacing}) calc(3 * ${base.spacing}) calc(3 * ${base.spacing});
|
|
69
73
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,gCAAgC,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAMrD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAC5C,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;IACjC,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvC,OAAO,GAAG,CAAA;sBACQ,CAAC,GAAG,SAAS,MAAM,IAAI,CAAC,OAAO,UAAU,CAAC,GAAG,SAAS,MAAM,IAAI,CAAC,OAAO;eAC/E,GAAG,GAAG,SAAS,MAAM,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,OAAO;;;yCAGjC,IAAI,CAAC,OAAO;;;aAGxC,UAAU;6BACM,IAAI,CAAC,OAAO;;;QAGjC,YAAY;iBACH,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;KAE5C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACnE,OAAO,GAAG,CAAA;;0BAEc,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,OAAO;;;;;;;iCAO/B,IAAI,CAAC,OAAO;;;UAGnC,cAAc;;;GAGrB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAE3C,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9E,IAAI,eAAe,GAAG,MAAM,CAAC;IAC7B,IAAI,eAAe,GAAG,MAAM,CAAC;IAE7B,IAAI,KAAK,EAAE,CAAC;QACV,eAAe,GAAG,MAAM,CAAC;QACzB,eAAe,GAAG,MAAM,CAAC;IAC3B,CAAC;SAAM,IAAI,SAAS,EAAE,CAAC;QACrB,eAAe,GAAG,MAAM,CAAC;IAC3B,CAAC;IAED,OAAO,GAAG,CAAA;;kBAEM,IAAI,CAAC,MAAM,CAAC,IAAI
|
|
1
|
+
{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport type { PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledIcon } from '../Icon';\nimport { StyledCard } from '../Card';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledResponsiveActionsContainer } from '../ResponsiveActions';\nimport { StyledProgressBackdrop } from '../Progress';\n\nimport type { ModalContextValue, ModalProps } from './Modal.types';\n\ntype ModalPropsWithDefaults = PropsWithDefaults<ModalProps, 'stretch' | 'center' | 'autoWidth'>;\n\nexport const StyledModalChildrenWrap = styled.div``;\n\nexport const StyledModalHeader = styled.header<{ hasAction?: boolean }>(\n ({ theme: { base }, hasAction }) => {\n const padAdjust = hasAction ? 0.75 : 0;\n\n return css`\n padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${3 - padAdjust} * ${base.spacing})\n calc(${2.5 - padAdjust} * ${base.spacing}) calc(3 * ${base.spacing});\n\n h2 {\n margin-block-start: calc(0.5 * ${base.spacing});\n }\n\n h2 > ${StyledIcon} {\n margin-inline-end: ${base.spacing};\n }\n\n ${StyledButton} {\n color: ${base.palette['foreground-color']};\n }\n `;\n }\n);\n\nStyledModalHeader.defaultProps = defaultThemeProp;\n\nexport const StyledModalContent = styled.div(({ theme: { base } }) => {\n return css`\n position: relative;\n padding: calc(0.5 * ${base.spacing}) calc(3 * ${base.spacing});\n\n @media (height >= 31.25rem) {\n overflow-y: auto;\n }\n\n &:last-child {\n padding-bottom: calc(3 * ${base.spacing});\n }\n\n & > ${StyledBackdrop} {\n top: var(--scroll-top, 0);\n }\n `;\n});\n\nStyledModalContent.defaultProps = defaultThemeProp;\n\nexport const StyledModal = styled(StyledCard)<\n ModalPropsWithDefaults & Pick<ModalContextValue, 'alert' | 'state'>\n>(({ theme: { base, components }, alert, autoWidth, center, stretch, state }) => {\n let defaultMinWidth = '80ch';\n let defaultMaxWidth = '80ch';\n\n if (alert) {\n defaultMinWidth = '60ch';\n defaultMaxWidth = '60ch';\n } else if (autoWidth) {\n defaultMaxWidth = '100%';\n }\n\n return css`\n position: relative;\n box-shadow: ${base.shadow.high};\n\n @media (height < 31.25rem) {\n overflow-y: auto;\n }\n\n @media (forced-colors: active) {\n border: 0.0625rem solid transparent;\n }\n\n ${StyledResponsiveActionsContainer} {\n padding: calc(2.5 * ${base.spacing}) calc(3 * ${base.spacing}) calc(3 * ${base.spacing});\n }\n\n ${!alert && stretch\n ? css`\n height: calc(100% - 1rem);\n\n ${autoWidth\n ? css`\n max-width: min(calc(100% - 1rem), ${defaultMaxWidth});\n `\n : css`\n width: calc(100% - 1rem);\n `}\n\n @media (min-width: ${base.breakpoints.sm}) {\n height: calc(100% - 2rem);\n\n ${autoWidth\n ? css`\n max-width: min(calc(100% - 2rem), ${defaultMaxWidth});\n `\n : css`\n width: calc(100% - 2rem);\n `}\n }\n\n @media (min-width: ${base.breakpoints.md}) {\n height: calc(100% - 4rem);\n\n ${autoWidth\n ? css`\n max-width: min(calc(100% - 4rem), ${defaultMaxWidth});\n `\n : css`\n width: calc(100% - 4rem);\n `}\n }\n `\n : css`\n min-width: min(calc(100% - 1rem), ${defaultMinWidth});\n max-width: min(calc(100% - 1rem), ${defaultMaxWidth});\n max-height: calc(100% - 1rem);\n\n &:not(:has(footer)) ${StyledProgressBackdrop} {\n border-end-start-radius: ${base['border-radius']};\n border-end-end-radius: ${base['border-radius']};\n }\n\n ${!center &&\n css`\n margin-block-start: 0.5rem;\n `}\n\n @media (min-width: ${base.breakpoints.sm}) {\n min-width: min(calc(100% - 2rem), ${defaultMinWidth});\n max-width: min(calc(100% - 2rem), ${defaultMaxWidth});\n max-height: calc(100% - 2rem);\n ${!center &&\n css`\n margin-block-start: 1rem;\n `}\n }\n\n @media (min-width: ${base.breakpoints.md}) {\n min-width: min(calc(100% - 4rem), ${defaultMinWidth});\n max-width: min(calc(100% - 4rem), ${defaultMaxWidth});\n max-height: calc(100% - 4rem);\n ${!center &&\n css`\n margin-block-start: 2rem;\n `}\n }\n `}\n\n ${state === 'docked' &&\n css`\n /*\n * This seems like the most optimal of the suboptimal solutions.\n * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n */\n &&& {\n /* Using non logical properties due to Safari 14.x support and since the inline bottom values are the same. */\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n pointer-events: auto;\n }\n `}\n\n &[aria-busy='true'] {\n ${StyledModalContent} {\n /* TODO: Replace with useScrollToggle hook. */\n overflow: hidden;\n min-height: 8rem;\n }\n }\n\n &&& {\n background: ${components.modal.background};\n }\n `;\n});\n\nStyledModal.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,yGAW9B,CAAC;AAIF,eAAO,MAAM,aAAa;aAAyB,MAAM;aAAW,OAAO;
|
|
1
|
+
{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,yGAW9B,CAAC;AAIF,eAAO,MAAM,aAAa;aAAyB,MAAM;aAAW,OAAO;SAmI1E,CAAC"}
|
|
@@ -30,6 +30,10 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
|
|
|
30
30
|
--scale-in-size: 1;
|
|
31
31
|
--animation-duration: calc(2 * ${animation.speed});
|
|
32
32
|
|
|
33
|
+
@media (forced-colors: active) {
|
|
34
|
+
border: 0.0625rem solid transparent;
|
|
35
|
+
}
|
|
36
|
+
|
|
33
37
|
&[data-popper-reference-hidden='true'] {
|
|
34
38
|
visibility: hidden;
|
|
35
39
|
pointer-events: none;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.styles.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;CAW3C,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,YAAY,EAC7B,SAAS,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,EAC/D,MAAM,EAAE,EAAE,IAAI,EAAE,EAChB,OAAO,EACP,SAAS,EACV,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,eAAe,EAAE,uBAAuB,EAAE,EAC5D,OAAO,EAAE,EAAE,UAAU,EAAE,iBAAiB,EAAE,EAC3C,EACF,EACD,MAAM,EACN,MAAM,EACP,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;;iBAMG,MAAM,CAAC,CAAC,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa;oBACxC,iBAAiB;4BACT,uBAAuB,MAAM,YAAY;oBACjD,IAAI;eACT,OAAO,CAAC,kBAAkB,CAAC;QAClC,UAAU,CAAC,aAAa;;uCAEO,SAAS,CAAC,KAAK
|
|
1
|
+
{"version":3,"file":"Popover.styles.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;CAW3C,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,YAAY,EAC7B,SAAS,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,EAC/D,MAAM,EAAE,EAAE,IAAI,EAAE,EAChB,OAAO,EACP,SAAS,EACV,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,eAAe,EAAE,uBAAuB,EAAE,EAC5D,OAAO,EAAE,EAAE,UAAU,EAAE,iBAAiB,EAAE,EAC3C,EACF,EACD,MAAM,EACN,MAAM,EACP,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;;iBAMG,MAAM,CAAC,CAAC,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa;oBACxC,iBAAiB;4BACT,uBAAuB,MAAM,YAAY;oBACjD,IAAI;eACT,OAAO,CAAC,kBAAkB,CAAC;QAClC,UAAU,CAAC,aAAa;;uCAEO,SAAS,CAAC,KAAK;;;;;;;;;;;;;0BAa5B,UAAU,CAAC,MAAM,KAAK,UAAU,CAAC,WAAW,KAAK,UAAU,CAAC,OAAO;;YAEjF,kBAAkB;;;;+CAIiB,YAAY;;;;;;;oBAOvC,MAAM;qBACL,MAAM;;;;;;;;0BAQD,UAAU,CAAC,MAAM,KAAK,UAAU,CAAC,aAAa,KAAK,UAAU,CAAC,OAAO;;YAEnF,kBAAkB;;;;2CAIa,YAAY;;;;;;;oBAOnC,MAAM;kBACR,MAAM;;;;;;;;0BAQE,UAAU,CAAC,MAAM,KAAK,UAAU,CAAC,aAAa,KAAK,UAAU,CAAC,OAAO;;YAEnF,kBAAkB;;;;8CAIgB,YAAY;;;;;;;mBAOvC,MAAM;mBACN,MAAM;;;;;;;;0BAQC,UAAU,CAAC,MAAM,KAAK,UAAU,CAAC,WAAW,KAAK,UAAU,CAAC,OAAO;;YAEjF,kBAAkB;;;;4CAIc,YAAY;;;;;;;mBAOrC,MAAM;oBACL,MAAM;;;;;KAKrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { animations } from '../../styles';\n\nexport const StyledPopoverArrow = styled.div`\n background-color: inherit;\n\n ::before {\n content: '';\n display: block;\n position: absolute;\n inset: -0.25rem;\n background-color: inherit;\n transform: rotate(45deg);\n }\n`;\n\nStyledPopoverArrow.defaultProps = defaultThemeProp;\n\nexport const StyledPopover = styled.div<{ offset?: number; portal?: boolean }>(\n ({\n theme: {\n base: {\n 'border-radius': borderRadius,\n 'z-index': { popover: popoverZIndex, backdrop: backdropZIndex },\n shadow: { high },\n palette,\n animation\n },\n components: {\n 'form-control': { 'border-radius': formControlBorderRadius },\n popover: { background: popoverBackground }\n }\n },\n portal,\n offset\n }) => {\n return css`\n /*\n Margin should never be used with Popper.\n https://popper.js.org/docs/v2/migration-guide/#4-remove-all-css-margins\n */\n margin: 0 !important;\n z-index: ${portal ? backdropZIndex - 1 : popoverZIndex};\n background: ${popoverBackground};\n border-radius: calc(${formControlBorderRadius} * ${borderRadius});\n box-shadow: ${high};\n color: ${palette['foreground-color']};\n ${animations.subProperties}\n --scale-in-size: 1;\n --animation-duration: calc(2 * ${animation.speed});\n\n @media (forced-colors: active) {\n border: 0.0625rem solid transparent;\n }\n\n &[data-popper-reference-hidden='true'] {\n visibility: hidden;\n pointer-events: none;\n }\n\n &[data-popper-placement^='top'] {\n transform-origin: center bottom;\n animation-name: ${animations.reveal}, ${animations.slideInYEnd}, ${animations.scaleIn};\n\n > ${StyledPopoverArrow} {\n top: calc(100%);\n\n ::before {\n border-bottom-right-radius: calc(${borderRadius} / 4);\n }\n }\n\n ::before {\n content: '';\n position: absolute;\n height: ${offset}px;\n bottom: -${offset}px;\n left: 0;\n right: 0;\n }\n }\n\n &[data-popper-placement^='bottom'] {\n transform-origin: center top;\n animation-name: ${animations.reveal}, ${animations.slideInYStart}, ${animations.scaleIn};\n\n > ${StyledPopoverArrow} {\n bottom: calc(100%);\n\n ::before {\n border-top-left-radius: calc(${borderRadius} / 4);\n }\n }\n\n ::before {\n content: '';\n position: absolute;\n height: ${offset}px;\n top: -${offset}px;\n left: 0;\n right: 0;\n }\n }\n\n &[data-popper-placement^='right'] {\n transform-origin: left center;\n animation-name: ${animations.reveal}, ${animations.slideInXStart}, ${animations.scaleIn};\n\n > ${StyledPopoverArrow} {\n right: calc(100%);\n\n ::before {\n border-bottom-left-radius: calc(${borderRadius} / 4);\n }\n }\n\n ::before {\n content: '';\n position: absolute;\n width: ${offset}px;\n left: -${offset}px;\n top: 0;\n bottom: 0;\n }\n }\n\n &[data-popper-placement^='left'] {\n transform-origin: right center;\n animation-name: ${animations.reveal}, ${animations.slideInXEnd}, ${animations.scaleIn};\n\n > ${StyledPopoverArrow} {\n left: calc(100%);\n\n ::before {\n border-top-right-radius: calc(${borderRadius} / 4);\n }\n }\n\n ::before {\n content: '';\n position: absolute;\n width: ${offset}px;\n right: -${offset}px;\n top: 0;\n bottom: 0;\n }\n }\n `;\n }\n);\n\nStyledPopover.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioCheck.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8C,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAM5F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAc,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAIhE,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,OAAO,EACP,cAAc,GACZ,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,8BAA8B;IAC9B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAChD,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CACJ,CAAC;AAEF,eAAO,MAAM,sBAAsB,mJA4ClC,CAAC;AAIF,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"RadioCheck.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8C,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAM5F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAc,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAIhE,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,OAAO,EACP,cAAc,GACZ,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,8BAA8B;IAC9B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAChD,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CACJ,CAAC;AAEF,eAAO,MAAM,sBAAsB,mJA4ClC,CAAC;AAIF,eAAO,MAAM,qBAAqB,2GA0GhC,CAAC;AAIH,eAAO,MAAM,gBAAgB,qJAkD5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kKA+DhC,CAAC;;;;AAyGF,wBAA6D"}
|
|
@@ -81,11 +81,14 @@ export const StyledRadioCheckInput = styled.input(props => {
|
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
&[type='radio'] ${prcSelector}::after {
|
|
84
|
+
content: '';
|
|
85
|
+
position: absolute;
|
|
86
|
+
inset: 0;
|
|
84
87
|
margin: auto;
|
|
85
|
-
width:
|
|
86
|
-
height:
|
|
87
|
-
|
|
88
|
-
|
|
88
|
+
width: calc(${size} * 0.3);
|
|
89
|
+
height: calc(${size} * 0.3);
|
|
90
|
+
border-radius: ${radioRadius};
|
|
91
|
+
border: calc(${size} * 0.2) solid ${foreground};
|
|
89
92
|
}
|
|
90
93
|
|
|
91
94
|
&[type='checkbox'] ${prcSelector} {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { MouseEvent, KeyboardEvent, PropsWithoutRef, ChangeEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { createClassName, tryCatch, withTestIds } from '../../utils';\nimport type { NoChildrenProp, WithAttributes, RefElement, TestIdProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize, readableColor } from '../../styles';\nimport HiddenText from '../HiddenText';\nimport type { elements } from '../FormField/FormField.test-ids';\n\nimport { getRadioCheckTestIds } from './RadioCheck.test-ids';\n\nexport type RadioCheckProps = WithAttributes<\n 'input',\n NoChildrenProp &\n TestIdProp<typeof elements> & {\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Sets the type of input. */\n type: 'radio' | 'checkbox';\n /**\n * Sets control to an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n * @default false\n */\n indeterminate?: boolean;\n /** Sets checked prop via onChange when using as controlled component. */\n checked?: boolean;\n /** Initialize checked prop when using as uncontrolled component. */\n defaultChecked?: boolean;\n /**\n * Controls the styling of the RadioCheck.\n * @default 'simple'\n */\n variant?: 'simple' | 'card';\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** info like error, success, warning messages */\n info?: FormControlProps['info'];\n /** Callback invoked when this particular radio button is selected. */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /** Pass a string used as input's aria-describedby. */\n ariaDescribedby?: string;\n }\n>;\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n props => {\n const {\n theme: {\n components: {\n 'form-field': formField,\n 'radio-check': {\n size,\n 'touch-size': touchSize,\n 'background-color': backgroundColor,\n 'border-color': borderColor,\n 'border-width': borderWidth\n }\n }\n },\n status\n } = props;\n\n let statusBorderColor = borderColor;\n if (status === 'error' || status === 'warning') {\n statusBorderColor = formField[status]['status-color'];\n }\n\n return css`\n display: flex;\n flex-shrink: 0;\n position: relative;\n width: ${size};\n height: ${size};\n margin-inline-end: 1ch;\n border: ${borderWidth} solid ${statusBorderColor};\n background-color: ${backgroundColor};\n\n @media (pointer: coarse) {\n width: ${touchSize};\n height: ${touchSize};\n }\n\n &::after {\n content: '';\n display: none;\n }\n `;\n }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n const {\n disabled,\n theme: {\n base: { 'border-radius': baseBorderRadius },\n components: {\n 'form-control': {\n ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n ':read-only': { 'background-color': readOnlyBackgroundColor }\n },\n 'radio-check': {\n size,\n ':checked': {\n 'background-color': checkedBackgroundColor,\n 'border-color': checkedBorderColor\n }\n },\n checkbox: { 'border-radius': checkRadius },\n 'radio-button': { 'border-radius': radioRadius }\n }\n }\n } = props;\n\n const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n const foreground = tryCatch(() => readableColor(backgroundColor));\n\n const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n const { ltr } = useDirection();\n\n return css`\n ${hideVisually}\n margin: 0;\n\n /* Sets rect size for JAWS focus outline */\n width: ${size};\n height: ${size};\n\n ${!disabled &&\n css`\n &:focus ${prcSelector} {\n box-shadow: ${shadow};\n border-color: ${focusBorderColor};\n }\n `}\n &:checked\n ${prcSelector},\n &:checked:disabled\n ${prcSelector},\n &[type='checkbox']:indeterminate\n ${prcSelector},\n &[type='checkbox']:indeterminate:disabled\n ${prcSelector} {\n border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n background-color: ${backgroundColor};\n\n &::after {\n display: block;\n }\n }\n\n &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n border-radius: ${radioRadius};\n }\n\n &[type='radio'] ${prcSelector}::after {\n margin: auto;\n width: 100%;\n height: 100%;\n background-color: ${foreground};\n transform: scale(0.4);\n }\n\n &[type='checkbox'] ${prcSelector} {\n border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n }\n\n &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n &::after {\n width: 40%;\n height: 75%;\n ${ltr\n ? css`\n transform: rotate(45deg) translate(50%, -30%);\n `\n : css`\n transform: rotate(45deg) translate(-50%, 30%);\n `}\n border-right: 0.15em solid ${foreground};\n border-bottom: 0.15em solid ${foreground};\n }\n }\n\n &[type='checkbox']:indeterminate ${prcSelector} {\n display: flex;\n\n &::after {\n width: 90%;\n height: 0.15em;\n margin: auto;\n background-color: ${foreground};\n }\n }\n `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n props => {\n const {\n disabled,\n readOnly,\n theme: {\n base,\n components: {\n 'radio-check': {\n label: { color: labelColor, 'font-weight': labelFontWeight }\n },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n } = props;\n\n const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n return css`\n > ${StyledLabel} {\n cursor: pointer;\n display: flex;\n align-items: center;\n font-weight: ${labelFontWeight};\n word-break: break-word;\n font-size: ${fontSize.s};\n color: ${labelColor};\n margin: 0;\n min-height: ${base['hit-area']['mouse-min']};\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${base.spacing} / 4);\n }\n\n ${!(disabled || readOnly) &&\n css`\n &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n `}\n `;\n }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n ({\n disabled,\n readOnly,\n status,\n theme: {\n base: { palette, shadow, spacing },\n components: {\n card,\n 'form-field': formField,\n 'radio-check': { label },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n }) => {\n const useBorderColor =\n status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n return css`\n min-width: min-content;\n cursor: pointer;\n background-color: ${card.background};\n border-radius: ${card['border-radius']};\n border: 0.0625rem solid ${useBorderColor};\n padding: ${spacing};\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n ${!(disabled || readOnly) &&\n css`\n :hover:not(:focus-within) {\n border-color: ${hoverBorderColor};\n\n ${StyledLabel} ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n }\n\n :focus-within {\n box-shadow: ${shadow.focus};\n border-color: transparent;\n }\n `}\n > ${StyledLabel} {\n display: flex;\n align-items: center;\n color: ${label.color};\n font-weight: ${label['font-weight']};\n margin: 0;\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${spacing} / 4);\n }\n `;\n }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck = forwardRef<RefElement<RadioCheckProps>, PropsWithoutRef<RadioCheckProps>>(\n function RadioCheck(props, ref) {\n const uid = useUID();\n const t = useI18n();\n\n const {\n testId,\n type,\n id = uid,\n label,\n required = false,\n disabled = false,\n readOnly = false,\n indeterminate = false,\n checked,\n defaultChecked,\n variant = 'simple',\n onClick,\n onKeyDown,\n onChange,\n status,\n info,\n additionalInfo,\n ariaDescribedby,\n className,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getRadioCheckTestIds);\n const isRadio = type === 'radio';\n const card = variant === 'card';\n const newRef = useConsolidatedRef(ref);\n const readonlyDescId = useUID();\n\n useEffect(() => {\n if (!isRadio && newRef.current) newRef.current.indeterminate = !!indeterminate;\n }, [newRef, indeterminate, isRadio]);\n\n return (\n <FormField\n testId={testIds}\n as={card ? StyledRadioCheckCard : StyledRadioCheck}\n label={\n <>\n <StyledPseudoRadioCheck\n status={status}\n isRadio={isRadio}\n as={StyledFormControl}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onMouseDown={(e: MouseEvent<HTMLInputElement>) => e.preventDefault()}\n />\n {label}\n {readOnly && <HiddenText id={readonlyDescId}>{t('read_only')}</HiddenText>}\n </>\n }\n labelAs={card ? 'div' : undefined}\n id={id}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n info={info}\n isRadioCheck\n inline\n labelAfter\n additionalInfo={additionalInfo}\n >\n <StyledRadioCheckInput\n data-testid={testIds.control}\n {...restProps}\n className={createClassName('radio-check', className, {\n variant,\n type\n })}\n id={id}\n type={type}\n required={required}\n checked={checked}\n defaultChecked={defaultChecked}\n aria-describedby={readOnly ? `${ariaDescribedby} ${readonlyDescId}` : ariaDescribedby}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onChange}\n onClick={(e: MouseEvent<HTMLInputElement>) => {\n if (readOnly) e.preventDefault();\n onClick?.(e);\n }}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (type === 'checkbox' && readOnly && e.key === ' ') e.preventDefault();\n if (type === 'radio' && readOnly && e.key.includes('Arrow')) e.preventDefault();\n onKeyDown?.(e);\n }}\n ref={newRef}\n />\n </FormField>\n );\n }\n);\n\nexport default withTestIds(RadioCheck, getRadioCheckTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { MouseEvent, KeyboardEvent, PropsWithoutRef, ChangeEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { createClassName, tryCatch, withTestIds } from '../../utils';\nimport type { NoChildrenProp, WithAttributes, RefElement, TestIdProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize, readableColor } from '../../styles';\nimport HiddenText from '../HiddenText';\nimport type { elements } from '../FormField/FormField.test-ids';\n\nimport { getRadioCheckTestIds } from './RadioCheck.test-ids';\n\nexport type RadioCheckProps = WithAttributes<\n 'input',\n NoChildrenProp &\n TestIdProp<typeof elements> & {\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Sets the type of input. */\n type: 'radio' | 'checkbox';\n /**\n * Sets control to an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n * @default false\n */\n indeterminate?: boolean;\n /** Sets checked prop via onChange when using as controlled component. */\n checked?: boolean;\n /** Initialize checked prop when using as uncontrolled component. */\n defaultChecked?: boolean;\n /**\n * Controls the styling of the RadioCheck.\n * @default 'simple'\n */\n variant?: 'simple' | 'card';\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** info like error, success, warning messages */\n info?: FormControlProps['info'];\n /** Callback invoked when this particular radio button is selected. */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /** Pass a string used as input's aria-describedby. */\n ariaDescribedby?: string;\n }\n>;\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n props => {\n const {\n theme: {\n components: {\n 'form-field': formField,\n 'radio-check': {\n size,\n 'touch-size': touchSize,\n 'background-color': backgroundColor,\n 'border-color': borderColor,\n 'border-width': borderWidth\n }\n }\n },\n status\n } = props;\n\n let statusBorderColor = borderColor;\n if (status === 'error' || status === 'warning') {\n statusBorderColor = formField[status]['status-color'];\n }\n\n return css`\n display: flex;\n flex-shrink: 0;\n position: relative;\n width: ${size};\n height: ${size};\n margin-inline-end: 1ch;\n border: ${borderWidth} solid ${statusBorderColor};\n background-color: ${backgroundColor};\n\n @media (pointer: coarse) {\n width: ${touchSize};\n height: ${touchSize};\n }\n\n &::after {\n content: '';\n display: none;\n }\n `;\n }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n const {\n disabled,\n theme: {\n base: { 'border-radius': baseBorderRadius },\n components: {\n 'form-control': {\n ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n ':read-only': { 'background-color': readOnlyBackgroundColor }\n },\n 'radio-check': {\n size,\n ':checked': {\n 'background-color': checkedBackgroundColor,\n 'border-color': checkedBorderColor\n }\n },\n checkbox: { 'border-radius': checkRadius },\n 'radio-button': { 'border-radius': radioRadius }\n }\n }\n } = props;\n\n const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n const foreground = tryCatch(() => readableColor(backgroundColor));\n\n const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n const { ltr } = useDirection();\n\n return css`\n ${hideVisually}\n margin: 0;\n\n /* Sets rect size for JAWS focus outline */\n width: ${size};\n height: ${size};\n\n ${!disabled &&\n css`\n &:focus ${prcSelector} {\n box-shadow: ${shadow};\n border-color: ${focusBorderColor};\n }\n `}\n &:checked\n ${prcSelector},\n &:checked:disabled\n ${prcSelector},\n &[type='checkbox']:indeterminate\n ${prcSelector},\n &[type='checkbox']:indeterminate:disabled\n ${prcSelector} {\n border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n background-color: ${backgroundColor};\n\n &::after {\n display: block;\n }\n }\n\n &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n border-radius: ${radioRadius};\n }\n\n &[type='radio'] ${prcSelector}::after {\n content: '';\n position: absolute;\n inset: 0;\n margin: auto;\n width: calc(${size} * 0.3);\n height: calc(${size} * 0.3);\n border-radius: ${radioRadius};\n border: calc(${size} * 0.2) solid ${foreground};\n }\n\n &[type='checkbox'] ${prcSelector} {\n border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n }\n\n &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n &::after {\n width: 40%;\n height: 75%;\n ${ltr\n ? css`\n transform: rotate(45deg) translate(50%, -30%);\n `\n : css`\n transform: rotate(45deg) translate(-50%, 30%);\n `}\n border-right: 0.15em solid ${foreground};\n border-bottom: 0.15em solid ${foreground};\n }\n }\n\n &[type='checkbox']:indeterminate ${prcSelector} {\n display: flex;\n\n &::after {\n width: 90%;\n height: 0.15em;\n margin: auto;\n background-color: ${foreground};\n }\n }\n `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n props => {\n const {\n disabled,\n readOnly,\n theme: {\n base,\n components: {\n 'radio-check': {\n label: { color: labelColor, 'font-weight': labelFontWeight }\n },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n } = props;\n\n const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n return css`\n > ${StyledLabel} {\n cursor: pointer;\n display: flex;\n align-items: center;\n font-weight: ${labelFontWeight};\n word-break: break-word;\n font-size: ${fontSize.s};\n color: ${labelColor};\n margin: 0;\n min-height: ${base['hit-area']['mouse-min']};\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${base.spacing} / 4);\n }\n\n ${!(disabled || readOnly) &&\n css`\n &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n `}\n `;\n }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n ({\n disabled,\n readOnly,\n status,\n theme: {\n base: { palette, shadow, spacing },\n components: {\n card,\n 'form-field': formField,\n 'radio-check': { label },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n }) => {\n const useBorderColor =\n status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n return css`\n min-width: min-content;\n cursor: pointer;\n background-color: ${card.background};\n border-radius: ${card['border-radius']};\n border: 0.0625rem solid ${useBorderColor};\n padding: ${spacing};\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n ${!(disabled || readOnly) &&\n css`\n :hover:not(:focus-within) {\n border-color: ${hoverBorderColor};\n\n ${StyledLabel} ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n }\n\n :focus-within {\n box-shadow: ${shadow.focus};\n border-color: transparent;\n }\n `}\n > ${StyledLabel} {\n display: flex;\n align-items: center;\n color: ${label.color};\n font-weight: ${label['font-weight']};\n margin: 0;\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${spacing} / 4);\n }\n `;\n }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck = forwardRef<RefElement<RadioCheckProps>, PropsWithoutRef<RadioCheckProps>>(\n function RadioCheck(props, ref) {\n const uid = useUID();\n const t = useI18n();\n\n const {\n testId,\n type,\n id = uid,\n label,\n required = false,\n disabled = false,\n readOnly = false,\n indeterminate = false,\n checked,\n defaultChecked,\n variant = 'simple',\n onClick,\n onKeyDown,\n onChange,\n status,\n info,\n additionalInfo,\n ariaDescribedby,\n className,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getRadioCheckTestIds);\n const isRadio = type === 'radio';\n const card = variant === 'card';\n const newRef = useConsolidatedRef(ref);\n const readonlyDescId = useUID();\n\n useEffect(() => {\n if (!isRadio && newRef.current) newRef.current.indeterminate = !!indeterminate;\n }, [newRef, indeterminate, isRadio]);\n\n return (\n <FormField\n testId={testIds}\n as={card ? StyledRadioCheckCard : StyledRadioCheck}\n label={\n <>\n <StyledPseudoRadioCheck\n status={status}\n isRadio={isRadio}\n as={StyledFormControl}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onMouseDown={(e: MouseEvent<HTMLInputElement>) => e.preventDefault()}\n />\n {label}\n {readOnly && <HiddenText id={readonlyDescId}>{t('read_only')}</HiddenText>}\n </>\n }\n labelAs={card ? 'div' : undefined}\n id={id}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n info={info}\n isRadioCheck\n inline\n labelAfter\n additionalInfo={additionalInfo}\n >\n <StyledRadioCheckInput\n data-testid={testIds.control}\n {...restProps}\n className={createClassName('radio-check', className, {\n variant,\n type\n })}\n id={id}\n type={type}\n required={required}\n checked={checked}\n defaultChecked={defaultChecked}\n aria-describedby={readOnly ? `${ariaDescribedby} ${readonlyDescId}` : ariaDescribedby}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onChange}\n onClick={(e: MouseEvent<HTMLInputElement>) => {\n if (readOnly) e.preventDefault();\n onClick?.(e);\n }}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (type === 'checkbox' && readOnly && e.key === ' ') e.preventDefault();\n if (type === 'radio' && readOnly && e.key.includes('Arrow')) e.preventDefault();\n onKeyDown?.(e);\n }}\n ref={newRef}\n />\n </FormField>\n );\n }\n);\n\nexport default withTestIds(RadioCheck, getRadioCheckTestIds);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAI/D,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAUvD,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAI/D,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAUvD,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,2GAgFvB,CAAC;AAIF,eAAO,MAAM,WAAW,2GAkEvB,CAAC;AAIF,eAAO,MAAM,YAAY,yGAAe,CAAC;AAEzC,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CAyBvD,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -35,6 +35,15 @@ export const SwitchLabel = styled.label(({ theme: { base, components: { switch:
|
|
|
35
35
|
height: calc(0.5 * ${touchHeight});
|
|
36
36
|
width: calc(0.5 * ${touchHeight});
|
|
37
37
|
}
|
|
38
|
+
|
|
39
|
+
/* Use preferred color for icon because track takes opposite of background color */
|
|
40
|
+
@media (forced-colors: active) and (prefers-color-scheme: dark) {
|
|
41
|
+
fill: black;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@media (forced-colors: active) and (prefers-color-scheme: light) {
|
|
45
|
+
fill: white;
|
|
46
|
+
}
|
|
38
47
|
}
|
|
39
48
|
|
|
40
49
|
/** Track */
|
|
@@ -43,8 +52,7 @@ export const SwitchLabel = styled.label(({ theme: { base, components: { switch:
|
|
|
43
52
|
content: '';
|
|
44
53
|
inset-inline-end: 0;
|
|
45
54
|
width: ${width};
|
|
46
|
-
|
|
47
|
-
background-color: ${off.color};
|
|
55
|
+
border: solid calc(${height} / 2) ${off.color};
|
|
48
56
|
transition: background-color calc(0.5 * ${base.animation.speed})
|
|
49
57
|
${base.animation.timing.ease};
|
|
50
58
|
border-radius: calc(9999 * ${base['border-radius']});
|
|
@@ -95,7 +103,7 @@ export const SwitchInput = styled.input(({ theme: { base, components: { 'form-co
|
|
|
95
103
|
}
|
|
96
104
|
|
|
97
105
|
&:checked + ${SwitchLabel}::before {
|
|
98
|
-
|
|
106
|
+
border-color: ${on.color};
|
|
99
107
|
}
|
|
100
108
|
|
|
101
109
|
&:checked + ${SwitchLabel}::after {
|
|
@@ -111,11 +119,11 @@ export const SwitchInput = styled.input(({ theme: { base, components: { 'form-co
|
|
|
111
119
|
}
|
|
112
120
|
|
|
113
121
|
&:hover:checked + ${SwitchLabel}::before {
|
|
114
|
-
|
|
122
|
+
border-color: ${onHoverColors.background};
|
|
115
123
|
}
|
|
116
124
|
|
|
117
125
|
&:hover + ${SwitchLabel}::before {
|
|
118
|
-
|
|
126
|
+
border-color: ${offHoverColors.background};
|
|
119
127
|
}
|
|
120
128
|
|
|
121
129
|
&:focus + ${SwitchLabel}::before {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,YAAY,CAAC,SAAS,CAAC,CAAC;AA0BxB,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EACV,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,EAAE,EACvF,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;iCAGmB,KAAK;gBACtB,MAAM;;;;mCAIa,UAAU;kBAC3B,WAAW;;;;YAIjB,UAAU;;uCAEiB,KAAK;6BACf,MAAM;4BACP,MAAM;;;yCAGO,UAAU;+BACpB,WAAW;8BACZ,WAAW
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { ChangeEvent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type { BaseProps, ForwardRefForwardPropsComponent, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport type { FormControlProps } from '../FormControl';\nimport { useDirection, useUID } from '../../hooks';\nimport Flex from '../Flex';\nimport { getHoverColors, readableColor } from '../../styles';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport { tryCatch } from '../../utils';\n\nregisterIcon(checkIcon);\n\nexport interface SwitchProps extends BaseProps, NoChildrenProp {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /**\n * Disables the control.\n * @default false\n */\n disabled?: FormControlProps['disabled'];\n /**\n * Sets checked prop via onChange.\n * @default false\n */\n on?: boolean;\n /** Callback that is triggered when the Switch is toggled. */\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /** Ref for the input element. */\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const SwitchLabel = styled.label(\n ({\n theme: {\n base,\n components: {\n switch: { width, height, 'touch-width': touchWidth, 'touch-height': touchHeight, off }\n }\n }\n }) => {\n return css`\n position: relative;\n cursor: pointer;\n padding-inline-end: calc(${width} + 0.5rem);\n height: ${height};\n width: 100%;\n\n @media (pointer: coarse) {\n padding-inline-end: calc(${touchWidth} + 0.5rem);\n height: ${touchHeight};\n }\n\n /** Checkmark */\n & > ${StyledIcon} {\n position: absolute;\n inset-inline-end: calc(0.5 * ${width} + 0.25rem);\n height: calc(0.5 * ${height});\n width: calc(0.5 * ${height});\n\n @media (pointer: coarse) {\n inset-inline-end: calc(0.5 * ${touchWidth} + 0.25rem);\n height: calc(0.5 * ${touchHeight});\n width: calc(0.5 * ${touchHeight});\n }\n\n /* Use preferred color for icon because track takes opposite of background color */\n @media (forced-colors: active) and (prefers-color-scheme: dark) {\n fill: black;\n }\n\n @media (forced-colors: active) and (prefers-color-scheme: light) {\n fill: white;\n }\n }\n\n /** Track */\n &::before {\n position: absolute;\n content: '';\n inset-inline-end: 0;\n width: ${width};\n border: solid calc(${height} / 2) ${off.color};\n transition: background-color calc(0.5 * ${base.animation.speed})\n ${base.animation.timing.ease};\n border-radius: calc(9999 * ${base['border-radius']});\n\n @media (pointer: coarse) {\n width: ${touchWidth};\n height: ${touchHeight};\n }\n }\n\n /** Switch */\n &::after {\n position: absolute;\n content: '';\n inset-inline-end: calc(${width} - ${height} + 0.0625rem);\n height: calc(${height} - 0.125rem);\n width: calc(${height} - 0.125rem);\n background-color: ${base.palette['primary-background']};\n transition: transform calc(0.5 * ${base.animation.speed}) ${base.animation.timing.ease};\n border-radius: calc(9999 * ${base['border-radius']});\n\n @media (pointer: coarse) {\n inset-inline-end: calc(${touchWidth} - ${touchHeight} + 0.0625rem);\n height: calc(${touchHeight} - 0.125rem);\n width: calc(${touchHeight} - 0.125rem);\n }\n }\n `;\n }\n);\n\nSwitchLabel.defaultProps = defaultThemeProp;\n\nexport const SwitchInput = styled.input(\n ({\n theme: {\n base,\n components: {\n 'form-control': {\n ':focus': { 'box-shadow': shadow }\n },\n switch: { height, width, 'touch-height': touchHeight, 'touch-width': touchWidth, on, off }\n }\n }\n }) => {\n const { ltr } = useDirection();\n\n const checkmarkColor = tryCatch(() => readableColor(on.color));\n\n const onHoverColors = getHoverColors(on.color);\n const offHoverColors = getHoverColors(off.color);\n\n return css`\n ${hideVisually}\n\n & + ${SwitchLabel} {\n min-height: ${base['hit-area']['mouse-min']};\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n }\n\n & + ${SwitchLabel} > ${StyledIcon} {\n color: ${checkmarkColor};\n }\n\n &:checked + ${SwitchLabel}::before {\n border-color: ${on.color};\n }\n\n &:checked + ${SwitchLabel}::after {\n transform: translateX(calc((${width} - ${height}) * ${ltr ? '1' : '-1'}));\n\n @media (pointer: coarse) {\n transform: translateX(calc((${touchWidth} - ${touchHeight}) * ${ltr ? '1' : '-1'}));\n }\n }\n\n &:hover + ${SwitchLabel} > ${StyledIcon} {\n color: ${onHoverColors.foreground};\n }\n\n &:hover:checked + ${SwitchLabel}::before {\n border-color: ${onHoverColors.background};\n }\n\n &:hover + ${SwitchLabel}::before {\n border-color: ${offHoverColors.background};\n }\n\n &:focus + ${SwitchLabel}::before {\n box-shadow: ${shadow};\n }\n\n &:disabled + ${SwitchLabel} {\n opacity: ${base['disabled-opacity']};\n }\n `;\n }\n);\n\nSwitchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSwitch = styled.div``;\n\nconst Switch: ForwardRefForwardPropsComponent<SwitchProps> = forwardRef(function Switch(\n props: PropsWithoutRef<SwitchProps>,\n ref: SwitchProps['ref']\n) {\n const uid = useUID();\n const { id = uid, label, disabled = false, on = false, onChange, ...restProps } = props;\n\n return (\n <StyledSwitch>\n <SwitchInput\n {...restProps}\n id={id}\n type='checkbox'\n role='switch'\n checked={on}\n disabled={disabled}\n onChange={onChange}\n ref={ref}\n />\n <Flex container={{ alignItems: 'center' }} as={SwitchLabel} htmlFor={id}>\n {label}\n {on && <Icon name='check' />}\n </Flex>\n </StyledSwitch>\n );\n});\n\nexport default Switch;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "9.0.0-build.12.
|
|
3
|
+
"version": "9.0.0-build.12.3",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"author": "Pegasystems",
|