@indico-data/design-system 3.6.3 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.6.3",
+  "version": "3.7.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/forms/date/datePicker/DatePicker.tsx

@@ -4,6 +4,7 @@ import { DatePickerProps } from './types';
 import { getCommonProps } from './contants';
 import { TimePicker } from '../../timePicker/TimePicker';
 import { Col, Row } from '../../../grid';
+import { useEffect, useRef } from 'react';
 
 export const DatePicker = (props: DatePickerProps) => {
   const {
@@ -84,9 +85,33 @@ export const DatePicker = (props: DatePickerProps) => {
   };
 
   const finalProps = { ...commonProps, ...rest, ...modeProps };
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  // Disable tab focus on all date picker elements
+  useEffect(() => {
+    const disableTabFocus = () => {
+      if (wrapperRef.current) {
+        const focusableElements = wrapperRef.current.querySelectorAll(
+          'button, input, select, textarea, a, [tabindex]:not([tabindex="-1"])',
+        );
+        focusableElements.forEach((element) => {
+          (element as HTMLElement).tabIndex = -1;
+        });
+      }
+    };
+
+    // Run immediately and set up observer for dynamic elements
+    disableTabFocus();
+    const observer = new MutationObserver(disableTabFocus);
+    if (wrapperRef.current) {
+      observer.observe(wrapperRef.current, { childList: true, subtree: true });
+    }
+
+    return () => observer.disconnect();
+  }, []);
 
   return (
-    <div className="date-picker-wrapper">
+    <div className="date-picker-wrapper" tabIndex={-1} ref={wrapperRef}>
       {hasTimePicker && (
         <div className="time-picker-wrapper">
           <Row align="center">

package/src/components/truncate/Truncate.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof Truncate> = {
     ),
   ],
   argTypes: {
-    truncateString: {
+    children: {
       required: true,
       control: 'text',
       table: {
@@ -43,7 +43,7 @@ type Story = StoryObj<TruncateProps>;
 export const Default: Story = {
   args: {
     numLines: 1,
-    truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+    children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
   },
   render: (args) => <Truncate {...args} />,
 };
@@ -51,7 +51,7 @@ export const Default: Story = {
 export const NoTruncate: Story = {
   args: {
     numLines: 1,
-    truncateString: 'No truncate',
+    children: 'No truncate',
   },
   render: (args) => <Truncate {...args} />,
 };
@@ -59,7 +59,7 @@ export const NoTruncate: Story = {
 export const WithNumLines: Story = {
   args: {
     numLines: 2,
-    truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+    children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
   },
   render: (args) => <Truncate {...args} />,
 };
@@ -71,7 +71,7 @@ export const WithTooltipOptions: Story = {
       place: 'right',
       width: '150px',
     },
-    truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+    children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
   },
   render: (args) => <Truncate {...args} />,
 };
@@ -82,7 +82,7 @@ export const NoTooltip: Story = {
     tooltipOptions: {
       disabled: true,
     },
-    truncateString: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
+    children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
   },
   render: (args) => <Truncate {...args} />,
 };
@@ -93,7 +93,7 @@ export const TruncateWithTooltipWidth: Story = {
     tooltipOptions: {
       width: 'calc(100% - 40px)',
     },
-    truncateString:
+    children:
       'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
   },
   render: (args) => <Truncate {...args} />,

package/src/components/truncate/Truncate.tsx

@@ -6,8 +6,8 @@ import classNames from 'classnames';
 
 export const Truncate = ({
   numLines = 1,
-  truncateString,
   tooltipOptions = {},
+  children,
   ...rest
 }: TruncateProps) => {
   const [isTruncated, setIsTruncated] = useState(false);
@@ -47,11 +47,11 @@ export const Truncate = ({
         })}
         {...rest}
       >
-        {truncateString}
+        {children}
       </span>
-      {isTruncated && truncateString && !tooltipOptions.disabled && (
+      {isTruncated && children && !tooltipOptions.disabled && (
         <Tooltip {...tooltipOptions} id={id}>
-          {truncateString}
+          {children}
         </Tooltip>
       )}
     </div>

package/src/components/truncate/__tests__/Truncate.test.tsx

@@ -25,7 +25,7 @@ describe('Truncate', () => {
 
   // Only way to test is by checking testid, validated this works in app
   it('shows truncated state when content overflows', () => {
-    render(<Truncate truncateString="This is a very long text that should be truncated" />);
+    render(<Truncate>This is a very long text that should be truncated</Truncate>);
 
     // Now we can use exact IDs instead of regex
     expect(screen.getByTestId('truncate-test-id-truncated')).toBeInTheDocument();
@@ -42,7 +42,7 @@ describe('Truncate', () => {
       value: 200,
     });
 
-    render(<Truncate truncateString="Short text" />);
+    render(<Truncate>Short text</Truncate>);
 
     // Now we can use exact IDs
     expect(screen.getByTestId('truncate-test-id-not-truncated')).toBeInTheDocument();

package/src/components/truncate/types.ts

@@ -3,9 +3,8 @@ import { TooltipProps } from '../tooltip/Tooltip';
 export interface TruncateProps {
   /** The number of lines to truncate the text to. If left blank, it will default to 1 line. */
   numLines?: number;
-  /** The string to truncate. This value will also be displayed in the tooltip when the text is truncated. */
-  truncateString: string;
   /** The options for the tooltip. If `disabled` is `true`, the tooltip will not be shown. If left blank, the tooltip will be shown by default. This is particularly useful if you want to set the width of the tooltip to something other than the default `max-content`. */
   tooltipOptions?: Partial<TooltipProps> & { disabled?: boolean };
-  [key: string]: any;
+  /** The children to display. This will be displayed in the truncate component. */
+  children: React.ReactNode;
 }