@reapit/elements 5.0.0-beta.13 → 5.0.0-beta.15

package/dist/cjs/src/components/accordion/accordion.stories.d.ts

@@ -4,5 +4,11 @@ declare const meta: Meta<typeof Accordion>;
 export default meta;
 export declare const StylesOnlyUsage: {
     render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
 };
 export declare const ReactUsage: StoryObj<typeof Accordion>;

package/dist/cjs/src/components/button/__styles__/index.d.ts

@@ -10,5 +10,6 @@ export declare const elButtonGroupAlignRight: import("@linaria/core").LinariaCla
 export declare const elButtonGroupAlignCenter: import("@linaria/core").LinariaClassName;
 export declare const elButtonFixedWidth: import("@linaria/core").LinariaClassName;
 export declare const ElButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
-export declare const ElButtonGroup: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+/** @deprecated **/
+export declare const DeprecatedElButtonGroup: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ElButtonGroupInner: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/dist/cjs/src/components/button/button.d.ts

@@ -19,11 +19,19 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export interface FloatingButtonProps extends ButtonProps {
     icon: IconNames;
 }
+/**
+ * A subset of button, button group should not be used.
+ * @deprecated Will be removed in future major version. Use `button-group` as parent component.
+ */
 export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
     alignment?: ButtonGroupAlignment;
 }
 export declare const resolveButtonClassName: (intent?: Intent) => string;
 export declare const handleButtonClick: (onClick?: MouseEventHandler<HTMLButtonElement>) => (e: MouseEvent<HTMLButtonElement>) => void;
 export declare const Button: FC<ButtonProps>;
-export declare const ButtonGroup: FC<ButtonGroupProps>;
+/**
+ * Moved to its own component `ButtonGroup`.
+ * @deprecated `alignment` prop will not be supported in new ButtonGroup component.
+ */
+export declare const DeprecatedButtonGroup: FC<ButtonGroupProps>;
 export declare const FloatingButton: FC<FloatingButtonProps>;

package/dist/cjs/src/components/button/button.stories.d.ts

@@ -34,7 +34,12 @@ export declare const StandardAttributes: {
         'aria-label': string;
     };
 };
-export declare const Group: {
+/**
+ *
+ * @deprecated This ButtonGroup is deprecated. Use the new ButtonGroup component instead.
+ *
+ */
+export declare const DeprecatedGroup: {
     render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
     name: string;
 };

package/dist/cjs/src/components/button-group/__tests__/button-group.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/src/components/button-group/button-group.d.ts

@@ -0,0 +1,6 @@
+import { FC, HTMLAttributes, ReactNode } from 'react';
+interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export declare const ButtonGroup: FC<ButtonGroupProps>;
+export {};

package/dist/cjs/src/components/button-group/button-group.stories.d.ts

@@ -0,0 +1,34 @@
+import { ButtonGroup } from './button-group';
+import { Meta } from '@storybook/react';
+declare const meta: Meta<typeof ButtonGroup>;
+export default meta;
+export declare const Default: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+            allowFullscreen: boolean;
+        };
+    };
+};
+export declare const WithPrimaryButton: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+            allowFullscreen: boolean;
+        };
+    };
+};
+export declare const WithIconOnlyButton: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+            allowFullscreen: boolean;
+        };
+    };
+};

package/dist/cjs/src/components/button-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from './styles';
+export * from './button-group';

package/dist/cjs/src/components/button-group/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ElButtonGroup: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/dist/cjs/src/components/textarea/__tests__/use-resize-textarea-effect.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/src/components/textarea/__tests__/use-resize-textarea-onchange.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/src/components/textarea/index.d.ts

@@ -1,2 +1,2 @@
-export * from './__styles__';
+export * from './styles';
 export * from './textarea';

package/dist/cjs/src/components/textarea/is-css-content-fieldsizing-supported.d.ts

@@ -0,0 +1,2 @@
+declare function isCSSContentFieldSizingSupported(): boolean;
+export default isCSSContentFieldSizingSupported;

package/dist/cjs/src/components/textarea/styles.d.ts

