@fibery/ui-kit 1.20.0 → 1.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.20.0",
+  "version": "1.20.1",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -25,6 +25,7 @@
     "src/button",
     "src/emoji-picker/**/*.ts*",
     "src/toast/**/*.ts*",
+    "src/lists/**/*.ts*",
     "src/a11y-color.ts"
   ],
   "license": "UNLICENSED",
@@ -67,9 +68,9 @@
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
+    "@fibery/emoji-data": "2.2.1",
     "@fibery/helpers": "1.2.0",
-    "@fibery/react": "1.3.0",
-    "@fibery/emoji-data": "2.2.1"
+    "@fibery/react": "1.3.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/lists/list-item.tsx

@@ -0,0 +1,139 @@
+import {styled} from "@linaria/react";
+import {forwardRef, HTMLAttributes, PropsWithChildren, ReactNode} from "react";
+import {border, space, textStyles, themeVars} from "../design-system";
+import {css, cx} from "@linaria/core";
+
+export interface ListItemGeneralProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  selected?: boolean;
+  done?: boolean;
+  focused?: boolean;
+  hovered?: boolean;
+}
+const NATUAL_HOVER_CLASS = "natural-hover";
+const NATUAL_FOCUS_CLASS = "natural-focus";
+const NATURAL_HOVER = `&.${NATUAL_HOVER_CLASS}:hover`;
+const NATURAL_FOCUS = `&.${NATUAL_FOCUS_CLASS}:focus`;
+
+const ListItemGeneralRoot = styled.div`
+  max-width: 100%;
+  flex-basis: 100%;
+  display: flex;
+  cursor: default;
+  align-items: center;
+  align-content: center;
+  padding: 0 ${space.s4}px;
+  column-gap: ${space.s4}px;
+  ${{...textStyles.regular}};
+  color: ${themeVars.textColor};
+  border-radius: ${border.radius6}px;
+  background-color: ${themeVars.colorBgListItemGeneral};
+  transition: background-color;
+  ${NATURAL_HOVER},
+  &.hover {
+    cursor: pointer;
+    background-color: ${themeVars.colorBgListItemGeneralHover};
+  }
+
+  ${NATURAL_FOCUS}, &.focus {
+    background-color: ${themeVars.colorBgListItemGeneralFocus};
+    ${NATURAL_HOVER},
+    &.hover {
+      background-color: ${themeVars.colorBgListItemGeneralFocus};
+    }
+  }
+  &.done {
+    cursor: not-allowed;
+    color: ${themeVars.colorTextListItemGeneralDisabled};
+    background-color: ${themeVars.colorBgListItemGeneralDisabled};
+    ${NATURAL_HOVER},
+    &.hover,
+    ${NATURAL_FOCUS},
+    &.focus {
+      background-color: ${themeVars.colorBgListItemGeneralDisabled};
+    }
+    > * {
+      opacity: ${themeVars.opacityListItemGeneralDisabled};
+    }
+  }
+  &.selected {
+    cursor: default;
+    background-color: ${themeVars.colorBgListItemGeneralSelected};
+    ${NATURAL_HOVER},
+    &.hover {
+      background-color: ${themeVars.colorBgListItemGeneralSelectedHover};
+    }
+    ${NATURAL_FOCUS},
+    &.focus {
+      background-color: ${themeVars.colorBgListItemGeneralSelectedFocus};
+    }
+  }
+`;
+
+/**
+ * This should be responsible for all flat list items existing in UI in Fibery. Options, action menus and etc.
+ * You can enforce it's state with props focused, hovered, selected, done (use it for disabled too)
+ */
+export const ListItem = forwardRef<HTMLDivElement, ListItemGeneralProps>(
+  ({selected, focused, hovered, done, className, children, ...rest}, ref) => {
+    return (
+      <ListItemGeneralRoot
+        {...rest}
+        className={cx(
+          className,
+          hovered === undefined && NATUAL_HOVER_CLASS,
+          focused === undefined && NATUAL_FOCUS_CLASS,
+          focused && "focus",
+          hovered && "hover",
+          selected && "selected",
+          done && "done"
+        )}
+        ref={ref}
+      >
+        {children}
+      </ListItemGeneralRoot>
+    );
+  }
+);
+
+export interface ListItemCompoundLayoutProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+  className?: string;
+  before?: ReactNode;
+  after?: ReactNode;
+  contentClassName?: string;
+  beforeClassName?: string;
+  afterClassName?: string;
+}
+
+const ListItemCompoundLayoutRoot = css`
+  flex-basis: 100%;
+  display: flex;
+  justify-content: stretch;
+  align-items: center;
+  overflow: hidden;
+`;
+const ListItemCompoundLayoutContainerStyle = css`
+  display: flex; // never new line
+  align-items: center;
+`;
+const ListItemCompoundLayoutContentStyle = css`
+  ${{...textStyles.regular}}
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 0 0 ${space.s4}px;
+  white-space: nowrap;
+  min-width: 0; // allows ellipsis in flex contexts :)
+  max-width: 100%;
+  width: 100%;
+`;
+export const ListItemLayout = forwardRef<HTMLDivElement, ListItemCompoundLayoutProps>(
+  ({before, after, className, afterClassName, beforeClassName, contentClassName, children, ...rest}, ref) => {
+    return (
+      <div {...rest} ref={ref} className={cx(className, ListItemCompoundLayoutRoot)}>
+        {before ? <div className={cx(ListItemCompoundLayoutContainerStyle, beforeClassName)}>{before}</div> : null}
+        <div className={cx(ListItemCompoundLayoutContentStyle, contentClassName)}>{children}</div>
+        {after ? <div className={cx(ListItemCompoundLayoutContainerStyle, afterClassName)}>{after}</div> : null}
+      </div>
+    );
+  }
+);