onekijs-ui 0.16.2 → 0.16.3

package/dist/styles/size.d.ts

@@ -1,10 +1,10 @@
 import { OverscrollBehaviorBlockProperty, OverscrollBehaviorInlineProperty, OverscrollBehaviorXProperty, OverscrollBehaviorYProperty } from 'csstype';
-export declare const width: import("./typings").CssProperty<string | 0 | 1 | 2 | 10 | 20 | 3 | 4 | 5 | 6 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64>;
-export declare const minWidth: import("./typings").CssProperty<string | 0 | 1 | 2 | 10 | 20 | 3 | 4 | 5 | 6 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64>;
-export declare const maxWidth: import("./typings").CssProperty<string | 0 | 1 | 2 | 10 | 20 | 3 | 4 | 5 | 6 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64>;
-export declare const height: import("./typings").CssProperty<string | 0 | 1 | 2 | 10 | 20 | 3 | 4 | 5 | 6 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64>;
-export declare const minHeight: import("./typings").CssProperty<string | 0 | 1 | 2 | 10 | 20 | 3 | 4 | 5 | 6 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64>;
-export declare const maxHeight: import("./typings").CssProperty<string | 0 | 1 | 2 | 10 | 20 | 3 | 4 | 5 | 6 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64>;
+export declare const width: import("./typings").CssProperty<string | 0 | 4 | 5 | 6 | 8 | 10 | 1 | 2 | 3 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
+export declare const minWidth: import("./typings").CssProperty<string | 0 | 4 | 5 | 6 | 8 | 10 | 1 | 2 | 3 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
+export declare const maxWidth: import("./typings").CssProperty<string | 0 | 4 | 5 | 6 | 8 | 10 | 1 | 2 | 3 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
+export declare const height: import("./typings").CssProperty<string | 0 | 4 | 5 | 6 | 8 | 10 | 1 | 2 | 3 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
+export declare const minHeight: import("./typings").CssProperty<string | 0 | 4 | 5 | 6 | 8 | 10 | 1 | 2 | 3 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
+export declare const maxHeight: import("./typings").CssProperty<string | 0 | 4 | 5 | 6 | 8 | 10 | 1 | 2 | 3 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64>;
 export declare const overscrollBehavior: import("./typings").CssProperty<string>;
 export declare const overscrollBehaviorBlock: import("./typings").CssProperty<OverscrollBehaviorBlockProperty>;
 export declare const overscrollBehaviorInline: import("./typings").CssProperty<OverscrollBehaviorInlineProperty>;

package/dist/styles/typography.d.ts

@@ -20,7 +20,7 @@ export declare const fontVariantLigatures: import("./typings").CssProperty<strin
 export declare const fontVariantNumeric: import("./typings").CssProperty<string>;
 export declare const fontVariantPosition: import("./typings").CssProperty<FontVariantPositionProperty>;
 export declare const fontVariationSettings: import("./typings").CssProperty<string>;
-export declare const fontWeight: import("./typings").CssProperty<number | "bold" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "medium" | "lighter" | "light" | "black" | "normal" | "thin" | "hairline" | "semibold" | "extrabold" | "bolder">;
+export declare const fontWeight: import("./typings").CssProperty<number | "medium" | "lighter" | "light" | "black" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "thin" | "hairline" | "normal" | "semibold" | "bold" | "extrabold" | "bolder">;
 export declare const hyphens: import("./typings").CssProperty<HyphensProperty>;
 export declare const letterSpacing: import("./typings").CssProperty<LetterSpacingProperty<TLength>>;
 export declare const lineHeight: import("./typings").CssProperty<string | number>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "onekijs-ui",
   "private": false,
-  "version": "0.16.2",
+  "version": "0.16.3",
   "description": "Opiniated React framework built on top of Next.js",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -32,7 +32,7 @@
   "dependencies": {
     "@clr/city": "^1.1.0",
     "@popperjs/core": "^2.4.4",
-    "onekijs-framework": "^0.16.2",
+    "onekijs-framework": "^0.16.3",
     "react-icons": "^4.2.0",
     "react-popper": "^2.2.3",
     "react-popper-tooltip": "^4.2.0",
@@ -52,5 +52,5 @@
     "react-dom": ">=18"
   },
   "sideEffects": false,
-  "gitHead": "668089bd963baabbd904caf58ed7441da467c65b"
+  "gitHead": "c368e1d54b7e1efa2e21804a089cbfe4d8fd2d75"
 }

package/src/components/icon/LoadingIcon.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { stroke } from '../../styles/svg';
+import { ComponentStyle } from '../../styles/typings';
 import { addClassname } from '../../utils/style';
 import { IconProps } from './typings';
 
@@ -40,8 +41,12 @@ const iconCircleKeyFrame = keyframes`
   }
 `;
 
-export default styled(IconComponent)`
-  ${({ width: cssWidth = '16px', height: cssHeight = '16px', color: cssColor = 'primary' }) => css`
+const iconStyle: ComponentStyle<IconProps> = ({
+  width: cssWidth = '16px',
+  height: cssHeight = '16px',
+  color: cssColor = 'primary',
+}) => {
+  return css`
     height: ${cssHeight};
     width: ${cssWidth};
     display: inline-flex;
@@ -60,5 +65,9 @@ export default styled(IconComponent)`
       stroke-width: 10px;
       transform-origin: 50% 50%;
     }
-  `}
+  `;
+};
+
+export default styled(IconComponent)`
+  ${iconStyle}
 `;

package/src/components/select/FormSelect.tsx

@@ -5,19 +5,17 @@ import useFieldLayout from '../field/hooks/useFieldLayout';
 import { FormSelectProps, SelectItem, SelectProps } from './typings';
 
 const FormSelect = <T = any, I extends SelectItem<T> = SelectItem<T>>(props: FormSelectProps<T, I>) => {
+  const defaultValue = props.defaultValue === undefined ? (props.multiple ? [] : null) : props.defaultValue;
   const [fieldLayoutProps, fieldComponentProps] = useFieldLayout<SelectProps<T, I>>(
-    Object.assign(
-      {
-        defaultValue: props.defaultValue === undefined ? (props.multiple ? [] : null) : props.defaultValue,
-      },
-      props,
-    ),
+    Object.assign({}, props, {
+      defaultValue,
+    }),
   );
   const Component = props.FieldComponent || Select;
 
   return (
     <FieldLayout {...fieldLayoutProps} required={props.required}>
-      <Component {...fieldComponentProps} required={props.required} defaultValue={props.defaultValue} />
+      <Component {...fieldComponentProps} required={props.required} defaultValue={defaultValue} />
     </FieldLayout>
   );
 };

package/src/components/select/SelectService.ts

@@ -61,7 +61,9 @@ class SelectService<
       yield this._setValidDefaultValue(
         this.config === undefined || this.config.nullable || !this.state.items
           ? null
-          : this.config.defaultValue === undefined || this.state.defaultValue === null
+          : this.config.defaultValue === undefined ||
+            this.config.defaultValue === null ||
+            this.state.defaultValue === null
           ? this.state.items[0]?.data || null
           : null,
       );

package/src/components/select/components/ControlledSelectComponent.tsx

@@ -109,6 +109,7 @@ const ControlledSelectComponent = <
   clickable = true,
   ListComponent = DefaultSelectListComponent,
   autoCompleteSearch = true,
+  maxDisplayTokens,
 }: ControllerSelectProps<T, I, S, C>) => {
   if (nullable === undefined) {
     nullable = !required;
@@ -152,6 +153,7 @@ const ControlledSelectComponent = <
       sameWidth,
       overscan,
       autoCompleteSearch,
+      maxDisplayTokens,
     };
   } else {
     service.config = {
@@ -188,6 +190,7 @@ const ControlledSelectComponent = <
       sameWidth,
       overscan,
       autoCompleteSearch,
+      maxDisplayTokens,
     };
   }
 
@@ -613,6 +616,7 @@ const ControlledSelectComponent = <
           ref={triggerRef}
           disabled={disabled}
           autoCompleteSearch={autoCompleteSearch}
+          maxDisplayTokens={maxDisplayTokens}
         />
         <Dropdown
           attachToBody={attachDropdownToBody}

package/src/components/select/components/SelectInputComponent.tsx