@@ -0,0 +1,39 @@
+import type { CSSProperties, TextareaHTMLAttributes } from 'react';
+export declare const elTextAreaHasError: import("@linaria/core").LinariaClassName;
+export type ContentFieldSizing = 'content';
+export type FixedFieldSizing = 'fixed';
+/**
+ * @deprecated
+ */
+export type ManualFieldSizing = 'manual';
+interface RestrictedTextareaHTMLAttributes extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'cols' | 'rows'> {
+}
+interface TextAreaCSSProperties extends CSSProperties {
+    '--textarea-max-rows': number;
+    '--textarea-min-rows': number;
+}
+export interface ElTextAreaProps extends RestrictedTextareaHTMLAttributes {
+    /**
+     * Indicates whether the text area has a form validation error or not. Provided as an escape-hatch
+     * for when you cannot rely on the [`:invalid` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid)
+     * and need to control the error state manually.
+     */
+    hasError?: boolean;
+    /**
+     * Determines how the text area will be sized.
+     * - `content` will allow the text area to size itself to its content;
+     * - `fixed` will size the text area to a specific number of rows;
+     * - `manual` **(deprecated)** will allow the user to size the text area themselves.
+     */
+    'data-field-sizing': ContentFieldSizing | FixedFieldSizing | ManualFieldSizing;
+    /**
+     * Standard style prop that additionally allows the min and max row CSS variables for the text area
+     * to be overridden.
+     */
+    style?: TextAreaCSSProperties;
+}
+export declare const ElTextArea: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLTextAreaElement> & TextareaHTMLAttributes<HTMLTextAreaElement> & ElTextAreaProps>;
+export declare const ElShadowTextArea: import("@linaria/react").WYWEvalMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLTextAreaElement> & TextareaHTMLAttributes<HTMLTextAreaElement> & ElTextAreaProps & {
+    as?: import("react").ElementType<any> | undefined;
+}>;
+export {};

package/dist/cjs/src/components/textarea/sync-textarea-height.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Makes the CSS height of the `to` text area equal to the scroll height of the `from` text area.
+ *
+ * @param from The text area element whose height we want to copy
+ * @param to The text area element whose height we want to set
+ */
+export default function syncTextAreaHeight(from: HTMLTextAreaElement, to: HTMLTextAreaElement): void;

package/dist/cjs/src/components/textarea/textarea.atoms.d.ts

@@ -0,0 +1,66 @@
+/// <reference types="react" />
+import { ContentFieldSizing, FixedFieldSizing, ManualFieldSizing, type ElTextAreaProps } from './styles';
+interface BaseTextAreaProps extends Omit<ElTextAreaProps, 'data-field-sizing'> {
+}
+export interface ContentFieldSizingTextAreaProps extends BaseTextAreaProps {
+    /**
+     * Allows the text area to automatically size itself based on its content, within the specified
+     * minimum and maximum number of rows.
+     */
+    fieldSizing: ContentFieldSizing;
+    /**
+     * The maximum number of rows to which the text area should be sized. Provides the upper bound
+     * for the text area to grow to, except where an explicit value for `rows` is defined.
+     *
+     * @default Infinity
+     */
+    maxRows?: number;
+    /**
+     * The minimum number of rows to which the text area should be sized. Provides the lower bound
+     * for the text area to shrink to, except where an explicit value for `rows` is defined. The
+     * [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows)
+     * highlight that the default number of rows is 2.
+     *
+     * @default 3
+     */
+    minRows?: number;
+}
+/**
+ * An text area that automatically resizes based on its content between a minimum and maximum number of rows.
+ */
+export declare const ContentFieldSizingTextArea: import("react").ForwardRefExoticComponent<ContentFieldSizingTextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export interface FixedFieldSizingTextAreaProps extends BaseTextAreaProps {
+    /**
+     * Ensures the text area has a fixed size based on the specified number of rows.
+     */
+    fieldSizing: FixedFieldSizing;
+    /**
+     * The exact number of rows to which the text area should be sized.
+     *
+     * @default 3
+     */
+    rows?: number;
+}
+/**
+ * A fixed-sized text area.
+ */
+export declare const FixedFieldSizingTextArea: import("react").ForwardRefExoticComponent<FixedFieldSizingTextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export interface ManualFieldSizingTextAreaProps extends BaseTextAreaProps {
+    /**
+     * Allows the text area to be manually sized by users.
+     * @deprecated `manual` is deprecated. Please use `content` or `fixed` field sizing instead.
+     */
+    fieldSizing: ManualFieldSizing;
+    /**
+     * The exact number of rows to which the text area should be _initially_ sized.
+     *
+     * @default 3
+     */
+    initialRows?: number;
+}
+/**
+ * A manually-resizable text area. Should not be used.
+ * @deprecated Will be removed in future major version. Use `content` or `fixed` field sizing instead.
+ */
+export declare const ManualFieldSizingTextArea: import("react").ForwardRefExoticComponent<ManualFieldSizingTextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/cjs/src/components/textarea/textarea.d.ts

