@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"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"}

package/lib/components/Menu/Menu.js

@@ -14,7 +14,7 @@ var _MenuOptionButton = require("./MenuOptionButton");
 var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // $FlowIssue[nonstrict-import] react-window
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 // Render first available option set
 
 const menuSizeMedium = 276,
@@ -56,7 +56,10 @@ const RenderOption = _ref => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, allowSearch && showResultText && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
       className: _MenuModule.default.filterOptionsResultText,
       color: "tertiary"
-    }, finalResultText), virtualization && isVirtualizationEnabled ? /*#__PURE__*/React.createElement(_reactWindow.FixedSizeList, {
+    }, finalResultText), virtualization && isVirtualizationEnabled ?
+    /*#__PURE__*/
+    // @ts-ignore - TS2769 - No overload matches this call.
+    React.createElement(_reactWindow.FixedSizeList, {
       height: menuHeight || (size === 'medium' ? menuSizeMedium : menuSizeSmall),
       itemSize: itemHeight || (size === 'medium' ? buttonSizeMedium : buttonSizeSmall),
       itemCount: optionsFiltered.length

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

@@ -0,0 +1,526 @@
+import * as React from 'react';
+import type { MenuGroupTitleOption, MenuOption, MenuProps } from './Menu';
+declare const _default: {
+    tags: string[];
+    title: string;
+    argTypes: {
+        resolveLabel: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        resolveSecondaryLabel: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onSelect: {
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onTabOut: {
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        options: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        composeOptions: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        groupTitleOptions: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        selectedOption: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        optionsVariant: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        selectedKeys: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        size: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        width: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        menuDisabled: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        isFluid: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        allowSearch: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        virtualization: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        header: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        footer: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        showResultText: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        staticLabels: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        showLabelTooltip: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        allowWrap: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _TextOnly: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        size: string;
+        options: MenuOption[];
+        selectedKeys: string[];
+    };
+};
+export declare const _TextWithTooltip: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        size: string;
+        options: MenuOption[];
+        selectedKeys: string[];
+        showLabelTooltip: {
+            maxLines: number;
+        };
+    };
+};
+export declare const _MenuWithWrap: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        size: string;
+        options: MenuOption[];
+        selectedKeys: string[];
+        allowWrap: boolean;
+    };
+};
+export declare const _WithSearch: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        size: string;
+        options: MenuOption[];
+        allowSearch: boolean;
+    };
+};
+export declare const _TextAndIconLeft: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        size: string;
+        options: MenuOption[];
+        selectedKeys: string[];
+    };
+};
+/**
+ * To make one of the options colored, you can set the classNames wrapper property in the option object.
+ * Eg:
+ * You would need to set the color of the option and manage the hover, focus and active state yourself.
+ * ### JS
+ * ```
+ * const coloredOptions: MenuOption[] = [
+ *   {
+ *     key: '1',
+ *     label: 'Edit',
+ *     iconLeft: 'coffee',
+ *   },
+ *   {
+ *     key: '2',
+ *     label: 'Delete',
+ *     iconLeft: 'trash',
+ *     classNames: { wrapper: css.dangerText },
+ *   },
+ * ];
+ * ```
+ * ### CSS
+ * ```
+ * .dangerText:hover,
+ * .dangerText:active,
+ * .dangerText:focus {
+ *   color: colorTextDanger;
+ * }
+ * ```
+ */
+export declare const _ColoredOption: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        size: string;
+        options: MenuOption[];
+    };
+};
+export declare const _TextAndIconRight: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        size: string;
+        options: MenuOption[];
+        selectedKeys: string[];
+    };
+};
+export declare const _TextAndDualIcon: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        size: string;
+        options: MenuOption[];
+        selectedKeys: string[];
+    };
+};
+export declare const _DualText: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        size: string;
+        options: MenuOption[];
+        selectedKeys: string[];
+    };
+};
+export declare const _WithResolvers: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        size: string;
+        options: MenuOption[];
+    };
+};
+export declare const _ComposeMenu: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        size: string;
+        composeOptions: MenuOption[][];
+        selectedKeys: string[];
+    };
+};
+export declare const _CustomComponentMenu: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        classNames: {
+            option: string;
+        };
+        size: string;
+        options: MenuOption[];
+        selectedKeys: string[];
+    };
+};
+export declare const _GroupTitleMenu: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        classNames: {
+            option: string;
+        };
+        size: string;
+        groupTitleOptions: MenuGroupTitleOption[];
+        selectedKeys: string[];
+    };
+};
+export declare const _GroupTitleActionMenu: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        classNames: {
+            option: string;
+        };
+        size: string;
+        selectedKeys: string[];
+    };
+};
+export declare const _CheckboxMenu: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        classNames: {
+            option: string;
+        };
+        size: string;
+        options: MenuOption[];
+        optionsVariant: string;
+        selectedKeys: string[];
+    };
+};
+export declare const _RadioMenu: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        classNames: {
+            option: string;
+        };
+        size: string;
+        options: MenuOption[];
+        optionsVariant: string;
+        selectedKeys: string[];
+    };
+};
+export declare const MenuHeader: () => React.JSX.Element;
+export declare const MenuFooter: ({ onSave, onCancel, }: {
+    onSave?: () => void;
+    onCancel?: () => void;
+}) => React.JSX.Element;
+export declare const _WithHeader: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        size: string;
+        options: MenuOption[];
+        selectedKeys: string[];
+    };
+};
+export declare const _WithFooter: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        size: string;
+        options: MenuOption[];
+        selectedKeys: string[];
+    };
+};
+export declare const _WithHeaderAndFooter: {
+    (args: MenuProps): React.JSX.Element;
+    args: {
+        isFluid: boolean;
+        menuDisabled: boolean;
+        classNames: {
+            option: string;
+        };
+        options: MenuOption[];
+        optionsVariant: string;
+        selectedKeys: string[];
+    };
+};
+//# sourceMappingURL=Menu.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,OAAO,KAAK,EAAC,oBAAoB,EAAE,UAAU,EAAE,SAAS,EAAC,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoKxE,wBA4SE;AAEF,eAAO,MAAM,SAAS;WAAU,SAAS;;;;;;;;CAAuB,CAAC;AASjE,eAAO,MAAM,gBAAgB;WAAU,SAAS;;;;;;;;;;;CAAyB,CAAC;AAW1E,eAAO,MAAM,aAAa;WAAU,SAAS;;;;;;;;;CAS5C,CAAC;AAWF,eAAO,MAAM,WAAW;WAAU,SAAS;;;;;;;;CAAuB,CAAC;AAUnE,eAAO,MAAM,gBAAgB;WAAU,SAAS;;;;;;;;CAAyB,CAAC;AAU1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,cAAc;WAAU,SAAS;;;;;;;CAAyB,CAAC;AASxE,eAAO,MAAM,iBAAiB;WAAU,SAAS;;;;;;;;CAAyB,CAAC;AAU3E,eAAO,MAAM,gBAAgB;WAAU,SAAS;;;;;;;;CAAyB,CAAC;AAU1E,eAAO,MAAM,SAAS;WAAU,SAAS;;;;;;;;CAAuB,CAAC;AAUjE,eAAO,MAAM,cAAc;WAAU,SAAS;;;;;;;CAkB7C,CAAC;AAgDF,eAAO,MAAM,YAAY;WAAU,SAAS;;;;;;;;CAAuB,CAAC;AAyDpE,eAAO,MAAM,oBAAoB;WAAU,SAAS;;;;;;;;;;;CAAyB,CAAC;AAyE9E,eAAO,MAAM,eAAe;WAAU,SAAS;;;;;;;;;;;CAAgE,CAAC;AA+FhH,eAAO,MAAM,qBAAqB;WAAU,SAAS;;;;;;;;;;CAAyC,CAAC;AAU/F,eAAO,MAAM,aAAa;WAAU,SAAS;;;;;;;;;;;;CAkB5C,CAAC;AAYF,eAAO,MAAM,UAAU;WAAU,SAAS;;;;;;;;;;;;CAczC,CAAC;AAYF,eAAO,MAAM,UAAU,yBAEhB,CAAC;AAER,eAAO,MAAM,UAAU,GACrB,uBAGG;IACD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,sBAQI,CAAC;AAER,eAAO,MAAM,WAAW;WAAU,SAAS;;;;;;;;CAAiD,CAAC;AAU7F,eAAO,MAAM,WAAW;WAAU,SAAS;;;;;;;;CAAiD,CAAC;AAU7F,eAAO,MAAM,oBAAoB;WAAU,SAAS;;;;;;;;;;;CA0BnD,CAAC"}