@arbor-education/design-system.components 0.9.0 → 0.10.0

package/src/components/formField/inputs/selectDropdown/SelectDropdown.tsx

@@ -16,6 +16,7 @@ export type SelectDropdownInputProps = {
   'id'?: string;
   'alwaysShowPlaceholder'?: boolean;
   'initialSelectedValues'?: string[];
+  'selectedValues'?: string[];
   'open'?: boolean;
   'onOpenChange'?: (open: boolean) => void;
 };
@@ -33,11 +34,14 @@ export const SelectDropdown = (props: SelectDropdownInputProps) => {
     'aria-invalid': ariaInvalid,
     alwaysShowPlaceholder = false,
     initialSelectedValues = [],
+    selectedValues: controlledSelectedValues,
     open,
     onOpenChange,
   } = props;
 
-  const [selectedValues, setSelectedValues] = useState<string[]>(initialSelectedValues);
+  const isControlled = controlledSelectedValues !== undefined;
+  const [internalSelectedValues, setInternalSelectedValues] = useState<string[]>(initialSelectedValues);
+  const selectedValues = isControlled ? controlledSelectedValues : internalSelectedValues;
   const [renderedSelectContent, setRenderedSelectContent] = useState('');
   const selectedValuesRef = useRef(selectedValues);
   selectedValuesRef.current = selectedValues;
@@ -90,7 +94,9 @@ export const SelectDropdown = (props: SelectDropdownInputProps) => {
     else {
       nextValues = [...prev, value];
     }
-    setSelectedValues(nextValues);
+    if (!isControlled) {
+      setInternalSelectedValues(nextValues);
+    }
     onSelectionChange?.(nextValues);
   };
 

package/src/components/formField/inputs/text/TextInput.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
-import { type InputHTMLAttributes } from 'react';
+import { forwardRef, type InputHTMLAttributes } from 'react';
 
 export type TextInputProps = {
   size?: 'M' | 'S';
   hasError?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 
-export const TextInput = (props: TextInputProps) => {
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, ref) => {
   const {
     size = 'M',
     hasError,
@@ -27,9 +27,12 @@ export const TextInput = (props: TextInputProps) => {
 
   return (
     <input
+      ref={ref}
       className={inputClasses}
       disabled={disabled}
       {...rest}
     />
   );
-};
+});
+
+TextInput.displayName = 'TextInput';

package/src/components/table/Table.stories.tsx

@@ -1361,4 +1361,52 @@ export const TableWithSemanticColors: Story = {
   },
 };
 
+interface BooleanRowData {
+  id: number;
+  name: string;
+  hasPet: boolean | null | undefined;
+  isEnrolled: boolean | null | undefined;
+}
+
+const booleanCellRendererData: BooleanRowData[] = [
+  { id: 1, name: 'Alice Johnson', hasPet: true, isEnrolled: true },
+  { id: 2, name: 'Bob Smith', hasPet: false, isEnrolled: false },
+  { id: 3, name: 'Charlie Brown', hasPet: null, isEnrolled: undefined },
+  { id: 4, name: 'Diana Prince', hasPet: true, isEnrolled: null },
+  { id: 5, name: 'Ethan Hunt', hasPet: undefined, isEnrolled: true },
+];
+
+const booleanCellRendererColumnDefs: ColDef<BooleanRowData>[] = [
+  { field: 'name', headerName: 'Name' },
+  {
+    field: 'hasPet',
+    headerName: 'Has Pet',
+    cellRenderer: 'dsBooleanCellRenderer',
+    editable: false,
+  },
+  {
+    field: 'isEnrolled',
+    headerName: 'Is Enrolled',
+    cellRenderer: 'dsBooleanCellRenderer',
+    editable: false,
+  },
+];
+
+export const WithBooleanCellRenderer: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The BooleanCellRenderer displays a true or false icon for boolean values, and renders nothing for any other value regardless of truthiness. Only explicit true and false are accepted, anything else is treated as nullish',
+      },
+    },
+  },
+  args: {
+    rowData: booleanCellRendererData,
+    columnDefs: booleanCellRendererColumnDefs,
+    defaultColDef,
+    domLayout: 'autoHeight',
+  },
+};
+
 export default meta;

package/src/components/table/Table.tsx

@@ -24,6 +24,7 @@ import { focusFirstFocusableElement } from 'Utils/focusFirstFocusableElement';
 import { BooleanFilter } from './columnFilters/BooleanFilter/BooleanFilter';
 import { TimeFilter } from './columnFilters/TimeFilter/TimeFilter';
 import { TableSettingsDropdown } from './TableSettingsDropdown';
