@spaced-out/ui-design-system 0.4.15 → 0.5.1

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.stories.d.ts

@@ -0,0 +1,300 @@
+import * as React from 'react';
+import type { FilterButtonOverlayProps } from './';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: import("flow-to-typescript-codemod").Flow.AbstractComponent<FilterButtonOverlayProps, HTMLDivElement>;
+    argTypes: {
+        onClick: {
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        iconLeftName: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        iconLeftType: {
+            description: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        elevation: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: unknown[];
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        iconRightName: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        iconRightType: {
+            description: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        type: {
+            options: unknown[];
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        actionType: {
+            options: unknown[];
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        buttonSize: {
+            description: string;
+            options: unknown[];
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        isLoading: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        buttonIsFluid: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        buttonLabel: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        ariaLabel: {
+            control: {
+                type: string;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        anchorPosition: {
+            options: unknown[];
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        positionStrategy: {
+            options: unknown[];
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        clickAwayRef: {
+            type: {
+                optional: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        isFluid: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        size: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _FilterButtonOverlay: {
+    (args: FilterButtonOverlayProps): React.JSX.Element;
+    args: {
+        buttonLabel: string;
+        buttonSize: string;
+        iconLeftName: string;
+        type: string;
+        classNames: {
+            overlayContainer: string;
+        };
+    };
+};
+export declare const _FilterButtonOverlayWithAutoClose: {
+    (args: FilterButtonOverlayProps): React.JSX.Element;
+    args: {
+        buttonLabel: string;
+        buttonSize: string;
+        iconLeftName: string;
+        type: string;
+        classNames: {
+            overlayContainer: string;
+        };
+    };
+};
+//# sourceMappingURL=FilterButtonOverlay.stories.d.ts.map

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonOverlay.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FilterButtonOverlay/FilterButtonOverlay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBjD,wBAwPE;AAYF,eAAO,MAAM,oBAAoB;WAAU,wBAAwB;;;;;;;;;;CAQlE,CAAC;AAYF,eAAO,MAAM,iCAAiC;WACtC,wBAAwB;;;;;;;;;;CAiC/B,CAAC"}

package/lib/components/FilterButtonOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FilterButtonOverlay';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/FilterButtonOverlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FilterButtonOverlay/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/lib/components/FocusManager/FocusManager.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+type ClassNames = Readonly<{
+    wrapper?: string;
+}>;
+export type FocusManagerProps = {
+    classNames?: ClassNames;
+    children?: React.ReactNode;
+    initialFocus?: number;
+    returnFocus?: boolean;
+    guards?: boolean;
+    modal?: boolean;
+};
+export declare const FocusManager: (props: FocusManagerProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=FocusManager.d.ts.map

package/lib/components/FocusManager/FocusManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusManager.d.ts","sourceRoot":"","sources":["../../../src/components/FocusManager/FocusManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBA8BpD,CAAC"}

package/lib/components/FocusManager/FocusManager.stories.d.ts

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import type { FocusManagerProps } from './';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: (props: FocusManagerProps) => React.JSX.Element;
+    argTypes: {
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        initialFocus: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        returnFocus: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        guards: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        modal: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _FocusManager: {
+    (args: FocusManagerProps): React.JSX.Element;
+    args: {
+        initialFocus: number;
+    };
+};
+//# sourceMappingURL=FocusManager.stories.d.ts.map

package/lib/components/FocusManager/FocusManager.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusManager.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FocusManager/FocusManager.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM1C,wBAmFE;AAEF,eAAO,MAAM,aAAa;WAAU,iBAAiB;;;;CAiBpD,CAAC"}

package/lib/components/FocusManager/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FocusManager';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/FocusManager/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FocusManager/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { Flow } from 'flow-to-typescript-codemod';
+import type { FocusManagerProps } from '../FocusManager';
+export type SkipElementFromNavigationProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+export declare const SkipElementFromNavigation: Flow.AbstractComponent<SkipElementFromNavigationProps, HTMLDivElement>;
+export type FocusManagerWithArrowKeyNavigationProps = FocusManagerProps & {
+    cols?: number;
+    orientation?: 'horizontal' | 'vertical';
+    focusItemOnOpen?: 'auto' | boolean;
+    loop?: boolean;
+    listReference?: {
+        current: Array<HTMLElement>;
+    };
+};
+export declare const FocusManagerWithArrowKeyNavigation: (props: FocusManagerWithArrowKeyNavigationProps) => React.JSX.Element;
+//# sourceMappingURL=FocusManagerWithArrowKeyNavigation.d.ts.map

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusManagerWithArrowKeyNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAGrD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iBAAiB,CAAC;AAOvD,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,IAAI,CAAC,iBAAiB,CAC5D,8BAA8B,EAC9B,cAAc,CAUf,CAAC;AAIF,MAAM,MAAM,uCAAuC,GAAG,iBAAiB,GAAG;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE;QACd,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,kCAAkC,GAC7C,OAAO,uCAAuC,sBA8G/C,CAAC"}

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.js

@@ -50,6 +50,7 @@ const FocusManagerWithArrowKeyNavigation = props => {
 
   // Note(Nishant): This is to correctly call the onClick handler which could have been on child
   // we also need to set the active index correctly on click for list navigation to work
+  // @ts-ignore - TS7019 - Rest parameter 'args' implicitly has an 'any[]' type.
   const childOnClickPassthrough = function (childOnClickHandler, index) {
     if (childOnClickHandler) {
       for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
@@ -77,22 +78,32 @@ const FocusManagerWithArrowKeyNavigation = props => {
 
   let skippedChildrenCount = 0;
   const clonedChildren = listReference ? children : childrenArray.map((child, index) => {
+    // @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>'.
     const {
       onClick: childClickHandler
     } = child.props;
     let adjustedIndex = index - skippedChildrenCount;
+
+    // @ts-ignore - TS2339 - Property 'type' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>'.
     if (child?.type?.displayName === SKIP_ELEMENT_DISPLAY_NAME) {
       skippedChildrenCount++;
+      // @ts-ignore - TS2322 - Type 'null' is not assignable to type 'number'.
       adjustedIndex = null;
     }
+
+    // @ts-ignore - TS2769 - No overload matches this call.
     return /*#__PURE__*/React.cloneElement(child, {
+      // @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>'.
       ...child.props,
       tabIndex: activeIndex === index ? 0 : -1,
+      // @ts-ignore - TS7006 - Parameter 'node' implicitly has an 'any' type.
       ref: node => {
         if (adjustedIndex !== null) {
+          // @ts-ignore - TS2322 - Type 'any' is not assignable to type 'never'.
           listRef.current[adjustedIndex] = node;
         }
       },
+      // @ts-ignore - TS7019 - Rest parameter 'args' implicitly has an 'any[]' type.
       onClick: function () {
         for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
           args[_key3] = arguments[_key3];

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.stories.d.ts

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import type { FocusManagerWithArrowKeyNavigationProps } from './';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: (props: FocusManagerWithArrowKeyNavigationProps) => React.JSX.Element;
+    argTypes: {
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        initialFocus: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        returnFocus: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        modal: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        guards: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        cols: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        orientation: {
+            options: string[];
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        loop: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        listReference: {
+            description: string;
+        };
+        focusItemOnOpen: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _FocusManagerWithGridNavigation: {
+    (args: FocusManagerWithArrowKeyNavigationProps): React.JSX.Element;
+    args: {
+        loop: boolean;
+        focusItemOnOpen: string;
+    };
+};
+export declare const _FocusManagerWithGridNavigationHavingEmptyElements: () => React.JSX.Element;
+export declare const _FocusManagerWithListNavigation: () => React.JSX.Element;
+export declare const _FocusManagerWithGridNavigationUsingListReference: {
+    (args: FocusManagerWithArrowKeyNavigationProps): React.JSX.Element;
+    args: {
+        loop: boolean;
+        focusItemOnOpen: string;
+        self: boolean;
+        passListReference: boolean;
+    };
+};
+//# sourceMappingURL=FocusManagerWithArrowKeyNavigation.stories.d.ts.map

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusManagerWithArrowKeyNavigation.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAC,uCAAuC,EAAC,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAShE,wBAuIE;AAEF,eAAO,MAAM,+BAA+B;WACpC,uCAAuC;;;;;CA8F9C,CAAC;AAOF,eAAO,MAAM,kDAAkD,yBAqG9D,CAAC;AAEF,eAAO,MAAM,+BAA+B,yBA0B3C,CAAC;AAEF,eAAO,MAAM,iDAAiD;WACtD,uCAAuC;;;;;;;CAmK9C,CAAC"}

package/lib/components/FocusManagerWithArrowKeyNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FocusManagerWithArrowKeyNavigation';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/FocusManagerWithArrowKeyNavigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FocusManagerWithArrowKeyNavigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC"}