@sproutsocial/seeds-react-segmented-control 1.1.24 → 1.1.26

package/src/SegmentedControl.tsx

@@ -1,97 +0,0 @@
-import * as React from "react";
-import { useState } from "react";
-import * as ToggleGroup from "@radix-ui/react-toggle-group";
-import { SegmentedControlContainer, ToggleButton } from "./styles";
-import type {
-  TypeSegmentedControlProps,
-  TypeSegmentedControlItemProps,
-} from "./SegmentedControlTypes";
-
-let nameCounter = 0;
-let idCounter = 0;
-
-interface TypeSegmentedControlContext {
-  name: string;
-  selectedValue: string;
-  onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
-}
-
-const SegmentedControlContext = React.createContext<
-  TypeSegmentedControlContext | null | undefined
->(null);
-
-const SegmentedControlItem = ({
-  value,
-  children,
-  disabled,
-  ...rest
-}: TypeSegmentedControlItemProps) => {
-  return (
-    <ToggleGroup.Item value={value} disabled={disabled} asChild>
-      <ToggleButton
-        // TODO: Discuss dropping these
-        // We'd need to keep context, which seems unnecessary now
-        // data-segmentedcontrol-isactive={isChecked}
-        data-qa-segmentedcontrol-item={value}
-        // data-qa-segmentedcontrol-ischecked={isChecked === true}
-        disabled={disabled}
-        {...rest}
-      >
-        {children}
-      </ToggleButton>
-    </ToggleGroup.Item>
-  );
-};
-
-const SegmentedControl = ({
-  selectedValue,
-  label,
-  onChange,
-  onValueChange,
-  children,
-  disabled,
-  ...rest
-}: TypeSegmentedControlProps) => {
-  const [name] = useState(`Racine-segmented-control-${nameCounter++}`);
-  return (
-    <ToggleGroup.Root
-      className="inline-flex space-x-px rounded bg-mauve6 shadow-[0_2px_10px] shadow-blackA4"
-      type="single"
-      value={selectedValue}
-      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.
-        const mockEvent = new Event("change", {
-          bubbles: true,
-        }) as unknown as React.SyntheticEvent<HTMLInputElement>;
-        Object.defineProperty(mockEvent, "target", { value: { value: e } });
-        Object.defineProperty(mockEvent, "currentTarget", {
-          value: { value: e },
-        });
-        onChange?.(mockEvent);
-      }}
-      asChild
-    >
-      <SegmentedControlContainer
-        data-qa-segmentedcontrol={label}
-        data-qa-segmentedcontrol-value={selectedValue}
-        disabled={disabled}
-        {...rest}
-      >
-        {children}
-      </SegmentedControlContainer>
-    </ToggleGroup.Root>
-  );
-};
-
-SegmentedControlItem.displayName = "SegmentedControl.Item";
-SegmentedControl.Item = SegmentedControlItem;
-
-export default SegmentedControl;

package/src/SegmentedControlTypes.ts

@@ -1,28 +0,0 @@
-import type { TypeContainerProps } from "@sproutsocial/seeds-react-box";
-import * as React from "react";
-
-export interface TypeSegmentedControlItemProps {
-  /** The value of this item. Should be unique among sibling items. */
-  value: string;
-  children: React.ReactNode;
-  /** Disables user action and applies a disabled style on the component */
-  disabled?: boolean;
-}
-
-export interface TypeSegmentedControlProps extends TypeContainerProps {
-  /** The value of the currently selected item. Should match the value prop of one of the child items */
-  selectedValue: string;
-
-  /** The title of the segmented control, used for accessibility purposes  */
-  label: string;
-
-  /** Called when the user selects a new item. You can access the value of the newly selected item using "event.target.value" */
-  onChange?: (e: React.SyntheticEvent<HTMLInputElement>) => void;
-
-  /** Called when the user selects a new item. You can access the value of the newly selected item using "event.target.value" */
-  onValueChange?: (value: string) => void;
-
-  /** Disables user action and applies a disabled style on the component */
-  disabled?: boolean;
-  children: React.ReactNode;
-}

package/src/__tests__/SegmentedControl.test.tsx

@@ -1,57 +0,0 @@
-import React, { useState } from "react";
-import {
-  render,
-  fireEvent,
-  screen,
-} from "@sproutsocial/seeds-react-testing-library";
-import SegmentedControl from "../SegmentedControl";
-
-// @ts-ignore IDK what props should be
-const StatefulSegmentedControl = (props) => {
-  const [value, setValue] = useState("1");
-
-  return (
-    <SegmentedControl
-      selectedValue={value}
-      label="Segmented control component"
-      onChange={(e) => setValue((e.target as HTMLInputElement).value)}
-      {...props}
-    >
-      <SegmentedControl.Item value="1">Test 1</SegmentedControl.Item>
-      <SegmentedControl.Item value="2">Test 2</SegmentedControl.Item>
-      <SegmentedControl.Item value="3">Test 3</SegmentedControl.Item>
-    </SegmentedControl>
-  );
-};
-
-describe("SegmentedControl", () => {
-  it("should select the correct item when clicked", async () => {
-    render(<StatefulSegmentedControl />);
-
-    const item1 = screen.getByText("Test 1");
-    const item2 = screen.getByText("Test 2");
-    const item3 = screen.getByText("Test 3");
-
-    expect(item1).toHaveAttribute("data-state", "on");
-
-    expect(item2).toHaveAttribute("data-state", "off");
-
-    expect(item3).toHaveAttribute("data-state", "off");
-
-    fireEvent.click(item3);
-
-    expect(item1).toHaveAttribute("data-state", "off");
-
-    expect(item2).toHaveAttribute("data-state", "off");
-
-    expect(item3).toHaveAttribute("data-state", "on");
-
-    fireEvent.click(item2);
-
-    expect(item1).toHaveAttribute("data-state", "off");
-
-    expect(item2).toHaveAttribute("data-state", "on");
-
-    expect(item3).toHaveAttribute("data-state", "off");
-  });
-});

