M: Improve UI borders and styling props

rsconcept/frontend/src/components/select/MiniSelectorOSS.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import clsx from 'clsx';
+
 import { IconOSS } from '@/components/Icons';
 import { CProps } from '@/components/props';
 import Dropdown from '@/components/ui/Dropdown';
@@ -10,12 +12,12 @@ import useDropdown from '@/hooks/useDropdown';
 import { ILibraryItemReference } from '@/models/library';
 import { prefixes } from '@/utils/constants';
 
-interface MiniSelectorOSSProps {
+interface MiniSelectorOSSProps extends CProps.Styling {
   items: ILibraryItemReference[];
   onSelect: (event: CProps.EventMouse, newValue: ILibraryItemReference) => void;
 }
 
-function MiniSelectorOSS({ items, onSelect }: MiniSelectorOSSProps) {
+function MiniSelectorOSS({ items, onSelect, className, ...restProps }: MiniSelectorOSSProps) {
   const ossMenu = useDropdown();
 
   function onToggle(event: CProps.EventMouse) {
@@ -27,7 +29,7 @@ function MiniSelectorOSS({ items, onSelect }: MiniSelectorOSSProps) {
   }
 
   return (
-    <div ref={ossMenu.ref} className='flex items-center'>
+    <div ref={ossMenu.ref} className={clsx('flex items-center', className)} {...restProps}>
       <MiniButton
         icon={<IconOSS size='1.25rem' className='icon-primary' />}
         title='Операционные схемы'

rsconcept/frontend/src/components/select/PickConstituenta.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { useEffect, useMemo, useState } from 'react';
 
 import DataTable, { createColumnHelper, IConditionalStyle } from '@/components/ui/DataTable';
@@ -12,9 +13,10 @@ import { prefixes } from '@/utils/constants';
 import { describeConstituenta } from '@/utils/labels';
 
 import BadgeConstituenta from '../info/BadgeConstituenta';
+import { CProps } from '../props';
 import NoData from '../ui/NoData';
 
-interface PickConstituentaProps {
+interface PickConstituentaProps extends CProps.Styling {
   id?: string;
   prefixID: string;
   data?: IConstituenta[];
@@ -41,7 +43,9 @@ function PickConstituenta({
   describeFunc = describeConstituenta,
   matchFunc = (cst, filter) => matchConstituenta(cst, filter, CstMatchMode.ALL),
   onBeginFilter,
-  onSelectValue
+  onSelectValue,
+  className,
+  ...restProps
 }: PickConstituentaProps) {
   const { colors } = useConceptOptions();
   const [filteredData, setFilteredData] = useState<IConstituenta[]>([]);
@@ -89,7 +93,7 @@ function PickConstituenta({
   );
 
   return (
-    <div className='border divide-y'>
+    <div className={clsx('border divide-y', className)} {...restProps}>
       <SearchBar
         id={id ? `${id}__search` : undefined}
         className='clr-input rounded-t-md'

rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx

@@ -12,11 +12,12 @@ import { isBasicConcept, matchConstituenta } from '@/models/rsformAPI';
 import { describeConstituenta } from '@/utils/labels';
 
 import BadgeConstituenta from '../info/BadgeConstituenta';
+import { CProps } from '../props';
 import NoData from '../ui/NoData';
 import SearchBar from '../ui/SearchBar';
 import ToolbarGraphSelection from './ToolbarGraphSelection';
 
-interface PickMultiConstituentaProps {
+interface PickMultiConstituentaProps extends CProps.Styling {
   id?: string;
   schema: IRSForm;
   data: IConstituenta[];
@@ -39,7 +40,9 @@ function PickMultiConstituenta({
   rows,
   noBorder,
   selected,
-  setSelected
+  setSelected,
+  className,
+  ...restProps
 }: PickMultiConstituentaProps) {
   const { colors } = useConceptOptions();
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
@@ -120,7 +123,7 @@ function PickMultiConstituenta({
   );
 
   return (
-    <div className={noBorder ? '' : 'border'}>
+    <div className={clsx(noBorder ? '' : 'border', className)} {...restProps}>
       <div className={clsx('px-3 flex justify-between items-center', 'clr-input', 'border-b', 'rounded-t-md')}>
         <div className='w-[24ch] select-none whitespace-nowrap'>
           {data.length > 0 ? `Выбраны ${selected.length} из ${data.length}` : 'Конституенты'}
@@ -147,7 +150,7 @@ function PickMultiConstituenta({
         noFooter
         rows={rows}
         contentHeight='1.3rem'
-        className={clsx('cc-scroll-y', 'text-sm', 'select-none')}
+        className='cc-scroll-y text-sm select-none rounded-b-md'
         data={filtered}
         columns={columns}
         headPosition='0rem'

rsconcept/frontend/src/components/select/PickMultiOperation.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { useCallback, useMemo, useState } from 'react';
 
 import { IconMoveDown, IconMoveUp, IconRemove } from '@/components/Icons';
@@ -9,7 +10,9 @@ import MiniButton from '@/components/ui/MiniButton';
 import NoData from '@/components/ui/NoData';
 import { IOperation, OperationID } from '@/models/oss';
 
-interface PickMultiOperationProps {
+import { CProps } from '../props';
+
+interface PickMultiOperationProps extends CProps.Styling {
   rows?: number;
 
   items: IOperation[];
@@ -19,7 +22,7 @@ interface PickMultiOperationProps {
 
 const columnHelper = createColumnHelper<IOperation>();
 
-function PickMultiOperation({ rows, items, selected, setSelected }: PickMultiOperationProps) {
+function PickMultiOperation({ rows, items, selected, setSelected, className, ...restProps }: PickMultiOperationProps) {
   const selectedItems = useMemo(
     () => selected.map(itemID => items.find(item => item.id === itemID)!),
     [items, selected]
@@ -124,7 +127,10 @@ function PickMultiOperation({ rows, items, selected, setSelected }: PickMultiOpe
   );
 
   return (
-    <div className='flex flex-col gap-1 border-t border-x rounded-t-md clr-input'>
+    <div
+      className={clsx('flex flex-col gap-1', ' border-t border-x rounded-md', 'clr-input', className)}
+      {...restProps}
+    >
       <SelectOperation
         noBorder
         items={nonSelectedItems} // prettier: split-line
@@ -136,7 +142,7 @@ function PickMultiOperation({ rows, items, selected, setSelected }: PickMultiOpe
         noFooter
         rows={rows}
         contentHeight='1.3rem'
-        className='cc-scroll-y text-sm select-none border-y'
+        className='cc-scroll-y text-sm select-none border-y rounded-b-md'
         data={selectedItems}
         columns={columns}
         headPosition='0rem'

rsconcept/frontend/src/components/select/PickSchema.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 
@@ -17,7 +18,7 @@ import FlexColumn from '../ui/FlexColumn';
 import MiniButton from '../ui/MiniButton';
 import SelectLocation from './SelectLocation';
 
-interface PickSchemaProps {
+interface PickSchemaProps extends CProps.Styling {
   id?: string;
   initialFilter?: string;
   rows?: number;
@@ -39,7 +40,9 @@ function PickSchema({
   itemType,
   value,
   onSelectValue,
-  baseFilter
+  baseFilter,
+  className,
+  ...restProps
 }: PickSchemaProps) {
   const intl = useIntl();
   const { colors } = useConceptOptions();
@@ -120,11 +123,11 @@ function PickSchema({
   );
 
   return (
-    <div className='border divide-y'>
+    <div className={clsx('border divide-y', className)} {...restProps}>
-      <div className='flex justify-between clr-input items-center pr-1'>
+      <div className='flex justify-between clr-input items-center pr-1 rounded-t-md'>
         <SearchBar
           id={id ? `${id}__search` : undefined}
-          className='clr-input flex-grow'
+          className='clr-input flex-grow rounded-t-md'
           noBorder
           value={filterText}
           onChange={newValue => setFilterText(newValue)}

rsconcept/frontend/src/components/select/PickSubstitutions.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { useCallback, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
@@ -14,10 +15,11 @@ import { ConstituentaID, IConstituenta, IRSForm } from '@/models/rsform';
 import { errors } from '@/utils/labels';
 
 import { IconAccept, IconPageLeft, IconPageRight, IconRemove, IconReplace } from '../Icons';
+import { CProps } from '../props';
 import NoData from '../ui/NoData';
 import SelectLibraryItem from './SelectLibraryItem';
 
-interface PickSubstitutionsProps {
+interface PickSubstitutionsProps extends CProps.Styling {
   substitutions: ICstSubstitute[];
   setSubstitutions: React.Dispatch<React.SetStateAction<ICstSubstitute[]>>;
   suggestions?: ICstSubstitute[];
@@ -40,7 +42,9 @@ function PickSubstitutions({
   rows,
   schemas,
   filter,
-  allowSelfSubstitution
+  allowSelfSubstitution,
+  className,
+  ...restProps
 }: PickSubstitutionsProps) {
   const { colors } = useConceptOptions();
 
@@ -257,9 +261,9 @@ function PickSubstitutions({
   );
 
   return (
-    <div className='flex flex-col'>
+    <div className={clsx('flex flex-col', className)} {...restProps}>
       <div className='flex items-end gap-3 justify-stretch'>
-        <div className='flex-grow flex flex-col basis-1/2 gap-[0.125rem] border-x border-t clr-input'>
+        <div className='flex-grow flex flex-col basis-1/2 gap-[0.125rem] border-x border-t clr-input rounded-t-md'>
           <SelectLibraryItem
             noBorder
             placeholder='Выберите аргумент'
@@ -297,7 +301,7 @@ function PickSubstitutions({
           />
         </div>
 
-        <div className='flex-grow basis-1/2 flex flex-col gap-[0.125rem] border-x border-t clr-input'>
+        <div className='flex-grow basis-1/2 flex flex-col gap-[0.125rem] border-x border-t clr-input rounded-t-md'>
           <SelectLibraryItem
             noBorder
             placeholder='Выберите аргумент'
@@ -320,7 +324,7 @@ function PickSubstitutions({
         dense
         noHeader
         noFooter
-        className='text-sm border select-none cc-scroll-y'
+        className='text-sm border rounded-t-none select-none cc-scroll-y'
         rows={rows}
         contentHeight='1.3rem'
         data={substitutionData}

rsconcept/frontend/src/components/select/SelectAccessPolicy.tsx

@@ -9,17 +9,18 @@ import { prefixes } from '@/utils/constants';
 import { describeAccessPolicy, labelAccessPolicy } from '@/utils/labels';
 
 import { PolicyIcon } from '../DomainIcons';
+import { CProps } from '../props';
 import DropdownButton from '../ui/DropdownButton';
 import MiniButton from '../ui/MiniButton';
 
-interface SelectAccessPolicyProps {
+interface SelectAccessPolicyProps extends CProps.Styling {
   value: AccessPolicy;
   onChange: (value: AccessPolicy) => void;
   disabled?: boolean;
   stretchLeft?: boolean;
 }
 
-function SelectAccessPolicy({ value, disabled, stretchLeft, onChange }: SelectAccessPolicyProps) {
+function SelectAccessPolicy({ value, disabled, stretchLeft, onChange, ...restProps }: SelectAccessPolicyProps) {
   const menu = useDropdown();
 
   const handleChange = useCallback(
@@ -33,7 +34,7 @@ function SelectAccessPolicy({ value, disabled, stretchLeft, onChange }: SelectAc
   );
 
   return (
-    <div ref={menu.ref}>
+    <div ref={menu.ref} {...restProps}>
       <MiniButton
         title={`Доступ: ${labelAccessPolicy(value)}`}
         hideTitle={menu.isOpen}

rsconcept/frontend/src/components/select/SelectGraphFilter.tsx

@@ -11,15 +11,16 @@ import { prefixes } from '@/utils/constants';
 import { describeCstSource, labelCstSource } from '@/utils/labels';
 
 import { DependencyIcon } from '../DomainIcons';
+import { CProps } from '../props';
 import DropdownButton from '../ui/DropdownButton';
 
-interface SelectGraphFilterProps {
+interface SelectGraphFilterProps extends CProps.Styling {
   value: DependencyMode;
   dense?: boolean;
   onChange: (value: DependencyMode) => void;
 }
 
-function SelectGraphFilter({ value, dense, onChange }: SelectGraphFilterProps) {
+function SelectGraphFilter({ value, dense, onChange, ...restProps }: SelectGraphFilterProps) {
   const menu = useDropdown();
   const size = useWindowSize();
 
@@ -32,7 +33,7 @@ function SelectGraphFilter({ value, dense, onChange }: SelectGraphFilterProps) {
   );
 
   return (
-    <div ref={menu.ref}>
+    <div ref={menu.ref} {...restProps}>
       <SelectorButton
         transparent
         tabIndex={-1}

rsconcept/frontend/src/components/select/SelectItemType.tsx

@@ -9,17 +9,18 @@ import { prefixes } from '@/utils/constants';
 import { describeLibraryItemType, labelLibraryItemType } from '@/utils/labels';
 
 import { ItemTypeIcon } from '../DomainIcons';
+import { CProps } from '../props';
 import DropdownButton from '../ui/DropdownButton';
 import SelectorButton from '../ui/SelectorButton';
 
-interface SelectItemTypeProps {
+interface SelectItemTypeProps extends CProps.Styling {
   value: LibraryItemType;
   onChange: (value: LibraryItemType) => void;
   disabled?: boolean;
   stretchLeft?: boolean;
 }
 
-function SelectItemType({ value, disabled, stretchLeft, onChange }: SelectItemTypeProps) {
+function SelectItemType({ value, disabled, stretchLeft, onChange, ...restProps }: SelectItemTypeProps) {
   const menu = useDropdown();
 
   const handleChange = useCallback(
@@ -33,7 +34,7 @@ function SelectItemType({ value, disabled, stretchLeft, onChange }: SelectItemTy
   );
 
   return (
-    <div ref={menu.ref}>
+    <div ref={menu.ref} {...restProps}>
       <SelectorButton
         transparent
         title={describeLibraryItemType(value)}

rsconcept/frontend/src/components/select/SelectLocationHead.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { useCallback } from 'react';
 
 import Dropdown from '@/components/ui/Dropdown';
@@ -10,15 +11,16 @@ import { prefixes } from '@/utils/constants';
 import { describeLocationHead, labelLocationHead } from '@/utils/labels';
 
 import { LocationIcon } from '../DomainIcons';
+import { CProps } from '../props';
 import DropdownButton from '../ui/DropdownButton';
 
-interface SelectLocationHeadProps {
+interface SelectLocationHeadProps extends CProps.Styling {
   value: LocationHead;
   onChange: (newValue: LocationHead) => void;
   excluded?: LocationHead[];
 }
 
-function SelectLocationHead({ value, excluded = [], onChange }: SelectLocationHeadProps) {
+function SelectLocationHead({ value, excluded = [], onChange, className, ...restProps }: SelectLocationHeadProps) {
   const menu = useDropdown();
 
   const handleChange = useCallback(
@@ -30,7 +32,7 @@ function SelectLocationHead({ value, excluded = [], onChange }: SelectLocationHe
   );
 
   return (
-    <div ref={menu.ref} className='h-full text-right'>
+    <div ref={menu.ref} className={clsx('h-full text-right', className)} {...restProps}>
       <SelectorButton
         transparent
         tabIndex={-1}

rsconcept/frontend/src/components/select/SelectMatchMode.tsx

@@ -11,15 +11,16 @@ import { prefixes } from '@/utils/constants';
 import { describeCstMatchMode, labelCstMatchMode } from '@/utils/labels';
 
 import { MatchModeIcon } from '../DomainIcons';
+import { CProps } from '../props';
 import DropdownButton from '../ui/DropdownButton';
 
-interface SelectMatchModeProps {
+interface SelectMatchModeProps extends CProps.Styling {
   value: CstMatchMode;
   dense?: boolean;
   onChange: (value: CstMatchMode) => void;
 }
 
-function SelectMatchMode({ value, dense, onChange }: SelectMatchModeProps) {
+function SelectMatchMode({ value, dense, onChange, ...restProps }: SelectMatchModeProps) {
   const menu = useDropdown();
   const size = useWindowSize();
 
@@ -32,7 +33,7 @@ function SelectMatchMode({ value, dense, onChange }: SelectMatchModeProps) {
   );
 
   return (
-    <div ref={menu.ref}>
+    <div ref={menu.ref} {...restProps}>
       <SelectorButton
         transparent
         titleHtml='Настройка фильтрации <br/>по проверяемым атрибутам'

rsconcept/frontend/src/components/select/SelectWordForm.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { useCallback } from 'react';
 
 import { Grammeme } from '@/models/language';
@@ -7,13 +8,14 @@ import { prefixes } from '@/utils/constants';
 import { DefaultWordForms, IGrammemeOption, SelectorGrammemes } from '@/utils/selectors';
 
 import WordformButton from '../../dialogs/DlgEditReference/WordformButton';
+import { CProps } from '../props';
 
-interface SelectWordFormProps {
+interface SelectWordFormProps extends CProps.Styling {
   selected: IGrammemeOption[];
   setSelected: React.Dispatch<React.SetStateAction<IGrammemeOption[]>>;
 }
 
-function SelectWordForm({ selected, setSelected }: SelectWordFormProps) {
+function SelectWordForm({ selected, setSelected, className, ...restProps }: SelectWordFormProps) {
   const handleSelect = useCallback(
     (grams: Grammeme[]) => {
       setSelected(SelectorGrammemes.filter(({ value }) => grams.includes(value as Grammeme)));
@@ -22,7 +24,7 @@ function SelectWordForm({ selected, setSelected }: SelectWordFormProps) {
   );
 
   return (
-    <div className='text-xs sm:text-sm'>
+    <div className={clsx('text-xs sm:text-sm', className)} {...restProps}>
       {DefaultWordForms.slice(0, 12).map((data, index) => (
         <WordformButton
           key={`${prefixes.wordform_list}${index}`}

rsconcept/frontend/src/components/ui/Modal.tsx

@@ -81,7 +81,7 @@ function Modal({
         className={clsx(
           'z-modal',
           'absolute bottom-1/2 left-1/2 -translate-x-1/2 translate-y-1/2',
-          'border shadow-md',
+          'border rounded-xl',
           'clr-app'
         )}
         initial={{ ...animateModal.initial }}

rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TabTemplate.tsx

@@ -118,8 +118,10 @@ function TabTemplate({ state, partialUpdate, templateSchema }: TabTemplateProps)
         data={filteredData}
         onSelectValue={cst => partialUpdate({ prototype: cst })}
         prefixID={prefixes.cst_template_ist}
+        className='rounded-t-none'
         rows={8}
       />
+
       <TextArea
         id='dlg_template_term'
         disabled