@@ -1,6 +1,12 @@
-import React, { InputHTMLAttributes } from 'react';
-export interface TextAreaProps extends InputHTMLAttributes<HTMLTextAreaElement> {
-    hasError?: boolean;
-}
-export type TextAreaWrapped = React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<React.TextareaHTMLAttributes<HTMLTextAreaElement>>>;
-export declare const TextArea: TextAreaWrapped;
+/// <reference types="react" />
+import type { ContentFieldSizingTextAreaProps, FixedFieldSizingTextAreaProps, ManualFieldSizingTextAreaProps } from './textarea.atoms';
+export type TextAreaProps = ContentFieldSizingTextAreaProps | FixedFieldSizingTextAreaProps | ManualFieldSizingTextAreaProps;
+/**
+ * An (almost) standard HTML/JSX `<textarea>` for use in forms.
+ *
+ * Can automatically resize itself between a minimum and/or maximum number of lines of text (rows). This
+ * resizing behaviour is available for CSS-only consumers on Chrome and Edge. For browsers that do not yet
+ * support the [field-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing) property, we
+ * fallback to a JS-based resizing solution that is only available to React-based consumers.
+ */
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/cjs/src/components/textarea/textarea.stories.d.ts

@@ -1,15 +1,60 @@
-declare const _default: {
-    title: string;
-    component: import("./textarea").TextAreaWrapped;
-};
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+import { TextArea } from './index';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("./textarea").TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default _default;
-export declare const BasicUsage: {
-    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
-};
-export declare const TextAreaPlaceholder: {
-    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
-    name: string;
-};
-export declare const TextAreaError: {
-    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
-};
+export declare const BasicUsage: StoryObj<typeof TextArea>;
+/**
+ * A TextArea can be invalid in three ways:
+ *
+ *  - Applying any of the standard [HTML form validation attributes](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation) and providing a value that does not meet these constraints;
+ *  - Using custom [constraint validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation); or,
+ *  - By explicitly setting `hasError` component prop to true (or the `el-text-area-has-error` class if using CSS only).
+ *
+ * The following example demonstrates a required text area that has no value, which is excersing option (1) above.
+ */
+export declare const Invalid: StoryObj<typeof TextArea>;
+/**
+ * A Text area can be disabled in forms to prevent their use. When disabled, the text area cannot be focused and its
+ * value will not be submitted with the form.
+ */
+export declare const Disabled: StoryObj<typeof TextArea>;
+/**
+ * A Text area can also be marked as read-only in forms to prevent their current value being changed. Unlike a disabled
+ * text area, a read-only text area can still be focused, and its value will still be submitted with the form.
+ */
+export declare const ReadOnly: StoryObj<typeof TextArea>;
+/**
+ * Text area's can automatically grow or shrink between a min and/or max row count. The min and max rows define the
+ * number of lines of text that should be visible within the text area. If the number of lines exceeds the specified
+ * maximum, the text area's content will overflow with a scrollbar.
+ *
+ * **Note:** This resizing behaviour is available for CSS-only consumers on Chrome and Edge. For browsers that do not
+ * yet support the [field-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing) property, we fallback
+ * to a JS-based resizing solution that is only available to React-based consumers.
+ *
+ * This example demonstrates resizing behaviour for an *uncontrolled* text area.
+ */
+export declare const UncontrolledResizing: StoryObj<typeof TextArea>;
+/**
+ * This next example demonstrates auto-sizing behaviour for a *controlled* text area.
+ *
+ * **Note:** to change the value of the text area, you will need to use the `value` control when viewing the
+ * story individually.
+ */
+export declare const ControlledResizing: StoryObj<typeof TextArea>;
+/**
+ * Importantly, when an explicit row count is specified, no resizing will occur, whether the text area's
+ * value is controlled or not. This allows text areas to have a fixed size when necessary.
+ */
+export declare const FixedSize: StoryObj<typeof TextArea>;
+/**
+ * To continue using the Elements v4 `TextArea` behaviour where manual resizing was permitted, consumers can
+ * use `fieldSizing="manual"`.
+ *
+ * **This option is deprecated and will be removed in a future version.** Prefer either `content` or `fixed`
+ * field sizing.
+ *
+ * @deprecated
+ */
+export declare const ManualSizing: StoryObj<typeof TextArea>;

