@ssa-ui-kit/core 0.0.14-alpha → 0.0.16-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "0.0.14-alpha",
+  "version": "0.0.16-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { css, useTheme } from '@emotion/react';
 import { ButtonGroup } from './ButtonGroup';
 import { items } from './helpers';
+import { ExternalStateStory } from './stories/ExternalState';
 
 export default {
   title: 'Components/ButtonGroup',
@@ -14,6 +15,12 @@ export const Default: StoryObj<typeof ButtonGroup> = () => {
 
 Default.args = {};
 
+export const ExternalState: StoryObj<typeof ButtonGroup> = () => {
+  return <ExternalStateStory />;
+};
+
+ExternalState.args = {};
+
 export const CustomStyle: StoryObj<typeof ButtonGroup> = () => {
   const theme = useTheme();
   return (

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Button from '@components/Button';
 import Typography from '@components/Typography';
 import { ButtonGroupProps, ButtonGroupItem } from './types';
@@ -8,6 +8,7 @@ export const ButtonGroup = ({
   items,
   buttonStyles,
   selectedItem,
+  externalState = selectedItem || items[0],
   onClick,
 }: ButtonGroupProps) => {
   const [activeBtn, setActiveBtn] = useState(selectedItem || items[0]);
@@ -16,6 +17,10 @@ export const ButtonGroup = ({
     onClick(item);
   };
 
+  useEffect(() => {
+    setActiveBtn(externalState);
+  }, [externalState]);
+
   return (
     <React.Fragment>
       {items.map((item) => {

package/src/components/ButtonGroup/stories/ExternalState.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { ButtonGroup } from '../ButtonGroup';
+import { items } from '../helpers';
+import { ButtonGroupItem } from '../types';
+
+export const ExternalStateStory = () => {
+  const [externalState, setExternalState] = useState<ButtonGroupItem>();
+  const handleExternalClick = () => {
+    setExternalState(items[2]);
+  };
+  const handleClick = (item: ButtonGroupItem) => () => {
+    setExternalState(item);
+  };
+  return (
+    <div
+      css={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: 250,
+        gap: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <div
+        css={{
+          width: 250,
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 5,
+        }}>
+        <ButtonGroup
+          items={items}
+          onClick={(item) => handleClick(item)()}
+          externalState={externalState}
+        />
+      </div>
+      <button
+        type="button"
+        onClick={handleExternalClick}
+        css={{
+          border: 'none',
+          background: '#eef1f7',
+          padding: 8,
+          cursor: 'pointer',
+          '&:hover': {
+            background: '#fff',
+          },
+          '&:focus': {
+            background: 'rgb(222, 225, 236)',
+          },
+          '&:active': {
+            background: 'rgb(210, 212, 219)',
+          },
+        }}>
+        Choose &quot;Stopped&quot; tab
+      </button>
+    </div>
+  );
+};

package/src/components/ButtonGroup/types.ts

@@ -9,6 +9,7 @@ export type ButtonGroupItem = {
 export interface ButtonGroupProps {
   items: Array<ButtonGroupItem>;
   selectedItem?: ButtonGroupItem;
+  externalState?: ButtonGroupItem;
   onClick: (item: ButtonGroupItem) => void;
   buttonStyles?: SerializedStyles;
 }

package/src/components/Textarea/Textarea.tsx

@@ -14,6 +14,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       rows = 10,
       maxLength,
       title,
+      onPaste,
       register,
       setCountChar,
     }: TextareaProps,
@@ -33,6 +34,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         rows={rows}
         maxLength={maxLength}
         onChange={callAll(setCountChar, onChange)}
+        onPaste={onPaste}
         title={title}
         {...options}
         ref={useMergeRefs([options.ref, ref])}

package/src/components/Textarea/types.ts

@@ -12,5 +12,6 @@ export interface TextareaProps
   as?: React.ElementType;
   className?: string;
   title?: string;
+  onPaste?: React.ClipboardEventHandler<HTMLTextAreaElement>;
   setCountChar?: ReactEventHandler;
 }