@faststore/ui 1.11.20 → 1.12.5

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.12.5](https://github.com/vtex/faststore/compare/v1.12.4...v1.12.5) (2022-09-22)
+
+
+### Bug Fixes
+
+* fixes tsconfig.json to exclude storybook types inside .d.ts file ([#1472](https://github.com/vtex/faststore/issues/1472)) ([97274b5](https://github.com/vtex/faststore/commit/97274b58b79849cb670e87052130b2ed00bb53f4))
+
+
+
+## [1.12.4](https://github.com/vtex/faststore/compare/v1.12.3...v1.12.4) (2022-09-21)
+
+
+### Features
+
+* **ui:** improve extensibility of table and accordion molecules ([#1470](https://github.com/vtex/faststore/issues/1470)) ([2abf78c](https://github.com/vtex/faststore/commit/2abf78c36ce446f6e5b213738a359fb1b37e98a5))
+
+
+
 ## [1.11.20](https://github.com/vtex/faststore/compare/v1.11.19...v1.11.20) (2022-09-12)
 
 

package/dist/molecules/Accordion/AccordionItem.d.ts

@@ -1,5 +1,6 @@
-import type { HTMLAttributes } from 'react';
 import React from 'react';
+import type { ElementType, HTMLAttributes, ReactElement } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../typings';
 interface AccordionItemContext {
     index: number;
     panel: string;
@@ -7,7 +8,7 @@ interface AccordionItemContext {
     prefixId: string;
 }
 declare const AccordionItemContext: React.Context<AccordionItemContext | undefined>;
-export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+interface Props extends HTMLAttributes<HTMLDivElement> {
     /**
      * ID to find this component in testing tools (e.g.: cypress,
      * testing-library, and jest).
@@ -23,6 +24,14 @@ export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
      */
     prefixId?: string;
 }
-declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare type AccordionItemProps<C extends ElementType> = PolymorphicComponentPropsWithRef<C, Props>;
+declare type AccordionItemComponent = <C extends ElementType = 'div'>(props: AccordionItemProps<C>) => ReactElement | null;
+declare const AccordionItem: AccordionItemComponent;
 export declare function useAccordionItem(): AccordionItemContext;
+/**
+ * This is only being exported to make it easier to use in Storybook.
+ * **DON'T** import this directly to use this component, use the default export
+ * instead.
+ */
+export declare const StorybookAccordionItem: React.FC<Props>;
 export default AccordionItem;

package/dist/molecules/Accordion/AccordionItem.js

@@ -1,6 +1,7 @@
 import React, { useContext, forwardRef, createContext } from 'react';
 const AccordionItemContext = createContext(undefined);
-const AccordionItem = forwardRef(function AccordionItem({ testId = 'store-accordion-item', children, prefixId = '', index = 0, ...otherProps }, ref) {
+const AccordionItem = forwardRef(function AccordionItem({ testId = 'store-accordion-item', children, prefixId = '', index = 0, as: MaybeComponent, ...otherProps }, ref) {
+    const Component = MaybeComponent ?? 'div';
     const context = {
         index,
         prefixId,
@@ -8,7 +9,7 @@ const AccordionItem = forwardRef(function AccordionItem({ testId = 'store-accord
         button: `${prefixId && `${prefixId}-`}button--${index}`,
     };
     return (React.createElement(AccordionItemContext.Provider, { value: context },
-        React.createElement("div", Object.assign({ ref: ref, "data-accordion-item": true, "data-testid": testId }, otherProps), children)));
+        React.createElement(Component, Object.assign({ ref: ref, "data-accordion-item": true, "data-testid": testId }, otherProps), children)));
 });
 export function useAccordionItem() {
     const context = useContext(AccordionItemContext);
@@ -17,5 +18,11 @@ export function useAccordionItem() {
     }
     return context;
 }
+/**
+ * This is only being exported to make it easier to use in Storybook.
+ * **DON'T** import this directly to use this component, use the default export
+ * instead.
+ */
+export const StorybookAccordionItem = AccordionItem;
 export default AccordionItem;
 //# sourceMappingURL=AccordionItem.js.map

package/dist/molecules/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../../../src/molecules/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AASpE,MAAM,oBAAoB,GAAG,aAAa,CACxC,SAAS,CACV,CAAA;AAmBD,MAAM,aAAa,GAAG,UAAU,CAC9B,SAAS,aAAa,CACpB,EACE,MAAM,GAAG,sBAAsB,EAC/B,QAAQ,EACR,QAAQ,GAAG,EAAE,EACb,KAAK,GAAG,CAAC,EACT,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,OAAO,GAAG;QACd,KAAK;QACL,QAAQ;QACR,KAAK,EAAE,GAAG,QAAQ,IAAI,GAAG,QAAQ,GAAG,UAAU,KAAK,EAAE;QACrD,MAAM,EAAE,GAAG,QAAQ,IAAI,GAAG,QAAQ,GAAG,WAAW,KAAK,EAAE;KACxD,CAAA;IAED,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO;QAC3C,2CAAK,GAAG,EAAE,GAAG,8CAAmC,MAAM,IAAM,UAAU,GACnE,QAAQ,CACL,CACwB,CACjC,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,UAAU,gBAAgB;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAA;IAEhD,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CACb,wEAAwE,CACzE,CAAA;KACF;IAED,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../../../src/molecules/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAWpE,MAAM,oBAAoB,GAAG,aAAa,CACxC,SAAS,CACV,CAAA;AA4BD,MAAM,aAAa,GAA2B,UAAU,CACtD,SAAS,aAAa,CACpB,EACE,MAAM,GAAG,sBAAsB,EAC/B,QAAQ,EACR,QAAQ,GAAG,EAAE,EACb,KAAK,GAAG,CAAC,EACT,EAAE,EAAE,cAAc,EAClB,GAAG,UAAU,EACS,EACxB,GAAsB;IAEtB,MAAM,SAAS,GAAG,cAAc,IAAI,KAAK,CAAA;IAEzC,MAAM,OAAO,GAAG;QACd,KAAK;QACL,QAAQ;QACR,KAAK,EAAE,GAAG,QAAQ,IAAI,GAAG,QAAQ,GAAG,UAAU,KAAK,EAAE;QACrD,MAAM,EAAE,GAAG,QAAQ,IAAI,GAAG,QAAQ,GAAG,WAAW,KAAK,EAAE;KACxD,CAAA;IAED,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO;QAC3C,oBAAC,SAAS,kBAAC,GAAG,EAAE,GAAG,8CAAmC,MAAM,IAAM,UAAU,GACzE,QAAQ,CACC,CACkB,CACjC,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,UAAU,gBAAgB;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAA;IAEhD,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CACb,wEAAwE,CACzE,CAAA;KACF;IAED,OAAO,OAAO,CAAA;AAChB,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAA0B,CAAA;AAEhE,eAAe,aAAa,CAAA"}

package/dist/molecules/Table/Table.d.ts

@@ -1,11 +1,11 @@
-import type { HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, TableHTMLAttributes } from 'react';
 import React from 'react';
-export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
     /**
      * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
      */
     testId?: string;
     children: React.ReactNode;
 }
-declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+declare const Table: React.ForwardRefExoticComponent<Pick<TableProps, "slot" | "style" | "summary" | "title" | "className" | "color" | "id" | "lang" | "width" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "cellPadding" | "cellSpacing" | "testId"> & React.RefAttributes<HTMLTableElement>>;
 export default Table;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "1.11.20",
+  "version": "1.12.5",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -85,5 +85,5 @@
     "tsdx": "^0.14.1",
     "typescript": "^4.2.4"
   },
-  "gitHead": "1d30ccc8dbd63167961cf4e5c68599decfd77c10"
+  "gitHead": "5178a18d0dfa7e510c6db1e40d98d67fa53cc581"
 }

package/src/molecules/Accordion/AccordionItem.tsx

@@ -1,5 +1,6 @@
-import type { HTMLAttributes } from 'react'
 import React, { useContext, forwardRef, createContext } from 'react'
+import type { ElementType, FC, HTMLAttributes, ReactElement } from 'react'
+import type { PolymorphicComponentPropsWithRef, PolymorphicRef } from '../../typings'
 
 interface AccordionItemContext {
   index: number
@@ -12,7 +13,7 @@ const AccordionItemContext = createContext<AccordionItemContext | undefined>(
   undefined
 )
 
-export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+interface Props extends HTMLAttributes<HTMLDivElement> {
   /**
    * ID to find this component in testing tools (e.g.: cypress,
    * testing-library, and jest).
@@ -29,17 +30,29 @@ export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
   prefixId?: string
 }
 
-const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
-  function AccordionItem(
+export type AccordionItemProps<C extends ElementType> = PolymorphicComponentPropsWithRef<
+  C,
+  Props
+>
+
+type AccordionItemComponent = <C extends ElementType = 'div'>(
+  props: AccordionItemProps<C>
+) => ReactElement | null
+
+const AccordionItem: AccordionItemComponent = forwardRef(
+  function AccordionItem<C extends ElementType = 'div'>(
     {
       testId = 'store-accordion-item',
       children,
       prefixId = '',
       index = 0,
+      as: MaybeComponent,
       ...otherProps
-    },
-    ref
+    }: AccordionItemProps<C>,
+    ref: PolymorphicRef<C>
   ) {
+    const Component = MaybeComponent ?? 'div'
+
     const context = {
       index,
       prefixId,
@@ -49,9 +62,9 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
 
     return (
       <AccordionItemContext.Provider value={context}>
-        <div ref={ref} data-accordion-item data-testid={testId} {...otherProps}>
+        <Component ref={ref} data-accordion-item data-testid={testId} {...otherProps}>
           {children}
-        </div>
+        </Component>
       </AccordionItemContext.Provider>
     )
   }
@@ -69,4 +82,11 @@ export function useAccordionItem() {
   return context
 }
 
+/**
+ * This is only being exported to make it easier to use in Storybook.
+ * **DON'T** import this directly to use this component, use the default export
+ * instead.
+ */
+export const StorybookAccordionItem = AccordionItem as FC<Props>
+
 export default AccordionItem

package/src/molecules/Accordion/stories/Accordion.mdx

@@ -1,7 +1,7 @@
 import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
 
 import Accordion from '../Accordion'
-import AccordionItem from '../AccordionItem'
+import { StorybookAccordionItem } from '../AccordionItem'
 import AccordionButton from '../AccordionButton'
 import AccordionPanel from '../AccordionPanel'
 
@@ -40,7 +40,7 @@ Besides those attributes, the following props are also supported:
 
 ### `AccordionItem`
 
-<ArgsTable of={AccordionItem} />
+<ArgsTable of={StorybookAccordionItem} />
 
 ### `AccordionButton`
 

package/src/molecules/Table/Table.tsx

@@ -1,7 +1,7 @@
-import type { HTMLAttributes } from 'react'
+import type { DetailedHTMLProps, TableHTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 
-export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */