@sproutsocial/seeds-react-segmented-control 1.1.1 → 1.1.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/.turbo/turbo-build.log +8 -8
- package/CHANGELOG.md +12 -0
- package/dist/esm/index.js +6 -15
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +6 -15
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/SegmentedControl.tsx +1 -6
package/.turbo/turbo-build.log
CHANGED
|
@@ -8,14 +8,14 @@ $ tsup --dts
|
|
|
8
8
|
[34mCLI[39m Cleaning output folder
|
|
9
9
|
[34mCJS[39m Build start
|
|
10
10
|
[34mESM[39m Build start
|
|
11
|
-
[32mCJS[39m [1mdist/index.js [22m[32m7.
|
|
12
|
-
[32mCJS[39m [1mdist/index.js.map [22m[32m10.
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
14
|
-
[32mESM[39m [1mdist/esm/index.js [22m[
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[32m10.
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m7.11 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m10.59 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 16ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m4.96 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m10.51 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 16ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 3276ms
|
|
19
19
|
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.66 KB[39m
|
|
20
20
|
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.66 KB[39m
|
|
21
|
-
Done in
|
|
21
|
+
Done in 4.91s.
|
package/CHANGELOG.md
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -112,24 +112,15 @@ var SegmentedControlItem = ({
|
|
|
112
112
|
disabled: disabled2,
|
|
113
113
|
...rest
|
|
114
114
|
}) => {
|
|
115
|
-
return /* @__PURE__ */ jsx(
|
|
116
|
-
|
|
115
|
+
return /* @__PURE__ */ jsx(ToggleGroup.Item, { value, disabled: disabled2, asChild: true, children: /* @__PURE__ */ jsx(
|
|
116
|
+
ToggleButton,
|
|
117
117
|
{
|
|
118
|
-
value,
|
|
119
|
-
"aria-label": "Left aligned",
|
|
118
|
+
"data-qa-segmentedcontrol-item": value,
|
|
120
119
|
disabled: disabled2,
|
|
121
|
-
|
|
122
|
-
children
|
|
123
|
-
ToggleButton,
|
|
124
|
-
{
|
|
125
|
-
"data-qa-segmentedcontrol-item": value,
|
|
126
|
-
disabled: disabled2,
|
|
127
|
-
...rest,
|
|
128
|
-
children
|
|
129
|
-
}
|
|
130
|
-
)
|
|
120
|
+
...rest,
|
|
121
|
+
children
|
|
131
122
|
}
|
|
132
|
-
);
|
|
123
|
+
) });
|
|
133
124
|
};
|
|
134
125
|
var SegmentedControl = ({
|
|
135
126
|
selectedValue,
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/SegmentedControl.tsx","../../src/styles.ts","../../src/SegmentedControlTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState } from \"react\";\nimport * as ToggleGroup from \"@radix-ui/react-toggle-group\";\nimport { SegmentedControlContainer, ToggleButton } from \"./styles\";\nimport type {\n TypeSegmentedControlProps,\n TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nlet nameCounter = 0;\nlet idCounter = 0;\n\ninterface TypeSegmentedControlContext {\n name: string;\n selectedValue: string;\n onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n}\n\nconst SegmentedControlContext = React.createContext<\n TypeSegmentedControlContext | null | undefined\n>(null);\n\nconst SegmentedControlItem = ({\n value,\n children,\n disabled,\n ...rest\n}: TypeSegmentedControlItemProps) => {\n return (\n <ToggleGroup.Item\n value={value}\n aria-label=\"Left aligned\"\n disabled={disabled}\n asChild\n >\n <ToggleButton\n // TODO: Discuss dropping these\n // We'd need to keep context, which seems unnecessary now\n // data-segmentedcontrol-isactive={isChecked}\n data-qa-segmentedcontrol-item={value}\n // data-qa-segmentedcontrol-ischecked={isChecked === true}\n disabled={disabled}\n {...rest}\n >\n {children}\n </ToggleButton>\n </ToggleGroup.Item>\n );\n};\n\nconst SegmentedControl = ({\n selectedValue,\n label,\n onChange,\n onValueChange,\n children,\n disabled,\n ...rest\n}: TypeSegmentedControlProps) => {\n const [name] = useState(`Racine-segmented-control-${nameCounter++}`);\n return (\n <ToggleGroup.Root\n className=\"inline-flex space-x-px rounded bg-mauve6 shadow-[0_2px_10px] shadow-blackA4\"\n type=\"single\"\n value={selectedValue}\n aria-label={label}\n disabled={disabled}\n onValueChange={(e) => {\n // Radix allows deselecting a value by clicking on it when it's already selected,\n // but we don't want to allow that behavior in our SegmentedControl.\n if (!e) return;\n\n onValueChange?.(e);\n // Create a mock event to pass to onChange for backwards compatibility.\n // We want to move towards onValueChange, but onChange is used by consumers currently so we need to support both for now.\n const mockEvent = new Event(\"change\", {\n bubbles: true,\n }) as unknown as React.SyntheticEvent<HTMLInputElement>;\n Object.defineProperty(mockEvent, \"target\", { value: { value: e } });\n Object.defineProperty(mockEvent, \"currentTarget\", {\n value: { value: e },\n });\n onChange?.(mockEvent);\n }}\n asChild\n >\n <SegmentedControlContainer\n data-qa-segmentedcontrol={label}\n data-qa-segmentedcontrol-value={selectedValue}\n disabled={disabled}\n {...rest}\n >\n {children}\n </SegmentedControlContainer>\n </ToggleGroup.Root>\n );\n};\n\nSegmentedControlItem.displayName = \"SegmentedControl.Item\";\nSegmentedControl.Item = SegmentedControlItem;\n\nexport default SegmentedControl;\n","import styled, { css } from \"styled-components\";\nimport {\n visuallyHidden,\n focusRing,\n disabled,\n} from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport type {\n TypeSegmentedControlProps,\n TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nexport const SegmentedControlContainer = styled(Box)<\n Pick<TypeSegmentedControlProps, \"disabled\">\n>`\n border: 1px solid\n ${(props) => props.theme.colors.button.secondary.border.base};\n border-radius: ${(props) => props.theme.radii.outer};\n padding: ${(props) => props.theme.space[100]};\n display: flex;\n\n ${(props) => props.disabled && disabled}\n`;\n\nexport const ToggleButton = styled(Button)`\n /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */\n padding: calc(${(props) => props.theme.space[350]} - 6px);\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n border: 0;\n\n & + & {\n margin-left: ${(props) => props.theme.space[100]};\n }\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.hover};\n }\n\n &[data-state=\"on\"] {\n color: ${(props) => props.theme.colors.text.inverse};\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n }\n }\n`;\n\nexport const SegmentedControlItemContainer = styled(Box)<\n Pick<TypeSegmentedControlItemProps, \"disabled\">\n>`\n flex: 1 1 auto;\n display: flex;\n cursor: pointer;\n\n & + & {\n margin-left: ${(props) => props.theme.space[100]};\n }\n\n &:focus-within label {\n ${focusRing}\n }\n\n input {\n ${visuallyHidden}\n }\n\n ${(props) => props.disabled && disabled}\n`;\n\ninterface TypeSegmentedControlState {\n isActive: boolean;\n}\n\nexport const SegmentedControlLabel = styled(Button)<TypeSegmentedControlState>`\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: ${(props) => props.theme.colors.text.body};\n cursor: pointer;\n font-size: ${(props) => props.theme.typography[200].fontSize};\n /**\n\t* Matches default line height of Icon. Also matches the overall height of\n\t* Input, Select, and Button.\n\t*/\n line-height: 16px;\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n border-radius: ${(props) => props.theme.radii.inner};\n /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */\n padding: calc(${(props) => props.theme.space[350]} - 6px);\n transition: all ${(props) => props.theme.duration.fast};\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.hover};\n }\n\n ${(props) =>\n props.isActive &&\n css`\n color: ${(props) => props.theme.colors.text.inverse};\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n }\n `}\n`;\n","import type { TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\nimport * as React from \"react\";\n\nexport interface TypeSegmentedControlItemProps {\n /** The value of this item. Should be unique among sibling items. */\n value: string;\n children: React.ReactNode;\n /** Disables user action and applies a disabled style on the component */\n disabled?: boolean;\n}\n\nexport interface TypeSegmentedControlProps extends TypeContainerProps {\n /** The value of the currently selected item. Should match the value prop of one of the child items */\n selectedValue: string;\n\n /** The title of the segmented control, used for accessibility purposes */\n label: string;\n\n /** Called when the user selects a new item. You can access the value of the newly selected item using \"event.target.value\" */\n onChange?: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n\n /** Called when the user selects a new item. You can access the value of the newly selected item using \"event.target.value\" */\n onValueChange?: (value: string) => void;\n\n /** Disables user action and applies a disabled style on the component */\n disabled?: boolean;\n children: React.ReactNode;\n}\n","import SegmentedControl from \"./SegmentedControl\";\n\nexport default SegmentedControl;\nexport { SegmentedControl };\nexport * from \"./SegmentedControlTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,gBAAgB;AACzB,YAAY,iBAAiB;;;ACF7B,OAAO,UAAU,WAAW;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,SAAS;AAChB,OAAO,YAAY;AAMZ,IAAM,4BAA4B,OAAO,GAAG;AAAA;AAAA,MAI7C,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,UAAU,OAAO,IAAI;AAAA,mBAC7C,CAAC,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA,aACxC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,IAG1C,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA;AAGlC,IAAM,eAAe,OAAO,MAAM;AAAA;AAAA,kBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAShC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,wBAI5B,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA,aAIrC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,OAAO;AAAA,wBAC/B,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA,0BAG3B,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA;AAKhD,IAAM,gCAAgC,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQpC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAI9C,SAAS;AAAA;AAAA;AAAA;AAAA,MAIT,cAAc;AAAA;AAAA;AAAA,IAGhB,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA;AAOlC,IAAM,wBAAwB,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMvC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA,eAEnC,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,EAAE,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAM7C,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA,mBAEzC,CAAC,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA;AAAA,kBAEnC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,oBAC/B,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA;AAAA;AAAA,wBAGhC,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,KAAK;AAAA;AAAA;AAAA,IAG9C,CAAC,UACD,MAAM,YACN;AAAA,eACW,CAACA,WAAUA,OAAM,MAAM,OAAO,KAAK,OAAO;AAAA,0BAC/B,CAACA,WACnBA,OAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA,4BAG3B,CAACA,WACnBA,OAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA,KAEpD;AAAA;;;ADpFC;AA1BN,IAAI,cAAc;AASlB,IAAM,0BAAgC,oBAEpC,IAAI;AAEN,IAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,UAAAC;AAAA,EACA,GAAG;AACL,MAAqC;AACnC,SACE;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC;AAAA,MACA,cAAW;AAAA,MACX,UAAUA;AAAA,MACV,SAAO;AAAA,MAEP;AAAA,QAAC;AAAA;AAAA,UAIC,iCAA+B;AAAA,UAE/B,UAAUA;AAAA,UACT,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAAA;AAAA,EACA,GAAG;AACL,MAAiC;AAC/B,QAAM,CAAC,IAAI,IAAI,SAAS,4BAA4B,aAAa,EAAE;AACnE,SACE;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAY;AAAA,MACZ,UAAUA;AAAA,MACV,eAAe,CAAC,MAAM;AAGpB,YAAI,CAAC,EAAG;AAER,wBAAgB,CAAC;AAGjB,cAAM,YAAY,IAAI,MAAM,UAAU;AAAA,UACpC,SAAS;AAAA,QACX,CAAC;AACD,eAAO,eAAe,WAAW,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC;AAClE,eAAO,eAAe,WAAW,iBAAiB;AAAA,UAChD,OAAO,EAAE,OAAO,EAAE;AAAA,QACpB,CAAC;AACD,mBAAW,SAAS;AAAA,MACtB;AAAA,MACA,SAAO;AAAA,MAEP;AAAA,QAAC;AAAA;AAAA,UACC,4BAA0B;AAAA,UAC1B,kCAAgC;AAAA,UAChC,UAAUA;AAAA,UACT,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,qBAAqB,cAAc;AACnC,iBAAiB,OAAO;AAExB,IAAO,2BAAQ;;;AEpGf,OAAuB;;;ACCvB,IAAO,gBAAQ;","names":["props","disabled"]}
|
|
1
|
+
{"version":3,"sources":["../../src/SegmentedControl.tsx","../../src/styles.ts","../../src/SegmentedControlTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState } from \"react\";\nimport * as ToggleGroup from \"@radix-ui/react-toggle-group\";\nimport { SegmentedControlContainer, ToggleButton } from \"./styles\";\nimport type {\n TypeSegmentedControlProps,\n TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nlet nameCounter = 0;\nlet idCounter = 0;\n\ninterface TypeSegmentedControlContext {\n name: string;\n selectedValue: string;\n onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n}\n\nconst SegmentedControlContext = React.createContext<\n TypeSegmentedControlContext | null | undefined\n>(null);\n\nconst SegmentedControlItem = ({\n value,\n children,\n disabled,\n ...rest\n}: TypeSegmentedControlItemProps) => {\n return (\n <ToggleGroup.Item value={value} disabled={disabled} asChild>\n <ToggleButton\n // TODO: Discuss dropping these\n // We'd need to keep context, which seems unnecessary now\n // data-segmentedcontrol-isactive={isChecked}\n data-qa-segmentedcontrol-item={value}\n // data-qa-segmentedcontrol-ischecked={isChecked === true}\n disabled={disabled}\n {...rest}\n >\n {children}\n </ToggleButton>\n </ToggleGroup.Item>\n );\n};\n\nconst SegmentedControl = ({\n selectedValue,\n label,\n onChange,\n onValueChange,\n children,\n disabled,\n ...rest\n}: TypeSegmentedControlProps) => {\n const [name] = useState(`Racine-segmented-control-${nameCounter++}`);\n return (\n <ToggleGroup.Root\n className=\"inline-flex space-x-px rounded bg-mauve6 shadow-[0_2px_10px] shadow-blackA4\"\n type=\"single\"\n value={selectedValue}\n aria-label={label}\n disabled={disabled}\n onValueChange={(e) => {\n // Radix allows deselecting a value by clicking on it when it's already selected,\n // but we don't want to allow that behavior in our SegmentedControl.\n if (!e) return;\n\n onValueChange?.(e);\n // Create a mock event to pass to onChange for backwards compatibility.\n // We want to move towards onValueChange, but onChange is used by consumers currently so we need to support both for now.\n const mockEvent = new Event(\"change\", {\n bubbles: true,\n }) as unknown as React.SyntheticEvent<HTMLInputElement>;\n Object.defineProperty(mockEvent, \"target\", { value: { value: e } });\n Object.defineProperty(mockEvent, \"currentTarget\", {\n value: { value: e },\n });\n onChange?.(mockEvent);\n }}\n asChild\n >\n <SegmentedControlContainer\n data-qa-segmentedcontrol={label}\n data-qa-segmentedcontrol-value={selectedValue}\n disabled={disabled}\n {...rest}\n >\n {children}\n </SegmentedControlContainer>\n </ToggleGroup.Root>\n );\n};\n\nSegmentedControlItem.displayName = \"SegmentedControl.Item\";\nSegmentedControl.Item = SegmentedControlItem;\n\nexport default SegmentedControl;\n","import styled, { css } from \"styled-components\";\nimport {\n visuallyHidden,\n focusRing,\n disabled,\n} from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport type {\n TypeSegmentedControlProps,\n TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nexport const SegmentedControlContainer = styled(Box)<\n Pick<TypeSegmentedControlProps, \"disabled\">\n>`\n border: 1px solid\n ${(props) => props.theme.colors.button.secondary.border.base};\n border-radius: ${(props) => props.theme.radii.outer};\n padding: ${(props) => props.theme.space[100]};\n display: flex;\n\n ${(props) => props.disabled && disabled}\n`;\n\nexport const ToggleButton = styled(Button)`\n /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */\n padding: calc(${(props) => props.theme.space[350]} - 6px);\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n border: 0;\n\n & + & {\n margin-left: ${(props) => props.theme.space[100]};\n }\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.hover};\n }\n\n &[data-state=\"on\"] {\n color: ${(props) => props.theme.colors.text.inverse};\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n }\n }\n`;\n\nexport const SegmentedControlItemContainer = styled(Box)<\n Pick<TypeSegmentedControlItemProps, \"disabled\">\n>`\n flex: 1 1 auto;\n display: flex;\n cursor: pointer;\n\n & + & {\n margin-left: ${(props) => props.theme.space[100]};\n }\n\n &:focus-within label {\n ${focusRing}\n }\n\n input {\n ${visuallyHidden}\n }\n\n ${(props) => props.disabled && disabled}\n`;\n\ninterface TypeSegmentedControlState {\n isActive: boolean;\n}\n\nexport const SegmentedControlLabel = styled(Button)<TypeSegmentedControlState>`\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: ${(props) => props.theme.colors.text.body};\n cursor: pointer;\n font-size: ${(props) => props.theme.typography[200].fontSize};\n /**\n\t* Matches default line height of Icon. Also matches the overall height of\n\t* Input, Select, and Button.\n\t*/\n line-height: 16px;\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n border-radius: ${(props) => props.theme.radii.inner};\n /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */\n padding: calc(${(props) => props.theme.space[350]} - 6px);\n transition: all ${(props) => props.theme.duration.fast};\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.hover};\n }\n\n ${(props) =>\n props.isActive &&\n css`\n color: ${(props) => props.theme.colors.text.inverse};\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n }\n `}\n`;\n","import type { TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\nimport * as React from \"react\";\n\nexport interface TypeSegmentedControlItemProps {\n /** The value of this item. Should be unique among sibling items. */\n value: string;\n children: React.ReactNode;\n /** Disables user action and applies a disabled style on the component */\n disabled?: boolean;\n}\n\nexport interface TypeSegmentedControlProps extends TypeContainerProps {\n /** The value of the currently selected item. Should match the value prop of one of the child items */\n selectedValue: string;\n\n /** The title of the segmented control, used for accessibility purposes */\n label: string;\n\n /** Called when the user selects a new item. You can access the value of the newly selected item using \"event.target.value\" */\n onChange?: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n\n /** Called when the user selects a new item. You can access the value of the newly selected item using \"event.target.value\" */\n onValueChange?: (value: string) => void;\n\n /** Disables user action and applies a disabled style on the component */\n disabled?: boolean;\n children: React.ReactNode;\n}\n","import SegmentedControl from \"./SegmentedControl\";\n\nexport default SegmentedControl;\nexport { SegmentedControl };\nexport * from \"./SegmentedControlTypes\";\n"],"mappings":"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","names":["props","disabled"]}
|
package/dist/index.js
CHANGED
|
@@ -145,24 +145,15 @@ var SegmentedControlItem = ({
|
|
|
145
145
|
disabled: disabled2,
|
|
146
146
|
...rest
|
|
147
147
|
}) => {
|
|
148
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
149
|
-
|
|
148
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroup.Item, { value, disabled: disabled2, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
149
|
+
ToggleButton,
|
|
150
150
|
{
|
|
151
|
-
value,
|
|
152
|
-
"aria-label": "Left aligned",
|
|
151
|
+
"data-qa-segmentedcontrol-item": value,
|
|
153
152
|
disabled: disabled2,
|
|
154
|
-
|
|
155
|
-
children
|
|
156
|
-
ToggleButton,
|
|
157
|
-
{
|
|
158
|
-
"data-qa-segmentedcontrol-item": value,
|
|
159
|
-
disabled: disabled2,
|
|
160
|
-
...rest,
|
|
161
|
-
children
|
|
162
|
-
}
|
|
163
|
-
)
|
|
153
|
+
...rest,
|
|
154
|
+
children
|
|
164
155
|
}
|
|
165
|
-
);
|
|
156
|
+
) });
|
|
166
157
|
};
|
|
167
158
|
var SegmentedControl = ({
|
|
168
159
|
selectedValue,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/SegmentedControl.tsx","../src/styles.ts","../src/SegmentedControlTypes.ts"],"sourcesContent":["import SegmentedControl from \"./SegmentedControl\";\n\nexport default SegmentedControl;\nexport { SegmentedControl };\nexport * from \"./SegmentedControlTypes\";\n","import * as React from \"react\";\nimport { useState } from \"react\";\nimport * as ToggleGroup from \"@radix-ui/react-toggle-group\";\nimport { SegmentedControlContainer, ToggleButton } from \"./styles\";\nimport type {\n TypeSegmentedControlProps,\n TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nlet nameCounter = 0;\nlet idCounter = 0;\n\ninterface TypeSegmentedControlContext {\n name: string;\n selectedValue: string;\n onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n}\n\nconst SegmentedControlContext = React.createContext<\n TypeSegmentedControlContext | null | undefined\n>(null);\n\nconst SegmentedControlItem = ({\n value,\n children,\n disabled,\n ...rest\n}: TypeSegmentedControlItemProps) => {\n return (\n <ToggleGroup.Item\n value={value}\n aria-label=\"Left aligned\"\n disabled={disabled}\n asChild\n >\n <ToggleButton\n // TODO: Discuss dropping these\n // We'd need to keep context, which seems unnecessary now\n // data-segmentedcontrol-isactive={isChecked}\n data-qa-segmentedcontrol-item={value}\n // data-qa-segmentedcontrol-ischecked={isChecked === true}\n disabled={disabled}\n {...rest}\n >\n {children}\n </ToggleButton>\n </ToggleGroup.Item>\n );\n};\n\nconst SegmentedControl = ({\n selectedValue,\n label,\n onChange,\n onValueChange,\n children,\n disabled,\n ...rest\n}: TypeSegmentedControlProps) => {\n const [name] = useState(`Racine-segmented-control-${nameCounter++}`);\n return (\n <ToggleGroup.Root\n className=\"inline-flex space-x-px rounded bg-mauve6 shadow-[0_2px_10px] shadow-blackA4\"\n type=\"single\"\n value={selectedValue}\n aria-label={label}\n disabled={disabled}\n onValueChange={(e) => {\n // Radix allows deselecting a value by clicking on it when it's already selected,\n // but we don't want to allow that behavior in our SegmentedControl.\n if (!e) return;\n\n onValueChange?.(e);\n // Create a mock event to pass to onChange for backwards compatibility.\n // We want to move towards onValueChange, but onChange is used by consumers currently so we need to support both for now.\n const mockEvent = new Event(\"change\", {\n bubbles: true,\n }) as unknown as React.SyntheticEvent<HTMLInputElement>;\n Object.defineProperty(mockEvent, \"target\", { value: { value: e } });\n Object.defineProperty(mockEvent, \"currentTarget\", {\n value: { value: e },\n });\n onChange?.(mockEvent);\n }}\n asChild\n >\n <SegmentedControlContainer\n data-qa-segmentedcontrol={label}\n data-qa-segmentedcontrol-value={selectedValue}\n disabled={disabled}\n {...rest}\n >\n {children}\n </SegmentedControlContainer>\n </ToggleGroup.Root>\n );\n};\n\nSegmentedControlItem.displayName = \"SegmentedControl.Item\";\nSegmentedControl.Item = SegmentedControlItem;\n\nexport default SegmentedControl;\n","import styled, { css } from \"styled-components\";\nimport {\n visuallyHidden,\n focusRing,\n disabled,\n} from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport type {\n TypeSegmentedControlProps,\n TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nexport const SegmentedControlContainer = styled(Box)<\n Pick<TypeSegmentedControlProps, \"disabled\">\n>`\n border: 1px solid\n ${(props) => props.theme.colors.button.secondary.border.base};\n border-radius: ${(props) => props.theme.radii.outer};\n padding: ${(props) => props.theme.space[100]};\n display: flex;\n\n ${(props) => props.disabled && disabled}\n`;\n\nexport const ToggleButton = styled(Button)`\n /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */\n padding: calc(${(props) => props.theme.space[350]} - 6px);\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n border: 0;\n\n & + & {\n margin-left: ${(props) => props.theme.space[100]};\n }\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.hover};\n }\n\n &[data-state=\"on\"] {\n color: ${(props) => props.theme.colors.text.inverse};\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n }\n }\n`;\n\nexport const SegmentedControlItemContainer = styled(Box)<\n Pick<TypeSegmentedControlItemProps, \"disabled\">\n>`\n flex: 1 1 auto;\n display: flex;\n cursor: pointer;\n\n & + & {\n margin-left: ${(props) => props.theme.space[100]};\n }\n\n &:focus-within label {\n ${focusRing}\n }\n\n input {\n ${visuallyHidden}\n }\n\n ${(props) => props.disabled && disabled}\n`;\n\ninterface TypeSegmentedControlState {\n isActive: boolean;\n}\n\nexport const SegmentedControlLabel = styled(Button)<TypeSegmentedControlState>`\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: ${(props) => props.theme.colors.text.body};\n cursor: pointer;\n font-size: ${(props) => props.theme.typography[200].fontSize};\n /**\n\t* Matches default line height of Icon. Also matches the overall height of\n\t* Input, Select, and Button.\n\t*/\n line-height: 16px;\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n border-radius: ${(props) => props.theme.radii.inner};\n /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */\n padding: calc(${(props) => props.theme.space[350]} - 6px);\n transition: all ${(props) => props.theme.duration.fast};\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.hover};\n }\n\n ${(props) =>\n props.isActive &&\n css`\n color: ${(props) => props.theme.colors.text.inverse};\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n }\n `}\n`;\n","import type { TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\nimport * as React from \"react\";\n\nexport interface TypeSegmentedControlItemProps {\n /** The value of this item. Should be unique among sibling items. */\n value: string;\n children: React.ReactNode;\n /** Disables user action and applies a disabled style on the component */\n disabled?: boolean;\n}\n\nexport interface TypeSegmentedControlProps extends TypeContainerProps {\n /** The value of the currently selected item. Should match the value prop of one of the child items */\n selectedValue: string;\n\n /** The title of the segmented control, used for accessibility purposes */\n label: string;\n\n /** Called when the user selects a new item. You can access the value of the newly selected item using \"event.target.value\" */\n onChange?: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n\n /** Called when the user selects a new item. You can access the value of the newly selected item using \"event.target.value\" */\n onValueChange?: (value: string) => void;\n\n /** Disables user action and applies a disabled style on the component */\n disabled?: boolean;\n children: React.ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,mBAAyB;AACzB,kBAA6B;;;ACF7B,+BAA4B;AAC5B,gCAIO;AACP,6BAAgB;AAChB,gCAAmB;AAMZ,IAAM,gCAA4B,yBAAAA,SAAO,uBAAAC,OAAG;AAAA;AAAA,MAI7C,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,UAAU,OAAO,IAAI;AAAA,mBAC7C,CAAC,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA,aACxC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,IAG1C,CAAC,UAAU,MAAM,YAAY,kCAAQ;AAAA;AAGlC,IAAM,mBAAe,yBAAAD,SAAO,0BAAAE,OAAM;AAAA;AAAA,kBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAShC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,wBAI5B,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA,aAIrC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,OAAO;AAAA,wBAC/B,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA,0BAG3B,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA;AAKhD,IAAM,oCAAgC,yBAAAF,SAAO,uBAAAC,OAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQpC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAI9C,mCAAS;AAAA;AAAA;AAAA;AAAA,MAIT,wCAAc;AAAA;AAAA;AAAA,IAGhB,CAAC,UAAU,MAAM,YAAY,kCAAQ;AAAA;AAOlC,IAAM,4BAAwB,yBAAAD,SAAO,0BAAAE,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMvC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA,eAEnC,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,EAAE,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAM7C,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA,mBAEzC,CAAC,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA;AAAA,kBAEnC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,oBAC/B,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA;AAAA;AAAA,wBAGhC,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,KAAK;AAAA;AAAA;AAAA,IAG9C,CAAC,UACD,MAAM,YACN;AAAA,eACW,CAACC,WAAUA,OAAM,MAAM,OAAO,KAAK,OAAO;AAAA,0BAC/B,CAACA,WACnBA,OAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA,4BAG3B,CAACA,WACnBA,OAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA,KAEpD;AAAA;;;ADpFC;AA1BN,IAAI,cAAc;AASlB,IAAM,0BAAgC,oBAEpC,IAAI;AAEN,IAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,UAAAC;AAAA,EACA,GAAG;AACL,MAAqC;AACnC,SACE;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC;AAAA,MACA,cAAW;AAAA,MACX,UAAUA;AAAA,MACV,SAAO;AAAA,MAEP;AAAA,QAAC;AAAA;AAAA,UAIC,iCAA+B;AAAA,UAE/B,UAAUA;AAAA,UACT,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAAA;AAAA,EACA,GAAG;AACL,MAAiC;AAC/B,QAAM,CAAC,IAAI,QAAI,uBAAS,4BAA4B,aAAa,EAAE;AACnE,SACE;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAY;AAAA,MACZ,UAAUA;AAAA,MACV,eAAe,CAAC,MAAM;AAGpB,YAAI,CAAC,EAAG;AAER,wBAAgB,CAAC;AAGjB,cAAM,YAAY,IAAI,MAAM,UAAU;AAAA,UACpC,SAAS;AAAA,QACX,CAAC;AACD,eAAO,eAAe,WAAW,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC;AAClE,eAAO,eAAe,WAAW,iBAAiB;AAAA,UAChD,OAAO,EAAE,OAAO,EAAE;AAAA,QACpB,CAAC;AACD,mBAAW,SAAS;AAAA,MACtB;AAAA,MACA,SAAO;AAAA,MAEP;AAAA,QAAC;AAAA;AAAA,UACC,4BAA0B;AAAA,UAC1B,kCAAgC;AAAA,UAChC,UAAUA;AAAA,UACT,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,qBAAqB,cAAc;AACnC,iBAAiB,OAAO;AAExB,IAAO,2BAAQ;;;AEpGf,IAAAC,SAAuB;;;AHCvB,IAAO,gBAAQ;","names":["styled","Box","Button","props","disabled","React"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/SegmentedControl.tsx","../src/styles.ts","../src/SegmentedControlTypes.ts"],"sourcesContent":["import SegmentedControl from \"./SegmentedControl\";\n\nexport default SegmentedControl;\nexport { SegmentedControl };\nexport * from \"./SegmentedControlTypes\";\n","import * as React from \"react\";\nimport { useState } from \"react\";\nimport * as ToggleGroup from \"@radix-ui/react-toggle-group\";\nimport { SegmentedControlContainer, ToggleButton } from \"./styles\";\nimport type {\n TypeSegmentedControlProps,\n TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nlet nameCounter = 0;\nlet idCounter = 0;\n\ninterface TypeSegmentedControlContext {\n name: string;\n selectedValue: string;\n onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n}\n\nconst SegmentedControlContext = React.createContext<\n TypeSegmentedControlContext | null | undefined\n>(null);\n\nconst SegmentedControlItem = ({\n value,\n children,\n disabled,\n ...rest\n}: TypeSegmentedControlItemProps) => {\n return (\n <ToggleGroup.Item value={value} disabled={disabled} asChild>\n <ToggleButton\n // TODO: Discuss dropping these\n // We'd need to keep context, which seems unnecessary now\n // data-segmentedcontrol-isactive={isChecked}\n data-qa-segmentedcontrol-item={value}\n // data-qa-segmentedcontrol-ischecked={isChecked === true}\n disabled={disabled}\n {...rest}\n >\n {children}\n </ToggleButton>\n </ToggleGroup.Item>\n );\n};\n\nconst SegmentedControl = ({\n selectedValue,\n label,\n onChange,\n onValueChange,\n children,\n disabled,\n ...rest\n}: TypeSegmentedControlProps) => {\n const [name] = useState(`Racine-segmented-control-${nameCounter++}`);\n return (\n <ToggleGroup.Root\n className=\"inline-flex space-x-px rounded bg-mauve6 shadow-[0_2px_10px] shadow-blackA4\"\n type=\"single\"\n value={selectedValue}\n aria-label={label}\n disabled={disabled}\n onValueChange={(e) => {\n // Radix allows deselecting a value by clicking on it when it's already selected,\n // but we don't want to allow that behavior in our SegmentedControl.\n if (!e) return;\n\n onValueChange?.(e);\n // Create a mock event to pass to onChange for backwards compatibility.\n // We want to move towards onValueChange, but onChange is used by consumers currently so we need to support both for now.\n const mockEvent = new Event(\"change\", {\n bubbles: true,\n }) as unknown as React.SyntheticEvent<HTMLInputElement>;\n Object.defineProperty(mockEvent, \"target\", { value: { value: e } });\n Object.defineProperty(mockEvent, \"currentTarget\", {\n value: { value: e },\n });\n onChange?.(mockEvent);\n }}\n asChild\n >\n <SegmentedControlContainer\n data-qa-segmentedcontrol={label}\n data-qa-segmentedcontrol-value={selectedValue}\n disabled={disabled}\n {...rest}\n >\n {children}\n </SegmentedControlContainer>\n </ToggleGroup.Root>\n );\n};\n\nSegmentedControlItem.displayName = \"SegmentedControl.Item\";\nSegmentedControl.Item = SegmentedControlItem;\n\nexport default SegmentedControl;\n","import styled, { css } from \"styled-components\";\nimport {\n visuallyHidden,\n focusRing,\n disabled,\n} from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport type {\n TypeSegmentedControlProps,\n TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nexport const SegmentedControlContainer = styled(Box)<\n Pick<TypeSegmentedControlProps, \"disabled\">\n>`\n border: 1px solid\n ${(props) => props.theme.colors.button.secondary.border.base};\n border-radius: ${(props) => props.theme.radii.outer};\n padding: ${(props) => props.theme.space[100]};\n display: flex;\n\n ${(props) => props.disabled && disabled}\n`;\n\nexport const ToggleButton = styled(Button)`\n /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */\n padding: calc(${(props) => props.theme.space[350]} - 6px);\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n border: 0;\n\n & + & {\n margin-left: ${(props) => props.theme.space[100]};\n }\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.hover};\n }\n\n &[data-state=\"on\"] {\n color: ${(props) => props.theme.colors.text.inverse};\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n }\n }\n`;\n\nexport const SegmentedControlItemContainer = styled(Box)<\n Pick<TypeSegmentedControlItemProps, \"disabled\">\n>`\n flex: 1 1 auto;\n display: flex;\n cursor: pointer;\n\n & + & {\n margin-left: ${(props) => props.theme.space[100]};\n }\n\n &:focus-within label {\n ${focusRing}\n }\n\n input {\n ${visuallyHidden}\n }\n\n ${(props) => props.disabled && disabled}\n`;\n\ninterface TypeSegmentedControlState {\n isActive: boolean;\n}\n\nexport const SegmentedControlLabel = styled(Button)<TypeSegmentedControlState>`\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: ${(props) => props.theme.colors.text.body};\n cursor: pointer;\n font-size: ${(props) => props.theme.typography[200].fontSize};\n /**\n\t* Matches default line height of Icon. Also matches the overall height of\n\t* Input, Select, and Button.\n\t*/\n line-height: 16px;\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n border-radius: ${(props) => props.theme.radii.inner};\n /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */\n padding: calc(${(props) => props.theme.space[350]} - 6px);\n transition: all ${(props) => props.theme.duration.fast};\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.hover};\n }\n\n ${(props) =>\n props.isActive &&\n css`\n color: ${(props) => props.theme.colors.text.inverse};\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n\n &:hover {\n background-color: ${(props) =>\n props.theme.colors.listItem.background.selected};\n }\n `}\n`;\n","import type { TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\nimport * as React from \"react\";\n\nexport interface TypeSegmentedControlItemProps {\n /** The value of this item. Should be unique among sibling items. */\n value: string;\n children: React.ReactNode;\n /** Disables user action and applies a disabled style on the component */\n disabled?: boolean;\n}\n\nexport interface TypeSegmentedControlProps extends TypeContainerProps {\n /** The value of the currently selected item. Should match the value prop of one of the child items */\n selectedValue: string;\n\n /** The title of the segmented control, used for accessibility purposes */\n label: string;\n\n /** Called when the user selects a new item. You can access the value of the newly selected item using \"event.target.value\" */\n onChange?: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n\n /** Called when the user selects a new item. You can access the value of the newly selected item using \"event.target.value\" */\n onValueChange?: (value: string) => void;\n\n /** Disables user action and applies a disabled style on the component */\n disabled?: boolean;\n children: React.ReactNode;\n}\n"],"mappings":"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","names":["styled","Box","Button","props","disabled","React"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-segmented-control",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.3",
|
|
4
4
|
"description": "Seeds React SegmentedControl",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"@sproutsocial/seeds-react-theme": "^3.6.0",
|
|
23
23
|
"@sproutsocial/seeds-react-system-props": "^3.0.1",
|
|
24
24
|
"@sproutsocial/seeds-react-box": "^1.1.14",
|
|
25
|
-
"@sproutsocial/seeds-react-button": "^1.
|
|
25
|
+
"@sproutsocial/seeds-react-button": "^1.4.1",
|
|
26
26
|
"@sproutsocial/seeds-react-text": "^1.4.0",
|
|
27
27
|
"@sproutsocial/seeds-react-mixins": "^4.3.1"
|
|
28
28
|
},
|
package/src/SegmentedControl.tsx
CHANGED
|
@@ -27,12 +27,7 @@ const SegmentedControlItem = ({
|
|
|
27
27
|
...rest
|
|
28
28
|
}: TypeSegmentedControlItemProps) => {
|
|
29
29
|
return (
|
|
30
|
-
<ToggleGroup.Item
|
|
31
|
-
value={value}
|
|
32
|
-
aria-label="Left aligned"
|
|
33
|
-
disabled={disabled}
|
|
34
|
-
asChild
|
|
35
|
-
>
|
|
30
|
+
<ToggleGroup.Item value={value} disabled={disabled} asChild>
|
|
36
31
|
<ToggleButton
|
|
37
32
|
// TODO: Discuss dropping these
|
|
38
33
|
// We'd need to keep context, which seems unnecessary now
|