@instructure/ui-number-input 11.6.0 → 11.6.1-snapshot-129

package/src/NumberInput/v2/props.ts

@@ -0,0 +1,240 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import type { InputHTMLAttributes } from 'react'
+
+import type {
+  OtherHTMLAttributes,
+  PickPropsWithExceptions
+} from '@instructure/shared-types'
+import type {
+  ComponentStyle,
+  Spacing,
+  ThemeOverrideValue
+} from '@instructure/emotion'
+import type {
+  FormFieldOwnProps,
+  FormMessage
+} from '@instructure/ui-form-field/latest'
+import type {
+  InteractionType,
+  WithDeterministicIdProps
+} from '@instructure/ui-react-utils'
+import { Renderable } from '@instructure/shared-types'
+
+type NumberInputOwnProps = {
+  /**
+   * The form field label.
+   */
+  renderLabel: Renderable
+
+  /**
+   * The id of the input. One is generated if not supplied.
+   */
+  id?: string
+
+  /**
+   * Specifies if interaction with the input is enabled, disabled, or readonly.
+   * When "disabled", the input changes visibly to indicate that it cannot
+   * receive user interactions. When "readonly" the input still cannot receive
+   * user interactions but it keeps the same styles as if it were enabled.
+   */
+  interaction?: InteractionType
+
+  /**
+   * Array of objects with shape: `{
+   *   text: ReactNode,
+   *   type: One of: ['newError', 'error', 'hint', 'success', 'screenreader-only']
+   * }`
+   */
+  messages?: FormMessage[]
+
+  /**
+   * HTML placeholder text to display when the input has no value. This
+   * should be hint text, not a label replacement.
+   * Not visible when `disabled` or `readonly`
+   */
+  placeholder?: string
+
+  /**
+   * Whether or not the text input is required.
+   */
+  isRequired?: boolean
+
+  /**
+   * Whether or not to display the up/down arrow buttons.
+   * They are not visible when `readonly`
+   */
+  showArrows?: boolean
+
+  /**
+   * The size of the input.
+   */
+  size?: 'medium' | 'large'
+
+  /**
+   * The value of the input (should be accompanied by an `onChange` prop).
+   */
+  value?: string | number
+
+  /**
+   * The width of the input.
+   */
+  width?: string
+
+  /**
+   * The display of the root element.
+   */
+  display?: 'inline-block' | 'block'
+
+  /**
+   * A function that provides a reference to the actual input element.
+   */
+  inputRef?: (element: HTMLInputElement | null) => void
+
+  /**
+   * Callback fired when input receives focus.
+   */
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void
+
+  /**
+   * Callback fired when the input loses focus.
+   */
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void
+
+  /**
+   * Callback executed when the input fires a change event.
+   * @param {Object} event - the event object
+   * @param {string} value - the string value of the input
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void
+
+  /**
+   * Called when the down arrow button is clicked, or the down arrow key is
+   * pressed.
+   */
+  onDecrement?: (
+    event:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+  ) => void
+
+  /**
+   * Called when the up arrow button is clicked, or the up arrow key is
+   * pressed.
+   */
+  onIncrement?: (
+    event:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+  ) => void
+
+  /**
+   * Callback fired when a key is pressed.
+   */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void
+
+  /**
+   * The inputMode attribute of the underlying `input` element can be one of ['numeric', 'decimal', 'tel']
+   */
+  inputMode?: 'numeric' | 'decimal' | 'tel'
+
+  /**
+   * The text alignment of the input.
+   */
+  textAlign?: 'start' | 'center'
+
+  /**
+   * sets the input type to string and allows string as value
+   */
+  allowStringValue?: boolean
+
+  /**
+   * Sets the icons to be rendered for increase and decrease buttons
+   */
+  renderIcons?: {
+    increase: Renderable
+    decrease: Renderable
+  }
+  /**
+   * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
+   */
+  margin?: Spacing
+}
+
+type PropKeys = keyof NumberInputOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type NumberInputProps =
+  // pickProps passes through FormField.allowedProps, except the ones set manually
+  PickPropsWithExceptions<
+    FormFieldOwnProps,
+    'label' | 'inline' | 'id' | 'elementRef'
+  > &
+    NumberInputOwnProps & {
+      themeOverride?: ThemeOverrideValue
+    } & OtherHTMLAttributes<
+      NumberInputOwnProps,
+      InputHTMLAttributes<NumberInputOwnProps & Element>
+    > &
+    WithDeterministicIdProps
+
+type NumberInputStyle = ComponentStyle<
+  | 'numberInput'
+  | 'arrowContainer'
+  | 'arrow'
+  | 'inputWidth'
+  | 'inputContainer'
+  | 'input'
+>
+const allowedProps: AllowedPropKeys = [
+  'renderLabel',
+  'id',
+  'interaction',
+  'messages',
+  'placeholder',
+  'isRequired',
+  'showArrows',
+  'size',
+  'value',
+  'width',
+  'display',
+  'inputRef',
+  'onFocus',
+  'onBlur',
+  'onChange',
+  'onDecrement',
+  'onIncrement',
+  'onKeyDown',
+  'inputMode',
+  'textAlign',
+  'allowStringValue',
+  'renderIcons',
+  'margin'
+]
+
+export type { NumberInputProps, NumberInputStyle }
+export { allowedProps }

package/src/NumberInput/v2/styles.ts

