Merge branch 'master' of github.com:mantinedev/mantine

docs/src/docs/dates/date-picker.mdx

@@ -107,6 +107,14 @@ function Demo() {
 `dateParser` function should always return Date object.
 If parsed date is invalid when input is blurred value will be restored to last valid value.
 
+Note that if you use the default dayjs parser, you will need to import and configure the
+`customParseFormat` dayjs plugin:
+
+```tsx
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+dayjs.extend(customParseFormat);
+```
+
 ## Exclude dates
 
 To exclude dates set `excludeDate` prop with function that receives date as an argument and returns

src/mantine-core/src/components/NumberInput/NumberInput.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef, forwardRef } from 'react';
-import { useMergedRef, assignRef, clamp } from '@mantine/hooks';
+import { useMergedRef, assignRef, clamp, useOs } from '@mantine/hooks';
 import { DefaultProps, ClassNames, useMantineDefaultProps } from '@mantine/styles';
+import { getInputMode } from '../../utils';
 import { TextInput } from '../TextInput/TextInput';
 import { InputStylesNames } from '../Input/Input';
 import { InputWrapperStylesNames } from '../InputWrapper/InputWrapper';
@@ -369,7 +370,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         size={size}
         styles={styles}
         classNames={classNames}
-        inputMode={Number.isInteger(step) && precision === 0 ? 'numeric' : 'decimal'}
+        inputMode={getInputMode(step, precision, useOs())}
         __staticSelector="NumberInput"
       />
     );

src/mantine-core/src/utils/get-input-mode/get-input-mode.test.ts

@@ -0,0 +1,14 @@
+import { getInputMode } from './get-input-mode';
+
+describe('@mantine/core/utils/get-input-mode', () => {
+  it('gets input mode', () => {
+    expect(getInputMode(0.1, 0.1, 'android')).toBe('decimal');
+    expect(getInputMode(1, 0, 'android')).toBe('numeric');
+    expect(getInputMode(-0.1, 0.1, 'android')).toBe('decimal');
+    expect(getInputMode(-1, 0, 'android')).toBe('decimal');
+    expect(getInputMode(0.1, 0.1, 'ios')).toBe('decimal');
+    expect(getInputMode(1, 0, 'ios')).toBe('numeric');
+    expect(getInputMode(-0.1, 0.1, 'ios')).toBe('text');
+    expect(getInputMode(-1, 0, 'ios')).toBe('text');
+  });
+});

src/mantine-core/src/utils/get-input-mode/get-input-mode.ts

@@ -0,0 +1,19 @@
+import { OS } from '@mantine/hooks';
+
+export const getInputMode = (
+  step: number,
+  precision: number,
+  os: OS
+): 'none' | 'text' | 'search' | 'email' | 'tel' | 'url' | 'numeric' | 'decimal' => {
+  if (Number.isInteger(step) && step >= 0 && precision === 0) return 'numeric';
+  if (!Number.isInteger(step) && step >= 0 && precision !== 0) return 'decimal';
+  if (Number.isInteger(step) && step < 0 && precision === 0) {
+    if (os === 'ios') return 'text';
+    return 'decimal';
+  }
+  if (!Number.isInteger(step) && step < 0 && precision !== 0) {
+    if (os === 'ios') return 'text';
+    return 'decimal';
+  }
+  return 'numeric';
+};

src/mantine-core/src/utils/index.ts

@@ -4,3 +4,4 @@ export { filterFalsyChildren } from './filter-falsy-children/filter-falsy-childr
 export { groupOptions, getGroupedOptions } from './group-options/group-options';
 export { getContextItemIndex } from './get-context-item-index/get-context-item-index';
 export { createUseContext } from './create-use-context/create-use-context';
+export { getInputMode } from './get-input-mode/get-input-mode';

src/mantine-demos/src/demos/packages/Badge/configurator.tsx

@@ -30,12 +30,12 @@ export const configurator: MantineDemo = {
     {
       name: 'variant',
       type: 'select',
-      initialValue: 'filled',
-      defaultValue: 'filled',
+      initialValue: 'light',
+      defaultValue: 'light',
       data: [
+        { value: 'light', label: 'Light' },
         { value: 'filled', label: 'Filled' },
         { value: 'outline', label: 'Outline' },
-        { value: 'light', label: 'Light' },
         { value: 'dot', label: 'Dot' },
       ],
     },

src/mantine-demos/src/demos/packages/Stepper/usage.tsx

@@ -14,7 +14,7 @@ function Demo() {
   return (
     <>
       <Stepper active={active} onStepClick={setActive} breakpoint="sm">
-        <Stepper.Step label="Fist step" description="Create an account">
+        <Stepper.Step label="First step" description="Create an account">
           Step 1 content: Create an account
         </Stepper.Step>
         <Stepper.Step label="Second step" description="Verify email">

src/mantine-spotlight/src/SpotlightProvider.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react';
-import { useDisclosure } from '@mantine/hooks';
+import { useDidUpdate, useDisclosure } from '@mantine/hooks';
 import { useActionsState } from './use-actions-state/use-actions-state';
 import { useSpotlightShortcuts } from './use-spotlight-shortcuts/use-spotlight-shortcuts';
 import { Spotlight, InnerSpotlightProps } from './Spotlight/Spotlight';
@@ -42,10 +42,12 @@ export function SpotlightProvider({
 }: SpotlightProviderProps) {
   const timeoutRef = useRef<number>(-1);
   const [query, setQuery] = useState('');
-  const [actions, { registerActions, removeActions, triggerAction }] = useActionsState(
-    initialActions,
-    query
-  );
+  const [actions, { registerActions, updateActions, removeActions, triggerAction }] =
+    useActionsState(initialActions, query);
+
+  useDidUpdate(() => {
+    updateActions(initialActions);
+  }, [initialActions]);
 
   const handleQueryChange = (value: string) => {
     setQuery(value);

src/mantine-spotlight/src/use-actions-state/use-actions-state.test.ts

@@ -93,6 +93,21 @@ describe('@mantine/spotlight/use-actions-state', () => {
     ]);
   });
 
+  it('update actions', () => {
+    const hook = renderHook(() => useActionsState(ACTIONS, ''));
+    act(() =>
+      hook.result.current[1].updateActions([
+        { id: 'action-4', title: 'Action 4', onTrigger },
+        { id: 'action-5', title: 'Action 5', onTrigger },
+      ])
+    );
+
+    expect(hook.result.current[0]).toStrictEqual([
+      { id: 'action-4', title: 'Action 4', onTrigger },
+      { id: 'action-5', title: 'Action 5', onTrigger },
+    ]);
+  });
+
   it('generates unique ids for newly registered actions if action.id is not provided', () => {
     const hook = renderHook(() => useActionsState(ACTIONS, ''));
     act(() =>

src/mantine-spotlight/src/use-actions-state/use-actions-state.ts

@@ -39,6 +39,9 @@ export function useActionsState(
     }
   }, [query]);
 
+  const updateActions = (payload: SpotlightAction[] | ((query: string) => SpotlightAction[])) =>
+    setActions(prepareActions(typeof payload === 'function' ? payload(query) : payload));
+
   const registerActions = (payload: SpotlightAction[]) =>
     setActions((current) => prepareActions([...current, ...payload]));
 
@@ -54,6 +57,7 @@ export function useActionsState(
     actions,
     {
       registerActions,
+      updateActions,
       removeActions,
       triggerAction,
     },