@bitrise/bitkit 12.46.0 → 12.48.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.46.0",
+  "version": "12.48.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Form/FilterSwitch/FilterSwitch.theme.ts

@@ -0,0 +1,43 @@
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+
+const FilterSwitch: ComponentStyleConfig = {
+  baseStyle: () => {
+    return {
+      container: {
+        color: 'neutral.40',
+        background: 'neutral.95',
+        borderRadius: '4',
+        border: '1px solid',
+        borderColor: 'neutral.80',
+        paddingBlock: '6',
+        paddingInline: '12',
+        cursor: 'pointer',
+        position: 'relative',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        _hover: {
+          background: 'neutral.100',
+        },
+        _active: {
+          color: 'purple.10',
+          background: 'neutral.100',
+        },
+        _checked: {
+          background: 'neutral.100',
+          color: 'purple.10',
+          cursor: 'default',
+        },
+      },
+      label: {
+        margin: 0,
+        userSelect: 'none',
+        _focusVisible: {
+          boxShadow: 'outline',
+        },
+      },
+    };
+  },
+};
+
+export default FilterSwitch;

package/src/Components/Form/FilterSwitch/FilterSwitch.tsx

@@ -0,0 +1,58 @@
+import {
+  RadioProps as ChakraRadioProps,
+  forwardRef,
+  chakra,
+  useRadio,
+  useMultiStyleConfig,
+  useRadioGroupContext,
+} from '@chakra-ui/react';
+import { omitThemingProps } from '@chakra-ui/styled-system';
+
+type RadioInputProps = ChakraRadioProps['inputProps'] & {
+  'data-testid'?: string;
+};
+
+export interface FilterSwitchProps extends Omit<ChakraRadioProps, 'inputProps'> {
+  inputProps?: RadioInputProps;
+}
+
+const FilterSwitch = forwardRef<FilterSwitchProps, 'input'>((props, ref) => {
+  const group = useRadioGroupContext();
+  const { value: valueProp } = props;
+
+  const styles = useMultiStyleConfig('FilterSwitch', { ...group, ...props });
+
+  const ownProps = omitThemingProps(props);
+
+  const {
+    children,
+    inputProps: htmlInputProps,
+    isDisabled = group?.isDisabled,
+    isFocusable = group?.isFocusable,
+    ...rest
+  } = ownProps;
+
+  const isChecked = group.value === valueProp;
+
+  const { name } = group;
+
+  const { getInputProps, getLabelProps, getRootProps, getCheckboxProps } = useRadio({
+    ...rest,
+    isChecked,
+    isFocusable,
+    isDisabled,
+    onChange: group.onChange,
+    name,
+  });
+
+  return (
+    <chakra.label {...getRootProps()} __css={styles.container}>
+      <chakra.input {...getInputProps(htmlInputProps, ref)} />
+      <chakra.span {...getCheckboxProps()} {...getLabelProps()} __css={styles.label}>
+        {children}
+      </chakra.span>
+    </chakra.label>
+  );
+});
+
+export default FilterSwitch;

package/src/Components/Form/FilterSwitch/FilterSwitchGroup.tsx

@@ -0,0 +1,25 @@
+import { RadioGroup as ChakraRadioGroup, RadioGroupProps } from '@chakra-ui/react';
+
+export type { RadioGroupProps };
+
+const FilterSwitchGroup = (props: RadioGroupProps) => {
+  return (
+    <ChakraRadioGroup
+      display="flex"
+      {...props}
+      sx={{
+        label: {
+          _notFirst: {
+            borderLeftRadius: 0,
+            borderLeft: 'none',
+          },
+          _notLast: {
+            borderRightRadius: 0,
+          },
+        },
+      }}
+    />
+  );
+};
+
+export default FilterSwitchGroup;

package/src/Components/Table/Th.tsx

@@ -39,7 +39,18 @@ const Th = forwardRef<TableColumnHeaderProps, 'th'>((props, ref) => {
   if (isSortable) {
     const onClick = () => {
       if (onSortClick) {
-        onSortClick(sortedBy);
+        let nextSortDirection: AriaAttributes['aria-sort'];
+        switch (sortedBy) {
+          case 'ascending':
+            nextSortDirection = 'descending';
+            break;
+          case 'descending':
+            nextSortDirection = 'none';
+            break;
+          default:
+            nextSortDirection = 'ascending';
+        }
+        onSortClick(nextSortDirection);
       }
     };
     properties.padding = '0';

package/src/index.ts

@@ -309,3 +309,8 @@ export { default as FileInput } from './Components/Form/FileInput/FileInput';
 
 export type { ToggletipProps as ToggleTooltipProps } from './Components/Toggletip/Toggletip';
 export { default as Toggletip } from './Components/Toggletip/Toggletip';
+
+export type { FilterSwitchProps } from './Components/Form/FilterSwitch/FilterSwitch';
+export { default as FilterSwitch } from './Components/Form/FilterSwitch/FilterSwitch';
+
+export { default as FilterSwitchGroup } from './Components/Form/FilterSwitch/FilterSwitchGroup';

package/src/theme.ts

@@ -51,6 +51,7 @@ import sizes from './Foundations/Sizes/Sizes';
 import typography from './Foundations/Typography/Typography';
 import zIndices from './Foundations/Zindex/Zindex';
 import Toggletip from './Components/Toggletip/Toggletip.theme';
+import FilterSwitch from './Components/Form/FilterSwitch/FilterSwitch.theme';
 
 const theme = {
   config: {
@@ -100,6 +101,7 @@ const theme = {
     Drawer,
     Dropdown,
     EmptyState,
+    FilterSwitch,
     ...Form,
     Link,
     List,