wjec-one 4.2.0-alpha.0 → 4.2.0-alpha.2

package/README.md

@@ -1155,7 +1155,7 @@ Here is a list of our components along with some documentation for them.
       <tbody>
           <tr>
             <td>ref</td>
-            <td><code>LegacyRef<CarouselControls></code></td>
+            <td><code>Ref<CarouselControls></code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>Allows getting a ref to the component instance.
@@ -1311,7 +1311,7 @@ Once the component unmounts, React will set `ref.current` to `null`
       <tbody>
           <tr>
             <td>toggle</td>
-            <td><code>string , ReactElement<any, string , JSXElementConstructor<any>></code></td>
+            <td><code>string , ReactElement<unknown, string , JSXElementConstructor<any>></code></td>
             <td>false</td>
             <td><code><HelpIcon css={styles.defaultToggle} /></code></td>
             <td>The string or component to use as the Popup's toggle</td>
@@ -1419,7 +1419,7 @@ Once the component unmounts, React will set `ref.current` to `null`
       <tbody>
           <tr>
             <td>toggle</td>
-            <td><code>string , ReactElement<any, string , JSXElementConstructor<any>></code></td>
+            <td><code>string , ReactElement<unknown, string , JSXElementConstructor<any>></code></td>
             <td>false</td>
             <td><code><IconButton icon={MoreIcon} ariaLabel={ariaLabel} /></code></td>
             <td>-</td>
@@ -4490,7 +4490,7 @@ The identifier that will be passed through to the underlying HTML element</td>
       <tbody>
           <tr>
             <td>otherActions</td>
-            <td><code>ReactElement<any, string , JSXElementConstructor<any>> , ContextMenuOption[] , ContextMenuSection[]</code></td>
+            <td><code>ReactElement<unknown, string , JSXElementConstructor<any>> , ContextMenuOption[] , ContextMenuSection[]</code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>A set of custom controls that will be rendered in the Modal's footer. Can be either a React element or a configuration object for a ContextMenu</td>
@@ -5606,7 +5606,7 @@ The identifier that will be passed through to the underlying HTML element</td>
       <tbody>
           <tr>
             <td>toggle</td>
-            <td><code>string , ReactElement<any, string , JSXElementConstructor<any>></code></td>
+            <td><code>string , ReactElement<unknown, string , JSXElementConstructor<any>></code></td>
             <td>true</td>
             <td><code>-</code></td>
             <td>The string or component to use as the Popup's toggle</td>
@@ -6005,7 +6005,7 @@ The identifier that will be passed through to the underlying HTML element</td>
             <td>element</td>
             <td><code>keyof HTMLElementTagNameMap</code></td>
             <td>false</td>
-            <td><code>div</code></td>
+            <td><code>-</code></td>
             <td>-</td>
           </tr>
         </tbody>
@@ -6020,19 +6020,28 @@ The identifier that will be passed through to the underlying HTML element</td>
         </tbody>
       <tbody>
           <tr>
-            <td>styles</td>
-            <td><code>Interpolation , ArrayInterpolation<any></code></td>
+            <td>vertical</td>
+            <td><code>boolean</code></td>
             <td>false</td>
-            <td><code>-</code></td>
+            <td><code>true</code></td>
             <td>-</td>
           </tr>
         </tbody>
       <tbody>
           <tr>
-            <td>vertical</td>
-            <td><code>boolean</code></td>
+            <td>id</td>
+            <td><code>string</code></td>
             <td>false</td>
-            <td><code>true</code></td>
+            <td><code>-</code></td>
+            <td>The identifier that will be passed through to the underlying HTML element</td>
+          </tr>
+        </tbody>
+      <tbody>
+          <tr>
+            <td>ref</td>
+            <td><code>Ref<HTMLElementTagNameMap[T]></code></td>
+            <td>false</td>
+            <td><code>-</code></td>
             <td>-</td>
           </tr>
         </tbody>

package/auth/index.d.ts

@@ -1,9 +1,16 @@
 import { CognitoUserSession, CognitoUser } from 'amazon-cognito-identity-js';
 import { LocalizationState } from 'wjec-one/localization';
