pixel-react 1.8.4 → 1.8.6

package/src/components/Select/types.ts

@@ -1,134 +1,144 @@
-export interface SelectProps {
-  /*
-   * Label for the select dropdown
-   */
-  label?: string;
-
-  /*
-   * If true, the select dropdown will have a label
-   */
-  showLabel?: boolean;
-
-  /*
-   * Options for the select dropdown
-   */
-  optionsList: Option[];
-
-  /*
-   * Selected option for the select dropdown
-   */
-  selectedOption: Option;
-
-  /*
-   * onChange callback function for handling selected option changes
-   */
-  onChange: (option: Option) => void;
-
-  /*
-   * If error is true, this message will be displayed
-   */
-  errorMsg?: string;
-
-  /*
-   * provide the className for the select dropdown
-   */
-  className?: string;
-
-  /*
-   *  Providing the z-index for dropdown and select
-   */
-  optionZIndex?: number;
-
-  /*
-   * Provide disable prop for the disabling the select component
-   */
-  disabled?: boolean;
-
-  /*
-   * Provide disable prop for the providing border radius at right side
-   */
-  borderRadius?: boolean;
-
-  /*
-   * Provide boolean value to show border or not
-   */
-  showBorder?: boolean;
-
-  /*
-   * Provide the boolean value if the select component is required or not
-   */
-  required?: boolean;
-  /**
-   * optionsRequired:false prop removes options from dropdown & shows static label only
-   */
-  optionsRequired?: boolean;
-
-  /*
-   * selectedOptionColor prop provides the custom color for the selected option
-   */
-  selectedOptionColor?: string;
-
-  /*
-   * Label accessor
-   */
-
-  labelAccessor?: string;
-
-  /*
-   * Value accessor
-   */
-  valueAccessor?: string;
-
-  /*
-   * Provide the custom height for the select container
-   */
-  height?: number;
-
-  /*
-   * Provide the custom width for the select container
-   */
-  width?: number | string;
-
-  /*
-   *  Provide the onBlur functionality for the select
-   */
-  onBlur?: () => void;
-
-  /*
-   * Disable the select component input
-   */
-  disableInput?: boolean;
-
-  /*
-   *  Provide the icon for the select
-   */
-  showIcon?: boolean;
-
-  /*
-   *  Provide the icon name for the select
-   */
-  iconName?: string;
-}
-
-export interface DropdownPosition {
-  positionX: number;
-  positionY: number;
-  width: number;
-  fromBottom: number;
-}
-
-export interface SelectState {
-  isInputFocused: boolean;
-  iconColor: string;
-  isIconClick: boolean;
-  showOptions: boolean;
-  options: Option[];
-  option: string;
-  dropdownPosition: DropdownPosition;
-}
-
-type OptionValue = any;
-
-export interface Option {
-  [key: string]: OptionValue;
-}
+export interface SelectProps {
+  /*
+   * Label for the select dropdown
+   */
+  label?: string;
+
+  /*
+   * If true, the select dropdown will have a label
+   */
+  showLabel?: boolean;
+
+  /*
+   * Options for the select dropdown
+   */
+  optionsList: Option[];
+
+  /*
+   * Selected option for the select dropdown
+   */
+  selectedOption: Option;
+
+  /*
+   * onChange callback function for handling selected option changes
+   */
+  onChange: (option: Option) => void;
+
+  /*
+   * If error is true, this message will be displayed
+   */
+  errorMsg?: string;
+
+  /*
+   * provide the className for the select dropdown
+   */
+  className?: string;
+
+  /*
+   *  Providing the z-index for dropdown and select
+   */
+  optionZIndex?: number;
+
+  /*
+   * Provide disable prop for the disabling the select component
+   */
+  disabled?: boolean;
+
+  /*
+   * Provide disable prop for the providing border radius at right side
+   */
+  borderRadius?: boolean;
+
+  /*
+   * Provide boolean value to show border or not
+   */
+  showBorder?: boolean;
+
+  /*
+   * Provide the boolean value if the select component is required or not
+   */
+  required?: boolean;
+  /**
+   * optionsRequired:false prop removes options from dropdown & shows static label only
+   */
+  optionsRequired?: boolean;
+
+  /*
+   * selectedOptionColor prop provides the custom color for the selected option
+   */
+  selectedOptionColor?: string;
+
+  /*
+   * Label accessor
+   */
+
+  labelAccessor?: string;
+
+  /*
+   * Value accessor
+   */
+  valueAccessor?: string;
+
+  /*
+   * Provide the custom height for the select container
+   */
+  height?: number;
+
+  /*
+   * Provide the custom width for the select container
+   */
+  width?: number | string;
+
+  /*
+   *  Provide the onBlur functionality for the select
+   */
+  onBlur?: () => void;
+
+  /*
+   * Disable the select component input
+   */
+  disableInput?: boolean;
+
+  /*
+   *  Provide the icon for the select
+   */
+  showIcon?: boolean;
+
+  /*
+   *  Provide the icon name for the select
+   */
+  iconName?: string;
+
+  /**
+   * Provide the placehoder for the select
+   */
+  placeHolder?: string;
+
+  /**
+   * Provide the boolean value if tooltip is reuired or not
+   */
+  showToolTip?: boolean
+}
+
+export interface DropdownPosition {
+  positionX: number;
+  positionY: number;
+  width: number;
+  fromBottom: number;
+}
+
+export interface SelectState {
+  isInputFocused: boolean;
+  iconColor: string;
+  isIconClick: boolean;
+  showOptions: boolean;
+  options: Option[];
+  option: string;
+  dropdownPosition: DropdownPosition;
+}
+
+type OptionValue = any;
+
+export interface Option {
+  [key: string]: OptionValue;
+}

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss

@@ -1,128 +1,128 @@
-@mixin item-center {
-  display: flex;
-  align-items: center;
-}
-
-@mixin circle($size, $color) {
-  width: $size;
-  height: $size;
-  border-radius: 50%;
-  background-color: $color;
-}
-
-@mixin arrow($color, $width, $height) {
-  width: $width;
-  height: $height;
-  background-color: $color;
-  clip-path: polygon(100% 50%, 0 100%, 0 0);
-  position: absolute;
-}
-
-.ff-sequential-connecting-branch-wrapper {
-  .ff-connecting-select-branch-wrapper {
-    height: 66px;
-    box-sizing: border-box;
-    width: fit-content;
-    margin-bottom: 16px;
-
-    .ff-select-branch-wrapper {
-      position: relative;
-      display: flex;
-      box-sizing: border-box;
-
-      .ff-sequential-select-branch {
-        width: 240px;
-      }
-
-      .ff-select-branch-arrow {
-        @include item-center;
-        position: relative;
-
-        .ff-branch-arrow-wrapper {
-          margin: 0;
-          width: 40px;
-          border-top: 1px solid var(--ff-connecting-branch-color);
-          position: relative;
-
-          .ff-branch-arrow {
-            @include arrow(var(--ff-connecting-branch-color), 6px, 6px);
-            right: -1px;
-            top: -3px;
-          }
-        }
-
-        .ff-select-branch-point {
-          @include circle(5px, var(--ff-connecting-branch-color));
-          position: absolute;
-          left: -3px;
-          z-index: 102;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-      }
-
-      .ff-select-branch-arrow-down {
-        position: absolute;
-        height: 38px;
-
-        .ff-select-branch-point {
-          @include circle(5px, var(--ff-connecting-branch-color));
-          position: absolute;
-          left: -2px;
-          z-index: 102;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-
-        .ff-select-branch-arrow {
-          width: 0;
-          height: 62px;
-          top: calc(50% + 1px);
-          border-left: 1px solid var(--ff-connecting-branch-color);
-          z-index: 102;
-        }
-      }
-    }
-
-    .ff-select-scope-datalist {
-      box-sizing: border-box;
-      width: 240px;
-      display: flex;
-      justify-content: space-between;
-
-      .ff-scope-wrapper {
-        @include item-center;
-        margin-right: 12px;
-
-        .ff-scope-text {
-          text-transform: capitalize;
-          margin: 0;
-        }
-      }
-
-      .ff-datalist-wrapper {
-        @include item-center;
-
-        #ff-sequential-machine-datalist {
-          @include item-center
-        }
-
-        .ff-dataset-icon,
-        .ff-run-delete-icon,
-        .ff-datalist-text {
-          cursor: pointer;
-        }
-
-        .ff-datalist-text {
-          margin: 0 12px 0 0;
-        }
-      }
-    }
-  }
-
-  .ff-sequential-branches-wrapper {
-    box-sizing: border-box;
-    width: fit-content;
-    height: fit-content;
-  }
-}
+@mixin item-center {
+  display: flex;
+  align-items: center;
+}
+
+@mixin circle($size, $color) {
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+  background-color: $color;
+}
+
+@mixin arrow($color, $width, $height) {
+  width: $width;
+  height: $height;
+  background-color: $color;
+  clip-path: polygon(100% 50%, 0 100%, 0 0);
+  position: absolute;
+}
+
+.ff-sequential-connecting-branch-wrapper {
+  .ff-connecting-select-branch-wrapper {
+    height: 66px;
+    box-sizing: border-box;
+    width: fit-content;
+    margin-bottom: 16px;
+
+    .ff-select-branch-wrapper {
+      position: relative;
+      display: flex;
+      box-sizing: border-box;
+
+      .ff-sequential-select-branch {
+        width: 240px;
+      }
+
+      .ff-select-branch-arrow {
+        @include item-center;
+        position: relative;
+
+        .ff-branch-arrow-wrapper {
+          margin: 0;
+          width: 40px;
+          border-top: 1px solid var(--ff-connecting-branch-color);
+          position: relative;
+
+          .ff-branch-arrow {
+            @include arrow(var(--ff-connecting-branch-color), 6px, 6px);
+            right: -1px;
+            top: -3px;
+          }
+        }
+
+        .ff-select-branch-point {
+          @include circle(5px, var(--ff-connecting-branch-color));
+          position: absolute;
+          left: -3px;
+          z-index: 102;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+
+      .ff-select-branch-arrow-down {
+        position: absolute;
+        height: 38px;
+
+        .ff-select-branch-point {
+          @include circle(5px, var(--ff-connecting-branch-color));
+          position: absolute;
+          left: -2px;
+          z-index: 102;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        .ff-select-branch-arrow {
+          width: 0;
+          height: 62px;
+          top: calc(50% + 1px);
+          border-left: 1px solid var(--ff-connecting-branch-color);
+          z-index: 102;
+        }
+      }
+    }
+
+    .ff-select-scope-datalist {
+      box-sizing: border-box;
+      width: 240px;
+      display: flex;
+      justify-content: space-between;
+
+      .ff-scope-wrapper {
+        @include item-center;
+        margin-right: 12px;
+
+        .ff-scope-text {
+          text-transform: capitalize;
+          margin: 0;
+        }
+      }
+
+      .ff-datalist-wrapper {
+        @include item-center;
+
+        #ff-sequential-machine-datalist {
+          @include item-center
+        }
+
+        .ff-dataset-icon,
+        .ff-run-delete-icon,
+        .ff-datalist-text {
+          cursor: pointer;
+        }
+
+        .ff-datalist-text {
+          margin: 0 12px 0 0;
+        }
+      }
+    }
+  }
+
+  .ff-sequential-branches-wrapper {
+    box-sizing: border-box;
+    width: fit-content;
+    height: fit-content;
+  }
+}

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx

@@ -1,67 +1,67 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import SequentialConnectingBranch from './SequentialConnectingBranch';
-import { useState } from 'react';
-import React from 'react';
-
-const meta: Meta<typeof SequentialConnectingBranch> = {
-  title: 'Components/SequentialConnectingBranch',
-  component: SequentialConnectingBranch,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof SequentialConnectingBranch>;
-
-export const Primary: Story = {
-  render: () => {
-    const machineList = [
-      {
-        label: 'FFE 123',
-        value: 'FFE 123',
-      },
-      {
-        label: 'FFE 234',
-        value: 'FFE 234',
-      },
-      {
-        label: 'FFE 345',
-        value: 'FFE 345',
-      },
-      {
-        label: 'FFE 456',
-        value: 'FFE 456',
-      },
-    ];
-    const [selectedMachine, setSelectedMachine] = useState({});
-    const [machineInstances, setMachineInstances] = useState<any>([]);
-    return (
-      <>
-        <SequentialConnectingBranch
-          machineOptionsList={machineList}
-          machineInstances={machineInstances}
-          selectedMachine={selectedMachine}
-          onHandleSelect={(option) => {
-            setSelectedMachine(option);
-          }}
-          onAddBrowserInstance={() => {}}
-          onUpdateAddBrowserInstance={() => {}}
-          onAddRunBrowserInstance={() => {}}
-          onDeleteMachineInstance={() => {}}
-          onDeleteBrowserInstance={() => {}}
-          dataSetValues={{
-            peVariableSetId: 'Test dev',
-            globalVariableSetId: 'Test dev',
-            testDataSetId: 'Test dev',
-          }}
-          onUpdateDataSetList={() => {}}
-          machineColumnWidth={500}
-          machineColumnCount={3}
-        />
-      </>
-    );
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import SequentialConnectingBranch from './SequentialConnectingBranch';
+import { useState } from 'react';
+import React from 'react';
+
+const meta: Meta<typeof SequentialConnectingBranch> = {
+  title: 'Components/SequentialConnectingBranch',
+  component: SequentialConnectingBranch,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof SequentialConnectingBranch>;
+
+export const Primary: Story = {
+  render: () => {
+    const machineList = [
+      {
+        label: 'FFE 123',
+        value: 'FFE 123',
+      },
+      {
+        label: 'FFE 234',
+        value: 'FFE 234',
+      },
+      {
+        label: 'FFE 345',
+        value: 'FFE 345',
+      },
+      {
+        label: 'FFE 456',
+        value: 'FFE 456',
+      },
+    ];
+    const [selectedMachine, setSelectedMachine] = useState({});
+    const [machineInstances, setMachineInstances] = useState<any>([]);
+    return (
+      <>
+        <SequentialConnectingBranch
+          machineOptionsList={machineList}
+          machineInstances={machineInstances}
+          selectedMachine={selectedMachine}
+          onHandleSelect={(option) => {
+            setSelectedMachine(option);
+          }}
+          onAddBrowserInstance={() => {}}
+          onUpdateAddBrowserInstance={() => {}}
+          onAddRunBrowserInstance={() => {}}
+          onDeleteMachineInstance={() => {}}
+          onDeleteBrowserInstance={() => {}}
+          dataSetValues={{
+            peVariableSetId: 'Test dev',
+            globalVariableSetId: 'Test dev',
+            testDataSetId: 'Test dev',
+          }}
+          onUpdateDataSetList={() => {}}
+          machineColumnWidth={500}
+          machineColumnCount={3}
+        />
+      </>
+    );
+  },
+};
+
+export default meta;