@hyphen/hyphen-components 7.3.1 → 7.3.3

package/src/components/Modal/Modal.tsx

@@ -170,6 +170,8 @@ export const ModalBaseComponent: React.FC<ModalProps> = forwardRef<
   }
 );
 
+ModalBaseComponent.displayName = 'Modal';
+
 export interface ModalStatic {
   Body: typeof ModalBody;
   Header: typeof ModalHeader;

package/src/components/Modal/components/ModalFooter/ModalFooter.test.tsx

@@ -59,10 +59,10 @@ describe('ModalFooter', () => {
   });
 
   test('applies custom styles', () => {
-    const customStyle = { backgroundColor: 'red' };
+    const customStyle = { backgroundColor: '#cacaca' };
     const { container } = render(
       <ModalFooter style={customStyle}>test modal</ModalFooter>
     );
-    expect(container.firstChild).toHaveStyle('background-color: red');
+    expect(container.firstChild).toHaveStyle('background-color: #cacaca');
   });
 });

package/src/components/Popover/Popover.tsx

@@ -26,6 +26,8 @@ const PopoverContent = forwardRef<
   );
 });
 
+PopoverContent.displayName = 'PopoverContent';
+
 export {
   Popover,
   PopoverTrigger,

package/src/components/RadioGroup/RadioInput/RadioInput.tsx

@@ -146,3 +146,5 @@ export const RadioInput = React.forwardRef<HTMLDivElement, RadioInputProps>(
     );
   }
 );
+
+RadioInput.displayName = 'RadioInput';

package/src/components/SelectInput/SelectInput.stories.tsx

