@koobiq/react-components 0.22.0 → 0.23.0

package/dist/components/SearchInput/SearchInput.js

@@ -126,8 +126,8 @@ const SearchInput = forwardRef(
       /* @__PURE__ */ jsx(FormField.Label, { ...labelProps, children: label }),
       /* @__PURE__ */ jsxs("div", { className: s.body, children: [
         /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { ...inputProps }) }),
-        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) })
+        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
+        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
       ] })
     ] });
   }

package/dist/components/Select/Select.js

@@ -194,8 +194,8 @@ function SelectRender(props, ref) {
           isDisabled: props.isDisabled,
           isRequired: props.isRequired
         }) }) }),
-        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) })
+        /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
+        /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
       ] })
     ] }),
     /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })

package/dist/components/Select/intl.js

@@ -3,13 +3,13 @@ const intlMessages = {
     "empty items": "Нет вариантов выбора",
     loading: "Загрузка…",
     "selected items": "Выбранные элементы",
-    more: ({ count }) => `еще ${count}`
+    more: ({ count }) => `+${count}`
   },
   "en-US": {
     "empty items": "No options available",
     "selected items": "Selected items",
     loading: "Loading…",
-    more: ({ count }) => `${count} more`
+    more: ({ count }) => `+${count}`
   }
 };
 export {

package/dist/components/Table/components/TableColumnHeader/TableColumnHeader.js

@@ -37,7 +37,7 @@ function TableColumnHeader({
   const defaultIcon = direction === "ascending" ? /* @__PURE__ */ jsx(IconChevronUpS16, {}) : /* @__PURE__ */ jsx(IconChevronDownS16, {});
   const iconToRender = renderSortIcon?.({ direction, isActive }) ?? defaultIcon;
   const columnSortIcon = allowsSorting && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: clsx(s.sortIcon, isActive && s.active), children: iconToRender });
-  const isResizable = allowsResizing && layoutState;
+  const isResizable = !!(allowsResizing && layoutState);
   return /* @__PURE__ */ jsx(
     "th",
     {
@@ -69,8 +69,8 @@ function TableColumnHeader({
           Resizer,
           {
             column,
-            layoutState,
             onResize,
+            layoutState,
             onResizeEnd,
             onResizeStart
           }

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.js

@@ -60,8 +60,8 @@ const TextareaContextConsumer = forwardRef((props, ref) => {
     /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
     /* @__PURE__ */ jsxs("div", { className: s.body, children: [
       /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { as: "textarea", ...textareaProps }) }),
-      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-      /* @__PURE__ */ jsx(FormField.Error, { ...errorProps })
+      /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }),
+      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
     ] })
   ] });
 });

package/dist/components/TimePicker/TimePicker.js

@@ -120,8 +120,8 @@ function TimePickerRender(props, ref) {
           ] })
         }
       ),
-      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) })
+      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
+      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
     ] })
   ] });
 }

package/dist/components/index.d.ts

@@ -43,6 +43,7 @@ export * from './Autocomplete';
 export * from './ToastProvider';
 export * from './Breadcrumbs';
 export * from './Accordion';
+export * from './ContenPanel';
 export * from './layout';
 export { useListData, useAsyncList, type ListData, type ListOptions, type AsyncListData, type AsyncListOptions, type AsyncListLoadFunction, type AsyncListLoadOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
 export { useRouter, useLocale, useFilter, type Locale, type SortDescriptor, type Selection, RouterProvider, useDateFormatter, } from '@koobiq/react-core';

package/dist/index.js

@@ -108,6 +108,9 @@ import { Accordion, AccordionComponent } from "./components/Accordion/Accordion.
 import { AccordionGroup } from "./components/Accordion/components/AccordionGroup/AccordionGroup.js";
 import { AccordionGroupStateContext } from "./components/Accordion/components/AccordionGroup/AccordionGroupContext.js";
 import { AccordionStateContext } from "./components/Accordion/AccordionStateContext.js";
+import { ContentPanel } from "./components/ContenPanel/ContentPanel.js";
+import { ContentPanelContainer } from "./components/ContenPanel/components/ContentPanelContainer/ContentPanelContainer.js";
+import { ContentPanelContainerContext } from "./components/ContenPanel/components/ContentPanelContainer/ContentPanelContainerContext.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -132,6 +135,9 @@ export {
   Checkbox,
   CheckboxGroup,
   Container,
+  ContentPanel,
+  ContentPanelContainer,
+  ContentPanelContainerContext,
   DateInput,
   DateInputRender,
   DatePicker,

package/dist/style.css

@@ -3032,6 +3032,11 @@
   overflow: auto;
 }
 
