@nulogy/components 8.18.0 → 9.0.1

package/dist/main.js

@@ -12879,7 +12879,7 @@
       };
     }
 
-    var index$1 = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+    var index = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
     var _excluded$4 = ["className", "clearValue", "cx", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
     // ==============================
@@ -13392,7 +13392,7 @@
         placement = _useState4[0],
         setPlacement = _useState4[1];
       var controlHeight = theme.spacing.controlHeight;
-      index$1(function () {
+      index(function () {
         var menuEl = ref.current;
         if (!menuEl) return;
 
@@ -13557,7 +13557,7 @@
           });
         }
       }, [controlElement, menuPosition, placement, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.offset, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.rect.left, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.rect.width]);
-      index$1(function () {
+      index(function () {
         updateComputedPosition();
       }, [updateComputedPosition]);
       var runAutoUpdate = React.useCallback(function () {
@@ -13571,7 +13571,7 @@
           });
         }
       }, [controlElement, updateComputedPosition]);
-      index$1(function () {
+      index(function () {
         runAutoUpdate();
       }, [runAutoUpdate]);
       var setMenuPortalElement = React.useCallback(function (menuPortalElement) {
@@ -49295,21 +49295,28 @@
       return label;
     };
 
-    var renderHeaderCellContent = function renderHeaderCellContent(_a) {
-      var _a$headerFormatter = _a.headerFormatter,
-          headerFormatter = _a$headerFormatter === void 0 ? defaultheaderFormatter : _a$headerFormatter,
-          column = __rest(_a, ["headerFormatter"]);
-
-      return headerFormatter(column);
+    var renderHeaderCellContent = function renderHeaderCellContent(_ref3) {
+      var _ref3$headerFormatter = _ref3.headerFormatter,
+          headerFormatter = _ref3$headerFormatter === void 0 ? defaultheaderFormatter : _ref3$headerFormatter,
+          align = _ref3.align,
+          label = _ref3.label,
+          dataKey = _ref3.dataKey,
+          width = _ref3.width;
+      return headerFormatter({
+        align: align,
+        label: label,
+        dataKey: dataKey,
+        width: width
+      });
     };
 
-    var TableHead = function TableHead(_ref3) {
-      var columns = _ref3.columns,
-          compact = _ref3.compact,
-          sticky = _ref3.sticky;
+    var TableHead = function TableHead(_ref4) {
+      var columns = _ref4.columns,
+          compact = _ref4.compact,
+          sticky = _ref4.sticky;
 
       var renderColumns = function renderColumns(allColumns) {
-        return allColumns.map(function (column) {
+        return allColumns.map(function (column, index) {
           var _a, _b;
 
           return /*#__PURE__*/React__default["default"].createElement(StyledTh, {
@@ -49326,10 +49333,6 @@
       return /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement(StyledHeaderRow, null, renderColumns(columns)));
     };
 
-    TableHead.defaultProps = {
-      sticky: false
-    };
-
     var columnPropType = PropTypes__default["default"].shape({
       align: PropTypes__default["default"].oneOf(["right", "left", "center"]),
       label: PropTypes__default["default"].string,
@@ -51865,16 +51868,15 @@
           onClick = _ref.onClick;
       return /*#__PURE__*/React__default["default"].createElement(AnimatedBox, {
         position: "relative",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: toggled ? "flex-end" : "flex-start",
         height: "24px",
         width: "48px",
         bg: disabled ? "grey" : getSwitchBackground(toggled),
         borderRadius: "20px",
         padding: "2px",
         boxShadow: "small",
-        whileHover: "hover",
+        animate: toggled ? "toggled" : "initial",
+        whileHover: "active",
+        whileFocus: "active",
         onClick: onClick
       }, children);
     };
@@ -51884,18 +51886,20 @@
           children = _ref2.children;
       return /*#__PURE__*/React__default["default"].createElement(motion.div, {
         className: "slider",
-        layout: true,
+        initial: false,
         variants: {
-          hover: {
+          active: {
             boxShadow: disabled ? undefined : Theme.shadows.focus,
             scale: disabled ? undefined : animationConfig.scale
+          },
+          toggled: {
+            marginLeft: Theme.space.x3
+          },
+          initial: {
+            marginLeft: Theme.space.none
           }
         },
         transition: animationConfig.transition,
-        whileFocus: {
-          boxShadow: disabled ? undefined : Theme.shadows.focus,
-          scale: disabled ? undefined : animationConfig.scale
-        },
         style: {
           height: "20px",
           width: "20px",

package/dist/main.module.js

@@ -12862,7 +12862,7 @@ function autoUpdate(reference, floating, update, options) {
   };
 }
 
-var index$1 = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
+var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
 
 var _excluded$4 = ["className", "clearValue", "cx", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
 // ==============================
@@ -13375,7 +13375,7 @@ var MenuPlacer = function MenuPlacer(props) {
     placement = _useState4[0],
     setPlacement = _useState4[1];
   var controlHeight = theme.spacing.controlHeight;
-  index$1(function () {
+  index(function () {
     var menuEl = ref.current;
     if (!menuEl) return;
 
@@ -13540,7 +13540,7 @@ var MenuPortal = function MenuPortal(props) {
       });
     }
   }, [controlElement, menuPosition, placement, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.offset, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.rect.left, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.rect.width]);
-  index$1(function () {
+  index(function () {
     updateComputedPosition();
   }, [updateComputedPosition]);
   var runAutoUpdate = useCallback(function () {
@@ -13554,7 +13554,7 @@ var MenuPortal = function MenuPortal(props) {
       });
     }
   }, [controlElement, updateComputedPosition]);
-  index$1(function () {
+  index(function () {
     runAutoUpdate();
   }, [runAutoUpdate]);
   var setMenuPortalElement = useCallback(function (menuPortalElement) {
@@ -49278,21 +49278,28 @@ var defaultheaderFormatter = function defaultheaderFormatter(_ref2) {
   return label;
 };
 
-var renderHeaderCellContent = function renderHeaderCellContent(_a) {
-  var _a$headerFormatter = _a.headerFormatter,
-      headerFormatter = _a$headerFormatter === void 0 ? defaultheaderFormatter : _a$headerFormatter,
-      column = __rest(_a, ["headerFormatter"]);
-
-  return headerFormatter(column);
+var renderHeaderCellContent = function renderHeaderCellContent(_ref3) {
+  var _ref3$headerFormatter = _ref3.headerFormatter,
+      headerFormatter = _ref3$headerFormatter === void 0 ? defaultheaderFormatter : _ref3$headerFormatter,
+      align = _ref3.align,
+      label = _ref3.label,
+      dataKey = _ref3.dataKey,
+      width = _ref3.width;
+  return headerFormatter({
+    align: align,
+    label: label,
+    dataKey: dataKey,
+    width: width
+  });
 };
 
-var TableHead = function TableHead(_ref3) {
-  var columns = _ref3.columns,
-      compact = _ref3.compact,
-      sticky = _ref3.sticky;
+var TableHead = function TableHead(_ref4) {
+  var columns = _ref4.columns,
+      compact = _ref4.compact,
+      sticky = _ref4.sticky;
 
   var renderColumns = function renderColumns(allColumns) {
-    return allColumns.map(function (column) {
+    return allColumns.map(function (column, index) {
       var _a, _b;
 
       return /*#__PURE__*/React__default.createElement(StyledTh, {
@@ -49309,10 +49316,6 @@ var TableHead = function TableHead(_ref3) {
   return /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement(StyledHeaderRow, null, renderColumns(columns)));
 };
 
-TableHead.defaultProps = {
-  sticky: false
-};
-
 var columnPropType = PropTypes.shape({
   align: PropTypes.oneOf(["right", "left", "center"]),
   label: PropTypes.string,
@@ -51848,16 +51851,15 @@ var Switch = function Switch(_ref) {
       onClick = _ref.onClick;
   return /*#__PURE__*/React__default.createElement(AnimatedBox, {
     position: "relative",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: toggled ? "flex-end" : "flex-start",
     height: "24px",
     width: "48px",
     bg: disabled ? "grey" : getSwitchBackground(toggled),
     borderRadius: "20px",
     padding: "2px",
     boxShadow: "small",
-    whileHover: "hover",
+    animate: toggled ? "toggled" : "initial",
+    whileHover: "active",
+    whileFocus: "active",
     onClick: onClick
   }, children);
 };
@@ -51867,18 +51869,20 @@ var Slider = function Slider(_ref2) {
       children = _ref2.children;
   return /*#__PURE__*/React__default.createElement(motion.div, {
     className: "slider",
-    layout: true,
+    initial: false,
     variants: {
-      hover: {
+      active: {
         boxShadow: disabled ? undefined : Theme.shadows.focus,
         scale: disabled ? undefined : animationConfig.scale
+      },
+      toggled: {
+        marginLeft: Theme.space.x3
+      },
+      initial: {
+        marginLeft: Theme.space.none
       }
     },
     transition: animationConfig.transition,
-    whileFocus: {
-      boxShadow: disabled ? undefined : Theme.shadows.focus,
-      scale: disabled ? undefined : animationConfig.scale
-    },
     style: {
       height: "20px",
       width: "20px",

package/dist/src/Table/Table.types.d.ts

@@ -1,17 +1,17 @@
-import { Key } from "react";
+import type { Key } from "react";
 import PropTypes from "prop-types";
 export type RowType = unknown;
-export type CellInfoType = {
+export interface CellInfoType {
     cellData: unknown;
     column: ColumnType;
     row: RowType;
-};
-type ColumnInfoType = {
+}
+interface ColumnInfoType {
     align?: ColumnAlignment;
     label: string;
     dataKey?: Key;
     width?: string | number;
-};
+}
 type ColumnAlignment = "left" | "right" | "center";
 export type ColumnType = {
     align?: ColumnAlignment;

package/dist/src/Table/TableHead.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { Columns } from "./Table.types";
-type TableHeadProps = {
+import type { Columns } from "./Table.types";
+interface TableHeadProps {
     columns: Columns;
     compact?: boolean;
     sticky?: boolean;
-};
-declare const TableHead: React.FC<TableHeadProps>;
+}
+declare const TableHead: ({ columns, compact, sticky }: TableHeadProps) => React.JSX.Element;
 export default TableHead;

package/dist/src/Toggle/Toggle.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-import { DefaultNDSThemeType } from "../theme.type";
 import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { DefaultNDSThemeType } from "../theme.type";
 declare const ToggleComponent: React.ForwardRefExoticComponent<SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     onChange?: (...args: any[]) => any;
     size?: ComponentSize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "8.18.0",
+  "version": "9.0.1",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {