@homefile/components-v2 2.8.24 → 2.8.25

package/dist/components/inputs/ItemSubTypeSelect.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Text } from '@chakra-ui/react';
 import { SelectInput } from '..';
 export const ItemSubTypeSelect = ({ onSelectSubType, subTypes, initialSubType, label, }) => {
-    return (_jsx(Box, { bg: "lightBlue.1", py: "1rem", w: "100%", children: initialSubType && (_jsxs(Flex, { alignItems: "center", justifyContent: "flex-start", children: [label && _jsx(Text, { p: ".5rem", children: label }), _jsx(SelectInput, { handleClick: onSelectSubType, initialValue: initialSubType.name, items: subTypes })] })) }));
+    return (_jsx(Box, { bg: "lightBlue.1", py: "1rem", px: "base", children: initialSubType && (_jsxs(Flex, { alignItems: "center", gap: "base", children: [label && _jsx(Text, { flexShrink: 0, children: label }), _jsx(SelectInput, { handleClick: onSelectSubType, initialValue: initialSubType.name, items: subTypes })] })) }));
 };

package/dist/stories/forms/ItemFormPanel/ItemFormPanel.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ItemFormPanel, ItemFormTabs, ItemNameHeader, RightPanel, } from '../../../components';
+import { ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemSubTypeSelect, RightPanel, } from '../../../components';
 import { Paint } from '../../../assets/images/groups';
 import { action } from '@storybook/addon-actions';
 import { contactFieldsMock } from '../../../mocks';
@@ -16,5 +16,13 @@ export default {
     },
 };
 export const ItemFormPanelComponent = (args) => {
-    return (_jsx(RightPanel, { isOpen: true, onClose: () => null, children: _jsxs(ItemFormPanel, Object.assign({}, args, { children: [_jsx(ItemNameHeader, { id: "item-name-header", onSave: action('onSaveItemName') }), _jsx(ItemFormTabs, { form: contactFieldsMock })] })) }));
+    return (_jsx(RightPanel, { isOpen: true, onClose: () => null, children: _jsxs(ItemFormPanel, Object.assign({}, args, { children: [_jsx(ItemNameHeader, { id: "item-name-header", onSave: action('onSaveItemName') }), _jsx(ItemSubTypeSelect, { initialSubType: {
+                        _id: '1',
+                        name: 'Sub Type',
+                    }, onSelectSubType: action('onSelectSubType'), label: "Category", subTypes: [
+                        {
+                            _id: '1',
+                            name: 'Sub Type',
+                        },
+                    ] }), _jsx(ItemFormTabs, { form: contactFieldsMock })] })) }));
 };

package/dist/stories/inputs/ItemSubTypeSelect.stories.d.ts

@@ -5,7 +5,7 @@ export default _default;
 export declare const ItemSubTypeSelectComponent: {
     (args: ItemSubTypeSelectI): import("react/jsx-runtime").JSX.Element;
     args: {
-        handleSelectSubType: () => null;
+        onSelectSubType: () => null;
         subTypes: {
             _id: string;
             name: string;

package/dist/stories/inputs/ItemSubTypeSelect.stories.js

@@ -10,7 +10,7 @@ export const ItemSubTypeSelectComponent = (args) => {
     return (_jsx(Center, { width: "fit-content", p: "base", bg: "white", children: _jsx(ItemSubTypeSelect, Object.assign({}, args)) }));
 };
 ItemSubTypeSelectComponent.args = {
-    handleSelectSubType: () => null,
+    onSelectSubType: () => null,
     subTypes: SelectGroups,
     initialSubType: SelectGroups[0],
     label: 'Category Name',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.8.24",
+  "version": "2.8.25",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/inputs/ItemSubTypeSelect.tsx

@@ -9,10 +9,10 @@ export const ItemSubTypeSelect = ({
   label,
 }: ItemSubTypeSelectI) => {
   return (
-    <Box bg="lightBlue.1" py="1rem" w="100%">
+    <Box bg="lightBlue.1" py="1rem" px="base">
       {initialSubType && (
-        <Flex alignItems="center" justifyContent="flex-start">
-          {label && <Text p=".5rem">{label}</Text>}
+        <Flex alignItems="center" gap="base">
+          {label && <Text flexShrink={0}>{label}</Text>}
           <SelectInput
             handleClick={onSelectSubType}
             initialValue={initialSubType.name}

package/src/stories/forms/ItemFormPanel/ItemFormPanel.stories.tsx

@@ -3,6 +3,7 @@ import {
   ItemFormPanel,
   ItemFormTabs,
   ItemNameHeader,
+  ItemSubTypeSelect,
   RightPanel,
 } from '@/components'
 import { ItemFormPanelI } from '@/interfaces'
@@ -31,6 +32,20 @@ export const ItemFormPanelComponent = (args: ItemFormPanelI) => {
           id="item-name-header"
           onSave={action('onSaveItemName')}
         />
+        <ItemSubTypeSelect
+          initialSubType={{
+            _id: '1',
+            name: 'Sub Type',
+          }}
+          onSelectSubType={action('onSelectSubType')}
+          label="Category"
+          subTypes={[
+            {
+              _id: '1',
+              name: 'Sub Type',
+            },
+          ]}
+        />
         <ItemFormTabs form={contactFieldsMock} />
       </ItemFormPanel>
     </RightPanel>

package/src/stories/inputs/ItemSubTypeSelect.stories.tsx

@@ -18,7 +18,7 @@ export const ItemSubTypeSelectComponent = (args: ItemSubTypeSelectI) => {
 }
 
 ItemSubTypeSelectComponent.args = {
-  handleSelectSubType: () => null,
+  onSelectSubType: () => null,
   subTypes: SelectGroups,
   initialSubType: SelectGroups[0],
   label: 'Category Name',