@ainias42/react-bootstrap-mobile 0.2.0 → 0.2.2

package/src/Components/FormElements/Controller/MultipleFileInputController.ts

@@ -0,0 +1,4 @@
+import { MultipleFileInput } from "../Input/FileInput/MultipleFileInput";
+import { withHookController } from "./withHookController";
+
+export const MultipleFileInputController = withHookController(MultipleFileInput, 'onChangeFiles');

package/src/Components/FormElements/Controller/PasswordInputController.ts

@@ -0,0 +1,4 @@
+import { withHookController } from "./withHookController";
+import { PasswordInput } from "../Input/PasswordInput/PasswordInput";
+
+export const PasswordInputController = withHookController(PasswordInput, "onChangeText");

package/src/Components/FormElements/Controller/SelectController.ts

@@ -0,0 +1,4 @@
+import { withHookController } from "./withHookController";
+import { Select } from "../Select/Select";
+
+export const SelectController = withHookController(Select, "onChangeValue");

package/src/Components/FormElements/Controller/SendFormContext.ts

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+
+export const SendFormContext = createContext<(() => void)|undefined>(undefined);
+
+export function useSendFormContext(){
+    return useContext(SendFormContext);
+}

package/src/Components/FormElements/Controller/TextareaController.ts

@@ -0,0 +1,4 @@
+import { withHookController } from "./withHookController";
+import { Textarea } from "../Textarea/Textarea";
+
+export const TextareaController = withHookController(Textarea, 'onChangeText');

package/src/Components/FormElements/Controller/withHookController.tsx

@@ -0,0 +1,53 @@
+import React, { ComponentProps, ComponentRef, ComponentType, ForwardedRef, useCallback } from "react";
+import { FieldPath, FieldValues, useController, useFormContext } from "react-hook-form";
+import { useComposedRef } from "../../Hooks/useComposedRef";
+import { withForwardRef } from "../../../helper/withForwardRef";
+
+export function withHookController<C extends ComponentType<any>, OnChangeProp extends keyof ComponentProps<C>>(Comp: C, onChangeProp: OnChangeProp, emptyValue: any = null) {
+    type RefType = ComponentRef<C>;
+    type OldProps = ComponentProps<C>;
+
+    type Props<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>> = Omit<
+        OldProps,
+        'name' | 'onBlur' | OnChangeProp | 'ref' | 'value'
+    > & { name: Name };
+
+    function WithHookComponent<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>>(
+        {name, ...otherProps}: Props<Values, Name>,
+        ref?: ForwardedRef<RefType>
+    ) {
+        const children = "children" in otherProps ? otherProps.children : undefined;
+
+        const {field, fieldState} = useController({name});
+        const {clearErrors} = useFormContext();
+        const composedRef = useComposedRef(ref, field.ref);
+        const errorMessage = fieldState.error?.message;
+
+        const internalOnChange = useCallback(
+            (arg: any) => {
+                clearErrors(name);
+                field.onChange(arg);
+            },
+            [clearErrors, field, name]
+        );
+        const onChangeProps = {
+            [onChangeProp]: internalOnChange
+        }
+
+        return (
+            // @ts-expect-error Because of the prop spreading, typescript is really confused here
+            <Comp
+                {...otherProps}
+                {...field}
+                {...onChangeProps}
+                value={field.value ?? emptyValue}
+                ref={composedRef}
+                error={errorMessage}
+            >
+                {children}
+            </Comp>
+        );
+    }
+
+    return withForwardRef(WithHookComponent);
+}

package/src/Components/FormElements/Input/FileInput/MultipleFileInput.tsx

@@ -3,7 +3,6 @@ import {RbmComponentProps} from '../../../RbmComponentProps';
 import {Override} from '../../../../TypeHelpers';
 import {ChangeEventHandler, DragEvent, InputHTMLAttributes, useCallback, useRef} from 'react';
 import {Listener, useListenerWithExtractedProps} from '../../../Hooks/useListener';
