@hyphen/hyphen-components 8.0.0 → 9.0.0-beta.0

package/src/components/TextInputInset/TextInputInset.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin floating-label-minimize-md {
   opacity: 0.75;

package/src/components/TextInputInset/TextInputInset.tsx

@@ -6,7 +6,6 @@ import React, {
   FocusEvent,
   ForwardRefExoticComponent,
   ReactNode,
-  HTMLProps,
   InputHTMLAttributes,
 } from 'react';
 import classNames from 'classnames';
@@ -38,6 +37,10 @@ export interface TextInputInsetProps {
    * The text value of the input. Required since our Input is a controlled component.
    */
   value: InputHTMLAttributes<HTMLInputElement>['value'];
+  /**
+   * The input's autocomplete behavior.
+   */
+  autoComplete?: boolean | string;
   /**
    * Automatically focus the input when the page is loaded.
    */
@@ -58,7 +61,7 @@ export interface TextInputInsetProps {
   /**
    * Props passed directly to the input element of the component
    */
-  inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
+  inputProps?: Omit<BoxProps<'input'>, 'as'>;
   /**
    * The input's disabled attribute
    */
@@ -115,10 +118,6 @@ export interface TextInputInsetProps {
    * The input 'type' value. Defaults to type 'text'.
    */
   type?: InputHTMLAttributes<HTMLInputElement>['type'];
-  /**
-   * Additional props to be spread to rendered element
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
 export const TextInputInset: ForwardRefExoticComponent<TextInputInsetProps> =

package/src/components/TextareaInput/TextareaInput.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin size-sm {
   border-radius: var(

package/src/components/TextareaInput/TextareaInput.tsx

@@ -9,7 +9,7 @@ import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
 import styles from './TextareaInput.module.scss';
 
 export type TextareaInputSize = 'sm' | 'md' | 'lg';
-export interface TextareaInputProps extends Omit<BoxProps, 'as' | 'width'> {
+interface TextareaInputOwnProps {
   /**
    * The input's id attribute. Used to programmatically tie the input with its label.
    */
@@ -96,12 +96,11 @@ export interface TextareaInputProps extends Omit<BoxProps, 'as' | 'width'> {
    * The size of the text input.
    */
   size?: TextareaInputSize | ResponsiveProp<TextareaInputSize>;
-  /**
-   * Additional props to be spread to rendered element
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
+export type TextareaInputProps = TextareaInputOwnProps &
+  Omit<BoxProps<'div'>, keyof TextareaInputOwnProps | 'as' | 'width'>;
+
 export const TextareaInput: FC<TextareaInputProps> = ({
   id,
   label,

package/src/components/TextareaInputInset/TextareaInputInset.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin floating-label-minimize-md {
   opacity: 0.75;

package/src/components/TextareaInputInset/TextareaInputInset.tsx

@@ -4,8 +4,7 @@ import React, {
   FocusEvent,
   ForwardRefExoticComponent,
   ReactNode,
-  HTMLProps,
-  InputHTMLAttributes,
+  TextareaHTMLAttributes,
 } from 'react';
 import classNames from 'classnames';
 import { ResponsiveProp } from '../../types';
@@ -30,11 +29,15 @@ export interface TextareaInputInsetProps {
   /**
    * Callback function to call on change event.
    */
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
   /**
    * The text value of the input. Required since our Input is a controlled component.
    */
-  value: InputHTMLAttributes<HTMLInputElement>['value'];
+  value: TextareaHTMLAttributes<HTMLTextAreaElement>['value'];
+  /**
+   * The textarea's autocomplete behavior.
+   */
+  autoComplete?: boolean | string;
   /**
    * Automatically focus the input when the page is loaded.
    */
@@ -55,7 +58,7 @@ export interface TextareaInputInsetProps {
   /**
    * Props passed directly to the input element of the component
    */
-  inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
+  inputProps?: Omit<BoxProps<'textarea'>, 'as'>;
   /**
    * The input's disabled attribute
    */
@@ -76,11 +79,11 @@ export interface TextareaInputInsetProps {
   /**
    * Callback function to call on blur event.
    */
-  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
   /**
    * Callback function to call on focus event.
    */
-  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+  onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
   /**
    * The input placeholder attribute.
    */
@@ -109,14 +112,6 @@ export interface TextareaInputInsetProps {
    * An input helper rendered after the input field value
    */
   suffix?: ReactNode;
-  /**
-   * The input 'type' value. Defaults to type 'text'.
-   */
-  type?: InputHTMLAttributes<HTMLInputElement>['type'];
-  /**
-   * Additional props to be spread to rendered element
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
 export const TextareaInputInset: ForwardRefExoticComponent<TextareaInputInsetProps> =
@@ -144,7 +139,6 @@ export const TextareaInputInset: ForwardRefExoticComponent<TextareaInputInsetPro
         resize = 'vertical',
         rows = 5,
         size = 'md',
-        type = 'text',
       },
       ref
     ) => {
@@ -180,7 +174,6 @@ export const TextareaInputInset: ForwardRefExoticComponent<TextareaInputInsetPro
         placeholder,
         required: isRequired,
         rows,
-        type,
         value,
       };
 

package/src/components/Toast/Toast.stories.tsx

@@ -90,7 +90,11 @@ export const Column = () =>
       {
         heading: 'Type',
         dataKey: 'type',
-        render: (cell?: Cell) => <code style={codePreviewStyle}>{cell}</code>,
+        render: (cell?: Cell) => (
+          <code style={codePreviewStyle}>
+            {typeof cell === 'string' || typeof cell === 'number' ? cell : null}
+          </code>
+        ),
       },
       { heading: 'Description', dataKey: 'description' },
     ];

package/src/components/Toggle/Toggle.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 .item {
   line-height: 1;

package/src/components/ToggleGroup/ToggleGroup.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 .item {
   line-height: 1;

package/src/styles/display.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables.scss';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 .display-inherit {
   display: inherit;

package/src/styles/flex.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables.scss';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 // min-width and min-height needed because of this
 // https://stackoverflow.com/questions/36247140/why-doesnt-flex-item-shrink-past-content-size

package/src/styles/overflow.scss

@@ -1,3 +1,5 @@
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
+
 .overflow-visible { overflow: visible; }
 .overflow-hidden { overflow: hidden; }
 .overflow-clip { overflow: clip; }

package/src/styles/position.scss

@@ -1,3 +1,5 @@
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
+
 .position-absolute { position: absolute; }
 .position-fixed { position: fixed; }
 .position-relative { position: relative; }

package/src/styles/text-align.scss

@@ -1,3 +1,5 @@
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
+
 .text-align-left { text-align: left; }
 .text-align-right { text-align: right; }
 .text-align-center { text-align: center; }

package/src/styles/utilities.scss

@@ -1,13 +1,14 @@
+@use './animation';
+@use './cursor';
+@use './display';
+@use './flex';
+@use './overflow';
+@use './text-align';
+@use './white-space';
+@use './position';
+@use './transform';
+
 @import '@hyphen/hyphen-design-tokens/build/utilities/utilities.css';
-@import './animation';
-@import './cursor';
-@import './display';
-@import './flex';
-@import './overflow';
-@import './text-align';
-@import './white-space';
-@import './position';
-@import './transform';
 
 .sr-only {
   position: absolute;

package/src/styles/variables/index.scss

@@ -1,3 +1,4 @@
+@use './forms';
+
 @import '@hyphen/hyphen-design-tokens/build/css/variables.css';
 @import '@hyphen/hyphen-design-tokens/build/css/variables-root-dark.css';
-@import './forms';

package/src/styles/white-space.scss

@@ -1,3 +1,5 @@
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
+
 .ws-normal { white-space: normal; }
 .ws-nowrap { white-space: nowrap; }
 .ws-pre { white-space: pre; }

package/src/types/index.ts

@@ -44,8 +44,7 @@ export type Breakpoint = {
 
 export type DimensionSize = WidthSize | HeightSize;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type UnknownPropertiesObjType = { [key: string]: any };
+export type UnknownPropertiesObjType = Record<string, unknown>;
 
 export interface FlexProperty {
   flexGrow?: number | string;
@@ -148,7 +147,7 @@ export declare type ResponsiveProp<T> = {
 
 export type Row = UnknownPropertiesObjType;
 
-export type Cell = string | number | { [key: string]: unknown } | unknown[];
+export type Cell = Row[string];
 
 export declare type Column = {
   /**