@pareto-engineering/design-system 2.0.0-alpha.4 → 2.0.0-alpha.42

package/dist/es/f/fields/TextareaInput/styles.scss

@@ -1,19 +1,32 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 @use "@pareto-engineering/bem";
 
+$default-padding: .5em;
+
 .#{bem.$base}.text-area-input{
   display: flex;
   flex-direction: column;
 
   .textarea {
-    background: var(--light-x);
-    color: var(--on-x);
+    border: var(--theme-border-style) var(--dark-y);
+    background: var(--light-y);
+    color: var(--on-y);
+    padding: $default-padding;
 
-    &:focus {
-      background: var(--dark-x);
+    &::placeholder{
+      color: var(--metadata);
     }
-  }
-}
 
+    &:not(:disabled):hover{
+      border: var(--theme-border-style) var(--light-background4);
+    }
 
+     &:disabled {
+      background-color: var(--dark-y);
+    }
 
+    &:focus {
+      background: var(--light-background4);
+    }
+  }
+}

package/dist/es/f/fields/index.js

@@ -1,8 +1,5 @@
 export { TextInput } from "./TextInput";
 export { SelectInput } from "./SelectInput";
-export { RadioInput } from "./RadioInput";
-export { CheckboxInput } from "./CheckboxInput";
-export { TaskRecommendationInput } from "./TaskRecommendationInput";
 export { ChoicesInput } from "./ChoicesInput";
 export { TextareaInput } from "./TextareaInput";
 export { RatingsInput } from "./RatingsInput";

package/dist/es/form-reset.scss

@@ -19,7 +19,7 @@ button,
 textarea,
 label,
 select {
-  background-color: inherit;
+  // background-color: inherit;
   border: 0;
   display: inline-block;
   font: inherit;

package/dist/es/index.js

@@ -4,4 +4,5 @@ export * from "./a";
 export * from "./b";
 export * from "./c";
 export * from "./d";
-export * from "./f";
+export * from "./f";
+export * from "./utils";

package/dist/es/utils/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useWindowSize } from "./useWindowSize";
+export { default as useDynamicPosition } from "./useDynamicPosition";

package/dist/es/utils/hooks/useDynamicPosition.js

@@ -0,0 +1,93 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import throttle from 'lodash/throttle';
+import useWindowSize from "./useWindowSize";
+const verticalPositions = ['top', 'bottom'];
+const horizontalPositions = ['left', 'right'];
+
+const findCompatiblePositions = (primary, secondaryArray) => {
+  if (verticalPositions.includes(primary)) {
+    return secondaryArray.filter(secondary => horizontalPositions.includes(secondary));
+  }
+
+  if (horizontalPositions.includes(primary)) {
+    return secondaryArray.filter(secondary => verticalPositions.includes(secondary));
+  }
+
+  return [];
+};
+
+const useDynamicPosition = ({
+  elementRef,
+  parentRef,
+  preferredPrimaryOrder,
+  preferredSecondaryOrder,
+  // offsetYPx,
+  offsetXPx,
+  throttleMs = 200
+}) => {
+  const isClient = typeof window === 'object';
+  const {
+    height: currentHeight,
+    width: currentWidth
+  } = useWindowSize();
+  const [primaryPosition, setPrimaryPosition] = useState(preferredPrimaryOrder[0]);
+  const compatibleSecondaryPositions = useMemo(() => findCompatiblePositions(primaryPosition, preferredSecondaryOrder), [primaryPosition, preferredSecondaryOrder]);
+  const [secondaryPosition, setSecondaryPosition] = useState(compatibleSecondaryPositions[0]);
+  const handle = useCallback(throttle(() => {
+    const parentNode = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
+    const elementNode = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
+    const {
+      top: parentTop,
+      bottom: parentBottom,
+      right: parentRight,
+      left: parentLeft
+    } = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.getBoundingClientRect()) || {};
+    const {
+      width: elementWidth,
+      height: elementHeight
+    } = (elementNode === null || elementNode === void 0 ? void 0 : elementNode.getBoundingClientRect()) || {};
+    const availablePositions = {
+      top: parentTop >= elementHeight,
+      bottom: currentHeight - parentBottom >= elementHeight,
+      right: parentRight >= elementWidth,
+      left: currentWidth - parentLeft >= elementWidth
+    };
+
+    for (let i = 0; i < preferredPrimaryOrder.length; i += 1) {
+      const position = preferredPrimaryOrder[i];
+
+      if (availablePositions[position]) {
+        setPrimaryPosition(position);
+        break;
+      }
+    }
+
+    for (let i = 0; i < compatibleSecondaryPositions.length; i += 1) {
+      const position = compatibleSecondaryPositions[i];
+
+      if (availablePositions[position]) {
+        setSecondaryPosition(position);
+        break;
+      }
+    }
+  }, throttleMs), [elementRef, offsetXPx, throttleMs]);
+  useEffect(() => {
+    if (!isClient) {
+      return false;
+    }
+
+    handle();
+    window.addEventListener('scroll', handle);
+    window.addEventListener('resize', handle);
+    return () => {
+      window.removeEventListener('scroll', handle);
+      window.removeEventListener('resize', handle);
+    };
+  }, [handle]);
+  return {
+    primaryPosition,
+    secondaryPosition
+  };
+};
+
+export default useDynamicPosition;

package/dist/es/utils/hooks/useWindowSize.js

@@ -0,0 +1,27 @@
+import { useCallback, useState, useEffect } from 'react';
+import debounce from 'lodash/debounce';
+
+const useWindowSize = (debounceMs = 700) => {
+  const isClient = typeof window === 'object';
+
+  const getSize = () => ({
+    width: isClient ? window.innerWidth : undefined,
+    height: isClient ? window.innerHeight : undefined
+  });
+
+  const [windowSize, setWindowSize] = useState(getSize);
+  const handle = useCallback(debounce(() => {
+    setWindowSize(getSize());
+  }, debounceMs));
+  useEffect(() => {
+    if (!isClient) {
+      return false;
+    }
+
+    window.addEventListener('resize', handle);
+    return () => window.removeEventListener('resize', handle);
+  }, [getSize, handle, isClient]);
+  return windowSize;
+};
+
+export default useWindowSize;

package/dist/es/utils/index.js

@@ -0,0 +1 @@
+export { useWindowSize, useDynamicPosition } from "./hooks";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.42",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -79,12 +79,13 @@
     "stylelint-config-palantir": "^5.1.0"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^2.0.0-alpha.3",
+    "@pareto-engineering/assets": "^2.0.0-alpha.18",
     "@pareto-engineering/bem": "^0.1.5",
-    "@pareto-engineering/styles": "^2.0.0-alpha.4",
+    "@pareto-engineering/styles": "^2.0.0-alpha.8",
     "date-fns": "^2.22.1",
     "formik": "^2.2.9",
     "hamburgers": "^1.1.3",
+    "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-countup": "^4.4.0",