-
 import styles from './fileInput.scss';
 import {withMemo} from '../../../../helper/withMemo';
 import classNames from 'classnames';
@@ -17,6 +16,7 @@ import {Image} from '../../../Image/Image';
 import {Clickable} from '../../../Clickable/Clickable';
 import {Inline} from '../../../Layout/Inline';
 import {FileType} from "./FileType";
+import { InlineBlock } from "../../../Layout/InlineBlock";
 
 
 export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<
@@ -31,6 +31,7 @@ export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<
             onError?: (error: string) => void;
             allowOverride?: boolean
             showDeleteButton?: boolean
+            error?: string,
         } & Listener<'onChangeFiles', OnChangeFilesData, FileType[]>
     >
 >;
@@ -46,6 +47,7 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                                                                                         allowOverride = maxFiles === 1,
                                                                                         onError,
                                                                                         showDeleteButton = true,
+    error,
                                                                                         ...otherProps
                                                                                     }: MultipleFileInputProps<OnChangeData>) {
         // Variables
@@ -275,6 +277,7 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                         </Clickable>
                     </Grow>
                 </Flex>
+                {error && <InlineBlock className={styles.error}><Text>{error}</Text></InlineBlock>}
             </span>
         );
     },

package/src/Components/FormElements/Input/FileInput/fileInput.scss

@@ -79,11 +79,10 @@
 
   .value {
     display: none;
-    //position: absolute;
-    //top: 0;
-    //left: 0;
-    //right: 0;
-    //bottom: 0;
-    //opacity: 0;
+  }
+
+  .error {
+    font-size: 0.7rem;
+    --text-primary-default-color: var(--text-error)
   }
 }

package/src/Components/FormElements/Input/Input.tsx

@@ -5,7 +5,7 @@ import {
     KeyboardEvent,
     MutableRefObject,
     useCallback, useEffect,
-    useMemo,
+    useMemo, useRef,
 } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
@@ -16,6 +16,9 @@ import styles from './input.scss';
 import classNames from 'classnames';
 import { useComposedRef } from '../../Hooks/useComposedRef';
 import { useOnChangeDone } from '../hooks/useOnChangeDone';
+import { InlineBlock } from "../../Layout/InlineBlock";
+import { Text } from "../../Text/Text";
+import { useSendFormContext } from "../Controller/SendFormContext";
 
 export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponentProps<
     Override<
@@ -25,6 +28,7 @@ export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponen
             inline?: boolean;
             onChangeText?: (newText: string) => void;
             onEnter?: (newText: string) => void;
+            error?: string,
         } & OptionalListener<'onChange', OnChangeData> &
         OptionalListener<'onBlur', OnBlurData> &
         OptionalListener<'onChangeDone', OnChangeDoneData>
@@ -39,7 +43,9 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
             onKeyDown,
             inline = false,
             value,
+            error,
             onChangeText,
+            onEnter,
             ...otherProps
         }: InputProps<OnChangeData, OnBlurData, OnChangeDoneData>,
         ref: MutableRefObject<HTMLInputElement> | null
@@ -77,9 +83,13 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
             return "";
         }, [value, otherProps.max, otherProps.min, otherProps.type]);
         // Refs
-        const innerRef = useComposedRef(ref);
+        const innerRef = useRef<HTMLInputElement>(null);
+        const refFunction = useComposedRef(ref, innerRef);
 
         // Callbacks
+        const sendForm = useSendFormContext();
+        onEnter ??= sendForm;
+
         const [onChangeWithData, otherPropsWithoutOnchange] = useListenerWithExtractedProps<'onChange', OnChangeData>(
             'onChange',
             otherProps
@@ -117,13 +127,13 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
         const realOnKeyDown = useCallback(
             (e: KeyboardEvent<HTMLInputElement>) => {
                 onKeyDown?.(e);
-                if (otherProps.onEnter && e.key === 'Enter' && !e.defaultPrevented) {
+                if (onEnter && e.key === 'Enter' && !e.defaultPrevented) {
                     if (otherProps.type === "number") {
                         const stringValue = (e.target as HTMLInputElement).value;
                         const val = !Number.isNaN(Number(stringValue)) ? stringValue : !Number.isNaN(parseFloat(stringValue)) ? String(parseFloat(stringValue)) : "";
-                        otherProps.onEnter(val);
+                        onEnter(val);
                     } else {
-                        otherProps.onEnter((e.target as HTMLInputElement).value);
+                        onEnter((e.target as HTMLInputElement).value);
                     }
                 }
 
@@ -177,12 +187,13 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
                     {...otherPropsWithoutData}
                     value={usedValue}
                     type={otherProps.type === "number" ? "text" : otherProps.type}
-                    ref={innerRef}
+                    ref={refFunction}
                     className={styles.text}
                     onBlur={onBlur}
                     onChange={onChange}
                     onKeyDown={realOnKeyDown}
                 />
+                {error && <InlineBlock className={styles.error}><Text>{error}</Text></InlineBlock>}
             </label>
         );
     },

package/src/Components/FormElements/Input/PasswordInput/PasswordInput.tsx

@@ -45,7 +45,7 @@ export const PasswordInput = withForwardRef(function PasswordInput<OnChangeData,
             <Grow>
                 <Input {...props} type={isVisible ? 'text' : 'password'} ref={ref} />
             </Grow>
-            <Clickable onClick={toggleVisible} className={styles.showButton}>
+            <Clickable onClick={toggleVisible} className={styles.showButton} interactable={false}>
                 <Icon icon={isVisible ? faEye : faEyeSlash} />
             </Clickable>
         </Flex>

package/src/Components/FormElements/Input/input.scss

@@ -75,4 +75,9 @@
       }
     }
   }
+
+  .error {
+    font-size: 0.7rem;
+    --text-primary-default-color: var(--text-error)
+  }
 }

package/src/Components/FormElements/Select/Select.tsx

@@ -7,6 +7,8 @@ import {OptionalListener, useListenerWithExtractedProps} from '../../Hooks/useLi
 import styles from './select.scss';
 import { withMemo } from '../../../helper/withMemo';
 import classNames from 'classnames';
+import { InlineBlock } from "../../Layout/InlineBlock";
+import { Text } from "../../Text/Text";
 
 export type SelectOption = {
     label: string;
@@ -23,6 +25,7 @@ export type SelectProps<OnChangeData> = RbmComponentProps<
             onChangeValue?: (newValue: string) => void;
             inline?: boolean;
             small?: boolean;
+            error?: string;
         } & OptionalListener<'onChange', OnChangeData>
     >
 >;
@@ -35,6 +38,7 @@ export const Select = withMemo(function Select<OnChangeData>({
     onChangeValue,
     inline = false,
     small = false,
+    error,
     ...otherProps
 }: SelectProps<OnChangeData>) {
     // Variables
@@ -72,6 +76,7 @@ export const Select = withMemo(function Select<OnChangeData>({
                     </option>
                 ))}
             </select>
+            {error && <InlineBlock className={styles.error}><Text>{error}</Text></InlineBlock>}
         </label>
     );
 },

package/src/Components/FormElements/Select/select.scss

@@ -53,4 +53,9 @@
     height: initial;
     line-height: 1.5rem;
   }
+
+  .error {
+    font-size: 0.7rem;
+    --text-primary-default-color: var(--text-error)
+  }
 }

package/src/Components/FormElements/Textarea/Textarea.tsx

@@ -7,15 +7,16 @@ import {
     KeyboardEvent,
     ChangeEvent,
     MutableRefObject,
-    CSSProperties
+    CSSProperties, useRef
 } from 'react';
 import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
-
 import styles from './textarea.scss';
 import classNames from 'classnames';
 import { withForwardRef } from "../../../helper/withForwardRef";
 import { useOnChangeDone } from "../hooks/useOnChangeDone";
 import { useComposedRef } from "../../Hooks/useComposedRef";
+import { InlineBlock } from "../../Layout/InlineBlock";
+import { Text } from "../../Text/Text";
 
 export type TextareaProps<OnChangeData, OnChangeDoneData> = RbmComponentProps<
     Override<
@@ -27,6 +28,7 @@ export type TextareaProps<OnChangeData, OnChangeDoneData> = RbmComponentProps<
             onEscape?: (newText: string) => void;
             textareaStyles?: CSSProperties & Record<`--${string}`, string | number | undefined>,
             containerRef?: MutableRefObject<HTMLLabelElement|null>
+            error?: string,
         } & OptionalListener<'onChange', OnChangeData>
         & OptionalListener<'onChangeDone', OnChangeDoneData>
     >
@@ -42,10 +44,12 @@ export const Textarea = withForwardRef(function Textarea<OnChangeData, OnChangeD
                                                                                              onEscape,
                                                                                              textareaStyles,
                                                                                              containerRef,
+    error,
                                                                                              ...otherProps
                                                                                          }: TextareaProps<OnChangeData, OnChangeDoneData>, ref: MutableRefObject<HTMLTextAreaElement> | null) {
     // Refs
-    const innerRef = useComposedRef(ref);
+    const innerRef = useRef<HTMLTextAreaElement>(null);
+    const refSetter = useComposedRef(ref, innerRef);
 
     // Variables
 
@@ -98,7 +102,8 @@ export const Textarea = withForwardRef(function Textarea<OnChangeData, OnChangeD
         <label className={classNames(styles.container, className)} style={style} ref={containerRef}>
             {label ? <span className={styles.label}>{label}</span> : null}
             <textarea {...otherPropsWithoutData} style={textareaStyles} onKeyUp={realOnKeyPress}
-                      className={styles.textarea} onChange={onChange} ref={innerRef}/>
+                      className={styles.textarea} onChange={onChange} ref={refSetter}/>
+            {error && <InlineBlock className={styles.error}><Text>{error}</Text></InlineBlock>}
         </label>
     );
 }, styles);

package/src/Components/FormElements/Textarea/textarea.scss

@@ -1,12 +1,16 @@
 .container {
   width: 100%;
-  height: 10rem;
+  min-height: 10rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 
   .label {
     display: block;
   }
 
   textarea {
+    flex: 1;
     background-color: #efeff4;
     color: #1f1f21;
     box-shadow: none;
@@ -19,4 +23,9 @@
     border-radius: 4px;
     border: 1px solid var(--border-light);
   }
+
+  .error {
+    font-size: 0.7rem;
+    --text-primary-default-color: var(--text-error)
+  }
 }

package/src/Components/FormElements/hooks/useOnChangeDone.ts

@@ -10,7 +10,7 @@ export function useOnChangeDone(onChangeDone: (ev: any) => void, ref?: MutableRe
         return () => {
             elem?.removeEventListener('change', onChangeDone);
         };
-    }, [ref, onChangeDone, usedRef]);
+    }, [onChangeDone, usedRef]);
 
     return usedRef;
 }

package/src/Components/Hooks/useComposedRef.ts