package/dist/cjs/src/components/textarea/use-resize-textarea-effect.d.ts

@@ -0,0 +1,9 @@
+import type { RefObject } from 'react';
+type UseResizeTextAreaEffectConfig = {
+    isEnabled: boolean;
+    shadowTextAreaRef: RefObject<HTMLTextAreaElement>;
+    textAreaRef: RefObject<HTMLTextAreaElement>;
+    value?: unknown;
+};
+export default function useResizeTextAreaEffect({ isEnabled, shadowTextAreaRef, textAreaRef, value, }: UseResizeTextAreaEffectConfig): void;
+export {};

package/dist/cjs/src/components/textarea/use-resize-textarea-onchange.d.ts

@@ -0,0 +1,9 @@
+import type { ChangeEventHandler, RefObject } from 'react';
+type UseResizeTextAreaOnChangeConfig = {
+    isEnabled: boolean;
+    shadowTextAreaRef: RefObject<HTMLTextAreaElement>;
+    textAreaRef: RefObject<HTMLTextAreaElement>;
+};
+type UseResizeTextAreaOnChangeDecorator = (onChange?: ChangeEventHandler) => ChangeEventHandler;
+export default function useResizeTextAreaOnChange({ isEnabled, shadowTextAreaRef, textAreaRef, }: UseResizeTextAreaOnChangeConfig): UseResizeTextAreaOnChangeDecorator;
+export {};

package/dist/cjs/src/helpers/mergeRefs.d.ts

@@ -0,0 +1,7 @@
+import type { Ref, RefCallback } from 'react';
+/**
+ * Combine multiple React refs into a single ref function. This is used mostly when you
+ * need to allow consumers to forward refs to an internal component that is already
+ * receiving a ref.
+ */
+export default function mergeRefs<T = unknown>(...refs: Array<Ref<T> | RefCallback<T>>): RefCallback<T>;

package/dist/cjs/src/index.d.ts

@@ -8,7 +8,8 @@ export * from './styles/typography';
 export * from './styles/helpers';
 export * from './styles/media';
 export * from './styles/states';
-export * from './components/button';
+export { Button, FloatingButton } from './components/button';
+export * from './components/button-group';
 export * from './components/card';
 export * from './components/grid';
 export * from './components/icon';

package/dist/cjs/src/storybook/figma/guidelines-images/index.d.ts

@@ -0,0 +1,4 @@
+import Accordion from './accordion.svg';
+import ButtonGroup from './button-group.svg';
+export { Accordion };
+export { ButtonGroup };

package/dist/cjs/src/storybook/figma/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export interface GuidelinesImageProps {
+    name: string;
+}
+export declare const GuidelinesImage: FC<GuidelinesImageProps>;
+export declare const figmaDesignUrls: {
+    accordion: string;
+    buttonGroup: string;
+};

package/dist/esm/assets/{asset-BDb_LRz7 → asset-Dw8e5-8p}

@@ -50,5 +50,6 @@
 
 
 
+