@os-design/core 1.0.280 → 1.0.281

package/src/InputDateUnstyled/utils/ensureCaretVisible.ts

@@ -0,0 +1,37 @@
+let span: HTMLSpanElement | undefined;
+
+const getHiddenSpan = () => {
+  if (!span) {
+    span = document.createElement('span');
+    span.style.position = 'absolute';
+    span.style.top = '-9999px';
+    span.style.left = '-9999px';
+    span.style.visibility = 'hidden';
+    span.style.whiteSpace = 'pre'; // To take into account spaces at the end
+    document.body.appendChild(span);
+  }
+  return span;
+};
+
+const getCaretX = (input: HTMLInputElement) => {
+  const span = getHiddenSpan();
+  const computedInputStyle = window.getComputedStyle(input);
+  span.style.font = computedInputStyle.font;
+  span.style.padding = computedInputStyle.padding;
+  span.textContent = input.value.slice(0, input.selectionStart || 0);
+  return span.clientWidth;
+};
+
+const caretMargin = 15;
+
+const ensureCaretVisible = (input: HTMLInputElement) => {
+  const caretX = getCaretX(input);
+  const offsetX = input.clientWidth / 2; // 20
+  if (caretX > input.clientWidth + input.scrollLeft - caretMargin) {
+    input.scrollLeft = caretX - input.clientWidth + offsetX;
+  } else if (caretX < input.scrollLeft + caretMargin) {
+    input.scrollLeft = caretX - offsetX;
+  }
+};
+
+export default ensureCaretVisible;

package/src/InputDateUnstyled/utils/eraseSelectedTokens.ts

@@ -0,0 +1,38 @@
+import replaceSubstring from './replaceSubstring.js';
+import { nextToken } from './token.js';
+
+interface EraseSelectedTokensProps {
+  value: string;
+  start: number;
+  end: number;
+  format: string;
+  tokens: readonly string[];
+}
+
+const eraseSelectedTokens = (props: EraseSelectedTokensProps) => {
+  const { value, start, end, format, tokens } = props;
+
+  if (end > start) {
+    let substr = value.slice(start, end);
+
+    let i = start;
+    while (i < end) {
+      const next = nextToken(i, format, tokens);
+      if (!next) break;
+
+      if (next.pos < end) {
+        const substr2 = '_'.repeat(next.end - next.pos);
+        substr = replaceSubstring(substr, next.pos - start, substr2);
+        i = next.end;
+      } else {
+        i = next.pos;
+      }
+    }
+
+    return replaceSubstring(value, start, substr);
+  }
+
+  return value;
+};
+
+export default eraseSelectedTokens;

package/src/InputDateUnstyled/utils/replaceSubstring.ts

@@ -0,0 +1,10 @@
+const replaceSubstring = (str: string, index: number, substr: string) => {
+  if (index < 0) {
+    throw new Error('Negative index');
+  }
+  const left = str.slice(0, index);
+  const right = str.slice(index + substr.length);
+  return `${left}${substr}${right}`;
+};
+
+export default replaceSubstring;

package/src/InputDateUnstyled/utils/same.ts

@@ -0,0 +1,15 @@
+import type { Day } from './stringToDay.js';
+import type { Time } from './stringToTime.js';
+
+export const sameDay = (day1: Day, day2: Day) =>
+  day1.year === day2.year && day1.month === day2.month && day1.day === day2.day;
+
+export const sameTime = (time1: Time, time2: Time) =>
+  time1.hour === time2.hour && time1.minute === time2.minute;
+
+export const sameDate = (date1: Date, date2: Date) =>
+  date1.getFullYear() === date2.getFullYear() &&
+  date1.getMonth() === date2.getMonth() &&
+  date1.getDate() === date2.getDate() &&
+  date1.getHours() === date2.getHours() &&
+  date1.getMinutes() === date2.getMinutes();

package/src/InputDateUnstyled/utils/stringToDay.ts