@@ -27,6 +27,7 @@ const SelectInputComponent = <T, I extends SelectItem<T> = SelectItem<T>>(
     searchable,
     minChars,
     disabled,
+    maxDisplayTokens,
   }: SelectInputProps<T, I>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) => {
@@ -199,8 +200,9 @@ const SelectInputComponent = <T, I extends SelectItem<T> = SelectItem<T>>(
 
   return (
     <div className={className} style={style} ref={ref}>
-      <div className="o-select-input-data">
-        {multiple && <SelectTokensComponent tokens={tokens} onRemove={onRemove} />}
+      <div className="o-select-input-data" onClick={searchable ? undefined : onClick}>
+        {multiple && <SelectTokensComponent tokens={tokens} onRemove={onRemove} maxDisplayTokens={maxDisplayTokens} />}
+
         <div className="o-select-input-wrapper">
           <span ref={autoSizeRef} className="o-select-input-auto-sizer" />
           <input
@@ -212,7 +214,7 @@ const SelectInputComponent = <T, I extends SelectItem<T> = SelectItem<T>>(
             onChange={handleChange}
             onKeyDown={handleKeyDown}
             onKeyUp={handleKeyUp}
-            value={proxyValue}
+            value={searchable ? proxyValue : ''}
             onClick={onClick}
             autoCapitalize="none"
             autoComplete="off"
@@ -220,9 +222,10 @@ const SelectInputComponent = <T, I extends SelectItem<T> = SelectItem<T>>(
             spellCheck="false"
             disabled={disabled}
           />
+
           {!searchable && (
             <span className="o-select-input o-select-input-text" onClick={onClick}>
-              {proxyValue || ''}
+              {multiple ? '' : proxyValue || ''}
             </span>
           )}
         </div>

package/src/components/select/components/SelectTokenComponent.tsx

@@ -14,8 +14,9 @@ const SelectTokenComponent = <T, I extends SelectItem<T> = SelectItem<T>>({
       <div
         className="o-select-token-remove"
         key="o-select-token-remove"
-        onClick={() => {
+        onClick={(e) => {
           onRemove(token, index);
+          e.stopPropagation();
         }}
       >
         &#10006;

package/src/components/select/components/SelectTokensComponent.tsx

@@ -6,6 +6,7 @@ import SelectTokenComponent from './SelectTokenComponent';
 const SelectTokensComponent = <T, I extends SelectItem<T> = SelectItem<T>>({
   tokens,
   onRemove,
+  maxDisplayTokens,
 }: SelectTokensProps<T, I>) => {
   const widthRef = useRef<number>();
 
@@ -26,24 +27,34 @@ const SelectTokensComponent = <T, I extends SelectItem<T> = SelectItem<T>>({
   };
 
   if (tokens !== undefined) {
-    return (
-      <TransitionGroup component={null}>
-        {tokens.map((token, index) => (
-          <CSSTransition
-            timeout={150}
-            classNames="o-select-token-animation"
-            mountOnEnter={true}
-            appear={true}
-            unmountOnExit={true}
-            key={`o-select-token-${token.id}`}
-            onEntering={onEntering}
-            onExiting={onExiting}
-          >
-            <SelectTokenComponent token={token} onRemove={onRemove} index={index} />
-          </CSSTransition>
-        ))}
-      </TransitionGroup>
-    );
+    if (!maxDisplayTokens || tokens.length <= maxDisplayTokens) {
+      return (
+        <TransitionGroup component={null}>
+          {tokens.map((token, index) => (
+            <CSSTransition
+              timeout={150}
+              classNames="o-select-token-animation"
+              mountOnEnter={true}
+              appear={true}
+              unmountOnExit={true}
+              key={`o-select-token-${token.id}`}
+              onEntering={onEntering}
+              onExiting={onExiting}
+            >
+              <SelectTokenComponent token={token} onRemove={onRemove} index={index} />
+            </CSSTransition>
+          ))}
+        </TransitionGroup>
+      );
+    } else {
+      return (
+        <div className="o-select-token o-select-token-disabled">
+          <div className="o-select-token-text" key="o-select-token-text">
+            {tokens.length} selected
+          </div>
+        </div>
+      );
+    }
   }
   return null;
 };

package/src/components/select/style.ts

@@ -24,6 +24,7 @@ import {
   marginY,
   padding,
   paddingLeft,
+  paddingRight,
   paddingTop,
   paddingX,
   paddingY,
@@ -227,7 +228,8 @@ const selectStyle: ComponentStyle<SelectProps> = ({ theme, clickable = true, sea
       ${flexGrow(1)}
       ${flexWrap('wrap')}
       ${alignItems('center')}
-      ${paddingX('sm')}
+      ${paddingLeft('sm')}
+      ${paddingRight(searchable ? 'sm' : 0)}
       ${maxWidth('calc(100% - 32px)')}
     }
 
@@ -272,6 +274,13 @@ const selectStyle: ComponentStyle<SelectProps> = ({ theme, clickable = true, sea
       ${flexGrow(1)}
       ${paddingLeft('sm')}
     }
+
+    .o-select-token-disabled {
+      ${paddingRight('sm')}
+      ${backgroundColor('dark')}
+      ${color('lightest')}
+    }
+
     .o-select-token-remove {
       ${cursor('pointer')}
       ${color('white', { hover: 'danger' })}

package/src/components/select/typings.ts

@@ -98,6 +98,7 @@ export interface SelectInputProps<T = any, I extends SelectItem<T> = SelectItem<
   clickable: boolean;
   minChars: number;
   autoCompleteSearch: boolean;
+  maxDisplayTokens?: number;
 }
 
 export type SelectGroup =
@@ -191,6 +192,7 @@ export type SelectConfig<T = any, I extends SelectItem<T> = SelectItem<T>> = Omi
   sameWidth?: boolean;
   ListComponent?: React.FC<SelectListComponentProps<T, I>>;
   autoCompleteSearch?: boolean;
+  maxDisplayTokens?: number;
 };
 
 export type SelectListComponentProps<T = any, I extends SelectItem<T> = SelectItem<T>> = CollectionListProps<T, I> & {
@@ -206,6 +208,7 @@ export type SelectState<T = any, I extends SelectItem<T> = SelectItem<T>> = List
 export interface SelectTokensProps<T = any, I extends SelectItem<T> = SelectItem<T>> {
   tokens?: I[];
   onRemove: SelectOptionHandler<T, I>;
+  maxDisplayTokens?: number;
 }
 
 export interface SelectTokenProps<T = any, I extends SelectItem<T> = SelectItem<T>> {

package/src/components/table/components/ControllerTableComponent.tsx

@@ -4,10 +4,10 @@ import { TableConfigContext } from '../hooks/useTableConfig';
 import { TableServiceContext } from '../hooks/useTableService';
 import { TableStateContext } from '../hooks/useTableState';
 import { ControllerTableProps, TableConfig } from '../typings';
-import ExpandedCellComponent from './cells/ExpandedCellComponent';
 import TableBodyComponent from './TableBodyComponent';
 import TableFooterComponent from './TableFooterComponent';
 import TableHeaderComponent from './TableHeaderComponent';
+import ExpandedCellComponent from './cells/ExpandedCellComponent';
 
 const ControllerTableComponent: React.FC<ControllerTableProps> = ({
   autoRefresh,

package/src/components/table/components/filters/TableSelectFilterComponent.tsx

@@ -31,7 +31,7 @@ const addFilter = (
   }
 };
 
-const operators: TableFilterOperator[] = [{ text: 'equals', operator: 'eq', not: false }];
+const operators: TableFilterOperator[] = [{ text: 'any of', operator: 'in', not: false }];
 
 const TableSelectFilterComponent: React.FC<TableHeaderCellProps & { dataSource: [unknown, string][] | string[] }> = ({
   column,
@@ -73,6 +73,7 @@ const TableSelectFilterComponent: React.FC<TableHeaderCellProps & { dataSource:
         onChange={onValueChange}
         size="xsmall"
         attachDropdownToBody={true}
+        maxDisplayTokens={1}
       />
     </div>
   );

package/src/components/tooltip/components/TooltipComponent.tsx

@@ -1,11 +1,12 @@
 import { FCC } from 'onekijs-framework';
-import React from 'react';
+import React, { useEffect, useId, useState } from 'react';
 import { usePopperTooltip } from 'react-popper-tooltip';
 import { addClassname } from '../../../utils/style';
 import { TooltipProps } from '../typings';
 
 const TooltipComponent: FCC<TooltipProps> = (props) => {
   const { content, className, popperOptions, children, delayHide = 300, ...tooltipConfig } = props;
+  const [show, setShow] = useState<boolean>(true);
   const tooltipOptions = Object.assign(
     {
       interactive: true,
@@ -21,11 +22,32 @@ const TooltipComponent: FCC<TooltipProps> = (props) => {
   const { style: containerStyle, ...containerProps } = getTooltipProps({ className: 'o-tooltip-container' });
   const { style: arrowStyle, ...arrowProps } = getArrowProps({ className: 'o-tooltip-arrow' });
   const classNames = addClassname('o-tooltip', className);
+  const uid = useId();
+
+  useEffect(() => {
+    if (visible) {
+      const event = new CustomEvent<string>('tooltipVisible', {
+        detail: uid,
+      });
+      document.dispatchEvent(event);
+    }
+  }, [visible, uid]);
+
+  useEffect(() => {
+    const listener = (e: any) => {
+      setShow(e.detail === uid);
+    };
+    document.addEventListener('tooltipVisible', listener);
+
+    return () => {
+      document.removeEventListener('tooltipVisible', listener);
+    };
+  }, [uid]);
 
   return (
     <div className={classNames} ref={setTriggerRef}>
       {children}
-      {visible && content && (
+      {show && visible && content && (
         <div ref={setTooltipRef} style={containerStyle as React.CSSProperties} {...containerProps}>
           <div style={arrowStyle as React.CSSProperties} {...arrowProps} />
           {content}