@ballistix.digital/react-components 3.3.3 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -3,6 +3,7 @@ import { DeepPartialType } from 'types/DeepPartialType';
3
3
  import { IconName } from '@fortawesome/fontawesome-svg-core';
4
4
  import { Placement } from '@floating-ui/react';
5
5
  import { Menu } from '@headlessui/react';
6
+ import { AnchorProps } from '@headlessui/react/dist/internal/floating';
6
7
  import { ColumnDef, SortingState, ColumnOrderState, Row, Table } from '@tanstack/react-table';
7
8
  import { TButtonElementStyles as TButtonElementStyles$1 } from 'components/Element/Button';
8
9
  import { TDropdownElementStyles as TDropdownElementStyles$1 } from 'components/Element/Dropdown';
@@ -159,7 +160,7 @@ type TProps$c = {
159
160
  trigger?: ReactNode;
160
161
  dataCy?: string;
161
162
  type?: 'button' | 'compact';
162
- direction?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
163
+ direction?: AnchorProps;
163
164
  isEscapingOverflow?: boolean;
164
165
  styles?: TDropdownElementStyles;
165
166
  };
package/dist/index.esm.js CHANGED
@@ -11,7 +11,7 @@ import { fas } from '@fortawesome/pro-solid-svg-icons';
11
11
  import { fat } from '@fortawesome/pro-thin-svg-icons';
12
12
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
13
13
  import { useFloating, offset, flip, shift, arrow, autoUpdate, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingArrow } from '@floating-ui/react';
14
- import { Menu, Transition, Dialog, Popover, Switch as Switch$1 } from '@headlessui/react';
14
+ import { Menu, MenuButton, Transition, MenuItems, Dialog, Popover, Switch as Switch$1 } from '@headlessui/react';
15
15
  import { useMask } from '@react-input/mask';