+import { BooleanCellRenderer } from './cellRenderers/BooleanCellRenderer';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
@@ -194,6 +195,7 @@ export const Table = (props: TableProps) => {
               dsSelectDropdownCellRenderer: SelectDropdownCellRenderer,
               dsBooleanFilter: BooleanFilter,
               dsTimeFilter: TimeFilter,
+              dsBooleanCellRenderer: BooleanCellRenderer,
               ...components,
             }}
             {...rest}

package/src/components/table/cellRenderers/BooleanCellRenderer.test.tsx

@@ -0,0 +1,37 @@
+import '@testing-library/jest-dom/vitest';
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { BooleanCellRenderer } from './BooleanCellRenderer';
+import type { CustomCellRendererProps } from 'ag-grid-react';
+
+const renderWithValue = (value: unknown) =>
+  render(<BooleanCellRenderer {...{ value } as CustomCellRendererProps} />);
+
+describe('BooleanCellRenderer', () => {
+  test('renders a check icon when value is true', () => {
+    renderWithValue(true);
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByText('true')).toBeInTheDocument();
+  });
+
+  test('renders an x icon when value is false', () => {
+    renderWithValue(false);
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByText('false')).toBeInTheDocument();
+  });
+
+  test('renders nothing when value is null', () => {
+    const { container } = renderWithValue(null);
+    expect(container.innerHTML).toBeFalsy();
+  });
+
+  test('renders nothing when value is undefined', () => {
+    const { container } = renderWithValue(undefined);
+    expect(container.innerHTML).toBeFalsy();
+  });
+
+  test('renders nothing when value is a non-boolean', () => {
+    const { container } = renderWithValue('some string');
+    expect(container.innerHTML).toBeFalsy();
+  });
+});

package/src/components/table/cellRenderers/BooleanCellRenderer.tsx

@@ -0,0 +1,34 @@
+import type { CustomCellRendererProps } from 'ag-grid-react';
+import { Icon } from 'Components/icon/Icon';
+
+export const BooleanCellRenderer = (props: CustomCellRendererProps) => {
+  const { value } = props;
+
+  if (value === true) {
+    return (
+      <div className="ds-boolean-cell-renderer">
+        <Icon
+          size={24}
+          name="check-solid"
+          color="var(--color-semantic-success-700)"
+          screenReaderText="true"
+        />
+      </div>
+    );
+  }
+  else if (value === false) {
+    return (
+      <div className="ds-boolean-cell-renderer">
+        <Icon
+          size={24}
+          name="x-solid"
+          color="var(--color-semantic-destructive-700)"
+          screenReaderText="false"
+        />
+      </div>
+    );
+  }
+  else {
+    return null;
+  }
+};

package/src/components/table/cellRenderers/booleanCellRenderer.scss

@@ -0,0 +1,7 @@
+.ds-boolean-cell-renderer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}

package/src/index.scss

@@ -37,10 +37,12 @@
 @use "components/progress/progress.scss";
 @use "components/toast/toast.scss";
 @use "components/datePicker/datePicker.scss";
+@use "components/dateTimePicker/dateTimePicker.scss";
 @use "components/avatar/avatar.scss";
 @use "components/singleUser/singleUser.scss";
 @use "components/avatarGroup/avatarGroup.scss";
 @use "components/userDropdown/userDropdown.scss";
+@use "components/table/cellRenderers/booleanCellRenderer.scss";
 @use "components/row/row.scss";
 @use "components/combobox/combobox.scss";
 @use "components/toggle/toggle.scss";

package/src/index.ts

@@ -10,6 +10,8 @@ export { Banner, BANNER_LEVEL, type BannerProps } from 'Components/banner/Banner
 export { Button } from 'Components/button/Button';
 export { Card } from 'Components/card/Card';
 export { DatePicker } from 'Components/datePicker/DatePicker';
+export { DateTimePicker } from 'Components/dateTimePicker/DateTimePicker';
+export type { DateTimePickerDisplayFormat, DateTimePickerProps } from 'Components/dateTimePicker/DateTimePicker';
 export { Dropdown } from 'Components/dropdown/Dropdown';
 export { Tag } from 'Components/tag/Tag';
 export type { TagProps, TagColor } from 'Components/tag/Tag';
@@ -42,6 +44,7 @@ export { SingleUser, type SingleUserProps } from 'Components/singleUser/SingleUs
 export { Slideover, type SlideoverProps } from 'Components/slideover/Slideover';
 export { SlideoverManager } from 'Components/slideoverManager/SlideoverManager';
 export { DefaultCellRenderer } from 'Components/table/cellRenderers/DefaultCellRenderer';
+export { BooleanCellRenderer } from 'Components/table/cellRenderers/BooleanCellRenderer';
 export { DSDefaultColDef } from 'Components/table/DSDefaultColDef';
 export { GridApiContext } from 'Components/table/GridApiContext';
 export { Table } from 'Components/table/Table';