@sproutsocial/seeds-react-checkbox 1.3.0 → 1.3.2
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/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +9 -9
- package/dist/index.d.ts +9 -9
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
package/dist/esm/index.js
CHANGED
|
@@ -366,7 +366,7 @@ var Checkbox = class extends React2.Component {
|
|
|
366
366
|
import "react";
|
|
367
367
|
|
|
368
368
|
// src/index.ts
|
|
369
|
-
var
|
|
369
|
+
var index_default = Checkbox;
|
|
370
370
|
export {
|
|
371
371
|
CheckIcon,
|
|
372
372
|
Checkbox,
|
|
@@ -376,7 +376,7 @@ export {
|
|
|
376
376
|
LabelText,
|
|
377
377
|
PillInput,
|
|
378
378
|
checkboxContainerHoverStyles,
|
|
379
|
-
|
|
379
|
+
index_default as default,
|
|
380
380
|
inputWrapperHoverStyles,
|
|
381
381
|
pillInputHoverStyles
|
|
382
382
|
};
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Checkbox.tsx","../../src/styles.tsx","../../src/types/CheckboxTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container, {\n CheckboxBox,\n CheckIcon,\n PillInput,\n InputWrapper,\n LabelText,\n CheckboxContainer,\n} from \"./styles\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nexport default class Checkbox extends React.Component<TypeCheckboxProps> {\n el: HTMLInputElement | null | undefined;\n static defaultProps = {\n indeterminate: false,\n disabled: false,\n };\n\n override componentDidUpdate(prevProps: TypeCheckboxProps) {\n if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n override componentDidMount() {\n if (this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n handleChange = (event: React.SyntheticEvent<HTMLInputElement>) => {\n this.props.onChange(event);\n };\n\n override render() {\n const {\n id,\n value,\n name,\n label,\n labelProps,\n checked,\n disabled,\n indeterminate,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange,\n ariaLabel,\n appearance = \"default\",\n qa = {},\n tabIndex,\n inputProps = {},\n ...rest\n } = this.props;\n const isPill = appearance === \"pill\";\n // @ts-notes - tabIndex requires a number but can be a string\n const tabIndexInt =\n typeof tabIndex === \"string\" ? parseInt(tabIndex, 10) : tabIndex;\n\n // TODO: Refactor pill checkboxes to use fewer elements for performance gains\n if (!isPill) {\n return (\n <CheckboxContainer\n as={label && \"label\"}\n disabled={disabled}\n indeterminate={indeterminate}\n checked={checked}\n {...rest}\n >\n <input\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n {label && (\n <LabelText {...labelProps} disabled={disabled}>\n {label}\n </LabelText>\n )}\n </CheckboxContainer>\n );\n }\n\n return (\n <Container as={label && \"label\"} {...rest}>\n <InputWrapper appearance={appearance}>\n <PillInput\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n <CheckboxBox>\n <CheckIcon\n name={indeterminate ? \"minus-solid\" : \"check-solid\"}\n size=\"mini\"\n fixedWidth\n />\n </CheckboxBox>\n </InputWrapper>\n </Container>\n );\n }\n}\n","import * as React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nconst Container = styled.span`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n\n ${COMMON}\n`;\nContainer.displayName = \"Checkbox\";\n\nexport const inputWrapperHoverStyles = css`\n background-color: ${(props) => props.theme.colors.app.background.base};\n`;\n\nexport const InputWrapper = styled(Box)<Pick<TypeCheckboxProps, \"appearance\">>`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n background-color: transparent;\n transition: all ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_inout};\n /* This solution is temporary. DS-1095 */\n mix-blend-mode: ${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"};\n ${pill}\n\n &:hover {\n ${inputWrapperHoverStyles}\n }\n\n ${PillInput} {\n ${pill}\n }\n `}\n`;\nInputWrapper.displayName = \"InputWrapper\";\n\nexport const CheckboxBox = styled.div`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.form.background.base};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n background-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n pointer-events: none;\n`;\nCheckboxBox.displayName = \"CheckboxBox\";\n\nexport const CheckIcon = styled(Icon).attrs({ \"aria-hidden\": true })`\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n pointer-events: none;\n transition: all\n ${({ theme }) => `${theme.duration.fast} ${theme.easing.ease_inout}`};\n\n &,\n & .Icon-svg {\n width: 10px;\n height: 10px;\n line-height: 10px;\n }\n`;\nCheckIcon.displayName = \"CheckIcon\";\n\nexport const pillInputHoverStyles = css<Pick<TypeCheckboxProps, \"disabled\">>`\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${(props) => (props.disabled ? 0 : 1)};\n color: ${(props) => props.theme.colors.form.border.base};\n }\n`;\n\nexport const PillInput = styled.input`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n border-radius: 4px;\n\n /* IE 11 overrides */\n &::-ms-check {\n display: none;\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${(props) =>\n !props.checked &&\n css`\n &:hover,\n &:focus {\n ${pillInputHoverStyles}\n }\n `}\n\n ${(props) =>\n props.checked &&\n css`\n ~ ${CheckboxBox} {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: 1;\n color: ${props.theme.colors.icon.inverse};\n }\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ~ ${CheckboxBox} {\n opacity: 0.4;\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${props.checked ? 1 : 0};\n }\n `}\n`;\nPillInput.displayName = \"PillInput\";\n\nexport const LabelText = styled(Text)<Pick<TypeCheckboxProps, \"disabled\">>`\n margin-left: ${(props) => props.theme.space[300]};\n font-size: ${(props) => props.theme.typography[200].fontSize};\n line-height: 1;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n color: ${(props) => props.theme.colors.text.headline};\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n `}\n`;\nLabelText.displayName = \"LabelText\";\n\nconst checkSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46\"\n fill={color}\n />\n </svg>\n);\n\nconst indeterminateSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"10\" height=\"2\" x=\"2\" y=\"6\" rx=\"1\" ry=\"1\" fill={color} />\n </svg>\n);\n\nconst getIcon = (type: \"indeterminate\" | \"check\", color: string) => {\n const escapedColor = encodeURIComponent(color);\n const icon =\n type === \"indeterminate\"\n ? indeterminateSVG(escapedColor)\n : checkSVG(escapedColor);\n return icon;\n};\n\nexport const checkboxContainerHoverStyles = css<\n Pick<TypeCheckboxProps, \"disabled\" | \"checked\">\n>`\n &:before {\n opacity: ${(props) => (props.disabled && !props.checked ? 0 : 1)};\n }\n`;\n/* stylelint-disable eslint-disable */\nexport const CheckboxContainer = styled.span<\n Pick<TypeCheckboxProps, \"indeterminate\" | \"checked\" | \"disabled\">\n>(\n (props) => css`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};\n\n @supports (-webkit-appearance: none) {\n &:before {\n /* The following line cannot have multiple lint exclusions, otherwise it will not work\n the svg data url MUST be single quoted */\n /* prettier-ignore */\n content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(\n getIcon(\n props.indeterminate ? \"indeterminate\" : \"check\",\n props.checked\n ? props.theme.colors.form.background.base\n : props.theme.colors.form.border.base\n )\n )}');\n opacity: ${props.checked ? 1 : 0};\n position: absolute;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n text-align: center;\n transform: translateY(1px);\n line-height: 1;\n margin: auto;\n pointer-events: none;\n transition: ${props.theme.duration.fast}\n ${props.theme.easing.ease_inout};\n }\n\n &:hover:before {\n ${checkboxContainerHoverStyles}\n }\n\n ${props.disabled &&\n css`\n opacity: 0.4;\n `}\n\n input[type='checkbox'] {\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n padding: 0;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n border: 1px solid ${props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${props.theme.colors.form.background.base};\n transition: all ${props.theme.duration.fast}\n ${props.theme.easing.ease_in};\n cursor: ${props.disabled ? \"not-allowed\" : \"pointer\"};\n flex-shrink: 0;\n\n &:not(:checked) {\n ${!props.indeterminate &&\n css`\n border-color: ${props.theme.colors.form.border\n .base} !important; /* We don't want the focus ring to remove the border */\n background-color: ${props.theme.colors.form.background.base};\n `}\n }\n\n &:checked {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n\n ${props.indeterminate &&\n props.checked &&\n css`\n border-color: ${props.theme.colors.form.border.selected} !important;\n background-color: ${props.theme.colors.form.background\n .selected} !important;\n `}\n\n &:focus {\n ${focusRing}\n }\n }\n }\n\n ${COMMON}\n `\n);\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeCheckboxProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** ID of the form element, should match the \"for\" value of the associated label */\n id: string;\n value?: string;\n name?: string;\n\n /** Label text to display next to the checkbox */\n label?: string;\n\n /** Label used to describe the input (if not used with an accompanying visual label) */\n ariaLabel?: string;\n labelProps?: TypeTextProps;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n onChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;\n appearance?: \"pill\" | \"default\";\n qa?: object;\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n}\n","import Checkbox from \"./Checkbox\";\n\nexport default Checkbox;\nexport { Checkbox };\nexport * from \"./types/CheckboxTypes\";\nexport * from \"./styles\";\n"],"mappings":"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","names":["React","props","jsx"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Checkbox.tsx","../../src/styles.tsx","../../src/types/CheckboxTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container, {\n CheckboxBox,\n CheckIcon,\n PillInput,\n InputWrapper,\n LabelText,\n CheckboxContainer,\n} from \"./styles\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nexport default class Checkbox extends React.Component<TypeCheckboxProps> {\n el: HTMLInputElement | null | undefined;\n static defaultProps = {\n indeterminate: false,\n disabled: false,\n };\n\n override componentDidUpdate(prevProps: TypeCheckboxProps) {\n if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n override componentDidMount() {\n if (this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n handleChange = (event: React.SyntheticEvent<HTMLInputElement>) => {\n this.props.onChange(event);\n };\n\n override render() {\n const {\n id,\n value,\n name,\n label,\n labelProps,\n checked,\n disabled,\n indeterminate,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange,\n ariaLabel,\n appearance = \"default\",\n qa = {},\n tabIndex,\n inputProps = {},\n ...rest\n } = this.props;\n const isPill = appearance === \"pill\";\n // @ts-notes - tabIndex requires a number but can be a string\n const tabIndexInt =\n typeof tabIndex === \"string\" ? parseInt(tabIndex, 10) : tabIndex;\n\n // TODO: Refactor pill checkboxes to use fewer elements for performance gains\n if (!isPill) {\n return (\n <CheckboxContainer\n as={label && \"label\"}\n disabled={disabled}\n indeterminate={indeterminate}\n checked={checked}\n {...rest}\n >\n <input\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n {label && (\n <LabelText {...labelProps} disabled={disabled}>\n {label}\n </LabelText>\n )}\n </CheckboxContainer>\n );\n }\n\n return (\n <Container as={label && \"label\"} {...rest}>\n <InputWrapper appearance={appearance}>\n <PillInput\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n <CheckboxBox>\n <CheckIcon\n name={indeterminate ? \"minus-solid\" : \"check-solid\"}\n size=\"mini\"\n fixedWidth\n />\n </CheckboxBox>\n </InputWrapper>\n </Container>\n );\n }\n}\n","import * as React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nconst Container = styled.span`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n\n ${COMMON}\n`;\nContainer.displayName = \"Checkbox\";\n\nexport const inputWrapperHoverStyles = css`\n background-color: ${(props) => props.theme.colors.app.background.base};\n`;\n\nexport const InputWrapper = styled(Box)<Pick<TypeCheckboxProps, \"appearance\">>`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n background-color: transparent;\n transition: all ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_inout};\n /* This solution is temporary. DS-1095 */\n mix-blend-mode: ${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"};\n ${pill}\n\n &:hover {\n ${inputWrapperHoverStyles}\n }\n\n ${PillInput} {\n ${pill}\n }\n `}\n`;\nInputWrapper.displayName = \"InputWrapper\";\n\nexport const CheckboxBox = styled.div`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.form.background.base};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n background-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n pointer-events: none;\n`;\nCheckboxBox.displayName = \"CheckboxBox\";\n\nexport const CheckIcon = styled(Icon).attrs({ \"aria-hidden\": true })`\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n pointer-events: none;\n transition: all\n ${({ theme }) => `${theme.duration.fast} ${theme.easing.ease_inout}`};\n\n &,\n & .Icon-svg {\n width: 10px;\n height: 10px;\n line-height: 10px;\n }\n`;\nCheckIcon.displayName = \"CheckIcon\";\n\nexport const pillInputHoverStyles = css<Pick<TypeCheckboxProps, \"disabled\">>`\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${(props) => (props.disabled ? 0 : 1)};\n color: ${(props) => props.theme.colors.form.border.base};\n }\n`;\n\nexport const PillInput = styled.input`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n border-radius: 4px;\n\n /* IE 11 overrides */\n &::-ms-check {\n display: none;\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${(props) =>\n !props.checked &&\n css`\n &:hover,\n &:focus {\n ${pillInputHoverStyles}\n }\n `}\n\n ${(props) =>\n props.checked &&\n css`\n ~ ${CheckboxBox} {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: 1;\n color: ${props.theme.colors.icon.inverse};\n }\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ~ ${CheckboxBox} {\n opacity: 0.4;\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${props.checked ? 1 : 0};\n }\n `}\n`;\nPillInput.displayName = \"PillInput\";\n\nexport const LabelText = styled(Text)<Pick<TypeCheckboxProps, \"disabled\">>`\n margin-left: ${(props) => props.theme.space[300]};\n font-size: ${(props) => props.theme.typography[200].fontSize};\n line-height: 1;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n color: ${(props) => props.theme.colors.text.headline};\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n `}\n`;\nLabelText.displayName = \"LabelText\";\n\nconst checkSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46\"\n fill={color}\n />\n </svg>\n);\n\nconst indeterminateSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"10\" height=\"2\" x=\"2\" y=\"6\" rx=\"1\" ry=\"1\" fill={color} />\n </svg>\n);\n\nconst getIcon = (type: \"indeterminate\" | \"check\", color: string) => {\n const escapedColor = encodeURIComponent(color);\n const icon =\n type === \"indeterminate\"\n ? indeterminateSVG(escapedColor)\n : checkSVG(escapedColor);\n return icon;\n};\n\nexport const checkboxContainerHoverStyles = css<\n Pick<TypeCheckboxProps, \"disabled\" | \"checked\">\n>`\n &:before {\n opacity: ${(props) => (props.disabled && !props.checked ? 0 : 1)};\n }\n`;\n/* stylelint-disable eslint-disable */\nexport const CheckboxContainer = styled.span<\n Pick<TypeCheckboxProps, \"indeterminate\" | \"checked\" | \"disabled\">\n>(\n (props) => css`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};\n\n @supports (-webkit-appearance: none) {\n &:before {\n /* The following line cannot have multiple lint exclusions, otherwise it will not work\n the svg data url MUST be single quoted */\n /* prettier-ignore */\n content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(\n getIcon(\n props.indeterminate ? \"indeterminate\" : \"check\",\n props.checked\n ? props.theme.colors.form.background.base\n : props.theme.colors.form.border.base\n )\n )}');\n opacity: ${props.checked ? 1 : 0};\n position: absolute;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n text-align: center;\n transform: translateY(1px);\n line-height: 1;\n margin: auto;\n pointer-events: none;\n transition: ${props.theme.duration.fast}\n ${props.theme.easing.ease_inout};\n }\n\n &:hover:before {\n ${checkboxContainerHoverStyles}\n }\n\n ${props.disabled &&\n css`\n opacity: 0.4;\n `}\n\n input[type='checkbox'] {\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n padding: 0;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n border: 1px solid ${props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${props.theme.colors.form.background.base};\n transition: all ${props.theme.duration.fast}\n ${props.theme.easing.ease_in};\n cursor: ${props.disabled ? \"not-allowed\" : \"pointer\"};\n flex-shrink: 0;\n\n &:not(:checked) {\n ${!props.indeterminate &&\n css`\n border-color: ${props.theme.colors.form.border\n .base} !important; /* We don't want the focus ring to remove the border */\n background-color: ${props.theme.colors.form.background.base};\n `}\n }\n\n &:checked {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n\n ${props.indeterminate &&\n props.checked &&\n css`\n border-color: ${props.theme.colors.form.border.selected} !important;\n background-color: ${props.theme.colors.form.background\n .selected} !important;\n `}\n\n &:focus {\n ${focusRing}\n }\n }\n }\n\n ${COMMON}\n `\n);\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeCheckboxProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** ID of the form element, should match the \"for\" value of the associated label */\n id: string;\n value?: string;\n name?: string;\n\n /** Label text to display next to the checkbox */\n label?: string;\n\n /** Label used to describe the input (if not used with an accompanying visual label) */\n ariaLabel?: string;\n labelProps?: TypeTextProps;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n onChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;\n appearance?: \"pill\" | \"default\";\n qa?: object;\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n}\n","import Checkbox from \"./Checkbox\";\n\nexport default Checkbox;\nexport { Checkbox };\nexport * from \"./types/CheckboxTypes\";\nexport * from \"./styles\";\n"],"mappings":"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","names":["React","props","jsx"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -54,15 +54,15 @@ declare const pillInputHoverStyles: styled_components.FlattenInterpolation<style
|
|
|
54
54
|
declare const PillInput: styled_components.StyledComponent<"input", any, {}, never>;
|
|
55
55
|
declare const LabelText: styled_components.StyledComponent<{
|
|
56
56
|
({ fontSize, children, qa, color, ...rest }: _sproutsocial_seeds_react_text.TypeTextProps): react_jsx_runtime.JSX.Element;
|
|
57
|
-
Headline:
|
|
58
|
-
SubHeadline:
|
|
59
|
-
SmallSubHeadline:
|
|
60
|
-
Byline:
|
|
61
|
-
SmallByline:
|
|
62
|
-
BodyCopy:
|
|
63
|
-
SmallBodyCopy:
|
|
57
|
+
Headline: React.FC<_sproutsocial_seeds_react_text.TypeTextProps>;
|
|
58
|
+
SubHeadline: React.FC<_sproutsocial_seeds_react_text.TypeTextProps>;
|
|
59
|
+
SmallSubHeadline: React.FC<_sproutsocial_seeds_react_text.TypeTextProps>;
|
|
60
|
+
Byline: React.FC<_sproutsocial_seeds_react_text.TypeTextProps>;
|
|
61
|
+
SmallByline: React.FC<_sproutsocial_seeds_react_text.TypeTextProps>;
|
|
62
|
+
BodyCopy: React.FC<_sproutsocial_seeds_react_text.TypeTextProps>;
|
|
63
|
+
SmallBodyCopy: React.FC<_sproutsocial_seeds_react_text.TypeTextProps>;
|
|
64
64
|
}, any, Pick<TypeCheckboxProps, "disabled">, never>;
|
|
65
|
-
declare const checkboxContainerHoverStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Pick<TypeCheckboxProps, "
|
|
66
|
-
declare const CheckboxContainer: styled_components.StyledComponent<"span", any, Pick<TypeCheckboxProps, "
|
|
65
|
+
declare const checkboxContainerHoverStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Pick<TypeCheckboxProps, "checked" | "disabled">, any>>;
|
|
66
|
+
declare const CheckboxContainer: styled_components.StyledComponent<"span", any, Pick<TypeCheckboxProps, "checked" | "indeterminate" | "disabled">, never>;
|
|
67
67
|
|
|
68
68
|
export { CheckIcon, Checkbox, CheckboxBox, CheckboxContainer, InputWrapper, LabelText, PillInput, type TypeCheckboxProps, checkboxContainerHoverStyles, Checkbox as default, inputWrapperHoverStyles, pillInputHoverStyles };
|
package/dist/index.d.ts
CHANGED
|
@@ -54,15 +54,15 @@ declare const pillInputHoverStyles: styled_components.FlattenInterpolation<style
|
|
|
54
54
|
declare const PillInput: styled_components.StyledComponent<"input", any, {}, never>;
|
|
55
55
|
declare const LabelText: styled_components.StyledComponent<{
|
|
56
56
|
({ fontSize, children, qa, color, ...rest }: _sproutsocial_seeds_react_text.TypeTextProps): react_jsx_runtime.JSX.Element;
|
|
57
|
-
Headline:
|
|
58
|
-
SubHeadline:
|
|
59
|
-
SmallSubHeadline:
|
|
60
|
-
Byline:
|
|
61
|
-
SmallByline:
|
|
62
|
-
BodyCopy:
|
|
63
|
-
SmallBodyCopy:
|
|
57
|
+
Headline: React.FC<_sproutsocial_seeds_react_text.TypeTextProps>;
|
|
58
|
+
SubHeadline: React.FC<_sproutsocial_seeds_react_text.TypeTextProps>;
|
|
59
|
+
SmallSubHeadline: React.FC<_sproutsocial_seeds_react_text.TypeTextProps>;
|
|
60
|
+
Byline: React.FC<_sproutsocial_seeds_react_text.TypeTextProps>;
|
|
61
|
+
SmallByline: React.FC<_sproutsocial_seeds_react_text.TypeTextProps>;
|
|
62
|
+
BodyCopy: React.FC<_sproutsocial_seeds_react_text.TypeTextProps>;
|
|
63
|
+
SmallBodyCopy: React.FC<_sproutsocial_seeds_react_text.TypeTextProps>;
|
|
64
64
|
}, any, Pick<TypeCheckboxProps, "disabled">, never>;
|
|
65
|
-
declare const checkboxContainerHoverStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Pick<TypeCheckboxProps, "
|
|
66
|
-
declare const CheckboxContainer: styled_components.StyledComponent<"span", any, Pick<TypeCheckboxProps, "
|
|
65
|
+
declare const checkboxContainerHoverStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Pick<TypeCheckboxProps, "checked" | "disabled">, any>>;
|
|
66
|
+
declare const CheckboxContainer: styled_components.StyledComponent<"span", any, Pick<TypeCheckboxProps, "checked" | "indeterminate" | "disabled">, never>;
|
|
67
67
|
|
|
68
68
|
export { CheckIcon, Checkbox, CheckboxBox, CheckboxContainer, InputWrapper, LabelText, PillInput, type TypeCheckboxProps, checkboxContainerHoverStyles, Checkbox as default, inputWrapperHoverStyles, pillInputHoverStyles };
|
package/dist/index.js
CHANGED
|
@@ -28,8 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
|
|
30
30
|
// src/index.ts
|
|
31
|
-
var
|
|
32
|
-
__export(
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
33
|
CheckIcon: () => CheckIcon,
|
|
34
34
|
Checkbox: () => Checkbox,
|
|
35
35
|
CheckboxBox: () => CheckboxBox,
|
|
@@ -38,11 +38,11 @@ __export(src_exports, {
|
|
|
38
38
|
LabelText: () => LabelText,
|
|
39
39
|
PillInput: () => PillInput,
|
|
40
40
|
checkboxContainerHoverStyles: () => checkboxContainerHoverStyles,
|
|
41
|
-
default: () =>
|
|
41
|
+
default: () => index_default,
|
|
42
42
|
inputWrapperHoverStyles: () => inputWrapperHoverStyles,
|
|
43
43
|
pillInputHoverStyles: () => pillInputHoverStyles
|
|
44
44
|
});
|
|
45
|
-
module.exports = __toCommonJS(
|
|
45
|
+
module.exports = __toCommonJS(index_exports);
|
|
46
46
|
|
|
47
47
|
// src/Checkbox.tsx
|
|
48
48
|
var React2 = __toESM(require("react"));
|
|
@@ -412,7 +412,7 @@ var Checkbox = class extends React2.Component {
|
|
|
412
412
|
var React3 = require("react");
|
|
413
413
|
|
|
414
414
|
// src/index.ts
|
|
415
|
-
var
|
|
415
|
+
var index_default = Checkbox;
|
|
416
416
|
// Annotate the CommonJS export names for ESM import in node:
|
|
417
417
|
0 && (module.exports = {
|
|
418
418
|
CheckIcon,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Checkbox.tsx","../src/styles.tsx","../src/types/CheckboxTypes.ts"],"sourcesContent":["import Checkbox from \"./Checkbox\";\n\nexport default Checkbox;\nexport { Checkbox };\nexport * from \"./types/CheckboxTypes\";\nexport * from \"./styles\";\n","import * as React from \"react\";\nimport Container, {\n CheckboxBox,\n CheckIcon,\n PillInput,\n InputWrapper,\n LabelText,\n CheckboxContainer,\n} from \"./styles\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nexport default class Checkbox extends React.Component<TypeCheckboxProps> {\n el: HTMLInputElement | null | undefined;\n static defaultProps = {\n indeterminate: false,\n disabled: false,\n };\n\n override componentDidUpdate(prevProps: TypeCheckboxProps) {\n if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n override componentDidMount() {\n if (this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n handleChange = (event: React.SyntheticEvent<HTMLInputElement>) => {\n this.props.onChange(event);\n };\n\n override render() {\n const {\n id,\n value,\n name,\n label,\n labelProps,\n checked,\n disabled,\n indeterminate,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange,\n ariaLabel,\n appearance = \"default\",\n qa = {},\n tabIndex,\n inputProps = {},\n ...rest\n } = this.props;\n const isPill = appearance === \"pill\";\n // @ts-notes - tabIndex requires a number but can be a string\n const tabIndexInt =\n typeof tabIndex === \"string\" ? parseInt(tabIndex, 10) : tabIndex;\n\n // TODO: Refactor pill checkboxes to use fewer elements for performance gains\n if (!isPill) {\n return (\n <CheckboxContainer\n as={label && \"label\"}\n disabled={disabled}\n indeterminate={indeterminate}\n checked={checked}\n {...rest}\n >\n <input\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n {label && (\n <LabelText {...labelProps} disabled={disabled}>\n {label}\n </LabelText>\n )}\n </CheckboxContainer>\n );\n }\n\n return (\n <Container as={label && \"label\"} {...rest}>\n <InputWrapper appearance={appearance}>\n <PillInput\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n <CheckboxBox>\n <CheckIcon\n name={indeterminate ? \"minus-solid\" : \"check-solid\"}\n size=\"mini\"\n fixedWidth\n />\n </CheckboxBox>\n </InputWrapper>\n </Container>\n );\n }\n}\n","import * as React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nconst Container = styled.span`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n\n ${COMMON}\n`;\nContainer.displayName = \"Checkbox\";\n\nexport const inputWrapperHoverStyles = css`\n background-color: ${(props) => props.theme.colors.app.background.base};\n`;\n\nexport const InputWrapper = styled(Box)<Pick<TypeCheckboxProps, \"appearance\">>`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n background-color: transparent;\n transition: all ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_inout};\n /* This solution is temporary. DS-1095 */\n mix-blend-mode: ${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"};\n ${pill}\n\n &:hover {\n ${inputWrapperHoverStyles}\n }\n\n ${PillInput} {\n ${pill}\n }\n `}\n`;\nInputWrapper.displayName = \"InputWrapper\";\n\nexport const CheckboxBox = styled.div`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.form.background.base};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n background-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n pointer-events: none;\n`;\nCheckboxBox.displayName = \"CheckboxBox\";\n\nexport const CheckIcon = styled(Icon).attrs({ \"aria-hidden\": true })`\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n pointer-events: none;\n transition: all\n ${({ theme }) => `${theme.duration.fast} ${theme.easing.ease_inout}`};\n\n &,\n & .Icon-svg {\n width: 10px;\n height: 10px;\n line-height: 10px;\n }\n`;\nCheckIcon.displayName = \"CheckIcon\";\n\nexport const pillInputHoverStyles = css<Pick<TypeCheckboxProps, \"disabled\">>`\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${(props) => (props.disabled ? 0 : 1)};\n color: ${(props) => props.theme.colors.form.border.base};\n }\n`;\n\nexport const PillInput = styled.input`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n border-radius: 4px;\n\n /* IE 11 overrides */\n &::-ms-check {\n display: none;\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${(props) =>\n !props.checked &&\n css`\n &:hover,\n &:focus {\n ${pillInputHoverStyles}\n }\n `}\n\n ${(props) =>\n props.checked &&\n css`\n ~ ${CheckboxBox} {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: 1;\n color: ${props.theme.colors.icon.inverse};\n }\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ~ ${CheckboxBox} {\n opacity: 0.4;\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${props.checked ? 1 : 0};\n }\n `}\n`;\nPillInput.displayName = \"PillInput\";\n\nexport const LabelText = styled(Text)<Pick<TypeCheckboxProps, \"disabled\">>`\n margin-left: ${(props) => props.theme.space[300]};\n font-size: ${(props) => props.theme.typography[200].fontSize};\n line-height: 1;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n color: ${(props) => props.theme.colors.text.headline};\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n `}\n`;\nLabelText.displayName = \"LabelText\";\n\nconst checkSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46\"\n fill={color}\n />\n </svg>\n);\n\nconst indeterminateSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"10\" height=\"2\" x=\"2\" y=\"6\" rx=\"1\" ry=\"1\" fill={color} />\n </svg>\n);\n\nconst getIcon = (type: \"indeterminate\" | \"check\", color: string) => {\n const escapedColor = encodeURIComponent(color);\n const icon =\n type === \"indeterminate\"\n ? indeterminateSVG(escapedColor)\n : checkSVG(escapedColor);\n return icon;\n};\n\nexport const checkboxContainerHoverStyles = css<\n Pick<TypeCheckboxProps, \"disabled\" | \"checked\">\n>`\n &:before {\n opacity: ${(props) => (props.disabled && !props.checked ? 0 : 1)};\n }\n`;\n/* stylelint-disable eslint-disable */\nexport const CheckboxContainer = styled.span<\n Pick<TypeCheckboxProps, \"indeterminate\" | \"checked\" | \"disabled\">\n>(\n (props) => css`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};\n\n @supports (-webkit-appearance: none) {\n &:before {\n /* The following line cannot have multiple lint exclusions, otherwise it will not work\n the svg data url MUST be single quoted */\n /* prettier-ignore */\n content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(\n getIcon(\n props.indeterminate ? \"indeterminate\" : \"check\",\n props.checked\n ? props.theme.colors.form.background.base\n : props.theme.colors.form.border.base\n )\n )}');\n opacity: ${props.checked ? 1 : 0};\n position: absolute;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n text-align: center;\n transform: translateY(1px);\n line-height: 1;\n margin: auto;\n pointer-events: none;\n transition: ${props.theme.duration.fast}\n ${props.theme.easing.ease_inout};\n }\n\n &:hover:before {\n ${checkboxContainerHoverStyles}\n }\n\n ${props.disabled &&\n css`\n opacity: 0.4;\n `}\n\n input[type='checkbox'] {\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n padding: 0;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n border: 1px solid ${props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${props.theme.colors.form.background.base};\n transition: all ${props.theme.duration.fast}\n ${props.theme.easing.ease_in};\n cursor: ${props.disabled ? \"not-allowed\" : \"pointer\"};\n flex-shrink: 0;\n\n &:not(:checked) {\n ${!props.indeterminate &&\n css`\n border-color: ${props.theme.colors.form.border\n .base} !important; /* We don't want the focus ring to remove the border */\n background-color: ${props.theme.colors.form.background.base};\n `}\n }\n\n &:checked {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n\n ${props.indeterminate &&\n props.checked &&\n css`\n border-color: ${props.theme.colors.form.border.selected} !important;\n background-color: ${props.theme.colors.form.background\n .selected} !important;\n `}\n\n &:focus {\n ${focusRing}\n }\n }\n }\n\n ${COMMON}\n `\n);\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeCheckboxProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** ID of the form element, should match the \"for\" value of the associated label */\n id: string;\n value?: string;\n name?: string;\n\n /** Label text to display next to the checkbox */\n label?: string;\n\n /** Label used to describe the input (if not used with an accompanying visual label) */\n ariaLabel?: string;\n labelProps?: TypeTextProps;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n onChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;\n appearance?: \"pill\" | \"default\";\n qa?: object;\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n}\n"],"mappings":"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","names":["React","styled","Box","props","Icon","Text","import_jsx_runtime","React"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Checkbox.tsx","../src/styles.tsx","../src/types/CheckboxTypes.ts"],"sourcesContent":["import Checkbox from \"./Checkbox\";\n\nexport default Checkbox;\nexport { Checkbox };\nexport * from \"./types/CheckboxTypes\";\nexport * from \"./styles\";\n","import * as React from \"react\";\nimport Container, {\n CheckboxBox,\n CheckIcon,\n PillInput,\n InputWrapper,\n LabelText,\n CheckboxContainer,\n} from \"./styles\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nexport default class Checkbox extends React.Component<TypeCheckboxProps> {\n el: HTMLInputElement | null | undefined;\n static defaultProps = {\n indeterminate: false,\n disabled: false,\n };\n\n override componentDidUpdate(prevProps: TypeCheckboxProps) {\n if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n override componentDidMount() {\n if (this.el) {\n this.el.indeterminate = !!this.props.indeterminate;\n }\n }\n\n handleChange = (event: React.SyntheticEvent<HTMLInputElement>) => {\n this.props.onChange(event);\n };\n\n override render() {\n const {\n id,\n value,\n name,\n label,\n labelProps,\n checked,\n disabled,\n indeterminate,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange,\n ariaLabel,\n appearance = \"default\",\n qa = {},\n tabIndex,\n inputProps = {},\n ...rest\n } = this.props;\n const isPill = appearance === \"pill\";\n // @ts-notes - tabIndex requires a number but can be a string\n const tabIndexInt =\n typeof tabIndex === \"string\" ? parseInt(tabIndex, 10) : tabIndex;\n\n // TODO: Refactor pill checkboxes to use fewer elements for performance gains\n if (!isPill) {\n return (\n <CheckboxContainer\n as={label && \"label\"}\n disabled={disabled}\n indeterminate={indeterminate}\n checked={checked}\n {...rest}\n >\n <input\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n {label && (\n <LabelText {...labelProps} disabled={disabled}>\n {label}\n </LabelText>\n )}\n </CheckboxContainer>\n );\n }\n\n return (\n <Container as={label && \"label\"} {...rest}>\n <InputWrapper appearance={appearance}>\n <PillInput\n type=\"checkbox\"\n id={id}\n aria-label={ariaLabel}\n value={value}\n name={name}\n checked={checked}\n ref={(el) => (this.el = el)}\n disabled={disabled}\n onChange={this.handleChange}\n data-qa-checkbox={id}\n data-qa-checkbox-ischecked={\n indeterminate ? \"indeterminate\" : checked === true\n }\n data-qa-checkbox-isdisabled={disabled === true}\n tabIndex={tabIndexInt}\n {...qa}\n {...inputProps}\n />\n <CheckboxBox>\n <CheckIcon\n name={indeterminate ? \"minus-solid\" : \"check-solid\"}\n size=\"mini\"\n fixedWidth\n />\n </CheckboxBox>\n </InputWrapper>\n </Container>\n );\n }\n}\n","import * as React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing, pill } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeCheckboxProps } from \"./types/CheckboxTypes\";\n\nconst Container = styled.span`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n\n ${COMMON}\n`;\nContainer.displayName = \"Checkbox\";\n\nexport const inputWrapperHoverStyles = css`\n background-color: ${(props) => props.theme.colors.app.background.base};\n`;\n\nexport const InputWrapper = styled(Box)<Pick<TypeCheckboxProps, \"appearance\">>`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ${(props) =>\n props.appearance === \"pill\" &&\n css`\n background-color: transparent;\n transition: all ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_inout};\n /* This solution is temporary. DS-1095 */\n mix-blend-mode: ${props.theme.mode === \"dark\" ? \"screen\" : \"multiply\"};\n ${pill}\n\n &:hover {\n ${inputWrapperHoverStyles}\n }\n\n ${PillInput} {\n ${pill}\n }\n `}\n`;\nInputWrapper.displayName = \"InputWrapper\";\n\nexport const CheckboxBox = styled.div`\n box-sizing: border-box;\n position: relative;\n width: ${(props) => props.theme.space[400]};\n height: ${(props) => props.theme.space[400]};\n border: 1px solid ${(props) => props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${(props) => props.theme.colors.form.background.base};\n transition: border-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in},\n background-color ${(props) => props.theme.duration.fast}\n ${(props) => props.theme.easing.ease_in};\n pointer-events: none;\n`;\nCheckboxBox.displayName = \"CheckboxBox\";\n\nexport const CheckIcon = styled(Icon).attrs({ \"aria-hidden\": true })`\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n pointer-events: none;\n transition: all\n ${({ theme }) => `${theme.duration.fast} ${theme.easing.ease_inout}`};\n\n &,\n & .Icon-svg {\n width: 10px;\n height: 10px;\n line-height: 10px;\n }\n`;\nCheckIcon.displayName = \"CheckIcon\";\n\nexport const pillInputHoverStyles = css<Pick<TypeCheckboxProps, \"disabled\">>`\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${(props) => (props.disabled ? 0 : 1)};\n color: ${(props) => props.theme.colors.form.border.base};\n }\n`;\n\nexport const PillInput = styled.input`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n appearance: none;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n border-radius: 4px;\n\n /* IE 11 overrides */\n &::-ms-check {\n display: none;\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${(props) =>\n !props.checked &&\n css`\n &:hover,\n &:focus {\n ${pillInputHoverStyles}\n }\n `}\n\n ${(props) =>\n props.checked &&\n css`\n ~ ${CheckboxBox} {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: 1;\n color: ${props.theme.colors.icon.inverse};\n }\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ~ ${CheckboxBox} {\n opacity: 0.4;\n }\n ~ ${CheckboxBox} ${CheckIcon} {\n opacity: ${props.checked ? 1 : 0};\n }\n `}\n`;\nPillInput.displayName = \"PillInput\";\n\nexport const LabelText = styled(Text)<Pick<TypeCheckboxProps, \"disabled\">>`\n margin-left: ${(props) => props.theme.space[300]};\n font-size: ${(props) => props.theme.typography[200].fontSize};\n line-height: 1;\n cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n color: ${(props) => props.theme.colors.text.headline};\n\n ${(props) =>\n props.disabled &&\n css`\n opacity: 0.4;\n `}\n`;\nLabelText.displayName = \"LabelText\";\n\nconst checkSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46\"\n fill={color}\n />\n </svg>\n);\n\nconst indeterminateSVG = (color: string) => (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"10\" height=\"2\" x=\"2\" y=\"6\" rx=\"1\" ry=\"1\" fill={color} />\n </svg>\n);\n\nconst getIcon = (type: \"indeterminate\" | \"check\", color: string) => {\n const escapedColor = encodeURIComponent(color);\n const icon =\n type === \"indeterminate\"\n ? indeterminateSVG(escapedColor)\n : checkSVG(escapedColor);\n return icon;\n};\n\nexport const checkboxContainerHoverStyles = css<\n Pick<TypeCheckboxProps, \"disabled\" | \"checked\">\n>`\n &:before {\n opacity: ${(props) => (props.disabled && !props.checked ? 0 : 1)};\n }\n`;\n/* stylelint-disable eslint-disable */\nexport const CheckboxContainer = styled.span<\n Pick<TypeCheckboxProps, \"indeterminate\" | \"checked\" | \"disabled\">\n>(\n (props) => css`\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};\n\n @supports (-webkit-appearance: none) {\n &:before {\n /* The following line cannot have multiple lint exclusions, otherwise it will not work\n the svg data url MUST be single quoted */\n /* prettier-ignore */\n content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(\n getIcon(\n props.indeterminate ? \"indeterminate\" : \"check\",\n props.checked\n ? props.theme.colors.form.background.base\n : props.theme.colors.form.border.base\n )\n )}');\n opacity: ${props.checked ? 1 : 0};\n position: absolute;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n text-align: center;\n transform: translateY(1px);\n line-height: 1;\n margin: auto;\n pointer-events: none;\n transition: ${props.theme.duration.fast}\n ${props.theme.easing.ease_inout};\n }\n\n &:hover:before {\n ${checkboxContainerHoverStyles}\n }\n\n ${props.disabled &&\n css`\n opacity: 0.4;\n `}\n\n input[type='checkbox'] {\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n padding: 0;\n width: ${props.theme.space[400]};\n height: ${props.theme.space[400]};\n border: 1px solid ${props.theme.colors.form.border.base};\n border-radius: 4px;\n background-color: ${props.theme.colors.form.background.base};\n transition: all ${props.theme.duration.fast}\n ${props.theme.easing.ease_in};\n cursor: ${props.disabled ? \"not-allowed\" : \"pointer\"};\n flex-shrink: 0;\n\n &:not(:checked) {\n ${!props.indeterminate &&\n css`\n border-color: ${props.theme.colors.form.border\n .base} !important; /* We don't want the focus ring to remove the border */\n background-color: ${props.theme.colors.form.background.base};\n `}\n }\n\n &:checked {\n border-color: ${props.theme.colors.form.border.selected};\n background-color: ${props.theme.colors.form.background.selected};\n }\n\n ${props.indeterminate &&\n props.checked &&\n css`\n border-color: ${props.theme.colors.form.border.selected} !important;\n background-color: ${props.theme.colors.form.background\n .selected} !important;\n `}\n\n &:focus {\n ${focusRing}\n }\n }\n }\n\n ${COMMON}\n `\n);\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n TypeSystemCommonProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeCheckboxProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n /** ID of the form element, should match the \"for\" value of the associated label */\n id: string;\n value?: string;\n name?: string;\n\n /** Label text to display next to the checkbox */\n label?: string;\n\n /** Label used to describe the input (if not used with an accompanying visual label) */\n ariaLabel?: string;\n labelProps?: TypeTextProps;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n onChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;\n appearance?: \"pill\" | \"default\";\n qa?: object;\n inputProps?: React.ComponentPropsWithoutRef<\"input\">;\n}\n"],"mappings":"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","names":["React","styled","Box","props","Icon","Text","import_jsx_runtime","React"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-checkbox",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.2",
|
|
4
4
|
"description": "Seeds Checkbox",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -19,17 +19,17 @@
|
|
|
19
19
|
"typecheck": "tsc --noEmit"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@sproutsocial/seeds-react-box": "
|
|
23
|
-
"@sproutsocial/seeds-react-icon": "
|
|
24
|
-
"@sproutsocial/seeds-react-text": "
|
|
25
|
-
"@sproutsocial/seeds-react-mixins": "
|
|
26
|
-
"@sproutsocial/seeds-react-system-props": "
|
|
22
|
+
"@sproutsocial/seeds-react-box": "^1.1.3",
|
|
23
|
+
"@sproutsocial/seeds-react-icon": "^1.1.3",
|
|
24
|
+
"@sproutsocial/seeds-react-text": "^1.3.2",
|
|
25
|
+
"@sproutsocial/seeds-react-mixins": "^4.1.2",
|
|
26
|
+
"@sproutsocial/seeds-react-system-props": "^3.0.2"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@sproutsocial/eslint-config-seeds": "*",
|
|
30
30
|
"react-dom": "^18.0.0",
|
|
31
31
|
"typescript": "^5.6.2",
|
|
32
|
-
"tsup": "^8.
|
|
32
|
+
"tsup": "^8.3.4",
|
|
33
33
|
"@sproutsocial/seeds-tsconfig": "*"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|