@@ -25,7 +25,7 @@ export const Default = () => {
       <SelectInput
         id="singleSelectWithLabel"
         label="Label"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         value={value}
@@ -46,7 +46,7 @@ export const PreSelected = () => {
       <SelectInput
         id="preSelected"
         label="Label"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         value={value}
@@ -68,7 +68,7 @@ export const HelpText = () => {
         id="helpText"
         label="Flavor"
         helpText="Choose your favorite flavor"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         value={value}
@@ -90,7 +90,7 @@ export const Placeholder = () => {
       <SelectInput
         id="customPlaceholder"
         label="Label"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         value={value}
@@ -112,7 +112,7 @@ export const HiddenLabel = () => {
       <SelectInput
         id="labelHidden"
         label="My label is hidden"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         value={value}
@@ -134,7 +134,7 @@ export const CreatableSelect = () => {
         id="creatableSelect"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isCreatable
@@ -182,7 +182,7 @@ export const AsyncSelect = () => {
         id="asyncSelect"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={loadOptions}
         defaultOptions
@@ -233,7 +233,7 @@ export const AsyncCreatableSelect = () => {
         id="asyncCreateSelect"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={loadOptions}
         isCreatable
@@ -258,7 +258,7 @@ export const MultiSelect = () => {
         id="multiSelect"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isMulti
@@ -280,7 +280,7 @@ export const MultiSelectAndPreSelected = () => {
         id="preSelectMultiSelect"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isMulti
@@ -302,7 +302,7 @@ export const MultiSelectCreatable = () => {
         id="creatableMultiSelect"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isMulti
@@ -325,7 +325,7 @@ export const Autofocus = () => {
         id="autoFocus"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         autoFocus
@@ -347,7 +347,7 @@ export const Required = () => {
         id="required"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isRequired
@@ -369,7 +369,7 @@ export const Disabled = () => {
         id="disabled"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isDisabled
@@ -392,7 +392,7 @@ export const Clearable = () => {
         label="Label"
         value={value}
         name="myClearableSelect"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isClearable
@@ -414,7 +414,7 @@ export const Error = () => {
         id="error"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isRequired
@@ -439,7 +439,7 @@ export const Sizes = () => {
       <SelectInput
         id="smallSelect"
         label="Small"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         value={value}
@@ -448,7 +448,7 @@ export const Sizes = () => {
       <SelectInput
         id="mediumSelect"
         label="Medium"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue1(event.target.value)}
         options={options}
         value={value1}
@@ -457,7 +457,7 @@ export const Sizes = () => {
       <SelectInput
         id="largeSelect"
         label="Large"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue2(event.target.value)}
         options={options}
         value={value2}
@@ -466,7 +466,7 @@ export const Sizes = () => {
       <SelectInput
         id="responsiveSelect"
         label="Responsive"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue3(event.target.value)}
         options={options}
         value={value3}
@@ -488,7 +488,7 @@ export const WithPortal = () => {
       id="portal"
       label="Flavors"
       value={value}
-      // @ts-ignore - TS is not recognizing the value as a valid option
+      // @ts-expect-error - TS is not recognizing the value as a valid option
       onChange={(event) => setValue(event.target.value)}
       options={options}
       menuPortalTarget={document.body}
@@ -509,7 +509,7 @@ export const CustomClasses = () => {
         id="customClasses"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         className="background-color-primary"

package/src/components/SelectInput/SelectInput.tsx

@@ -18,17 +18,21 @@ import { InputValidationMessage } from '../InputValidationMessage/InputValidatio
 import styles from './SelectInput.module.scss';
 import { GroupBase } from 'react-select/dist/declarations/src/types';
 
-type SelectOptions = any;
-type SelectGroupOptions = GroupBase<SelectOptions>;
+type SelectOption = {
+  value: string;
+  label: ReactNode;
+  [key: string]: unknown;
+};
+type SelectGroupOptions = GroupBase<SelectOption>;
 export type SelectInputOptions = OptionsOrGroups<
-  SelectOptions,
+  SelectOption,
   SelectGroupOptions
 >;
 
 export type SimulatedEventPayloadType = {
   target: {
     name: string;
-    value: OnChangeValue<SelectInputOptions, boolean>;
+    value: OnChangeValue<SelectOption, boolean>;
   };
 };
 
@@ -141,7 +145,9 @@ export interface SelectInputProps {
   [x: string]: any; // eslint-disable-line
 }
 
-type AsyncOptions = (inputValue: string) => Promise<SelectInputOptions>;
+type AsyncOptions = (
+  inputValue: string
+) => Promise<OptionsOrGroups<SelectOption, SelectGroupOptions>>;
 type AsyncSelectInputProps = SelectInputProps & {
   /**
    * Load the input asynchronously.
@@ -202,7 +208,7 @@ export function SelectInput(props: SelectInputProps): JSX.Element {
     ...restProps
   } = props;
 
-  const handleChange = (values: OnChangeValue<SelectInputOptions, boolean>) => {
+  const handleChange = (values: OnChangeValue<SelectOption, boolean>) => {
     const simulatedEventPayloadType: SimulatedEventPayloadType = {
       target: {
         name,
@@ -245,9 +251,7 @@ export function SelectInput(props: SelectInputProps): JSX.Element {
   };
 
   const ClearIndicator = (
-    props: ClearIndicatorProps<
-      OptionsOrGroups<SelectOptions, SelectGroupOptions>
-    >
+    props: ClearIndicatorProps<SelectOption, boolean, SelectGroupOptions>
   ) => (
     <components.ClearIndicator {...props}>
       <Icon name="remove" />

package/src/components/SelectInputInset/SelectInputInset.tsx

@@ -233,3 +233,5 @@ export const SelectInputInset: ForwardRefExoticComponent<SelectInputInsetProps>
       );
     }
   );
+
+SelectInputInset.displayName = 'SelectInputInset';

package/src/components/Sidebar/Sidebar.module.scss

@@ -4,6 +4,10 @@
   border-right: 2px solid transparent;
 }
 
+.rail:focus:not(:focus-visible) {
+  outline: none;
+}
+
 .rail:hover {
   border-right: 2px solid var(--color-border-sidebar-rail-hover);
 }

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -340,12 +340,16 @@ interface NavItem {
   }[];
 }
 
+type Team = {
+  name: string;
+};
+
 const NavHeader = ({
   activeTeam,
   setActiveTeam,
 }: {
-  activeTeam: any;
-  setActiveTeam: (team: any) => void;
+  activeTeam: Team;
+  setActiveTeam: (team: Team) => void;
 }) => {
   const { state, isMobile } = useSidebar();
 
@@ -645,8 +649,8 @@ const OrgSwitcher = ({
   activeTeam,
   setActiveTeam,
 }: {
-  activeTeam: any;
-  setActiveTeam: (team: any) => void;
+  activeTeam: Team;
+  setActiveTeam: (team: Team) => void;
 }) => {
   const { state } = useSidebar();
 

package/src/components/Sidebar/Sidebar.test.tsx

@@ -139,10 +139,13 @@ describe('Sidebar', () => {
   });
 
   test.each([
-    ['input', <input aria-label="input-field" />],
-    ['textarea', <textarea aria-label="textarea-field" />],
-    ['select', <select aria-label="select-field" />],
-    ['contenteditable', <div aria-label="editable-field" contentEditable />],
+    ['input', <input aria-label="input-field" key="input" />],
+    ['textarea', <textarea aria-label="textarea-field" key="textarea" />],
+    ['select', <select aria-label="select-field" key="select" />],
+    [
+      'contenteditable',
+      <div aria-label="editable-field" contentEditable key="contenteditable" />,
+    ],
   ])('ignores keyboard shortcuts for %s elements', (label, field) => {
     render(
       <SidebarProvider>

package/src/components/Sidebar/Sidebar.tsx

@@ -22,6 +22,7 @@ import {
 } from '../Tooltip/Tooltip';
 
 const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_RIGHT_WIDTH = '24rem';
 const SIDEBAR_WIDTH_ICON = '44px';
 const SIDEBAR_KEYBOARD_SHORTCUT_LEFT = '[';
 const SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = ']';
@@ -197,8 +198,12 @@ const useSidebarSideState = ({
 
   const toggleSidebar = useCallback(() => {
     lastToggledSideRef.current = side;
-    isMobile ? setOpenMobile((value) => !value) : setOpen((value) => !value);
-  }, [isMobile, setOpen, side, lastToggledSideRef]);
+    if (isMobile) {
+      setOpenMobile((value) => !value);
+    } else {
+      setOpen((value) => !value);
+    }
+  }, [isMobile, setOpen, side, setOpenMobile, lastToggledSideRef]);
 
   const state = open ? 'expanded' : 'collapsed';
 
@@ -343,7 +348,7 @@ const SidebarProvider = forwardRef<
                   } as React.CSSProperties
                 }
                 className={classNames(
-                  'display-flex w-100 background-color-secondary',
+                  'display-flex w-100 background-color-secondary overflow-hidden',
                   className
                 )}
                 ref={ref}
@@ -372,6 +377,7 @@ const Sidebar = React.forwardRef<
     ref
   ) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar(side);
+    const sidebarWidth = side === 'right' ? SIDEBAR_RIGHT_WIDTH : SIDEBAR_WIDTH;
 
     if (isMobile) {
       return (
@@ -397,9 +403,12 @@ const Sidebar = React.forwardRef<
               'group display-flex h-100 font-size-xs flex-direction-column background-color-secondary font-color-base',
               className
             )}
-            style={{
-              width: 'var(--sidebar-width)',
-            }}
+            style={
+              {
+                '--sidebar-width': sidebarWidth,
+                width: 'var(--sidebar-width)',
+              } as React.CSSProperties
+            }
             ref={ref}
             {...props}
           >
@@ -419,9 +428,9 @@ const Sidebar = React.forwardRef<
           fontSize="sm"
           position="relative"
           style={
-            side === 'right' && collapsible === 'offcanvas'
-              ? { overflowX: 'hidden' }
-              : undefined
+            {
+              '--sidebar-width': sidebarWidth,
+            } as React.CSSProperties
           }
           data-state={state}
           data-collapsible={collapsible}
@@ -635,12 +644,11 @@ const SidebarMenuButton = React.forwardRef<
   React.ComponentProps<'button'> & {
     asChild?: boolean;
     isActive?: boolean;
-    icon?: IconName;
     tooltip?: string | React.ComponentProps<typeof TooltipContent>;
   }
 >(
   (
-    { asChild = false, isActive = false, icon, tooltip, className, ...props },
+    { asChild = false, isActive = false, tooltip, className, ...props },
     ref
   ) => {
     const Comp = asChild ? Slot : 'button';
@@ -846,9 +854,10 @@ const SidebarRail = React.forwardRef<
         top: '20px',
         bottom: '20px',
         right: side === 'left' ? '-14px' : undefined,
-        left: side === 'right' ? '-14px' : undefined,
+        left: side === 'right' ? '-18px' : undefined,
         width: '10px',
       }}
+      type="button"
       {...props}
     >
       <Box