@@ -0,0 +1,219 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { NumberInputProps, NumberInputStyle } from './props'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import { calcFocusOutlineStyles } from '@instructure/emotion'
+
+type StyleParams = {
+  size: NumberInputProps['size']
+  textAlign: NumberInputProps['textAlign']
+  interaction: NumberInputProps['interaction']
+  invalid: boolean
+  success: boolean
+}
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['TextInput'],
+  params: StyleParams,
+  sharedTokens: SharedTokens
+): NumberInputStyle => {
+  const { size, textAlign, interaction, success, invalid } = params
+
+  const containerInteractionStates = {
+    ...(interaction === 'enabled' && {
+      backgroundColor: componentTheme.backgroundColor,
+      borderColor: componentTheme.borderColor,
+      ...(success && {
+        borderColor: componentTheme.successBorderColor
+      }),
+      ...(invalid && {
+        borderColor: componentTheme.errorBorderColor
+      }),
+      '&:hover': {
+        backgroundColor: componentTheme.backgroundHoverColor,
+        borderColor: componentTheme.borderHoverColor,
+        ...(success && {
+          borderColor: componentTheme.successBorderColor
+        }),
+        ...(invalid && {
+          borderColor: componentTheme.errorBorderColor
+        })
+      }
+    }),
+    ...(interaction === 'readonly' && {
+      backgroundColor: componentTheme.backgroundReadonlyColor,
+      borderColor: componentTheme.borderReadonlyColor
+    }),
+    ...(interaction === 'disabled' && {
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+      backgroundColor: componentTheme.backgroundDisabledColor,
+      borderColor: componentTheme.borderDisabledColor
+    })
+  }
+  const arrowInteractionStates = {
+    ...(interaction === 'enabled' && {
+      backgroundColor: componentTheme.arrowsBackgroundColor,
+      borderColor: componentTheme.arrowsBorderColor,
+      '&:hover': {
+        backgroundColor: componentTheme.arrowsBackgroundHoverColor,
+        borderColor: componentTheme.arrowsBorderHoverColor
+      },
+      '&:active': {
+        backgroundColor: componentTheme.arrowsBackgroundActiveColor,
+        borderColor: componentTheme.arrowsBorderActiveColor
+      }
+    }),
+    ...(interaction === 'disabled' && {
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+      backgroundColor: componentTheme.arrowsBackgroundDisabledColor,
+      borderColor: componentTheme.arrowsBorderDisabledColor
+    })
+    // arrow buttons are not rendered in the `readOnly` state
+  }
+  const inputInteractionStates = {
+    ...(interaction === 'enabled' && {
+      color: componentTheme.textColor,
+      '&::placeholder': {
+        color: componentTheme.placeholderColor
+      },
+      '&:hover::placeholder': {
+        color: componentTheme.placeholderHoverColor
+      }
+      // placeholder is not rendered in the `readOnly` and `disabled` state
+    }),
+    ...(interaction === 'readonly' && {
+      color: componentTheme.textReadonlyColor
+    }),
+    ...(interaction === 'disabled' && {
+      color: componentTheme.textDisabledColor
+    })
+  }
+
+  const inputStyle = {
+    all: 'initial',
+    textAlign: textAlign,
+    direction: 'inherit',
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    appearance: 'none',
+    lineHeight: 1,
+    margin: '0',
+    flex: 1,
+    minWidth: '0.0625rem',
+    boxSizing: 'border-box',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    ...(size === 'medium'
+      ? {
+          padding: componentTheme.paddingHorizontalMd
+        }
+      : {
+          padding: componentTheme.paddingHorizontalLg
+        }),
+    ...inputInteractionStates
+  }
+
+  const focusOutline = calcFocusOutlineStyles(sharedTokens.focusOutline, {
+    focusWithin: true
+  })
+  return {
+    numberInput: {
+      label: 'numberInput'
+    },
+    arrowContainer: {
+      label: 'numberInput_arrowContainer',
+      flex: `0 0 ${componentTheme.arrowsContainerWidth}`,
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    arrow: {
+      label: 'numberInput_arrow',
+      cursor: 'pointer',
+      userSelect: 'none',
+      textAlign: 'center',
+      flex: 1,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderTop: 'none',
+      borderInlineEnd: 'none',
+      borderInlineStart: `${componentTheme.borderWidth} solid`,
+      borderBottom: `${componentTheme.borderWidth} solid`,
+      '&:last-child': { borderBottom: 'none' },
+      ...arrowInteractionStates
+    },
+    inputWidth: {
+      label: 'numberInput_inputWidth',
+      display: 'block',
+      position: 'relative'
+    },
+    inputContainer: {
+      label: 'numberInput_inputContainer',
+      display: 'flex',
+      margin: '0',
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      border: `${componentTheme.borderWidth} solid`,
+      borderRadius: componentTheme.borderRadius,
+      ...containerInteractionStates,
+      ...focusOutline,
+      ...(size === 'medium'
+        ? {
+            fontSize: componentTheme.fontSizeMd,
+            height: componentTheme.heightMd
+          }
+        : {
+            fontSize: componentTheme.fontSizeLg,
+            height: componentTheme.heightLg
+          })
+    },
+    input: {
+      label: 'numberInput_input',
+      ...inputStyle,
+      '&:is(input)[type]': inputStyle,
+      '&:-webkit-any(input)[type]': inputStyle,
+      '&::-webkit-inner-spin-button': { display: 'none' },
+      '&::-webkit-outer-spin-button': { display: 'none' },
+      '&:is(input)[type="number"]': { MozAppearance: 'textfield' }
+    }
+  }
+}
+
+export default generateStyle

package/src/exports/a.ts

@@ -0,0 +1,25 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export { NumberInput } from '../NumberInput/v1'
+export type { NumberInputProps } from '../NumberInput/v1/props'

package/src/exports/b.ts

@@ -0,0 +1,25 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export { NumberInput } from '../NumberInput/v2'
+export type { NumberInputProps } from '../NumberInput/v2/props'