16
16
  import { ViewColumnsIcon, ChevronDownIcon as ChevronDownIcon$1, TableCellsIcon, XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
17
17
  import { useReactTable, getCoreRowModel, flexRender, createColumnHelper as createColumnHelper$1 } from '@tanstack/react-table';
@@ -730,18 +730,18 @@ var styles$r = {
730
730
  };
731
731
 
732
732
  var Container$3 = function (props) {
733
- var children = props.children, label = props.label, trigger = props.trigger, dataCy = props.dataCy, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, _c = props.isEscapingOverflow, isEscapingOverflow = _c === void 0 ? false : _c, stylesOverrides = props.styles;
733
+ var children = props.children, label = props.label, trigger = props.trigger, dataCy = props.dataCy, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom end' : _b, _c = props.isEscapingOverflow, isEscapingOverflow = _c === void 0 ? false : _c, stylesOverrides = props.styles;
734
734
  var handleGenerateStyle = function () {
735
735
  var result = deepCopyObject(styles$q.base);
736
736
  var keys = calculateNestedKeys(styles$q.base);
737
737
  keys.forEach(function (key) {
738
- set(result, key, toClassName(get(styles$q.base, key), type && get(styles$q[type], key), direction && get(styles$q[direction], key), get(stylesOverrides, key)));
738
+ set(result, key, toClassName(get(styles$q.base, key), type && get(styles$q[type], key), get(stylesOverrides, key)));
739
739
  });
740
740
  return result;
741
741
  };
742
742
  var styles = handleGenerateStyle();
743
743
  return (jsxs(Menu, { as: "div", className: toClassName(styles.container, !isEscapingOverflow && 'relative'), children: [jsxs("div", { children: [type === 'button' &&
744
- (!trigger ? (jsxs(Menu.Button, { className: styles.button, "data-cy": dataCy, children: [label, jsx(ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] })) : (jsx(Menu.Button, { "data-cy": dataCy, children: trigger }))), type === 'compact' && (jsxs(Menu.Button, { className: styles.compact, "data-cy": dataCy, children: [jsx("span", { className: "sr-only", children: label }), jsx(EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] }))] }), jsx(Transition, { as: Fragment$1, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95", children: jsx(Menu.Items, { className: styles.items, children: children }) })] }));
744
+ (!trigger ? (jsxs(MenuButton, { className: styles.button, "data-cy": dataCy, children: [label, jsx(ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] })) : (jsx(MenuButton, { "data-cy": dataCy, children: trigger }))), type === 'compact' && (jsxs(MenuButton, { className: styles.compact, "data-cy": dataCy, children: [jsx("span", { className: "sr-only", children: label }), jsx(EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] }))] }), jsx(Transition, { as: Fragment$1, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95", children: jsx(MenuItems, { anchor: direction, className: styles.items, children: children }) })] }));
745
745
  };
746
746
  var DropdownElement = {
747
747
  Container: Container$3,
package/dist/index.js CHANGED
@@ -732,18 +732,18 @@ var styles$r = {
732
732
  };
733
733
 
734
734
  var Container$3 = function (props) {
735
- var children = props.children, label = props.label, trigger = props.trigger, dataCy = props.dataCy, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, _c = props.isEscapingOverflow, isEscapingOverflow = _c === void 0 ? false : _c, stylesOverrides = props.styles;
735
+ var children = props.children, label = props.label, trigger = props.trigger, dataCy = props.dataCy, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom end' : _b, _c = props.isEscapingOverflow, isEscapingOverflow = _c === void 0 ? false : _c, stylesOverrides = props.styles;
736
736
  var handleGenerateStyle = function () {
737
737
  var result = deepCopyObject(styles$q.base);
738
738
  var keys = calculateNestedKeys(styles$q.base);
739
739
  keys.forEach(function (key) {
740
- lodash.set(result, key, toClassName(lodash.get(styles$q.base, key), type && lodash.get(styles$q[type], key), direction && lodash.get(styles$q[direction], key), lodash.get(stylesOverrides, key)));
740
+ lodash.set(result, key, toClassName(lodash.get(styles$q.base, key), type && lodash.get(styles$q[type], key), lodash.get(stylesOverrides, key)));
741
741
  });
742
742
  return result;
743
743
  };
744
744
  var styles = handleGenerateStyle();
745
745
  return (jsxRuntime.jsxs(react$1.Menu, { as: "div", className: toClassName(styles.container, !isEscapingOverflow && 'relative'), children: [jsxRuntime.jsxs("div", { children: [type === 'button' &&
746
- (!trigger ? (jsxRuntime.jsxs(react$1.Menu.Button, { className: styles.button, "data-cy": dataCy, children: [label, jsxRuntime.jsx(solid.ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] })) : (jsxRuntime.jsx(react$1.Menu.Button, { "data-cy": dataCy, children: trigger }))), type === 'compact' && (jsxRuntime.jsxs(react$1.Menu.Button, { className: styles.compact, "data-cy": dataCy, children: [jsxRuntime.jsx("span", { className: "sr-only", children: label }), jsxRuntime.jsx(solid.EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] }))] }), jsxRuntime.jsx(react$1.Transition, { as: React.Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95", children: jsxRuntime.jsx(react$1.Menu.Items, { className: styles.items, children: children }) })] }));
746
+ (!trigger ? (jsxRuntime.jsxs(react$1.MenuButton, { className: styles.button, "data-cy": dataCy, children: [label, jsxRuntime.jsx(solid.ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] })) : (jsxRuntime.jsx(react$1.MenuButton, { "data-cy": dataCy, children: trigger }))), type === 'compact' && (jsxRuntime.jsxs(react$1.MenuButton, { className: styles.compact, "data-cy": dataCy, children: [jsxRuntime.jsx("span", { className: "sr-only", children: label }), jsxRuntime.jsx(solid.EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] }))] }), jsxRuntime.jsx(react$1.Transition, { as: React.Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95", children: jsxRuntime.jsx(react$1.MenuItems, { anchor: direction, className: styles.items, children: children }) })] }));
747
747
  };
748
748
  var DropdownElement = {
749
749
  Container: Container$3,