+.kbq-dialog-content-8f3b2a:focus-visible {
+  outline: 2px solid var(--kbq-states-line-focus-theme);
+  outline-offset: -2px;
+}
+
 .kbq-dialog-content-8f3b2a:first-child {
   padding-block-start: var(--kbq-size-xxl);
 }
@@ -5181,6 +5186,91 @@
   flex-direction: column;
   display: flex;
 }
+.kbq-contentpanel-3541ee {
+  --content-panel-transition-duration: .3s;
+  --content-panel-start-position: 100%;
+  --content-panel-resizer-width: var(--kbq-size-l);
+  box-sizing: border-box;
+  block-size: 100%;
+  inline-size: 50%;
+  transition: transform var(--kbq-transition-slow), inline-size var(--kbq-transition-slow);
+  transition-duration: var(--content-panel-transition-duration);
+  margin-inline-start: var(--kbq-size-l);
+}
+
+.kbq-contentpanel-resizable-71e8a7 {
+  inline-size: unset;
+}
+
+body[data-resizing="true"] .kbq-contentpanel-3541ee {
+  transition: none;
+}
+
+.kbq-contentpanel-3541ee[data-transition="entering"], .kbq-contentpanel-3541ee[data-transition="entered"] {
+  transform: translate(0);
+}
+
+.kbq-contentpanel-3541ee[data-transition="exiting"], .kbq-contentpanel-3541ee[data-transition="exited"] {
+  transform: translate(var(--content-panel-start-position), 0);
+}
+
+.kbq-contentpanel-dialog-872768 {
+  border-radius: var(--kbq-size-l);
+  background-color: var(--kbq-background-card);
+  border: 1px solid var(--kbq-line-contrast-less);
+  overflow: unset;
+  block-size: inherit;
+}
+
+.kbq-contentpanel-resizer-a708c1 {
+  cursor: ew-resize;
+  block-size: 100%;
+  inline-size: var(--content-panel-resizer-width);
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: calc(var(--content-panel-resizer-width) / -2);
+}
+.kbq-contentpanelcontainer-476965 {
+  --content-body-transition-duration: .3s;
+  outline: none;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.kbq-contentpanelcontainer-body-b7b172 {
+  --content-panel-inline-size: ;
+  will-change: inline-size;
+  inline-size: 100%;
+  overflow: auto;
+}
+
+.kbq-contentpanelcontainer-476965:has(.kbq-contentpanelcontainer-panel-03cf65[data-transition="entering"]) .kbq-contentpanelcontainer-body-b7b172 {
+  inline-size: calc(100% - var(--content-panel-inline-size));
+  transition: inline-size var(--kbq-transition-slow);
+  transition-duration: var(--content-body-transition-duration);
+}
+
+.kbq-contentpanelcontainer-476965:has(.kbq-contentpanelcontainer-panel-03cf65[data-transition="entered"]) .kbq-contentpanelcontainer-body-b7b172 {
+  inline-size: calc(100% - var(--content-panel-inline-size));
+}
+
+.kbq-contentpanelcontainer-476965:has(.kbq-contentpanelcontainer-panel-03cf65[data-transition="exiting"]) .kbq-contentpanelcontainer-body-b7b172 {
+  inline-size: 100%;
+  transition: inline-size var(--kbq-transition-slow);
+  transition-duration: var(--content-body-transition-duration);
+}
+
+.kbq-contentpanelcontainer-476965:has(.kbq-contentpanelcontainer-panel-03cf65[data-transition="exited"]) .kbq-contentpanelcontainer-body-b7b172 {
+  inline-size: 100%;
+}
+
+.kbq-contentpanelcontainer-panel-03cf65 {
+  z-index: var(--kbq-layer-absolute);
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
     "@koobiq/design-tokens": "^3.15.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/react-core": "0.22.0",
-    "@koobiq/logger": "0.22.0",
-    "@koobiq/react-icons": "0.22.0",
-    "@koobiq/react-primitives": "0.22.0"
+    "@koobiq/logger": "0.23.0",
+    "@koobiq/react-icons": "0.23.0",
+    "@koobiq/react-primitives": "0.23.0",
+    "@koobiq/react-core": "0.23.0"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.15.0",