+import { CentreNumber, AccountType as AccountType$1 } from 'wjec-one/portal';
 import { ServiceCallStatus as ServiceCallStatus$1 } from 'wjec-one/services';
 
 type ServiceCallStatus = 'done' | 'failed' | 'idle' | 'loading';
 
+declare enum AccountType {
+    EXAMS_OFFICER = "EXAMS_OFFICER",
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY"
+}
+
 declare enum AuthAction {
     CHANGE_PASSWORD = "changePassword",
     COMPLETE_PASSWORD_RESET = "completePasswordReset",
@@ -60,7 +67,7 @@ interface EditablePrivateUserAttributes {
     middleName: string;
 }
 interface ReadonlyCognitoUserAttributes {
-    centrePermissions: Record<string, string>;
+    centrePermissions: Record<CentreNumber, AccountType$1>;
     emailAddress: string;
     emailAddressVerified: boolean;
     groups: string[];
@@ -129,12 +136,12 @@ type UserPreferences = {
 };
 
 interface Props {
-    amplifyConfig?: Record<string, any>;
+    amplifyConfig?: Record<string, unknown>;
     debug?: boolean;
-    oAuthConfig?: Record<string, any>;
+    oAuthConfig?: Record<string, unknown>;
     onChallenge?: (challenge: Challenge) => void;
     onCompletePasswordReset?: () => void;
-    onError?: (errorType: AuthAction, errorDetails?: any) => void;
+    onError?: (errorType: AuthAction, errorDetails?: unknown) => void;
     onInit?: (session: CognitoUserSession) => void;
     onRefreshSession?: (session: CognitoUserSession) => void;
     onRequestPasswordReset?: (emailAddress: string) => void;
@@ -151,7 +158,7 @@ declare const completePasswordReset: (username: string, code: string, newPasswor
 declare const externalSignIn: (provider: string) => void;
 declare const getAuthorizationToken: () => Promise<string>;
 declare const getUserSession: () => Promise<CognitoUserSession>;
-declare const init: (amplifyConfig: Record<string, any>, oAuthConfig: Record<string, any>, usersEndpointOrOptions: string | {
+declare const init: (amplifyConfig: Record<string, unknown>, oAuthConfig: Record<string, unknown>, usersEndpointOrOptions: string | {
     debug?: boolean;
     usersEndpoint?: string;
 }) => Promise<CognitoUserSession>;
@@ -172,7 +179,7 @@ declare const updateUserPreferences: (preferences: Partial<UserPreferences>) =>
 declare const verifyTelephoneNumber: () => Promise<Challenge>;
 declare const verifyTotp: (code: string) => Promise<boolean>;
 declare const state: Readonly<{
-    readonly centrePermissions: Record<string, string>;
+    readonly centrePermissions: Record<`${number}`, AccountType>;
     readonly emailAddress: string;
     readonly emailAddressVerified: boolean;
     readonly familyName: string;
@@ -182,7 +189,7 @@ declare const state: Readonly<{
     readonly id: string;
     readonly isInitialized: boolean;
     readonly isSignedIn: boolean;
-    readonly languagePreference: any;
+    readonly languagePreference: string;
     readonly mfaType: MFAType;
     readonly middleName: string;
     readonly preferences: UserPreferences;

package/config/eslint.config.mjs

@@ -1,17 +1,17 @@
-import { defineConfig } from 'eslint/config';
-import tsEslintPlugin from '@typescript-eslint/eslint-plugin';
-import tsEslint from 'typescript-eslint';
 import jsEslint from '@eslint/js';
+import tsEslintPlugin from '@typescript-eslint/eslint-plugin';
 import tsParser from '@typescript-eslint/parser';
+import importPlugin from 'eslint-plugin-import';
 import reactPlugin from 'eslint-plugin-react';
 import reactRules from 'eslint-plugin-react-hooks';
-import importPlugin from 'eslint-plugin-import';
+import { defineConfig } from 'eslint/config';
+import globals from 'globals';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import globals from 'globals';
+import tsEslint from 'typescript-eslint';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const PROJECT_ROOT = path.resolve(__dirname, '..');
+const PROJECT_ROOT = path.resolve(__dirname, './');
 
 const mainConfig = {
   files: ['**/*.{js,jsx,ts,tsx}'],
@@ -55,6 +55,7 @@ const mainConfig = {
     'comma-dangle': ['error', 'never'],
     'comma-spacing': 'error',
     'comma-style': 'error',
+    'complexity': ['warn', { max: 15 }],
     'computed-property-spacing': 'error',
     'consistent-return': ['error', { treatUndefinedAsUnspecified: true }],
     curly: 'error',
@@ -69,7 +70,9 @@ const mainConfig = {
     'max-len': ['error', {
       code: 140,
       ignoreComments: true,
-      ignoreRegExpLiterals: true
+      ignoreRegExpLiterals: true,
+      ignoreStrings: true
+      // check string template
     }],
     'multiline-ternary': ['error', 'always-multiline'],
     'new-parens': 'error',
@@ -85,6 +88,7 @@ const mainConfig = {
     'no-mixed-operators': 'error',
     'no-multi-assign': 'error',
     'no-multi-spaces': 'error',
+    'no-multiple-empty-lines': ['error', { max: 1, maxBOF: 0, maxEOF: 1 }],
     'no-negated-condition': 'error',
     'no-param-reassign': 'error',
     // 'no-restricted-imports': ['error', { patterns: ['!./*', '!../*', '../../*', 'wjec-one/auth', 'wjec-one/localization', 'wjec-one/portal', 'wjec-one/services', 'wjec-one/store', 'wjec-one/test', 'wjec-one/theme', 'wjec-one/utils'] }],
@@ -127,6 +131,7 @@ const mainConfig = {
     quotes: ['error', 'single'],
     'quote-props': ['error', 'as-needed'],
     radix: ['error', 'as-needed'],
+    'react/jsx-no-leaked-render': ['error', { validStrategies: ['ternary', 'coerce'] }],
     'require-atomic-updates': 'error',
     'require-await': 'error',
     'rest-spread-spacing': 'error',
@@ -153,24 +158,40 @@ const mainConfig = {
     'import/no-named-as-default-member': 'off',
     'import/no-self-import': 'error',
     'import/no-unresolved': 'off',
+    'import/order': ['error', {
+      groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+      pathGroups: [
+        {
+          pattern: 'wjec-one{,/**}',
+          group: 'external',
+          position: 'after'
+        },
+        {
+          pattern: '**/assets/**',
+          group: 'sibling',
+          position: 'after'
+        }
+      ],
+      'newlines-between': 'always',
+      alphabetize: { order: 'asc', caseInsensitive: true }
+    }],
     // Would like to have an unused exports check, but unfortunately this doesn't work well with TypeScript...
     // Will replace with appropriate alternative once identified
     // 'import/no-unused-modules': ['error', { unusedExports: true }],
     '@typescript-eslint/array-type': ['error', { default: 'array-simple' }],
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/member-ordering': 'error',
-    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-explicit-any': 'error',
     '@typescript-eslint/no-shadow': ['error', { hoist: 'all' }],
     '@typescript-eslint/no-unused-vars': ['error', {
-        args: 'all',
-        argsIgnorePattern: '^_', 
-        caughtErrors: 'all',
-        caughtErrorsIgnorePattern: '^_',
-        destructuredArrayIgnorePattern: '^_',
-        varsIgnorePattern: '^React$|^_|^jsx$',
-        ignoreRestSiblings: true
-      }
-    ],
+      args: 'all',
+      argsIgnorePattern: '^_',
+      caughtErrors: 'all',
+      caughtErrorsIgnorePattern: '^_',
+      destructuredArrayIgnorePattern: '^_',
+      varsIgnorePattern: '^React$|^_|^jsx$',
+      ignoreRestSiblings: true
+    }],
     '@typescript-eslint/no-use-before-define': ['error', { classes: true, functions: false, variables: false }],
     '@typescript-eslint/prefer-includes': 'error',
     '@typescript-eslint/prefer-interface': 'off',
@@ -187,12 +208,36 @@ const testConfig = {
       code: 140,
       ignoreComments: true,
       ignoreRegExpLiterals: true,
-      ignoreStrings: true
+      ignoreStrings: true,
+      ignoreTemplateLiterals: true
     }],
     'no-console': 'off',
     'no-restricted-imports': 'off',
     'padding-line-between-statements': 'off',
     'import/first': 'off',
+    // 'import/order': ['error', {
+    //   groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+    //   pathGroups: [
+    //     {
+    //       pattern: 'test',
+    //       group: 'builtin'
+    //     },
+    //     {
+    //       pattern: 'wjec-one{,/**}',
+    //       group: 'external',
+    //       position: 'after'
+    //     },
+    //     {
+    //       pattern: 'src/assets/**',
+    //       group: 'sibling',
+    //       position: 'after'
+    //     }
+    //   ],
+    //   'newlines-between': 'ignore',
+    //   alphabetize: { order: 'asc', caseInsensitive: true }
+    // }],
+    'import/order': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-object-literal-type-assertion': 'off'
   }
@@ -212,10 +257,8 @@ const scratchpadConfig = {
 };
 
 const scriptsConfig = {
-  files: ['scripts/*.js'],
-  languageOptions: {
-    globals: { node: true }
-  },
+  files: ['scripts/*.js', 'config/**', 'rollup.config.mjs', 'jest.config.js','webpack.config.js'],
+  languageOptions: { globals: { ...globals.node } },
   rules: {
     'no-console': 'off',
     '@typescript-eslint/no-var-requires': 'off'
@@ -226,9 +269,6 @@ export default defineConfig([
   tsEslint.configs.eslintRecommended,
   jsEslint.configs.recommended,
   reactRules.configs.flat.recommended,
-  {
-    languageOptions: { globals: { ...globals.node }}
-  },
   mainConfig,
   testConfig,
   scratchpadConfig,

package/config/jest.config.js

@@ -44,10 +44,12 @@ module.exports = {
   ],
   setupFiles: [
     path.join(testPath, 'setupTests.ts'),
+    path.join(testPath, 'setupTestsForProject.ts'),
     fs.existsSync(projectTestSetupFilePath) && projectTestSetupFilePath
   ].filter(Boolean),
   setupFilesAfterEnv: [
     path.join(testPath, 'setupTestsAfterEnv.ts'),
+    path.join(testPath, 'setupTestsAfterEnvForProject.ts'),
     fs.existsSync(projectTestSetupAfterEnvFilePath) && projectTestSetupAfterEnvFilePath
   ].filter(Boolean),
   snapshotSerializers: ['@emotion/jest/serializer'],

package/config/webpack.standalone.config.js

@@ -11,7 +11,7 @@ const standaloneComponents =
   fs.readdirSync(`${appPath}/standalone`, { withFileTypes: true })
     .map((dirent) => ({
       filePath: dirent.isDirectory()
-        ? glob.sync(`${appPath}/standalone/${dirent.name}/index.{js,jsx,ts,tsx}`)?.[0]
+        ? glob.sync(`${appPath}/standalone/${dirent.name}/index.{js,jsx,ts,tsx}`.replaceAll(path.sep, path.posix.sep))?.[0]
         : `${appPath}/standalone/${dirent.name}`,
       fileType: dirent.isDirectory() ? 'dir' : 'file',
       name: dirent.name

package/index.d.ts

@@ -1,7 +1,6 @@
 import * as _emotion_react from '@emotion/react';
-import { Interpolation, ArrayInterpolation } from '@emotion/react';
 import * as React$1 from 'react';
-import React__default, { PropsWithChildren, FunctionComponent, ButtonHTMLAttributes, SVGProps, CSSProperties, FC, InputHTMLAttributes, MouseEvent, ReactNode, Key, MutableRefObject } from 'react';
+import React__default, { PropsWithChildren, FunctionComponent, ButtonHTMLAttributes, SVGProps, CSSProperties, FC, InputHTMLAttributes, MouseEvent, ReactNode, Ref, Key, MutableRefObject, EffectCallback, DependencyList } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { KeyExtractor, ContentExtractor, SVGComponent } from 'wjec-one/utils';
 import { AriaButtonProps } from 'react-aria';
@@ -114,6 +113,8 @@ type DeepMerge<S, O> = S extends Primitive ? O : O extends Primitive ? S : {
 type DeepPartial<T extends object> = Partial<{
     [K in keyof T]: T[K] extends object ? DeepPartial<T[K]> : T[K];
 }>;
+type FixedLengthArray<T, N extends number> = GrowToSize<T, N, []>;
+type GrowToSize<T, N extends number, A extends T[]> = A['length'] extends N ? A : GrowToSize<T, N, [...A, T]>;
 type Implements<T, U extends T> = U;
 type ObjectLeaves<T> = T extends object ? {
     [K in keyof T]: `${Exclude<K, symbol>}${ObjectLeaves<T[K]> extends never ? '' : `.${ObjectLeaves<T[K]>}`}`;
@@ -121,6 +122,9 @@ type ObjectLeaves<T> = T extends object ? {
 type ObjectPaths<T> = T extends object ? {
     [K in keyof T]: `${Exclude<K, symbol>}${'' | `.${ObjectPaths<T[K]>}`}`;
 }[keyof T] : never;
+type Optional<T extends object> = {
+    -readonly [K in keyof T]: T[K];
+};
 type UnionToIntersection<T> = {
     [K in T as K & string]: K;
 }[any];
@@ -319,8 +323,6 @@ type ButtonProps$1 = React__default.ComponentProps<typeof Button>;
 type SecondaryButtonProps = Omit<ButtonProps$1, 'activeColor' | 'borderColor' | 'color' | 'focusColor' | 'hoverColor' | 'iconColor' | 'iconColorActive' | 'labelColor' | 'labelColorActive' | 'outlineColor'>;
 declare const SecondaryButton: FC<SecondaryButtonProps>;
 
-/** @jsx jsx */
-
 type CardProps = {
     borderColor?: CSSProperties['color'];
     padding?: CSSProperties['padding'];
@@ -527,14 +529,10 @@ type Position = {
 
 declare const Popup: WjecOneComponent<PopupProps$2>;
 
-/** @jsx jsx */
-
 type PopupProps$1 = React__default.ComponentProps<typeof Popup>;
 type ContextHelpProps = Pick<Partial<PopupProps$1>, 'ariaDescription' | 'ariaLabel' | 'border' | 'maxWidth' | 'onHide' | 'onShow' | 'open' | 'placement' | 'toggle' | 'trigger'>;
 declare const ContextHelp: WjecOneComponent<ContextHelpProps>;
 
-/** @jsx jsx */
-
 type PopupProps = React__default.ComponentProps<typeof Popup>;
 type ContextMenuOption = {
     additionalInfo?: string | React__default.ReactElement;
@@ -559,8 +557,6 @@ type ContextMenuProps$2 = {
 } & Pick<AriaProperties, 'ariaLabel'>;
 declare const ContextMenu: WjecOneComponent<ContextMenuProps$2>;
 
-/** @jsx jsx */
-
 type EmphasisProps = {
     color?: CSSProperties['color'];
 };
@@ -696,9 +692,7 @@ type FilterListProps<T> = Pick<InputProps, 'icon' | 'label' | 'onChange' | 'plac
     }>;
     options: T[];
 } & Pick<AriaProperties, 'ariaCloseLabel' | 'ariaLabel' | 'ariaMultiselectable'>;
-declare const FilterList: <T extends any>({ clearButtonBehaviour, expanded, filter, floatingList, floatingListPosition, icon, id, label, loading, maxHeight, noMatchesMessage, onChange, onFilter, optionKeyExtractor, optionTemplate, options, placeholder, value, ariaLabel, ariaCloseLabel, ariaMultiselectable }: WjecOneComponentProps<FilterListProps<T>>) => _emotion_react_jsx_runtime.JSX.Element;
-
-/** @jsx jsx */
+declare const FilterList: <T extends unknown>({ clearButtonBehaviour, expanded, filter, floatingList, floatingListPosition, icon, id, label, loading, maxHeight, noMatchesMessage, onChange, onFilter, optionKeyExtractor, optionTemplate, options, placeholder, value, ariaLabel, ariaCloseLabel, ariaMultiselectable }: WjecOneComponentProps<FilterListProps<T>>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ContextMenuProps$1 = React__default.ComponentProps<typeof ContextMenu>;
 type FormProps = {
@@ -713,8 +707,6 @@ type FormProps = {
 } & Pick<AriaProperties, 'ariaDescription' | 'ariaLabel'>;
 declare const Form: WjecOneComponent<FormProps>;
 
-/** @jsx jsx */
-
 type Props$c = {
     ariaLabel?: AriaProperties;
     /**
@@ -790,8 +782,6 @@ interface DateTimeProps extends Omit<DateProps, 'type'>, Omit<TimeProps, 'type'>
 type DateTimePickerProps = DateProps | DateTimeProps | TimeProps;
 declare const DateTimePicker: WjecOneComponent<DateTimePickerProps>;
 
-/** @jsx jsx */
-
 type Props$b = React__default.ComponentProps<typeof Input>;
 declare const Email: WjecOneComponent<Props$b>;
 
@@ -822,7 +812,7 @@ type Props$a = {
     onError?: (errors: Array<{
         code: string;
         details?: {
-            [key: string]: any;
+            [key: string]: unknown;
         };
     }>) => void;
     /** A function that will be triggered when the list of selected files is changed */
@@ -982,6 +972,7 @@ declare const RadioGroup: <T extends {}>({ ariaLabel, description, disabled, gri
 
 type OptionsComparator<T> = (optionA: T, optionB: T) => number;
 type OptionsGroup<T> = {
+    key?: React.Key;
     label: string;
     options: T[];
 };
@@ -1073,9 +1064,7 @@ type SelectProps<T> = {
     statusMessage?: FormattedString;
 };
 
-declare const Select: <T extends any>(props: WjecOneComponentProps<SelectProps<T>>) => _emotion_react_jsx_runtime.JSX.Element;
-
-/** @jsx jsx */
+declare const Select: <T extends unknown>(props: WjecOneComponentProps<SelectProps<T>>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Props$8 = {
     disabled?: boolean;
@@ -1210,8 +1199,6 @@ type WarningCardProps = React__default.ComponentProps<typeof InformationCard>;
 type Props$3 = Omit<WarningCardProps, 'borderColor' | 'icon' | 'iconColor' | 'titleColor'>;
 declare const WarningCard: FC<Props$3>;
 
-/** @jsx jsx */
-
 type SVGFC$1 = (props: SVGProps<SVGSVGElement>) => SVGComponent;
 type Props$2 = {
     copyrightMessage?: FormattedString;
@@ -1220,8 +1207,6 @@ type Props$2 = {
 };
 declare const Footer: FC<Props$2>;
 
-/** @jsx jsx */
-
 type SVGFC = (props: SVGProps<SVGSVGElement>) => SVGComponent;
 type Props$1 = {
     logo?: SVGFC | {
@@ -1243,8 +1228,6 @@ type Props$1 = {
 };
 declare const Header: FC<Props$1>;
 
-/** @jsx jsx */
-
 type FooterProps = React__default.ComponentProps<typeof Footer>;
 type HeaderProps = React__default.ComponentProps<typeof Header>;
 type Props = {
@@ -1254,8 +1237,6 @@ type Props = {
 };
 declare const Page: FC<PropsWithChildren<Props>>;
 
-/** @jsx jsx */
-
 type LinearProgressProps = {
     /** The background color of the progress bar
      * @default ColorPalette.Neutral
@@ -1355,12 +1336,12 @@ type NotificationProps$4 = {
 declare const Notification: WjecOneComponent<NotificationProps$4>;
 
 type NotificationProps$3 = React__default.ComponentProps<typeof Notification>;
-type InfoNotificationProps = Omit<NotificationProps$3, 'actionColor' | 'actionTextColor' | 'borderColor' | 'icon' | 'iconColor' | 'titleColor'>;
-declare const InfoNotification: FC<InfoNotificationProps>;
+type ErrorNotificationProps = Omit<NotificationProps$3, 'actionColor' | 'actionTextColor' | 'borderColor' | 'icon' | 'titleColor'>;
+declare const ErrorNotification: FC<ErrorNotificationProps>;
 
 type NotificationProps$2 = React__default.ComponentProps<typeof Notification>;
-type ErrorNotificationProps = Omit<NotificationProps$2, 'actionColor' | 'actionTextColor' | 'borderColor' | 'icon' | 'titleColor'>;
-declare const ErrorNotification: FC<ErrorNotificationProps>;
+type InfoNotificationProps = Omit<NotificationProps$2, 'actionColor' | 'actionTextColor' | 'borderColor' | 'icon' | 'iconColor' | 'titleColor'>;
+declare const InfoNotification: FC<InfoNotificationProps>;
 
 type NotificationProps$1 = React__default.ComponentProps<typeof Notification>;
 type SuccessNotificationProps = Omit<NotificationProps$1, 'actionColor' | 'actionTextColor' | 'borderColor' | 'icon' | 'iconColor' | 'titleColor'>;
@@ -1487,8 +1468,6 @@ type ModalProps = {
 
 declare const Modal: WjecOneComponent<ModalProps>;
 
-/** @jsx jsx */
-
 type PageTitleProps = {
     color?: CSSProperties['color'];
 };
@@ -1502,8 +1481,6 @@ type PaginationProps = {
 } & Pick<AriaProperties, 'ariaCurrent' | 'ariaLabel'>;
 declare const Pagination: WjecOneComponent<PaginationProps>;
 
-/** @jsx jsx */
-
 type ParagraphProps = {
     color?: CSSProperties['color'];
 };
@@ -1535,8 +1512,6 @@ type PopupWindowProps$1 = {
 };
 declare const PopupWindow: WjecOneComponent<PopupWindowProps$1>;
 
-/** @jsx jsx */
-
 type PrintLayoutProps$1 = {
     footer?: FC;
     header?: FC;
@@ -1555,32 +1530,28 @@ type PrintWindowProps = PopupWindowProps & PrintLayoutProps & {
 } & Pick<AriaProperties, 'ariaLabel'>;
 declare const PrintWindow: WjecOneComponent<PrintWindowProps>;
 
-/** @jsx jsx */
-
-type ScrollableContainerProps = {
-    element?: keyof HTMLElementTagNameMap;
+type ScrollableContainerProps<T extends keyof HTMLElementTagNameMap> = {
+    element?: T;
     horizontal?: boolean;
-    styles?: Interpolation | ArrayInterpolation<any>;
     vertical?: boolean;
 };
-declare const ScrollableContainer: FC<PropsWithChildren<ScrollableContainerProps>>;
-
-/** @jsx jsx */
+interface ScrollableContainerComponent extends WjecOneComponent<ScrollableContainerProps<keyof HTMLElementTagNameMap>> {
+    <T extends keyof HTMLElementTagNameMap = 'div'>(props: WjecOneComponentProps<ScrollableContainerProps<T>> & {
+        ref?: Ref<HTMLElementTagNameMap[T]>;
+    }): ReturnType<WjecOneComponent<ScrollableContainerProps<T>>>;
+}
+declare const ScrollableContainer: ScrollableContainerComponent;
 
 type SectionHeadingProps = {
     color?: CSSProperties['color'];
 };
 declare const SectionHeading: WjecOneComponent<SectionHeadingProps>;
 
-/** @jsx jsx */
-
 type SectionTitleProps = {
     color?: CSSProperties['color'];
 };
 declare const SectionTitle: WjecOneComponent<SectionTitleProps>;
 
-/** @jsx jsx */
-
 type SubParagraphProps = {
     color?: CSSProperties['color'];
 };
@@ -1700,7 +1671,7 @@ type TabsProps<T> = {
     selectedTabColor?: CSSProperties['color'];
     tabs: T[];
 } & Pick<AriaProperties, 'ariaLabel'>;
-declare const Tabs: <T extends any>({ ariaLabel, backgroundStyle, disabledTabs, id, keyExtractor, labelExtractor, onSelect, selectedTab, selectedTabColor, tabs }: WjecOneComponentProps<TabsProps<T>>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Tabs: <T extends unknown>({ ariaLabel, backgroundStyle, disabledTabs, id, keyExtractor, labelExtractor, onSelect, selectedTab, selectedTabColor, tabs }: WjecOneComponentProps<TabsProps<T>>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ExtractKeyframeParams<T extends string> = T extends `${string}{${infer Param}}${infer Rest}` ? Param extends `${infer Key}:${infer Type}` ? Type extends keyof CSSProperties ? {
     [K in Key]: CSSProperties[Type];
@@ -1735,7 +1706,7 @@ declare const useAnimation: <T extends KeyframeParams>(elementRef: MutableRefObj
 type EventListenerCallback<E extends keyof HTMLElementEventMap> = (event: HTMLElementEventMap[E]) => void;
 type EventListenerHook = <E extends keyof HTMLElementEventMap>(eventName: E, callback: EventListenerCallback<E>, options?: EventListenerHookOptions) => void;
 type EventListenerHookOptions = {
-    dependencies?: any[];
+    dependencies?: unknown[];
     eventOptions?: AddEventListenerOptions;
     eventTarget?: HTMLElement | Window | MutableRefObject<HTMLElement | Window>;
     shouldAddListener?: boolean | (() => boolean);
@@ -1743,7 +1714,7 @@ type EventListenerHookOptions = {
 declare const useEventListener: EventListenerHook;
 
 type FocusTrapOptions = {
-    dependencies?: any[];
+    dependencies?: unknown[];
     focusElement?: false | HTMLElement | number | string;
     shouldTrapFocus?: boolean | (() => boolean);
 };
@@ -1755,6 +1726,8 @@ declare const useKeydownEvent: (code: Lowercase<KeyboardEvent["code"] | Keyboard
 
 declare const useMediaQuery: (query: string) => boolean;
 
+declare const useStateEffect: (effect: EffectCallback, deps?: DependencyList) => void;
+
 declare const useRefById: <T extends HTMLElement>(id: string) => React$1.RefObject<T>;
 
-export { Accordion, Breadcrumb, Button, Card, Carousel, CheckBox, CircularProgress, _default$2 as ColorPalette, _default$1 as ColorPaletteEduqas, ColumnOptions, ContextHelp, ContextMenu, DateTimePicker, DeepMerge, DeepPartial, DestructiveButton, Email, Emphasis, ErrorCard, ErrorNotification, EventListenerHookOptions, FileInput, FilterList, FocusTrapOptions, Footer, Form, Header, IconButton, Implements, InfoNotification, InformationCard, Input, LinearProgress, Link, LinkButton, Modal, Notification, ObjectLeaves, ObjectPaths, Page, PageTitle, Pagination, Paragraph, Password, Pill, Popup, PopupWindow, PrimaryButton, PrintLayout, PrintWindow, RadioGroup, RowOptions, ScrollableContainer, SecondaryButton, SectionHeading, SectionTitle, Select, SortDirection, _default as StylePalette, SubParagraph, SubTitle, SuccessCard, SuccessNotification, Table, TableColumn, Tabs, TextArea, Toggle, UnionToIntersection, VerificationCodeInput, WarningCard, WithKeys, Writable, useAnimation, useEventListener, useFocusTrap, useIsMounted, useKeydownEvent, useMediaQuery, useRefById };
+export { Accordion, Breadcrumb, Button, Card, Carousel, CheckBox, CircularProgress, _default$2 as ColorPalette, _default$1 as ColorPaletteEduqas, ColumnOptions, ContextHelp, ContextMenu, DateTimePicker, DeepMerge, DeepPartial, DestructiveButton, Email, Emphasis, ErrorCard, ErrorNotification, EventListenerHookOptions, FileInput, FilterList, FixedLengthArray, FocusTrapOptions, Footer, Form, Header, IconButton, Implements, InfoNotification, InformationCard, Input, LinearProgress, Link, LinkButton, Modal, Notification, ObjectLeaves, ObjectPaths, Optional, Page, PageTitle, Pagination, Paragraph, Password, Pill, Popup, PopupWindow, PrimaryButton, PrintLayout, PrintWindow, RadioGroup, RowOptions, ScrollableContainer, SecondaryButton, SectionHeading, SectionTitle, Select, SortDirection, _default as StylePalette, SubParagraph, SubTitle, SuccessCard, SuccessNotification, Table, TableColumn, Tabs, TextArea, Toggle, UnionToIntersection, VerificationCodeInput, WarningCard, WithKeys, Writable, useAnimation, useEventListener, useFocusTrap, useIsMounted, useKeydownEvent, useMediaQuery, useRefById, useStateEffect };