@magmamath/students-features 0.9.3 → 0.9.4-rc.0

package/dist/typescript/module/features/keyboard/constants/keyboardLayouts.d.ts

@@ -1,7 +1,7 @@
 import { MyScriptMathCharacterTypes } from '../../../types/characterTypes';
 export declare const KEYBOARD_LAYOUTS: {
     AlgebraAdvanced: {
-        Component: (props: import("../types/types").KeyboardLayoutProps) => import("react").JSX.Element;
+        Component: ({ onLayoutChange, ...props }: import("../types/types").KeyboardLayoutProps) => import("react").JSX.Element;
         characterTypes: MyScriptMathCharacterTypes[];
     };
     Basic: {
@@ -21,7 +21,7 @@ export declare const KEYBOARD_LAYOUTS: {
         characterTypes: MyScriptMathCharacterTypes[];
     };
     BasicUnits: {
-        Component: (props: import("../types/types").KeyboardLayoutProps) => import("react").JSX.Element;
+        Component: ({ onLayoutChange, ...props }: import("../types/types").KeyboardLayoutProps) => import("react").JSX.Element;
         characterTypes: MyScriptMathCharacterTypes[];
     };
     BasicPlusPlus: {

package/dist/typescript/module/features/keyboard/types/MathKeysGroups/basicOperators.d.ts

@@ -222,5 +222,23 @@ export declare const MATH_BASIC_OPERATORS: {
         mathliveValue: string;
         katexValue: string;
     };
+    UNDERLINED_TEN: {
+        icon: React.JSX.Element;
+        mathliveValue: string;
+        katexValue: string;
+        spreadsheetValue: string;
+    };
+    UNDERLINED_ONE: {
+        icon: React.JSX.Element;
+        mathliveValue: string;
+        katexValue: string;
+        spreadsheetValue: string;
+    };
+    UNDERLINED_U: {
+        icon: React.JSX.Element;
+        mathliveValue: string;
+        katexValue: string;
+        spreadsheetValue: string;
+    };
 };
 //# sourceMappingURL=basicOperators.d.ts.map

package/dist/typescript/module/features/keyboard/types/MathKeysGroups/basicOperators.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basicOperators.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/keyboard/types/MathKeysGroups/basicOperators.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AA6CzB,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+N/B,CAAA"}
+{"version":3,"file":"basicOperators.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/keyboard/types/MathKeysGroups/basicOperators.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAgDzB,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiP/B,CAAA"}

package/dist/typescript/module/features/keyboard/types/keyboardGroupIds.d.ts

@@ -26,6 +26,7 @@ export declare enum MathEntryKeyboardGroupId {
     TIME_US = "math-entry-time-us",
     CURRENCY_SW = "math-entry-currency-sw",
     CURRENCY_UK = "math-entry-currency-uk",
-    CURRENCY_US = "math-entry-currency-us"
+    CURRENCY_US = "math-entry-currency-us",
+    UNDERLINED = "math-entry-underlined"
 }
 //# sourceMappingURL=keyboardGroupIds.d.ts.map

package/dist/typescript/module/features/keyboard/types/keyboardGroupIds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboardGroupIds.d.ts","sourceRoot":"","sources":["../../../../../../src/features/keyboard/types/keyboardGroupIds.ts"],"names":[],"mappings":"AAAA,oBAAY,wBAAwB;IAClC,eAAe,+BAA+B;IAC9C,sBAAsB,sCAAsC;IAC5D,kBAAkB,kCAAkC;IACpD,yBAAyB,yCAAyC;IAClE,aAAa,6BAA6B;IAC1C,oBAAoB,oCAAoC;IACxD,aAAa,6BAA6B;IAC1C,iBAAiB,iCAAiC;IAClD,OAAO,uBAAuB;IAC9B,UAAU,0BAA0B;IACpC,UAAU,0BAA0B;IACpC,eAAe,+BAA+B;IAC9C,eAAe,+BAA+B;IAC9C,aAAa,6BAA6B;IAC1C,aAAa,6BAA6B;IAC1C,aAAa,6BAA6B;IAC1C,eAAe,+BAA+B;IAC9C,eAAe,+BAA+B;IAC9C,eAAe,+BAA+B;IAC9C,eAAe,+BAA+B;IAC9C,eAAe,+BAA+B;IAC9C,KAAK,qBAAqB;IAC1B,QAAQ,wBAAwB;IAChC,OAAO,uBAAuB;IAC9B,OAAO,uBAAuB;IAC9B,WAAW,2BAA2B;IACtC,WAAW,2BAA2B;IACtC,WAAW,2BAA2B;CACvC"}
+{"version":3,"file":"keyboardGroupIds.d.ts","sourceRoot":"","sources":["../../../../../../src/features/keyboard/types/keyboardGroupIds.ts"],"names":[],"mappings":"AAAA,oBAAY,wBAAwB;IAClC,eAAe,+BAA+B;IAC9C,sBAAsB,sCAAsC;IAC5D,kBAAkB,kCAAkC;IACpD,yBAAyB,yCAAyC;IAClE,aAAa,6BAA6B;IAC1C,oBAAoB,oCAAoC;IACxD,aAAa,6BAA6B;IAC1C,iBAAiB,iCAAiC;IAClD,OAAO,uBAAuB;IAC9B,UAAU,0BAA0B;IACpC,UAAU,0BAA0B;IACpC,eAAe,+BAA+B;IAC9C,eAAe,+BAA+B;IAC9C,aAAa,6BAA6B;IAC1C,aAAa,6BAA6B;IAC1C,aAAa,6BAA6B;IAC1C,eAAe,+BAA+B;IAC9C,eAAe,+BAA+B;IAC9C,eAAe,+BAA+B;IAC9C,eAAe,+BAA+B;IAC9C,eAAe,+BAA+B;IAC9C,KAAK,qBAAqB;IAC1B,QAAQ,wBAAwB;IAChC,OAAO,uBAAuB;IAC9B,OAAO,uBAAuB;IAC9B,WAAW,2BAA2B;IACtC,WAAW,2BAA2B;IACtC,WAAW,2BAA2B;IACtC,UAAU,0BAA0B;CACrC"}

package/dist/typescript/module/features/keyboard/types/types.d.ts

@@ -11,7 +11,8 @@ export declare const enum KeyboardType {
     BasicUnits = "BasicUnits",
     BasicPlusPlus = "BasicPlusPlus",
     BasicPlusPlusMobile = "BasicPlusPlusMobile",
-    Numpad = "Numpad"
+    Numpad = "Numpad",
+    Underlined = "Underlined"
 }
 export type KeyboardKey = {
     katexValue: string;
@@ -39,6 +40,7 @@ export type KeyboardGroup = {
 };
 export type KeyboardLayoutProps = {
     onKeyPress: (key: KeyboardKeyValue) => void;
+    onLayoutChange?: (isSecondaryLayout: boolean) => void;
     color?: SelectOptionColor;
     isDisabled?: boolean;
     disabledKeys?: KeyboardKey[];

package/dist/typescript/module/features/keyboard/types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/features/keyboard/types/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAEpD,0BAAkB,YAAY;IAC5B,eAAe,oBAAoB;IACnC,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,eAAe,oBAAoB;IACnC,SAAS,cAAc;IACvB,aAAa,kBAAkB;IAC/B,UAAU,eAAe;IACzB,aAAa,kBAAkB;IAC/B,mBAAmB,wBAAwB;IAC3C,MAAM,WAAW;CAClB;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,qBAAqB,CAAA;IAC5B,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,WAAW,EAAE,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,UAAU,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC3C,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI;KAC3D,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,WAAW;CACpC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/features/keyboard/types/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAEpD,0BAAkB,YAAY;IAC5B,eAAe,oBAAoB;IACnC,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,eAAe,oBAAoB;IACnC,SAAS,cAAc;IACvB,aAAa,kBAAkB;IAC/B,UAAU,eAAe;IACzB,aAAa,kBAAkB;IAC/B,mBAAmB,wBAAwB;IAC3C,MAAM,WAAW;IACjB,UAAU,eAAe;CAC1B;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,qBAAqB,CAAA;IAC5B,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,WAAW,EAAE,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,UAAU,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC3C,cAAc,CAAC,EAAE,CAAC,iBAAiB,EAAE,OAAO,KAAK,IAAI,CAAA;IACrD,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI;KAC3D,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,WAAW;CACpC,CAAA"}

package/dist/typescript/module/shared/icons/keyboard/UnderlinedOneIcon/UnderlinedOneIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from '../../icon.types';
+export declare const UnderlinedOneIcon: ({ size, color }: IconProps) => React.JSX.Element;
+//# sourceMappingURL=UnderlinedOneIcon.d.ts.map

package/dist/typescript/module/shared/icons/keyboard/UnderlinedOneIcon/UnderlinedOneIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnderlinedOneIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/keyboard/UnderlinedOneIcon/UnderlinedOneIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAG5C,eAAO,MAAM,iBAAiB,oBAA0B,SAAS,sBAYhE,CAAA"}

package/dist/typescript/module/shared/icons/keyboard/UnderlinedTenIcon/UnderlinedTenIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from '../../icon.types';
+export declare const UnderlinedTenIcon: ({ size, color }: IconProps) => React.JSX.Element;
+//# sourceMappingURL=UnderlinedTenIcon.d.ts.map

package/dist/typescript/module/shared/icons/keyboard/UnderlinedTenIcon/UnderlinedTenIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnderlinedTenIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/keyboard/UnderlinedTenIcon/UnderlinedTenIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAG5C,eAAO,MAAM,iBAAiB,oBAA0B,SAAS,sBAehE,CAAA"}

package/dist/typescript/module/shared/icons/keyboard/UnderlinedUIcon/UnderlinedUIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from '../../icon.types';
+export declare const UnderlinedUIcon: ({ size, color }: IconProps) => React.JSX.Element;
+//# sourceMappingURL=UnderlinedUIcon.d.ts.map

package/dist/typescript/module/shared/icons/keyboard/UnderlinedUIcon/UnderlinedUIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnderlinedUIcon.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/icons/keyboard/UnderlinedUIcon/UnderlinedUIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAG5C,eAAO,MAAM,eAAe,oBAA0B,SAAS,sBAe9D,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.9.3",
+  "version": "0.9.4-rc.0",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",

package/src/features/keyboard/components/AlgebraLayout/AlgebraLayout.tsx

@@ -9,11 +9,11 @@ import { SelectedLayout } from './types'
 import { getKeyboardGroup } from '../../helpers'
 import { getSelectOptions } from './helpers'
 
-export const AlgebraLayout = (props: KeyboardLayoutProps) => {
+export const AlgebraLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps) => {
   const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
   const t = useText()
   const { width } = useWindowDimensions()
-  const selectOptions = getSelectOptions(selectedLayout, setSelectedLayout)
+  const selectOptions = getSelectOptions({ selectedLayout, setSelectedLayout, onLayoutChange })
   const isDesktop = width > MOBILE_LAYOUT_WIDTH && !IS_MOBILE
   const locale = t('locale') as Locale
 

package/src/features/keyboard/components/AlgebraLayout/helpers.tsx

@@ -10,10 +10,17 @@ type LayoutOption = {
   onPressIn: () => void
 }
 
-export function getSelectOptions(
-  selectedLayout: SelectedLayout,
-  setSelectedLayout: (layout: SelectedLayout) => void,
-): LayoutOption[] {
+type GetSelectOptionsProps = {
+  selectedLayout: SelectedLayout
+  setSelectedLayout: (layout: SelectedLayout) => void
+  onLayoutChange?: (isSecondaryLayout: boolean) => void
+}
+
+export function getSelectOptions({
+  selectedLayout,
+  setSelectedLayout,
+  onLayoutChange,
+}: GetSelectOptionsProps): LayoutOption[] {
   return [
     {
       key: SelectedLayout.BASIC,
@@ -23,7 +30,10 @@ export function getSelectOptions(
           size={22}
         />
       ),
-      onPressIn: () => setSelectedLayout(SelectedLayout.BASIC),
+      onPressIn: () => {
+        setSelectedLayout(SelectedLayout.BASIC)
+        onLayoutChange?.(false)
+      },
     },
     {
       key: SelectedLayout.ALGEBRA,
@@ -33,7 +43,10 @@ export function getSelectOptions(
           size={25}
         />
       ),
-      onPressIn: () => setSelectedLayout(SelectedLayout.ALGEBRA),
+      onPressIn: () => {
+        setSelectedLayout(SelectedLayout.ALGEBRA)
+        onLayoutChange?.(true)
+      },
     },
   ]
 }

package/src/features/keyboard/components/Keyboard.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useRef } from 'react'
 import { Animated, StyleProp, StyleSheet, useWindowDimensions, ViewStyle } from 'react-native'
 import { COLORS, IS_MOBILE, SelectOptionColor, SHADOWS } from '@magmamath/react-native-ui'
-import { getLayoutByCharType } from '../constants/keyboardLayouts'
 import { KeyboardKey, KeyboardKeyValue } from '../types/types'
 import { Numpad } from './Numpad/Numpad'
 import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
@@ -11,6 +10,7 @@ import {
   slideInAnimationSettings,
   slideOutAnimationSettings,
 } from './constants'
+import { MainLayout } from './MainLayout'
 
 type KeyboardProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
@@ -19,15 +19,15 @@ type KeyboardProps = {
   color?: SelectOptionColor
   isVisible?: boolean
   isDisabled?: boolean
+  showUnderlinedKeys?: boolean
   disabledKeys?: KeyboardKey[]
 }
 
 export const Keyboard = ({ style, characterType, isVisible = true, ...props }: KeyboardProps) => {
   const slideAnim = useRef(new Animated.Value(isVisible ? 0 : KEYBOARD_SLIDE_DISTANCE)).current
+
   const { width } = useWindowDimensions()
   const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
-
-  const Layout = useMemo(() => getLayoutByCharType(characterType), [characterType])
   const mobileStyles = useMemo(
     () => getLayoutConfigStyles(characterType, isMobile),
     [characterType, isMobile],
@@ -57,7 +57,7 @@ export const Keyboard = ({ style, characterType, isVisible = true, ...props }: K
         },
       ]}
     >
-      <Layout {...props} />
+      <MainLayout {...props} />
       <Numpad {...props} style={mobileStyles} />
     </Animated.View>
   )

package/src/features/keyboard/components/MainLayout.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Animated, StyleProp, StyleSheet, useWindowDimensions, View, ViewStyle } from 'react-native'
+import { SelectOptionColor, IS_MOBILE } from '@magmamath/react-native-ui'
+import { getLayoutByCharType } from '../constants/keyboardLayouts'
+import { KeyboardKey, KeyboardKeyValue } from '../types/types'
+import { UnderlinedLayout } from './UnderlinedLayout/UnderlinedLayout'
+import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
+
+type LayoutProps = {
+  onKeyPress: (key: KeyboardKeyValue) => void
+  characterType?: number
+  style?: StyleProp<ViewStyle>
+  color?: SelectOptionColor
+  isVisible?: boolean
+  isDisabled?: boolean
+  showUnderlinedKeys?: boolean
+  disabledKeys?: KeyboardKey[]
+}
+
+export const MainLayout = ({ style, characterType, showUnderlinedKeys, ...props }: LayoutProps) => {
+  const [isUnderlinedVisible, setIsUnderlinedVisible] = useState(showUnderlinedKeys)
+  const [isSecondaryLayoutSelected, setIsSecondaryLayoutSelected] = useState(false)
+
+  const fadeAnim = useRef(new Animated.Value(showUnderlinedKeys ? 1 : 0)).current
+  const fadeRef = useRef<Animated.CompositeAnimation | null>(null)
+  const { width } = useWindowDimensions()
+  const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
+
+  const Layout = useMemo(() => getLayoutByCharType(characterType), [characterType])
+
+  useEffect(() => {
+    if (showUnderlinedKeys) {
+      setIsUnderlinedVisible(true)
+      fadeRef.current = Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 250,
+        useNativeDriver: true,
+      })
+      fadeRef.current.start()
+      return
+    }
+    fadeRef.current = Animated.timing(fadeAnim, {
+      toValue: 0,
+      duration: 250,
+      useNativeDriver: true,
+    })
+    fadeRef.current.start(() => setIsUnderlinedVisible(false))
+
+    return () => {
+      fadeRef.current?.stop()
+    }
+  }, [showUnderlinedKeys])
+
+  return (
+    <View style={styles.container}>
+      <Layout {...props} onLayoutChange={setIsSecondaryLayoutSelected} />
+      {isUnderlinedVisible && !isSecondaryLayoutSelected && !isMobile && (
+        <Animated.View style={{ opacity: fadeAnim }}>
+          <UnderlinedLayout {...props} />
+        </Animated.View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+  },
+})

package/src/features/keyboard/components/UnderlinedLayout/UnderlinedLayout.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { KeysList } from '../KeysList/KeysList'
+import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { Locale, useText } from '../../../../shared/translation'
+import { getKeyboardGroup } from '../../helpers'
+
+export const UnderlinedLayout = (props: KeyboardLayoutProps) => {
+  const t = useText()
+  const keysGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.Underlined)
+
+  return <KeysList keys={keysGroup.keys} numOfRows={keysGroup.keys.length} {...props} />
+}

package/src/features/keyboard/components/UnderlinedLayout/keyboardGroups.ts

@@ -0,0 +1,12 @@
+import { KeyboardGroup } from '../../types/types'
+import { MathEntryKeyboardGroupId } from '../../types/keyboardGroupIds'
+import { MATH_BASIC_OPERATORS } from '../../types/MathKeysGroups/basicOperators'
+
+export const MATH_ENTRY_UNDERLINED_KEYBOARD_GROUP: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.UNDERLINED,
+  keys: [
+    MATH_BASIC_OPERATORS.UNDERLINED_TEN,
+    MATH_BASIC_OPERATORS.UNDERLINED_ONE,
+    MATH_BASIC_OPERATORS.UNDERLINED_U,
+  ],
+}