@@ -0,0 +1,69 @@
+import convertToFullYear from './convertToFullYear.js';
+import daysInMonth from './daysInMonth.js';
+
+export interface Day {
+  year: number;
+  month: number;
+  day: number;
+}
+
+export interface DayErrorPayload extends Day {
+  maxDay: number;
+}
+
+export type OnDayError = (data: DayErrorPayload) => void;
+
+const stringToDay = (
+  str: string,
+  format: string,
+  onDayError: OnDayError = () => {}
+): Day | null => {
+  const fullYearIndex = format.indexOf('YYYY');
+  const yearIndex = format.indexOf('YY');
+  const monthIndex = format.indexOf('MM');
+  const dayIndex = format.indexOf('DD');
+
+  let year: number | null = null;
+  let month: number | null = null;
+  let day: number | null = null;
+
+  if (fullYearIndex >= 0) {
+    const fullYearStr = str.slice(fullYearIndex, fullYearIndex + 4);
+    if (/^[0-9]{4}$/.test(fullYearStr)) {
+      year = Number(fullYearStr);
+    }
+  } else if (yearIndex >= 0) {
+    const yearStr = str.slice(yearIndex, yearIndex + 2);
+    if (/^[0-9]{2}$/.test(yearStr)) {
+      year = convertToFullYear(Number(yearStr), new Date().getFullYear());
+    }
+  }
+  if (monthIndex >= 0) {
+    const monthStr = str.slice(monthIndex, monthIndex + 2);
+    if (/^0[1-9]|1[0-2]$/.test(monthStr)) {
+      month = Number(monthStr) - 1;
+    }
+  }
+  if (dayIndex >= 0) {
+    const dayStr = str.slice(dayIndex, dayIndex + 2);
+    if (/^0[1-9]|[1-2][0-9]|3[0-1]$/.test(dayStr)) {
+      day = Number(dayStr);
+    }
+  }
+
+  if (year === null || month === null || day === null) {
+    return null;
+  }
+
+  const maxDay = daysInMonth({ month, year });
+  const res = { year, month, day };
+
+  if (day > maxDay) {
+    onDayError({ ...res, maxDay });
+    return null;
+  }
+
+  return res;
+};
+
+export default stringToDay;

package/src/InputDateUnstyled/utils/stringToTime.ts

@@ -0,0 +1,48 @@
+import { convertTo24hours } from './convertHours.js';
+
+export interface Time {
+  hour: number;
+  minute: number;
+}
+
+const stringToTime = (str: string, format: string): Time | null => {
+  const hour12Index = format.indexOf('hh');
+  const hour24Index = format.indexOf('HH');
+  const minuteIndex = format.indexOf('mm');
+  const meridiemIndex = format.indexOf('aa');
+
+  let hour: number | null = null;
+  let minute: number | null = null;
+
+  if (hour12Index >= 0) {
+    const hourStr = str.slice(hour12Index, hour12Index + 2);
+    if (/^0[1-9]|1[0-2]$/.test(hourStr)) {
+      let meridiem: 'am' | 'pm' = 'am';
+      if (meridiemIndex >= 0) {
+        const meridiemStr = str.slice(meridiemIndex, meridiemIndex + 2);
+        meridiem = meridiemStr === 'pm' ? 'pm' : 'am';
+      }
+      hour = convertTo24hours(Number(hourStr), meridiem);
+    }
+  }
+  if (hour24Index >= 0) {
+    const hour24Str = str.slice(hour24Index, hour24Index + 2);
+    if (/^[0-1][0-9]|2[0-3]$/.test(hour24Str)) {
+      hour = Number(hour24Str);
+    }
+  }
+  if (minuteIndex >= 0) {
+    const minuteStr = str.slice(minuteIndex, minuteIndex + 2);
+    if (/^[0-5][0-9]$/.test(minuteStr)) {
+      minute = Number(minuteStr);
+    }
+  }
+
+  if (hour === null || minute === null) {
+    return null;
+  }
+
+  return { hour, minute };
+};
+
+export default stringToTime;

package/src/InputDateUnstyled/utils/token.ts

@@ -0,0 +1,102 @@
+export interface FoundToken<T> {
+  token: T;
+  start: number;
+  end: number;
+  pos: number;
+}
+
+export const nextToken = <T extends string>(
+  startPos: number,
+  format: string,
+  tokens: readonly T[]
+): FoundToken<T> | null => {
+  // Check if it's not the middle of the token
+  if (startPos > 0) {
+    for (let i = 0; i < tokens.length; i++) {
+      if (tokens[i].length >= 2) {
+        for (
+          let j = Math.max(1, tokens[i].length - (format.length - startPos));
+          j <= Math.min(tokens[i].length - 1, startPos);
+          j++
+        ) {
+          if (
+            format.slice(startPos - j, startPos - j + tokens[i].length) ===
+            tokens[i]
+          ) {
+            return {
+              token: tokens[i],
+              start: startPos - j,
+              end: startPos - j + tokens[i].length,
+              pos: startPos,
+            };
+          }
+        }
+      }
+    }
+  }
+  // Find the next token
+  for (let i = startPos; i < format.length; i++) {
+    for (let j = 0; j < tokens.length; j++) {
+      if (
+        format.length - i >= tokens[j].length &&
+        format.slice(i, i + tokens[j].length) === tokens[j]
+      ) {
+        return {
+          token: tokens[j],
+          start: i,
+          end: i + tokens[j].length,
+          pos: i,
+        };
+      }
+    }
+  }
+  return null;
+};
+
+export const prevToken = <T extends string>(
+  startPos: number,
+  format: string,
+  tokens: readonly T[]
+): FoundToken<T> | null => {
+  // Check if it's not the middle of the token
+  if (startPos < format.length) {
+    for (let i = 0; i < tokens.length; i++) {
+      if (tokens[i].length >= 2) {
+        for (
+          let j = Math.max(1, tokens[i].length - startPos);
+          j <= Math.min(tokens[i].length - 1, format.length - startPos);
+          j++
+        ) {
+          if (
+            format.slice(startPos - (tokens[i].length - j), startPos + j) ===
+            tokens[i]
+          ) {
+            return {
+              token: tokens[i],
+              start: startPos - (tokens[i].length - j),
+              end: startPos + j,
+              pos: startPos,
+            };
+          }
+        }
+      }
+    }
+  }
+  // Find the previous token
+  for (let i = startPos; i > 0; i--) {
+    for (let j = 0; j < tokens.length; j++) {
+      if (
+        i >= tokens[j].length &&
+        format.slice(i - tokens[j].length, i) === tokens[j]
+      ) {
+        return {
+          token: tokens[j],
+          start: i - tokens[j].length,
+          end: i,
+          pos: i,
+        };
+      }
+    }
+  }
+  return null;
+};

package/src/Link/index.tsx

@@ -62,7 +62,7 @@ export const underlineHoverStyles = (p) =>
       }
 
       &:hover::after,
-      &:focus::after {
+      &:focus-visible::after {
         width: 100%;
         opacity: 1;
       }
@@ -87,7 +87,7 @@ const disabledStyles = (p) =>
 
     &,
     &:active,
-    &:focus {
+    &:focus-visible {
       color: ${clr(p.theme.inputColorPlaceholder)};
     }
   `;
@@ -111,7 +111,7 @@ const StyledLink = styled(
 
   &,
   &:active,
-  &:focus {
+  &:focus-visible {
     color: ${(p) => clr(p.theme.linkColor)};
   }
 
@@ -125,16 +125,7 @@ const StyledLink = styled(
  * The link component to navigate between pages.
  */
 const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  (
-    {
-      underline = 'hover',
-      disabled = false,
-      as,
-      onMouseDown = () => {},
-      ...rest
-    },
-    ref
-  ) => {
+  ({ underline = 'hover', disabled = false, as, ...rest }, ref) => {
     if (disabled) {
       return (
         <DisabledWrapper>
@@ -143,18 +134,7 @@ const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       );
     }
 
-    return (
-      <StyledLink
-        underline={underline}
-        as={as}
-        onMouseDown={(e) => {
-          onMouseDown(e);
-          e.preventDefault();
-        }}
-        {...rest}
-        ref={ref}
-      />
-    );
+    return <StyledLink underline={underline} as={as} {...rest} ref={ref} />;
   }
 );
 

package/src/LinkButton/index.tsx

@@ -58,10 +58,7 @@ const StyledButton = styled(
  * The link component that is rendered as a button.
  */
 const LinkButton = forwardRef<HTMLButtonElement, LinkButtonProps>(
-  (
-    { underline = 'hover', disabled = false, onMouseDown = () => {}, ...rest },
-    ref
-  ) => {
+  ({ underline = 'hover', disabled = false, ...rest }, ref) => {
     if (disabled) {
       return (
         <DisabledWrapper>
@@ -70,17 +67,7 @@ const LinkButton = forwardRef<HTMLButtonElement, LinkButtonProps>(
       );
     }
 
-    return (
-      <StyledButton
-        underline={underline}
-        onMouseDown={(e) => {
-          onMouseDown(e);
-          e.preventDefault();
-        }}
-        {...rest}
-        ref={ref}
-      />
-    );
+    return <StyledButton underline={underline} {...rest} ref={ref} />;
   }
 );
 

package/src/LogoLink/index.tsx

@@ -52,7 +52,7 @@ const StyledLogoLink = styled(
 
   @media (hover: hover) {
     &:hover,
-    &:focus {
+    &:focus-visible {
       opacity: 0.7;
     }
   }
@@ -66,7 +66,7 @@ const StyledLogoLink = styled(
  * Logo with a link.
  */
 const LogoLink = forwardRef<HTMLAnchorElement, LogoLinkProps>(
-  ({ src, as, onMouseDown = () => {}, ...rest }, ref) => {
+  ({ src, as, ...rest }, ref) => {
     const { activeTheme } = useTheme();
     const ariaLabel = rest['aria-label'] || 'Logo';
 
@@ -75,10 +75,6 @@ const LogoLink = forwardRef<HTMLAnchorElement, LogoLinkProps>(
         dark={activeTheme === 'dark'}
         aria-label={ariaLabel}
         as={as}
-        onMouseDown={(e) => {
-          onMouseDown(e);
-          e.preventDefault();
-        }}
         {...rest}
         ref={ref}
       >

package/src/Modal/index.tsx

@@ -73,6 +73,11 @@ export interface ModalProps extends JsxDivProps, WithSize {
    * @default undefined
    */
   locale?: ModalLocale;
+  /**
+   * Whether the focus is locked.
+   * @default undefined
+   */
+  lockedFocus?: boolean;
   /**
    * Specifies a callback that will be called when a user clicks the mask or
    * the close button. The callback should set the visible state to false.
@@ -289,6 +294,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
       footer,
       visible = false,
       locale = defaultLocale,
+      lockedFocus = true,
       onClose = () => {},
       onOk,
       size,
@@ -358,6 +364,65 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
 
     if (!mounted) return null;
 
+    const content = (
+      <CloseModalContext.Provider value={onClose}>
+        <Content
+          visible={visible}
+          size={size}
+          tabIndex={-1}
+          onKeyDown={contentKeyDownHandler}
+          onPointerDown={stopPointerHandler}
+          onPointerUp={stopPointerHandler}
+          role='dialog'
+          aria-modal
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={bodyId}
+          ref={contentRef}
+        >
+          {header === undefined ? (
+            <ThemeOverrider
+              overrides={(t) => ({
+                buttonPaddingHorizontal: t.modalCloseButtonPaddingHorizontal,
+              })}
+            >
+              <Header>
+                <Title id={titleId}>{title}</Title>
+                <Button
+                  type='ghost'
+                  wide='never'
+                  onClick={onClose}
+                  aria-label={locale.closeLabel}
+                >
+                  <Close />
+                </Button>
+              </Header>
+            </ThemeOverrider>
+          ) : (
+            header
+          )}
+
+          <Body id={bodyId} {...rest} ref={ref}>
+            {children}
+          </Body>
+
+          {footer === undefined ? (
+            <Footer>
+              <Button
+                danger={okDanger}
+                loading={okLoading}
+                disabled={okDisabled}
+                onClick={onOk}
+              >
+                {okText}
+              </Button>
+            </Footer>
+          ) : (
+            footer
+          )}
+        </Content>
+      </CloseModalContext.Provider>
+    );
+
     return (
       <Portal>
         <ModalMask visible={visible} />
@@ -366,66 +431,12 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
           onPointerUp={pointerUpHandler}
           onClick={(e) => e.stopPropagation()}
         >
-          {/* @ts-expect-error FocusLock has problems with types */}
-          <FocusLock autoFocus={false}>
-            <CloseModalContext.Provider value={onClose}>
-              <Content
-                visible={visible}
-                size={size}
-                tabIndex={-1}
-                onKeyDown={contentKeyDownHandler}
-                onPointerDown={stopPointerHandler}
-                onPointerUp={stopPointerHandler}
-                role='dialog'
-                aria-modal
-                aria-labelledby={ariaLabelledBy}
-                aria-describedby={bodyId}
-                ref={contentRef}
-              >
-                {header === undefined ? (
-                  <ThemeOverrider
-                    overrides={(t) => ({
-                      buttonPaddingHorizontal:
-                        t.modalCloseButtonPaddingHorizontal,
-                    })}
-                  >
-                    <Header>
-                      <Title id={titleId}>{title}</Title>
-                      <Button
-                        type='ghost'
-                        wide='never'
-                        onClick={onClose}
-                        aria-label={locale.closeLabel}
-                      >
-                        <Close />
-                      </Button>
-                    </Header>
-                  </ThemeOverrider>
-                ) : (
-                  header
-                )}
-
-                <Body id={bodyId} {...rest} ref={ref}>
-                  {children}
-                </Body>
-
-                {footer === undefined ? (
-                  <Footer>
-                    <Button
-                      danger={okDanger}
-                      loading={okLoading}
-                      disabled={okDisabled}
-                      onClick={onOk}
-                    >
-                      {okText}
-                    </Button>
-                  </Footer>
-                ) : (
-                  footer
-                )}
-              </Content>
-            </CloseModalContext.Provider>
-          </FocusLock>
+          {lockedFocus ? (
+            // @ts-expect-error FocusLock has problems with types
+            <FocusLock autoFocus={false}>{content}</FocusLock>
+          ) : (
+            content
+          )}
         </Container>
       </Portal>
     );

package/src/NavigationItem/index.tsx

@@ -50,7 +50,7 @@ const NavigationLink = styled(
   color: ${(p) => clr(p.theme.navigationItemColorText)};
   @media (hover: hover) {
     &:hover,
-    &:focus {
+    &:focus-visible {
       background-color: ${(p) => clr(p.theme.navigationItemColorBgHover)};
     }
   }
@@ -101,25 +101,11 @@ const Title = styled.span`
  * The item of the navigation.
  */
 const NavigationItem = forwardRef<HTMLAnchorElement, NavigationItemProps>(
-  (
-    {
-      icon,
-      currentPage = false,
-      as,
-      onMouseDown = () => {},
-      children,
-      ...rest
-    },
-    ref
-  ) => (
+  ({ icon, currentPage = false, as, children, ...rest }, ref) => (
     <div role='listitem'>
       <NavigationLink
         currentPage={currentPage}
         as={as}
-        onMouseDown={(e) => {
-          onMouseDown(e);
-          e.preventDefault();
-        }}
         aria-current={currentPage ? 'page' : undefined}
         {...rest}
         ref={ref}

package/src/Select/index.tsx

@@ -232,7 +232,7 @@ const selectContainerUnborderedHoverStyles = (p) =>
   css`
     @media (hover: hover) {
       &:hover,
-      &:focus {
+      &:focus-visible {
         background-color: ${clr(p.theme.buttonGhostColorBgHover)};
       }
     }
@@ -385,7 +385,7 @@ const DeleteButton = styled.button`
 
   @media (hover: hover) {
     &:hover,
-    &:focus {
+    &:focus-visible {
       color: ${(p) => clr(p.theme.selectToggleDeleteButtonColorIconHover)};
     }
   }
@@ -884,7 +884,6 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
               e.preventDefault();
             }
           }}
-          onMouseDown={(e) => e.preventDefault()}
           onBlur={blurHandler}
           role='combobox'
           aria-disabled={disabled}