@sproutsocial/seeds-react-segmented-control 1.1.0 → 1.1.2

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     7.20 KB
-CJS dist/index.js.map 10.49 KB
-CJS ⚡️ Build success in 15ms
-ESM dist/esm/index.js     5.04 KB
-ESM dist/esm/index.js.map 10.41 KB
-ESM ⚡️ Build success in 14ms
+CJS dist/index.js     7.11 KB
+CJS dist/index.js.map 10.59 KB
+CJS ⚡️ Build success in 77ms
+ESM dist/esm/index.js     4.96 KB
+ESM dist/esm/index.js.map 10.51 KB
+ESM ⚡️ Build success in 76ms
 DTS Build start
-DTS ⚡️ Build success in 4008ms
+DTS ⚡️ Build success in 4552ms
 DTS dist/index.d.ts  1.66 KB
 DTS dist/index.d.mts 1.66 KB
-Done in 5.48s.
+Done in 6.27s.

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sproutsocial/seeds-react-segmented-control
 
+## 1.1.2
+
+### Patch Changes
+
+- 9280f81: Remove unintentional label
+
+## 1.1.1
+
+### Patch Changes
+
+- 598356f: Correct SegmentedControl to always have a value
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/esm/index.js

@@ -112,24 +112,15 @@ var SegmentedControlItem = ({
   disabled: disabled2,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx(
-    ToggleGroup.Item,
+  return /* @__PURE__ */ jsx(ToggleGroup.Item, { value, disabled: disabled2, asChild: true, children: /* @__PURE__ */ jsx(
+    ToggleButton,
     {
-      value,
-      "aria-label": "Left aligned",
+      "data-qa-segmentedcontrol-item": value,
       disabled: disabled2,
-      asChild: true,
-      children: /* @__PURE__ */ jsx(
-        ToggleButton,
-        {
-          "data-qa-segmentedcontrol-item": value,
-          disabled: disabled2,
-          ...rest,
-          children
-        }
-      )
+      ...rest,
+      children
     }
-  );
+  ) });
 };
 var SegmentedControl = ({
   selectedValue,
@@ -150,6 +141,7 @@ var SegmentedControl = ({
       "aria-label": label,
       disabled: disabled2,
       onValueChange: (e) => {
+        if (!e) return;
         onValueChange?.(e);
         const mockEvent = new Event("change", {
           bubbles: true

package/dist/esm/index.js.map

@@ -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        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"]}
+{"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

@@ -145,24 +145,15 @@ var SegmentedControlItem = ({
   disabled: disabled2,
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    ToggleGroup.Item,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroup.Item, { value, disabled: disabled2, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ToggleButton,
     {
-      value,
-      "aria-label": "Left aligned",
+      "data-qa-segmentedcontrol-item": value,
       disabled: disabled2,
-      asChild: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        ToggleButton,
-        {
-          "data-qa-segmentedcontrol-item": value,
-          disabled: disabled2,
-          ...rest,
-          children
-        }
-      )
+      ...rest,
+      children
     }
-  );
+  ) });
 };
 var SegmentedControl = ({
   selectedValue,
@@ -183,6 +174,7 @@ var SegmentedControl = ({
       "aria-label": label,
       disabled: disabled2,
       onValueChange: (e) => {
+        if (!e) return;
         onValueChange?.(e);
         const mockEvent = new Event("change", {
           bubbles: true

package/dist/index.js.map

@@ -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        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"]}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-segmented-control",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Seeds React SegmentedControl",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/SegmentedControl.tsx

@@ -27,12 +27,7 @@ const SegmentedControlItem = ({
   ...rest
 }: TypeSegmentedControlItemProps) => {
   return (
-    <ToggleGroup.Item
-      value={value}
-      aria-label="Left aligned"
-      disabled={disabled}
-      asChild
-    >
+    <ToggleGroup.Item value={value} disabled={disabled} asChild>
       <ToggleButton
         // TODO: Discuss dropping these
         // We'd need to keep context, which seems unnecessary now
@@ -66,6 +61,10 @@ const SegmentedControl = ({
       aria-label={label}
       disabled={disabled}
       onValueChange={(e) => {
+        // Radix allows deselecting a value by clicking on it when it's already selected,
+        // but we don't want to allow that behavior in our SegmentedControl.
+        if (!e) return;
+
         onValueChange?.(e);
         // Create a mock event to pass to onChange for backwards compatibility.
         // We want to move towards onValueChange, but onChange is used by consumers currently so we need to support both for now.