@@ -1,17 +1,14 @@
-import { ForwardedRef, useEffect, useRef } from 'react';
-
-export const useComposedRef = <T>(ref: ForwardedRef<T>, initialValue: T | null = null) => {
-    const targetRef = useRef<T>(initialValue);
-
-    useEffect(() => {
-        if (!ref) return;
-
-        if (typeof ref === 'function') {
-            ref(targetRef.current);
-        } else {
-            ref.current = targetRef.current;
+import { ForwardedRef, useCallback, useEffect, useRef } from 'react';
+
+export function useComposedRef<RefVal>(...refs: (ForwardedRef<RefVal> | undefined)[]) {
+    return useCallback((val: RefVal | null) => {
+        for (const ref of refs) {
+            if (typeof ref === 'function') {
+                ref(val);
+            } else if (ref) {
+                ref.current = val;
+            }
         }
-    }, [ref]);
-
-    return targetRef;
-};
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, refs);
+}

package/src/Components/Image/Image.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { withMemo } from '../../helper/withMemo';
 import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
-import { CSSProperties, DOMAttributes } from 'react';
+import { CSSProperties } from 'react';
 import { Override } from '../../TypeHelpers';
 
 import styles from './image.scss';
@@ -9,7 +9,7 @@ import classNames from 'classnames';
 
 export type ImageProps = RbmComponentProps<
     Override<
-        Omit<React.ComponentPropsWithoutRef<'img'>, keyof DOMAttributes<'img'>>,
+        React.ComponentPropsWithoutRef<'img'>,
         {
             src: string;
             style?: CSSProperties;

package/src/Components/Layout/Grid/Grid.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { withMemo } from '../../../helper/withMemo';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Block } from '../Block';
 import classNames from 'classnames';
 import styles from './grid.scss';
-import { useMemo } from 'react';
+import { ForwardedRef, useMemo } from 'react';
+import { withForwardRef } from "../../../helper/withForwardRef";
 
 export type GridProps = RbmComponentProps<{
     columns?: number;
@@ -12,7 +12,7 @@ export type GridProps = RbmComponentProps<{
     useContainerWidth?: boolean;
 }>;
 
-function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = false, className, __allowChildren }: GridProps) {
+function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = false, className, __allowChildren }: GridProps, ref?:ForwardedRef<HTMLDivElement>) {
     // Variables
     const appliedStyle = useMemo(
         () => ({
@@ -39,6 +39,7 @@ function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = fal
 
     return (
         <Block
+            ref={ref}
             style={appliedStyle}
             className={classNames(styles.grid, className, {[styles.useContainerWidth]: useContainerWidth})}
             __allowChildren={__allowChildren as 'all'}
@@ -49,5 +50,5 @@ function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = fal
 }
 
 // Need RowMemo for autocompletion of phpstorm
-const GridMemo = withMemo(Grid, styles);
+const GridMemo = withForwardRef(Grid, styles);
 export { GridMemo as Grid };

package/src/Components/List/InfiniteList.tsx

@@ -0,0 +1,57 @@
+import React, { CSSProperties, ReactElement, ReactNode, useCallback, useState } from 'react';
+import InfiniteLoader from "react-window-infinite-loader";
+import { RbmComponentProps } from "../RbmComponentProps";
+import { List, ListProps } from "./List";
+import { withMemo } from "../../helper/withMemo";
+
+export type InfiniteListProps<ItemType> = ListProps<ItemType> &{
+    hasNextPage: boolean,
+    loadNextPage: () => unknown | Promise<unknown>,
+};
+
+export const InfiniteList = withMemo(function InfiniteList<ItemType>({
+                                                                         renderItem,
+                                                                         itemHeight,
+                                                                         items,
+                                                                         renderBefore,
+                                                                         keyExtractor,
+                                                                         hasNextPage,
+                                                                         loadNextPage,
+                                                                         style,
+                                                                         className
+                                                                     }: InfiniteListProps<ItemType>) {
+    // Refs
+
+    // States/Variables/Selectors
+    const [isPageLoading, setIsPageLoading] = useState(false);
+
+    // Dispatch
+
+    // Callbacks
+    const isItemLoaded = useCallback((index: number) => !hasNextPage || index < items.length, [hasNextPage, items]);
+
+    const loadMore = useCallback(async () => {
+        if (!isPageLoading) {
+            setIsPageLoading(true);
+            try {
+                loadNextPage()
+            } finally {
+                setIsPageLoading(false);
+            }
+        }
+    }, [isPageLoading, loadNextPage])
+
+    // Effects
+
+    // Other
+
+    // RenderFunctions
+
+    return <InfiniteLoader isItemLoaded={isItemLoaded} loadMoreItems={loadMore}
+                           itemCount={hasNextPage ? items.length + 1 : items.length}>{({onItemsRendered, ref}) => (
+        <List
+            items={items} renderItem={renderItem} style={style} className={className} itemHeight={itemHeight}
+            renderBefore={renderBefore} keyExtractor={keyExtractor} ref={ref} onItemsRendered={onItemsRendered}/>
+    )}
+    </InfiniteLoader>;
+});

package/src/Components/List/List.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { ComponentType, CSSProperties, ReactElement, ReactNode, useCallback, useState } from 'react';
+import { ComponentType, CSSProperties, ForwardedRef, ReactElement, ReactNode, useCallback, useState } from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 
 import styles from './list.scss';
 import { withMemo } from '../../helper/withMemo';
-import { FixedSizeList, ListChildComponentProps } from 'react-window';
+import { FixedSizeList, FixedSizeListProps, ListChildComponentProps } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { SizeCalculator, SizeCalculatorProps } from '../SizeCalculator/SizeCalculator';
+import { withForwardRef } from "../../helper/withForwardRef";
 
 export type ListProps<ItemType> = RbmComponentProps<{
     renderItem: (item: ItemType, style: CSSProperties, index: number) => ReactElement;
@@ -14,15 +15,19 @@ export type ListProps<ItemType> = RbmComponentProps<{
     items: ItemType[];
     renderBefore?: (item: ItemType, index: number) => ReactNode;
     keyExtractor?: (item: ItemType, index: number) => string;
+    onItemsRendered?: FixedSizeListProps<ItemType>['onItemsRendered'];
+    autoSizeClassName?: string;
 }>;
 
-export const List = withMemo(function List<ItemType>({
+export const List = withForwardRef(function List<ItemType>({
     items,
     renderItem,
     itemHeight: initialItemHeight = 0,
     className,
     style,
-}: ListProps<ItemType>) {
+    onItemsRendered,
+    autoSizeClassName,
+}: ListProps<ItemType>, ref: ForwardedRef<FixedSizeList<ItemType>>) {
     // Variables
 
     // States
@@ -45,7 +50,7 @@ export const List = withMemo(function List<ItemType>({
     // Render Functions
 
     return (
-        <AutoSizer>
+        <AutoSizer className={autoSizeClassName}>
             {({ height, width }: { height?: number; width?: number }) => {
                 return (
                     <>
@@ -54,6 +59,8 @@ export const List = withMemo(function List<ItemType>({
                                 {renderItem(
                                     items[0],
                                     {
+                                        visibility: 'hidden',
+                                        pointerEvents: 'none',
                                         position: 'relative',
                                         top: '0px',
                                         left: '0px',
@@ -66,6 +73,8 @@ export const List = withMemo(function List<ItemType>({
                         )}
                         {height !== undefined && width !== undefined && (
                             <FixedSizeList
+                                onItemsRendered={onItemsRendered}
+                                ref={ref}
                                 height={height}
                                 itemCount={items.length}
                                 width={width}

package/src/Size.ts

@@ -0,0 +1,9 @@
+
+export enum Size {
+    xSmall,
+    small,
+    medium,
+    large,
+    xLarge,
+    xxLarge,
+};

package/src/scss/_baseClasses.scss

@@ -1,12 +1,12 @@
-:global(.full-height) {
+.full-height {
   height: 100%;
 }
 
-:global(.full-min-height) {
+.full-min-height {
   min-height: 100%;
 }
 
-:global(.scrollable) {
+.scrollable {
   overflow-y: auto;
 }
 
@@ -14,14 +14,10 @@
   width: 100%;
 }
 
-:global(.flat-hidden) {
-  @include design($flat) {
-    display: none;
-  }
+.#{$flat} .#{$flat}-hidden {
+  display: none;
 }
 
-:global(.material-hidden) {
-  @include design($material) {
-    display: none;
-  }
+.#{$material} .#{$material}-hidden {
+  display: none;
 }