uikit-react-public 0.11.16 → 0.11.24

package/lib/components/Select/Select.stories.tsx

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
 import Select from './Select';
 import { Icon } from '../';
-import { SelectEvent } from './Select.types';
 
 const meta = {
   title: 'Components/Ready to use/Select',
@@ -29,9 +28,9 @@ const meta = {
     value: undefined,
     onChange: () => {},
     options: [
-      { text: 'Option one', value: '1' },
-      { text: 'Option two', value: '2' },
-      { text: 'Option three', value: '3' },
+      { label: 'Option one', value: '1' },
+      { label: 'Option two', value: '2' },
+      { label: 'Option three', value: '3' },
     ],
   },
 } satisfies Meta<typeof Select>;
@@ -42,7 +41,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onChange = (_event: SelectEvent, value: string) => {
+    const onValueChange = (value: string) => {
       updateArgs({ value });
     };
     return (
@@ -50,7 +49,7 @@ export const Default: Story = {
         {...args}
         options={args.options}
         value={args.value}
-        onChange={onChange}
+        onValueChange={onValueChange}
       />
     );
   },
@@ -62,7 +61,7 @@ export const Native: Story = {
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onChange = (_event: SelectEvent, value: string) => {
+    const onValueChange = (value: string) => {
       updateArgs({ value });
     };
     return (
@@ -70,7 +69,7 @@ export const Native: Story = {
         {...args}
         options={args.options}
         value={args.value}
-        onChange={onChange}
+        onValueChange={onValueChange}
       />
     );
   },
@@ -80,14 +79,14 @@ export const OptionsWithIcons: Story = {
   name: 'Options with icons',
   args: {
     options: [
-      { text: 'Option 1', value: '1', icon: <Icon.Printer /> },
-      { text: 'Option 2', value: '2', icon: <Icon.User /> },
-      { text: 'Option 3', value: '3', icon: <Icon.Info /> },
+      { label: 'Option 1', value: '1', icon: <Icon.Printer /> },
+      { label: 'Option 2', value: '2', icon: <Icon.User /> },
+      { label: 'Option 3', value: '3', icon: <Icon.Info /> },
     ],
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onChange = (_event: SelectEvent, value: string) => {
+    const onValueChange = (value: string) => {
       updateArgs({ value });
     };
 
@@ -96,7 +95,7 @@ export const OptionsWithIcons: Story = {
         {...args}
         options={args.options}
         value={args.value}
-        onChange={onChange}
+        onValueChange={onValueChange}
       />
     );
   },
@@ -108,7 +107,7 @@ export const Disabled: Story = {
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onChange = (_event: SelectEvent, value: string) => {
+    const onValueChange = (value: string) => {
       updateArgs({ value });
     };
 
@@ -117,7 +116,7 @@ export const Disabled: Story = {
         {...args}
         options={args.options}
         value={args.value}
-        onChange={onChange}
+        onValueChange={onValueChange}
       />
     );
   },
@@ -127,7 +126,7 @@ export const WithPlaceholder: Story = {
   args: { placeholder: 'Please select an option' },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onChange = (_event: SelectEvent, value: string) => {
+    const onValueChange = (value: string) => {
       updateArgs({ value });
     };
 
@@ -136,7 +135,7 @@ export const WithPlaceholder: Story = {
         {...args}
         options={args.options}
         value={args.value}
-        onChange={onChange}
+        onValueChange={onValueChange}
       />
     );
   },
@@ -146,14 +145,14 @@ export const SingleLongOption: Story = {
   name: 'Long option',
   args: {
     options: [
-      { text: 'Option 1', value: '1' },
-      { text: 'Option 2', value: '2' },
-      { text: 'Option 3 long long long long ', value: '3' },
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+      { label: 'Option 3 long long long long ', value: '3' },
     ],
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onChange = (_event: SelectEvent, value: string) => {
+    const onValueChange = (value: string) => {
       updateArgs({ value });
     };
 
@@ -162,7 +161,7 @@ export const SingleLongOption: Story = {
         {...args}
         options={args.options}
         value={args.value}
-        onChange={onChange}
+        onValueChange={onValueChange}
       />
     );
   },
@@ -172,26 +171,26 @@ export const ManyOptions: Story = {
   name: 'Many options',
   args: {
     options: [
-      { text: 'Option one', value: '1' },
-      { text: 'Option two', value: '2' },
-      { text: 'Option three', value: '3' },
-      { text: 'Option four', value: '4' },
-      { text: 'Option five', value: '5' },
-      { text: 'Option six', value: '6' },
-      { text: 'Option seven', value: '7' },
-      { text: 'Option eight', value: '8' },
-      { text: 'Option nine', value: '9' },
-      { text: 'Option ten', value: '10' },
-      { text: 'Option eleven', value: '11' },
-      { text: 'Option twelve', value: '12' },
-      { text: 'Option thirteen', value: '13' },
-      { text: 'Option fourteen', value: '14' },
-      { text: 'Option fifteen', value: '15' },
+      { label: 'Option one', value: '1' },
+      { label: 'Option two', value: '2' },
+      { label: 'Option three', value: '3' },
+      { label: 'Option four', value: '4' },
+      { label: 'Option five', value: '5' },
+      { label: 'Option six', value: '6' },
+      { label: 'Option seven', value: '7' },
+      { label: 'Option eight', value: '8' },
+      { label: 'Option nine', value: '9' },
+      { label: 'Option ten', value: '10' },
+      { label: 'Option eleven', value: '11' },
+      { label: 'Option twelve', value: '12' },
+      { label: 'Option thirteen', value: '13' },
+      { label: 'Option fourteen', value: '14' },
+      { label: 'Option fifteen', value: '15' },
     ],
   },
   render: () => {
     const [args, updateArgs] = useArgs();
-    const onChange = (_event: SelectEvent, value: string) => {
+    const onValueChange = (value: string) => {
       updateArgs({ value });
     };
     return (
@@ -199,7 +198,7 @@ export const ManyOptions: Story = {
         {...args}
         options={args.options}
         value={args.value}
-        onChange={onChange}
+        onValueChange={onValueChange}
       />
     );
   },

package/lib/components/Select/Select.tsx

@@ -3,33 +3,19 @@ import { SelectProps } from './Select.types';
 
 const Select = (props: SelectProps) => {
   if (props.native) {
-    // We can throw away `native` prop before passing to internal components
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { onChange, value, native, ...rest } = props;
-    const handleNativeChange = (
-      event: React.ChangeEvent<HTMLSelectElement>
-    ) => {
-      if (onChange) onChange(event, event.target.value);
-    };
+    const { onChange, value, ...rest } = props;
     return (
       <NativeSelect
-        onChange={handleNativeChange}
+        onChange={onChange}
         value={value || ''}
         {...rest}
       />
     );
   } else {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { onChange, native, ...rest } = props;
-    const handleCustomChange = (
-      event: React.MouseEvent | React.KeyboardEvent,
-      value: string
-    ) => {
-      if (onChange) onChange(event, value);
-    };
+    const { onValueChange, ...rest } = props;
     return (
       <CustomSelect
-        onChange={handleCustomChange}
+        onValueChange={onValueChange}
         {...rest}
       />
     );

package/lib/components/Select/Select.types.ts

@@ -7,7 +7,7 @@ export type OptionData = {
   /**
    * Display text shown to the user
    */
-  text: string;
+  label: string;
   /**
    * Data-friendly value that is returned when the option is selected
    * We assume this will be submitted to a server or used in some other way
@@ -21,16 +21,6 @@ export type OptionData = {
   icon?: React.ReactNode;
 };
 
-/**
- * Utility type we expose to developers
- * We expect this to be used in typing event handlers
- * This only applies to the top-level <Select> component
- */
-export type SelectEvent =
-  | React.ChangeEvent<HTMLSelectElement>
-  | React.MouseEvent
-  | React.KeyboardEvent;
-
 /**
  * Top level props that <Select> accepts when implemented
  */
@@ -39,20 +29,6 @@ interface BaseSelectProps {
    * An array of option data, to be rendered either natively or custom
    */
   options: OptionData[];
-  /**
-   * The currently selected value
-   * This determines which option is shown when the select is closed
-   */
-  value: string | undefined | null;
-  /**
-   * Generic onChange that splits into native and custom versions
-   * The original event is exposed, and the value always returns the value of the selected option
-   */
-  onChange: (event: SelectEvent, value: string) => void;
-  /**
-   * Prevents use, including focus events
-   */
-  disabled?: boolean | undefined;
   /**
    * Placeholder text shown when no option is selected
    * Displayed in visible field of custom implementation
@@ -69,30 +45,23 @@ interface BaseSelectProps {
    * as `data-testid`
    */
   testId?: string;
-  /**
-   * Optional className for styling
-   * This is passed to the root element of the component
-   * for additional CSS styling via Emotion.
-   */
-  className?: string;
   /**
    * Native flag determines which implementation to use
    */
   native?: boolean;
-  // `ref` prop added in the discriminated union below
 }
 
-export type SelectProps = BaseSelectProps &
-  // Discriminated union to determine which implementation to use
-  (| ({ native: true; ref?: React.RefObject<HTMLSelectElement | null> } & Omit<
-        React.SelectHTMLAttributes<HTMLSelectElement>,
-        keyof BaseSelectProps
-      >)
-    | ({ native?: false; ref?: React.RefObject<HTMLDivElement | null> } & Omit<
-        React.HTMLAttributes<HTMLDivElement>,
-        keyof BaseSelectProps
-      >)
-  );
+// export type SelectProps = BaseSelectProps &
+//   // Discriminated union to determine which implementation to use
+//   (| ({ native: true; ref?: React.RefObject<HTMLSelectElement | null> } & Omit<
+//         React.SelectHTMLAttributes<HTMLSelectElement>,
+//         keyof BaseSelectProps
+//       >)
+//     | ({ native?: false; ref?: React.RefObject<HTMLDivElement | null> } & Omit<
+//         React.HTMLAttributes<HTMLDivElement>,
+//         keyof BaseSelectProps
+//       >)
+//   );
 
 // Props interface for the two variants are separated.
 // We expose SelectProps for developers to use, and handle discrepancies internally.
@@ -101,37 +70,29 @@ export type SelectProps = BaseSelectProps &
  * Internal props for the custom implementation, with <div> as root element
  * onChange already exists on <div>. We override it.
  */
-export interface CustomSelectProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  options: OptionData[];
-  value: string | undefined | null;
-  onChange: (
-    // Stripping out the native <select> event signature
-    event: React.MouseEvent | React.KeyboardEvent,
-    // Value returned by <CustomOption>: we validate there
-    value: string
-  ) => void;
-  disabled?: boolean;
-  placeholder?: string;
-  width?: number;
-  testId?: string;
-  className?: string;
-  ref?: React.RefObject<HTMLDivElement | null>;
-}
+export type CustomSelectProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onChange'
+> &
+  BaseSelectProps & {
+    native?: false;
+    value?: string | number;
+    disabled?: boolean;
+    onValueChange?: (value: string, ev: React.UIEvent) => void;
+    ref?: React.RefObject<HTMLDivElement | null>;
+  };
 
 /**
  * Internal props for native implementation, with <select> as root element
  * Default props like value and onChange are passed to the <select> element automatically
  */
-export interface NativeSelectProps
-  extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  options: OptionData[];
-  placeholder?: string;
-  width?: number;
-  testId?: string;
-  className?: string;
-  ref?: React.RefObject<HTMLSelectElement | null>;
-}
+export type NativeSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> &
+  BaseSelectProps & {
+    native: true;
+    ref?: React.RefObject<HTMLSelectElement | null>;
+  };
+
+export type SelectProps = NativeSelectProps | CustomSelectProps;
 
 /**
  * Each option as displayed in the Panel of <CustomSelect>

package/lib/components/Select/__tests__/Select.test.tsx

@@ -5,9 +5,9 @@ import Select from '../Select';
 import { ThemeContextProvider } from '../../../theme/useTheme';
 
 const defaultOptions = [
-  { text: 'Option 1', value: '1' },
-  { text: 'Option 2', value: '2' },
-  { text: 'Option 3', value: '3' },
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3' },
 ];
 
 describe('Select', () => {
@@ -78,9 +78,9 @@ describe('Select', () => {
     // Options should be present
     const options = renderResult.getAllByTestId('ucl-uikit-select__option');
     expect(options.length).toBe(defaultOptions.length);
-    expect(options[0].textContent).toBe(defaultOptions[0].text);
-    expect(options[1].textContent).toBe(defaultOptions[1].text);
-    expect(options[2].textContent).toBe(defaultOptions[2].text);
+    expect(options[0].textContent).toBe(defaultOptions[0].label);
+    expect(options[1].textContent).toBe(defaultOptions[1].label);
+    expect(options[2].textContent).toBe(defaultOptions[2].label);
   });
 
   test('Cannot be used when disabled', async () => {

package/lib/components/Select/__tests__/__snapshots__/Select.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Select > Snapshot: default 1`] = `
 <div
   aria-expanded="false"
   aria-haspopup="listbox"
-  class="ucl-uikit-select css-1ur0y0n"
+  class="ucl-uikit-select css-1g3qqhm"
   data-testid="ucl-uikit-select"
   role="combobox"
   tabindex="0"

package/lib/components/Select/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Select';
-export type { SelectProps, OptionData, SelectEvent } from './Select.types';
+export type { SelectProps, OptionData } from './Select.types';

package/lib/components/Select/subcomponents/CustomSelect.tsx

@@ -5,14 +5,15 @@ import { useTheme } from '../../../theme';
 import type { CustomSelectProps } from '../Select.types';
 
 const NAME = 'ucl-uikit-select';
+export const DEFAULT_WIDTH_PX = 200;
 
 const CustomSelect = ({
   value,
   options = [],
-  onChange,
+  onValueChange,
   disabled,
   placeholder,
-  width = 325,
+  width = DEFAULT_WIDTH_PX,
   testId = NAME,
   className,
   ref,
@@ -58,7 +59,7 @@ const CustomSelect = ({
 
   // Used by <CustomOption> and passed as prop
   const handleSelect = (event: React.MouseEvent, optionValue: string) => {
-    if (onChange) onChange(event, optionValue);
+    if (onValueChange) onValueChange(optionValue, event);
     closePanel();
   };
 
@@ -96,7 +97,7 @@ const CustomSelect = ({
       }
       if (!value) {
         // Initialise at the last option if no value provided
-        onChange(event, options[options.length - 1].value);
+        onValueChange?.(options[options.length - 1].value, event);
         return;
       }
       const currentOptionIndex = options.findIndex(
@@ -104,7 +105,7 @@ const CustomSelect = ({
       );
       const previousOptionIndex =
         (currentOptionIndex - 1 + options.length) % options.length;
-      onChange(event, options[previousOptionIndex].value);
+      onValueChange?.(options[previousOptionIndex].value, event);
       return;
     }
     // Select the next option
@@ -115,26 +116,25 @@ const CustomSelect = ({
       }
       if (!value) {
         // Initialise at the first option if no value provided
-        onChange(event, options[0].value);
+        onValueChange?.(options[0].value, event);
         return;
       }
       const currentOptionIndex = options.findIndex(
         (option) => option.value === value
       );
       const nextOptionIndex = (currentOptionIndex + 1) % options.length;
-      onChange(event, options[nextOptionIndex].value);
+      onValueChange?.(options[nextOptionIndex].value, event);
       return;
     }
   };
 
   const baseStyle = css`
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: space-between;
     position: relative;
-    width: ${width}px;
     min-width: 80px;
-    max-width: 624px;
+    width: fit-content;
     height: 48px;
     box-sizing: border-box;
     padding: 0 16px;
@@ -156,6 +156,10 @@ const CustomSelect = ({
     }
   `;
 
+  const widthStyle = css`
+    width: ${width}px;
+  `;
+
   const disabledStyle = css`
     color: ${theme.color.text.disabled};
     border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
@@ -166,7 +170,13 @@ const CustomSelect = ({
     }
   `;
 
-  const style = cx(NAME, baseStyle, disabled && disabledStyle, className);
+  const style = cx(
+    NAME,
+    baseStyle,
+    !!width && widthStyle,
+    disabled && disabledStyle,
+    className
+  );
 
   return (
     <div
@@ -199,7 +209,7 @@ const CustomSelect = ({
               aria-selected={value === option.value}
             >
               {option.icon}
-              {option.text}
+              {option.label}
             </CustomOption>
           ))}
         </Panel>

package/lib/components/Select/subcomponents/NativeSelect.tsx

@@ -7,7 +7,7 @@ const NAME = 'ucl-uikit-select--native';
 
 const NativeSelect = ({
   options,
-  width = 325,
+  width,
   disabled,
   placeholder,
   testId = NAME,
@@ -22,7 +22,6 @@ const NativeSelect = ({
   const chevronDownSvg = chevronDownSvgDataUri(chevronColour);
 
   const baseStyle = css`
-    width: ${width}px;
     padding: 0 ${theme.padding.p40} 0 ${theme.padding.p16};
     height: ${theme.padding.p48};
     line-height: ${theme.font.lineHeight.h150};
@@ -43,6 +42,10 @@ const NativeSelect = ({
     background-repeat: no-repeat;
   `;
 
+  const widthStyle = css`
+    width: ${width}px;
+  `;
+
   const hoverStyle = css`
     &:hover {
       border-color: ${theme.color.neutral.grey60};
@@ -70,6 +73,7 @@ const NativeSelect = ({
   const style = cx(
     NAME,
     baseStyle,
+    !!width && widthStyle,
     !disabled && hoverStyle,
     !disabled && focusStyle,
     disabled && disabledStyle,
@@ -98,7 +102,7 @@ const NativeSelect = ({
               key={option.value}
               value={option.value}
             >
-              {option.text}
+              {option.label}
             </option>
           ))
         : null}

package/lib/components/Select/subcomponents/Panel.tsx

@@ -19,14 +19,14 @@ const Panel = (props: PanelProps) => {
     position: absolute;
     top: 46px;
     left: -1px; // -1px to align with the border of the field
-
     z-index: 10; // Required: panel must be 'above' subsquent DOM elements
-    width: 100%;
-    max-height: 200px;
+    min-width: 100%;
+    width: fit-content;
+    max-height: 300px;
     overflow-y: auto;
     overflow-x: hidden;
     box-sizing: content-box;
-    padding: 16px 0 24px 0;
+    padding: ${theme.padding.p8} 0;
     border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
     background-color: ${theme.color.neutral.white};
   `;

package/lib/components/Select/subcomponents/VisibleField.tsx

@@ -55,7 +55,7 @@ const Field = ({
         {selectedOption ? (
           <>
             {selectedOption.icon ?? null}
-            {selectedOption.text}
+            {selectedOption.label}
           </>
         ) : (
           placeholder || ''

package/lib/components/index.ts

@@ -130,3 +130,6 @@ export type { RadioProps, LabelledRadioProps } from './Radio';
 
 export { default as Datepicker } from './Datepicker';
 export type { DatepickerProps } from './Datepicker';
+
+export { default as Calendar } from './Calendar';
+export type { CalendarProps } from './Calendar';

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "uikit-react-public",
   "private": false,
-  "license": "MIT",
-  "version": "0.11.16",
+  "license": "UNLICENSED",
+  "version": "0.11.24",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "lib",
-    "README.md"
+    "lib"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,6 +24,7 @@
     "typecheck": "tsc --noemit",
     "test": "vitest",
     "test:nowatch": "vitest run",
+    "check": "npm run lint && npm run typecheck && npm run test",
     "coverage": "vitest run --coverage",
     "report": "vite ./coverage",
     "preview": "vite preview",

package/LICENSE

@@ -1,9 +0,0 @@
-MIT License
-
-Copyright 2025 UCL
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/components/Datepicker/subcomponents/CalendarGrid/CalendarGrid.d.ts

@@ -1,6 +0,0 @@
-interface CalendarGridProps {
-    date: Date | null | undefined;
-    onDatePick: (date: Date) => void;
-}
-declare const CalendarGrid: ({ date, onDatePick, }: CalendarGridProps) => import("react/jsx-runtime").JSX.Element;
-export default CalendarGrid;

package/dist/components/Datepicker/subcomponents/CalendarGrid/index.d.ts

@@ -1 +0,0 @@
-export { default } from './CalendarGrid';

package/dist/components/Datepicker/subcomponents/CalendarMenu/CalendarMenu.d.ts

@@ -1,8 +0,0 @@
-interface CalendarMenuProps {
-    date: Date | null | undefined;
-    setDate: (date: Date) => void;
-    onDatePick: () => void;
-    testId?: string;
-}
-declare const CalendarMenu: ({ date, setDate, onDatePick, testId, }: CalendarMenuProps) => import("react/jsx-runtime").JSX.Element;
-export default CalendarMenu;