@agility/plenum-ui 2.0.0-rc7 → 2.0.0-rc8

package/dist/index.d.ts

@@ -402,9 +402,9 @@ declare module '@agility/plenum-ui/stories/atoms/loaders/index' {
 declare module '@agility/plenum-ui/stories/index' {
   import { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, FAIconName, BTNActionType, Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName } from "@agility/plenum-ui/stories/atoms/index";
   import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput, ITextInputProps } from "@agility/plenum-ui/stories/molecules/index";
-  import { IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons } from "@agility/plenum-ui/stories/organisms/index";
-  export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps };
-  export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput };
+  import { IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, ITextInputSelectProps } from "@agility/plenum-ui/stories/organisms/index";
+  export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, ITextInputSelectProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps };
+  export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect };
 
 }
 declare module '@agility/plenum-ui/stories/layouts/index' {
@@ -436,7 +436,7 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/InputCounter/index'
 }
 declare module '@agility/plenum-ui/stories/molecules/inputs/InputField/InputField' {
   import React from "react";
-  export type AcceptedInputTypes = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "submit" | "tel" | "text" | "url";
+  export type AcceptedInputTypes = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "submit" | "tel" | "text" | "url" | "currency";
   export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"> {
       /** Callback on change */
       handleChange: (value: string) => void;
@@ -1014,6 +1014,82 @@ declare module '@agility/plenum-ui/stories/organisms/FormInputWithAddons/index'
   export type { IFormInputWithAddonsProps };
   export default FormInputWithAddons;
 
+}
+declare module '@agility/plenum-ui/stories/organisms/TextInputSelect/InputSelect' {
+  import { FC } from "react";
+  export type SelectOptions = {
+      label: string;
+      value: string;
+  };
+  export interface InputSelectProps {
+      align: "left" | "right";
+      /** Show the CTA without Background color and a border seperator */
+      inputOptions: SelectOptions[];
+      /** Onclick callback */
+      onSelectOption?(value: string): void;
+      className?: string;
+      isDisabled?: boolean;
+  }
+  /** Comment */
+  export const InputSelect: FC<InputSelectProps>;
+
+}
+declare module '@agility/plenum-ui/stories/organisms/TextInputSelect/TextInputSelect' {
+  import { FC } from "react";
+  import { AcceptedInputTypes } from "@/stories/molecules";
+  export type SelectOptions = {
+      label: string;
+      value: string;
+  };
+  export interface ITextInputSelectProps {
+      /** Input type*/
+      type: AcceptedInputTypes;
+      /** Input ID */
+      id?: string;
+      /** Input Name */
+      name?: string;
+      /** Label for the input */
+      label?: string;
+      /** placeholder for the input */
+      placeholder?: string;
+      /** Force the focus state on the input */
+      isFocused?: boolean;
+      /** Error state */
+      isError?: boolean;
+      /** If field is required */
+      isRequired?: boolean;
+      /** Disabled state */
+      isDisabled?: boolean;
+      /** Set default value */
+      defaultValue?: string;
+      /** Set value */
+      value: string;
+      /** Message shown under the text field */
+      message?: string;
+      /** Input character counter */
+      isShowCounter?: boolean;
+      /** Max length of input character  */
+      maxLength?: number;
+      /** Select input location  */
+      selectLocation?: "left" | "right";
+      /** Prefix  */
+      prefix?: string;
+      /** List of options to show on the select field  */
+      inputOptions?: SelectOptions[];
+      /** Callback on base input */
+      onChange?(value: string): void;
+      /** Callback on input select field */
+      onSelectOption?(value: string): void;
+  }
+  const TextInputSelect: FC<ITextInputSelectProps>;
+  export default TextInputSelect;
+
+}
+declare module '@agility/plenum-ui/stories/organisms/TextInputSelect/index' {
+  import TextInputSelect, { ITextInputSelectProps } from "@agility/plenum-ui/stories/organisms/TextInputSelect/TextInputSelect";
+  export type { ITextInputSelectProps };
+  export default TextInputSelect;
+
 }
 declare module '@agility/plenum-ui/stories/organisms/index' {
   import AnimatedLabelInput, { IAnimatedLabelInputProps } from "@agility/plenum-ui/stories/organisms/AnimatedLabelInput/index";
@@ -1021,8 +1097,9 @@ declare module '@agility/plenum-ui/stories/organisms/index' {
   import Dropdown, { IDropdownClassnames, IDropdownProps, IItemProp } from "@agility/plenum-ui/stories/organisms/DropdownComponent/index";
   import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "@agility/plenum-ui/stories/organisms/EmptySectionPlaceholder/index";
   import FormInputWithAddons, { IFormInputWithAddonsProps } from "@agility/plenum-ui/stories/organisms/FormInputWithAddons/index";
-  export type { IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps };
-  export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons };
+  import TextInputSelect, { ITextInputSelectProps } from "@agility/plenum-ui/stories/organisms/TextInputSelect/index";
+  export type { IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
+  export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect };
 
 }
 declare module '@agility/plenum-ui/utils/types' {

package/dist/index.js

@@ -6117,6 +6117,152 @@ var FormInputWithAddons_default = FormInputWithAddons;
 
 // stories/organisms/FormInputWithAddons/index.tsx
 var FormInputWithAddons_default2 = FormInputWithAddons_default;
+
+// stories/organisms/TextInputSelect/TextInputSelect.tsx
+import React25, { useEffect as useEffect6, useId as useId4, useRef as useRef3, useState as useState10 } from "react";
+import { default as cn25 } from "classnames";
+
+// stories/organisms/TextInputSelect/InputSelect.tsx
+import React24, { useState as useState9 } from "react";
+import { default as cn24 } from "classnames";
+var InputSelect = ({
+  inputOptions,
+  onSelectOption,
+  align = "right",
+  className,
+  isDisabled
+}) => {
+  const [selectedOption, setSelectedOption] = useState9(inputOptions[0].value);
+  const handleChange = (e) => {
+    const targetValue = e.target.value;
+    onSelectOption && onSelectOption(targetValue);
+    setSelectedOption(targetValue);
+  };
+  if (!(inputOptions == null ? void 0 : inputOptions.length))
+    return null;
+  return /* @__PURE__ */ React24.createElement(
+    "select",
+    {
+      className: cn24(
+        "relative z-10 inline-flex items-center space-x-2 border border-gray-300 bg-white px-4 py-2 pr-7 text-sm font-medium",
+        "focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500",
+        align === "right" ? "-ml-px rounded-r border-l-white text-gray-700" : align === "left" ? "-mr-px rounded-l border-r-white text-gray-500 focus-within:z-10" : "",
+        !onSelectOption ? "cursor-default" : "",
+        className
+      ),
+      onChange: handleChange,
+      value: selectedOption,
+      disabled: isDisabled
+    },
+    inputOptions.map((option) => /* @__PURE__ */ React24.createElement("option", { key: option.value, value: option.value }, option.label))
+  );
+};
+
+// stories/organisms/TextInputSelect/TextInputSelect.tsx
+var TextInputSelect = ({
+  label,
+  isFocused,
+  isError,
+  id: id2,
+  name,
+  isRequired,
+  type,
+  defaultValue,
+  isDisabled,
+  message,
+  isShowCounter,
+  maxLength,
+  placeholder,
+  inputOptions,
+  selectLocation = "right",
+  prefix,
+  onChange,
+  onSelectOption,
+  value: externalValue
+}) => {
+  const [isFocus, setIsFocus] = useState10(Boolean(isFocused));
+  const [value, setValue] = useState10(defaultValue || "");
+  const inputRef = useRef3(null);
+  const uniqueID = useId4();
+  if (!id2)
+    id2 = `select-${uniqueID}`;
+  if (!name)
+    name = id2;
+  useEffect6(() => {
+    setValue(externalValue);
+  }, [externalValue]);
+  useEffect6(() => {
+    const input = inputRef.current;
+    if (!input || isFocus === void 0 || isFocused === void 0 || isDisabled)
+      return;
+    if (isFocus || isFocused) {
+      input.focus();
+    } else {
+      input.blur();
+    }
+  }, [isFocus, isFocused]);
+  useEffect6(() => {
+    const input = inputRef.current;
+    if (!input || defaultValue === void 0 || defaultValue === "")
+      return;
+  }, [defaultValue]);
+  const handleInputFocus = () => {
+    setIsFocus(true);
+  };
+  const handleInputBlur = () => {
+    setIsFocus(false);
+  };
+  const labelStyles = cn25("block inline-block font-medium transition-all text-sm text-gray-700 mb-1", {
+    "text-red-500 bg-white": isError
+  });
+  const discriptionStyles = cn25("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
+  return /* @__PURE__ */ React25.createElement("div", null, label && /* @__PURE__ */ React25.createElement("label", { htmlFor: id2, className: labelStyles }, label, isRequired && /* @__PURE__ */ React25.createElement("span", { className: "text-red-500" }, " *")), /* @__PURE__ */ React25.createElement("div", { className: "flex" }, (inputOptions == null ? void 0 : inputOptions.length) && selectLocation === "left" && /* @__PURE__ */ React25.createElement(
+    InputSelect,
+    {
+      inputOptions,
+      align: "left",
+      onSelectOption,
+      className: cn25(isError ? "border-red-500" : ""),
+      isDisabled
+    }
+  ), /* @__PURE__ */ React25.createElement("div", { className: "relative flex-grow focus-within:z-20" }, prefix && /* @__PURE__ */ React25.createElement("div", { className: "pointer-events-none pr-10 absolute inset-y-0 left-0 flex items-center pl-3" }, /* @__PURE__ */ React25.createElement("span", { className: "text-gray-500 sm:text-sm" }, prefix)), /* @__PURE__ */ React25.createElement(
+    InputField_default2,
+    {
+      onFocus: handleInputFocus,
+      onBlur: handleInputBlur,
+      handleChange: (v) => onChange && onChange(v),
+      ref: inputRef,
+      type,
+      name,
+      id: id2,
+      className: cn25(
+        "w-full border border-gray-300 py-2 px-3 text-sm font-normal leading-5",
+        "focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm",
+        selectLocation === "right" ? `rounded-l` : `rounded-r`,
+        isError ? "border-red-500" : "",
+        prefix ? `pl-7` : ""
+      ),
+      isDisabled,
+      defaultValue,
+      value,
+      maxLength,
+      placeholder
+    }
+  )), (inputOptions == null ? void 0 : inputOptions.length) && selectLocation === "right" && /* @__PURE__ */ React25.createElement(
+    InputSelect,
+    {
+      inputOptions,
+      align: "right",
+      onSelectOption,
+      isDisabled,
+      className: cn25(isError ? "border-red-500" : "")
+    }
+  )), /* @__PURE__ */ React25.createElement("div", { className: "flex flex-row space-x-3" }, /* @__PURE__ */ React25.createElement("div", { className: "grow" }, message && /* @__PURE__ */ React25.createElement("span", { className: discriptionStyles }, message)), isShowCounter && /* @__PURE__ */ React25.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React25.createElement(InputCounter_default, { current: Number(value == null ? void 0 : value.length), limit: maxLength }))));
+};
+var TextInputSelect_default = TextInputSelect;
+
+// stories/organisms/TextInputSelect/index.tsx
+var TextInputSelect_default2 = TextInputSelect_default;
 export {
   AnimatedLabelInput_default2 as AnimatedLabelInput,
   Avatar_default2 as Avatar,
@@ -6139,6 +6285,7 @@ export {
   radio_default as Radio,
   select_default as Select,
   TextInput_default2 as TextInput,
+  TextInputSelect_default2 as TextInputSelect,
   textArea_default as Textarea,
   toggleSwitch_default as ToggleSwitch,
   isFAIcon,