package/src/features/keyboard/components/UnitsLayout/UnitsLayout.tsx

@@ -12,7 +12,7 @@ import { KeyboardUnitsGroupType, SelectedLayout } from './types'
 import { getSelectOptions } from './helpers'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 
-export const UnitsLayout = (props: KeyboardLayoutProps) => {
+export const UnitsLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps) => {
   const { width } = useWindowDimensions()
   const t = useText()
   const locale = t('locale') as Locale
@@ -26,6 +26,7 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
     activeTabKey: activeTab.key as KeyboardUnitsGroupType,
     selectedLayout,
     setSelectedLayout,
+    onLayoutChange,
   })
 
   return (

package/src/features/keyboard/components/UnitsLayout/helpers.tsx

@@ -8,12 +8,14 @@ type UseLayoutSelectOptionsProps = {
   activeTabKey: KeyboardUnitsGroupType
   selectedLayout: SelectedLayout
   setSelectedLayout: (layout: SelectedLayout) => void
+  onLayoutChange?: (isSecondaryLayout: boolean) => void
 }
 
 export const getSelectOptions = ({
   activeTabKey,
   selectedLayout,
   setSelectedLayout,
+  onLayoutChange,
 }: UseLayoutSelectOptionsProps) => {
   {
     const SelectedIcon = UNITS_KEYBOARD_GROUPS.get(activeTabKey)?.icon || RulerIcon
@@ -27,7 +29,10 @@ export const getSelectOptions = ({
             size={22}
           />
         ),
-        onPressIn: () => setSelectedLayout(SelectedLayout.ALGEBRA),
+        onPressIn: () => {
+          setSelectedLayout(SelectedLayout.ALGEBRA)
+          onLayoutChange?.(false)
+        },
       },
       {
         key: SelectedLayout.UNITS,
@@ -37,7 +42,10 @@ export const getSelectOptions = ({
             size={16}
           />
         ),
-        onPressIn: () => setSelectedLayout(SelectedLayout.UNITS),
+        onPressIn: () => {
+          setSelectedLayout(SelectedLayout.UNITS)
+          onLayoutChange?.(true)
+        },
       },
     ]
   }

package/src/features/keyboard/constants/keyboardGroupsByLocale.ts

@@ -39,6 +39,7 @@ import {
 import { Locale } from '../../../shared/translation'
 import { MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP } from '../components/AlgebraLayout/keyboardGroups'
 import { KeyboardUnitsGroupType, UnitKeyboardGroups } from '../components/UnitsLayout/types'
+import { MATH_ENTRY_UNDERLINED_KEYBOARD_GROUP } from '../components/UnderlinedLayout/keyboardGroups'
 
 function createKeyboardLocale(overrides: Partial<Record<KeyboardType, KeyboardGroup>>) {
   const base: Record<KeyboardType, KeyboardGroup> = {
@@ -55,6 +56,7 @@ function createKeyboardLocale(overrides: Partial<Record<KeyboardType, KeyboardGr
     [KeyboardType.BasicTime]: MATH_TIME_US_KEYBOARD_GROUP,
     [KeyboardType.AlgebraAdvanced]: MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP,
     [KeyboardType.Numpad]: MATH_ENTRY_NUMBERS_US_KEYBOARD_GROUP,
+    [KeyboardType.Underlined]: MATH_ENTRY_UNDERLINED_KEYBOARD_GROUP,
   }
   return { ...base, ...overrides }
 }

package/src/features/keyboard/types/MathKeysGroups/basicOperators.tsx

@@ -42,6 +42,9 @@ import { EqualsIcon } from '../../../../shared/icons/keyboard/EqualsIcon/EqualsI
 import { AbsoluteValueIcon } from '../../../../shared/icons/keyboard/AbsoluteValueIcon/AbsoluteValueIcon'
 import { IntervalIcon } from '../../../../shared/icons/keyboard/IntervalIcon/IntervalIcon'
 import { createMathKeysGroup } from './helpers'
+import { UnderlinedTenIcon } from '../../../../shared/icons/keyboard/UnderlinedTenIcon/UnderlinedTenIcon'
+import { UnderlinedOneIcon } from '../../../../shared/icons/keyboard/UnderlinedOneIcon/UnderlinedOneIcon'
+import { UnderlinedUIcon } from '../../../../shared/icons/keyboard/UnderlinedUIcon/UnderlinedUIcon'
 
 export const MATH_BASIC_OPERATORS = createMathKeysGroup({
   ADDITION: {
@@ -266,4 +269,22 @@ export const MATH_BASIC_OPERATORS = createMathKeysGroup({
     mathliveValue: '$\\left[, \\right]$',
     katexValue: '[ , ]',
   },
+  UNDERLINED_TEN: {
+    icon: <UnderlinedTenIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\underline{10}',
+    katexValue: '10̲',
+    spreadsheetValue: 'TEN',
+  },
+  UNDERLINED_ONE: {
+    icon: <UnderlinedOneIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\underline{1}',
+    katexValue: '1̲',
+    spreadsheetValue: 'ONE_FOOT_NOTE',
+  },
+  UNDERLINED_U: {
+    icon: <UnderlinedUIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\underline{u}',
+    katexValue: 'U̲',
+    spreadsheetValue: 'FRACTION',
+  },
 })

package/src/features/keyboard/types/keyboardGroupIds.ts

@@ -27,4 +27,5 @@ export enum MathEntryKeyboardGroupId {
   CURRENCY_SW = 'math-entry-currency-sw',
   CURRENCY_UK = 'math-entry-currency-uk',
   CURRENCY_US = 'math-entry-currency-us',
+  UNDERLINED = 'math-entry-underlined',
 }

package/src/features/keyboard/types/types.ts

@@ -13,6 +13,7 @@ export const enum KeyboardType {
   BasicPlusPlus = 'BasicPlusPlus',
   BasicPlusPlusMobile = 'BasicPlusPlusMobile',
   Numpad = 'Numpad',
+  Underlined = 'Underlined',
 }
 
 export type KeyboardKey = {
@@ -44,6 +45,7 @@ export type KeyboardGroup = {
 
 export type KeyboardLayoutProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
+  onLayoutChange?: (isSecondaryLayout: boolean) => void
   color?: SelectOptionColor
   isDisabled?: boolean
   disabledKeys?: KeyboardKey[]

package/src/shared/icons/keyboard/UnderlinedOneIcon/UnderlinedOneIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+export const UnderlinedOneIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 17 17" fill="none">
+      <Path d="M7.93176 12.1924V3.83738H6.46176V1.84238H10.0918V12.1924H7.93176Z" fill={color} />
+      <Path
+        d="M2.15088 15.1924H15.1509"
+        stroke={color}
+        stroke-width="1.2"
+        stroke-linecap="square"
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/keyboard/UnderlinedTenIcon/UnderlinedTenIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+export const UnderlinedTenIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 17 17" fill="none">
+      <Path
+        d="M3.25158 12.1924V3.83738H1.78158V1.84238H5.41158V12.1924H3.25158ZM11.4998 1.69238C14.0348 1.69238 15.5198 3.52238 15.5198 6.80738V7.16738C15.5198 10.4524 14.0348 12.2824 11.4998 12.2824C8.96482 12.2824 7.47982 10.4524 7.47982 7.16738V6.80738C7.47982 3.52238 8.96482 1.69238 11.4998 1.69238ZM9.65482 7.16738C9.65482 9.38738 10.2698 10.3024 11.4998 10.3024C12.7298 10.3024 13.3448 9.38738 13.3448 7.16738V6.80738C13.3448 4.58738 12.7298 3.67238 11.4998 3.67238C10.2698 3.67238 9.65482 4.58738 9.65482 6.80738V7.16738Z"
+        fill={color}
+      />
+      <path
+        d="M2.15088 15.1924H15.1509"
+        stroke={color}
+        stroke-width="1.2"
+        stroke-linecap="square"
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/keyboard/UnderlinedUIcon/UnderlinedUIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { IconProps } from '../../icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+export const UnderlinedUIcon = ({ size = 20, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 17 17" fill="none">
+      <Path
+        d="M10.6573 1.69238H12.8473V8.42738C12.8473 10.7824 11.4523 12.4174 8.6473 12.4174C5.8273 12.4174 4.4473 10.7824 4.4473 8.42738V1.69238H6.6223V8.26238C6.6223 9.56738 7.4023 10.3474 8.6473 10.3474C9.8923 10.3474 10.6573 9.56738 10.6573 8.26238V1.69238Z"
+        fill={color}
+      />
+      <Path
+        d="M2.15088 15.1924H15.1509"
+        stroke={color}
+        stroke-width="1.2"
+        stroke-linecap="square"
+      />
+    </Svg>
+  )
+}