Merge branch 'next-release'

.eslintrc

@@ -1,6 +1,6 @@
 {
   "parser": "@babel/eslint-parser",
-  "extends": ["standard", "standard-react", "standard-jsx", "prettier"],
+  "extends": ["standard", "standard-react", "standard-jsx", "prettier", "plugin:react-hooks/recommended"],
   "plugins": ["babel", "react", "promise", "prettier"],
   "env": {
     "browser": true

.github/workflows/reviewer-lottery.yaml

@@ -9,6 +9,6 @@ jobs:
     if: ${{ github.actor == 'dependabot[bot]' }}
     steps:
       - uses: actions/checkout@v3
-      - uses: uesteibar/reviewer-lottery@v2
+      - uses: uesteibar/reviewer-lottery@v3
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}

CHANGELOG.md

@@ -12,6 +12,16 @@
 
 ### Dependency updates
 
+## [22.2.0] - 2023-07-11
+
+### Added
+
+- `Toggle`: Props `labelPosition` and `fullWidth`. ([@qubis741](https://github.com/qubis741) in [#2710](https://github.com/teamleadercrm/ui/pull/2710))
+
+### Changed
+
+- `Popover`: Aligned the popover shadows with our design spec. ([@lowiebenoot](https://https://github.com/lowiebenoot) in [#2708](https://github.com/teamleadercrm/ui/pull/2708))
+
 ## [22.1.1] - 2023-06-14
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "22.1.1",
+  "version": "22.2.0",
   "author": "Teamleader <development@teamleader.eu>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"
@@ -35,7 +35,7 @@
     "@teamleader/ui-icons": "^2.1.0",
     "@teamleader/ui-illustrations": "^1.10.0",
     "@teamleader/ui-typography": "^2.0.2",
-    "@teamleader/ui-utilities": "^0.2.0",
+    "@teamleader/ui-utilities": "^0.2.2",
     "classnames": "^2.2.5",
     "draft-js": "0.11.7",
     "lodash.omit": "^4.5.0",
@@ -117,6 +117,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-standard": "^5.0.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^6.0.0",
@@ -134,7 +135,7 @@
     "postcss-import": "^15.0.0",
     "postcss-loader": "^7.0.1",
     "postcss-nested": "^6.0.0",
-    "postcss-preset-env": "8.3.1",
+    "postcss-preset-env": "9.0.0",
     "postcss-pseudoelements": "^5.0.0",
     "postcss-reporter": "^7.0.5",
     "prettier": "2.8.0",

src/components/buttonGroup/buttonGroup.stories.tsx

@@ -18,7 +18,7 @@ export const Normal: ComponentStory<typeof ButtonGroup> = (args) => (
   </ButtonGroup>
 );
 
-export const withActive = () => {
+export const WithActive = () => {
   const [value, setValue] = useState('option2');
 
   const handleChange = (value: string) => {
@@ -34,4 +34,4 @@ export const withActive = () => {
   );
 };
 
-withActive.storyName = 'With active';
+WithActive.storyName = 'With active';

src/components/datagrid/DataGrid.tsx

@@ -74,6 +74,7 @@ export const DataGrid: DatagridComponent = ({
             .reduce((accumulatedChildWidth, currentChildWidth) => accumulatedChildWidth + currentChildWidth, 0),
         )
         .reduce((maxRowWidth, currentRowWidth) => (currentRowWidth > maxRowWidth ? currentRowWidth : maxRowWidth), 0),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [rowNodes, rowNodes.size],
   );
   const childrenArray: (ReactElement | ReactElement[])[] = !Array.isArray(children) ? [children] : children;
@@ -139,6 +140,7 @@ export const DataGrid: DatagridComponent = ({
   useEffect(() => {
     setSelectedRows([]);
     handleSelectionChange([]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [comparableId]);
 
   const classNames = cx(

src/components/datepicker/DatePickerInput.tsx

@@ -143,6 +143,7 @@ function DatePickerInput<IsTypeable extends boolean = true>({
         }
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [inputValue, selectedDate],
   );
   useEffect(() => {
@@ -159,6 +160,7 @@ function DatePickerInput<IsTypeable extends boolean = true>({
     } else {
       setSelectedDate(undefined);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [preselectedDate]);
 
   const handleInputFocus = (event: React.FocusEvent<HTMLElement>) => {

src/components/datepicker/MonthPicker.tsx

@@ -69,6 +69,7 @@ const MonthPickerUnary: GenericComponent<MonthPickerProps> = ({ date, locale, lo
   const selectedMonth = useMemo(
     () =>
       date && localeUtils && { value: date.getMonth().toString(), label: localeUtils.formatMonthTitle(date, locale) },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [date],
   );
 
@@ -96,6 +97,7 @@ const MonthPickerSplit: GenericComponent<MonthPickerProps> = ({ date, locale, lo
   const [yearInput, setYearInput] = useState(date && `${date.getFullYear()}`);
   const selectedMonth = useMemo(
     () => date && localeUtils && { value: date.getMonth(), label: localeUtils.formatMonthTitle(date, locale) },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [date],
   );
   const selectedYear = useMemo(() => date && date.getFullYear(), [date]);

src/components/dialog/Dialog.tsx

@@ -65,6 +65,7 @@ const Dialog: GenericComponent<DialogProps> = ({
   }, [bodyRef]);
   useEffect(() => {
     handleScrollShadow();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [bodyRef, otherProps.active]);
 
   useResizeDetector({

src/components/dialog/useDraggable.ts

@@ -51,6 +51,7 @@ const useDraggable = ({ active = false, dragTargetRef, dragHandleRef }: UseDragg
     return function cleanup() {
       currentDragHandleRef.removeEventListener('mousedown', mouseDownHandler);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [active]);
 };
 

src/components/emailSelector/EmailSelector.tsx

@@ -76,6 +76,7 @@ const EmailSelector: GenericComponent<EmailSelectorProps> = ({
       !disableRemovalOfFirst && setEditingLabel(index);
       setSelection(selection.filter((selection, i) => i <= index || selection.email.trim() !== ''));
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [setEditingLabel, setSelection, selection],
   );
 

src/components/emailSelector/Label.tsx

@@ -173,6 +173,7 @@ const Label: GenericComponent<LabelProps> = ({
           }
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       onFinish,
       index,

src/components/input/input.stories.tsx

@@ -86,7 +86,7 @@ export default {
   },
 } as ComponentMeta<typeof Input>;
 
-export const input: ComponentStory<typeof Input> = (args) => {
+export const BasicInput: ComponentStory<typeof Input> = (args) => {
   const [value, setValue] = useState('');
 
   const handleChange = (event: ChangeEvent<HTMLElement>, value: string) => {
@@ -96,8 +96,8 @@ export const input: ComponentStory<typeof Input> = (args) => {
   return <Input value={value} onChange={handleChange} {...args} />;
 };
 
-input.storyName = 'Input';
-input.args = {
+BasicInput.storyName = 'Input';
+BasicInput.args = {
   bold: false,
   disabled: false,
   error: '',
@@ -112,15 +112,15 @@ input.args = {
   textAlignRight: false,
   width: '',
 };
-input.argTypes = {
+BasicInput.argTypes = {
   ...inputArgTypes,
   type: {
     control: 'select',
     options: types,
   },
 };
 
-export const inputConnected: ComponentStory<typeof Input> = (args) => {
+export const InputConnected: ComponentStory<typeof Input> = (args) => {
   const [value, setValue] = useState('');
 
   const handleChange = (event: ChangeEvent<HTMLElement>, value: string) => {
@@ -130,21 +130,21 @@ export const inputConnected: ComponentStory<typeof Input> = (args) => {
   return <Input value={value} onChange={handleChange} {...args} />;
 };
 
-inputConnected.storyName = 'Input with connected';
-inputConnected.args = {
-  ...input.args,
+InputConnected.storyName = 'Input with connected';
+InputConnected.args = {
+  ...BasicInput.args,
   connectedLeft,
   connectedRight,
 };
-inputConnected.argTypes = {
+InputConnected.argTypes = {
   ...inputArgTypes,
   type: {
     control: 'select',
     options: types,
   },
 };
 
-export const inputPrefixSuffix: ComponentStory<typeof Input> = (args) => {
+export const InputPrefixSuffix: ComponentStory<typeof Input> = (args) => {
   const [value, setValue] = useState('');
 
   const handleChange = (event: ChangeEvent<HTMLElement>, value: string) => {
@@ -154,21 +154,21 @@ export const inputPrefixSuffix: ComponentStory<typeof Input> = (args) => {
   return <Input value={value} onChange={handleChange} {...args} />;
 };
 
-inputPrefixSuffix.storyName = 'Input with prefix and suffix';
-inputPrefixSuffix.args = {
-  ...input.args,
+InputPrefixSuffix.storyName = 'Input with prefix and suffix';
+InputPrefixSuffix.args = {
+  ...BasicInput.args,
   prefix,
   suffix,
 };
-inputPrefixSuffix.argTypes = {
+InputPrefixSuffix.argTypes = {
   ...inputArgTypes,
   type: {
     control: 'select',
     options: types,
   },
 };
 
-export const numericInput: ComponentStory<typeof NumericInput> = (args) => {
+export const BasicNumericInput: ComponentStory<typeof NumericInput> = (args) => {
   const [value, setValue] = useState<string | number>(6);
 
   const handleChange = (event: ChangeEvent<HTMLElement>, value: string) => {
@@ -178,8 +178,8 @@ export const numericInput: ComponentStory<typeof NumericInput> = (args) => {
   return <NumericInput value={value} onChange={handleChange} {...args} />;
 };
 
-numericInput.storyName = 'NumericInput';
-numericInput.args = {
+BasicNumericInput.storyName = 'NumericInput';
+BasicNumericInput.args = {
   bold: false,
   disabled: false,
   error: '',
@@ -197,9 +197,9 @@ numericInput.args = {
   textAlignRight: false,
   width: '',
 };
-numericInput.argTypes = { ...inputArgTypes, stepper: { control: 'select', options: stepperOptions } };
+BasicNumericInput.argTypes = { ...inputArgTypes, stepper: { control: 'select', options: stepperOptions } };
 
-export const timeInput: ComponentStory<typeof TimeInput> = (args) => {
+export const BasicTimeInput: ComponentStory<typeof TimeInput> = (args) => {
   const [value, setValue] = useState('');
 
   const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -209,8 +209,8 @@ export const timeInput: ComponentStory<typeof TimeInput> = (args) => {
   return <TimeInput value={value} onChange={handleChange} {...args} />;
 };
 
-timeInput.storyName = 'TimeInput';
-timeInput.args = {
+BasicTimeInput.storyName = 'TimeInput';
+BasicTimeInput.args = {
   bold: false,
   disabled: false,
   error: '',
@@ -224,9 +224,9 @@ timeInput.args = {
   textAlighRight: false,
   width: '90px',
 };
-timeInput.argTypes = inputArgTypes;
+BasicTimeInput.argTypes = inputArgTypes;
 
-export const durationInput: ComponentStory<typeof DurationInput> = (args) => {
+export const BasicDurationInput: ComponentStory<typeof DurationInput> = (args) => {
   const [value, setValue] = useState<{ hours?: number | undefined; minutes?: number | undefined } | undefined>();
 
   const handleChange = (value?: { hours?: number; minutes?: number }) => {
@@ -236,9 +236,9 @@ export const durationInput: ComponentStory<typeof DurationInput> = (args) => {
   return <DurationInput value={value} onChange={handleChange} {...args} />;
 };
 
-durationInput.storyName = 'DurationInput';
+BasicDurationInput.storyName = 'DurationInput';
 
-export const textarea: ComponentStory<typeof Textarea> = (args) => {
+export const BasicTextarea: ComponentStory<typeof Textarea> = (args) => {
   const [value, setValue] = useState('');
 
   const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -248,8 +248,8 @@ export const textarea: ComponentStory<typeof Textarea> = (args) => {
   return <Textarea value={value} onChange={handleChange} {...args} />;
 };
 
-textarea.storyName = 'Textarea';
-textarea.args = {
+BasicTextarea.storyName = 'Textarea';
+BasicTextarea.args = {
   bold: false,
   disabled: false,
   error: '',
@@ -262,4 +262,4 @@ textarea.args = {
   size: 'medium',
   textAlignRight: false,
 };
-textarea.argTypes = inputArgTypes;
+BasicTextarea.argTypes = inputArgTypes;

src/components/menu/Menu.tsx

@@ -103,6 +103,7 @@ const Menu = <S,>({
         onHide && onHide();
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [onHide, onSelect, position],
   );
 

src/components/passport/passport.stories.tsx

@@ -71,7 +71,7 @@ const usePassportState = () => {
   return { active, anchorEl, handleButtonClick: handleSetActiveClick, handleCloseClick: handleSetInactiveClick };
 };
 
-export const contact = (args: PassportProps) => {
+export const Contact = (args: PassportProps) => {
   const { active, anchorEl, handleButtonClick, handleCloseClick } = usePassportState();
 
   return (
@@ -94,7 +94,7 @@ export const contact = (args: PassportProps) => {
   );
 };
 
-export const company = (args: PassportProps) => {
+export const Company = (args: PassportProps) => {
   const { active, anchorEl, handleButtonClick, handleCloseClick } = usePassportState();
 
   return (
@@ -117,7 +117,7 @@ export const company = (args: PassportProps) => {
   );
 };
 
-export const empty = (args: PassportProps) => {
+export const Empty = (args: PassportProps) => {
   const { active, anchorEl, handleButtonClick, handleCloseClick } = usePassportState();
 
   return (

src/components/popover/Popover.tsx

@@ -97,6 +97,7 @@ const Popover: GenericComponent<PopoverProps> = (props) => {
     initialFocusRef: undefined,
   });
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const handleResize = () => {
     if (ref.current && anchorEl) {
       setPositioning(calculatePositions(anchorEl, ref.current, direction, position, offsetCorrection));
@@ -124,6 +125,7 @@ const Popover: GenericComponent<PopoverProps> = (props) => {
     if (active) {
       handleResize();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props]);
 
   const { left, top, maxHeight } = positioning;