package/src/__tests__/SegmentedControl.typetest.tsx

@@ -1,24 +0,0 @@
-import * as React from "react";
-import SegmentedControl from "../SegmentedControl";
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function SegmentedControlTypes() {
-  const mockChange = jest.fn();
-  return (
-    <>
-      <SegmentedControl
-        selectedValue="orange"
-        label="Fruits"
-        onChange={mockChange}
-        height="34px"
-        ml="300"
-      >
-        <SegmentedControl.Item value="apple">Apple</SegmentedControl.Item>
-        <SegmentedControl.Item value="orange">Orange</SegmentedControl.Item>
-        <SegmentedControl.Item value="banana">Banana</SegmentedControl.Item>
-      </SegmentedControl>
-      {/* @ts-expect-error - test that invalid and missing props are rejected */}
-      <SegmentedControl />
-    </>
-  );
-}

package/src/index.ts

@@ -1,5 +0,0 @@
-import SegmentedControl from "./SegmentedControl";
-
-export default SegmentedControl;
-export { SegmentedControl };
-export * from "./SegmentedControlTypes";

package/src/styled.d.ts

@@ -1,7 +0,0 @@
-import "styled-components";
-import { TypeTheme } from "@sproutsocial/seeds-react-theme";
-
-declare module "styled-components" {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface DefaultTheme extends TypeTheme {}
-}

package/src/styles.ts

@@ -1,121 +0,0 @@
-import styled, { css } from "styled-components";
-import {
-  visuallyHidden,
-  focusRing,
-  disabled,
-} from "@sproutsocial/seeds-react-mixins";
-import Box from "@sproutsocial/seeds-react-box";
-import Button from "@sproutsocial/seeds-react-button";
-import type {
-  TypeSegmentedControlProps,
-  TypeSegmentedControlItemProps,
-} from "./SegmentedControlTypes";
-
-export const SegmentedControlContainer = styled(Box)<
-  Pick<TypeSegmentedControlProps, "disabled">
->`
-  border: 1px solid
-    ${(props) => props.theme.colors.button.secondary.border.base};
-  border-radius: ${(props) => props.theme.radii.outer};
-  padding: ${(props) => props.theme.space[100]};
-  display: flex;
-
-  ${(props) => props.disabled && disabled}
-`;
-
-export const ToggleButton = styled(Button)`
-  /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */
-  padding: calc(${(props) => props.theme.space[350]} - 6px);
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  border: 0;
-
-  & + & {
-    margin-left: ${(props) => props.theme.space[100]};
-  }
-
-  &:hover {
-    background-color: ${(props) =>
-      props.theme.colors.listItem.background.hover};
-  }
-
-  &[data-state="on"] {
-    color: ${(props) => props.theme.colors.text.inverse};
-    background-color: ${(props) =>
-      props.theme.colors.listItem.background.selected};
-
-    &:hover {
-      background-color: ${(props) =>
-        props.theme.colors.listItem.background.selected};
-    }
-  }
-`;
-
-export const SegmentedControlItemContainer = styled(Box)<
-  Pick<TypeSegmentedControlItemProps, "disabled">
->`
-  flex: 1 1 auto;
-  display: flex;
-  cursor: pointer;
-
-  & + & {
-    margin-left: ${(props) => props.theme.space[100]};
-  }
-
-  &:focus-within label {
-    ${focusRing}
-  }
-
-  input {
-    ${visuallyHidden}
-  }
-
-  ${(props) => props.disabled && disabled}
-`;
-
-interface TypeSegmentedControlState {
-  isActive: boolean;
-}
-
-export const SegmentedControlLabel = styled(Button)<TypeSegmentedControlState>`
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  color: ${(props) => props.theme.colors.text.body};
-  cursor: pointer;
-  font-size: ${(props) => props.theme.typography[200].fontSize};
-  /**
-	* Matches default line height of Icon. Also matches the overall height of
-	* Input, Select, and Button.
-	*/
-  line-height: 16px;
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
-
-  border-radius: ${(props) => props.theme.radii.inner};
-  /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */
-  padding: calc(${(props) => props.theme.space[350]} - 6px);
-  transition: all ${(props) => props.theme.duration.fast};
-
-  &:hover {
-    background-color: ${(props) =>
-      props.theme.colors.listItem.background.hover};
-  }
-
-  ${(props) =>
-    props.isActive &&
-    css`
-      color: ${(props) => props.theme.colors.text.inverse};
-      background-color: ${(props) =>
-        props.theme.colors.listItem.background.selected};
-
-      &:hover {
-        background-color: ${(props) =>
-          props.theme.colors.listItem.background.selected};
-      }
-    `}
-`;

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "module": "esnext"
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist", "coverage", "**/*.stories.tsx"]
-}

package/tsup.config.ts

@@ -1,12 +0,0 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig((options) => ({
-  entry: ["src/index.ts"],
-  format: ["cjs", "esm"],
-  clean: true,
-  legacyOutput: true,
-  dts: options.dts,
-  external: ["react"],
-  sourcemap: true,
-  metafile: options.metafile,
-}));